@terreno/ui 0.9.3 → 0.11.0

package/src/DateUtilities.tsx

@@ -1,5 +1,12 @@
 import {DateTime} from "luxon";
 
+const getErrorMessage = (error: unknown): string => {
+  if (error instanceof Error) {
+    return error.message;
+  }
+  return String(error);
+};
+
 function getDate(date: string, {timezone}: {timezone?: string} = {}): DateTime {
   if (!date) {
     throw new Error("Passed undefined");
@@ -57,8 +64,8 @@ export function humanDate(
   let clonedDate;
   try {
     clonedDate = getDate(date, {timezone});
-  } catch (error: any) {
-    throw new Error(`humanDate: ${error.message}`);
+  } catch (error: unknown) {
+    throw new Error(`humanDate: ${getErrorMessage(error)}`);
   }
   if (isTomorrow(date, {timezone})) {
     return "Tomorrow";
@@ -91,8 +98,8 @@ export function humanDateAndTime(
   let clonedDate;
   try {
     clonedDate = getDate(date, {timezone});
-  } catch (error: any) {
-    throw new Error(`humanDateAndTime: ${error.message}`);
+  } catch (error: unknown) {
+    throw new Error(`humanDateAndTime: ${getErrorMessage(error)}`);
   }
   // This should maybe use printTime()
   let time: string = "";
@@ -158,8 +165,8 @@ export const printDate = (
   let clonedDate;
   try {
     clonedDate = getDate(date, {timezone});
-  } catch (error: any) {
-    throw new Error(`printDate: ${error.message}`);
+  } catch (error: unknown) {
+    throw new Error(`printDate: ${getErrorMessage(error)}`);
   }
 
   return clonedDate.toLocaleString(DateTime.DATE_SHORT);
@@ -213,8 +220,8 @@ export function printTime(
   }
   try {
     clonedDate = getDate(date, {timezone});
-  } catch (error: any) {
-    throw new Error(`printTime: ${error.message}`);
+  } catch (error: unknown) {
+    throw new Error(`printTime: ${getErrorMessage(error)}`);
   }
   if (showTimezone) {
     return clonedDate.toLocaleString({
@@ -246,8 +253,8 @@ export function printDateAndTime(
   let clonedDate;
   try {
     clonedDate = getDate(date, {timezone});
-  } catch (error: any) {
-    throw new Error(`printDateAndTime: ${error.message}`);
+  } catch (error: unknown) {
+    throw new Error(`printDateAndTime: ${getErrorMessage(error)}`);
   }
   if (showTimezone) {
     return clonedDate.toLocaleString({
@@ -304,8 +311,8 @@ export function printSince(
   const ago = showAgo ? " ago" : "";
   try {
     clonedDate = getDate(date, {timezone});
-  } catch (error: any) {
-    throw new Error(`printSince: ${error.message}`);
+  } catch (error: unknown) {
+    throw new Error(`printSince: ${getErrorMessage(error)}`);
   }
   const now = timezone ? DateTime.now().setZone(timezone) : DateTime.now();
   const diff = now.diff(clonedDate, "months");
@@ -349,7 +356,11 @@ export function getTimezoneOptions(location: "USA" | "Worldwide", shortTimezone
   if (location === "USA") {
     timezones = usTimezoneOptions.map((tz) => [tz.label, tz.value]);
   } else {
-    timezones = (Intl as any).supportedValuesOf("timeZone").map((tz: any) => {
+    const intlWithSupportedValuesOf = Intl as typeof Intl & {
+      supportedValuesOf?: (key: "timeZone") => string[];
+    };
+    const supportedValues = intlWithSupportedValuesOf.supportedValuesOf?.("timeZone") ?? [];
+    timezones = supportedValues.map((tz) => {
       return [tz, tz];
     });
   }

package/src/DecimalRangeActionSheet.test.tsx

@@ -1,5 +1,5 @@
-import {describe, expect, it} from "bun:test";
-import {render} from "@testing-library/react-native";
+import {describe, expect, it, mock} from "bun:test";
+import {act, render} from "@testing-library/react-native";
 import {createRef} from "react";
 
 import type {ActionSheet} from "./ActionSheet";
@@ -43,4 +43,55 @@ describe("DecimalRangeActionSheet", () => {
     );
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it("invokes onChange when whole picker changes", () => {
+    const actionSheetRef = createRef<ActionSheet>();
+    const handleChange = mock((_val: string) => {});
+    const {UNSAFE_getAllByProps} = render(
+      <ThemeProvider>
+        <DecimalRangeActionSheet
+          actionSheetRef={actionSheetRef}
+          max={10}
+          min={0}
+          onChange={handleChange}
+          value="5.5"
+        />
+      </ThemeProvider>
+    );
+    // The first Picker is the whole number one (selectedValue: "5")
+    const wholePickers = UNSAFE_getAllByProps({selectedValue: "5"});
+    const whole = wholePickers.find((p) => typeof p.props.onValueChange === "function");
+    act(() => {
+      if (whole) {
+        whole.props.onValueChange(7);
+      }
+    });
+    expect(handleChange).toHaveBeenCalled();
+  });
+
+  it("invokes onChange when decimal picker changes", () => {
+    const actionSheetRef = createRef<ActionSheet>();
+    const handleChange = mock((_val: string) => {});
+    const {UNSAFE_getAllByProps} = render(
+      <ThemeProvider>
+        <DecimalRangeActionSheet
+          actionSheetRef={actionSheetRef}
+          max={10}
+          min={0}
+          onChange={handleChange}
+          value="5.5"
+        />
+      </ThemeProvider>
+    );
+    // The second Picker is the decimal one (selectedValue: "5")
+    const decimalPickers = UNSAFE_getAllByProps({selectedValue: "5"});
+    // Use the last one (second picker)
+    const decimal = decimalPickers[decimalPickers.length - 1];
+    act(() => {
+      if (decimal && typeof decimal.props.onValueChange === "function") {
+        decimal.props.onValueChange(3);
+      }
+    });
+    expect(handleChange).toHaveBeenCalled();
+  });
 });

package/src/DraggableList.tsx

@@ -6,7 +6,7 @@
 // Copyright Patryk Jaworski @gerwld
 
 import React, {useMemo, useState} from "react";
-import {Platform, View} from "react-native";
+import {Platform, type StyleProp, View, type ViewStyle} from "react-native";
 import {Gesture, GestureDetector} from "react-native-gesture-handler";
 import Animated, {
   runOnJS,
@@ -41,7 +41,7 @@ interface DragItemProps {
   renderGrip?: React.ReactElement | (() => React.ReactElement); // Optional drag handle
   passVibration?: () => void; // Optional haptic feedback callback
   itemBorderRadius: number; // Border radius for items
-  itemContainerStyle?: any; // Additional styling for item container
+  itemContainerStyle?: StyleProp<ViewStyle>; // Additional styling for item container
   callbackNewDataIds?: (newIds: string[]) => void; // Callback when items are reordered
   backgroundOnHold?: string; // Background color when item is being dragged
   plainPosition: number; // Current position in the list
@@ -52,10 +52,10 @@ interface DragItemProps {
  */
 interface DragListProps {
   data?: string[]; // Array of item IDs (deprecated, use dataIDs)
-  style?: any; // Style for the list container
+  style?: StyleProp<ViewStyle>; // Style for the list container
   callbackNewDataIds: (newIds: string[]) => void; // Callback when items are reordered
-  contentContainerStyle?: any; // Style for the content container
-  itemContainerStyle?: any; // Style for each item container
+  contentContainerStyle?: StyleProp<ViewStyle>; // Style for the content container
+  itemContainerStyle?: StyleProp<ViewStyle>; // Style for each item container
   renderItem: (props: {item: string}) => React.ReactElement; // Function to render item content
   renderGrip?: React.ReactElement | (() => React.ReactElement); // Optional custom drag handle
   passVibration?: () => void; // Optional haptic feedback callback

package/src/EmailField.test.tsx

@@ -103,4 +103,85 @@ describe("EmailField", () => {
     );
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it("calls onBlur with valid email", async () => {
+    const handleBlur = mock((_value: string) => {});
+    const {getByDisplayValue} = renderWithTheme(
+      <EmailField label="Email" onBlur={handleBlur} onChange={() => {}} value="valid@email.com" />
+    );
+
+    const input = getByDisplayValue("valid@email.com");
+    await act(async () => {
+      fireEvent(input, "blur", {nativeEvent: {text: "valid@email.com"}});
+    });
+
+    await waitFor(() => {
+      expect(handleBlur).toHaveBeenCalledWith("valid@email.com");
+    });
+  });
+
+  it("does not call onBlur with invalid email", async () => {
+    const handleBlur = mock((_value: string) => {});
+    const {getByDisplayValue} = renderWithTheme(
+      <EmailField label="Email" onBlur={handleBlur} onChange={() => {}} value="" />
+    );
+
+    const input = getByDisplayValue("");
+    await act(async () => {
+      fireEvent.changeText(input, "invalid-email");
+    });
+    await act(async () => {
+      fireEvent(input, "blur", {nativeEvent: {text: "invalid-email"}});
+    });
+
+    expect(handleBlur).not.toHaveBeenCalled();
+  });
+
+  it("clears local error when typing a valid email after invalid", async () => {
+    const handleChange = mock((_value: string) => {});
+    const {getByDisplayValue, queryByText} = renderWithTheme(
+      <EmailField label="Email" onChange={handleChange} value="" />
+    );
+
+    const input = getByDisplayValue("");
+
+    // Type invalid email first
+    await act(async () => {
+      fireEvent.changeText(input, "bad");
+    });
+    // Trigger blur to set the error
+    await act(async () => {
+      fireEvent(input, "blur", {nativeEvent: {text: "bad"}});
+    });
+
+    await waitFor(() => {
+      expect(queryByText("Invalid email address format")).toBeTruthy();
+    });
+
+    // Now type a valid email to clear the error
+    await act(async () => {
+      fireEvent.changeText(input, "good@email.com");
+    });
+
+    await waitFor(() => {
+      expect(queryByText("Invalid email address format")).toBeFalsy();
+      expect(handleChange).toHaveBeenCalledWith("good@email.com");
+    });
+  });
+
+  it("validates empty string as valid on blur", async () => {
+    const handleBlur = mock((_value: string) => {});
+    const {getByDisplayValue} = renderWithTheme(
+      <EmailField label="Email" onBlur={handleBlur} onChange={() => {}} value="" />
+    );
+
+    const input = getByDisplayValue("");
+    await act(async () => {
+      fireEvent(input, "blur", {nativeEvent: {text: ""}});
+    });
+
+    await waitFor(() => {
+      expect(handleBlur).toHaveBeenCalledWith("");
+    });
+  });
 });

package/src/EmojiSelector.test.tsx

@@ -1,8 +1,21 @@
 import {describe, expect, it, mock} from "bun:test";
+import {act, fireEvent} from "@testing-library/react-native";
 
-import EmojiSelector, {Categories} from "./EmojiSelector";
+import EmojiSelector, {Categories, charFromEmojiObject} from "./EmojiSelector";
 import {renderWithTheme} from "./test-utils";
 
+interface LayoutEvent {
+  nativeEvent: {layout: {height: number; width: number; x: number; y: number}};
+}
+
+interface LayoutRoot {
+  props: {onLayout?: (event: LayoutEvent) => void};
+}
+
+interface RenderItemCell {
+  props: {onPress?: () => void};
+}
+
 describe("EmojiSelector", () => {
   it("renders search bar when showSearchBar is true", () => {
     const {getByPlaceholderText} = renderWithTheme(
@@ -58,4 +71,252 @@ describe("EmojiSelector", () => {
 
     expect(tree.toJSON()).toMatchSnapshot();
   });
+
+  it("renders without tabs", () => {
+    const {toJSON} = renderWithTheme(
+      <EmojiSelector
+        category={Categories.people}
+        columns={6}
+        onEmojiSelected={mock(() => {})}
+        placeholder="Search emojis"
+        showHistory={false}
+        showSearchBar
+        showSectionTitles={false}
+        showTabs={false}
+        theme="#007AFF"
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders without search bar", () => {
+    const {queryByPlaceholderText} = renderWithTheme(
+      <EmojiSelector
+        category={Categories.people}
+        columns={6}
+        onEmojiSelected={mock(() => {})}
+        placeholder="Search emojis"
+        showHistory={false}
+        showSearchBar={false}
+        showSectionTitles
+        showTabs
+        theme="#007AFF"
+      />
+    );
+    expect(queryByPlaceholderText("Search emojis")).toBeNull();
+  });
+
+  it("renders with history enabled", () => {
+    const {toJSON} = renderWithTheme(
+      <EmojiSelector
+        category={Categories.people}
+        columns={6}
+        onEmojiSelected={mock(() => {})}
+        placeholder="Search emojis"
+        showHistory
+        showSearchBar
+        showSectionTitles
+        showTabs
+        theme="#007AFF"
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with all category and shouldInclude filter", () => {
+    const {toJSON} = renderWithTheme(
+      <EmojiSelector
+        category={Categories.all}
+        columns={8}
+        onEmojiSelected={mock(() => {})}
+        placeholder="Search"
+        shouldInclude={(emoji) => emoji.category === "Smileys & Emotion"}
+        showHistory={false}
+        showSearchBar
+        showSectionTitles
+        showTabs
+        theme="#007AFF"
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with history category", () => {
+    const {toJSON} = renderWithTheme(
+      <EmojiSelector
+        category={Categories.history}
+        columns={6}
+        onEmojiSelected={mock(() => {})}
+        placeholder="Search"
+        showHistory
+        showSearchBar
+        showSectionTitles
+        showTabs
+        theme="#007AFF"
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("updates search query when user types in search bar", async () => {
+    const {getByPlaceholderText} = renderWithTheme(
+      <EmojiSelector
+        category={Categories.all}
+        columns={6}
+        onEmojiSelected={mock(() => {})}
+        placeholder="Search emojis"
+        showHistory={false}
+        showSearchBar
+        showSectionTitles
+        showTabs
+        theme="#007AFF"
+      />
+    );
+    const input = getByPlaceholderText("Search emojis");
+    await act(async () => {
+      fireEvent.changeText(input, "smile");
+    });
+    expect(input.props.value).toBe("smile");
+  });
+
+  it("charFromEmojiObject returns a string for a valid emoji", () => {
+    const smiley = {
+      category: "Smileys & Emotion",
+      short_names: ["smiley"],
+      sort_order: 1,
+      unified: "1F603",
+    };
+    expect(charFromEmojiObject(smiley)).toBe("😃");
+  });
+
+  it("exports Categories object with all expected keys", () => {
+    expect(Categories.all).toBeDefined();
+    expect(Categories.emotion).toBeDefined();
+    expect(Categories.people).toBeDefined();
+    expect(Categories.history).toBeDefined();
+    expect(Categories.nature).toBeDefined();
+    expect(Categories.food).toBeDefined();
+    expect(Categories.activities).toBeDefined();
+    expect(Categories.places).toBeDefined();
+    expect(Categories.objects).toBeDefined();
+    expect(Categories.symbols).toBeDefined();
+    expect(Categories.flags).toBeDefined();
+  });
+
+  it("handles layout event to compute emoji list and set ready state", async () => {
+    const {toJSON, root} = renderWithTheme(
+      <EmojiSelector
+        category={Categories.people}
+        columns={6}
+        onEmojiSelected={mock(() => {})}
+        placeholder="Search"
+        showHistory={false}
+        showSearchBar
+        showSectionTitles
+        showTabs
+        theme="#007AFF"
+      />
+    );
+    // Trigger the onLayout callback so state moves to ready.
+    await act(async () => {
+      (root as LayoutRoot).props.onLayout?.({
+        nativeEvent: {layout: {height: 600, width: 360, x: 0, y: 0}},
+      });
+    });
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it("switches categories when a tab is pressed after layout", async () => {
+    const {root, UNSAFE_getAllByType} = renderWithTheme(
+      <EmojiSelector
+        category={Categories.people}
+        columns={6}
+        onEmojiSelected={mock(() => {})}
+        placeholder="Search"
+        showHistory={false}
+        showSearchBar
+        showSectionTitles
+        showTabs
+        theme="#007AFF"
+      />
+    );
+    await act(async () => {
+      (root as LayoutRoot).props.onLayout?.({
+        nativeEvent: {layout: {height: 600, width: 360, x: 0, y: 0}},
+      });
+    });
+    const {TouchableOpacity} = require("react-native");
+    const tabs = UNSAFE_getAllByType(TouchableOpacity);
+    expect(tabs.length).toBeGreaterThan(0);
+    // Press the first tab (e.g., "Smileys & Emotion") to exercise handleTabSelect.
+    await act(async () => {
+      tabs[0].props.onPress?.();
+    });
+  });
+
+  it("invokes onEmojiSelected when an emoji cell is pressed", async () => {
+    const onEmojiSelected = mock(() => {});
+    const {root, UNSAFE_getAllByType} = renderWithTheme(
+      <EmojiSelector
+        category={Categories.emotion}
+        columns={6}
+        onEmojiSelected={onEmojiSelected}
+        placeholder="Search"
+        showHistory
+        showSearchBar={false}
+        showSectionTitles
+        showTabs={false}
+        theme="#007AFF"
+      />
+    );
+    await act(async () => {
+      (root as LayoutRoot).props.onLayout?.({
+        nativeEvent: {layout: {height: 600, width: 360, x: 0, y: 0}},
+      });
+    });
+
+    const {FlatList} = require("react-native");
+    const [list] = UNSAFE_getAllByType(FlatList);
+    expect(list).toBeTruthy();
+    const data = list.props.data ?? [];
+    expect(data.length).toBeGreaterThan(0);
+    const first = data[0];
+    const cell = list.props.renderItem({index: 0, item: first});
+    // Invoke the emoji cell onPress to exercise handleEmojiSelect + addToHistoryAsync.
+    (cell.props as RenderItemCell["props"]).onPress?.();
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 20));
+    });
+    expect(onEmojiSelected).toHaveBeenCalled();
+  });
+
+  it("filters the emoji list when a search query is entered", async () => {
+    const {getByPlaceholderText, UNSAFE_getAllByType, root} = renderWithTheme(
+      <EmojiSelector
+        category={Categories.all}
+        columns={6}
+        onEmojiSelected={mock(() => {})}
+        placeholder="Search emojis"
+        showHistory={false}
+        showSearchBar
+        showSectionTitles
+        showTabs
+        theme="#007AFF"
+      />
+    );
+    await act(async () => {
+      (root as LayoutRoot).props.onLayout?.({
+        nativeEvent: {layout: {height: 600, width: 360, x: 0, y: 0}},
+      });
+    });
+
+    const input = getByPlaceholderText("Search emojis");
+    await act(async () => {
+      fireEvent.changeText(input, "smile");
+    });
+
+    const {FlatList} = require("react-native");
+    const [list] = UNSAFE_getAllByType(FlatList);
+    expect(list.props.data.length).toBeGreaterThan(0);
+  });
 });

package/src/ErrorBoundary.test.tsx

@@ -1,6 +1,8 @@
-import {afterAll, beforeAll, describe, expect, it, mock} from "bun:test";
+import {afterAll, beforeAll, describe, expect, it, mock, spyOn} from "bun:test";
+import React from "react";
 
 import {ErrorBoundary} from "./ErrorBoundary";
+import {ErrorPage} from "./ErrorPage";
 import {Text} from "./Text";
 import {renderWithTheme} from "./test-utils";
 
@@ -41,4 +43,53 @@ describe("ErrorBoundary", () => {
     );
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it("sets state from getDerivedStateFromError", () => {
+    const error = new Error("derived");
+
+    const result = ErrorBoundary.getDerivedStateFromError(error);
+
+    expect(result).toEqual({error});
+  });
+
+  it("calls onError when componentDidCatch receives an error", () => {
+    const onError = mock(() => {});
+    const boundary = new ErrorBoundary({children: null, onError});
+    const error = new Error("caught");
+
+    boundary.componentDidCatch(error, {componentStack: "stack trace"});
+
+    expect(onError).toHaveBeenCalledTimes(1);
+    expect((onError as any).mock.calls[0]).toEqual([error, "stack trace"]);
+  });
+
+  it("does not throw when componentDidCatch is called without onError", () => {
+    const boundary = new ErrorBoundary({children: null});
+    const error = new Error("caught");
+
+    expect(() => boundary.componentDidCatch(error, {componentStack: "stack trace"})).not.toThrow();
+  });
+
+  it("resets error state when resetError is called", () => {
+    const boundary = new ErrorBoundary({children: null});
+    const setStateSpy = spyOn(boundary, "setState");
+
+    boundary.resetError();
+
+    expect(setStateSpy).toHaveBeenCalledTimes(1);
+    expect((setStateSpy as any).mock.calls[0][0]).toEqual({error: undefined});
+    setStateSpy.mockRestore();
+  });
+
+  it("renders ErrorPage when state has an error", () => {
+    const boundary = new ErrorBoundary({children: <Text>Child content</Text>});
+    const error = new Error("render error");
+    boundary.state = {error};
+
+    const renderedElement = boundary.render() as React.ReactElement;
+
+    expect(renderedElement.type).toBe(ErrorPage);
+    expect(renderedElement.props.error).toBe(error);
+    expect(typeof renderedElement.props.resetError).toBe("function");
+  });
 });

package/src/HeightActionSheet.test.tsx

@@ -1,5 +1,5 @@
-import {describe, expect, it} from "bun:test";
-import {render} from "@testing-library/react-native";
+import {describe, expect, it, mock} from "bun:test";
+import {act, render} from "@testing-library/react-native";
 import {createRef} from "react";
 
 import type {ActionSheet} from "./ActionSheet";
@@ -31,4 +31,59 @@ describe("HeightActionSheet", () => {
     );
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it("renders with title and min/max values", () => {
+    const actionSheetRef = createRef<ActionSheet>();
+    const {getByText} = render(
+      <ThemeProvider>
+        <HeightActionSheet
+          actionSheetRef={actionSheetRef}
+          max={84}
+          min={36}
+          onChange={() => {}}
+          title="Select Height"
+          value="60"
+        />
+      </ThemeProvider>
+    );
+    expect(getByText("Select Height")).toBeTruthy();
+  });
+
+  it("invokes onChange when feet picker changes", () => {
+    const actionSheetRef = createRef<ActionSheet>();
+    const handleChange = mock((_val: string) => {});
+    const {UNSAFE_getAllByProps} = render(
+      <ThemeProvider>
+        <HeightActionSheet actionSheetRef={actionSheetRef} onChange={handleChange} value="72" />
+      </ThemeProvider>
+    );
+    // feet picker has selectedValue "6" (72 / 12)
+    const feetPickers = UNSAFE_getAllByProps({selectedValue: "6"});
+    const feetPicker = feetPickers.find((p) => typeof p.props.onValueChange === "function");
+    act(() => {
+      if (feetPicker) {
+        feetPicker.props.onValueChange(5);
+      }
+    });
+    expect(handleChange).toHaveBeenCalled();
+  });
+
+  it("invokes onChange when inches picker changes", () => {
+    const actionSheetRef = createRef<ActionSheet>();
+    const handleChange = mock((_val: string) => {});
+    const {UNSAFE_getAllByProps} = render(
+      <ThemeProvider>
+        <HeightActionSheet actionSheetRef={actionSheetRef} onChange={handleChange} value="73" />
+      </ThemeProvider>
+    );
+    // inches picker has selectedValue "1" (73 % 12)
+    const inchPickers = UNSAFE_getAllByProps({selectedValue: "1"});
+    const inchPicker = inchPickers.find((p) => typeof p.props.onValueChange === "function");
+    act(() => {
+      if (inchPicker) {
+        inchPicker.props.onValueChange(5);
+      }
+    });
+    expect(handleChange).toHaveBeenCalled();
+  });
 });

package/src/Icon.tsx

@@ -4,9 +4,6 @@ import type {FC} from "react";
 import {type IconProps, iconSizeToNumber} from "./Common";
 import {useTheme} from "./Theme";
 
-// TODO: Update <Icon /> to be closer to Expo's Vector Icon, letting multiple icon packs be used,
-// etc.
-// TODO: Add documentation for adding FA6-Pro icons.
 export const Icon: FC<IconProps> = ({
   color = "primary",
   size = "md",