@utilitywarehouse/hearth-react-native 0.17.0 → 0.18.0

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @utilitywarehouse/hearth-react-native@0.17.0 build /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.18.0 build /home/runner/work/hearth/hearth/packages/react-native
 > tsc
 

package/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
-> @utilitywarehouse/hearth-react-native@0.17.0 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.18.0 lint /home/runner/work/hearth/hearth/packages/react-native
 > TIMING=1 eslint .
 
 
@@ -55,15 +55,15 @@
 
 ✖ 24 problems (0 errors, 24 warnings)
 
-Rule                                              | Time (ms) | Relative
-:-------------------------------------------------|----------:|--------:
-@typescript-eslint/no-unused-vars                 |  1454.377 |    60.3%
-react-hooks/rules-of-hooks                        |   109.992 |     4.6%
-react-hooks/exhaustive-deps                       |    91.815 |     3.8%
-no-global-assign                                  |    66.528 |     2.8%
-no-loss-of-precision                              |    57.391 |     2.4%
-@typescript-eslint/ban-ts-comment                 |    54.505 |     2.3%
-no-misleading-character-class                     |    45.527 |     1.9%
-no-unexpected-multiline                           |    39.063 |     1.6%
-no-regex-spaces                                   |    29.197 |     1.2%
-@typescript-eslint/no-unnecessary-type-constraint |    28.583 |     1.2%
+Rule                              | Time (ms) | Relative
+:---------------------------------|----------:|--------:
+@typescript-eslint/no-unused-vars |  1538.884 |    63.7%
+no-global-assign                  |    88.035 |     3.6%
+react-hooks/exhaustive-deps       |    86.501 |     3.6%
+react-hooks/rules-of-hooks        |    67.331 |     2.8%
+no-misleading-character-class     |    48.025 |     2.0%
+no-unexpected-multiline           |    45.795 |     1.9%
+no-loss-of-precision              |    34.916 |     1.4%
+@typescript-eslint/ban-ts-comment |    33.872 |     1.4%
+no-regex-spaces                   |    31.659 |     1.3%
+no-fallthrough                    |    31.350 |     1.3%

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.18.0
+
+### Minor Changes
+
+- [#869](https://github.com/utilitywarehouse/hearth/pull/869) [`89231c8`](https://github.com/utilitywarehouse/hearth/commit/89231c818dfd694f53b50f4cc961a38d0a50999e) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add color override props to `IconButton` for service-specific branding
+
+  The `IconButton` component now supports custom color overrides through three new optional props: `backgroundColor`, `activeBackgroundColor`, and `shadowColor`. These props enable service-specific branding for use cases like service buttons (Electricity, Broadband, Mobile, Insurance, Cashback Card).
+
+  ⚠️ **Important**: These props should be used sparingly and only for specific use cases where brand-specific colors are required. For most use cases, continue using the standard `colorScheme` and `variant` props to maintain design system consistency.
+
+  **Components affected**:
+  - `IconButton`
+
+  **Developer changes**:
+
+  You can now customize `IconButton` colors for service-specific branding:
+
+  ```tsx
+  import { IconButton } from '@utilitywarehouse/hearth-react-native';
+  import { ElectricityMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
+
+  <IconButton
+    icon={ElectricityMediumIcon}
+    backgroundColor="energyBlue200"
+    activeBackgroundColor="energyBlue300"
+    shadowColor="energyBlue300"
+    variant="emphasis"
+    onPress={handlePress}
+  />;
+  ```
+
+  The new props are:
+  - `backgroundColor` - Sets the base background color, overriding the color scheme's default
+  - `activeBackgroundColor` - Sets the background color when pressed or in an active state
+  - `shadowColor` - Sets the shadow/elevation color
+
+  These overrides work alongside the existing `variant` and `colorScheme` props, allowing you to maintain structural styling while customizing colors for specific branding requirements.
+
+### Patch Changes
+
+- [#871](https://github.com/utilitywarehouse/hearth/pull/871) [`8984335`](https://github.com/utilitywarehouse/hearth/commit/89843355d268aaa184bea75784e6841568c4784f) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Fix style ordering in `BodyText` to ensure color props properly override custom styles
+
 ## 0.17.0
 
 ### Minor Changes

package/build/components/BodyText/BodyText.js

@@ -18,7 +18,7 @@ const BodyText = ({ children, color, size = 'md', truncated, weight = 'regular',
             }
             : {}), style: [
             styles.text,
-            styles.getColours(color, textDecorationColor),
+            props.style,
             {
                 ...(textTransform && { textTransform }),
                 ...(textAlign && { textAlign }),
@@ -27,7 +27,7 @@ const BodyText = ({ children, color, size = 'md', truncated, weight = 'regular',
                 ...(userSelect && { userSelect }),
                 ...(textAlignVertical && { textAlignVertical }),
             },
-            props.style,
+            styles.getColours(color, textDecorationColor),
         ], children: children }));
 };
 BodyText.displayName = 'BodyText';

package/build/components/IconButton/IconButton.props.d.ts

@@ -1,6 +1,7 @@
 import type { ComponentType } from 'react';
 import type { PressableProps } from 'react-native';
 import { ViewProps } from 'react-native-svg/lib/typescript/fabric/utils';
+import { ColorValue } from '../../types';
 import { ButtonVariants } from '../Button/Button.props';
 export type IconButtonProps = {
     disabled?: boolean;
@@ -9,4 +10,22 @@ export type IconButtonProps = {
     icon: ComponentType;
     loading?: boolean;
     children?: ViewProps['children'];
+    /**
+     * Custom background color override.
+     * ⚠️ Use sparingly and only for specific use cases (e.g., service buttons).
+     * @default undefined
+     */
+    backgroundColor?: ColorValue;
+    /**
+     * Custom active/pressed background color override.
+     * ⚠️ Use sparingly and only for specific use cases (e.g., service buttons).
+     * @default undefined
+     */
+    activeBackgroundColor?: ColorValue;
+    /**
+     * Custom shadow color override.
+     * ⚠️ Use sparingly and only for specific use cases (e.g., service buttons).
+     * @default undefined
+     */
+    shadowColor?: ColorValue;
 } & Omit<PressableProps, 'children'> & ButtonVariants;

package/build/components/IconButton/IconButtonRoot.d.ts

@@ -1,6 +1,6 @@
 import type { IconButtonProps } from './IconButton.props';
 declare const IconButtonRoot: {
-    ({ children, colorScheme, variant, size, inverted, states, ...props }: IconButtonProps & {
+    ({ children, colorScheme, variant, size, inverted, states, backgroundColor, activeBackgroundColor, shadowColor, ...props }: IconButtonProps & {
         states?: {
             active?: boolean;
             disabled?: boolean;

package/build/components/IconButton/IconButtonRoot.js

@@ -2,12 +2,23 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { Pressable } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
+import { getFlattenedColorValue } from '../../utils';
 import { IconButtonContext } from './IconButton.context';
-const IconButtonRoot = ({ children, colorScheme = 'highlight', variant = 'solid', size = 'md', inverted = false, states, ...props }) => {
+const IconButtonRoot = ({ children, colorScheme = 'highlight', variant = 'solid', size = 'md', inverted = false, states, backgroundColor, activeBackgroundColor, shadowColor, ...props }) => {
     const { active, disabled } = states || {};
     styles.useVariants({ colorScheme, variant, size, inverted, disabled, active });
     const value = useMemo(() => ({ colorScheme, variant, size, inverted, disabled, active }), [colorScheme, variant, size, inverted, disabled, active]);
-    return (_jsx(IconButtonContext.Provider, { value: value, children: _jsx(Pressable, { ...props, style: [styles.container, props.style], children: children }) }));
+    return (_jsx(IconButtonContext.Provider, { value: value, children: _jsx(Pressable, { ...props, style: [
+                styles.container,
+                styles.overrides({
+                    backgroundColor,
+                    activeBackgroundColor,
+                    shadowColor,
+                    active,
+                    variant,
+                }),
+                props.style,
+            ], children: children }) }));
 };
 IconButtonRoot.displayName = 'IconButtonRoot';
 const styles = StyleSheet.create(theme => ({
@@ -394,5 +405,35 @@ const styles = StyleSheet.create(theme => ({
             },
         ],
     },
+    overrides: ({ backgroundColor, activeBackgroundColor, shadowColor, active, variant }) => ({
+        ...(backgroundColor
+            ? {
+                backgroundColor: getFlattenedColorValue(backgroundColor, theme.color),
+                _web: {
+                    _hover: {
+                        backgroundColor: getFlattenedColorValue(activeBackgroundColor ?? backgroundColor, theme.color),
+                    },
+                    _active: {
+                        backgroundColor: getFlattenedColorValue(activeBackgroundColor ?? backgroundColor, theme.color),
+                    },
+                },
+            }
+            : {}),
+        ...(active && activeBackgroundColor
+            ? {
+                backgroundColor: getFlattenedColorValue(activeBackgroundColor, theme.color),
+            }
+            : {}),
+        ...(shadowColor && variant === 'emphasis'
+            ? {
+                boxShadow: `${theme.shadow.mobile.sm.x}px ${theme.shadow.mobile.sm.y}px ${theme.shadow.mobile.sm.spread}px ${getFlattenedColorValue(shadowColor, theme.color)}`,
+            }
+            : {}),
+        ...(active && shadowColor && variant === 'emphasis'
+            ? {
+                boxShadow: 'none',
+            }
+            : {}),
+    }),
 }));
 export default IconButtonRoot;

package/build/components/List/ListItem/ListItemHelperText.d.ts

@@ -1,6 +1,6 @@
 import { BodyTextProps } from '../../BodyText';
 declare const ListItemHelperText: {
-    ({ children, ...props }: BodyTextProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, style, ...props }: BodyTextProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default ListItemHelperText;

package/build/components/List/ListItem/ListItemHelperText.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../../BodyText';
-const ListItemHelperText = ({ children, ...props }) => {
-    return (_jsx(BodyText, { size: "md", ...props, style: [styles.text, props.style], children: children }));
+const ListItemHelperText = ({ children, style, ...props }) => {
+    return (_jsx(BodyText, { size: "md", style: [styles.text, style], ...props, children: children }));
 };
 ListItemHelperText.displayName = 'ListItemHelperText';
 const styles = StyleSheet.create(theme => ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -56,8 +56,8 @@
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^3.2.4",
     "@utilitywarehouse/hearth-fonts": "^0.0.4",
-    "@utilitywarehouse/hearth-react-native-icons": "^0.7.4",
     "@utilitywarehouse/hearth-react-icons": "^0.7.4",
+    "@utilitywarehouse/hearth-react-native-icons": "^0.7.4",
     "@utilitywarehouse/hearth-svg-assets": "^0.3.0",
     "@utilitywarehouse/hearth-tokens": "^0.2.2"
   },

package/src/components/BodyText/BodyText.tsx

@@ -43,7 +43,7 @@ const BodyText = ({
         : {})}
       style={[
         styles.text,
-        styles.getColours(color, textDecorationColor),
+        props.style,
         {
           ...(textTransform && { textTransform }),
           ...(textAlign && { textAlign }),
@@ -53,7 +53,7 @@ const BodyText = ({
           ...(userSelect && { userSelect }),
           ...(textAlignVertical && { textAlignVertical }),
         },
-        props.style,
+        styles.getColours(color, textDecorationColor),
       ]}
     >
       {children}

package/src/components/IconButton/IconButton.docs.mdx

@@ -22,6 +22,7 @@ The `IconButton` component is used to trigger an action or event, such as openin
 - [Usage](#usage)
 - [Props](#props)
 - [Variants](#variants)
+- [Custom Color Overrides](#custom-color-overrides)
 
 ## Playground
 
@@ -63,16 +64,97 @@ const MyComponent = () => {
 
 ## Props
 
-| Property      | Type                                                                     | Description                                                | Default     |
-| ------------- | ------------------------------------------------------------------------ | ---------------------------------------------------------- | ----------- |
-| `onPress`     | `() => void`                                                             | Callback function to be called when the button is pressed. | -           |
-| `variant`     | `'emphasis' \| 'solid' \| 'outline' \| 'ghost'`                          | The variant of the button.                                 | 'solid'     |
-| `size`        | `'xs' \| 'md' `                                                          | The size of the button.                                    | 'md'        |
-| `colorScheme` | `'highlight' \| 'affirmative \| 'destructive' \| 'functional' \| 'gold'` | The colour scheme of the button.                           | 'highlight' |
-| `loading`     | `boolean`                                                                | Changes the button to a loading state.                     | `false`     |
-| `disabled`    | `boolean`                                                                | Disables the button.                                       | `false`     |
-| `pressed`     | `boolean`                                                                | Changes the button to a pressed state.                     | `false`     |
+| Property                | Type                                                                             | Description                                                                                 | Default     |
+| ----------------------- | -------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ----------- |
+| `onPress`               | `() => void`                                                                     | Callback function to be called when the button is pressed.                                  | -           |
+| `variant`               | `'emphasis' \| 'solid' \| 'outline' \| 'ghost'`                                  | The variant of the button.                                                                  | 'solid'     |
+| `size`                  | `'xs' \| 'md' `                                                                  | The size of the button.                                                                     | 'md'        |
+| `colorScheme`           | `'highlight' \| 'affirmative \| 'destructive' \|`<br />` 'functional' \| 'gold'` | The colour scheme of the button.                                                            | 'highlight' |
+| `loading`               | `boolean`                                                                        | Changes the button to a loading state.                                                      | `false`     |
+| `disabled`              | `boolean`                                                                        | Disables the button.                                                                        | `false`     |
+| `pressed`               | `boolean`                                                                        | Changes the button to a pressed state.                                                      | `false`     |
+| `backgroundColor`       | `ColorValue`                                                                     | Custom background color override. Use sparingly for specific use cases only.                | -           |
+| `activeBackgroundColor` | `ColorValue`                                                                     | Custom active/pressed background color override. Use sparingly for specific use cases only. | -           |
+| `shadowColor`           | `ColorValue`                                                                     | Custom shadow color override. Use sparingly for specific use cases only.                    | -           |
 
 ## Variants
 
 <Canvas of={Stories.KitchenSink} />
+
+## Custom Color Overrides
+
+The `IconButton` component supports custom color overrides through the `backgroundColor`, `activeBackgroundColor`, and `shadowColor` props.
+
+**⚠️ Important:** These props should be used **sparingly** and only for specific use cases where brand-specific colors are required, such as service buttons (Electricity, Broadband, Mobile, Insurance, Cashback Card).
+
+For most use cases, you should use the standard `colorScheme` and `variant` props which maintain design system consistency.
+
+### Example: Service Icon Buttons
+
+<Canvas of={Stories.ServiceIconButtons} />
+
+```tsx
+import { IconButton } from '@utilitywarehouse/hearth-react-native';
+import {
+  ElectricityMediumIcon,
+  BroadbandMediumIcon,
+  MobileMediumIcon,
+  InsuranceMediumIcon,
+  CashbackCardMediumIcon,
+} from '@utilitywarehouse/hearth-react-native-icons';
+
+const MyComponent = () => {
+  return (
+    <>
+      <IconButton
+        icon={ElectricityMediumIcon}
+        backgroundColor="energyBlue200"
+        activeBackgroundColor="energyBlue300"
+        variant="emphasis"
+        shadowColor="energyBlue300"
+        onPress={() => console.log('Pressed')}
+      />
+      <IconButton
+        icon={BroadbandMediumIcon}
+        backgroundColor="broadbandGreen200"
+        activeBackgroundColor="broadbandGreen300"
+        variant="emphasis"
+        shadowColor="broadbandGreen300"
+        onPress={() => console.log('Pressed')}
+      />
+      <IconButton
+        icon={MobileMediumIcon}
+        backgroundColor="mobileRose200"
+        activeBackgroundColor="mobileRose300"
+        variant="emphasis"
+        shadowColor="mobileRose400"
+        onPress={() => console.log('Pressed')}
+      />
+      <IconButton
+        icon={InsuranceMediumIcon}
+        backgroundColor="insuranceOrange300"
+        activeBackgroundColor="insuranceOrange400"
+        variant="emphasis"
+        shadowColor="insuranceOrange400"
+        onPress={() => console.log('Pressed')}
+      />
+      <IconButton
+        icon={CashbackCardMediumIcon}
+        backgroundColor="cashbackLilac300"
+        activeBackgroundColor="cashbackLilac400"
+        variant="emphasis"
+        shadowColor="cashbackLilac500"
+        onPress={() => console.log('Pressed')}
+      />
+    </>
+  );
+};
+```
+
+### Override Props Behavior
+
+- **`backgroundColor`**: Sets the base background color of the button, overriding the color scheme's default background
+- **`activeBackgroundColor`**: Sets the background color when the button is pressed or in an active state
+- **`shadowColor`**: Sets the shadow/elevation color for the button
+
+These overrides work alongside the existing `variant` and `colorScheme` props, allowing you to maintain the structural styling while customising colors for specific branding requirements.

package/src/components/IconButton/IconButton.props.ts

@@ -1,6 +1,7 @@
 import type { ComponentType } from 'react';
 import type { PressableProps } from 'react-native';
 import { ViewProps } from 'react-native-svg/lib/typescript/fabric/utils';
+import { ColorValue } from '../../types';
 import { ButtonVariants } from '../Button/Button.props';
 
 export type IconButtonProps = {
@@ -22,5 +23,23 @@ export type IconButtonProps = {
    */
   loading?: boolean;
   children?: ViewProps['children'];
+  /**
+   * Custom background color override.
+   * ⚠️ Use sparingly and only for specific use cases (e.g., service buttons).
+   * @default undefined
+   */
+  backgroundColor?: ColorValue;
+  /**
+   * Custom active/pressed background color override.
+   * ⚠️ Use sparingly and only for specific use cases (e.g., service buttons).
+   * @default undefined
+   */
+  activeBackgroundColor?: ColorValue;
+  /**
+   * Custom shadow color override.
+   * ⚠️ Use sparingly and only for specific use cases (e.g., service buttons).
+   * @default undefined
+   */
+  shadowColor?: ColorValue;
 } & Omit<PressableProps, 'children'> &
   ButtonVariants;

package/src/components/IconButton/IconButton.stories.tsx

@@ -1,5 +1,12 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
 import * as Icons from '@utilitywarehouse/hearth-react-native-icons';
+import {
+  BroadbandMediumIcon,
+  CashbackCardMediumIcon,
+  ElectricityMediumIcon,
+  InsuranceMediumIcon,
+  MobileMediumIcon,
+} from '@utilitywarehouse/hearth-react-native-icons';
 import { ComponentType } from 'react';
 import { IconButton, IconButtonProps } from '.';
 import { VariantTitle } from '../../../docs/components';
@@ -213,3 +220,52 @@ export const KitchenSink: Story = {
     );
   },
 };
+
+export const ServiceIconButtons: Story = {
+  render: () => {
+    return (
+      <ButtonGroup space="md">
+        <IconButton
+          icon={ElectricityMediumIcon}
+          backgroundColor="energyBlue200"
+          activeBackgroundColor="energyBlue300"
+          variant="emphasis"
+          shadowColor="energyBlue300"
+          onPress={() => console.log('Pressed')}
+        />
+        <IconButton
+          icon={BroadbandMediumIcon}
+          backgroundColor="broadbandGreen200"
+          activeBackgroundColor="broadbandGreen300"
+          variant="emphasis"
+          shadowColor="broadbandGreen300"
+          onPress={() => console.log('Pressed')}
+        />
+        <IconButton
+          icon={MobileMediumIcon}
+          backgroundColor="mobileRose200"
+          activeBackgroundColor="mobileRose300"
+          variant="emphasis"
+          shadowColor="mobileRose400"
+          onPress={() => console.log('Pressed')}
+        />
+        <IconButton
+          icon={InsuranceMediumIcon}
+          backgroundColor="insuranceOrange300"
+          activeBackgroundColor="insuranceOrange400"
+          variant="emphasis"
+          shadowColor="insuranceOrange400"
+          onPress={() => console.log('Pressed')}
+        />
+        <IconButton
+          icon={CashbackCardMediumIcon}
+          backgroundColor="cashbackLilac300"
+          activeBackgroundColor="cashbackLilac400"
+          variant="emphasis"
+          shadowColor="cashbackLilac500"
+          onPress={() => console.log('Pressed')}
+        />
+      </ButtonGroup>
+    );
+  },
+};

package/src/components/IconButton/IconButtonRoot.tsx

@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 import { Pressable, ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
+import { getFlattenedColorValue } from '../../utils';
 import { IconButtonContext } from './IconButton.context';
 import type { IconButtonProps } from './IconButton.props';
 
@@ -11,6 +12,9 @@ const IconButtonRoot = ({
   size = 'md',
   inverted = false,
   states,
+  backgroundColor,
+  activeBackgroundColor,
+  shadowColor,
   ...props
 }: IconButtonProps & { states?: { active?: boolean; disabled?: boolean } }) => {
   const { active, disabled } = states || {};
@@ -21,7 +25,20 @@ const IconButtonRoot = ({
   );
   return (
     <IconButtonContext.Provider value={value}>
-      <Pressable {...props} style={[styles.container, props.style as ViewStyle]}>
+      <Pressable
+        {...props}
+        style={[
+          styles.container,
+          styles.overrides({
+            backgroundColor,
+            activeBackgroundColor,
+            shadowColor,
+            active,
+            variant,
+          }),
+          props.style as ViewStyle,
+        ]}
+      >
         {children}
       </Pressable>
     </IconButtonContext.Provider>
@@ -420,6 +437,42 @@ const styles = StyleSheet.create(theme => ({
       },
     ],
   },
+  overrides: ({ backgroundColor, activeBackgroundColor, shadowColor, active, variant }) => ({
+    ...(backgroundColor
+      ? {
+          backgroundColor: getFlattenedColorValue(backgroundColor, theme.color),
+          _web: {
+            _hover: {
+              backgroundColor: getFlattenedColorValue(
+                activeBackgroundColor ?? backgroundColor,
+                theme.color
+              ),
+            },
+            _active: {
+              backgroundColor: getFlattenedColorValue(
+                activeBackgroundColor ?? backgroundColor,
+                theme.color
+              ),
+            },
+          },
+        }
+      : {}),
+    ...(active && activeBackgroundColor
+      ? {
+          backgroundColor: getFlattenedColorValue(activeBackgroundColor, theme.color),
+        }
+      : {}),
+    ...(shadowColor && variant === 'emphasis'
+      ? {
+          boxShadow: `${theme.shadow.mobile.sm.x}px ${theme.shadow.mobile.sm.y}px ${theme.shadow.mobile.sm.spread}px ${getFlattenedColorValue(shadowColor, theme.color)}`,
+        }
+      : {}),
+    ...(active && shadowColor && variant === 'emphasis'
+      ? {
+          boxShadow: 'none',
+        }
+      : {}),
+  }),
 }));
 
 export default IconButtonRoot;

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

@@ -1,9 +1,9 @@
 import { StyleSheet } from 'react-native-unistyles';
 import { BodyText, BodyTextProps } from '../../BodyText';
 
-const ListItemHelperText = ({ children, ...props }: BodyTextProps) => {
+const ListItemHelperText = ({ children, style, ...props }: BodyTextProps) => {
   return (
-    <BodyText size="md" {...props} style={[styles.text, props.style]}>
+    <BodyText size="md" style={[styles.text, style]} {...props}>
       {children}
     </BodyText>
   );