type wrangling

packages/design-system/src/SelectTimeZone.tsx

@@ -3,7 +3,7 @@
 import { Maybe } from '@metafam/utils';
 import cityTimeZones from 'city-timezones';
 import React, { useCallback, useState } from 'react';
-import { GroupBase, StylesConfig } from 'react-select';
+import { CSSObjectWithLabel, GroupBase, StylesConfig } from 'react-select';
 import TimeZoneSelect, {
   i18nTimezones as allTimezones,
   ITimezone,
@@ -26,17 +26,18 @@ export type TimeZoneType = {
   name: string;
   value: string; // for compatibility w/ select option
 };
+export { ITimezoneOption };
 
 export interface TimeZoneSelectProps extends Record<string, unknown> {
   value?: ITimezone;
   onBlur?: () => void;
-  onChange?: (timeZone: unknown) => void;
+  onChange?: (timeZone: ITimezoneOption) => void;
   labelStyle: 'original' | 'altName' | 'abbrev';
 }
 
 const timeZoneSelectStyles: typeof chakraesqueStyles = {
   ...chakraesqueStyles,
-  container: (styles, props) => ({
+  container: (styles: CSSObjectWithLabel, props) => ({
     ...styles,
     ...chakraesqueStyles.container?.(styles, props),
     width: '100%',
@@ -150,7 +151,7 @@ export const SelectTimeZone: React.FC<TimeZoneSelectProps> = ({
       timezones={Object.fromEntries(
         options.map(({ location, title }) => [location, title ?? '']),
       )}
-      onChange={(tz) => onChange?.((tz as ITimezoneOption).value)}
+      onChange={(tz) => onChange?.(tz as ITimezoneOption)}
       {...{ onInputChange }}
       {...props}
     />

packages/design-system/src/index.ts

@@ -19,6 +19,7 @@ export { metaFilterSelectStyles, SelectSearch } from './SelectSearch';
 export {
   getCityZonesFor,
   getTimeZoneFor,
+  ITimezoneOption,
   LabeledOptions,
   LabeledValue,
   SelectTimeZone,

packages/web/components/EditProfileModal.tsx

@@ -19,6 +19,7 @@ import {
   InputLeftElement,
   InputProps,
   InputRightAddon,
+  ITimezoneOption,
   Link,
   MetaHeading,
   Modal,
@@ -192,9 +193,10 @@ export const EditProfileModal: React.FC<ProfileEditorProps> = ({
   const { ceramic, address, chainId } = useWeb3();
   const toast = useToast();
   const description = watch('description');
-  const remaining = useMemo(() => MAX_DESC_LEN - (description?.length ?? 0), [
-    description,
-  ]);
+  const remaining = useMemo(
+    () => MAX_DESC_LEN - (description?.length ?? 0),
+    [description],
+  );
 
   const fields = Object.fromEntries(
     Object.keys(AllProfileFields).map((key) => {
@@ -760,7 +762,7 @@ export const EditProfileModal: React.FC<ProfileEditorProps> = ({
                   render={({ field: { onChange, ref, ...props } }) => (
                     <SelectTimeZone
                       labelStyle="abbrev"
-                      onChange={(tz) => {
+                      onChange={(tz: ITimezoneOption) => {
                         onChange(tz.value);
                       }}
                       {...props}