@utilitywarehouse/hearth-react-native 0.18.0 → 0.19.1

package/.storybook/preview.tsx

@@ -68,6 +68,7 @@ const preview = {
         order: [
           'Introduction',
           'Getting Started',
+          'Changelog',
           'Styling',
           'Theme Tokens',
           'Hooks',

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @utilitywarehouse/hearth-react-native@0.18.0 build /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.19.1 build /home/runner/work/hearth/hearth/packages/react-native
 > tsc
 

package/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
-> @utilitywarehouse/hearth-react-native@0.18.0 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.19.1 lint /home/runner/work/hearth/hearth/packages/react-native
 > TIMING=1 eslint .
 
 
@@ -31,11 +31,11 @@
   78:8  warning  React Hook useEffect has a missing dependency: 'formFieldContext'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
 
 /home/runner/work/hearth/hearth/packages/react-native/src/components/Modal/Modal.tsx
-   72:6  warning  React Hook useCallback has an unnecessary dependency: 'Platform.OS'. Either exclude it or remove the dependency array. Outer scope values like 'Platform.OS' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
-  268:5  warning  React Hook useCallback has a missing dependency: 'footer'. Either include it or remove the dependency array                                                                                                                                   react-hooks/exhaustive-deps
+   73:6  warning  React Hook useCallback has an unnecessary dependency: 'Platform.OS'. Either exclude it or remove the dependency array. Outer scope values like 'Platform.OS' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
+  269:5  warning  React Hook useCallback has a missing dependency: 'footer'. Either include it or remove the dependency array                                                                                                                                   react-hooks/exhaustive-deps
 
 /home/runner/work/hearth/hearth/packages/react-native/src/components/Modal/Modal.web.tsx
-  65:6  warning  React Hook useCallback has an unnecessary dependency: 'Platform.OS'. Either exclude it or remove the dependency array. Outer scope values like 'Platform.OS' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
+  66:6  warning  React Hook useCallback has an unnecessary dependency: 'Platform.OS'. Either exclude it or remove the dependency array. Outer scope values like 'Platform.OS' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
 
 /home/runner/work/hearth/hearth/packages/react-native/src/components/PillGroup/PillGroup.tsx
   17:9  warning  The 'normalizedValue' conditional could make the dependencies of useMemo Hook (at line 33) change on every render. Move it inside the useMemo callback. Alternatively, wrap the initialization of 'normalizedValue' in its own useMemo() Hook  react-hooks/exhaustive-deps
@@ -50,20 +50,23 @@
   45:6  warning  React Hook useEffect has a missing dependency: 'formFieldContext'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
 
 /home/runner/work/hearth/hearth/packages/react-native/src/components/Toast/Toast.context.tsx
-   9:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components
-  94:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components
-
-✖ 24 problems (0 errors, 24 warnings)
-
-Rule                              | Time (ms) | Relative
-:---------------------------------|----------:|--------:
-@typescript-eslint/no-unused-vars |  1538.884 |    63.7%
-no-global-assign                  |    88.035 |     3.6%
-react-hooks/exhaustive-deps       |    86.501 |     3.6%
-react-hooks/rules-of-hooks        |    67.331 |     2.8%
-no-misleading-character-class     |    48.025 |     2.0%
-no-unexpected-multiline           |    45.795 |     1.9%
-no-loss-of-precision              |    34.916 |     1.4%
-@typescript-eslint/ban-ts-comment |    33.872 |     1.4%
-no-regex-spaces                   |    31.659 |     1.3%
-no-fallthrough                    |    31.350 |     1.3%
+   14:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components
+  106:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components
+
+/home/runner/work/hearth/hearth/packages/react-native/src/components/VerificationInput/VerificationInput.tsx
+  58:7  warning  React Hook useImperativeHandle has a missing dependency: 'inputRefs'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
+
+✖ 25 problems (0 errors, 25 warnings)
+
+Rule                                              | Time (ms) | Relative
+:-------------------------------------------------|----------:|--------:
+@typescript-eslint/no-unused-vars                 |  1514.844 |    61.6%
+no-global-assign                                  |    96.121 |     3.9%
+react-hooks/rules-of-hooks                        |    93.488 |     3.8%
+react-hooks/exhaustive-deps                       |    87.951 |     3.6%
+no-unexpected-multiline                           |    50.126 |     2.0%
+@typescript-eslint/triple-slash-reference         |    46.928 |     1.9%
+@typescript-eslint/ban-ts-comment                 |    41.120 |     1.7%
+no-misleading-character-class                     |    40.149 |     1.6%
+@typescript-eslint/no-unnecessary-type-constraint |    31.744 |     1.3%
+no-loss-of-precision                              |    31.510 |     1.3%

package/CHANGELOG.md

@@ -1,5 +1,133 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.19.1
+
+### Patch Changes
+
+- [#886](https://github.com/utilitywarehouse/hearth/pull/886) [`7a948de`](https://github.com/utilitywarehouse/hearth/commit/7a948dea0d15ce7ca34e4d405e86984213c96196) Thanks [@jordmccord](https://github.com/jordmccord)! - 💅 [ENHANCEMENT]: Add `loadingHeading` prop to `Modal` component
+
+  The `Modal` component now supports a `loadingHeading` prop to customize the heading text displayed during loading states. If not provided, it defaults to 'Loading...'.
+
+  **Components affected**:
+  - `Modal`
+
+  **Developer changes**:
+
+  No changes required. To customize the loading heading text, use the new `loadingHeading` prop:
+
+  ```tsx
+  <Modal
+    loading={isLoading}
+    loadingHeading="Processing your request..."
+    heading="Confirm Action"
+    description="Please wait while we process your request"
+  />
+  ```
+
+- [#888](https://github.com/utilitywarehouse/hearth/pull/888) [`9b3e172`](https://github.com/utilitywarehouse/hearth/commit/9b3e172f9964026f4f3ba140731432ac63550256) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Align `Toast` icon and dismiss button to the top
+
+## 0.19.0
+
+### Minor Changes
+
+- [#882](https://github.com/utilitywarehouse/hearth/pull/882) [`7e5338c`](https://github.com/utilitywarehouse/hearth/commit/7e5338c75bf051897a5384fe4ce0f65533b7e1a7) Thanks [@jordmccord](https://github.com/jordmccord)! - 💅 [ENHANCEMENT]: Add `safeAreaPadding` option to `ToastProvider`
+
+  `ToastProvider` now supports an optional `safeAreaPadding` prop to control whether toasts respect safe-area inset padding. This can be useful when you want to disable additional safe-area inset space while keeping the base toast padding.
+
+  **Components affected**:
+  - `ToastProvider`
+
+  **Developer changes**:
+
+  No changes required. To disable safe-area inset padding (while preserving the base bottom padding), set `safeAreaPadding` to `false`:
+
+  ```tsx
+  <ToastProvider safeAreaPadding={false}>{children}</ToastProvider>
+  ```
+
+- [`da893ff`](https://github.com/utilitywarehouse/hearth/commit/da893ff8a9d576a6ca69021737056c7289f8c6aa) Thanks [@jordmccord](https://github.com/jordmccord)! - 💅 [ENHANCEMENT]: Unify spacing prop naming across layout components
+
+  The `space` prop has been renamed to `spacing` across all layout components for improved consistency and clarity. The `space` prop is now deprecated but will continue to work alongside the new `spacing` prop to maintain backward compatibility.
+
+  **Components affected**:
+  - `Box`
+  - `ButtonGroup`
+  - `Card`
+  - `Container`
+  - `Divider`
+  - `Flex`
+  - `Grid`
+
+  **Developer changes**:
+
+  No immediate changes are required. The `space` prop will continue to work as before. However, we recommend migrating to the `spacing` prop at your convenience:
+
+  ```diff
+  - <Flex space="md">
+  + <Flex spacing="md">
+      <Box>...</Box>
+      <Box>...</Box>
+    </Flex>
+  ```
+
+  ```diff
+  - <Grid columns={2} space="lg">
+  + <Grid columns={2} spacing="lg">
+      <Box>...</Box>
+      <Box>...</Box>
+    </Grid>
+  ```
+
+  ```diff
+  - <Container space="xl">
+  + <Container spacing="xl">
+      <Box>...</Box>
+    </Container>
+  ```
+
+  The deprecated `space` prop will be removed in a future major version release.
+
+- [#877](https://github.com/utilitywarehouse/hearth/pull/877) [`2cdf3a2`](https://github.com/utilitywarehouse/hearth/commit/2cdf3a2f4251b24f34c260f3f5da39f8c330fff5) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add `autoFocus` prop to `VerificationInput`
+
+  `VerificationInput` now supports an `autoFocus` prop to control whether the first slot should focus on mount.
+  Default is `false` to avoid unexpected focus when the component is used.
+
+  **Developer changes**:
+
+  ```tsx
+  <VerificationInput autoFocus={false} />
+  ```
+
+- [#877](https://github.com/utilitywarehouse/hearth/pull/877) [`2cdf3a2`](https://github.com/utilitywarehouse/hearth/commit/2cdf3a2f4251b24f34c260f3f5da39f8c330fff5) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add `VerificationInput` ref methods and improve rapid input handling
+
+  `VerificationInput` now forwards a ref with `focus`, `blur`, `clear`, and `focusIndex` helpers. Input updates also use the latest value to avoid dropped digits when typing quickly.
+
+  **Developer changes**:
+
+  If you want to control focus programmatically, pass a ref:
+
+  ```tsx
+  import { useRef } from 'react';
+  import {
+    VerificationInput,
+    type VerificationInputHandle,
+  } from '@utilitywarehouse/hearth-react-native';
+
+  const inputRef = useRef<VerificationInputHandle>(null);
+
+  <VerificationInput ref={inputRef} onChangeText={setCode} />;
+  ```
+
+### Patch Changes
+
+- [#880](https://github.com/utilitywarehouse/hearth/pull/880) [`a52bb03`](https://github.com/utilitywarehouse/hearth/commit/a52bb03352dd8b83c9cfd3311aaa390e96e75662) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Remove the unsupported `colorScheme` prop from `Banner` types so the API matches the `Card` component.
+
+- [#879](https://github.com/utilitywarehouse/hearth/pull/879) [`383b686`](https://github.com/utilitywarehouse/hearth/commit/383b6860c1b68da139f10a67cd001dd884143df0) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Make `Banner` button full width in vertical layout
+
+- [#878](https://github.com/utilitywarehouse/hearth/pull/878) [`b31b8c3`](https://github.com/utilitywarehouse/hearth/commit/b31b8c3d37d4d1ec3df2f187ec18d00b3e663b49) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Fix `Modal` bottom padding
+
+- [#881](https://github.com/utilitywarehouse/hearth/pull/881) [`5681b8f`](https://github.com/utilitywarehouse/hearth/commit/5681b8fd4bcc73ad532229018049f959f06f77ec) Thanks [@jordmccord](https://github.com/jordmccord)! - 📦 [DEPS]: Bump `@utilitywarehouse/hearth-react-native-icons` peerDependency to 0.8.0
+
 ## 0.18.0
 
 ### Minor Changes

package/build/components/Banner/Banner.d.ts

@@ -1,6 +1,6 @@
 import type BannerProps from './Banner.props';
 declare const Banner: {
-    ({ icon, iconContainerVariant, iconContainerSize, iconContainerColor, illustration, image, heading, description, direction, link, button, onPress, onClose, variant, colorScheme: _, style, ...props }: BannerProps): import("react/jsx-runtime").JSX.Element;
+    ({ icon, iconContainerVariant, iconContainerSize, iconContainerColor, illustration, image, heading, description, direction, link, button, onPress, onClose, variant, style, ...props }: BannerProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Banner;

package/build/components/Banner/Banner.js

@@ -9,9 +9,7 @@ import { Heading } from '../Heading';
 import { IconContainer } from '../IconContainer';
 import { UnstyledIconButton } from '../UnstyledIconButton';
 import BannerContext from './Banner.context';
-const Banner = ({ icon, iconContainerVariant = 'subtle', iconContainerSize = 'md', iconContainerColor = 'pig', illustration, image, heading, description, direction = 'horizontal', link, button, onPress, onClose, variant = 'subtle', 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-colorScheme: _, style, ...props }) => {
+const Banner = ({ icon, iconContainerVariant = 'subtle', iconContainerSize = 'md', iconContainerColor = 'pig', illustration, image, heading, description, direction = 'horizontal', link, button, onPress, onClose, variant = 'subtle', style, ...props }) => {
     const hasIllustration = Boolean(illustration);
     styles.useVariants({ direction, hasIllustration });
     const context = useMemo(() => ({
@@ -34,7 +32,7 @@ colorScheme: _, style, ...props }) => {
             return _jsx(View, { style: styles.action, children: link });
         }
         if (button) {
-            return _jsx(View, { style: styles.action, children: button });
+            return (_jsx(View, { style: [styles.action, styles.buttonWrap], children: _jsx(View, { style: styles.buttonInner, children: button }) }));
         }
         return null;
     };
@@ -152,6 +150,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/build/components/Banner/Banner.props.d.ts

@@ -1,7 +1,7 @@
 import type { ComponentType, ReactElement, ReactNode } from 'react';
 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
@@ -66,10 +66,5 @@ export interface BannerProps extends Omit<CardProps, 'noPadding' | 'variant' | '
      * @default 'subtle'
      */
     variant?: 'subtle' | 'emphasis';
-    /**
-     * Color scheme for the banner
-     * @default 'pig'
-     */
-    colorScheme?: 'pig' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'highlight';
 }
 export default BannerProps;

package/build/components/Box/Box.props.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ViewProps, ViewStyle } from 'react-native';
-import type { BorderRadiusValue, BordeWidthValue, ColorValue, OpacityValue, SpaceValue } from '../../types';
+import type { BorderRadiusValue, BordeWidthValue, ColorValue, OpacityValue, SpaceValue, SpacingValues } from '../../types';
 export type OmittedStyles = Omit<ViewStyle, 'backgroundColor' | 'borderBlockColor' | 'borderBlockEndColor' | 'borderBlockStartColor' | 'borderBottomColor' | 'borderBottomEndRadius' | 'borderBottomLeftRadius' | 'borderBottomRightRadius' | 'borderBottomStartRadius' | 'borderBottomWidth' | 'borderColor' | 'borderEndColor' | 'borderEndEndRadius' | 'borderEndStartRadius' | 'borderEndWidth' | 'borderLeftColor' | 'borderLeftWidth' | 'borderRadius' | 'borderRightColor' | 'borderRightWidth' | 'borderStartColor' | 'borderStartEndRadius' | 'borderStartStartRadius' | 'borderStartWidth' | 'borderTopColor' | 'borderTopEndRadius' | 'borderTopLeftRadius' | 'borderTopRightRadius' | 'borderTopStartRadius' | 'borderTopWidth' | 'borderWidth' | 'bottom' | 'columnGap' | 'end' | 'gap' | 'height' | 'left' | 'margin' | 'marginBottom' | 'marginEnd' | 'marginHorizontal' | 'marginLeft' | 'marginRight' | 'marginStart' | 'marginTop' | 'marginVertical' | 'maxHeight' | 'maxWidth' | 'minHeight' | 'minWidth' | 'opacity' | 'outlineColor' | 'padding' | 'paddingBottom' | 'paddingEnd' | 'paddingHorizontal' | 'paddingLeft' | 'paddingRight' | 'paddingStart' | 'paddingTop' | 'paddingVertical' | 'right' | 'rowGap' | 'shadowColor' | 'start' | 'top' | 'width' | 'rotation' | 'scaleX' | 'scaleY' | 'transformMatrix' | 'translateX' | 'translateY'>;
 export type OtherBoxViewStyles = Pick<OmittedStyles, 'alignContent' | 'alignItems' | 'alignSelf' | 'aspectRatio' | 'backfaceVisibility' | 'borderCurve' | 'borderStyle' | 'cursor' | 'direction' | 'display' | 'elevation' | 'flex' | 'flexBasis' | 'flexDirection' | 'flexGrow' | 'flexShrink' | 'flexWrap' | 'justifyContent' | 'boxShadow' | 'outlineOffset' | 'outlineStyle' | 'outlineWidth' | 'overflow' | 'pointerEvents' | 'position' | 'shadowOffset' | 'shadowOpacity' | 'shadowRadius' | 'transform' | 'transformOrigin' | 'zIndex'>;
 export interface BoxStyleMappingValues {
@@ -93,7 +93,10 @@ export interface ThemedBoxViewStyleProps {
     borderTopWidth?: BordeWidthValue;
     borderWidth?: BordeWidthValue;
 }
-export interface BoxProps extends BoxStyleMappingValues, ThemedBoxViewStyleProps, OtherBoxViewStyles, ViewProps {
+interface CustomBoxProps {
     as?: React.ElementType;
+    spacing?: SpacingValues;
+}
+export interface BoxProps extends BoxStyleMappingValues, ThemedBoxViewStyleProps, OtherBoxViewStyles, ViewProps, CustomBoxProps {
 }
 export default BoxProps;

package/build/components/Button/Button.d.ts

@@ -7,11 +7,13 @@ export declare const ButtonGroupComponent: import("react").ForwardRefExoticCompo
     reversed?: boolean;
     attached?: boolean;
     space?: import("../../types").SpacingValues;
+    spacing?: import("../../types").SpacingValues;
 }> & import("react-native").ViewProps & {
     flexDirection?: import("react-native").ViewStyle["flexDirection"];
     reversed?: boolean;
     attached?: boolean;
     space?: import("../../types").SpacingValues;
+    spacing?: import("../../types").SpacingValues;
 } & import("@gluestack-ui/button/lib/typescript/types").IButtonGroupProps>;
 declare const Button: {
     ({ children, disabled, pressed, text, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/build/components/Button/ButtonGroupRoot.d.ts

@@ -1,11 +1,15 @@
 import { type ViewProps, type ViewStyle } from 'react-native';
 import { SpacingValues } from '../../types';
 declare const ButtonGroupRoot: {
-    ({ children, attached, flexDirection, reversed, space, ...props }: ViewProps & {
+    ({ children, attached, flexDirection, reversed, spacing, space, ...props }: ViewProps & {
         flexDirection?: ViewStyle["flexDirection"];
         reversed?: boolean;
         attached?: boolean;
+        /**
+         * @deprecated Use `spacing` instead. The `space` prop will be removed in a future release
+         */
         space?: SpacingValues;
+        spacing?: SpacingValues;
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/build/components/Button/ButtonGroupRoot.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-const ButtonGroupRoot = ({ children, attached = false, flexDirection = 'row', reversed = false, space = 'md', ...props }) => {
+const ButtonGroupRoot = ({ children, attached = false, flexDirection = 'row', reversed = false, spacing = 'md', space, ...props }) => {
     let direction = flexDirection;
     if (reversed) {
         if (flexDirection === 'row')
@@ -15,7 +15,7 @@ const ButtonGroupRoot = ({ children, attached = false, flexDirection = 'row', re
     }
     styles.useVariants({
         attached,
-        space,
+        spacing: space ?? spacing,
     });
     return (_jsx(View, { ...props, style: [styles.text, styles.extraStyles(direction), props.style], children: children }));
 };
@@ -23,7 +23,7 @@ ButtonGroupRoot.displayName = 'ButtonGroupRoot';
 const styles = StyleSheet.create(theme => ({
     text: {
         variants: {
-            space: {
+            spacing: {
                 none: {
                     gap: theme.layout.mobile.spacing.none,
                 },

package/build/components/Card/Card.context.d.ts

@@ -5,7 +5,7 @@ interface CardContextProps {
     hasActions?: boolean;
     hasContent?: boolean;
     hasOnlyActions?: boolean;
-    space?: CardProps['space'];
+    spacing?: CardProps['spacing'];
     variant?: CardProps['variant'];
 }
 export declare const CardContext: import("react").Context<CardContextProps>;

package/build/components/Card/Card.props.d.ts

@@ -6,6 +6,8 @@ interface CardProps extends PressableProps {
     shadowColor?: 'functional' | 'brand' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | '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/build/components/Card/CardContent.js

@@ -3,10 +3,10 @@ import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { useCardContext } from './Card.context';
 const CardContent = ({ children, style, ...props }) => {
-    const { noPadding, space } = useCardContext();
+    const { noPadding, spacing } = useCardContext();
     styles.useVariants({
         noPadding,
-        space,
+        spacing,
     });
     return (_jsx(View, { style: [styles.container, style], ...props, children: children }));
 };
@@ -14,7 +14,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/build/components/Card/CardRoot.d.ts

@@ -1,6 +1,6 @@
 import CardProps from './Card.props';
 declare const Card: {
-    ({ children, variant, colorScheme, shadowColor, noPadding, style, states, space, disabled, onPress, ...rest }: CardProps & {
+    ({ children, variant, colorScheme, shadowColor, noPadding, style, states, spacing, space, disabled, onPress, ...rest }: CardProps & {
         states?: {
             active?: boolean;
             disabled?: boolean;

package/build/components/Card/CardRoot.js

@@ -7,7 +7,7 @@ import { CardContext } from './Card.context';
 import CardActions from './CardActions';
 import CardContent from './CardContent';
 import { checkForComponentType, collectChildActionHandlers, extractCardActions, filterChildren, hasOnlyPotentialActions, } from './helpers';
-const Card = ({ children, variant = 'subtle', colorScheme = 'neutralStrong', shadowColor, noPadding = false, style, states, space, disabled = false, onPress, ...rest }) => {
+const Card = ({ children, variant = 'subtle', colorScheme = 'neutralStrong', shadowColor, noPadding = false, style, states, spacing, space, disabled = false, onPress, ...rest }) => {
     const { active } = states || { active: false };
     const childActionHandlers = collectChildActionHandlers(children);
     const hasActions = checkForComponentType(children, CardActions);
@@ -31,9 +31,19 @@ const Card = ({ children, variant = 'subtle', colorScheme = 'neutralStrong', sha
         hasActions,
         hasContent,
         hasOnlyActions,
+        spacing: space ?? spacing,
+        variant,
+    }), [
+        showPressed,
+        active,
+        hasActions,
+        hasContent,
+        hasOnlyActions,
+        noPadding,
         space,
+        spacing,
         variant,
-    }), [showPressed, active, hasActions, hasContent, hasOnlyActions, noPadding, space, variant]);
+    ]);
     styles.useVariants({
         variant,
         colorScheme,
@@ -41,7 +51,7 @@ const Card = ({ children, variant = 'subtle', colorScheme = 'neutralStrong', sha
         active,
         showPressed,
         disabled,
-        space: hasActions || hasContent || hasOnlyActions ? 'none' : space,
+        spacing: hasActions || hasContent || hasOnlyActions ? 'none' : spacing,
         shadowColor,
     });
     const renderChildren = () => {
@@ -63,7 +73,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/build/components/Checkbox/CheckboxGroupTextContent.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Flex } from '../Flex';
 const CheckboxGroupTextContent = ({ children, ...props }) => {
-    return (_jsx(Flex, { direction: "column", space: "none", ...props, children: children }));
+    return (_jsx(Flex, { direction: "column", spacing: "none", ...props, children: children }));
 };
 CheckboxGroupTextContent.displayName = 'CheckboxGroupTextContent';
 export default CheckboxGroupTextContent;

package/build/components/Checkbox/CheckboxTextContent.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { StyleSheet } from 'react-native-unistyles';
 import { Flex } from '../Flex';
 const CheckboxTextContent = ({ children, style, ...props }) => {
-    return (_jsx(Flex, { style: [styles.content, style], direction: "column", space: "none", ...props, children: children }));
+    return (_jsx(Flex, { style: [styles.content, style], direction: "column", spacing: "none", ...props, children: children }));
 };
 const styles = StyleSheet.create({
     content: {

package/build/components/Container/Container.d.ts

@@ -1,6 +1,6 @@
 import type ContainerProps from './Container.props';
 declare const Container: {
-    ({ style, children, space, ...props }: ContainerProps): import("react/jsx-runtime").JSX.Element;
+    ({ style, children, spacing, space, ...props }: ContainerProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Container;

package/build/components/Container/Container.js

@@ -2,9 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { useStyleProps } from '../../hooks';
-const Container = ({ style, children, space = 'md', ...props }) => {
+const Container = ({ style, children, spacing = 'md', space, ...props }) => {
     const { computedStyles, remainingProps } = useStyleProps(props);
-    styles.useVariants({ space });
+    styles.useVariants({ spacing: space ?? spacing });
     return (_jsx(View, { style: [styles.container(computedStyles), style], ...remainingProps, children: children }));
 };
 Container.displayName = 'Container';
@@ -33,7 +33,7 @@ const styles = StyleSheet.create(theme => ({
             : undefined,
         ...extra,
         variants: {
-            space: theme.globalStyle.variants.space,
+            spacing: theme.globalStyle.variants.spacing,
         },
     }),
 }));

package/build/components/Container/Container.props.d.ts

@@ -71,8 +71,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/build/components/Divider/Divider.d.ts

@@ -1,6 +1,6 @@
 import type DividerProps from './Divider.props';
 declare const Divider: {
-    ({ orientation, color, space, height, width, flexItem, ...props }: DividerProps): import("react/jsx-runtime").JSX.Element;
+    ({ orientation, color, spacing, space, height, width, flexItem, ...props }: DividerProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Divider;