@utilitywarehouse/hearth-react-native 0.1.0 → 0.2.0

package/src/components/Input/Input.tsx

@@ -1,25 +1,25 @@
-import { ComponentType, useState } from 'react';
 import { createInput } from '@gluestack-ui/input';
+import { ComponentType, useState } from 'react';
 import type InputProps from './Input.props';
 
-import InputRoot from './InputRoot';
-import InputSlotComponent from './InputSlot';
-import InputIconComponent from './InputIcon';
-import InputFieldComponent from './InputField';
-import { useFormFieldContext } from '../FormField';
 import {
   CalendarMediumIcon,
   CloseSmallIcon,
-  EyeSmallIcon,
   EyeOffSmallIcon,
+  EyeSmallIcon,
   SearchMediumIcon,
 } from '@utilitywarehouse/hearth-react-native-icons';
-import { InputWithoutChildrenProps } from './Input.props';
-import { UnstyledIconButton } from '../UnstyledIconButton';
-import { Spinner } from '../Spinner';
+import { Platform } from 'react-native';
 import { useTheme } from '../../hooks';
 import { DetailText } from '../DetailText';
-import { Platform } from 'react-native';
+import { useFormFieldContext } from '../FormField';
+import { Spinner } from '../Spinner';
+import { UnstyledIconButton } from '../UnstyledIconButton';
+import { InputWithoutChildrenProps } from './Input.props';
+import InputFieldComponent from './InputField';
+import InputIconComponent from './InputIcon';
+import InputRoot from './InputRoot';
+import InputSlotComponent from './InputSlot';
 
 export const InputComponent = createInput({
   Icon: InputIconComponent,
@@ -47,6 +47,7 @@ const Input = ({
   loading,
   clearable = false,
   required,
+  inBottomSheet = false,
   ...props
 }: InputProps) => {
   const formFieldContext = useFormFieldContext();
@@ -56,7 +57,7 @@ const Input = ({
   const [fieldType, setFieldType] = useState<'password' | 'text'>(
     type === 'password' ? 'password' : 'text'
   );
-  const { components } = useTheme();
+  const { color } = useTheme();
 
   const defaultFornat = (() => {
     if (type === 'currency') {
@@ -145,6 +146,7 @@ const Input = ({
           <InputField
             type={fieldType}
             inputMode={getInputMode}
+            inBottomSheet={inBottomSheet}
             {...props}
             placeholder={getPlaceholder}
           />
@@ -155,7 +157,7 @@ const Input = ({
           )}
           {loading && (
             <InputSlot>
-              <Spinner size="xs" color={components.icon.color} />
+              <Spinner size="xs" color={color.icon.primary} />
             </InputSlot>
           )}
           {shouldShowPasswordToggle && (

package/src/components/Input/InputField.tsx

@@ -1,68 +1,41 @@
-import { useBottomSheetInternal } from '@gorhom/bottom-sheet';
-import { useCallback, useEffect } from 'react';
-import {
-  NativeSyntheticEvent,
-  TextInput as RNTextInput,
-  TextInputFocusEventData,
-  TextInputProps,
-} from 'react-native';
+import { BottomSheetTextInput } from '@gorhom/bottom-sheet';
+import { TextInput as RNTextInput, TextInputProps } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
 import { useInputContext } from './Input.context';
 
-const InputField = ({ style, onFocus, onBlur, ...props }: TextInputProps) => {
+const InputField = ({
+  style,
+  onFocus,
+  onBlur,
+  inBottomSheet = false,
+  ...props
+}: TextInputProps & { inBottomSheet?: boolean }) => {
   const { disabled, focused = false, type } = useInputContext();
   styles.useVariants({ focused, type });
-  const { components, color } = useTheme();
+  const { color } = useTheme();
 
-  // Copied from @gorhom/bottom-sheet BottomSheetTextInput
-  const bottomSheetContext = useBottomSheetInternal(true);
-
-  const handleOnFocus = useCallback(
-    (args: NativeSyntheticEvent<TextInputFocusEventData>) => {
-      if (bottomSheetContext) {
-        bottomSheetContext.shouldHandleKeyboardEvents.value = true;
-      }
-      if (onFocus) {
-        onFocus(args);
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [onFocus, bottomSheetContext?.shouldHandleKeyboardEvents]
-  );
-  const handleOnBlur = useCallback(
-    (args: NativeSyntheticEvent<TextInputFocusEventData>) => {
-      if (bottomSheetContext) {
-        bottomSheetContext.shouldHandleKeyboardEvents.value = false;
-      }
-      if (onBlur) {
-        onBlur(args);
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [onBlur, bottomSheetContext?.shouldHandleKeyboardEvents]
-  );
-
-  useEffect(() => {
-    return () => {
-      // Reset the flag on unmount
-      if (bottomSheetContext) {
-        bottomSheetContext.shouldHandleKeyboardEvents.value = false;
-      }
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [bottomSheetContext?.shouldHandleKeyboardEvents]);
-  // End of copied code
+  if (inBottomSheet) {
+    return (
+      <BottomSheetTextInput
+        placeholderTextColor={color.text.secondary}
+        selectionColor={color.purple[700]}
+        cursorColor={color.purple[700]}
+        verticalAlign="middle"
+        aria-disabled={disabled}
+        {...props}
+        style={[styles.input, style]}
+      />
+    );
+  }
 
   return (
     <RNTextInput
-      placeholderTextColor={components.input.placeholderColor}
+      placeholderTextColor={color.text.secondary}
       selectionColor={color.purple[700]}
       cursorColor={color.purple[700]}
       verticalAlign="middle"
       aria-disabled={disabled}
-      onFocus={handleOnFocus}
-      onBlur={handleOnBlur}
       {...props}
       style={[styles.input, style]}
     />
@@ -78,7 +51,7 @@ const styles = StyleSheet.create(theme => ({
     width: 'auto',
     justifyContent: 'center',
     alignItems: 'center',
-    color: theme.components.text.color,
+    color: theme.color.text.primary,
     fontSize: theme.typography.mobile.bodyText.md.fontSize,
     fontFamily: theme.typography.mobile.bodyText.fontFamily,
     fontWeight: theme.typography.mobile.bodyText.fontWeight,

package/src/components/Input/InputIcon.tsx

@@ -22,7 +22,7 @@ InputIcon.displayName = 'InputIcon';
 
 const styles = StyleSheet.create(theme => ({
   icon: {
-    color: theme.components.icon.color,
+    color: theme.color.icon.primary,
   },
 }));
 

package/src/components/Input/InputRoot.tsx

@@ -1,8 +1,8 @@
 import { useMemo } from 'react';
-import { StyleSheet } from 'react-native-unistyles';
 import { View } from 'react-native';
-import InputProps from './Input.props';
+import { StyleSheet } from 'react-native-unistyles';
 import { InputContext } from './Input.context';
+import InputProps from './Input.props';
 
 const InputRoot = ({
   children,
@@ -33,18 +33,18 @@ InputRoot.displayName = 'InputRoot';
 
 const styles = StyleSheet.create(theme => ({
   container: {
-    borderColor: theme.components.input.borderColor,
+    borderColor: theme.color.border.strong,
     height: theme.components.input.height,
     borderRadius: theme.components.input.borderRadius,
     flexDirection: 'row',
     overflow: 'hidden',
     alignContent: 'center',
     paddingHorizontal: theme.components.input.paddingHorizontal,
-    backgroundColor: theme.components.input.backgroundColor,
+    backgroundColor: theme.color.surface.neutral.strong,
     gap: theme.components.input.gap,
     outlineStyle: 'solid',
     outlineWidth: theme.components.input.borderWidth,
-    outlineColor: theme.components.input.borderColor,
+    outlineColor: theme.color.border.strong,
     variants: {
       focus: {
         true: {
@@ -53,12 +53,12 @@ const styles = StyleSheet.create(theme => ({
       },
       validationStatus: {
         invalid: {
-          borderColor: theme.components.input.borderColorInvalid,
-          outlineColor: theme.components.input.borderColorInvalid,
+          borderColor: theme.color.feedback.danger.border,
+          outlineColor: theme.color.feedback.danger.border,
         },
         valid: {
-          borderColor: theme.components.input.borderColorValid,
-          outlineColor: theme.components.input.borderColorValid,
+          borderColor: theme.color.feedback.positive.border,
+          outlineColor: theme.color.feedback.positive.border,
         },
         initial: {},
       },
@@ -69,7 +69,7 @@ const styles = StyleSheet.create(theme => ({
       },
       readonly: {
         true: {
-          borderColor: theme.components.input.borderColorReadOnly,
+          borderColor: theme.color.border.subtle,
         },
       },
       type: {

package/src/components/Label/Label.tsx

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
-import LabelProps from './Label.props';
 import { BodyText } from '../BodyText';
+import LabelProps from './Label.props';
 
 const Label = ({ children, nested, disabled, style, ...props }: LabelProps) => {
   styles.useVariants({ disabled });
@@ -20,7 +20,7 @@ Label.displayName = 'Label';
 
 const styles = StyleSheet.create(theme => ({
   text: {
-    color: theme.components.text.color,
+    color: theme.color.text.primary,
     variants: {
       disabled: {
         true: {

package/src/components/Link/LinkRoot.tsx

@@ -35,7 +35,7 @@ const styles = StyleSheet.create(theme => ({
         borderRadius: theme.borderRadius.xs,
         outlineStyle: 'solid',
         outlineWidth: 2,
-        outlineColor: theme.components.focus.border,
+        outlineColor: theme.color.focus.primary,
         outlineOffset: 1,
         boxShadow: 'none',
       },
@@ -50,7 +50,7 @@ const styles = StyleSheet.create(theme => ({
         true: {
           _web: {
             '_focus-visible': {
-              outlineColor: theme.components.focus.borderInverted,
+              outlineColor: theme.color.focus.inverted,
             },
           },
         },

package/src/components/List/List.docs.mdx

@@ -1,32 +1,32 @@
-import { Meta, Canvas, Story, Controls } from '@storybook/addon-docs/blocks';
-import * as Stories from './List.stories';
-import { ViewFigmaButton, BackToTopButton, UsageWrap, BadgeList } from '../../../docs/components';
+import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
+import {
+  BillMediumIcon,
+  ChevronRightSmallIcon,
+  ElectricityMediumIcon,
+  GasMediumIcon,
+  HomeFilledMediumIcon,
+  PaymentMediumIcon,
+  UserMediumIcon,
+} from '@utilitywarehouse/hearth-react-native-icons';
 import {
+  Badge,
+  BadgeText,
+  Box,
+  FlatList,
+  Image,
   List,
-  ListHeading,
+  SectionHeader,
   ListItem,
+  ListItemContent,
+  ListItemHelperText,
   ListItemIcon,
   ListItemLeadingContent,
-  ListItemHelperText,
   ListItemText,
   ListItemTrailingContent,
   ListItemTrailingIcon,
-  ListItemContent,
-  Box,
-  Badge,
-  BadgeText,
-  FlatList,
-  Image,
 } from '../../';
-import {
-  BillMediumIcon,
-  ChevronRightSmallIcon,
-  PaymentMediumIcon,
-  HomeFilledMediumIcon,
-  UserMediumIcon,
-  ElectricityMediumIcon,
-  GasMediumIcon,
-} from '@utilitywarehouse/hearth-react-native-icons';
+import { BackToTopButton, BadgeList, UsageWrap, ViewFigmaButton } from '../../../docs/components';
+import * as Stories from './List.stories';
 
 <Meta title="Components / List" />
 
@@ -44,7 +44,6 @@ List item is the main building block of list. Each item has its own set of prope
 - [Usage](#usage)
 - [Props](#props)
   - [`List`](#list-1)
-  - [`ListHeading`](#listheading)
   - [`ListItem`](#listitem)
 - [Advanced Usage](#advanced-usage)
 - [Variants](#variants)
@@ -65,7 +64,7 @@ List item is the main building block of list. Each item has its own set of prope
 ## Usage
 
 <UsageWrap>
-  <List headingText="Heading" headingHelperText="Supporting text" divider>
+  <List heading="Heading" helperText="Supporting text" divider>
     <ListItem text="List Item 1" onPress={() => console.log('item pressed')} />
     <ListItem text="List Item 2" onPress={() => console.log('item pressed')} />
     <ListItem text="List Item 3" onPress={() => console.log('item pressed')} />
@@ -91,39 +90,19 @@ const MyComponent = () => (
 | Name                    | Type                                                                                              | Default   | Description                                                |
 | ----------------------- | ------------------------------------------------------------------------------------------------- | --------- | ---------------------------------------------------------- |
 | container               | `'none' \| 'subtleWhite' \| 'emphasisWhite' \|` <br /> `'subtleWarmWhite' \| 'emphasisWarmWhite'` | `'none'`  | The container style of the list.                           |
-| headingText             | `string`                                                                                          |           | The text to display in the heading of the list.            |
-| headingHelperText       | `string`                                                                                          |           | The supporting text to display in the heading of the list. |
-| headingLinkText         | `string`                                                                                          |           | The text for the link in the heading.                      |
-| headingLinkHref         | `string`                                                                                          |           | The href for the link in the heading.                      |
-| headingLinkOnPress      | `() => void`                                                                                      |           | Callback function when the heading link is pressed.        |
-| headingLinkTarget       | `'_blank' \| '_self' \| '_parent' \| '_top'`                                                      |           | Target for the link in the heading.                        |
-| headingLinkDisabled     | `boolean`                                                                                         | `false`   | Whether the heading link is disabled.                      |
-| headingLinkIcon         | `ComponentType`                                                                                   |           | Icon for the heading link.                                 |
-| headingLinkIconPosition | `'left' \| 'right'`                                                                               | `'right'` | Position of the icon in the heading link.                  |
-| headingLinkShowIcon     | `boolean`                                                                                         | `true`    | Whether to show the icon in the heading link.              |
+| heading                 | `string`                                                                                          |           | The text to display in the heading of the list.            |
+| helperText              | `string`                                                                                          |           | The supporting text to display in the heading of the list. |
+| linkText                | `string`                                                                                          |           | The text for the link in the heading.                      |
+| linkHref                | `string`                                                                                          |           | The href for the link in the heading.                      |
+| linkOnPress             | `() => void`                                                                                      |           | Callback function when the heading link is pressed.        |
+| linkTarget              | `'_blank' \| '_self' \| '_parent' \| '_top'`                                                      |           | Target for the link in the heading.                        |                   |
+| linkIcon                | `ComponentType`                                                                                   |           | Icon for the heading link.                                 |
+| linkIconPosition        | `'left' \| 'right'`                                                                               | `'right'` | Position of the icon in the heading link.                  |
+| linkShowIcon            | `boolean`                                                                                         | `true`    | Whether to show the icon in the heading link.              |
 | divider                 | `boolean`                                                                                         | `false`   | Whether to display a divider below the list items.         |
 | loading                 | `boolean`                                                                                         | `false`   | Whether to show the list items in loading state.           |
 | disabled                | `boolean`                                                                                         | `false`   | Whether to disable the list.                               |
 
-### `ListHeading`
-
-| Name             | Type                                         | Default    | Description                                                |
-| ---------------- | -------------------------------------------- | ---------- | ---------------------------------------------------------- |
-| text             | `string`                                     |            | The text to display in the heading of the list.            |
-| helperText       | `string`                                     |            | The supporting text to display in the heading of the list. |
-| linkText         | `string`                                     |            | The text for the link in the heading.                      |
-| linkHref         | `string`                                     |            | The href for the link in the heading.                      |
-| linkOnPress      | `() => void`                                 |            | Callback function when the link is pressed.                |
-| linkTarget       | `'_blank' \| '_self' \| '_parent' \| '_top'` | `'_blank'` | Target for the link in the heading.                        |
-| linkDisabled     | `boolean`                                    | `false`    | Whether the link is disabled.                              |
-| linkIcon         | `ComponentType`                              |            | Icon for the link.                                         |
-| linkIconPosition | `'left' \| 'right'`                          | `'right'`  | Position of the icon in the link.                          |
-| linkShowIcon     | `boolean`                                    | `true`     | Whether to show the icon in the link.                      |
-
-#### - `ListHeadingText`
-
-#### - `ListHeadingHelperText`
-
 ### `ListItem`
 
 | Name            | Type                     | Default | Description                                                     |
@@ -166,7 +145,7 @@ If you need to use the List component in a more advanced way, you can use the pa
 
 <UsageWrap>
   <List>
-    <ListHeading text="Your account" helperText="Tap the links below to view your account" />
+    <SectionHeader heading="Your account" helperText="Tap the links below to view your account" />
     <ListItem onPress={() => console.log('pressed')}>
       <ListItemLeadingContent>
         <ListItemIcon as={BillMediumIcon} />
@@ -221,7 +200,7 @@ If you need to use the List component in a more advanced way, you can use the pa
 ```tsx
 import {
   List,
-  ListHeading,
+  SectionHeader,
   ListItem,
   ListItemIcon,
   ListItemLeadingContent,
@@ -241,7 +220,7 @@ import {
 
 const MyComponent = () => (
   <List>
-    <ListHeading text="Your account" helperText="Tap the links below to view your account" />
+    <SectionHeader heading="Your account" helperText="Tap the links below to view your account" />
     <ListItem onPress={() => console.log('pressed')}>
       <ListItemLeadingContent>
         <ListItemIcon as={BillMediumIcon} />
@@ -404,7 +383,7 @@ const BadgeList = () => {
         </ListItemLeadingContent>
         <ListItemContent>
           <ListItemText>Electricity</ListItemText>
-          <Badge colorScheme="blue">
+          <Badge colorScheme="info">
             <BadgeText>Text</BadgeText>
           </Badge>
           <ListItemHelperText>Last reading 23/03/24</ListItemHelperText>
@@ -422,7 +401,7 @@ const BadgeList = () => {
         <ListItemContent>
           <Flex direction="row" style={{ justifyContent: 'space-between' }}>
             <ListItemText>Gas</ListItemText>
-            <Badge colorScheme="green">
+            <Badge colorScheme="positive">
               <BadgeText>Smart meter</BadgeText>
             </Badge>
           </Flex>

package/src/components/List/List.props.ts

@@ -3,16 +3,15 @@ import { ComponentType } from 'react';
 
 interface ListProps extends ViewProps {
   container?: 'none' | 'subtleWhite' | 'emphasisWhite' | 'subtleWarmWhite' | 'emphasisWarmWhite';
-  headingText?: string;
-  headingHelperText?: string;
-  headingLinkText?: string;
-  headingLinkHref?: string;
-  headingLinkOnPress?: () => void;
-  headingLinkTarget?: '_blank' | '_self' | '_parent' | '_top';
-  headingLinkDisabled?: boolean;
-  headingLinkIcon?: ComponentType;
-  headingLinkIconPosition?: 'left' | 'right';
-  headingLinkShowIcon?: boolean;
+  heading?: string;
+  helperText?: string;
+  linkText?: string;
+  linkHref?: string;
+  linkIcon?: ComponentType;
+  linkIconPosition?: 'left' | 'right';
+  linkOnPress?: () => void;
+  linkTarget?: '_blank' | '_self' | '_parent' | '_top';
+  linkShowIcon?: boolean;
   disabled?: boolean;
   loading?: boolean;
   divider?: boolean;

package/src/components/List/List.stories.tsx

@@ -17,15 +17,15 @@ const meta = {
       control: 'select',
       description: 'The container variant to be displayed on the list.',
     },
-    headingText: {
+    heading: {
       control: 'text',
       description:
-        'The heading text to be displayed on the list. \n _Note: This is a playground prop, use title on the ListHeading component._',
+        'The heading text to be displayed on the list. \n _Note: This is a playground prop, use heading on the SectionHeader component._',
     },
-    headingHelperText: {
+    helperText: {
       control: 'text',
       description:
-        'The heading supporting text to be displayed on the list. \n _Note: This is a playground prop, use _listItemHelperText on the ListHeading component._',
+        'The heading supporting text to be displayed on the list. \n _Note: This is a playground prop, use helperText on the SectionHeader component._',
     },
     divider: {
       control: 'boolean',
@@ -43,8 +43,8 @@ const meta = {
   },
   args: {
     container: 'none',
-    headingText: 'This is the list heading',
-    headingHelperText: 'Supporting text',
+    heading: 'This is the list heading',
+    helperText: 'Supporting text',
     divider: true,
     disabled: false,
     loading: false,
@@ -86,7 +86,7 @@ export const KitchenSink: Story = {
     return (
       <Flex space="sm" direction="column" style={{ width: '100%' }}>
         <VariantTitle title="List with title and supporting text">
-          <List headingText="List Heading" headingHelperText="Supporting Text">
+          <List heading="List Heading" helperText="Supporting Text">
             {list.map((item, index) => (
               <ListItem key={index} text={item.text} helperText={item.helperText} />
             ))}
@@ -165,7 +165,7 @@ export const KitchenSink: Story = {
           </List>
         </VariantTitle>
         <VariantTitle title="List with heading link">
-          <List headingText="Heading" headingLinkText="View all" headingLinkHref="http://uw.co.uk">
+          <List heading="Heading" linkText="View all" linkHref="http://uw.co.uk">
             {list.map((item, index) => (
               <ListItem
                 key={index}

package/src/components/List/List.tsx

@@ -4,7 +4,7 @@ import { StyleSheet } from 'react-native-unistyles';
 import { Card } from '../Card';
 import { ListContext } from './List.context';
 import type ListProps from './List.props';
-import { ListHeading } from './ListHeading';
+import { SectionHeader } from '../SectionHeader';
 import { ListItem, ListItemProps } from './ListItem';
 
 const markFirstListItem = (children: ReactNode): ViewProps['children'] => {
@@ -43,26 +43,27 @@ const markFirstListItem = (children: ReactNode): ViewProps['children'] => {
 
 const List = ({
   children,
-  headingText,
-  headingHelperText,
-  headingLinkText,
-  headingLinkHref,
-  headingLinkOnPress,
-  headingLinkTarget,
-  headingLinkDisabled,
-  headingLinkIcon,
-  headingLinkIconPosition,
-  headingLinkShowIcon,
+  heading,
+  helperText,
+  linkText,
+  linkHref,
+  linkIcon,
+  linkIconPosition,
+  linkOnPress,
+  linkTarget,
+  linkShowIcon,
   ...props
 }: ListProps) => {
   const { loading, disabled, divider = true, container = 'none' } = props;
   const containerToCard: {
     variant: 'subtle' | 'emphasis';
-    colorScheme: 'white' | 'warmWhite';
+    colorScheme: 'neutralStrong' | 'neutralSubtle';
   } = {
     variant: container === 'subtleWhite' || container === 'subtleWarmWhite' ? 'subtle' : 'emphasis',
     colorScheme:
-      container === 'subtleWhite' || container === 'emphasisWhite' ? 'white' : 'warmWhite',
+      container === 'subtleWhite' || container === 'emphasisWhite'
+        ? 'neutralStrong'
+        : 'neutralSubtle',
   };
   const updatedChildren = markFirstListItem(children);
   const value = useMemo(
@@ -73,18 +74,17 @@ const List = ({
   return (
     <ListContext.Provider value={value}>
       <View {...props} style={[styles.container, props.style]}>
-        {headingText ? (
-          <ListHeading
-            text={headingText}
-            helperText={headingHelperText}
-            linkText={headingLinkText}
-            linkHref={headingLinkHref}
-            linkOnPress={headingLinkOnPress}
-            linkTarget={headingLinkTarget}
-            linkDisabled={headingLinkDisabled}
-            linkIcon={headingLinkIcon}
-            linkIconPosition={headingLinkIconPosition}
-            linkShowIcon={headingLinkShowIcon}
+        {heading ? (
+          <SectionHeader
+            heading={heading}
+            helperText={helperText}
+            linkText={linkText}
+            linkHref={linkHref}
+            linkOnPress={linkOnPress}
+            linkTarget={linkTarget}
+            linkIcon={linkIcon}
+            linkIconPosition={linkIconPosition}
+            linkShowIcon={linkShowIcon}
           />
         ) : null}
         {container === 'none' ? (

package/src/components/List/ListItem/ListItemHelperText.tsx

@@ -14,7 +14,7 @@ ListItemHelperText.displayName = 'ListItemHelperText';
 
 const styles = StyleSheet.create(theme => ({
   text: {
-    color: theme.components.text.colorSecondary,
+    color: theme.color.text.secondary,
   },
 }));
 

package/src/components/List/ListItem/ListItemIcon.tsx

@@ -22,7 +22,7 @@ ListItemIcon.displayName = 'ListItemIcon';
 
 const styles = StyleSheet.create(theme => ({
   icon: {
-    color: theme.components.icon.color,
+    color: theme.color.icon.primary,
     width: 24,
     height: 24,
   },