@compsych/mobile-ui 1.0.11 → 1.0.14

package/src/index.ts

@@ -131,6 +131,15 @@ export type {
   ActionSheetAction,
 } from './components/ActionSheet';
 
+export { ChatBubble } from './components/ChatBubble';
+export type {
+  ChatBubbleProps,
+  ChatBubbleVariant,
+} from './components/ChatBubble';
+
+export { ChatInput } from './components/ChatInput';
+export type { ChatInputProps, ChatAttachment } from './components/ChatInput';
+
 export { BodyText } from './components/BodyText';
 export type { BodyTextProps, BodyVariant } from './components/BodyText';
 
@@ -140,26 +149,10 @@ export type { HeaderTextProps, HeaderVariant } from './components/HeaderText';
 // Re-export tokens for consumers who need direct access
 export { sys } from './tokens';
 
-// Icons
-export {
-  UserRoundIcon,
-  GlobeIcon,
-  HandshakeIcon,
-  HeartHandshakeIcon,
-  AtomIcon,
-  HazeIcon,
-  HourglassIcon,
-  GraduationCapIcon,
-  HandHeartIcon,
-  IdCardIcon,
-  MessageCirclePlusIcon,
-  StethoscopeIcon,
-  BinocularsIcon,
-  FlagIcon,
-  MountainSnowIcon,
-  SnowflakeIcon,
-  FileChartColumnIncreasingIcon,
-  WheatIcon,
-} from './icons';
+// Theme system — override the default GuidanceNow theme per-app or per-subtree
+export { ThemeProvider, useTheme, defaultTheme } from './theme';
+export type { ThemeProviderProps, Theme, ThemeOverride } from './theme';
+
+// Icons — resolved from lucide-react-native at runtime
+export { resolveIcon, SIZE_MAP, DEFAULT_ICON_COLOR } from './icons';
 export type { IconProps, IconSize, IconName } from './icons';
-export { ICON_MAP } from './icons';

package/src/theme/ThemeContext.ts

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+
+import { sys } from '../tokens';
+import type { Theme } from './types';
+
+/**
+ * Provides the active resolved theme to all components.
+ * Default value is the GuidanceNow theme so components render correctly
+ * even when no ThemeProvider is present in the tree.
+ */
+export const ThemeContext = createContext<Theme>(sys as unknown as Theme);

package/src/theme/ThemeProvider.tsx

@@ -0,0 +1,40 @@
+import React, { useMemo } from 'react';
+
+import { ThemeContext } from './ThemeContext';
+import { mergeTheme } from './mergeTheme';
+import type { ThemeOverride } from './types';
+
+export interface ThemeProviderProps {
+  /**
+   * Optional partial theme override. Keys present here replace the
+   * corresponding GuidanceNow default values; all other tokens keep their
+   * defaults. Pass `undefined` (or omit this prop) to use the GuidanceNow
+   * theme unchanged.
+   */
+  theme?: ThemeOverride;
+  children: React.ReactNode;
+}
+
+/**
+ * Wraps your application (or a subtree) and provides a resolved theme to all
+ * `@compsych/mobile-ui` components beneath it.
+ *
+ * @example — default GuidanceNow theme
+ * <ThemeProvider>
+ *   <App />
+ * </ThemeProvider>
+ *
+ * @example — custom brand override
+ * <ThemeProvider theme={{ colorRoles: { accent: { primary: { sysPrimary: '#c00000' } } } }}>
+ *   <App />
+ * </ThemeProvider>
+ */
+export function ThemeProvider({ theme, children }: ThemeProviderProps) {
+  const resolvedTheme = useMemo(() => mergeTheme(theme), [theme]);
+
+  return (
+    <ThemeContext.Provider value={resolvedTheme}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}

package/src/theme/__tests__/ThemeProvider.test.tsx

@@ -0,0 +1,101 @@
+import React, { useContext } from 'react';
+
+import { Text } from 'react-native';
+
+import { render } from '@testing-library/react-native';
+
+import { sys } from '../../tokens';
+import { ThemeContext } from '../ThemeContext';
+import { ThemeProvider } from '../ThemeProvider';
+
+function ThemeConsumer() {
+  const theme = useContext(ThemeContext);
+  return (
+    <Text testID="primary-color">
+      {theme.colorRoles.accent.primary.sysPrimary}
+    </Text>
+  );
+}
+
+describe('ThemeProvider', () => {
+  it('renders children', () => {
+    const { getByText } = render(
+      <ThemeProvider>
+        <Text>hello</Text>
+      </ThemeProvider>,
+    );
+    expect(getByText('hello')).toBeTruthy();
+  });
+
+  it('provides the GuidanceNow default theme when no override is given', () => {
+    const { getByTestId } = render(
+      <ThemeProvider>
+        <ThemeConsumer />
+      </ThemeProvider>,
+    );
+    expect(getByTestId('primary-color').props.children).toBe(
+      sys.colorRoles.accent.primary.sysPrimary,
+    );
+  });
+
+  it('provides the merged custom theme when an override is supplied', () => {
+    const { getByTestId } = render(
+      <ThemeProvider
+        theme={{
+          colorRoles: { accent: { primary: { sysPrimary: '#c00000' } } },
+        }}
+      >
+        <ThemeConsumer />
+      </ThemeProvider>,
+    );
+    expect(getByTestId('primary-color').props.children).toBe('#c00000');
+  });
+
+  it('keeps default values for tokens not included in the override', () => {
+    function ErrorColorConsumer() {
+      const theme = useContext(ThemeContext);
+      return (
+        <Text testID="error-color">{theme.colorRoles.error.sysError}</Text>
+      );
+    }
+
+    const { getByTestId } = render(
+      <ThemeProvider
+        theme={{
+          colorRoles: { accent: { primary: { sysPrimary: '#c00000' } } },
+        }}
+      >
+        <ErrorColorConsumer />
+      </ThemeProvider>,
+    );
+    expect(getByTestId('error-color').props.children).toBe(
+      sys.colorRoles.error.sysError,
+    );
+  });
+
+  it('works correctly when nested — inner provider wins', () => {
+    function Consumer() {
+      const theme = useContext(ThemeContext);
+      return (
+        <Text testID="color">{theme.colorRoles.accent.primary.sysPrimary}</Text>
+      );
+    }
+
+    const { getByTestId } = render(
+      <ThemeProvider
+        theme={{
+          colorRoles: { accent: { primary: { sysPrimary: '#aaaaaa' } } },
+        }}
+      >
+        <ThemeProvider
+          theme={{
+            colorRoles: { accent: { primary: { sysPrimary: '#bbbbbb' } } },
+          }}
+        >
+          <Consumer />
+        </ThemeProvider>
+      </ThemeProvider>,
+    );
+    expect(getByTestId('color').props.children).toBe('#bbbbbb');
+  });
+});

package/src/theme/__tests__/defaultTheme.test.ts

@@ -0,0 +1,36 @@
+import { sys } from '../../tokens';
+import { defaultTheme } from '../defaultTheme';
+
+describe('defaultTheme', () => {
+  it('equals the GuidanceNow default token values', () => {
+    expect(defaultTheme).toEqual(sys);
+  });
+
+  it('exposes colorRoles tokens at the correct paths', () => {
+    expect(defaultTheme.colorRoles.accent.primary.sysPrimary).toBe(
+      sys.colorRoles.accent.primary.sysPrimary,
+    );
+    expect(defaultTheme.colorRoles.error.sysError).toBe(
+      sys.colorRoles.error.sysError,
+    );
+  });
+
+  it('exposes dimension tokens at the correct paths', () => {
+    expect(defaultTheme.dimensions.borderRadius.sysRadiusMd).toBe(
+      sys.dimensions.borderRadius.sysRadiusMd,
+    );
+  });
+
+  it('exposes typeScale tokens at the correct paths', () => {
+    expect(defaultTheme.typeScale.bodyMedium.sysFontSize).toBe(
+      sys.typeScale.bodyMedium.sysFontSize,
+    );
+  });
+
+  it('is typed as Theme — readable without a ThemeProvider in scope', () => {
+    // This is a compile-time check: accessing a property on the widened Theme type
+    // (not the narrow `as const` literal type) must not require a type cast.
+    const primary: string = defaultTheme.colorRoles.accent.primary.sysPrimary;
+    expect(typeof primary).toBe('string');
+  });
+});

package/src/theme/__tests__/mergeTheme.test.ts

@@ -0,0 +1,94 @@
+import { sys } from '../../tokens';
+import { mergeTheme } from '../mergeTheme';
+
+describe('mergeTheme', () => {
+  it('returns the default GuidanceNow theme when no override is provided', () => {
+    expect(mergeTheme()).toEqual(sys);
+  });
+
+  it('returns the default theme when override is undefined', () => {
+    expect(mergeTheme(undefined)).toEqual(sys);
+  });
+
+  it('overrides a single top-level color token', () => {
+    const result = mergeTheme({
+      colorRoles: { accent: { primary: { sysPrimary: '#c00000' } } },
+    });
+
+    expect(result.colorRoles.accent.primary.sysPrimary).toBe('#c00000');
+  });
+
+  it('preserves all non-overridden default values', () => {
+    const result = mergeTheme({
+      colorRoles: { accent: { primary: { sysPrimary: '#c00000' } } },
+    });
+
+    expect(result.colorRoles.accent.primary.sysOnPrimary).toBe(
+      sys.colorRoles.accent.primary.sysOnPrimary,
+    );
+    expect(result.colorRoles.error.sysError).toBe(
+      sys.colorRoles.error.sysError,
+    );
+    expect(result.dimensions.borderRadius.sysRadiusMd).toBe(
+      sys.dimensions.borderRadius.sysRadiusMd,
+    );
+    expect(result.typeScale.bodyMedium.sysFontSize).toBe(
+      sys.typeScale.bodyMedium.sysFontSize,
+    );
+  });
+
+  it('overrides a numeric dimension token', () => {
+    const result = mergeTheme({
+      dimensions: { borderRadius: { sysRadiusMd: 99 } },
+    });
+
+    expect(result.dimensions.borderRadius.sysRadiusMd).toBe(99);
+    expect(result.dimensions.borderRadius.sysRadiusSm).toBe(
+      sys.dimensions.borderRadius.sysRadiusSm,
+    );
+  });
+
+  it('overrides a typeScale token', () => {
+    const result = mergeTheme({
+      typeScale: { bodyMedium: { sysFontSize: 18 } },
+    });
+
+    expect(result.typeScale.bodyMedium.sysFontSize).toBe(18);
+    expect(result.typeScale.bodyMedium.sysLineHeight).toBe(
+      sys.typeScale.bodyMedium.sysLineHeight,
+    );
+  });
+
+  it('ignores null override values and keeps defaults', () => {
+    const result = mergeTheme({
+      colorRoles: {
+        accent: { primary: { sysPrimary: null as unknown as string } },
+      },
+    });
+
+    expect(result.colorRoles.accent.primary.sysPrimary).toBe(
+      sys.colorRoles.accent.primary.sysPrimary,
+    );
+  });
+
+  it('handles an empty override object without changing anything', () => {
+    const result = mergeTheme({});
+    expect(result).toEqual(sys);
+  });
+
+  it('handles deeply partial overrides spanning multiple branches', () => {
+    const result = mergeTheme({
+      colorRoles: { accent: { primary: { sysPrimary: '#aabbcc' } } },
+      dimensions: { borderRadius: { sysRadiusFull: 500 } },
+    });
+
+    expect(result.colorRoles.accent.primary.sysPrimary).toBe('#aabbcc');
+    expect(result.dimensions.borderRadius.sysRadiusFull).toBe(500);
+    expect(result.colorRoles.error.sysError).toBe(
+      sys.colorRoles.error.sysError,
+    );
+    expect(result.dimensions.borderRadius.sysRadiusMd).toBe(
+      sys.dimensions.borderRadius.sysRadiusMd,
+    );
+  });
+});

package/src/theme/defaultTheme.ts

@@ -0,0 +1,15 @@
+import { sys } from '../tokens';
+import type { Theme } from './types';
+
+/**
+ * The GuidanceNow default theme — the full resolved token tree typed as `Theme`
+ * (widened, mutable types) so consumers can read individual values without a
+ * ThemeProvider in scope.
+ *
+ * @example
+ * import { defaultTheme } from '@compsych/mobile-ui';
+ *
+ * const primaryColor = defaultTheme.colorRoles.accent.primary.sysPrimary;
+ * const bodyFont = defaultTheme.typeScale.body.md.fontFamily;
+ */
+export const defaultTheme: Theme = sys as unknown as Theme;

package/src/theme/index.ts

@@ -0,0 +1,8 @@
+export { ThemeProvider } from './ThemeProvider';
+export type { ThemeProviderProps } from './ThemeProvider';
+
+export { useTheme } from './useTheme';
+
+export type { Theme, ThemeOverride } from './types';
+
+export { defaultTheme } from './defaultTheme';

package/src/theme/mergeTheme.ts

@@ -0,0 +1,47 @@
+import { sys } from '../tokens';
+import type { Theme, ThemeOverride } from './types';
+
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+function deepMerge(
+  base: Record<string, unknown>,
+  override: Record<string, unknown>,
+): Record<string, unknown> {
+  const result: Record<string, unknown> = { ...base };
+
+  for (const key of Object.keys(override)) {
+    const overrideVal = override[key];
+    const baseVal = base[key];
+
+    if (overrideVal === undefined || overrideVal === null) {
+      // Ignore nullish overrides — preserve the default
+      continue;
+    }
+
+    if (isPlainObject(baseVal) && isPlainObject(overrideVal)) {
+      result[key] = deepMerge(baseVal, overrideVal);
+    } else {
+      result[key] = overrideVal;
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Deep-merges a partial ThemeOverride on top of the GuidanceNow defaults.
+ * Any key omitted from the override keeps its default value, so missing or
+ * invalid overrides can never break the UI.
+ */
+export function mergeTheme(override?: ThemeOverride): Theme {
+  if (!override) {
+    return sys as unknown as Theme;
+  }
+
+  return deepMerge(
+    sys as unknown as Record<string, unknown>,
+    override as Record<string, unknown>,
+  ) as Theme;
+}

package/src/theme/types.ts

@@ -0,0 +1,39 @@
+import { sys } from '../tokens';
+
+// Strip `as const` readonly modifiers and widen literal types to their
+// primitive base (string, number, boolean) so consumers can supply any valid
+// CSS color or numeric value in a ThemeOverride — not just the exact GuidanceNow
+// hex literals.
+type DeepWritable<T> = {
+  -readonly [P in keyof T]: DeepWritable<T[P]>;
+};
+
+type WidenLiterals<T> = T extends string
+  ? string
+  : T extends number
+    ? number
+    : T extends boolean
+      ? boolean
+      : T extends object
+        ? { [K in keyof T]: WidenLiterals<T[K]> }
+        : T;
+
+/** The full resolved theme object consumed by every component via useTheme(). */
+export type Theme = WidenLiterals<DeepWritable<typeof sys>>;
+
+type DeepPartial<T> = T extends object
+  ? { [P in keyof T]?: DeepPartial<T[P]> }
+  : T;
+
+/**
+ * A partial theme override — any subset of the token tree.
+ * Missing keys fall back to the GuidanceNow defaults.
+ *
+ * @example
+ * const brandTheme: ThemeOverride = {
+ *   colorRoles: {
+ *     accent: { primary: { sysPrimary: '#c00000' } },
+ *   },
+ * };
+ */
+export type ThemeOverride = DeepPartial<Theme>;

package/src/theme/useTheme.ts

@@ -0,0 +1,16 @@
+import { useContext } from 'react';
+
+import { ThemeContext } from './ThemeContext';
+import type { Theme } from './types';
+
+/**
+ * Returns the active resolved theme. Components use this hook to read token
+ * values at render time so they automatically reflect any ThemeProvider
+ * override in the tree.
+ *
+ * Falls back to the GuidanceNow default theme when called outside a
+ * ThemeProvider.
+ */
+export function useTheme(): Theme {
+  return useContext(ThemeContext);
+}

package/src/icons/AtomIcon.tsx

@@ -1,32 +0,0 @@
-import Svg, { Path } from 'react-native-svg';
-
-import { COMMON, DEFAULT_ICON_COLOR, type IconProps, SIZE_MAP } from './types';
-
-export function AtomIcon({
-  size = 'medium',
-  color = DEFAULT_ICON_COLOR,
-}: IconProps) {
-  const { size: px, strokeWidth } = SIZE_MAP[size];
-  return (
-    <Svg width={px} height={px} viewBox="0 0 48 48" fill="none">
-      <Path
-        d="M24 26C25.1046 26 26 25.1046 26 24C26 22.8954 25.1046 22 24 22C22.8954 22 22 22.8954 22 24C22 25.1046 22.8954 26 24 26Z"
-        stroke={color}
-        strokeWidth={strokeWidth}
-        {...COMMON}
-      />
-      <Path
-        d="M40.4 40.4C44.48 36.34 40.44 25.68 31.4 16.6C22.32 7.56002 11.66 3.52002 7.60002 7.60002C3.52002 11.66 7.56002 22.32 16.6 31.4C25.68 40.44 36.34 44.48 40.4 40.4Z"
-        stroke={color}
-        strokeWidth={strokeWidth}
-        {...COMMON}
-      />
-      <Path
-        d="M31.4 31.4C40.44 22.32 44.48 11.66 40.4 7.60002C36.34 3.52002 25.68 7.56002 16.6 16.6C7.56002 25.68 3.52002 36.34 7.60002 40.4C11.66 44.48 22.32 40.44 31.4 31.4Z"
-        stroke={color}
-        strokeWidth={strokeWidth}
-        {...COMMON}
-      />
-    </Svg>
-  );
-}

package/src/icons/BinocularsIcon.tsx

@@ -1,45 +0,0 @@
-import Svg, { Path } from 'react-native-svg';
-
-import { COMMON, DEFAULT_ICON_COLOR, type IconProps, SIZE_MAP } from './types';
-
-export function BinocularsIcon({
-  size = 'medium',
-  color = DEFAULT_ICON_COLOR,
-}: IconProps) {
-  const { size: px, strokeWidth } = SIZE_MAP[size];
-  return (
-    <Svg width={px} height={px} viewBox="0 0 48 48" fill="none">
-      <Path
-        d="M20 20H28"
-        stroke={color}
-        strokeWidth={strokeWidth}
-        {...COMMON}
-      />
-      <Path
-        d="M38 14V8C38 7.46957 37.7893 6.96086 37.4142 6.58579C37.0391 6.21071 36.5304 6 36 6H32C31.4696 6 30.9609 6.21071 30.5858 6.58579C30.2107 6.96086 30 7.46957 30 8V14"
-        stroke={color}
-        strokeWidth={strokeWidth}
-        {...COMMON}
-      />
-      <Path
-        d="M40 42C41.0609 42 42.0783 41.5786 42.8284 40.8284C43.5786 40.0783 44 39.0609 44 38V30.298C44 27.518 40 24.374 40 20.64V16C40 15.4696 39.7893 14.9609 39.4142 14.5858C39.0391 14.2107 38.5304 14 38 14H30C29.4696 14 28.9609 14.2107 28.5858 14.5858C28.2107 14.9609 28 15.4696 28 16V38C28 39.0609 28.4214 40.0783 29.1716 40.8284C29.9217 41.5786 30.9391 42 32 42H40Z"
-        stroke={color}
-        strokeWidth={strokeWidth}
-        {...COMMON}
-      />
-      <Path d="M44 32H4" stroke={color} strokeWidth={strokeWidth} {...COMMON} />
-      <Path
-        d="M8 42C6.93913 42 5.92172 41.5786 5.17157 40.8284C4.42143 40.0783 4 39.0609 4 38V30.298C4 27.518 8 24.374 8 20.64V16C8 15.4696 8.21071 14.9609 8.58579 14.5858C8.96086 14.2107 9.46957 14 10 14H18C18.5304 14 19.0391 14.2107 19.4142 14.5858C19.7893 14.9609 20 15.4696 20 16V38C20 39.0609 19.5786 40.0783 18.8284 40.8284C18.0783 41.5786 17.0609 42 16 42H8Z"
-        stroke={color}
-        strokeWidth={strokeWidth}
-        {...COMMON}
-      />
-      <Path
-        d="M18 14V8C18 7.46957 17.7893 6.96086 17.4142 6.58579C17.0391 6.21071 16.5304 6 16 6H12C11.4696 6 10.9609 6.21071 10.5858 6.58579C10.2107 6.96086 10 7.46957 10 8V14"
-        stroke={color}
-        strokeWidth={strokeWidth}
-        {...COMMON}
-      />
-    </Svg>
-  );
-}

package/src/icons/FileChartColumnIncreasingIcon.tsx

@@ -1,44 +0,0 @@
-import Svg, { Path } from 'react-native-svg';
-
-import { COMMON, DEFAULT_ICON_COLOR, type IconProps, SIZE_MAP } from './types';
-
-export function FileChartColumnIncreasingIcon({
-  size = 'medium',
-  color = DEFAULT_ICON_COLOR,
-}: IconProps) {
-  const { size: px, strokeWidth } = SIZE_MAP[size];
-  return (
-    <Svg width={px} height={px} viewBox="0 0 48 48" fill="none">
-      <Path
-        d="M12 44C10.9391 44 9.92172 43.5786 9.17157 42.8284C8.42143 42.0783 8 41.0609 8 40V8.00001C8 6.93914 8.42143 5.92172 9.17157 5.17158C9.92172 4.42143 10.9391 4.00001 12 4.00001H28C28.6331 3.99898 29.2602 4.12321 29.8451 4.36554C30.43 4.60788 30.9611 4.96353 31.408 5.41201L38.584 12.588C39.0337 13.035 39.3903 13.5667 39.6334 14.1523C39.8764 14.738 40.001 15.3659 40 16V40C40 41.0609 39.5786 42.0783 38.8284 42.8284C38.0783 43.5786 37.0609 44 36 44H12Z"
-        stroke={color}
-        strokeWidth={strokeWidth}
-        {...COMMON}
-      />
-      <Path
-        d="M28 4V14C28 14.5304 28.2107 15.0391 28.5858 15.4142C28.9609 15.7893 29.4696 16 30 16H40"
-        stroke={color}
-        strokeWidth={strokeWidth}
-        {...COMMON}
-      />
-      <Path
-        d="M16 36V32"
-        stroke={color}
-        strokeWidth={strokeWidth}
-        {...COMMON}
-      />
-      <Path
-        d="M24 36V28"
-        stroke={color}
-        strokeWidth={strokeWidth}
-        {...COMMON}
-      />
-      <Path
-        d="M32 36V24"
-        stroke={color}
-        strokeWidth={strokeWidth}
-        {...COMMON}
-      />
-    </Svg>
-  );
-}

package/src/icons/FlagIcon.tsx

@@ -1,20 +0,0 @@
-import Svg, { Path } from 'react-native-svg';
-
-import { COMMON, DEFAULT_ICON_COLOR, type IconProps, SIZE_MAP } from './types';
-
-export function FlagIcon({
-  size = 'medium',
-  color = DEFAULT_ICON_COLOR,
-}: IconProps) {
-  const { size: px, strokeWidth } = SIZE_MAP[size];
-  return (
-    <Svg width={px} height={px} viewBox="0 0 48 48" fill="none">
-      <Path
-        d="M8 44V8C8 7.68951 8.07229 7.38328 8.21115 7.10557C8.35 6.82786 8.55161 6.58629 8.8 6.4C10.8772 4.84213 13.4036 4 16 4C22 4 26 8 30.666 8C33.3327 8 35.3773 7.46667 36.8 6.4C37.0971 6.17715 37.4505 6.04144 37.8204 6.00808C38.1903 5.97473 38.5622 6.04504 38.8944 6.21115C39.2266 6.37725 39.506 6.63259 39.7013 6.94854C39.8966 7.26449 40 7.62858 40 8V28C40 28.3105 39.9277 28.6167 39.7889 28.8944C39.65 29.1721 39.4484 29.4137 39.2 29.6C37.1228 31.1579 34.5964 32 32 32C26 32 22 28 16 28C13.0482 28.0001 10.2 29.0881 8 31.056"
-        stroke={color}
-        strokeWidth={strokeWidth}
-        {...COMMON}
-      />
-    </Svg>
-  );
-}

package/src/icons/GlobeIcon.tsx

@@ -1,20 +0,0 @@
-import Svg, { Path } from 'react-native-svg';
-
-import { COMMON, DEFAULT_ICON_COLOR, type IconProps, SIZE_MAP } from './types';
-
-export function GlobeIcon({
-  size = 'medium',
-  color = DEFAULT_ICON_COLOR,
-}: IconProps) {
-  const { size: px, strokeWidth } = SIZE_MAP[size];
-  return (
-    <Svg width={px} height={px} viewBox="0 0 48 48" fill="none">
-      <Path
-        d="M44 24C44 35.0457 35.0457 44 24 44M44 24C44 12.9543 35.0457 4 24 4M44 24H4M24 44C12.9543 44 4 35.0457 4 24M24 44C18.8645 38.6077 16 31.4465 16 24C16 16.5535 18.8645 9.39231 24 4M24 44C29.1355 38.6077 32 31.4465 32 24C32 16.5535 29.1355 9.39231 24 4M4 24C4 12.9543 12.9543 4 24 4"
-        stroke={color}
-        strokeWidth={strokeWidth}
-        {...COMMON}
-      />
-    </Svg>
-  );
-}

package/src/icons/GraduationCapIcon.tsx

@@ -1,32 +0,0 @@
-import Svg, { Path } from 'react-native-svg';
-
-import { COMMON, DEFAULT_ICON_COLOR, type IconProps, SIZE_MAP } from './types';
-
-export function GraduationCapIcon({
-  size = 'medium',
-  color = DEFAULT_ICON_COLOR,
-}: IconProps) {
-  const { size: px, strokeWidth } = SIZE_MAP[size];
-  return (
-    <Svg width={px} height={px} viewBox="0 0 48 48" fill="none">
-      <Path
-        d="M42.84 21.844C43.1981 21.686 43.5019 21.4265 43.7139 21.0976C43.9259 20.7687 44.0367 20.3848 44.0327 19.9935C44.0286 19.6022 43.9099 19.2206 43.6911 18.8961C43.4724 18.5717 43.1632 18.3185 42.802 18.168L25.66 10.36C25.1389 10.1223 24.5728 9.99927 24 9.99927C23.4272 9.99927 22.8611 10.1223 22.34 10.36L5.20002 18.16C4.84396 18.3159 4.54106 18.5723 4.32836 18.8976C4.11566 19.223 4.00238 19.6033 4.00238 19.992C4.00238 20.3807 4.11566 20.761 4.32836 21.0864C4.54106 21.4117 4.84396 21.668 5.20002 21.824L22.34 29.64C22.8611 29.8777 23.4272 30.0007 24 30.0007C24.5728 30.0007 25.1389 29.8777 25.66 29.64L42.84 21.844Z"
-        stroke={color}
-        strokeWidth={strokeWidth}
-        {...COMMON}
-      />
-      <Path
-        d="M44 20V32"
-        stroke={color}
-        strokeWidth={strokeWidth}
-        {...COMMON}
-      />
-      <Path
-        d="M12 25V32C12 33.5913 13.2643 35.1174 15.5147 36.2426C17.7652 37.3679 20.8174 38 24 38C27.1826 38 30.2348 37.3679 32.4853 36.2426C34.7357 35.1174 36 33.5913 36 32V25"
-        stroke={color}
-        strokeWidth={strokeWidth}
-        {...COMMON}
-      />
-    </Svg>
-  );
-}