@utilitywarehouse/hearth-react-native 0.18.0 → 0.19.0

package/src/components/Card/Card.docs.mdx

@@ -137,7 +137,7 @@ import {
 
 const MyComponent = () => (
   <Card variant="emphasis" colorScheme="neutralSubtle">
-    <Flex space="md" direction="column" align="stretch">
+    <Flex spacing="md" direction="column" align="stretch">
       <Heading size="md">Heading</Heading>
       <BodyText>Content</BodyText>
       <CardPressHandler>

package/src/components/Card/Card.props.ts

@@ -24,6 +24,8 @@ interface CardProps extends PressableProps {
     | 'pig';
   noPadding?: boolean;
   disabled?: boolean;
+  spacing?: SpacingValues;
+  /** @deprecated Use `spacing` instead. The `gap` prop will be removed in a future release. */
   space?: SpacingValues;
   alignItems?: ViewStyle['alignItems'];
   justifyContent?: ViewStyle['justifyContent'];

package/src/components/Card/Card.stories.tsx

@@ -77,7 +77,7 @@ export const Playground: Story = {
 export const WithActions: Story = {
   render: ({ children, ...props }) => {
     return (
-      <Card {...props} flexDirection="column" alignItems="stretch" space="md" variant="emphasis">
+      <Card {...props} flexDirection="column" alignItems="stretch" spacing="md" variant="emphasis">
         <BodyText>{children as string}</BodyText>
         <CardActions>
           <CardAction
@@ -110,7 +110,7 @@ export const WithOnlyAction: Story = {
   },
   render: ({ ...props }) => {
     return (
-      <Card {...props} flexDirection="column" alignItems="stretch" space="md">
+      <Card {...props} flexDirection="column" alignItems="stretch" spacing="md">
         <CardActions>
           <CardAction
             onPress={() => console.log('Card action pressed')}
@@ -130,7 +130,7 @@ export const Variants: Story = {
   },
   render: ({ children, ...props }) => {
     return (
-      <Flex space="lg">
+      <Flex spacing="lg">
         <VariantTitle title="Subtle - White">
           <Card {...props} variant="subtle" colorScheme="neutralStrong">
             <BodyText>{children as string}</BodyText>
@@ -235,7 +235,7 @@ export const WithShadow: Story = {
   },
   render: ({ children, ...props }) => {
     return (
-      <Flex space="lg">
+      <Flex spacing="lg">
         <VariantTitle title="Subtle - White - Shadow">
           <Card {...props} variant="subtle">
             <BodyText>{children as string}</BodyText>
@@ -257,14 +257,14 @@ export const Interactive: Story = {
   },
   render: ({ children, ...props }) => {
     return (
-      <Flex space="lg">
+      <Flex spacing="lg">
         <VariantTitle title="Pressable - Subtle - White">
           <Card
             {...props}
             onPress={() => console.log('pressed')}
             variant="subtle"
             colorScheme="neutralStrong"
-            space="md"
+            spacing="md"
             flexDirection="column"
             alignItems="stretch"
           >
@@ -279,7 +279,7 @@ export const Interactive: Story = {
             onPress={() => console.log('pressed')}
             variant="emphasis"
             colorScheme="neutralStrong"
-            space="md"
+            spacing="md"
             flexDirection="column"
             alignItems="stretch"
           >
@@ -294,7 +294,7 @@ export const Interactive: Story = {
             onPress={() => console.log('pressed')}
             variant="subtle"
             colorScheme="neutralSubtle"
-            space="md"
+            spacing="md"
             flexDirection="column"
             alignItems="stretch"
           >
@@ -308,7 +308,7 @@ export const Interactive: Story = {
             {...props}
             variant="emphasis"
             colorScheme="neutralSubtle"
-            space="md"
+            spacing="md"
             flexDirection="column"
             alignItems="stretch"
           >

package/src/components/Card/CardAction/CardAction.stories.tsx

@@ -175,7 +175,7 @@ export const WithBadge: Story = {
     controls: { include: [] },
   },
   render: () => (
-    <Flex direction="column" space="md" style={{ width: '100%', maxWidth: 400 }}>
+    <Flex direction="column" spacing="md" style={{ width: '100%', maxWidth: 400 }}>
       <Card variant="emphasis">
         <CardActions>
           <CardAction
@@ -221,7 +221,7 @@ export const Sizes: Story = {
     controls: { include: [] },
   },
   render: () => (
-    <Flex direction="column" space="md" style={{ width: '100%', maxWidth: 400 }}>
+    <Flex direction="column" spacing="md" style={{ width: '100%', maxWidth: 400 }}>
       <Card variant="emphasis">
         <CardActions>
           <CardAction

package/src/components/Card/CardContent.tsx

@@ -3,10 +3,10 @@ import { StyleSheet } from 'react-native-unistyles';
 import { useCardContext } from './Card.context';
 
 const CardContent = ({ children, style, ...props }: ViewProps) => {
-  const { noPadding, space } = useCardContext();
+  const { noPadding, spacing } = useCardContext();
   styles.useVariants({
     noPadding,
-    space,
+    spacing,
   });
   return (
     <View style={[styles.container, style]} {...props}>
@@ -20,7 +20,7 @@ CardContent.displayName = 'CardContent';
 const styles = StyleSheet.create(theme => ({
   container: {
     variants: {
-      space: theme.globalStyle.variants.space,
+      spacing: theme.globalStyle.variants.spacing,
       noPadding: {
         true: {
           padding: theme.components.card.mobile.paddingNone,

package/src/components/Card/CardRoot.tsx

@@ -22,10 +22,10 @@ const Card = ({
   noPadding = false,
   style,
   states,
+  spacing,
   space,
   disabled = false,
   onPress,
-
   ...rest
 }: CardProps & { states?: { active?: boolean; disabled?: boolean } }) => {
   const { active } = states || { active: false };
@@ -57,10 +57,20 @@ const Card = ({
       hasActions,
       hasContent,
       hasOnlyActions,
-      space,
+      spacing: space ?? spacing,
       variant,
     }),
-    [showPressed, active, hasActions, hasContent, hasOnlyActions, noPadding, space, variant]
+    [
+      showPressed,
+      active,
+      hasActions,
+      hasContent,
+      hasOnlyActions,
+      noPadding,
+      space,
+      spacing,
+      variant,
+    ]
   );
 
   styles.useVariants({
@@ -70,7 +80,7 @@ const Card = ({
     active,
     showPressed,
     disabled,
-    space: hasActions || hasContent || hasOnlyActions ? 'none' : space,
+    spacing: hasActions || hasContent || hasOnlyActions ? 'none' : spacing,
     shadowColor,
   });
 
@@ -116,7 +126,7 @@ const styles = StyleSheet.create(theme => ({
     alignItems: 'flex-start',
     borderRadius: theme.components.card.borderRadius,
     variants: {
-      space: theme.globalStyle.variants.space,
+      spacing: theme.globalStyle.variants.spacing,
       variant: {
         subtle: {
           borderWidth: theme.components.card.neutral.subtle.borderWidth,

package/src/components/Checkbox/CheckboxGroupTextContent.tsx

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

package/src/components/Checkbox/CheckboxTextContent.tsx

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

package/src/components/Container/Container.docs.mdx

@@ -90,7 +90,7 @@ const MyComponent = () => (
 
 ### With Custom Spacing
 
-The Container component supports a `space` prop for controlling gap between child elements, as well as directional padding and margin props:
+The Container component supports a `spacing` prop for controlling gap between child elements, as well as directional padding and margin props:
 
 <Canvas of={Stories.WithCustomSpacing} />
 
@@ -98,7 +98,7 @@ The Container component supports a `space` prop for controlling gap between chil
 import { Container, Box, BodyText } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (
-  <Container space="xl" paddingHorizontal="200" paddingVertical="300">
+  <Container spacing="xl" paddingHorizontal="200" paddingVertical="300">
     <Box bg="cyan400" p="200" borderRadius="md">
       <BodyText>Item 1</BodyText>
     </Box>

package/src/components/Container/Container.props.ts

@@ -74,8 +74,13 @@ interface ContainerProps extends ViewProps {
   mb?: SpaceValue;
   ml?: SpaceValue;
   mr?: SpaceValue;
+  /**
+   * The spacing between child elements (gap).
+   */
+  spacing?: SpacingValues;
   /**
    * The space between child elements (gap).
+   * @deprecated Use `spacing` instead. The `space` prop will be removed in a future release.
    */
   space?: SpacingValues;
   /**

package/src/components/Container/Container.stories.tsx

@@ -154,10 +154,10 @@ const meta = {
       control: 'select',
       description: 'The right margin of the container.',
     },
-    space: {
+    spacing: {
       options: ['none', '2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'],
       control: 'radio',
-      description: 'The space between child elements (gap).',
+      description: 'The spacing between child elements (gap).',
     },
     gap: {
       options: Object.keys(lightTheme.space),

package/src/components/Container/Container.tsx

@@ -3,10 +3,10 @@ import { StyleSheet } from 'react-native-unistyles';
 import { useStyleProps } from '../../hooks';
 import type ContainerProps from './Container.props';
 
-const Container = ({ style, children, space = 'md', ...props }: ContainerProps) => {
+const Container = ({ style, children, spacing = 'md', space, ...props }: ContainerProps) => {
   const { computedStyles, remainingProps } = useStyleProps(props);
 
-  styles.useVariants({ space });
+  styles.useVariants({ spacing: space ?? spacing });
   return (
     <View style={[styles.container(computedStyles), style]} {...remainingProps}>
       {children}
@@ -44,7 +44,7 @@ const styles = StyleSheet.create(theme => ({
         : undefined,
     ...extra,
     variants: {
-      space: theme.globalStyle.variants.space,
+      spacing: theme.globalStyle.variants.spacing,
     },
   }),
 }));

package/src/components/CurrencyInput/CurrencyInput.docs.mdx

@@ -64,7 +64,7 @@ When using `CurrencyInput`, the component inherits React Native TextInput props
 | focused               | `boolean`                                        | `false`     | Forces the focused visual state                                                                                                                |
 | inBottomSheet         | `boolean`                                        | `false`     | Use BottomSheetTextInput when true                                                                                                             |
 | placeholder           | `string`                                         | `'0.00'`    | Placeholder text                                                                                                                               |
-| disableGroupSeparator | `boolean`                                        | `false`     | Disables automatic inserting of thousand separators while the user types _(Formatting only works with controlled components via onTextChange)_ |
+| disableGroupSeparator | `boolean`                                        | `false`     | Disables automatic inserting of thousand separators while the user types _(Formatting only works with controlled components via onChangeText)_ |
 
 Note: When used inside `FormField`, `validationStatus` and `disabled` are read from the context unless explicitly overridden.
 

package/src/components/CurrencyInput/CurrencyInput.stories.tsx

@@ -69,7 +69,7 @@ const meta = {
     disableGroupSeparator: {
       control: 'boolean',
       description:
-        'Disable automatic adding of thousand separators while typing _(Formatting only works with controlled components via onTextChange)_',
+        'Disable automatic adding of thousand separators while typing _(Formatting only works with controlled components via onChangeText)_',
       defaultValue: false,
     },
   },
@@ -110,7 +110,7 @@ export const States: Story = {
   },
   render: () => {
     return (
-      <Flex direction="column" space="lg">
+      <Flex direction="column" spacing="lg">
         <VariantTitle title="Default">
           <CurrencyInput />
         </VariantTitle>

package/src/components/DateInput/DateInput.stories.tsx

@@ -212,7 +212,7 @@ export const FlexibleSegments: Story = {
 
 export const GroupingInputs: Story = {
   render: () => (
-    <Flex space="sm">
+    <Flex spacing="sm">
       <Heading size="lg">Event Registration</Heading>
       <Card variant="subtle" gap="250">
         <DateInput label="Date of birth" helperText="Enter your date of birth" required />
@@ -246,7 +246,7 @@ export const WithState: Story = {
     };
 
     return (
-      <Flex space="md">
+      <Flex spacing="md">
         <DateInput
           label="Date"
           helperText="Select or enter a date"
@@ -257,7 +257,7 @@ export const WithState: Story = {
           onMonthChange={setMonth}
           onYearChange={setYear}
         />
-        <Flex space="xs">
+        <Flex spacing="xs">
           <Button onPress={handleSetToday}>Set to Today</Button>
           <Button onPress={handleReset} variant="solid">
             Reset

package/src/components/DatePickerInput/DatePickerInput.stories.tsx

@@ -130,7 +130,7 @@ export const States: Story = {
     const [formFieldDate, setFormFieldDate] = useState<DateType>();
 
     return (
-      <Flex direction="column" space="lg">
+      <Flex direction="column" spacing="lg">
         <VariantTitle title="Default">
           <DatePickerInput placeholder="DD/MM/YYYY" />
         </VariantTitle>

package/src/components/DescriptionList/DescriptionList.stories.tsx

@@ -94,7 +94,7 @@ export const Column: Story = {
 export const KitchenSink: Story = {
   parameters: { controls: { include: [] } },
   render: () => (
-    <Flex direction="column" space="lg" style={{ width: '100%' }}>
+    <Flex direction="column" spacing="lg" style={{ width: '100%' }}>
       <VariantTitle title="Row direction">
         <DescriptionList direction="row">
           {sampleData.map(item => (

package/src/components/Divider/Divider.docs.mdx

@@ -1,7 +1,7 @@
-import { Meta, Controls, Story, Canvas } from '@storybook/addon-docs/blocks';
+import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
+import { BodyText, Center, Divider } from '../../';
+import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
 import * as Stories from './Divider.stories';
-import { Divider, BodyText, Center } from '../../';
-import { ViewFigmaButton, BackToTopButton, UsageWrap } from '../../../docs/components';
 
 <Meta title="Components / Divider" />
 
@@ -35,7 +35,7 @@ Dividers can help establish a visual hierarchy on your designs. They can indicat
 <UsageWrap>
   <Center>
     <BodyText>This text is divided</BodyText>
-    <Divider space="sm" />
+    <Divider spacing="sm" />
     <BodyText>From this text</BodyText>
   </Center>
 </UsageWrap>
@@ -46,7 +46,7 @@ import { Spinner, Center } from '@utilitywarehouse/hearth-react-native';
 const MyComponent = () => (
   <Center>
     <BodyText>This text is divided</BodyText>
-    <Divider space="sm" />
+    <Divider spacing="sm" />
     <BodyText>From this text</BodyText>
   </Center>
 );
@@ -58,7 +58,7 @@ const MyComponent = () => (
 | ------------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
 | `orientation` | `'horizontal' \| 'vertical'`                     | The orientation of the Divider.                                                                                                                                                                     | `'horizontal'` |
 | `color`       | `string`                                         | The color of the spinner.                                                                                                                                                                           | `-`            |
-| `space`       | `'none' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | The space between the Divider items.                                                                                                                                                                | `none`         |
+| `spacing`     | `'none' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | The space between the Divider items.                                                                                                                                                                | `none`         |
 | `width`       | `number`                                         | The width of the Divider.                                                                                                                                                                           | `100%`         |
 | `height`      | `number`                                         | The height of the Divider.                                                                                                                                                                          | `100%`         |
 | `flexItem`    | `boolean`                                        | If true, a vertical divider will have the correct height when used in flex container. (By default, a vertical divider will have a calculated height of 0px if it is the child of a flex container.) | false          |

package/src/components/Divider/Divider.props.ts

@@ -3,6 +3,12 @@ import type { ColorValue, SpacingValues } from '../../types';
 
 interface DividerProps extends Omit<ViewProps, 'children'> {
   color?: ColorValue;
+  backgroundColor?: ColorValue;
+  spacing?: SpacingValues;
+  /**
+   * The space between child elements (gap).
+   * @deprecated Use `spacing` instead. The `space` prop will be removed in a future release.
+   */
   space?: SpacingValues;
   orientation?: 'horizontal' | 'vertical';
   height?: DimensionValue;

package/src/components/Divider/Divider.tsx

@@ -8,13 +8,14 @@ import type DividerProps from './Divider.props';
 const Divider = ({
   orientation = 'horizontal',
   color,
+  spacing,
   space,
   height,
   width,
   flexItem,
   ...props
 }: DividerProps) => {
-  styles.useVariants({ orientation, space, flexItem });
+  styles.useVariants({ orientation, spacing: space ?? spacing, flexItem });
   const { color: themeColor, colorMode } = useTheme();
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const colorValue = useMemo(() => getFlattenedColorValue(color, themeColor), [color, colorMode]);
@@ -42,7 +43,7 @@ const styles = StyleSheet.create(theme => ({
           width: theme.components.divider.borderWidth,
         },
       },
-      space: {
+      spacing: {
         none: {},
         '2xs': {},
         xs: {},
@@ -61,14 +62,14 @@ const styles = StyleSheet.create(theme => ({
     compoundVariants: [
       {
         orientation: 'horizontal',
-        space: 'none',
+        spacing: 'none',
         styles: {
           marginVertical: 0,
         },
       },
       {
         orientation: 'horizontal',
-        space: '2xs',
+        spacing: '2xs',
         styles: {
           marginVertical: {
             base: theme.layout.mobile.spacing['2xs'],
@@ -79,7 +80,7 @@ const styles = StyleSheet.create(theme => ({
       },
       {
         orientation: 'horizontal',
-        space: 'xs',
+        spacing: 'xs',
         styles: {
           marginVertical: {
             base: theme.layout.mobile.spacing.xs,
@@ -90,7 +91,7 @@ const styles = StyleSheet.create(theme => ({
       },
       {
         orientation: 'horizontal',
-        space: 'sm',
+        spacing: 'sm',
         styles: {
           marginVertical: {
             base: theme.layout.mobile.spacing.sm,
@@ -101,7 +102,7 @@ const styles = StyleSheet.create(theme => ({
       },
       {
         orientation: 'horizontal',
-        space: 'md',
+        spacing: 'md',
         styles: {
           marginVertical: {
             base: theme.layout.mobile.spacing.md,
@@ -112,7 +113,7 @@ const styles = StyleSheet.create(theme => ({
       },
       {
         orientation: 'horizontal',
-        space: 'lg',
+        spacing: 'lg',
         styles: {
           marginVertical: {
             base: theme.layout.mobile.spacing.lg,
@@ -123,7 +124,7 @@ const styles = StyleSheet.create(theme => ({
       },
       {
         orientation: 'horizontal',
-        space: 'xl',
+        spacing: 'xl',
         styles: {
           marginVertical: {
             base: theme.layout.mobile.spacing.xl,
@@ -134,7 +135,7 @@ const styles = StyleSheet.create(theme => ({
       },
       {
         orientation: 'horizontal',
-        space: '2xl',
+        spacing: '2xl',
         styles: {
           marginVertical: {
             base: theme.layout.mobile.spacing['2xl'],
@@ -145,14 +146,14 @@ const styles = StyleSheet.create(theme => ({
       },
       {
         orientation: 'vertical',
-        space: 'none',
+        spacing: 'none',
         styles: {
           marginHorizontal: 0,
         },
       },
       {
         orientation: 'vertical',
-        space: '2xs',
+        spacing: '2xs',
         styles: {
           marginHorizontal: {
             base: theme.layout.mobile.spacing['2xs'],
@@ -163,7 +164,7 @@ const styles = StyleSheet.create(theme => ({
       },
       {
         orientation: 'vertical',
-        space: 'xs',
+        spacing: 'xs',
         styles: {
           marginHorizontal: {
             base: theme.layout.mobile.spacing.xs,
@@ -174,7 +175,7 @@ const styles = StyleSheet.create(theme => ({
       },
       {
         orientation: 'vertical',
-        space: 'sm',
+        spacing: 'sm',
         styles: {
           marginHorizontal: {
             base: theme.layout.mobile.spacing.sm,
@@ -185,7 +186,7 @@ const styles = StyleSheet.create(theme => ({
       },
       {
         orientation: 'vertical',
-        space: 'md',
+        spacing: 'md',
         styles: {
           marginHorizontal: {
             base: theme.layout.mobile.spacing.md,
@@ -196,7 +197,7 @@ const styles = StyleSheet.create(theme => ({
       },
       {
         orientation: 'vertical',
-        space: 'lg',
+        spacing: 'lg',
         styles: {
           marginHorizontal: {
             base: theme.layout.mobile.spacing.lg,
@@ -207,7 +208,7 @@ const styles = StyleSheet.create(theme => ({
       },
       {
         orientation: 'vertical',
-        space: 'xl',
+        spacing: 'xl',
         styles: {
           marginHorizontal: {
             base: theme.layout.mobile.spacing.xl,
@@ -218,7 +219,7 @@ const styles = StyleSheet.create(theme => ({
       },
       {
         orientation: 'vertical',
-        space: '2xl',
+        spacing: '2xl',
         styles: {
           marginHorizontal: {
             base: theme.layout.mobile.spacing['2xl'],

package/src/components/ExpandableCard/ExpandableCardExpandedContent.tsx

@@ -20,7 +20,7 @@ const ExpandableCardExpandedContent = ({
     <View style={styles.container}>
       <Expandable expanded={isExpanded} duration={duration} animateOpacity={animateOpacity}>
         <View>
-          <Divider space="none" />
+          <Divider spacing="none" />
           <View style={styles.content}>{children}</View>
         </View>
       </Expandable>

package/src/components/Flex/Flex.docs.mdx

@@ -25,7 +25,7 @@ When you need to center-align content, the Center component comes in handy. It i
 
 <UsageWrap>
   <Center>
-    <Flex space="lg">
+    <Flex spacing="lg">
       <BodyText>Spaced out text</BodyText>
       <BodyText>Spaced out text</BodyText>
       <BodyText>Flexed</BodyText>
@@ -39,7 +39,7 @@ When you need to center-align content, the Center component comes in handy. It i
 import { Flex, BodyText } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (
-  <Flex space="lg">
+  <Flex spacing="lg">
     <BodyText>Spaced out text</BodyText>
     <BodyText>Spaced out text</BodyText>
     <BodyText>Flexed</BodyText>
@@ -57,4 +57,4 @@ const MyComponent = () => (
 | `wrap`      | `'wrap' \| 'nowrap' \| 'wrap-reverse'`                                                                  | `nowrap`     | The wrap of the flex container.            |
 | `justify`   | `'flex-start' \| 'flex-end' \| 'center' \| `<br />`'space-between' \| 'space-around' \| 'space-evenly'` | `flex-start` | The justify content of the flex container. |
 | `align`     | `'flex-start' \| 'flex-end' \| 'center' \| 'stretch' \| 'baseline'`                                     | `flex-start` | The align items of the flex container.     |
-| `space`     | `'none' \| '2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`                                      | `md`         | The space between the content.             |
+| `spacing`   | `'none' \| '2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`                                      | `md`         | The space between the content.             |

package/src/components/Flex/Flex.props.ts

@@ -6,6 +6,11 @@ interface FlexProps extends ViewProps {
   align?: FlexAlignType;
   justify?: ViewStyle['justifyContent'];
   wrap?: ViewStyle['flexWrap'];
+  spacing?: SpacingValues;
+  /**
+   * The space between child elements (gap).
+   * @deprecated Use `spacing` instead. The `space` prop will be removed in a future release.
+   */
   space?: SpacingValues;
 }
 

package/src/components/Flex/Flex.stories.tsx

@@ -39,7 +39,7 @@ const meta = {
       control: 'select',
       description: 'The justify of the flex container.',
     },
-    space: {
+    spacing: {
       options: ['none', '2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'],
       control: 'radio',
       description: 'The space of the flex container.',
@@ -51,7 +51,7 @@ const meta = {
     align: 'center',
     wrap: 'wrap',
     justify: 'flex-start',
-    space: 'sm',
+    spacing: 'sm',
   },
 } satisfies Meta<typeof Flex>;