@utilitywarehouse/hearth-react-native 0.18.0 → 0.19.1

package/src/components/Menu/Menu.tsx

@@ -1,12 +1,12 @@
 import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef } from 'react';
 import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
-import { BottomSheetModal, BottomSheetProps, BottomSheetScrollView } from '../BottomSheet';
+import { BottomSheetModal, BottomSheetScrollView } from '../BottomSheet';
 import { MenuContext } from './Menu.context';
 import type MenuProps from './Menu.props';
 import type { MenuMethods } from './Menu.props';
 
-const Menu = forwardRef<MenuMethods, MenuProps>(({ heading, children, bottomSheetProps }, ref) => {
+const Menu = forwardRef<MenuMethods, MenuProps>(({ heading, children, ...props }, ref) => {
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
 
   useImperativeHandle(
@@ -25,10 +25,7 @@ const Menu = forwardRef<MenuMethods, MenuProps>(({ heading, children, bottomShee
   const contextValue = useMemo(() => ({ close: handleClose }), [handleClose]);
 
   return (
-    <BottomSheetModal
-      ref={bottomSheetModalRef}
-      {...(bottomSheetProps as Partial<BottomSheetProps>)}
-    >
+    <BottomSheetModal ref={bottomSheetModalRef} {...props}>
       <BottomSheetScrollView contentContainerStyle={styles.container}>
         <MenuContext.Provider value={contextValue}>
           {heading && (

package/src/components/Menu/MenuItem.figma.tsx

@@ -1,31 +1,39 @@
 import figma from '@figma/code-connect';
-import MenuItem from './MenuItem';
-
-/**
- * -- 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
- */
+import { MenuItem } from '../';
 
 figma.connect(
   MenuItem,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=6416%3A11142',
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=3253-8193',
   {
     props: {
-      // These props were automatically mapped based on your linked code:
-      disabled: figma.enum('State', {
-        Active: true,
+      text: figma.string('Text'),
+      icon: figma.boolean('Icon left?', {
+        true: figma.instance('Icon left-20'),
+        false: figma.boolean('Icon right?', {
+          true: figma.instance('Icon right-20'),
+        }),
+      }),
+      iconPosition: figma.boolean('Icon left?', {
+        true: 'left',
+        false: figma.boolean('Icon right?', {
+          true: 'right',
+        }),
       }),
-      focusable: figma.enum('State', {
-        Focus: true,
+      colorScheme: figma.enum('Color Scheme', {
+        Destructive: 'destructive',
+      }),
+      disabled: figma.enum('State', {
+        Disabled: true,
       }),
-      // No matching props could be found for these Figma properties:
-      // "number": figma.string('Number'),
-      // "selected": figma.boolean('Selected?')
     },
     example: props => (
-      <MenuItem text={null} disabled={props.disabled} focusable={props.focusable} />
+      <MenuItem
+        text={props.text}
+        disabled={props.disabled}
+        colorScheme={props.colorScheme}
+        icon={props.icon}
+        iconPosition={props.iconPosition}
+      />
     ),
   }
 );

package/src/components/Modal/Modal.docs.mdx

@@ -87,27 +87,28 @@ const MyComponent = () => {
 
 The Modal component extends the `BottomSheetModal` component and accepts all of its props, plus the following additional props:
 
-| Property                      | Type                                                               | Description                                                                                                   | Default |
-| ----------------------------- | ------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- | ------- |
-| `heading`                     | `string`                                                           | The heading text displayed at the top of the modal                                                            | -       |
-| `description`                 | `string`                                                           | The description text displayed below the heading                                                              | -       |
-| `showCloseButton`             | `boolean`                                                          | Whether to show the close button in the top-right corner                                                      | `true`  |
-| `primaryButtonText`           | `string`                                                           | Text for the primary action button                                                                            | -       |
-| `secondaryButtonText`         | `string`                                                           | Text for the secondary action button                                                                          | -       |
-| `onPressPrimaryButton`        | `() => void`                                                       | Callback function called when the primary button is pressed                                                   | -       |
-| `onPressSecondaryButton`      | `() => void`                                                       | Callback function called when the secondary button is pressed                                                 | -       |
-| `onPressCloseButton`          | `() => void`                                                       | Callback function called when the close button is pressed                                                     | -       |
-| `closeOnPrimaryButtonPress`   | `boolean`                                                          | Whether to automatically close the modal when the primary button is pressed                                   | `true`  |
-| `closeOnSecondaryButtonPress` | `boolean`                                                          | Whether to automatically close the modal when the secondary button is pressed                                 | `true`  |
-| `onChange`                    | `(index: number, position: number, `<br />` type: number) => void` | Callback function called when the modal's position changes \*                                                 | -       |
-| `loading`                     | `boolean`                                                          | Whether to show a loading state with spinner                                                                  | `false` |
-| `image`                       | `ImageProps`                                                       | Image to display in the modal (shows as centered content with text below)                                     | -       |
-| `children`                    | `ReactNode`                                                        | Custom content to display in the modal body                                                                   | -       |
-| `primaryButtonProps`          | `Omit<ButtonWithoutChildrenProps, 'children'>`                     | Additional props to pass to the primary button (colorScheme defaults to 'highlight', variant to 'solid')      | -       |
-| `secondaryButtonProps`        | `Omit<ButtonWithoutChildrenProps, 'children'>`                     | Additional props to pass to the secondary button (colorScheme defaults to 'functional', variant to 'outline') | -       |
-| `closeButtonProps`            | `Omit<UnstyledIconButtonProps, 'children'>`                        | Additional props to pass to the close button                                                                  | -       |
-| `fullscreen`                  | `boolean`                                                          | Whether the modal should take up the full screen height                                                       | `false` |
-| `inNavModal`                  | `boolean`                                                          | Renders the modal correctly when used inside a navigation modal                                               | `false` |
+| Property                      | Type                                                               | Description                                                                                                   | Default        |
+| ----------------------------- | ------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- | -------------- |
+| `heading`                     | `string`                                                           | The heading text displayed at the top of the modal                                                            | -              |
+| `description`                 | `string`                                                           | The description text displayed below the heading                                                              | -              |
+| `showCloseButton`             | `boolean`                                                          | Whether to show the close button in the top-right corner                                                      | `true`         |
+| `primaryButtonText`           | `string`                                                           | Text for the primary action button                                                                            | -              |
+| `secondaryButtonText`         | `string`                                                           | Text for the secondary action button                                                                          | -              |
+| `onPressPrimaryButton`        | `() => void`                                                       | Callback function called when the primary button is pressed                                                   | -              |
+| `onPressSecondaryButton`      | `() => void`                                                       | Callback function called when the secondary button is pressed                                                 | -              |
+| `onPressCloseButton`          | `() => void`                                                       | Callback function called when the close button is pressed                                                     | -              |
+| `closeOnPrimaryButtonPress`   | `boolean`                                                          | Whether to automatically close the modal when the primary button is pressed                                   | `true`         |
+| `closeOnSecondaryButtonPress` | `boolean`                                                          | Whether to automatically close the modal when the secondary button is pressed                                 | `true`         |
+| `onChange`                    | `(index: number, position: number, `<br />` type: number) => void` | Callback function called when the modal's position changes \*                                                 | -              |
+| `loading`                     | `boolean`                                                          | Whether to show a loading state with spinner                                                                  | `false`        |
+| `loadingHeading`              | `string`                                                           | The heading text to be displayed when loading is true. If not provided, the regular heading will be shown.    | `'Loading...'` |
+| `image`                       | `ImageProps`                                                       | Image to display in the modal (shows as centered content with text below)                                     | -              |
+| `children`                    | `ReactNode`                                                        | Custom content to display in the modal body                                                                   | -              |
+| `primaryButtonProps`          | `Omit<ButtonWithoutChildrenProps, 'children'>`                     | Additional props to pass to the primary button (colorScheme defaults to 'highlight', variant to 'solid')      | -              |
+| `secondaryButtonProps`        | `Omit<ButtonWithoutChildrenProps, 'children'>`                     | Additional props to pass to the secondary button (colorScheme defaults to 'functional', variant to 'outline') | -              |
+| `closeButtonProps`            | `Omit<UnstyledIconButtonProps, 'children'>`                        | Additional props to pass to the close button                                                                  | -              |
+| `fullscreen`                  | `boolean`                                                          | Whether the modal should take up the full screen height                                                       | `false`        |
+| `inNavModal`                  | `boolean`                                                          | Renders the modal correctly when used inside a navigation modal                                               | `false`        |
 
 \* use this to detect if the modal has been opened or closed, index 0 indicates open state and -1 indicates closed state
 

package/src/components/Modal/Modal.figma.tsx

@@ -1,56 +1,67 @@
-import React from "react"
-import Modal from "./Modal"
-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
- */
+import figma from '@figma/code-connect';
+import { useCallback, useRef } from 'react';
+import { BottomSheetModal, Button, Modal } from '../';
 
 figma.connect(
   Modal,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=6300%3A2825",
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=6300-2825',
   {
     props: {
-      // These props were automatically mapped based on your linked code:
-      loading: figma.enum("State", {
+      loading: figma.enum('State', {
         Loading: true,
       }),
-      image: figma.enum("Image?", {
-        False: false,
-        True: true,
+      heading: figma.string('Heading'),
+      description: figma.string('Description'),
+      fullscreen: figma.boolean('Full screen?'),
+      showHandle: figma.boolean('Handle?'),
+      customContent: figma.boolean('Custom content?', {
+        true: figma.instance('Custom content'),
+      }),
+      buttons: figma.boolean('Buttons?', {
+        true: figma.nestedProps('Button', {
+          primaryButtonText: figma.string('Text'),
+        }),
       }),
-      heading: figma.string("Heading"),
-      description: figma.string("Description"),
-      fullscreen: figma.boolean("Full screen?"),
-      showHandle: figma.boolean("Handle?"),
-      // No matching props could be found for these Figma properties:
-      // "heading": figma.string('Heading'),
-      // "description": figma.string('Description'),
-      // "customContent": figma.boolean('Custom content?'),
-      // "buttons": figma.boolean('Buttons?'),
-      // "close": figma.boolean('Close?'),
-      // "customContent": figma.instance('Custom content'),
-      // "homeIndicator": figma.boolean('Home indicator?'),
-      // "handle": figma.boolean('Handle?'),
-      // "loadingHeading": figma.string('Loading heading'),
-      // "deviceType": figma.enum('Device type', {
-      //   "Desktop": "desktop",
-      //   "Tablet": "tablet",
-      //   "Mobile": "mobile"
-      // })
+      close: figma.boolean('Close?'),
+      image: figma.boolean('Image?', {
+        true: figma.instance('Modal illustration'),
+      }),
+      loadingHeading: figma.string('Loading heading'),
+    },
+    example: props => {
+      const modalRef = useRef<BottomSheetModal>(null);
+
+      const handleOpenModal = useCallback(() => {
+        modalRef.current?.present();
+      }, []);
+
+      const handleCloseModal = useCallback(() => {
+        modalRef.current?.dismiss();
+      }, []);
+
+      return (
+        <>
+          <Button onPress={handleOpenModal}>Open Modal</Button>
+
+          <Modal
+            ref={modalRef}
+            heading={props.heading}
+            description={props.description}
+            loading={props.loading}
+            loadingHeading={props.loadingHeading}
+            showCloseButton={props.close}
+            fullscreen={props.fullscreen}
+            image={props.image}
+            showHandle={props.showHandle}
+            primaryButtonText={props.buttons.primaryButtonText}
+            secondaryButtonText={props.buttons.primaryButtonText}
+            onPressPrimaryButton={handleCloseModal}
+            onPressSecondaryButton={handleCloseModal}
+          >
+            {props.customContent}
+          </Modal>
+        </>
+      );
     },
-    example: (props) => (
-      <Modal
-        loading={props.loading}
-        image={props.image}
-        heading={props.heading}
-        description={props.description}
-        fullscreen={props.fullscreen}
-        showHandle={props.showHandle}
-      />
-    ),
-  },
-)
+  }
+);

package/src/components/Modal/Modal.props.ts

@@ -9,6 +9,7 @@ interface ModalProps extends Omit<BottomSheetProps, 'children'> {
   image?: ReactNode;
   showCloseButton?: boolean;
   heading?: string;
+  loadingHeading?: string;
   description?: string;
   inNavModal?: boolean;
   fullscreen?: boolean;

package/src/components/Modal/Modal.stories.tsx

@@ -41,6 +41,10 @@ const meta = {
       control: 'boolean',
       description: 'Whether the modal is in a loading state.',
     },
+    loadingHeading: {
+      control: 'text',
+      description: 'The heading text to be displayed when loading is true.',
+    },
     fullscreen: {
       control: 'boolean',
       description: 'Whether the modal should take up the full screen height.',

package/src/components/Modal/Modal.tsx

@@ -42,6 +42,7 @@ const Modal = ({
   closeOnPrimaryButtonPress = true,
   closeOnSecondaryButtonPress = true,
   loading,
+  loadingHeading = 'Loading...',
   fullscreen = false,
   image,
   primaryButtonProps,
@@ -206,7 +207,7 @@ const Modal = ({
         >
           <Spinner size="lg" />
           <Heading size="lg" textAlign="center">
-            Loading...
+            {loadingHeading}
           </Heading>
         </View>
       ) : (
@@ -328,21 +329,35 @@ const styles = StyleSheet.create((theme, rt) => ({
     variants: {
       bothButtons: {
         true: {
-          paddingBottom: 166 + rt.insets.bottom - theme.components.modal.padding,
+          paddingBottom:
+            166 +
+            rt.insets.bottom -
+            theme.components.modal.padding +
+            theme.components.bottomSheet.padding,
         },
         false: {
-          paddingBottom: 102 + rt.insets.bottom - theme.components.modal.padding,
+          paddingBottom:
+            102 +
+            rt.insets.bottom -
+            theme.components.modal.padding +
+            theme.components.bottomSheet.padding,
         },
       },
       noButtons: {
         true: {
-          paddingBottom: rt.insets.bottom + theme.components.modal.padding,
+          paddingBottom:
+            rt.insets.bottom +
+            theme.components.modal.padding +
+            theme.components.bottomSheet.padding,
         },
       },
       stickyFooter: {
         true: {},
         false: {
-          paddingBottom: rt.insets.bottom + theme.components.modal.padding,
+          paddingBottom:
+            rt.insets.bottom +
+            theme.components.modal.padding +
+            theme.components.bottomSheet.padding,
         },
       },
     },

package/src/components/Modal/Modal.web.tsx

@@ -37,6 +37,7 @@ const Modal = ({
   closeOnPrimaryButtonPress = true,
   closeOnSecondaryButtonPress = true,
   loading,
+  loadingHeading = 'Loading...',
   image,
   primaryButtonProps,
   secondaryButtonProps,
@@ -166,7 +167,7 @@ const Modal = ({
         >
           <Spinner size="lg" />
           <Heading size="lg" textAlign="center">
-            Loading...
+            {loadingHeading}
           </Heading>
         </View>
       ) : (

package/src/components/PillGroup/PillGroup.stories.tsx

@@ -54,30 +54,30 @@ export const PillStates: Story = {
     const selectedValue = '2';
 
     return (
-      <Flex space="xl" direction="column" align="center">
+      <Flex spacing="xl" direction="column" align="center">
         <VariantTitle title="Unselected">
-          <Flex direction="row" space="sm">
+          <Flex direction="row" spacing="sm">
             <PillGroup value={selectedValue} onChange={() => {}}>
               <Pill value="1" label="Label" />
             </PillGroup>
           </Flex>
         </VariantTitle>
         <VariantTitle title="Selected">
-          <Flex direction="row" space="sm">
+          <Flex direction="row" spacing="sm">
             <PillGroup value={selectedValue} onChange={() => {}}>
               <Pill value="2" label="Label" />
             </PillGroup>
           </Flex>
         </VariantTitle>
         <VariantTitle title="With Icon - Unselected">
-          <Flex direction="row" space="sm">
+          <Flex direction="row" spacing="sm">
             <PillGroup value={selectedValue} onChange={() => {}}>
               <Pill value="1" label="New" icon={HeartMediumIcon} />
             </PillGroup>
           </Flex>
         </VariantTitle>
         <VariantTitle title="With Icon - Selected">
-          <Flex direction="row" space="sm">
+          <Flex direction="row" spacing="sm">
             <PillGroup value={selectedValue} onChange={() => {}}>
               <Pill value="2" label="New" icon={HeartMediumIcon} />
             </PillGroup>
@@ -101,7 +101,7 @@ export const WrapBehavior: Story = {
     const [value2, setValue2] = useState<string>('7');
 
     return (
-      <Flex space="xl" direction="column" align="center">
+      <Flex spacing="xl" direction="column" align="center">
         <VariantTitle title="Wrap: False">
           <PillGroup wrap={false} value={value1} onChange={setValue1}>
             <Pill value="1" label="New" />
@@ -139,7 +139,7 @@ export const Multiple: Story = {
     const [selectedCategories, setSelectedCategories] = useState<string[]>(['new', 'read']);
 
     return (
-      <Flex space="lg" direction="column" align="center" style={{ maxWidth: 400 }}>
+      <Flex spacing="lg" direction="column" align="center" style={{ maxWidth: 400 }}>
         <PillGroup wrap={true} multiple value={selectedCategories} onChange={setSelectedCategories}>
           <Pill value="unread" label="Unread" />
           <Pill value="new" label="New" icon={HeartMediumIcon} />

package/src/components/ProgressStepper/ProgressStepper.stories.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
 import { Meta, StoryObj } from '@storybook/react-vite';
-import { ProgressStepper, ProgressStep } from '.';
+import { ProgressStep, ProgressStepper } from '.';
 import { VariantTitle } from '../../../docs/components';
 import { BodyText } from '../BodyText';
 import { Flex } from '../Flex';
@@ -20,20 +19,20 @@ type Story = StoryObj<typeof meta>;
 export const Playground: Story = {
   args: {
     children: (
-      <Flex space="xl" direction="column" align="center" style={{ flex: 1, minWidth: 200 }}>
+      <Flex spacing="xl" direction="column" align="center" style={{ flex: 1, minWidth: 200 }}>
         <ProgressStepper>
           <ProgressStep id={'1'} status="complete" />
           <ProgressStep id={'2'} status="complete" />
           <ProgressStep id={'3'} status="active" />
           <ProgressStep id={'4'} status="incomplete" />
         </ProgressStepper>
-        <Flex direction="row" space="lg" style={{ width: '100%' }}>
+        <Flex direction="row" spacing="lg" style={{ width: '100%' }}>
           <ProgressStep id={'1'} status="complete" />
         </Flex>
-        <Flex direction="row" space="lg" style={{ width: '100%' }}>
+        <Flex direction="row" spacing="lg" style={{ width: '100%' }}>
           <ProgressStep id={'3'} status="active" />
         </Flex>
-        <Flex direction="row" space="lg" style={{ width: '100%' }}>
+        <Flex direction="row" spacing="lg" style={{ width: '100%' }}>
           <ProgressStep id={'5'} status="incomplete" />
         </Flex>
       </Flex>
@@ -50,7 +49,7 @@ export const StepStatuses: Story = {
   },
   render: props => {
     return (
-      <Flex space="xl" direction="column" align="center">
+      <Flex spacing="xl" direction="column" align="center">
         <VariantTitle title="All Uncompleted Steps">
           <ProgressStepper {...props}>
             <ProgressStep id={'1'} status="incomplete" />
@@ -91,7 +90,7 @@ export const BasicExample: Story = {
   },
   render: props => {
     return (
-      <Flex space="lg" direction="column" align="center">
+      <Flex spacing="lg" direction="column" align="center">
         <Heading size="md">Progress Stepper</Heading>
         <BodyText>Shows progress through multi-step processes</BodyText>
         <ProgressStepper {...props}>

package/src/components/Radio/Radio.stories.tsx

@@ -147,7 +147,7 @@ export const Variants: Story = {
   render: ({ value: _, children: __, label: ___, disabled: _____, onChange: ______, ...args }) => {
     const [value, setValue] = useState('Option 1');
     return (
-      <Flex space="lg">
+      <Flex spacing="lg">
         <VariantTitle title="Default">
           <RadioGroup
             aria-label="Radio Group"

package/src/components/Radio/RadioGroup.stories.tsx

@@ -96,7 +96,7 @@ export const WithGrid: Story = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render: ({ value: _, ...args }) => (
     <RadioGroup {...args}>
-      <Grid columns={2} space="md">
+      <Grid columns={2} spacing="md">
         <Radio aria-label="Label 1" label="Option 1" value="Option 1" nativeID="Radio-1" />
         <Radio
           aria-label="Label 2 (with added option)"

package/src/components/Radio/RadioGroupTextContent.tsx

@@ -1,9 +1,9 @@
-import FlexProps from '../Flex/Flex.props';
 import { Flex } from '../Flex';
+import FlexProps from '../Flex/Flex.props';
 
 const RadioGroupTextContent = ({ children, ...props }: FlexProps) => {
   return (
-    <Flex direction="column" space="none" {...props}>
+    <Flex direction="column" spacing="none" {...props}>
       {children}
     </Flex>
   );

package/src/components/Radio/RadioTextContent.tsx

@@ -4,7 +4,7 @@ import FlexProps from '../Flex/Flex.props';
 
 const RadioTextContent = ({ children, style, ...props }: FlexProps) => {
   return (
-    <Flex direction="column" space="none" style={[styles.content, style]} {...props}>
+    <Flex direction="column" spacing="none" style={[styles.content, style]} {...props}>
       {children}
     </Flex>
   );

package/src/components/SectionHeader/SectionHeader.stories.tsx

@@ -39,7 +39,7 @@ export const KitchenSink: Story = {
   },
   render: () => {
     return (
-      <Flex space="xl" direction="column" style={{ width: '100%' }}>
+      <Flex spacing="xl" direction="column" style={{ width: '100%' }}>
         <VariantTitle title="Default SectionHeader with helper text and link">
           <SectionHeader
             heading="Heading"

package/src/components/Switch/Switch.docs.mdx

@@ -1,13 +1,13 @@
-import { Meta, Controls, Story, Canvas } from '@storybook/addon-docs/blocks';
-import * as Stories from './Switch.stories';
-import { Center, Switch, Flex, Label, FormField, FormFieldLabel, FormFieldLabelText } from '../../';
+import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
+import { Center, Flex, FormField, FormFieldLabel, FormFieldLabelText, Label, Switch } from '../../';
 import {
-  ViewFigmaButton,
   BackToTopButton,
-  UsageWrap,
-  SwitchList,
   SwitchExample,
+  SwitchList,
+  UsageWrap,
+  ViewFigmaButton,
 } from '../../../docs/components';
+import * as Stories from './Switch.stories';
 
 <Meta title="Components / Switch" />
 
@@ -76,7 +76,7 @@ the [`FormField` docs](/?path=/docs/native-ui-components-form-field--docs) for m
 
 <UsageWrap>
   <FormField>
-    <Flex space="sm" direction="row" align="center" justify="center">
+    <Flex spacing="sm" direction="row" align="center" justify="center">
       <SwitchExample />
       <FormFieldLabel>
         <FormFieldLabelText>Enable notifications</FormFieldLabelText>
@@ -95,7 +95,7 @@ const MyComponent = () => {
 
   return (
     <FormField>
-      <Flex space="sm" direction="row" align="center">
+      <Flex spacing="sm" direction="row" align="center">
         <Switch value={notifications} onValueChange={handleChange} />
         <FormFieldLabel>
           <FormFieldLabelText>Enable notifications</FormFieldLabelText>

package/src/components/Switch/Switch.stories.tsx

@@ -1,6 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
 import React, { useEffect } from 'react';
 import { Switch } from '.';
-import { Meta, StoryObj } from '@storybook/react-vite';
 import { VariantTitle } from '../../../docs/components';
 import { Flex } from '../Flex';
 
@@ -50,7 +50,7 @@ export const Playground: Story = {
 
 export const Variants: Story = {
   render: () => (
-    <Flex direction="column" space="sm">
+    <Flex direction="column" spacing="sm">
       <VariantTitle title="Off - medium">
         <Switch value={false} />
       </VariantTitle>

package/src/components/Tabs/Tabs.stories.tsx

@@ -245,7 +245,7 @@ export const Controlled: Story = {
       setValue(tabs[nextIndex]);
     };
     return (
-      <Flex align={Platform.OS === 'web' ? 'flex-start' : 'stretch'} space="lg">
+      <Flex align={Platform.OS === 'web' ? 'flex-start' : 'stretch'} spacing="lg">
         <Tabs value={value}>
           <TabsList>
             <Tab value="account">Account</Tab>

package/src/components/Textarea/Textarea.docs.mdx

@@ -115,8 +115,8 @@ import { Textarea } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => {
   const [value, setValue] = useState('');
-  const handleChange = e => {
-    setValue(e.target.value);
+  const handleChange = text => {
+    setValue(text);
   };
   return (
     <Textarea
@@ -124,7 +124,7 @@ const MyComponent = () => {
       helperText="Provide a detailed description"
       placeholder="Enter your text here..."
       value={value}
-      onTextChange={handleChange}
+      onChangeText={handleChange}
     />
   );
 };