@utilitywarehouse/hearth-react-native 0.17.0 → 0.19.0

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';
@@ -87,7 +94,7 @@ export const Variants: Story = {
     // @ts-expect-error - This is a playground
     const icon = _icon === 'none' ? undefined : Icons[_icon];
     return (
-      <ButtonGroup flexDirection="column" space="md">
+      <ButtonGroup flexDirection="column" spacing="md">
         <>
           {args.colorScheme === 'highlight' && (
             <VariantTitle title="Emphasis" invert={args.inverted}>
@@ -130,9 +137,9 @@ export const KitchenSink: Story = {
     const schemes: Array<ColorScheme> = ['highlight', 'destructive', 'affirmative', 'functional'];
     const variants: Array<Variant> = ['emphasis', 'solid', 'outline', 'ghost'];
     return (
-      <Flex direction="row" space="lg" wrap="wrap">
+      <Flex direction="row" spacing="lg" wrap="wrap">
         {schemes.map(scheme => (
-          <Flex direction="column" space="lg" key={scheme}>
+          <Flex direction="column" spacing="lg" key={scheme}>
             {variants
               .filter(variant => {
                 if (inverted) {
@@ -159,7 +166,7 @@ export const KitchenSink: Story = {
                       {scheme} - {variant}
                     </DetailText>
                   </Box>
-                  <Flex direction="column" space="lg">
+                  <Flex direction="column" spacing="lg">
                     <VariantTitle title="Default" invert={inverted}>
                       {/* @ts-expect-error - story loop types don't match */}
                       <IconButton
@@ -213,3 +220,52 @@ export const KitchenSink: Story = {
     );
   },
 };
+
+export const ServiceIconButtons: Story = {
+  render: () => {
+    return (
+      <ButtonGroup spacing="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/IconContainer/IconContainer.docs.mdx

@@ -36,7 +36,7 @@ Wrap an icon with the `IconContainer` to apply sizing + background styles withou
 
 <UsageWrap>
   <Center>
-    <Flex direction="row" space="lg" alignItems="center">
+    <Flex direction="row" spacing="lg" alignItems="center">
       <IconContainer icon={ElectricityMediumIcon} size="md" variant="emphasis" color="energy" />
       <IconContainer icon={BroadbandMediumIcon} size="md" variant="emphasis" color="broadband" />
       <IconContainer icon={MobileMediumIcon} size="md" variant="emphasis" color="mobile" />

package/src/components/IconContainer/IconContainer.stories.tsx

@@ -92,11 +92,11 @@ export const KitchenSink: Story = {
       'pig' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'highlight'
     > = ['pig', 'energy', 'broadband', 'mobile', 'insurance', 'cashback', 'highlight'];
     return (
-      <Flex direction="column" space="lg">
+      <Flex direction="column" spacing="lg">
         {sizes.map(size => (
           <Box key={size} gap="300">
             <VariantTitle title={`Size: ${size.toUpperCase()} / Subtle`}> </VariantTitle>
-            <Flex direction="row" wrap="wrap" space="md">
+            <Flex direction="row" wrap="wrap" spacing="md">
               {colors.map(color => (
                 <IconContainer
                   key={`${size}-subtle-${color}`}
@@ -108,7 +108,7 @@ export const KitchenSink: Story = {
               ))}
             </Flex>
             <VariantTitle title={`Size: ${size.toUpperCase()} / Emphasis`}> </VariantTitle>
-            <Flex direction="row" wrap="wrap" space="md">
+            <Flex direction="row" wrap="wrap" spacing="md">
               {colors.map(
                 color =>
                   color !== 'highlight' && (

package/src/components/IndicatorIconButton/IndicatorIconButton.stories.tsx

@@ -2,9 +2,9 @@ import { Meta, StoryObj } from '@storybook/react-vite';
 import * as Icons from '@utilitywarehouse/hearth-react-native-icons';
 import { ComponentType } from 'react';
 import { VariantTitle } from '../../../docs/components';
+import { useTheme } from '../../hooks';
 import { Box } from '../Box';
 import { Flex } from '../Flex';
-import { useTheme } from '../../hooks';
 import IndicatorIconButton from './IndicatorIconButton';
 
 const meta = {
@@ -57,8 +57,8 @@ export const Variants: Story = {
   render: args => {
     const icon = typeof args.icon === 'string' ? Icons[args.icon as keyof typeof Icons] : args.icon;
     return (
-      <Flex direction="column" space="xl">
-        <Flex direction="row" space="lg">
+      <Flex direction="column" spacing="xl">
+        <Flex direction="row" spacing="lg">
           <Box>
             <VariantTitle title="Without Indicator" invert={args.inverted}>
               <IndicatorIconButton {...args} icon={icon} indicator={false} />
@@ -70,7 +70,7 @@ export const Variants: Story = {
             </VariantTitle>
           </Box>
         </Flex>
-        <Flex direction="row" space="lg">
+        <Flex direction="row" spacing="lg">
           <Box style={{ backgroundColor: 'purple', padding: 10, borderRadius: 8 }}>
             <VariantTitle title="Inverted" invert={!args.inverted}>
               <IndicatorIconButton {...args} icon={icon} inverted={true} />
@@ -88,13 +88,21 @@ export const Colourful: Story = {
     const theme = useTheme();
 
     return (
-      <Flex direction="column" space="xl">
-        <Flex direction="row" space="lg">
+      <Flex direction="column" spacing="xl">
+        <Flex direction="row" spacing="lg">
           <Box>
-            <IndicatorIconButton {...args} icon={icon} iconStyle={{ color: theme.color.energyBlue[500] }} />
+            <IndicatorIconButton
+              {...args}
+              icon={icon}
+              iconStyle={{ color: theme.color.energyBlue[500] }}
+            />
           </Box>
           <Box>
-            <IndicatorIconButton {...args} icon={icon} iconStyle={{ color: theme.color.cashbackLilac[500] }} />
+            <IndicatorIconButton
+              {...args}
+              icon={icon}
+              iconStyle={{ color: theme.color.cashbackLilac[500] }}
+            />
           </Box>
         </Flex>
       </Flex>
@@ -105,7 +113,7 @@ export const Colourful: Story = {
 export const WithAccessibilityLabel: Story = {
   render: args => {
     return (
-      <Flex direction="column" space="xl">
+      <Flex direction="column" spacing="xl">
         <Box>
           <VariantTitle title="Notification label" invert={args.inverted}>
             <IndicatorIconButton

package/src/components/InlineLink/InlineLink.stories.tsx

@@ -1,5 +1,5 @@
-import { InlineLink } from '.';
 import { Meta, StoryObj } from '@storybook/react-vite';
+import { InlineLink } from '.';
 import { BodyText } from '../BodyText';
 import { Flex } from '../Flex';
 import { List } from '../List';
@@ -55,7 +55,7 @@ export const Playground: Story = {};
 export const Variants: Story = {
   render: ({ children }) => {
     return (
-      <Flex direction="column" space="sm">
+      <Flex direction="column" spacing="sm">
         <List></List>
         <BodyText>
           This is the body text style, and it contains an{' '}

package/src/components/Input/Input.stories.tsx

@@ -107,7 +107,7 @@ export const Variants: Story = {
       setClearableSearchValue('');
     };
     return (
-      <Flex direction="column" space="lg">
+      <Flex direction="column" spacing="lg">
         <VariantTitle title="Default">
           <Input />
         </VariantTitle>
@@ -202,7 +202,7 @@ export const RefTest: Story = {
     };
 
     return (
-      <Flex direction="column" space="lg">
+      <Flex direction="column" spacing="lg">
         <VariantTitle title="Ref Test">
           <Input
             ref={inputRef}
@@ -211,8 +211,8 @@ export const RefTest: Story = {
           />
         </VariantTitle>
         <VariantTitle title="Status">
-          <Flex direction="column" space="sm">
-            <Flex direction="row" space="sm">
+          <Flex direction="column" spacing="sm">
+            <Flex direction="row" spacing="sm">
               <Button onPress={handleFocus}>Focus Input</Button>
               <Button onPress={handleBlur}>Blur Input</Button>
               <Button onPress={handleClear}>Clear Input</Button>

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

@@ -408,7 +408,7 @@ export const KitchenSink: Story = {
       { text: 'List Item 3', helperText: 'Supporting Text 3' },
     ];
     return (
-      <Flex space="sm" direction="column" style={{ width: '100%' }}>
+      <Flex spacing="sm" direction="column" style={{ width: '100%' }}>
         <VariantTitle title="List with title and supporting text">
           <List heading="List Heading" helperText="Supporting Text">
             {list.map((item, index) => (

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>
   );

package/src/components/Modal/Modal.tsx

@@ -328,21 +328,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/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}
     />
   );
 };