@utilitywarehouse/hearth-react-native 0.18.0 → 0.19.1

package/docs/components/AllComponents.web.tsx

@@ -183,7 +183,7 @@ const AllComponents: React.FC = () => {
   return (
     <div className="sb-unstyled">
       <ScrollView contentContainerStyle={styles.container}>
-        <Flex direction="row" wrap="wrap" space="md" style={styles.grid}>
+        <Flex direction="row" wrap="wrap" spacing="md" style={styles.grid}>
           <ComponentWrapper name="Accordion" link="/?path=/docs/components-accordion--docs">
             <Center flex={1} p="200">
               <Accordion type="single">
@@ -339,7 +339,7 @@ const AllComponents: React.FC = () => {
             </Center>
           </ComponentWrapper>
           <ComponentWrapper name="Container" link="/?path=/docs/primitives-container--docs">
-            <Container space="md" backgroundColor="backgroundSecondary">
+            <Container spacing="md" backgroundColor="backgroundSecondary">
               <Box h={20} bg="blue300" />
               <Box h={20} bg="blue400" />
               <Box h={20} bg="blue500" />
@@ -399,7 +399,7 @@ const AllComponents: React.FC = () => {
           <ComponentWrapper name="Divider" link="/?path=/docs/components-divider--docs">
             <Center flex={1} p="300">
               <BodyText>This text is divided</BodyText>
-              <Divider space="sm" />
+              <Divider spacing="sm" />
               <BodyText>From this text</BodyText>
             </Center>
           </ComponentWrapper>
@@ -444,7 +444,7 @@ const AllComponents: React.FC = () => {
 
           <ComponentWrapper name="Flex" link="/?path=/docs/primitives-flex--docs">
             <Center flex={1}>
-              <Flex direction="row" space="md">
+              <Flex direction="row" spacing="md">
                 <Box w={40} h={40} bg="blue300" />
                 <Box w={40} h={40} bg="blue400" />
                 <Box w={40} h={40} bg="blue500" />
@@ -467,7 +467,7 @@ const AllComponents: React.FC = () => {
           <ComponentWrapper name="Grid" link="/?path=/docs/primitives-grid--docs">
             <Center flex={1}>
               <Box width={100}>
-                <Grid columns={2} space="md">
+                <Grid columns={2} spacing="md">
                   <Box w={40} h={40} bg="blue300" />
                   <Box w={40} h={40} bg="blue400" />
                   <Box w={40} h={40} bg="blue500" />
@@ -519,7 +519,7 @@ const AllComponents: React.FC = () => {
             link="/?path=/docs/components-icon-container--docs"
           >
             <Center flex={1}>
-              <Flex direction="row" space="sm">
+              <Flex direction="row" spacing="sm">
                 <IconContainer
                   icon={ElectricityMediumIcon}
                   size="sm"
@@ -556,7 +556,7 @@ const AllComponents: React.FC = () => {
 
           <ComponentWrapper name="Icons" link="/?path=/docs/components-icons--docs">
             <Center flex={1}>
-              <Flex direction="row" space="lg">
+              <Flex direction="row" spacing="lg">
                 <Icon as={ElectricityMediumIcon} color="energyBlue700" />
                 <Icon as={MobileMediumIcon} color="mobileRose700" />
                 <Icon as={BroadbandMediumIcon} color="broadbandGreen700" />
@@ -727,9 +727,9 @@ const AllComponents: React.FC = () => {
           </ComponentWrapper>
           <ComponentWrapper name="Skeleton" link="/?path=/docs/components-skeleton--docs">
             <Center flex={1}>
-              <Flex direction="row" space="sm">
+              <Flex direction="row" spacing="sm">
                 <Skeleton width={30} height={30} />
-                <Flex space="sm">
+                <Flex spacing="sm">
                   <Skeleton width={120} height={15} />
                   <Skeleton width={100} height={15} />
                 </Flex>

package/docs/layout-components.docs.mdx

@@ -48,7 +48,7 @@ appropriate margin and padding based on the current breakpoint, making it ideal
 wrapping page content or major sections.
 
 ```tsx
-<Container space="lg">
+<Container spacing="lg">
   <Box>{...}</Box>
   <Box>{...}</Box>
 </Container>
@@ -60,7 +60,7 @@ the convenience of the component:
 ```tsx
 <Container
   marginHorizontal="none"
-  space="xl"
+  spacing="xl"
 >
   {...}
 </Container>
@@ -96,7 +96,7 @@ styling props, and to all the properties needed to build a grid layout.
 You can easily build responsive layouts using Design System defaults.
 
 ```tsx
-<Grid columns={2} space="md">
+<Grid columns={2} spacing="md">
   <Box>{...}</Box>
   <Box>{...}</Box>
   <Box>{...}</Box>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.18.0",
+  "version": "0.19.1",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -56,14 +56,14 @@
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^3.2.4",
     "@utilitywarehouse/hearth-fonts": "^0.0.4",
-    "@utilitywarehouse/hearth-react-icons": "^0.7.4",
-    "@utilitywarehouse/hearth-react-native-icons": "^0.7.4",
+    "@utilitywarehouse/hearth-react-icons": "^0.8.0",
+    "@utilitywarehouse/hearth-react-native-icons": "^0.8.0",
     "@utilitywarehouse/hearth-svg-assets": "^0.3.0",
     "@utilitywarehouse/hearth-tokens": "^0.2.2"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": "^5.0.0",
-    "@utilitywarehouse/hearth-react-native-icons": "0.6.0",
+    "@utilitywarehouse/hearth-react-native-icons": "0.8.0",
     "react": ">=17 || ^18.0.0 || ^19.0.0",
     "react-native": ">=0.77",
     "react-native-gesture-handler": "^2.22.0",
@@ -76,6 +76,7 @@
     "clean": "rm -rf node_modules rm -rf build .turbo",
     "generateColours": "node ./scripts/generateColours.js",
     "copyTokens": "node ./scripts/copyTokens.js",
+    "copyChangelog": "node ./scripts/copyChangelog.js",
     "lint:fix": "TIMING=1 eslint --fix .",
     "lint": "TIMING=1 eslint .",
     "build": "tsc",
@@ -83,9 +84,8 @@
     "figma:create": "figma connect create",
     "figma:publish": "figma connect publish",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "storybook dev -p 6006",
-    "build:storybook": "storybook build",
-    "build-storybook": "storybook build",
+    "dev": "npm run copyChangelog && storybook dev -p 6006",
+    "build:storybook": "npm run copyChangelog && storybook build",
     "chromatic": "npx chromatic --project-token=chpt_cce0fb1ebd95d2a --build-script-name build:storybook"
   }
 }

package/scripts/copyChangelog.js

@@ -0,0 +1,50 @@
+/**
+ * Script to copy CHANGELOG.md to docs folder and convert it to changelog.mdx
+ * with proper Meta and BackToTopButton components
+ */
+
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+// Get the directory name in ES modules
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Define paths
+const sourceFile = path.resolve(__dirname, '../CHANGELOG.md');
+const targetFile = path.resolve(__dirname, '../docs/changelog.mdx');
+
+// Read the changelog content
+console.log('Reading CHANGELOG.md...');
+if (!fs.existsSync(sourceFile)) {
+  console.error('Error: CHANGELOG.md not found at', sourceFile);
+  process.exit(1);
+}
+
+let changelogContent = fs.readFileSync(sourceFile, 'utf-8');
+
+// Remove the first line (package name heading)
+changelogContent = changelogContent.split('\n').slice(1).join('\n');
+
+// Create the MDX content with imports and components
+const mdxContent = `import { Meta } from '@storybook/addon-docs/blocks';
+import { BackToTopButton } from './components';
+
+<Meta title="Changelog" />
+<BackToTopButton />
+
+# Changelog - ${'`@utilitywarehouse/hearth-react-native`'}
+
+The changelog for the Hearth React Native library. Here you can find all the changes, improvements, and bug fixes for each version.
+
+${changelogContent}
+`;
+
+// Write the new MDX file
+console.log('Writing changelog.mdx...');
+fs.writeFileSync(targetFile, mdxContent);
+
+console.log('✅ Changelog copied and transformed successfully!');
+console.log(`   Source: ${sourceFile}`);
+console.log(`   Target: ${targetFile}`);

package/src/components/Alert/Alert.stories.tsx

@@ -56,7 +56,7 @@ export const Playground: Story = {};
 
 export const Variants: Story = {
   render: () => (
-    <Flex space="sm">
+    <Flex spacing="sm">
       <VariantTitle title="Info - Blue">
         <Alert
           colorScheme="info"

package/src/components/Avatar/Avatar.stories.tsx

@@ -1,8 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
-import React from 'react';
 import { Avatar } from '.';
-import { Flex } from '../Flex';
 import { VariantTitle } from '../../../docs/components';
+import { Flex } from '../Flex';
 
 const meta = {
   title: 'Stories / Avatar',
@@ -61,13 +60,13 @@ export const Image: Story = {
 
 export const Sizes: Story = {
   render: () => (
-    <Flex direction="row" space="xl" align="center">
-      <Flex direction="column" space="md" align="center">
+    <Flex direction="row" spacing="xl" align="center">
+      <Flex direction="column" spacing="md" align="center">
         <VariantTitle title="SM">
           <Avatar size="sm" name="Jane Doe" />
         </VariantTitle>
       </Flex>
-      <Flex direction="column" space="md" align="center">
+      <Flex direction="column" spacing="md" align="center">
         <VariantTitle title="MD">
           <Avatar size="md" name="Jane Doe" />
         </VariantTitle>

package/src/components/Badge/Badge.stories.tsx

@@ -132,7 +132,7 @@ export const KitchenSink: Story = {
     const sizes: Array<BadgeProps['size']> = ['sm', 'md'];
 
     return (
-      <Flex direction="column" space="lg" style={{ width: '100%' }}>
+      <Flex direction="column" spacing="lg" style={{ width: '100%' }}>
         {colorSchemes.map(cs => {
           // Determine allowed variants per color scheme based on design constraints:
           // - Remove 'outline' for energy, broadband, mobile, insurance, cashback, pig, highlight
@@ -158,9 +158,9 @@ export const KitchenSink: Story = {
           return (
             <Box key={cs} gap="200">
               <VariantTitle title={cs.charAt(0).toUpperCase() + cs.slice(1)}>
-                <Flex direction="column" space="sm">
+                <Flex direction="column" spacing="sm">
                   {sizes.map(sz => (
-                    <Flex key={sz} direction="row" align="center" space="md">
+                    <Flex key={sz} direction="row" align="center" spacing="md">
                       {variantsForScheme.map(variant => (
                         <Badge
                           key={`${cs}-${sz}-${variant}`}

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

@@ -81,7 +81,7 @@ const MyComponent = () => (
 | variant              | `'subtle' \| 'emphasis'`                                                                           | Card visual style variant                                               | `'subtle'`     |
 | colorScheme          | `'pig' \| 'energy' \| 'broadband' \| 'mobile' \|` <br />`'insurance' \| 'cashback' \| 'highlight'` | Color scheme for buttons                                                | `'pig'`        |
 
-The component also accepts all standard Card props except `noPadding`, `space`, `gap`, `rowGap`, `columnGap`, `flexDirection`, `flexWrap`, `alignItems`, and `justifyContent`.
+The component also accepts all standard Card props except `noPadding`, `spacing`, `gap`, `rowGap`, `columnGap`, `flexDirection`, `flexWrap`, `alignItems`, and `justifyContent`.
 
 ### `BannerImage` & `BannerIllustration` Props
 

package/src/components/Banner/Banner.props.ts

@@ -3,21 +3,19 @@ import type CardProps from '../Card/Card.props';
 
 export type BannerDirection = 'horizontal' | 'vertical';
 
-export interface BannerProps
-  extends Omit<
-    CardProps,
-    | 'noPadding'
-    | 'variant'
-    | 'colorScheme'
-    | 'space'
-    | 'gap'
-    | 'rowGap'
-    | 'columnGap'
-    | 'flexDirection'
-    | 'flexWrap'
-    | 'alignItems'
-    | 'justifyContent'
-  > {
+export interface BannerProps extends Omit<
+  CardProps,
+  | 'noPadding'
+  | 'variant'
+  | 'space'
+  | 'gap'
+  | 'rowGap'
+  | 'columnGap'
+  | 'flexDirection'
+  | 'flexWrap'
+  | 'alignItems'
+  | 'justifyContent'
+> {
   /**
    * Icon component to display in the banner
    * Mutually exclusive with image
@@ -89,11 +87,6 @@ export interface BannerProps
    * @default 'subtle'
    */
   variant?: 'subtle' | 'emphasis';
-  /**
-   * Color scheme for the banner
-   * @default 'pig'
-   */
-  colorScheme?: 'pig' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'highlight';
 }
 
 export default BannerProps;

package/src/components/Banner/Banner.stories.tsx

@@ -3,6 +3,7 @@ import {
   BroadbandMediumIcon,
   CashbackCardMediumIcon,
   ElectricityMediumIcon,
+  HomeMediumIcon,
   InsuranceMediumIcon,
   MobileMediumIcon,
 } from '@utilitywarehouse/hearth-react-native-icons';
@@ -44,7 +45,17 @@ const meta = {
     colorScheme: {
       control: 'select',
       description: 'The color scheme for the banner',
-      options: ['pig', 'energy', 'broadband', 'mobile', 'insurance', 'cashback', 'highlight'],
+      options: [
+        'neutralStrong',
+        'neutralSubtle',
+        'brand',
+        'energy',
+        'broadband',
+        'mobile',
+        'insurance',
+        'cashback',
+        'pig',
+      ],
     },
     iconContainerVariant: {
       control: 'select',
@@ -76,7 +87,7 @@ const meta = {
     description: 'This is a banner component that can display an icon or image with content.',
     direction: 'horizontal',
     variant: 'subtle',
-    colorScheme: 'pig',
+    colorScheme: 'neutralStrong',
   },
 } satisfies Meta<typeof Banner>;
 
@@ -97,7 +108,7 @@ export const WithIcon: Story = {
   render: () => {
     return (
       <View style={{ width: 400 }}>
-        <Flex space="lg" direction="column">
+        <Flex spacing="lg" direction="column">
           <Banner
             icon={ElectricityMediumIcon}
             iconContainerColor="energy"
@@ -128,7 +139,7 @@ export const WithIllustration: Story = {
   render: () => {
     return (
       <View style={{ width: 400 }}>
-        <Flex space="lg" direction="column">
+        <Flex spacing="lg" direction="column">
           <Banner
             illustration={
               <BannerIllustration
@@ -172,7 +183,7 @@ export const WithImage: Story = {
   render: () => {
     return (
       <View style={{ width: 400 }}>
-        <Flex space="lg" direction="column">
+        <Flex spacing="lg" direction="column">
           <Banner
             image={
               <BannerImage
@@ -212,7 +223,7 @@ export const WithButton: Story = {
   render: () => {
     return (
       <View style={{ width: 400 }}>
-        <Flex space="lg" direction="column">
+        <Flex spacing="lg" direction="column">
           <Banner
             icon={InsuranceMediumIcon}
             iconContainerColor="insurance"
@@ -229,7 +240,7 @@ export const WithButton: Story = {
             iconContainerColor="cashback"
             heading="Cashback Rewards"
             description="Earn cashback on every purchase."
-            colorScheme="cashback"
+            colorScheme="neutralSubtle"
             button={
               <Button size="sm" onPress={() => console.log('Learn More pressed')}>
                 Learn More
@@ -246,7 +257,7 @@ export const WithLink: Story = {
   render: () => {
     return (
       <View style={{ width: 400 }}>
-        <Flex space="lg" direction="column">
+        <Flex spacing="lg" direction="column">
           <Banner
             icon={ElectricityMediumIcon}
             iconContainerColor="energy"
@@ -271,7 +282,7 @@ export const Pressable: Story = {
   render: () => {
     return (
       <View style={{ width: 400 }}>
-        <Flex space="lg" direction="column">
+        <Flex spacing="lg" direction="column">
           <Banner
             icon={ElectricityMediumIcon}
             iconContainerColor="energy"
@@ -304,7 +315,7 @@ export const WithClose: Story = {
   render: () => {
     return (
       <View style={{ width: 400 }}>
-        <Flex space="lg" direction="column">
+        <Flex spacing="lg" direction="column">
           <Banner
             icon={ElectricityMediumIcon}
             iconContainerColor="energy"
@@ -335,7 +346,7 @@ export const VerticalLayout: Story = {
   render: () => {
     return (
       <View style={{ width: 400 }}>
-        <Flex space="lg" direction="column">
+        <Flex spacing="lg" direction="column">
           <Banner
             icon={ElectricityMediumIcon}
             iconContainerColor="energy"
@@ -375,10 +386,62 @@ export const ColorSchemes: Story = {
   render: () => {
     return (
       <View style={{ width: 400 }}>
-        <Flex space="lg" direction="column">
+        <Flex spacing="lg" direction="column">
+          <Banner
+            icon={HomeMediumIcon}
+            iconContainerColor="highlight"
+            colorScheme="neutralStrong"
+            variant="subtle"
+            heading="Neutral Strong"
+            description="Banner with neutral strong color scheme and subtle variant."
+            button={
+              <Button size="sm" onPress={() => console.log('Action pressed')}>
+                Action
+              </Button>
+            }
+          />
+          <Banner
+            icon={HomeMediumIcon}
+            iconContainerColor="highlight"
+            colorScheme="neutralStrong"
+            variant="emphasis"
+            heading="Neutral Strong"
+            description="Banner with neutral strong color scheme and emphasis variant."
+            button={
+              <Button size="sm" onPress={() => console.log('Action pressed')}>
+                Action
+              </Button>
+            }
+          />
+          <Banner
+            icon={HomeMediumIcon}
+            iconContainerColor="highlight"
+            colorScheme="neutralSubtle"
+            heading="Neutral Subtle"
+            description="Banner with neutral subtle color scheme and subtle variant."
+            button={
+              <Button size="sm" onPress={() => console.log('Action pressed')}>
+                Action
+              </Button>
+            }
+          />
+          <Banner
+            icon={HomeMediumIcon}
+            iconContainerColor="highlight"
+            colorScheme="neutralSubtle"
+            variant="emphasis"
+            heading="Neutral Subtle"
+            description="Banner with neutral subtle color scheme and emphasis variant."
+            button={
+              <Button size="sm" onPress={() => console.log('Action pressed')}>
+                Action
+              </Button>
+            }
+          />
           <Banner
             icon={ElectricityMediumIcon}
             iconContainerColor="pig"
+            iconContainerVariant="emphasis"
             colorScheme="pig"
             heading="Pig Pink"
             description="Banner with pig color scheme."
@@ -391,6 +454,7 @@ export const ColorSchemes: Story = {
           <Banner
             icon={ElectricityMediumIcon}
             iconContainerColor="energy"
+            iconContainerVariant="emphasis"
             colorScheme="energy"
             heading="Energy Blue"
             description="Banner with energy color scheme."
@@ -403,6 +467,7 @@ export const ColorSchemes: Story = {
           <Banner
             icon={BroadbandMediumIcon}
             iconContainerColor="broadband"
+            iconContainerVariant="emphasis"
             colorScheme="broadband"
             heading="Broadband Green"
             description="Banner with broadband color scheme."
@@ -415,6 +480,7 @@ export const ColorSchemes: Story = {
           <Banner
             icon={MobileMediumIcon}
             iconContainerColor="mobile"
+            iconContainerVariant="emphasis"
             colorScheme="mobile"
             heading="Mobile Rose"
             description="Banner with mobile color scheme."
@@ -427,6 +493,7 @@ export const ColorSchemes: Story = {
           <Banner
             icon={InsuranceMediumIcon}
             iconContainerColor="insurance"
+            iconContainerVariant="emphasis"
             colorScheme="insurance"
             heading="Insurance Orange"
             description="Banner with insurance color scheme."
@@ -439,6 +506,7 @@ export const ColorSchemes: Story = {
           <Banner
             icon={CashbackCardMediumIcon}
             iconContainerColor="cashback"
+            iconContainerVariant="emphasis"
             colorScheme="cashback"
             heading="Cashback Lilac"
             description="Banner with cashback color scheme."
@@ -458,7 +526,7 @@ export const EmphasisVariant: Story = {
   render: () => {
     return (
       <View style={{ width: 400 }}>
-        <Flex space="lg" direction="column">
+        <Flex spacing="lg" direction="column">
           <Banner
             icon={ElectricityMediumIcon}
             iconContainerColor="energy"
@@ -497,12 +565,12 @@ export const ComplexExample: Story = {
   render: () => {
     return (
       <View style={{ width: 400 }}>
-        <Flex space="lg" direction="column">
+        <Flex spacing="lg" direction="column">
           <Banner
             icon={InsuranceMediumIcon}
             iconContainerColor="insurance"
             iconContainerVariant="emphasis"
-            colorScheme="insurance"
+            colorScheme="neutralStrong"
             heading="Home Insurance Alert"
             description="Your policy renewal is coming up. Review your coverage and make any necessary changes."
             button={

package/src/components/Banner/Banner.tsx

@@ -25,8 +25,6 @@ const Banner = ({
   onPress,
   onClose,
   variant = 'subtle',
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  colorScheme: _,
   style,
   ...props
 }: BannerProps) => {
@@ -66,7 +64,11 @@ const Banner = ({
       return <View style={styles.action}>{link}</View>;
     }
     if (button) {
-      return <View style={styles.action}>{button}</View>;
+      return (
+        <View style={[styles.action, styles.buttonWrap]}>
+          <View style={styles.buttonInner}>{button}</View>
+        </View>
+      );
     }
     return null;
   };
@@ -256,6 +258,28 @@ const styles = StyleSheet.create(theme => ({
   action: {
     alignSelf: 'flex-start',
   },
+  buttonWrap: {
+    variants: {
+      direction: {
+        horizontal: {},
+        vertical: {
+          flexDirection: 'row',
+          justifyContent: 'center',
+          alignItems: 'stretch',
+        },
+      },
+    },
+  },
+  buttonInner: {
+    variants: {
+      direction: {
+        horizontal: {},
+        vertical: {
+          flex: 1,
+        },
+      },
+    },
+  },
   chevron: {
     alignSelf: 'center',
   },

package/src/components/Box/Box.props.ts

@@ -6,6 +6,7 @@ import type {
   ColorValue,
   OpacityValue,
   SpaceValue,
+  SpacingValues,
 } from '../../types';
 
 export type OmittedStyles = Omit<
@@ -223,12 +224,18 @@ export interface ThemedBoxViewStyleProps {
   borderWidth?: BordeWidthValue;
 }
 
+interface CustomBoxProps {
+  // Custom props
+  as?: React.ElementType;
+  spacing?: SpacingValues;
+}
+
 export interface BoxProps
-  extends BoxStyleMappingValues,
+  extends
+    BoxStyleMappingValues,
     ThemedBoxViewStyleProps,
     OtherBoxViewStyles,
-    ViewProps {
-  as?: React.ElementType;
-}
+    ViewProps,
+    CustomBoxProps {}
 
 export default BoxProps;

package/src/components/Button/Button.docs.mdx

@@ -164,12 +164,12 @@ const MyComponent = () => {
 
 | Property        | Type                                                     | Description                                                    | Default |
 | --------------- | -------------------------------------------------------- | -------------------------------------------------------------- | ------- |
-| `flexDirection` | `'row' \| 'column' \| 'row-reverse' \| 'column-reverse'` | Set the direction of Button group to vertical or horizontal    | 'row'   |
+| `flexDirection` | `'row' \| 'column' \| 'row-reverse' \| 'column-reverse'` | Set the direction of Button group to vertical or horizontal    | `'row'` |
 | `disabled`      | `boolean`                                                | When true, this will disable all the buttons in a ButtonGroup. | `false` |
 | `loading`       | `boolean`                                                | When true, this will show a loading spinner in all buttons.    | `false` |
 | `attached`      | `boolean`                                                | When attached, all buttons will be attached to each other.     | `false` |
 | `reversed`      | `boolean`                                                | To reverse the order of components.                            | `false` |
-| `space`         | `string`                                                 | It sets the space between different buttons.                   | 'md'    |
+| `spacing`       | `string`                                                 | It sets the space between different buttons.                   | `'md'`  |
 
 ### `ButtonIcon`