@utilitywarehouse/hearth-react-native 0.19.1 → 0.21.0

package/.storybook/manager.ts

@@ -1,5 +1,6 @@
 import '@utilitywarehouse/hearth-fonts';
 import { addons } from 'storybook/manager-api';
+import '@utilitywarehouse/hearth-tokens/index.css';
 import '../../../shared/storybook/styles/manager.css';
 import theme from '../../../shared/storybook/theme';
 

package/.storybook/preview.tsx

@@ -1,5 +1,6 @@
 import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
 import '@utilitywarehouse/hearth-fonts';
+import '@utilitywarehouse/hearth-tokens/index.css';
 import { color } from '@utilitywarehouse/hearth-tokens';
 import { useEffect } from 'react';
 import '../../../shared/storybook/styles/diff-highlighting.css';

package/.turbo/turbo-build.log

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

package/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
-> @utilitywarehouse/hearth-react-native@0.19.1 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.21.0 lint /home/runner/work/hearth/hearth/packages/react-native
 > TIMING=1 eslint .
 
 
@@ -58,15 +58,15 @@
 
 ✖ 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%
+Rule                              | Time (ms) | Relative
+:---------------------------------|----------:|--------:
+@typescript-eslint/no-unused-vars |  1327.577 |    60.2%
+react-hooks/exhaustive-deps       |    77.842 |     3.5%
+no-global-assign                  |    77.325 |     3.5%
+react-hooks/rules-of-hooks        |    64.813 |     2.9%
+no-misleading-character-class     |    44.059 |     2.0%
+no-loss-of-precision              |    40.431 |     1.8%
+no-unexpected-multiline           |    40.191 |     1.8%
+@typescript-eslint/ban-ts-comment |    32.434 |     1.5%
+no-useless-escape                 |    27.764 |     1.3%
+no-fallthrough                    |    27.614 |     1.3%

package/CHANGELOG.md

@@ -1,19 +1,314 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.21.0
+
+### Minor Changes
+
+- [#917](https://github.com/utilitywarehouse/hearth/pull/917) [`6a016dc`](https://github.com/utilitywarehouse/hearth/commit/6a016dca0d1a06e40a877da15aced590d0c68112) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add 2xl size variant to Heading component
+
+  The `Heading` component now supports a `2xl` size option, providing a larger heading size for prominent page titles and hero sections. This size is responsive across device sizes with appropriate font sizes and line heights for mobile, tablet, and desktop viewports.
+
+  **Components affected**:
+  - `Heading`
+
+  **Developer changes**:
+
+  Use the new `2xl` size prop:
+
+  ```tsx
+  <Heading size="2xl">Welcome to Hearth</Heading>
+  ```
+
+  The `2xl` size will render with:
+  - Mobile: 44px font size, 52px line height
+  - Tablet: 44px font size, 52px line height
+  - Desktop: 54px font size, 62px line height
+
+- [#949](https://github.com/utilitywarehouse/hearth/pull/949) [`e1aacf0`](https://github.com/utilitywarehouse/hearth/commit/e1aacf06a58fd8358e9e7546ec35d8194a0d8d74) Thanks [@MichalCiesliczka](https://github.com/MichalCiesliczka)! - 🌟 [FEATURE]: Add segment refs to `DateInput` for programmatic focus control
+
+  The `DateInput` component now supports direct refs for each segment input via `dayRef`, `monthRef`, and `yearRef`.
+  This makes it easier to move focus between segments from custom flows (for example, advancing focus after validation or from custom buttons).
+
+  Documentation and Storybook examples are also updated to show how to use segment refs in real usage.
+
+  **Components affected**:
+  - `DateInput`
+
+  **Developer changes**:
+
+  You can now pass refs to each segment and call `.focus()` when needed:
+
+  ```tsx
+  import { useRef, useState } from 'react';
+  import { TextInput } from 'react-native';
+  import { Button, DateInput } from '@utilitywarehouse/hearth-react-native';
+
+  const DateWithSegmentFocus = () => {
+    const [day, setDay] = useState('');
+    const [month, setMonth] = useState('');
+    const [year, setYear] = useState('');
+
+    const dayRef = useRef<TextInput>(null);
+    const monthRef = useRef<TextInput>(null);
+    const yearRef = useRef<TextInput>(null);
+
+    return (
+      <>
+        <DateInput
+          label="Date of birth"
+          dayValue={day}
+          monthValue={month}
+          yearValue={year}
+          onDayChange={setDay}
+          onMonthChange={setMonth}
+          onYearChange={setYear}
+          dayRef={dayRef}
+          monthRef={monthRef}
+          yearRef={yearRef}
+        />
+
+        <Button onPress={() => monthRef.current?.focus()}>Focus month</Button>
+      </>
+    );
+  };
+  ```
+
+  This is a non-breaking enhancement, so existing `DateInput` usage continues to work without any changes.
+
+- [#918](https://github.com/utilitywarehouse/hearth/pull/918) [`2db4dbe`](https://github.com/utilitywarehouse/hearth/commit/2db4dbe273583239b148c4399af829df596a00c1) Thanks [@jordmccord](https://github.com/jordmccord)! - 💔 [BREAKING CHANGE]: Simplify semantic token naming and introduce utility prop types
+
+  This release simplifies the semantic token naming convention and introduces a new utility prop system to make the API more intuitive and consistent across components.
+
+  **Components affected**:
+  - `Box`
+  - `Container`
+  - `Card`
+  - `Flex`
+  - `Grid`
+  - `Center`
+  - `BodyText`
+  - `Heading`
+  - `DetailText`
+  - `Carousel`
+  - `CarouselItem`
+
+  **Developer changes**:
+
+  ### Background Colors
+
+  Background color props now accept simplified semantic tokens. Update your code as follows:
+
+  ```diff
+  - <Box backgroundColor="backgroundPrimary">
+  + <Box backgroundColor="primary">
+
+  - <Box backgroundColor="backgroundSecondary">
+  + <Box backgroundColor="secondary">
+
+  - <Box backgroundColor="backgroundBrand">
+  + <Box backgroundColor="brand">
+
+  - <Container bg="backgroundPrimary">
+  + <Container bg="primary">
+  ```
+
+  You can still use full color tokens (e.g., `backgroundColor={color.blue[400]}`) by using a `StyleSheet`, the `useTheme` hook, or directly importing from the tokens library:
+
+  ```tsx
+  import { StyleSheet } from 'react-native';
+
+  const styles = StyleSheet.create(theme => ({
+    customBackground: {
+      backgroundColor: theme.color.blue[400],
+    },
+  }));
+
+  <Box style={styles.customBackground} />;
+  ```
+
+  ```tsx
+  import { useTheme } from '@utilitywarehouse/hearth-react-native';
+
+  const theme = useTheme();
+
+  <Box backgroundColor={theme.color.purple[800]} />;
+  ```
+
+  ```tsx
+  import { color } from '@utilitywarehouse/hearth-tokens';
+
+  <Box backgroundColor={color.blue[400]} />;
+  ```
+
+  ### Text Colors
+
+  Text color props now accept simplified semantic tokens:
+
+  ```diff
+  - <BodyText color="white">Text</BodyText>
+  + <BodyText color="inverted">Text</BodyText>
+
+  - <BodyText color="grey1000">Text</BodyText>
+  + <BodyText color="primary">Text</BodyText>
+
+  - <Heading color="textSecondary">Heading</Heading>
+  + <Heading color="secondary">Heading</Heading>
+  ```
+
+  ### Border Colors
+
+  Border color props now accept simplified semantic tokens:
+
+  ```diff
+  - <Box borderColor="grey800">
+  + <Box borderColor="strong">
+
+  - <Box borderColor="borderSubtle">
+  + <Box borderColor="subtle">
+  ```
+
+  ### Utility Props
+
+  Components now support consistent utility props through shared type interfaces. The following components have been updated to support additional utility props:
+  - **Container**: Added `MarginProps`, `PaddingProps`, `GapProps`, and `BackgroundColorProps`
+  - **Card**: Added `MarginProps` and `GapProps`
+  - **Flex**: Now properly supports `MarginProps`, `PaddingProps`, and `GapProps`
+  - **Text components** (BodyText, Heading, DetailText): Now support `MarginProps`
+
+  This means you can now use margin utilities directly on these components:
+
+  ```tsx
+  <BodyText mt="200" mb="100">Text with margin utilities</BodyText>
+  <Container mx="300" py="200">Container with spacing utilities</Container>
+  <Card mt="200" gap="100">Card with margin and gap utilities</Card>
+  ```
+
+  **Migration guide**:
+  1. Replace semantic background color tokens:
+     - `backgroundPrimary` → `primary`
+     - `backgroundSecondary` → `secondary`
+     - `backgroundBrand` → `brand`
+  2. Replace semantic text color tokens:
+     - `white` → `inverted` (for text on dark backgrounds)
+     - `grey1000` / `textPrimary` → `primary`
+     - `textSecondary` → `secondary`
+  3. Replace semantic border color tokens:
+     - `grey800` / `borderStrong` → `strong`
+     - `borderSubtle` → `subtle`
+  4. For non-semantic colors, use a `StyleSheet` and use the full color token from the theme:
+
+  ```tsx
+  import { StyleSheet } from 'react-native';
+
+  const styles = StyleSheet.create(theme => ({
+    customBackground: {
+      backgroundColor: theme.color.blue[400],
+    },
+  }));
+
+  <Box style={styles.customBackground} />;
+  ```
+
+  or the `useTheme` hook:
+
+  ```tsx
+  import { useTheme } from '@utilitywarehouse/hearth-react-native';
+
+  const theme = useTheme();
+  <Box backgroundColor={theme.color.purple[800]} />;
+  ```
+
+  or use the tokens library:
+
+  ```tsx
+  import { color } from '@utilitywarehouse/hearth-tokens';
+
+  <Box backgroundColor={color.purple[800]} />;
+  ```
+
+  **Backwards compatibility**:
+
+  The full color tokens (e.g., `backgroundPrimary`, `grey1000`) are still supported as fallbacks but are deprecated and will cause type errors. We recommend migrating to the simplified tokens for a cleaner API.
+
+  **References**:
+  - [Semantic tokens documentation](https://github.com/utilitywarehouse/hearth/blob/main/packages/tokens/src/semantic-light.ts)
+
+### Patch Changes
+
+- [#917](https://github.com/utilitywarehouse/hearth/pull/917) [`6a016dc`](https://github.com/utilitywarehouse/hearth/commit/6a016dca0d1a06e40a877da15aced590d0c68112) Thanks [@jordmccord](https://github.com/jordmccord)! - 💅 [ENHANCEMENT]: Update design tokens from Figma
+
+  Updated design tokens to include new font sizes, line heights, and component-specific tokens:
+  - Added `background.loading` colour token for both light and dark modes
+  - Added new font sizes: 575 (44px) and 650 (54px)
+  - Added new line heights: 975 (52px) and 1050 (62px)
+  - Updated `Modal` component tokens with `mobile.paddingBottom` and `handle.paddingBottom` properties
+  - Added `borderBottom` property to `Navigation` component tokens
+  - Updated `Skeleton` component `loadingColor` value in light mode
+
+  **Developer changes**:
+
+  No changes required. These tokens are automatically applied to components that use them.
+
+## 0.20.0
+
+### Minor Changes
+
+- [#898](https://github.com/utilitywarehouse/hearth/pull/898) [`d32a188`](https://github.com/utilitywarehouse/hearth/commit/d32a18840c04222b7b1348133137dc5e56745fe3) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add validation and helper text props to `Select` component
+
+  The `Select` component now supports built-in validation messages and helper text through new props: `invalidText`, `validText`, `helperText`, and `helperIcon`. This provides a more integrated validation experience without needing to wrap the component in FormField.
+
+  **Components affected**:
+  - `Select`
+
+  **Developer changes**:
+
+  You can now add helper text and validation messages directly to Select:
+
+  ```tsx
+  import { Select } from '@utilitywarehouse/hearth-react-native';
+
+  <Select
+    label="Choose an option"
+    placeholder="Select an option"
+    helperText="This is some helper text for the select component."
+    validationStatus="invalid"
+    invalidText="Please select a valid option"
+    options={[
+      { label: 'Option 1', value: '1' },
+      { label: 'Option 2', value: '2' },
+      { label: 'Option 3', value: '3' },
+    ]}
+    value={value}
+    onValueChange={setValue}
+  />;
+  ```
+
+  The component now also supports a `labelVariant` prop to control label styling:
+
+  ```tsx
+  <Select
+    label="Choose an option"
+    labelVariant="heading"
+    // ... other props
+  />
+  ```
+
+  These new props work seamlessly alongside the existing FormField wrapper if you prefer that approach. No changes are required to existing Select implementations.
+
 ## 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...'.
+  The `Modal` component now supports a `loadingHeading` prop to customise 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:
+  No changes required. To customise the loading heading text, use the new `loadingHeading` prop:
 
   ```tsx
   <Modal
@@ -143,7 +438,7 @@
 
   **Developer changes**:
 
-  You can now customize `IconButton` colors for service-specific branding:
+  You can now customise `IconButton` colors for service-specific branding:
 
   ```tsx
   import { IconButton } from '@utilitywarehouse/hearth-react-native';
@@ -164,7 +459,7 @@
   - `activeBackgroundColor` - Sets the background color when pressed or in an active state
   - `shadowColor` - Sets the shadow/elevation color
 
-  These overrides work alongside the existing `variant` and `colorScheme` props, allowing you to maintain structural styling while customizing colors for specific branding requirements.
+  These overrides work alongside the existing `variant` and `colorScheme` props, allowing you to maintain structural styling while customising colors for specific branding requirements.
 
 ### Patch Changes
 

package/build/components/BodyText/BodyText.js

@@ -1,8 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Text } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { getFlattenedColorValue } from '../../utils';
+import { useStyleProps } from '../../hooks';
+import { getFlattenedColorValue, resolveThemeValueWithFallback } from '../../utils';
 const BodyText = ({ children, color, size = 'md', truncated, weight = 'regular', underline, strikeThrough, italic, textTransform, textAlign, textAlignVertical, textDecorationColor, textDecorationLine, textDecorationStyle, userSelect, inverted, ...props }) => {
+    // Extract margin utility props from remaining props
+    const { computedStyles: utilityStyles, remainingProps } = useStyleProps(props);
     styles.useVariants({
         size,
         weight,
@@ -11,14 +14,14 @@ const BodyText = ({ children, color, size = 'md', truncated, weight = 'regular',
         italic,
         inverted,
     });
-    return (_jsx(Text, { ...props, ...(truncated
+    return (_jsx(Text, { ...remainingProps, ...(truncated
             ? {
                 numberOfLines: 1,
                 ellipsizeMode: 'tail',
             }
             : {}), style: [
             styles.text,
-            props.style,
+            utilityStyles,
             {
                 ...(textTransform && { textTransform }),
                 ...(textAlign && { textAlign }),
@@ -28,6 +31,7 @@ const BodyText = ({ children, color, size = 'md', truncated, weight = 'regular',
                 ...(textAlignVertical && { textAlignVertical }),
             },
             styles.getColours(color, textDecorationColor),
+            props.style,
         ], children: children }));
 };
 BodyText.displayName = 'BodyText';
@@ -85,11 +89,14 @@ const styles = StyleSheet.create(theme => ({
         },
     },
     getColours: (color, textDecorationColor) => ({
-        ...(color ? { color: getFlattenedColorValue(color, theme.color) } : {}),
+        ...(color
+            ? {
+                color: resolveThemeValueWithFallback(color, theme.helpers.semanticColor.text, theme.color),
+            }
+            : {}),
         ...(textDecorationColor
             ? { textDecorationColor: getFlattenedColorValue(textDecorationColor, theme.color) }
             : {}),
     }),
 }));
-BodyText.displayName = 'BodyText';
 export default BodyText;

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

@@ -1,22 +1,8 @@
-import { Ref } from 'react';
-import type { TextProps as RNTextProps, Text, TextStyle } from 'react-native';
-import type { ColorValue } from '../../types';
-interface TextProps extends RNTextProps {
+import type { CommonTextProps } from '../../types';
+interface BodyTextProps extends CommonTextProps {
+    /** Text size variant. */
     size?: 'sm' | 'md' | 'lg';
-    strikeThrough?: boolean;
-    underline?: boolean;
-    truncated?: boolean;
+    /** Font weight variant. */
     weight?: 'regular' | 'semibold' | 'bold';
-    italic?: boolean;
-    color?: ColorValue;
-    textTransform?: TextStyle['textTransform'];
-    textAlign?: TextStyle['textAlign'];
-    textAlignVertical?: TextStyle['textAlignVertical'];
-    textDecorationLine?: TextStyle['textDecorationLine'];
-    textDecorationStyle?: TextStyle['textDecorationStyle'];
-    textDecorationColor?: ColorValue;
-    userSelect?: TextStyle['userSelect'];
-    inverted?: boolean;
-    ref?: Ref<Text>;
 }
-export default TextProps;
+export default BodyTextProps;

package/build/components/Box/Box.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { propStyleMapping, resolveThemeValue, themeStyleMapping, viewStyleProps, } from '../../utils';
+import { propStyleMapping, resolveThemeKey, resolveThemeValueWithFallback, semanticPropMapping, themeStyleFallbackMapping, themeStyleMapping, viewStyleProps, } from '../../utils';
 // --- Box component definition ---
 const BoxComponent = ({ as, style, children, ...props }) => {
     const { computedProps } = useMemo(() => {
@@ -10,6 +10,8 @@ const BoxComponent = ({ as, style, children, ...props }) => {
         Object.entries(props).forEach(([propName, propValue]) => {
             if (propValue === undefined)
                 return;
+            if (semanticPropMapping[propName])
+                return;
             if (propStyleMapping[propName] || viewStyleProps.has(propName)) {
                 return;
             }
@@ -26,6 +28,16 @@ const styles = StyleSheet.create(theme => ({
         Object.entries(props).forEach(([propName, propValue]) => {
             if (propValue === undefined)
                 return;
+            // Check for semantic prop mappings first (e.g., iconColor, color)
+            const semanticMapping = semanticPropMapping[propName];
+            if (semanticMapping) {
+                const { styleProp, themeKey } = semanticMapping;
+                const themeMapping = resolveThemeKey(theme, themeKey);
+                const fallbackKey = themeStyleFallbackMapping[themeKey];
+                const fallbackMapping = fallbackKey ? resolveThemeKey(theme, fallbackKey) : undefined;
+                computedStyles[styleProp] = resolveThemeValueWithFallback(propValue, themeMapping, fallbackMapping);
+                return;
+            }
             let stylePropName;
             // Handle shorthand props
             if (propStyleMapping[propName]) {
@@ -39,8 +51,16 @@ const styles = StyleSheet.create(theme => ({
                 return;
             // Resolve theme value if needed
             const themeKey = themeStyleMapping[stylePropName];
-            if (themeKey && theme[themeKey]) {
-                computedStyles[stylePropName] = resolveThemeValue(propValue, theme[themeKey]);
+            if (themeKey) {
+                const themeObj = resolveThemeKey(theme, themeKey);
+                const fallbackKey = themeStyleFallbackMapping[themeKey];
+                const fallbackMapping = fallbackKey ? resolveThemeKey(theme, fallbackKey) : undefined;
+                if (themeObj) {
+                    computedStyles[stylePropName] = resolveThemeValueWithFallback(propValue, themeObj, fallbackMapping);
+                }
+                else {
+                    computedStyles[stylePropName] = propValue;
+                }
             }
             else {
                 computedStyles[stylePropName] = propValue;

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

@@ -1,102 +1,10 @@
 import React from 'react';
-import type { ViewProps, ViewStyle } from 'react-native';
-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 {
-    bg?: ColorValue;
-    bgColor?: ColorValue;
-    h?: SpaceValue;
-    w?: SpaceValue;
-    p?: SpaceValue;
-    px?: SpaceValue;
-    py?: SpaceValue;
-    pt?: SpaceValue;
-    pb?: SpaceValue;
-    pr?: SpaceValue;
-    pl?: SpaceValue;
-    m?: SpaceValue;
-    mx?: SpaceValue;
-    my?: SpaceValue;
-    mt?: SpaceValue;
-    mb?: SpaceValue;
-    mr?: SpaceValue;
-    ml?: SpaceValue;
-    rounded?: BorderRadiusValue;
-}
-export interface ThemedBoxViewStyleProps {
-    top?: SpaceValue;
-    bottom?: SpaceValue;
-    left?: SpaceValue;
-    right?: SpaceValue;
-    padding?: SpaceValue;
-    paddingHorizontal?: SpaceValue;
-    paddingVertical?: SpaceValue;
-    paddingTop?: SpaceValue;
-    paddingBottom?: SpaceValue;
-    paddingLeft?: SpaceValue;
-    paddingRight?: SpaceValue;
-    paddingEnd?: SpaceValue;
-    paddingStart?: SpaceValue;
-    margin?: SpaceValue;
-    marginHorizontal?: SpaceValue;
-    marginVertical?: SpaceValue;
-    marginTop?: SpaceValue;
-    marginBottom?: SpaceValue;
-    marginLeft?: SpaceValue;
-    marginRight?: SpaceValue;
-    marginEnd?: SpaceValue;
-    marginStart?: SpaceValue;
-    columnGap?: SpaceValue;
-    gap?: SpaceValue;
-    rowGap?: SpaceValue;
-    height?: SpaceValue;
-    width?: SpaceValue;
-    minHeight?: SpaceValue;
-    minWidth?: SpaceValue;
-    maxWidth?: SpaceValue;
-    maxHeight?: SpaceValue;
-    start?: SpaceValue;
-    end?: SpaceValue;
-    backgroundColor?: ColorValue;
-    borderColor?: ColorValue;
-    borderBottomColor?: ColorValue;
-    borderLeftColor?: ColorValue;
-    borderRightColor?: ColorValue;
-    borderTopColor?: ColorValue;
-    borderBlockColor?: ColorValue;
-    borderBlockEndColor?: ColorValue;
-    borderBlockStartColor?: ColorValue;
-    borderEndColor?: ColorValue;
-    borderStartColor?: ColorValue;
-    outlineColor?: ColorValue;
-    shadowColor?: ColorValue;
-    borderRadius?: BorderRadiusValue;
-    borderBottomEndRadius?: BorderRadiusValue;
-    borderBottomLeftRadius?: BorderRadiusValue;
-    borderBottomRightRadius?: BorderRadiusValue;
-    borderBottomStartRadius?: BorderRadiusValue;
-    borderTopEndRadius?: BorderRadiusValue;
-    borderTopLeftRadius?: BorderRadiusValue;
-    borderTopRightRadius?: BorderRadiusValue;
-    borderTopStartRadius?: BorderRadiusValue;
-    borderEndEndRadius?: BorderRadiusValue;
-    borderEndStartRadius?: BorderRadiusValue;
-    borderStartEndRadius?: BorderRadiusValue;
-    borderStartStartRadius?: BorderRadiusValue;
-    opacity?: OpacityValue;
-    borderBottomWidth?: BordeWidthValue;
-    borderEndWidth?: BordeWidthValue;
-    borderLeftWidth?: BordeWidthValue;
-    borderRightWidth?: BordeWidthValue;
-    borderStartWidth?: BordeWidthValue;
-    borderTopWidth?: BordeWidthValue;
-    borderWidth?: BordeWidthValue;
-}
+import type { ViewProps } from 'react-native';
+import type { AllUtilityProps, SpacingValues } from '../../types';
 interface CustomBoxProps {
     as?: React.ElementType;
     spacing?: SpacingValues;
 }
-export interface BoxProps extends BoxStyleMappingValues, ThemedBoxViewStyleProps, OtherBoxViewStyles, ViewProps, CustomBoxProps {
+export interface BoxProps extends AllUtilityProps, ViewProps, CustomBoxProps {
 }
 export default BoxProps;

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

@@ -1,6 +1,6 @@
 import { PressableProps, ViewStyle } from 'react-native';
-import { SpaceValue, SpacingValues } from '../../types';
-interface CardProps extends PressableProps {
+import { GapProps, MarginProps, SpacingValues } from '../../types';
+interface CardProps extends PressableProps, MarginProps, GapProps {
     variant?: 'emphasis' | 'subtle';
     colorScheme?: 'neutralStrong' | 'neutralSubtle' | 'brand' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'pig';
     shadowColor?: 'functional' | 'brand' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'pig';
@@ -13,8 +13,5 @@ interface CardProps extends PressableProps {
     justifyContent?: ViewStyle['justifyContent'];
     flexDirection?: ViewStyle['flexDirection'];
     flexWrap?: ViewStyle['flexWrap'];
-    gap?: SpaceValue;
-    rowGap?: SpaceValue;
-    columnGap?: SpaceValue;
 }
 export default CardProps;