@utilitywarehouse/hearth-react-native 0.11.0 → 0.13.0

package/build/components/VerificationInput/useVerificationInput.d.ts

@@ -0,0 +1,14 @@
+import { NativeSyntheticEvent, TextInput, TextInputKeyPressEventData } from 'react-native';
+interface UseVerificationInputProps {
+    value: string;
+    onChangeText?: (text: string) => void;
+}
+export declare const useVerificationInput: ({ value, onChangeText }: UseVerificationInputProps) => {
+    inputRefs: import("react").RefObject<(TextInput | null)[]>;
+    focusedIndex: number | null;
+    handleFocus: (index: number) => void;
+    handleBlur: () => void;
+    handleChangeText: (text: string, index: number) => void;
+    handleKeyPress: (e: NativeSyntheticEvent<TextInputKeyPressEventData>, index: number) => void;
+};
+export {};

package/build/components/VerificationInput/useVerificationInput.js

@@ -0,0 +1,58 @@
+import { useRef, useState } from 'react';
+export const useVerificationInput = ({ value, onChangeText }) => {
+    const length = 6;
+    const inputRefs = useRef([]);
+    const [focusedIndex, setFocusedIndex] = useState(null);
+    const handleFocus = (index) => {
+        setFocusedIndex(index);
+    };
+    const handleBlur = () => {
+        setFocusedIndex(null);
+    };
+    const handleChangeText = (text, index) => {
+        // Break down the text into an array of characters
+        const chars = Array(length).fill('');
+        for (let i = 0; i < value.length && i < length; i++) {
+            chars[i] = value[i];
+        }
+        if (text.length > 1) {
+            // Handle paste
+            const pastedChars = text.slice(0, length - index).split('');
+            for (let i = 0; i < pastedChars.length; i++) {
+                chars[index + i] = pastedChars[i];
+            }
+            const nextIndex = Math.min(index + pastedChars.length, length - 1);
+            inputRefs.current[nextIndex]?.focus();
+        }
+        else {
+            // Handle single char input
+            chars[index] = text;
+            if (text.length === 1 && index < length - 1) {
+                inputRefs.current[index + 1]?.focus();
+            }
+        }
+        onChangeText?.(chars.join(''));
+    };
+    const handleKeyPress = (e, index) => {
+        if (e.nativeEvent.key === 'Backspace') {
+            if (!value[index] && index > 0) {
+                e.preventDefault();
+                inputRefs.current[index - 1]?.focus();
+                const chars = Array(length).fill('');
+                for (let i = 0; i < value.length && i < length; i++) {
+                    chars[i] = value[i];
+                }
+                chars[index - 1] = '';
+                onChangeText?.(chars.join(''));
+            }
+        }
+    };
+    return {
+        inputRefs,
+        focusedIndex,
+        handleFocus,
+        handleBlur,
+        handleChangeText,
+        handleKeyPress,
+    };
+};

package/build/components/index.d.ts

@@ -53,6 +53,7 @@ export * from './Textarea';
 export * from './ThemedImage';
 export * from './Toast';
 export * from './ToggleButtonCard';
+export * from './VerificationInput';
 export { FlatList, Image, KeyboardAvoidingView, ScrollView, SectionList, View } from 'react-native';
 export { Pressable } from 'react-native';
 export { createIcon } from '@gluestack-ui/icon';

package/build/components/index.js

@@ -54,6 +54,7 @@ export * from './Textarea';
 export * from './ThemedImage';
 export * from './Toast';
 export * from './ToggleButtonCard';
+export * from './VerificationInput';
 export { FlatList, Image, KeyboardAvoidingView, ScrollView, SectionList, View } from 'react-native';
 export { Pressable } from 'react-native';
 export { createIcon } from '@gluestack-ui/icon';

package/build/utils/index.d.ts

@@ -1,9 +1,10 @@
 export { default as coloursAsArray, extractLightColorValues } from './coloursAsArray';
 export { default as formatThousands } from './formatThousands';
 export { default as getFlattenedColorValue } from './getFlattenedColorValue';
+export { getInitials } from './getInitials';
 export { default as getStyleValue } from './getStyleValue';
 export { default as hexWithOpacity } from './hexWithOpacity';
-export { getInitials } from './getInitials';
 export { default as isEqual } from './isEqual';
+export { default as isThemedImageProps } from './isThemedImageProps';
 export * from './styleUtils';
 export * from './themeValueHelpers';

package/build/utils/index.js

@@ -1,9 +1,10 @@
 export { default as coloursAsArray, extractLightColorValues } from './coloursAsArray';
 export { default as formatThousands } from './formatThousands';
 export { default as getFlattenedColorValue } from './getFlattenedColorValue';
+export { getInitials } from './getInitials';
 export { default as getStyleValue } from './getStyleValue';
 export { default as hexWithOpacity } from './hexWithOpacity';
-export { getInitials } from './getInitials';
 export { default as isEqual } from './isEqual';
+export { default as isThemedImageProps } from './isThemedImageProps';
 export * from './styleUtils';
 export * from './themeValueHelpers';

package/build/utils/isThemedImageProps.d.ts

@@ -0,0 +1,4 @@
+import { ImageProps } from 'react-native';
+import { ThemedImageProps } from 'src/components';
+declare const isThemedImageProps: (props: ThemedImageProps | ImageProps) => props is ThemedImageProps;
+export default isThemedImageProps;

package/build/utils/isThemedImageProps.js

@@ -0,0 +1,4 @@
+const isThemedImageProps = (props) => {
+    return 'light' in props && 'dark' in props;
+};
+export default isThemedImageProps;

package/docs/components/AllComponents.web.tsx

@@ -94,6 +94,7 @@ import {
   ToggleButtonCardGroup,
   UL,
   useColorMode,
+  VerificationInput,
 } from '../../src';
 import { addReactNativePrefix } from '../heplers';
 
@@ -821,6 +822,14 @@ const AllComponents: React.FC = () => {
               </UL>
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper
+            name="Verification Input"
+            link="/?path=/docs/forms-verificationinput--docs"
+          >
+            <Center flex={1} padding="200">
+              <VerificationInput onChangeText={() => {}} />
+            </Center>
+          </ComponentWrapper>
         </Flex>
       </ScrollView>
     </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.11.0",
+  "version": "0.13.0",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -24,20 +24,19 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
-    "@chromatic-com/storybook": "^4.1.2",
-    "@figma/code-connect": "^1.3.3",
+    "@chromatic-com/storybook": "^4.1.3",
+    "@figma/code-connect": "^1.3.11",
     "@gorhom/bottom-sheet": "5.2.6",
-    "@storybook/addon-a11y": "^10.0.5",
-    "@storybook/addon-docs": "^10.0.5",
-    "@storybook/addon-vitest": "^10.0.5",
-    "@storybook/react": "^10.0.5",
-    "@storybook/react-native-web-vite": "^10.0.5",
+    "@storybook/addon-a11y": "^10.1.4",
+    "@storybook/addon-docs": "^10.1.4",
+    "@storybook/addon-vitest": "^10.1.4",
+    "@storybook/react-native-web-vite": "^10.1.4",
     "@types/prismjs": "^1.26.5",
     "@types/react": "^19.1.10",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
     "chromatic": "^13.3.0",
-    "eslint-plugin-storybook": "10.0.5",
+    "eslint-plugin-storybook": "10.1.4",
     "playwright": "^1.55.1",
     "prismjs": "^1.30.0",
     "react": "^19.1.0",
@@ -51,16 +50,16 @@
     "react-native-web": "^0.20.0",
     "react-native-worklets": "^0.6.1",
     "remark-gfm": "^4.0.1",
-    "storybook": "^10.0.5",
+    "storybook": "^10.1.4",
     "typescript": "^5.7.3",
     "vite": "^7.1.3",
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^3.2.4",
     "@utilitywarehouse/hearth-fonts": "^0.0.4",
-    "@utilitywarehouse/hearth-react-icons": "^0.7.4",
     "@utilitywarehouse/hearth-react-native-icons": "^0.7.4",
+    "@utilitywarehouse/hearth-react-icons": "^0.7.4",
     "@utilitywarehouse/hearth-svg-assets": "^0.2.0",
-    "@utilitywarehouse/hearth-tokens": "^0.2.0"
+    "@utilitywarehouse/hearth-tokens": "^0.2.2"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": "^5.0.0",

package/src/components/Accordion/Accordion.figma.tsx

@@ -0,0 +1,23 @@
+import React from "react"
+import Accordion from "./Accordion"
+import figma from "@figma/code-connect"
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * None of your props could be automatically mapped to Figma properties.
+ * You should update the `props` object to include a mapping from your
+ * code props to Figma properties, and update the `example` function to
+ * return the code example you'd like to see in Figma
+ */
+
+figma.connect(
+  Accordion,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3385%3A7751",
+  {
+    props: {
+      // No matching props could be found for these Figma properties:
+      // "sectionHeader": figma.boolean('Section header?')
+    },
+    example: (props) => <Accordion />,
+  },
+)

package/src/components/Accordion/AccordionItemRoot.figma.tsx

@@ -0,0 +1,47 @@
+import React from "react"
+import AccordionItemRoot from "./AccordionItemRoot"
+import figma from "@figma/code-connect"
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from your code props to Figma properties.
+ * You should check this is correct, and update the `example` function
+ * to return the code example you'd like to see in Figma
+ */
+
+figma.connect(
+  AccordionItemRoot,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3390%3A6160",
+  {
+    props: {
+      // These props were automatically mapped based on your linked code:
+      disabled: figma.enum("State", {
+        Active: true,
+      }),
+      title: figma.string("Title"),
+      expanded: figma.boolean("Expand?"),
+      triggerContent: figma.instance("Trigger custom content"),
+      collapsable: figma.boolean("Expand?"),
+      focusable: figma.enum("State", {
+        Focus: true,
+      }),
+      // No matching props could be found for these Figma properties:
+      // "customContent": figma.boolean('Custom content?'),
+      // "title": figma.string('Title'),
+      // "description": figma.string('Description'),
+      // "customContent": figma.instance('Custom content'),
+      // "triggerCustomContent": figma.instance('Trigger custom content'),
+      // "triggerCustomContent": figma.boolean('Trigger custom content?')
+    },
+    example: (props) => (
+      <AccordionItemRoot
+        disabled={props.disabled}
+        title={props.title}
+        expanded={props.expanded}
+        triggerContent={props.triggerContent}
+        collapsable={props.collapsable}
+        focusable={props.focusable}
+      />
+    ),
+  },
+)

package/src/components/Accordion/AccordionTrigger.tsx

@@ -31,7 +31,7 @@ const styles = StyleSheet.create(theme => ({
       _hover: {
         backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
       },
-      '_focus-visible': theme.helpers.focusVisible,
+      // '_focus-visible': theme.helpers.focusVisible,
       _active: {
         backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
       },

package/src/components/Alert/Alert.figma.tsx

@@ -0,0 +1,47 @@
+import figma from '@figma/code-connect';
+import { Alert } from './';
+
+figma.connect(Alert, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3288%3A4656', {
+  links: [
+    {
+      name: 'Engineering Docs',
+      url: 'https://hearth.prod.uw.systems/react-native/?path=/docs/components-alert--docs',
+    },
+  ],
+  props: {
+    colorScheme: figma.enum('Color Scheme', {
+      Info: 'info',
+      Positive: 'positive',
+      Warning: 'warning',
+      Danger: 'danger',
+    }),
+    iconButton: figma.boolean('Icon button?', {
+      true: () => console.log('icon button pressed'),
+      false: undefined,
+    }),
+    text: figma.string('Text'),
+    close: figma.boolean('Close?', {
+      true: () => console.log('close'),
+      false: undefined,
+    }),
+    title: figma.string('Title'),
+    showLink: figma.boolean('Link?', {
+      true: () => console.log('link pressed'),
+      false: undefined,
+    }),
+    link: figma.nestedProps('Link', {
+      text: figma.string('Text'),
+    }),
+  },
+  example: props => (
+    <Alert
+      colorScheme={props.colorScheme}
+      title={props.title}
+      text={props.text}
+      onClose={props.close}
+      onPressIconButton={props.iconButton}
+      link={props.link.text}
+      onPressLink={props.showLink}
+    />
+  ),
+});

package/src/components/Avatar/Avatar.figma.tsx

@@ -0,0 +1,33 @@
+import React from "react"
+import Avatar from "./Avatar"
+import figma from "@figma/code-connect"
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from your code props to Figma properties.
+ * You should check this is correct, and update the `example` function
+ * to return the code example you'd like to see in Figma
+ */
+
+figma.connect(
+  Avatar,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=6790%3A14313",
+  {
+    props: {
+      // These props were automatically mapped based on your linked code:
+      size: figma.enum("Size", {
+        "SM-32": "sm",
+        "MD-48": "md",
+      }),
+      // No matching props could be found for these Figma properties:
+      // "initials": figma.string('Initials'),
+      // "image": figma.instance('Image'),
+      // "variant": figma.enum('Variant', {
+      //   "Image": "image",
+      //   "Initials": "initials",
+      //   "Icon": "icon"
+      // })
+    },
+    example: (props) => <Avatar size={props.size} />,
+  },
+)

package/src/components/Badge/Badge.figma.tsx

@@ -1,32 +1,56 @@
-import { Badge } from './';
-import figma from '@figma/code-connect';
+import React from "react"
+import Badge from "./Badge"
+import figma from "@figma/code-connect"
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from your code props to Figma properties.
+ * You should check this is correct, and update the `example` function
+ * to return the code example you'd like to see in Figma
+ */
 
 figma.connect(
   Badge,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components-%26-Tokens?node-id=61-652&t=8rlYQ45xy8j75vwM-4',
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=61%3A652",
   {
-    links: [
-      {
-        name: 'Storybook - Docs',
-        url: 'https://uw-hearth-react-native.vercel.app/?path=/docs/components-badge--docs',
-      },
-    ],
     props: {
-      text: figma.string('Text'),
-      colorScheme: figma.enum('Color Scheme', {
-        Blue: 'blue',
-        Orange: 'orange',
-        Green: 'green',
-        Grey: 'grey',
-        Red: 'red',
+      // These props were automatically mapped based on your linked code:
+      variant: figma.enum("Variant", {
+        "Subtle - Default": "subtle",
+        Emphasis: "emphasis",
+        Outline: "outline",
+      }),
+      colorScheme: figma.enum("Color Scheme", {
+        Info: "info",
+        Positive: "positive",
+        Danger: "danger",
+        Warning: "warning",
+        Functional: "functional",
+        Energy: "energy",
+        Broadband: "broadband",
+        Mobile: "mobile",
+        Insurance: "insurance",
+        Cashback: "cashback",
+        Pig: "pig",
+        Highlight: "highlight",
       }),
-      variant: figma.enum('Variant', {
-        Solid: 'solid',
-        Outline: 'outline',
+      size: figma.enum("Size", {
+        "SM-24": "sm",
+        "MD-28": "md",
       }),
-      flatBase: figma.boolean('Flat Base?'),
-      icon: figma.instance('Icon'),
+      flatBase: figma.boolean("Flat Base?"),
+      // No matching props could be found for these Figma properties:
+      // "icon": figma.boolean('Icon?'),
+      // "icon20": figma.instance('Icon-20'),
+      // "text": figma.string('Text')
     },
-    example: ({ text, ...props }) => <Badge {...props}>{text}</Badge>,
-  }
-);
+    example: (props) => (
+      <Badge
+        variant={props.variant}
+        colorScheme={props.colorScheme}
+        size={props.size}
+        flatBase={props.flatBase}
+      />
+    ),
+  },
+)

package/src/components/Banner/Banner.context.ts

@@ -0,0 +1,11 @@
+import { createContext, useContext } from 'react';
+
+const BannerContext = createContext<{ direction: 'horizontal' | 'vertical' }>({
+  direction: 'horizontal',
+});
+
+export const useBannerContext = () => {
+  return useContext(BannerContext);
+};
+
+export default BannerContext;

package/src/components/Banner/Banner.docs.mdx

@@ -63,26 +63,39 @@ const MyComponent = () => (
 
 ## Props
 
-| Property             | Type                                                                                               | Description                                                            | Default        |
-| -------------------- | -------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | -------------- |
-| icon                 | `ComponentType`                                                                                    | Icon component to display (mutually exclusive with image/illustration) | `-`            |
-| iconContainerVariant | `'subtle' \| 'emphasis'`                                                                           | Icon container visual style                                            | `'subtle'`     |
-| iconContainerSize    | `'sm' \| 'md' \| 'lg'`                                                                             | Icon container size                                                    | `'md'`         |
-| iconContainerColor   | `'pig' \| 'energy' \| 'broadband' \| 'mobile' \|` <br />`'insurance' \| 'cashback' \| 'highlight'` | Icon container color scheme                                            | `'pig'`        |
-| illustration         | `ThemedImageProps \| ImageProps`                                                                   | Themed illustration object (mutually exclusive with icon/image)        | `-`            |
-| image                | `ThemedImageProps \| ImageProps`                                                                   | Themed image object (mutually exclusive with icon/illustration)        | `-`            |
-| heading              | `string`                                                                                           | Heading text                                                           | `-` (required) |
-| description          | `string`                                                                                           | Description text                                                       | `-` (required) |
-| direction            | `'horizontal' \| 'vertical'`                                                                       | Layout direction for icon/image and content                            | `'horizontal'` |
-| link                 | `ReactNode`                                                                                        | Link element to display                                                | `-`            |
-| button               | `ReactNode`                                                                                        | Button element to display                                              | `-`            |
-| onPress              | `() => void`                                                                                       | Makes the entire banner pressable (shows chevron)                      | `-`            |
-| onClose              | `() => void`                                                                                       | Shows close button with handler                                        | `-`            |
-| variant              | `'subtle' \| 'emphasis'`                                                                           | Card visual style variant                                              | `'subtle'`     |
-| colorScheme          | `'pig' \| 'energy' \| 'broadband' \| 'mobile' \|` <br />`'insurance' \| 'cashback' \| 'highlight'` | Color scheme for buttons                                               | `'pig'`        |
+| Property             | Type                                                                                               | Description                                                             | Default        |
+| -------------------- | -------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | -------------- |
+| icon                 | `ComponentType`                                                                                    | Icon component to display (mutually exclusive with image/illustration)  | `-`            |
+| iconContainerVariant | `'subtle' \| 'emphasis'`                                                                           | Icon container visual style                                             | `'subtle'`     |
+| iconContainerSize    | `'sm' \| 'md' \| 'lg'`                                                                             | Icon container size                                                     | `'md'`         |
+| iconContainerColor   | `'pig' \| 'energy' \| 'broadband' \| 'mobile' \|` <br />`'insurance' \| 'cashback' \| 'highlight'` | Icon container color scheme                                             | `'pig'`        |
+| illustration         | `ReactNode`                                                                                        | The illustration element to render (mutually exclusive with icon/image) | `-`            |
+| image                | `ReactNode`                                                                                        | The image element to render (mutually exclusive with icon/illustration) | `-`            |
+| heading              | `string`                                                                                           | Heading text                                                            | `-` (required) |
+| description          | `string`                                                                                           | Description text                                                        | `-` (required) |
+| direction            | `'horizontal' \| 'vertical'`                                                                       | Layout direction for icon/image and content                             | `'horizontal'` |
+| link                 | `ReactNode`                                                                                        | Link element to display                                                 | `-`            |
+| button               | `ReactNode`                                                                                        | Button element to display                                               | `-`            |
+| onPress              | `() => void`                                                                                       | Makes the entire banner pressable (shows chevron)                       | `-`            |
+| onClose              | `() => void`                                                                                       | Shows close button with handler                                         | `-`            |
+| variant              | `'subtle' \| 'emphasis'`                                                                           | Card visual style variant                                               | `'subtle'`     |
+| colorScheme          | `'pig' \| 'energy' \| 'broadband' \| 'mobile' \|` <br />`'insurance' \| 'cashback' \| 'highlight'` | Color scheme for buttons                                                | `'pig'`        |
 
 The component also accepts all standard Card props except `noPadding`, `space`, `gap`, `rowGap`, `columnGap`, `flexDirection`, `flexWrap`, `alignItems`, and `justifyContent`.
 
+### `BannerImage` & `BannerIllustration` Props
+
+The `BannerImage` & `BannerIllustration` component can be used to display an image within the Banner. It accepts the following props:
+
+| Property  | Type                  | Description                                                              |
+| --------- | --------------------- | ------------------------------------------------------------------------ |
+| `source`  | `ImageSourcePropType` | The source of the image to display                                       |
+| `light`   | `ImageSourcePropType` | The source of the image to display in light mode (use instead of source) |
+| `dark`    | `ImageSourcePropType` | The source of the image to display in dark mode (use instead of source)  |
+| `...rest` | `ImageProps`          | Additional props to pass to the underlying Image component               |
+
+For more details about the ThemedImage component used internally, refer to the [`ThemedImage` documentation](/docs/utility-components-themed-image--docs).
+
 ## Layout Options
 
 ### Horizontal Layout (Default)
@@ -153,22 +166,28 @@ Display a themed image that automatically switches between light and dark modes:
 <Canvas of={Stories.WithImage} />
 
 ```jsx
-import { Banner } from '@utilitywarehouse/hearth-react-native';
+import { Banner, BannerImage } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (
   <>
     <Banner
-      image={{
-        source: { uri: 'https://example.com/image.jpg' },
-      }}
+      image={
+        <BannerImage
+          source={{
+            uri: 'https://example.com/image.jpg',
+          }}
+        />
+      }
       heading="Featured Content"
       description="Discover amazing content curated just for you."
     />
     <Banner
-      image={{
-        light: { uri: 'https://example.com/light-image.jpg' },
-        dark: { uri: 'https://example.com/dark-image.jpg' },
-      }}
+      image={
+        <BannerImage
+          light={{ uri: 'https://example.com/light-image.jpg' }}
+          dark={{ uri: 'https://example.com/dark-image.jpg' }}
+        />
+      }
       heading="Featured Content"
       description="Discover amazing content curated just for you."
     />
@@ -183,18 +202,15 @@ Display a themed illustration that adapts to layout changes:
 <Canvas of={Stories.WithIllustration} />
 
 ```jsx
-import { Banner } from '@utilitywarehouse/hearth-react-native';
+import { Banner, BannerIllustration } from '@utilitywarehouse/hearth-react-native';
 import SpotBillingDark from '@utilitywarehouse/hearth-svg-assets/lib/spot-billing-dark.svg';
 import SpotBillingLight from '@utilitywarehouse/hearth-svg-assets/lib/spot-billing-light.svg';
 
 const MyComponent = () => (
   <Banner
-    illustration={{
-      light: SpotBillingLight,
-      dark: SpotBillingDark,
-      width: 80,
-      height: 80,
-    }}
+    illustration={
+      <BannerIllustration light={SpotBillingLight} dark={SpotBillingDark} width={80} height={80} />
+    }
     heading="Featured Content"
     description="Discover amazing content curated just for you."
   />
@@ -358,7 +374,7 @@ Combine multiple features for rich interactive banners:
 <Canvas of={Stories.ComplexExample} />
 
 ```jsx
-import { Banner } from '@utilitywarehouse/hearth-react-native';
+import { Banner, BannerImage } from '@utilitywarehouse/hearth-react-native';
 import { InsuranceMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 
 const MyComponent = () => (
@@ -381,10 +397,12 @@ const MyComponent = () => (
 
     {/* Dismissible banner with link */}
     <Banner
-      image={{
-        light: { uri: 'https://example.com/light.jpg' },
-        dark: { uri: 'https://example.com/dark.jpg' },
-      }}
+      image={
+        <BannerImage
+          light={{ uri: 'https://example.com/light.jpg' }}
+          dark={{ uri: 'https://example.com/dark.jpg' }}
+        />
+      }
       heading="Exclusive Member Benefit"
       description="As a valued member, you now have access to premium features at no extra cost."
       variant="emphasis"

package/src/components/Banner/Banner.figma.tsx

@@ -0,0 +1,15 @@
+import figma from '@figma/code-connect';
+import Banner from './Banner';
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * None of your props could be automatically mapped to Figma properties.
+ * You should update the `props` object to include a mapping from your
+ * code props to Figma properties, and update the `example` function to
+ * return the code example you'd like to see in Figma
+ */
+
+figma.connect(Banner, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=8294%3A3905', {
+  props: {},
+  example: props => <Banner heading={null} description={null} />,
+});