@utilitywarehouse/hearth-react-native 0.18.0 → 0.19.0

package/src/components/Flex/Flex.tsx

@@ -9,7 +9,8 @@ const Flex = ({
   align = 'flex-start',
   justify = 'flex-start',
   wrap = 'nowrap',
-  space = 'md',
+  spacing = 'md',
+  space,
   ...rest
 }: FlexProps) => {
   const propStyle: ViewStyle = {
@@ -19,7 +20,7 @@ const Flex = ({
     flexWrap: wrap,
   };
 
-  styles.useVariants({ space });
+  styles.useVariants({ spacing: space ?? spacing });
 
   return (
     <View style={[propStyle, styles.flex, style]} {...rest}>
@@ -34,7 +35,7 @@ const styles = StyleSheet.create(theme => ({
   flex: {
     display: 'flex',
     variants: {
-      space: theme.globalStyle.variants.space,
+      spacing: theme.globalStyle.variants.spacing,
     },
   },
 }));

package/src/components/FormField/FormField.docs.mdx

@@ -313,7 +313,7 @@ const MyComponent = () => {
     <FormField validationStatus="invalid">
       <Checkbox alignItems="flex-start">
         <CheckboxIndicator />
-        <Flex direction="column" space="xs">
+        <Flex direction="column" spacing="xs">
           <CheckboxLabel nested={false}>I accept the terms and conditions</CheckboxLabel>
           <FormFieldHelper>
             <FormFieldHelperText>Read and accept the terms and conditions</FormFieldHelperText>

package/src/components/FormField/FormField.stories.tsx

@@ -87,7 +87,7 @@ export const Playground: Story = {
 export const Variants: Story = {
   render: () => {
     return (
-      <Flex direction="column" space="lg">
+      <Flex direction="column" spacing="lg">
         <VariantTitle title="Default">
           <FormField label="Label">
             <Input />

package/src/components/Grid/Grid.docs.mdx

@@ -25,7 +25,7 @@ The Grid component helps you create responsive grid layouts with configurable co
 
 <UsageWrap>
   <Center>
-    <Grid columns={2} space="md" width={300}>
+    <Grid columns={2} spacing="md" width={300}>
       <Box backgroundColor="green400" height={100} padding="200">
         <BodyText color="white">Item 1</BodyText>
       </Box>
@@ -46,7 +46,7 @@ The Grid component helps you create responsive grid layouts with configurable co
 import { Grid, Box, BodyText } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (
-  <Grid columns={2} space="md" width={300}>
+  <Grid columns={2} spacing="md" width={300}>
     <Box backgroundColor="green400" height={100} padding="200">
       <BodyText color="white">Item 1</BodyText>
     </Box>
@@ -76,7 +76,7 @@ The Grid component supports responsive column layouts based on screen size break
         md: 3,
         lg: 4,
       }}
-      space="md"
+      spacing="md"
       width="100%"
     >
       <Box backgroundColor="green400" height={100} padding="200">
@@ -106,7 +106,7 @@ const MyComponent = () => (
       md: 3,
       lg: 4,
     }}
-    space="md"
+    spacing="md"
     width="100%"
   >
     <Box backgroundColor="green400" height={100} padding="200">
@@ -176,7 +176,7 @@ The Grid component extends all the props from the [View component](https://react
 | Name             | Type                                                               | Default | Description                                                   |
 | ---------------- | ------------------------------------------------------------------ | ------- | ------------------------------------------------------------- |
 | `columns`        | `number` or `GridColumns`                                          | 2       | Number of columns or responsive object with breakpoint values |
-| `space`          | `'none' \| '2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'` | -       | Spacing between grid items (both rows and columns)            |
+| `spacing`        | `'none' \| '2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'` | -       | Spacing between grid items (both rows and columns)            |
 | `columnGap`      | `number`                                                           | -       | Gap between columns (overrides spacing if provided)           |
 | `rowGap`         | `number`                                                           | -       | Gap between rows (overrides spacing if provided)              |
 | `containerStyle` | `StyleProp\<ViewStyle\>`                                           | -       | Style for the grid container                                  |

package/src/components/Grid/Grid.props.ts

@@ -17,6 +17,12 @@ export interface GridProps extends ViewProps {
   /**
    * Spacing between grid items (applies to both rows and columns)
    */
+  spacing?: SpacingValues;
+
+  /**
+   * Spacing between grid items (applies to both rows and columns)
+   * @deprecated Use `spacing` instead. The `space` prop will be removed in a future release.
+   */
   space?: SpacingValues;
 
   /**

package/src/components/Grid/Grid.stories.tsx

@@ -13,7 +13,7 @@ const meta = {
       control: 'object',
       description: 'Number of columns or responsive object with breakpoints',
     },
-    space: {
+    spacing: {
       options: ['none', '2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'],
       control: 'radio',
       description: 'Responsive spacing between grid items (applied to both rows and columns).',
@@ -33,7 +33,7 @@ const meta = {
   },
   args: {
     columns: 2,
-    space: 'md',
+    spacing: 'md',
   },
 } satisfies Meta<typeof Grid>;
 
@@ -69,7 +69,7 @@ export const Playground: Story = {
     controls: {
       include: [
         'columns',
-        'space',
+        'spacing',
         'gap',
         'columnGap',
         'rowGap',
@@ -81,7 +81,7 @@ export const Playground: Story = {
   },
   args: {
     columns: 2,
-    space: 'md',
+    spacing: 'md',
   },
   render: args => (
     <Grid {...args} style={{ width: 400 }}>
@@ -98,7 +98,7 @@ export const Playground: Story = {
 export const ThreeColumns: Story = {
   args: {
     columns: 3,
-    space: 'md',
+    spacing: 'md',
   },
   render: args => (
     <Grid {...args} style={{ width: 500 }}>
@@ -124,7 +124,7 @@ export const ResponsiveColumns: Story = {
       lg: 4,
       xl: 5,
     },
-    space: 'md',
+    spacing: 'md',
   },
   render: args => (
     <Grid {...args} style={{ width: '100%' }}>
@@ -145,7 +145,7 @@ export const ResponsiveColumns: Story = {
 export const DifferentSizes: Story = {
   args: {
     columns: 3,
-    space: 'sm',
+    spacing: 'sm',
   },
   render: args => (
     <Grid {...args} style={{ width: 500 }}>
@@ -178,7 +178,7 @@ export const CustomGaps: Story = {
 export const WithContent: Story = {
   args: {
     columns: 2,
-    space: 'md',
+    spacing: 'md',
   },
   render: args => (
     <Grid {...args} style={{ width: 400 }}>

package/src/components/Grid/Grid.tsx

@@ -9,6 +9,7 @@ const Grid = ({
   containerStyle,
   itemStyle,
   rowStyle,
+  spacing,
   space,
   children,
   ...props
@@ -19,7 +20,7 @@ const Grid = ({
   const { width } = useWindowDimensions();
   const { gap, columnGap, rowGap } = { ...remainingProps, ...computedStyles };
 
-  styles.useVariants({ space });
+  styles.useVariants({ spacing: space ?? spacing });
 
   const getColumnsForWidth = useMemo(() => {
     // If columns is a number, use that number
@@ -124,14 +125,14 @@ const styles = StyleSheet.create(theme => ({
   rowsContainer: {
     width: '100%',
     variants: {
-      space: theme.globalStyle.variants.space,
+      spacing: theme.globalStyle.variants.spacing,
     },
   },
   row: {
     flexDirection: 'row',
     width: '100%',
     variants: {
-      space: theme.globalStyle.variants.space,
+      spacing: theme.globalStyle.variants.spacing,
     },
   },
   item: {

package/src/components/HighlightBanner/HighlightBanner.docs.mdx

@@ -83,7 +83,7 @@ const MyComponent = () => (
 | button               | `ReactElement`                                                                                     | Optional Button component displayed below description         | `-`          |
 | variant              | `'emphasis' \| 'subtle'`                                                                           | Visual style variant with strong or subtle borders            | `'emphasis'` |
 
-The component also accepts all standard Card props except `noPadding`, `colorScheme`, `space`, `gap`, `rowGap`, `columnGap`, `flexDirection`, `flexWrap`, `alignItems`, and `justifyContent`.
+The component also accepts all standard Card props except `noPadding`, `colorScheme`, `spacing`, `gap`, `rowGap`, `columnGap`, `flexDirection`, `flexWrap`, `alignItems`, and `justifyContent`.
 
 ### `HighlightBannerImage` Props
 

package/src/components/HighlightBanner/HighlightBanner.stories.tsx

@@ -103,7 +103,7 @@ export const ColorVariants: Story = {
   render: args => {
     return (
       <View style={{ width: 400 }}>
-        <Flex space="lg" direction="column" align="stretch">
+        <Flex spacing="lg" direction="column" align="stretch">
           <HighlightBanner
             {...args}
             heading="Energy Blue"
@@ -237,7 +237,7 @@ export const SubtleCard: Story = {
 export const DifferentImages: Story = {
   render: args => {
     return (
-      <Flex space="lg" direction="column">
+      <Flex spacing="lg" direction="column">
         <View style={{ width: 400 }}>
           <HighlightBanner
             {...args}

package/src/components/Icon/Icon.docs.mdx

@@ -38,7 +38,7 @@ The following example shows how to use the icons directly from the `@utilityware
 
 <UsageWrap>
   <Center>
-    <Flex space="lg" direction="row" alignItems="center">
+    <Flex spacing="lg" direction="row" alignItems="center">
       <ElectricityMediumIcon color={lightTheme.color.energyBlue['700']} />
       <MobileMediumIcon color={lightTheme.color.mobileRose['700']} />
       <BroadbandMediumIcon color={lightTheme.color.broadbandGreen['700']} />
@@ -59,7 +59,7 @@ import {
 const MyComponent = () => {
   const { color } = useTheme();
   return (
-    <Flex space="lg" direction="row" alignItems="center">
+    <Flex spacing="lg" direction="row" alignItems="center">
       <ElectricityMediumIcon color={color.energyBlue['700']} />
       <MobileMediumIcon color={color.mobileRose['700']} />
       <BroadbandMediumIcon color={color.broadbandGreen['700']} />
@@ -82,7 +82,7 @@ import {
 
 const MyComponent = () => {
   return (
-    <Flex space="lg" direction="row" alignItems="center">
+    <Flex spacing="lg" direction="row" alignItems="center">
       <Icon as={ElectricityMediumIcon} color="energyBlue700" />
       <Icon as={MobileMediumIcon} color="mobileRose700" />
       <Icon as={BroadbandMediumIcon} color="broadbandGreen700" />

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

@@ -94,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}>
@@ -137,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) {
@@ -166,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
@@ -224,7 +224,7 @@ export const KitchenSink: Story = {
 export const ServiceIconButtons: Story = {
   render: () => {
     return (
-      <ButtonGroup space="md">
+      <ButtonGroup spacing="md">
         <IconButton
           icon={ElectricityMediumIcon}
           backgroundColor="energyBlue200"

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