@utilitywarehouse/hearth-react-native 0.35.1 → 0.35.3

package/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: hearth-react-native
-description: Use when building any UI component or screen with the Hearth React Native library. Use this implicitly whenever building any UI component or screen in a React Native app that has Hearth React Native installed — Hearth React Native is the default. Do not wait for an explicit mention of "Hearth React Native" — if it's UI work in an app with Hearth React Native, use this skill. Triggers when creating components, implementing Figma designs, adding UI features, or writing any React Native code in the app.
+description: MANDATORY prerequisite — you MUST load this skill BEFORE writing or editing any file that imports from `@utilitywarehouse/hearth-react-native` or `@utilitywarehouse/hearth-react-native-icons`, BEFORE adapting Figma `get_design_context` reference output into a React Native screen in a Hearth app, and BEFORE delegating research about a Hearth component's props or usage to a subagent. NEVER substitute node_modules type definitions or a grep of existing usage for this skill's own component docs — that is how this skill gets silently bypassed. This skill IS the "target project's conventions" that figma-design-to-code hands off to; loading that skill does NOT satisfy this requirement. Do not wait for an explicit mention of "Hearth React Native" — any React Native UI work in an app with the library installed requires this skill first.
 ---
 
 # Building with Hearth React Native
@@ -9,6 +9,31 @@ You are acting as a React Native engineer. Your job is to turn requirements —
 either Figma designs or written requirements — into UI React Native code using
 Hearth — Utility Warehouse's Design Systems libraries.
 
+## MANDATORY — when you must load this skill
+
+Load this skill — do not skip it — at each of these moments:
+
+- **Before writing or editing any file that imports from
+  `@utilitywarehouse/hearth-react-native` or
+  `@utilitywarehouse/hearth-react-native-icons`.** If the file touches either
+  package, this skill MUST be loaded first, no exceptions.
+- **Before adapting Figma `get_design_context` reference output into this
+  codebase.** `figma-design-to-code` hands off with "adapt the reference code
+  to the target project's conventions" without saying what those conventions
+  are. This skill IS that answer. Loading `figma-design-to-code` does NOT
+  satisfy this requirement — load both, this one before you touch the
+  reference code.
+- **Before delegating research about a Hearth component's props, variants, or
+  usage to a subagent.** Reading `node_modules` type definitions or grepping
+  existing usage in the app is NOT a substitute for this skill's own component
+  docs (see "Before you implement" below). Spawning a research subagent to
+  answer a question this skill already answers is how this skill gets
+  silently bypassed — load this skill, or pass its instructions into the
+  subagent's prompt, before delegating.
+
+Treat each moment above as a hard gate, not a vague "this is UI work" prompt
+to get around to eventually.
+
 ## Package imports
 
 | Purpose    | Package                                       |
@@ -106,6 +131,8 @@ pairing with someone, ask for it here too.
 
 ## Use layout components
 
+(Source of truth: [`public/llms/docs/layout-components.md`](public/llms/docs/layout-components.md))
+
 Use layout components to structure and space content. Do not add margin to
 individual UI elements to achieve spacing — keep spacing decisions at the layout
 level so UI components stay composable.
@@ -172,6 +199,8 @@ alongside their own layout-specific props (`direction`, `align`, `justify`,
 
 ## Styling: Unistyles, not `StyleSheet` from `react-native`
 
+(Source of truth: [`public/llms/docs/styling.md`](public/llms/docs/styling.md))
+
 Custom styles use `react-native-unistyles`'s `StyleSheet.create(theme => ({...}))`,
 re-exported from the package. Only reach for this when utility props and
 existing component variants don't cover the need.
@@ -235,6 +264,8 @@ const styles = StyleSheet.create(theme => ({
 
 ## Responsive breakpoints
 
+(Source of truth: [`public/llms/docs/styling.md`](public/llms/docs/styling.md#responsive-design-with-breakpoints))
+
 Breakpoints are configured once (via Unistyles' `StyleSheet.configure`) and
 cascade **mobile-first**: a value applies from that breakpoint upward until
 overridden by a larger one. See the
@@ -264,6 +295,8 @@ const styles = StyleSheet.create(theme => ({
 
 ## Required app-level providers
 
+(Source of truth: [`public/llms/docs/getting-started.md`](public/llms/docs/getting-started.md))
+
 Hearth React Native components rely on these wrapping the app root:
 
 - `GestureHandlerRootView` (from `react-native-gesture-handler`) — required for
@@ -299,11 +332,13 @@ applies before reaching for `react-native-safe-area-context` directly:
   `SafeAreaView` applies the `top` edge. Set `useSafeAreaInsets={false}` on
   `BottomSheetModalProvider` only if the parent screen already handles
   safe-area insets itself — don't look for the prop on the individual
-  components.
+  components. (Source of truth:
+  [`public/llms/components/modal.md`](public/llms/components/modal.md))
 - **`NavModal`** (used when a screen is already presented by React Navigation)
   reads safe-area insets directly from the Unistyles runtime
   (`rt.insets.top`/`rt.insets.bottom` inside `StyleSheet.create((theme, rt) =>
-  ...)`) rather than rendering a `SafeAreaView`.
+  ...)`) rather than rendering a `SafeAreaView`. (Source of truth:
+  [`public/llms/components/nav-modal.md`](public/llms/components/nav-modal.md))
 
 Don't wrap Hearth components in your own `SafeAreaView` on top of these —
 check `BottomSheetModalProvider`'s `useSafeAreaInsets` prop (or `NavModal`'s
@@ -344,6 +379,8 @@ Compound components share state via a `<Component>Context` (check for a
 
 ### Themed images that adapt to light/dark mode
 
+(Source of truth: [`public/llms/docs/dark-mode-best-practice.md`](public/llms/docs/dark-mode-best-practice.md))
+
 ```tsx
 <ThemedImage light={require('./logo-light.png')} dark={require('./logo-dark.png')} />
 ```

package/build/components/Modal/Modal.d.ts

@@ -3,5 +3,5 @@ import ModalProps from './Modal.props';
 type Modal<T = any> = BottomSheetModalMethods<T> & {
     triggerCloseAnimation?: () => void;
 };
-declare const Modal: ({ ref, children, heading, description, showCloseButton, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress, closeOnSecondaryButtonPress, loading, loadingHeading, loadingDescription, fullscreen, image, footer, footerStyle, primaryButtonProps, secondaryButtonProps, closeButtonProps, stickyFooter, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
+declare const Modal: ({ ref, children, heading, description, showCloseButton, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress, closeOnSecondaryButtonPress, loading, loadingHeading, loadingDescription, fullscreen, image, footer, footerStyle, primaryButtonProps, secondaryButtonProps, closeButtonProps, stickyFooter, testID, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
 export default Modal;

package/build/components/Modal/Modal.js

@@ -12,7 +12,7 @@ import { Button } from '../Button';
 import { Heading } from '../Heading';
 import { Spinner } from '../Spinner';
 import { UnstyledIconButton } from '../UnstyledIconButton';
-const Modal = ({ ref, children, heading, description, showCloseButton = true, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress = true, closeOnSecondaryButtonPress = true, loading, loadingHeading = 'Loading...', loadingDescription, fullscreen = false, image, footer, footerStyle, primaryButtonProps, secondaryButtonProps, closeButtonProps, stickyFooter = true, ...props }) => {
+const Modal = ({ ref, children, heading, description, showCloseButton = true, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress = true, closeOnSecondaryButtonPress = true, loading, loadingHeading = 'Loading...', loadingDescription, fullscreen = false, image, footer, footerStyle, primaryButtonProps, secondaryButtonProps, closeButtonProps, stickyFooter = true, testID, ...props }) => {
     const theme = useTheme();
     const bottomSheetModalRef = useRef(null);
     const viewRef = useRef(null);
@@ -90,7 +90,7 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
         secondaryButtonProps,
         secondaryButtonText,
     ]);
-    const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? (loadingHeading ?? 'Loading') : undefined, accessibilityHint: Platform.OS === 'android' && loadingDescription ? loadingDescription : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg" }), _jsx(Heading, { size: "lg", textAlign: "center", children: loadingHeading }), loadingDescription ? _jsx(BodyText, { textAlign: "center", children: loadingDescription }) : null] })) : (_jsxs(View, { style: styles.container, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, children: heading })) : null, hasDescription && !image ? (descriptionIsText ? (_jsx(BodyText, { accessible: true, children: description })) : (description)) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [image, _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, children: heading })) : null, hasDescription ? (descriptionIsText ? (_jsx(BodyText, { textAlign: "center", accessible: true, children: description })) : (description)) : null] })] })) : null, children, !stickyFooter && shouldShowFooter ? (_jsx(View, { style: footerStyle, children: footerContent })) : null] })) }));
+    const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, testID: testID, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? (loadingHeading ?? 'Loading') : undefined, accessibilityHint: Platform.OS === 'android' && loadingDescription ? loadingDescription : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg" }), _jsx(Heading, { size: "lg", textAlign: "center", children: loadingHeading }), loadingDescription ? _jsx(BodyText, { textAlign: "center", children: loadingDescription }) : null] })) : (_jsxs(View, { style: styles.container, testID: testID, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, children: heading })) : null, hasDescription && !image ? (descriptionIsText ? (_jsx(BodyText, { accessible: true, children: description })) : (description)) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [image, _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, children: heading })) : null, hasDescription ? (descriptionIsText ? (_jsx(BodyText, { textAlign: "center", accessible: true, children: description })) : (description)) : null] })] })) : null, children, !stickyFooter && shouldShowFooter ? (_jsx(View, { style: footerStyle, children: footerContent })) : null] })) }));
     const renderFooter = useCallback((bottomSheetFooterProps) => (_jsx(BottomSheetFooter, { ...bottomSheetFooterProps, children: _jsx(View, { onLayout: handleStickyFooterLayout, style: [styles.footerWrap, footerStyle], children: footerContent }) })), [footerContent, footerStyle, handleStickyFooterLayout]);
     return (_jsxs(_Fragment, { children: [stickyFooter && shouldShowFooter && stickyFooterHeight === 0 ? (_jsx(View, { accessible: false, importantForAccessibility: "no-hide-descendants", pointerEvents: "none", style: styles.footerMeasurementContainer, children: _jsx(View, { onLayout: handleStickyFooterLayout, style: [styles.footerWrap, footerStyle], children: footerContent }) })) : null, _jsxs(BottomSheetModal, { ref: bottomSheetModalRef, enableDynamicSizing: true, snapPoints: image || fullscreen ? ['90%'] : props.snapPoints, showHandle: typeof loading !== 'undefined' && loading ? false : props.showHandle, accessible: false, style: styles.modal, footerComponent: stickyFooter && shouldShowFooter ? renderFooter : undefined, ...props, onChange: handleChange, children: [loading ? _jsx(View, { style: styles.loadingTop }) : null, _jsx(BottomSheetScrollView, { contentContainerStyle: [
                             styles.scrollView,

package/build/components/Modal/Modal.shared.types.d.ts

@@ -3,6 +3,7 @@ import { StyleProp, ViewProps, ViewStyle } from 'react-native';
 import { ButtonWithoutChildrenProps } from '../Button/Button.props';
 import { UnstyledIconButtonProps } from '../UnstyledIconButton';
 export interface ModalCommonBaseProps {
+    testID?: string;
     loading?: boolean;
     image?: ReactNode;
     showCloseButton?: boolean;

package/build/components/Modal/Modal.web.d.ts

@@ -3,5 +3,5 @@ import ModalProps from './Modal.props';
 type Modal<T = any> = BottomSheetModalMethods<T> & {
     triggerCloseAnimation?: () => void;
 };
-declare const Modal: ({ ref, children, heading, description, showCloseButton, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress, closeOnSecondaryButtonPress, loading, loadingHeading, fullscreen, image, footer, footerStyle, primaryButtonProps, secondaryButtonProps, closeButtonProps, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
+declare const Modal: ({ ref, children, heading, description, showCloseButton, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress, closeOnSecondaryButtonPress, loading, loadingHeading, fullscreen, image, footer, footerStyle, primaryButtonProps, secondaryButtonProps, closeButtonProps, testID, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
 export default Modal;

package/build/components/Modal/Modal.web.js

@@ -9,7 +9,7 @@ import { Button } from '../Button';
 import { Heading } from '../Heading';
 import { Spinner } from '../Spinner';
 import { UnstyledIconButton } from '../UnstyledIconButton';
-const Modal = ({ ref, children, heading, description, showCloseButton = true, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress = true, closeOnSecondaryButtonPress = true, loading, loadingHeading = 'Loading...', fullscreen = false, image, footer, footerStyle, primaryButtonProps, secondaryButtonProps, closeButtonProps, ...props }) => {
+const Modal = ({ ref, children, heading, description, showCloseButton = true, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress = true, closeOnSecondaryButtonPress = true, loading, loadingHeading = 'Loading...', fullscreen = false, image, footer, footerStyle, primaryButtonProps, secondaryButtonProps, closeButtonProps, testID, ...props }) => {
     const bottomSheetModalRef = useRef(null);
     const viewRef = useRef(null);
     const scrollViewRef = useRef(null);
@@ -62,7 +62,7 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
     const descriptionIsText = typeof description === 'string' || typeof description === 'number';
     const hasDescription = description !== undefined && description !== null;
     const footerContent = footer ?? (_jsxs(View, { style: styles.footer, children: [hasPrimaryButton ? (_jsx(Button, { onPress: handlePrimaryButtonPress, text: primaryButtonText, ...primaryButtonProps, variant: primaryButtonProps?.variant ?? 'solid', colorScheme: primaryButtonProps?.colorScheme ?? 'highlight' })) : null, hasSecondaryButton ? (_jsx(Button, { onPress: handleSecondaryButtonPress, text: secondaryButtonText, ...secondaryButtonProps, variant: secondaryButtonProps?.variant ?? 'outline', colorScheme: secondaryButtonProps?.colorScheme ?? 'functional' })) : null] }));
-    const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Loading' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg" }), _jsx(Heading, { size: "lg", textAlign: "center", children: loadingHeading })] })) : (_jsxs(View, { style: styles.container, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, children: heading })) : null, hasDescription && !image ? (descriptionIsText ? (_jsx(BodyText, { accessible: true, children: description })) : (description)) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [image, _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, children: heading })) : null, hasDescription ? (descriptionIsText ? (_jsx(BodyText, { textAlign: "center", accessible: true, children: description })) : (description)) : null] })] })) : null, children, hasFooter ? _jsx(View, { style: footerStyle, children: footerContent }) : null] })) }));
+    const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, testID: testID, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Loading' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg" }), _jsx(Heading, { size: "lg", textAlign: "center", children: loadingHeading })] })) : (_jsxs(View, { style: styles.container, testID: testID, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, children: heading })) : null, hasDescription && !image ? (descriptionIsText ? (_jsx(BodyText, { accessible: true, children: description })) : (description)) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [image, _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, children: heading })) : null, hasDescription ? (descriptionIsText ? (_jsx(BodyText, { textAlign: "center", accessible: true, children: description })) : (description)) : null] })] })) : null, children, hasFooter ? _jsx(View, { style: footerStyle, children: footerContent }) : null] })) }));
     return (_jsx(BottomSheetModal, { ref: bottomSheetModalRef, enableDynamicSizing: true, snapPoints: image || fullscreen ? ['90%'] : props.snapPoints, showHandle: typeof loading !== 'undefined' && loading ? false : props.showHandle, accessible: false, ...props, onChange: handleChange, children: _jsx(BottomSheetScrollView, { contentContainerStyle: styles.container, ref: scrollViewRef, children: content }) }));
 };
 const styles = StyleSheet.create(theme => ({

package/build/core/themes.d.ts

@@ -113,6 +113,7 @@ export declare const lightTheme: {
         readonly '700': 56;
         readonly '800': 64;
         readonly '900': 72;
+        readonly '1000': 80;
     };
     readonly borderWidth: {
         readonly '1': 1;
@@ -120,6 +121,7 @@ export declare const lightTheme: {
     };
     readonly borderRadius: {
         readonly full: 9999;
+        readonly lg: 12;
         readonly md: 8;
         readonly none: 0;
         readonly sm: 6;
@@ -153,6 +155,7 @@ export declare const lightTheme: {
         readonly '600': 28;
         readonly '700': 32;
         readonly '800': 36;
+        readonly '900': 40;
         readonly '950': 48;
         readonly '975': 52;
         readonly '1050': 62;
@@ -1185,6 +1188,7 @@ export declare const lightTheme: {
         };
         readonly cashbackLilac: {
             readonly '300': "#dfbdf5";
+            readonly '400': "#ce9cf0";
             readonly '500': "#be7aeb";
             readonly '700': "#8b2bc9";
             readonly '900': "#7429b5";
@@ -1233,6 +1237,7 @@ export declare const lightTheme: {
         };
         readonly mobileRose: {
             readonly '200': "#fad0e9";
+            readonly '300': "#f49fd2";
             readonly '400': "#ee6dbb";
             readonly '800': "#a7266d";
             readonly '900': "#8a3260";
@@ -1409,6 +1414,7 @@ export declare const darkTheme: {
         readonly '700': 56;
         readonly '800': 64;
         readonly '900': 72;
+        readonly '1000': 80;
     };
     readonly borderWidth: {
         readonly '1': 1;
@@ -1416,6 +1422,7 @@ export declare const darkTheme: {
     };
     readonly borderRadius: {
         readonly full: 9999;
+        readonly lg: 12;
         readonly md: 8;
         readonly none: 0;
         readonly sm: 6;
@@ -1449,6 +1456,7 @@ export declare const darkTheme: {
         readonly '600': 28;
         readonly '700': 32;
         readonly '800': 36;
+        readonly '900': 40;
         readonly '950': 48;
         readonly '975': 52;
         readonly '1050': 62;
@@ -2492,6 +2500,7 @@ export declare const darkTheme: {
         };
         readonly cashbackLilac: {
             readonly '300': "#dfbdf5";
+            readonly '400': "#ce9cf0";
             readonly '500': "#be7aeb";
             readonly '700': "#8b2bc9";
             readonly '900': "#7429b5";
@@ -2540,6 +2549,7 @@ export declare const darkTheme: {
         };
         readonly mobileRose: {
             readonly '200': "#fad0e9";
+            readonly '300': "#f49fd2";
             readonly '400': "#ee6dbb";
             readonly '800': "#a7266d";
             readonly '900': "#8a3260";
@@ -2717,6 +2727,7 @@ export declare const themes: {
             readonly '700': 56;
             readonly '800': 64;
             readonly '900': 72;
+            readonly '1000': 80;
         };
         readonly borderWidth: {
             readonly '1': 1;
@@ -2724,6 +2735,7 @@ export declare const themes: {
         };
         readonly borderRadius: {
             readonly full: 9999;
+            readonly lg: 12;
             readonly md: 8;
             readonly none: 0;
             readonly sm: 6;
@@ -2757,6 +2769,7 @@ export declare const themes: {
             readonly '600': 28;
             readonly '700': 32;
             readonly '800': 36;
+            readonly '900': 40;
             readonly '950': 48;
             readonly '975': 52;
             readonly '1050': 62;
@@ -3789,6 +3802,7 @@ export declare const themes: {
             };
             readonly cashbackLilac: {
                 readonly '300': "#dfbdf5";
+                readonly '400': "#ce9cf0";
                 readonly '500': "#be7aeb";
                 readonly '700': "#8b2bc9";
                 readonly '900': "#7429b5";
@@ -3837,6 +3851,7 @@ export declare const themes: {
             };
             readonly mobileRose: {
                 readonly '200': "#fad0e9";
+                readonly '300': "#f49fd2";
                 readonly '400': "#ee6dbb";
                 readonly '800': "#a7266d";
                 readonly '900': "#8a3260";
@@ -4013,6 +4028,7 @@ export declare const themes: {
             readonly '700': 56;
             readonly '800': 64;
             readonly '900': 72;
+            readonly '1000': 80;
         };
         readonly borderWidth: {
             readonly '1': 1;
@@ -4020,6 +4036,7 @@ export declare const themes: {
         };
         readonly borderRadius: {
             readonly full: 9999;
+            readonly lg: 12;
             readonly md: 8;
             readonly none: 0;
             readonly sm: 6;
@@ -4053,6 +4070,7 @@ export declare const themes: {
             readonly '600': 28;
             readonly '700': 32;
             readonly '800': 36;
+            readonly '900': 40;
             readonly '950': 48;
             readonly '975': 52;
             readonly '1050': 62;
@@ -5096,6 +5114,7 @@ export declare const themes: {
             };
             readonly cashbackLilac: {
                 readonly '300': "#dfbdf5";
+                readonly '400': "#ce9cf0";
                 readonly '500': "#be7aeb";
                 readonly '700': "#8b2bc9";
                 readonly '900': "#7429b5";
@@ -5144,6 +5163,7 @@ export declare const themes: {
             };
             readonly mobileRose: {
                 readonly '200': "#fad0e9";
+                readonly '300': "#f49fd2";
                 readonly '400': "#ee6dbb";
                 readonly '800': "#a7266d";
                 readonly '900': "#8a3260";

package/build/tokens/border-radius.d.ts

@@ -3,6 +3,7 @@
  */
 declare const _default: {
     readonly full: 9999;
+    readonly lg: 12;
     readonly md: 8;
     readonly none: 0;
     readonly sm: 6;

package/build/tokens/border-radius.js

@@ -3,6 +3,7 @@
  */
 export default {
     full: 9999,
+    lg: 12,
     md: 8,
     none: 0,
     sm: 6,

package/build/tokens/color.d.ts

@@ -16,6 +16,7 @@ export declare const broadbandGreen: {
 };
 export declare const cashbackLilac: {
     readonly '300': "#dfbdf5";
+    readonly '400': "#ce9cf0";
     readonly '500': "#be7aeb";
     readonly '700': "#8b2bc9";
     readonly '900': "#7429b5";
@@ -64,6 +65,7 @@ export declare const insuranceOrange: {
 };
 export declare const mobileRose: {
     readonly '200': "#fad0e9";
+    readonly '300': "#f49fd2";
     readonly '400': "#ee6dbb";
     readonly '800': "#a7266d";
     readonly '900': "#8a3260";
@@ -636,6 +638,7 @@ declare const color: {
     };
     readonly cashbackLilac: {
         readonly '300': "#dfbdf5";
+        readonly '400': "#ce9cf0";
         readonly '500': "#be7aeb";
         readonly '700': "#8b2bc9";
         readonly '900': "#7429b5";
@@ -684,6 +687,7 @@ declare const color: {
     };
     readonly mobileRose: {
         readonly '200': "#fad0e9";
+        readonly '300': "#f49fd2";
         readonly '400': "#ee6dbb";
         readonly '800': "#a7266d";
         readonly '900': "#8a3260";

package/build/tokens/color.js

@@ -16,6 +16,7 @@ export const broadbandGreen = {
 };
 export const cashbackLilac = {
     '300': '#dfbdf5',
+    '400': '#ce9cf0',
     '500': '#be7aeb',
     '700': '#8b2bc9',
     '900': '#7429b5',
@@ -64,6 +65,7 @@ export const insuranceOrange = {
 };
 export const mobileRose = {
     '200': '#fad0e9',
+    '300': '#f49fd2',
     '400': '#ee6dbb',
     '800': '#a7266d',
     '900': '#8a3260',

package/build/tokens/line-height.d.ts

@@ -9,6 +9,7 @@ declare const _default: {
     readonly '600': 28;
     readonly '700': 32;
     readonly '800': 36;
+    readonly '900': 40;
     readonly '950': 48;
     readonly '975': 52;
     readonly '1050': 62;

package/build/tokens/line-height.js

@@ -9,6 +9,7 @@ export default {
     '600': 28,
     '700': 32,
     '800': 36,
+    '900': 40,
     '950': 48,
     '975': 52,
     '1050': 62,

package/build/tokens/primitive.d.ts

@@ -4,6 +4,7 @@
 declare const _default: {
     readonly borderRadius: {
         readonly full: 9999;
+        readonly lg: 12;
         readonly md: 8;
         readonly none: 0;
         readonly sm: 6;
@@ -56,6 +57,7 @@ declare const _default: {
         readonly '600': 28;
         readonly '700': 32;
         readonly '800': 36;
+        readonly '900': 40;
         readonly '950': 48;
         readonly '975': 52;
         readonly '1050': 62;
@@ -97,6 +99,7 @@ declare const _default: {
         readonly '700': 56;
         readonly '800': 64;
         readonly '900': 72;
+        readonly '1000': 80;
     };
 };
 export default _default;

package/build/tokens/primitive.js

@@ -4,6 +4,7 @@
 export default {
     borderRadius: {
         full: 9999,
+        lg: 12,
         md: 8,
         none: 0,
         sm: 6,
@@ -56,6 +57,7 @@ export default {
         '600': 28,
         '700': 32,
         '800': 36,
+        '900': 40,
         '950': 48,
         '975': 52,
         '1050': 62,
@@ -97,5 +99,6 @@ export default {
         '700': 56,
         '800': 64,
         '900': 72,
+        '1000': 80,
     },
 };

package/build/tokens/space.d.ts

@@ -19,5 +19,6 @@ declare const _default: {
     readonly '700': 56;
     readonly '800': 64;
     readonly '900': 72;
+    readonly '1000': 80;
 };
 export default _default;

package/build/tokens/space.js

@@ -19,4 +19,5 @@ export default {
     '700': 56,
     '800': 64,
     '900': 72,
+    '1000': 80,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.35.1",
+  "version": "0.35.3",
   "description": "Utility Warehouse React Native UI library",
   "license": "Apache-2.0",
   "repository": {
@@ -78,10 +78,10 @@
     "vitest": "^4.1.7",
     "@utilitywarehouse/hearth-storybook-utils": "0.0.0",
     "@utilitywarehouse/hearth-fonts": "^0.1.1",
-    "@utilitywarehouse/hearth-react-icons": "^0.8.7",
-    "@utilitywarehouse/hearth-react-native-icons": "^0.8.6",
+    "@utilitywarehouse/hearth-react-icons": "^0.9.0",
+    "@utilitywarehouse/hearth-react-native-icons": "^0.9.0",
     "@utilitywarehouse/hearth-svg-assets": "^0.6.5",
-    "@utilitywarehouse/hearth-tokens": "^0.4.3"
+    "@utilitywarehouse/hearth-tokens": "^0.4.4"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": ">=5.0.0",

package/public/llms/components/modal.md

@@ -106,6 +106,7 @@ The Modal component extends the `BottomSheetModal` component and accepts all of
 | `footerStyle`                 | `StyleProp<ViewStyle>`                                             | Styles applied to the footer container, useful for sticky footer shadows or custom spacing                             | -              |
 | `closeButtonProps`            | `Omit<UnstyledIconButtonProps, 'children'>`                        | Additional props to pass to the close button                                                                           | -              |
 | `fullscreen`                  | `boolean`                                                          | Whether the modal should take up the full screen height                                                                | `false`        |
+| `testID`                      | `string`                                                           | Applied to the modal content container, useful for locating the modal in e2e tests                                     | -              |
 
 When `footer` is provided, the primary and secondary button props are not available. Build your footer actions directly inside the custom footer content instead.
 

package/public/llms/docs/ai-tooling.md

@@ -1,110 +1,35 @@
 # AI Tooling
 
-- [Figma MCP Server](#figma-mcp-server)
+- [Plugin](#plugin)
 - [llms.txt and markdown docs](#llms-txt-and-markdown-docs)
 - [Agent Skill](#agent-skill)
 - [Hearth React Native MCP Server](#hearth-react-native-mcp-server)
 
-The Hearth React Native AI Tools are intended to help your AI agents use Hearth React Native
-components to build Utility Warehouse UIs. They provide access to APIs,
-component documentation and usage guidelines, so your agent has the context it
-needs to build with Hearth correctly.
+The Hearth React Native AI Tools are intended to help your AI agents use Hearth
+React Native components to build Utility Warehouse UIs. They provide access to
+APIs, component documentation and usage guidelines, so your agent has the
+context it needs to build with Hearth correctly.
 
-If you're building UI from a Figma design, start with Figma's own
-[Figma MCP Server](#figma-mcp-server), for most people building UI, this is
-the first step, since it gives your agent direct access to the design you're
-implementing. Hearth's own AI tooling then supplements it for most use cases,
-filling in the parts of the Hearth React Native API and usage guidance that
-the design alone doesn't capture:
+If you're building UI from a design in Figma, start with Figma's MCP Server.
+This should be the first step, since it gives your agent direct access to the
+design you're implementing. You can read more information about setting this up
+in the root AI Toolkit documentation.
+
+Hearth's own AI tooling then supplements it for most use cases, filling in the
+parts of the Hearth React Native API and usage guidance that the design alone
+doesn't capture:
 
 - [llms.txt](https://hearth.prod.uw.systems/react-native/llms.txt) and markdown docs
 - [SKILL.md](https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/SKILL.md)
 - [Hearth MCP Server](https://main--68e3ad5c6e80b57678cad6c6.chromatic.com/mcp)
 
-## Figma MCP Server
-
-If you're implementing a Figma design, this should be the first tool you reach
-for. Figma's [Dev Mode MCP Server](https://developers.figma.com/docs/figma-mcp-server/)
-gives your agent direct access to the design file itself, layout, variables,
-and generated code for a selected frame or component. This is a Figma-provided
-tool, separate from the Hearth React Native MCP Server below.
-
-### If you're using Claude
-
-Utility Warehouse has the [Figma connector](https://claude.com/connectors/figma)
-enabled at an organisation level. It already includes the Figma MCP Server's
-tools, so if you have it connected there's nothing else to set up — just
-prompt Claude with a link to the Figma design you want to build, and it will
-pull in the design context itself.
-
-To check it's connected for you:
-
-1. In Claude, go to **Customize > Connectors**.
-2. Find **Figma** and click **Connect**, authenticating with your Figma account if prompted.
-3. In a conversation, open the **+** menu (or type `/`) in the chat box, then **Connectors**, and toggle **Figma** on. Once it's connected, Claude can also bring it into a conversation on its own when a Figma link is relevant, so you don't have to toggle it every time.
-
-If you're not using Claude, or don't have the connector available, set up the
-Figma MCP Server manually instead.
-
-### Manual setup
-
-Figma recommends the **remote server** for most people, as it supports the
-broadest set of features. Add an entry to your `mcp.json` file:
-
-```json
-{
-  "servers": {
-    "figma": {
-      "url": "https://mcp.figma.com/mcp",
-      "type": "http"
-    }
-  }
-}
-```
-
-See Figma's [remote server installation guide](https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/)
-for the full setup flow, including the OAuth step required to grant the server
-access to your Figma account.
-
-Alternatively, a **local server** runs from the Figma desktop app itself (Dev
-Mode → enable desktop MCP server), which some organisations use instead of the
-remote option:
-
-```json
-{
-  "servers": {
-    "figma-desktop": {
-      "url": "http://127.0.0.1:3845/mcp",
-      "type": "http"
-    }
-  }
-}
-```
-
-See Figma's [local server installation guide](https://developers.figma.com/docs/figma-mcp-server/local-server-installation/)
-for prerequisites and setup.
-
-### Works with Hearth components
-
-Hearth publishes [Figma Code Connect](https://help.figma.com/hc/en-us/articles/23920389749655-Code-Connect)
-mappings for its React Native components. In practice, this means: when the
-Figma frame you're implementing uses a component we've mapped, the Figma MCP
-Server returns real Hearth code, for example `<Button variant="emphasis">`,
-rather than generic markup reconstructed from layer names and styles. You
-don't need to know how these mappings work under the hood, just that a mapped
-component gets you code that's ready to use, with little to no rework needed.
-
-### Supplement it with Hearth's AI tooling
-
-The Figma MCP Server tells your agent what design it's looking at, and, via
-Code Connect, which Hearth component to use. It doesn't know the rest of the
-Hearth React Native API: prop combinations a mapping doesn't cover,
-accessibility guidance, or usage conventions.
+## Plugin
 
-For most use cases, that's exactly what the tools below are for. Set up the
-Figma MCP Server alongside the Hearth Agent Skill and/or Hearth MCP Server,
-rather than in place of them, so your agent can confirm the full prop API,
-correct usage, and any guidance the Figma mapping doesn't capture.
+The Hearth AI Toolkit plugin is the recommended way to set up your agent with
+the Hearth React Native AI Tools. It will automatically add the skill and MCP
+server to your agent configuration, and ensure that your agent has access to
+the latest Hearth React Native documentation and usage guidance. How to install
+and use the plugin is documented in the root AI Toolkit documentation.
 
 ## llms.txt and markdown docs
 

package/public/llms/docs/introduction.md

@@ -1,7 +1,7 @@
 # Hearth React Native
 
 React Native component library for building UIs at Utility Warehouse.<br/>
-Current version: v0.35.1
+Current version: v0.35.3
 
 Hearth React Native is a comprehensive design system library for React Native, providing reusable components, consistent styling, and tools to streamline UI development. It is built to enhance productivity and maintain design consistency across projects.
 

package/public/llms.txt

@@ -8,7 +8,7 @@
   - Using Predefined Shadows
   - Components with Shadow Props
 - [AI Tooling](llms/docs/ai-tooling.md)
-  - Figma MCP Server
+  - Plugin
   - llms.txt and markdown docs
   - Agent Skill
   - Hearth React Native MCP Server