@utilitywarehouse/hearth-react-native 0.20.0 → 0.22.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.20.0 build /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.22.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.20.0 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.22.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         |  1584.824 |    64.0%
-react-hooks/exhaustive-deps               |   101.118 |     4.1%
-no-global-assign                          |    70.605 |     2.8%
-react-hooks/rules-of-hooks                |    63.862 |     2.6%
-no-misleading-character-class             |    49.106 |     2.0%
-@typescript-eslint/ban-ts-comment         |    38.021 |     1.5%
-no-unexpected-multiline                   |    35.859 |     1.4%
-no-loss-of-precision                      |    32.618 |     1.3%
-@typescript-eslint/triple-slash-reference |    29.048 |     1.2%
-no-useless-escape                         |    27.538 |     1.1%
+Rule                                              | Time (ms) | Relative
+:-------------------------------------------------|----------:|--------:
+@typescript-eslint/no-unused-vars                 |  1687.263 |    65.5%
+react-hooks/rules-of-hooks                        |    78.867 |     3.1%
+react-hooks/exhaustive-deps                       |    78.504 |     3.0%
+no-global-assign                                  |    75.145 |     2.9%
+no-unexpected-multiline                           |    55.153 |     2.1%
+no-loss-of-precision                              |    46.457 |     1.8%
+@typescript-eslint/ban-ts-comment                 |    45.439 |     1.8%
+no-misleading-character-class                     |    37.162 |     1.4%
+@typescript-eslint/triple-slash-reference         |    28.294 |     1.1%
+@typescript-eslint/no-unnecessary-type-constraint |    20.347 |     0.8%

package/CHANGELOG.md

@@ -1,5 +1,277 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.22.0
+
+### Minor Changes
+
+- [#968](https://github.com/utilitywarehouse/hearth/pull/968) [`cee5811`](https://github.com/utilitywarehouse/hearth/commit/cee5811020af02fe754d8311ec8313c1793f108a) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add `badge` support to Radio and Checkbox (including tiles).
+
+  **Components affected**:
+  - `Radio`
+  - `RadioTile`
+  - `Checkbox`
+  - `CheckboxTile`
+
+  **Developer changes**:
+  You can now pass a `badge` React node to render beneath helper text. No changes required unless you want to use the new prop.
+
+### Patch Changes
+
+- [#966](https://github.com/utilitywarehouse/hearth/pull/966) [`4e9f3f0`](https://github.com/utilitywarehouse/hearth/commit/4e9f3f0284e50da5ba4e49e132dac745a1a8a68d) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Allow Card layout props and remove forced alignment
+
+  Card now accepts flex layout and display props, and it no longer forces `alignItems: flex-start` on the root, so custom alignment works as expected.
+
+- [#969](https://github.com/utilitywarehouse/hearth/pull/969) [`c5c988b`](https://github.com/utilitywarehouse/hearth/commit/c5c988b65f1133b85b822037b086a524bc1255e3) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Render the Modal footer in navigation modals
+
+## 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

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,20 +1,13 @@
-import { PressableProps, ViewStyle } from 'react-native';
-import { SpaceValue, SpacingValues } from '../../types';
-interface CardProps extends PressableProps {
+import { PressableProps } from 'react-native';
+import { DisplayProps, FlexLayoutProps, GapProps, MarginProps, SpacingValues } from '../../types';
+interface CardProps extends PressableProps, MarginProps, GapProps, FlexLayoutProps, Omit<DisplayProps, 'direction'> {
     variant?: 'emphasis' | 'subtle';
     colorScheme?: 'neutralStrong' | 'neutralSubtle' | 'brand' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'pig';
     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. */
+    /** @deprecated Use `spacing` instead. The `space` prop will be removed in a future release. */
     space?: SpacingValues;
-    alignItems?: ViewStyle['alignItems'];
-    justifyContent?: ViewStyle['justifyContent'];
-    flexDirection?: ViewStyle['flexDirection'];
-    flexWrap?: ViewStyle['flexWrap'];
-    gap?: SpaceValue;
-    rowGap?: SpaceValue;
-    columnGap?: SpaceValue;
 }
 export default CardProps;

package/build/components/Card/CardRoot.js

@@ -70,7 +70,6 @@ Card.displayName = 'Card';
 const styles = StyleSheet.create(theme => ({
     card: {
         overflow: 'hidden',
-        alignItems: 'flex-start',
         borderRadius: theme.components.card.borderRadius,
         variants: {
             spacing: theme.globalStyle.variants.spacing,

package/build/components/Checkbox/Checkbox.d.ts

@@ -10,7 +10,7 @@ declare const CheckboxIcon: import("react").ForwardRefExoticComponent<import("re
 }>;
 declare const CheckboxLabel: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("../Label/Label.props").default> & Omit<import("../Label/Label.props").default, "ref">>;
 declare const Checkbox: {
-    ({ children, label, disabled, checked, helperIcon, helperText, invalidText, validText, validationStatus: validation, showValidationIcon, type, image, value, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, label, disabled, checked, helperIcon, helperText, badge, invalidText, validText, validationStatus: validation, showValidationIcon, type, image, value, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 declare const CheckboxTile: {

package/build/components/Checkbox/Checkbox.js

@@ -25,12 +25,12 @@ CheckboxGroup.displayName = 'CheckboxGroup';
 CheckboxIndicator.displayName = 'CheckboxIndicator';
 CheckboxIcon.displayName = 'CheckboxIcon';
 CheckboxLabel.displayName = 'CheckboxLabel';
-const Checkbox = ({ children, label, disabled, checked, helperIcon, helperText, invalidText, validText, validationStatus: validation, showValidationIcon, type = 'default', image, value, ...props }) => {
+const Checkbox = ({ children, label, disabled, checked, helperIcon, helperText, badge, invalidText, validText, validationStatus: validation, showValidationIcon, type = 'default', image, value, ...props }) => {
     const { validationStatus: fieldValidationStatus } = useFormFieldContext();
     const { validationStatus: groupValidationStatus, type: groupType } = useCheckboxGroupContext();
     const validationStatus = fieldValidationStatus ?? groupValidationStatus ?? validation ?? 'initial';
     const checkboxType = groupType ?? type;
-    const checkboxChildren = children ? (children) : (_jsxs(_Fragment, { children: [_jsx(CheckboxIndicator, { children: _jsx(CheckboxIcon, {}) }), image ? image : null, _jsxs(CheckboxTextContent, { children: [!!label && _jsx(CheckboxLabel, { children: label }), !!helperText && _jsx(Helper, { disabled: disabled, icon: helperIcon, text: helperText }), validationStatus === 'invalid' && !!invalidText && (_jsx(Helper, { showIcon: showValidationIcon, disabled: disabled, validationStatus: "invalid", text: invalidText })), validationStatus === 'valid' && !!validText && (_jsx(Helper, { disabled: disabled, showIcon: showValidationIcon, validationStatus: "valid", text: validText }))] })] }));
+    const checkboxChildren = children ? (children) : (_jsxs(_Fragment, { children: [_jsx(CheckboxIndicator, { children: _jsx(CheckboxIcon, {}) }), image ? image : null, _jsxs(CheckboxTextContent, { children: [!!label && _jsx(CheckboxLabel, { children: label }), !!helperText && _jsx(Helper, { disabled: disabled, icon: helperIcon, text: helperText }), badge ? badge : null, validationStatus === 'invalid' && !!invalidText && (_jsx(Helper, { showIcon: showValidationIcon, disabled: disabled, validationStatus: "invalid", text: invalidText })), validationStatus === 'valid' && !!validText && (_jsx(Helper, { disabled: disabled, showIcon: showValidationIcon, validationStatus: "valid", text: validText }))] })] }));
     return (_jsx(CheckboxComponent, { ...props, value: (value ?? '').toString(), isDisabled: disabled, isChecked: checked, children: checkboxType === 'tile' ? (_jsx(CheckboxTileRoot, { children: checkboxChildren })) : (checkboxChildren) }));
 };
 const CheckboxTile = ({ type = 'tile', ...props }) => {

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

@@ -17,6 +17,7 @@ type CheckboxWithChildrenProps = {
     label?: never;
     helperText?: never;
     helperIcon?: never;
+    badge?: never;
     invalidText?: never;
     validText?: never;
     showValidationIcon?: never;
@@ -27,6 +28,7 @@ type CheckboxWithoutChildrenProps = {
     label?: string;
     helperText?: string;
     helperIcon?: ComponentType;
+    badge?: ReactNode;
     invalidText?: string;
     validText?: string;
     showValidationIcon?: boolean;