@utilitywarehouse/hearth-react-native 0.35.8 → 0.36.0

package/build/components/Tabs/Tab.js

@@ -38,11 +38,11 @@ const styles = StyleSheet.create(theme => ({
             _hover: {
                 backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
             },
-            // '_focus-visible': {
-            //   ...theme.helpers.focusVisible,
-            //   outlineOffset: -2,
-            //   borderRadius: theme.borderRadius.sm,
-            // },
+            '_focus-visible': {
+                ...theme.helpers.focusVisible,
+                outlineOffset: -2,
+                borderRadius: theme.borderRadius.sm,
+            },
             _active: {
                 backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
             },

package/build/components/Tabs/TabPanel.d.ts

@@ -1,3 +1,3 @@
 import type TabPanelProps from './TabPanel.props';
-declare const _default: import("react").MemoExoticComponent<({ value, children, keepMounted, style, ...rest }: TabPanelProps) => import("react/jsx-runtime").JSX.Element | null>;
+declare const _default: import("react").MemoExoticComponent<({ value, children, keepMounted, style, ...rest }: TabPanelProps) => import("react").JSX.Element | null>;
 export default _default;

package/build/components/Tabs/Tabs.d.ts

@@ -1,6 +1,6 @@
 import type TabsProps from './Tabs.props';
 declare const Tabs: {
-    ({ value: controlledValue, defaultValue, onValueChange, size, disabled, children, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
+    ({ value: controlledValue, defaultValue, onValueChange, size, disabled, children, ...props }: TabsProps): import("react").JSX.Element;
     displayName: string;
 };
 export default Tabs;

package/build/components/Tabs/TabsList.d.ts

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

package/build/components/Textarea/Textarea.d.ts

@@ -7,5 +7,5 @@ export declare const TextareaComponent: import("@gluestack-ui/textarea/lib/types
     };
 }, import("react-native").TextInputProps>;
 export declare const TextareaField: import("react").ForwardRefExoticComponent<import("react-native").TextInputProps & import("react").RefAttributes<import("react-native").TextInputProps> & import("@gluestack-ui/textarea/lib/typescript/types").IInputProps>;
-declare const Textarea: ({ validationStatus, children, resizable, defaultHeight, disabled, focused, readonly, label, labelVariant, helperText, validText, invalidText, required, helperIcon, onLayout, ...props }: TextareaProps) => import("react/jsx-runtime").JSX.Element;
+declare const Textarea: ({ validationStatus, children, resizable, defaultHeight, disabled, focused, readonly, label, labelVariant, helperText, validText, invalidText, required, helperIcon, onLayout, ...props }: TextareaProps) => import("react").JSX.Element;
 export default Textarea;

package/build/components/Textarea/TextareaField.d.ts

@@ -1,6 +1,6 @@
 import { TextInputProps } from 'react-native';
 declare const TextareaField: {
-    ({ style, ...props }: TextInputProps): import("react/jsx-runtime").JSX.Element;
+    ({ style, ...props }: TextInputProps): import("react").JSX.Element;
     displayName: string;
 };
 export default TextareaField;

package/build/components/Textarea/TextareaRoot.d.ts

@@ -6,7 +6,7 @@ declare const TextareaRoot: {
             disabled?: boolean;
             readonly?: boolean;
         };
-    }): import("react/jsx-runtime").JSX.Element;
+    }): import("react").JSX.Element;
     displayName: string;
 };
 export default TextareaRoot;

package/build/components/ThemedImage/ThemedImage.d.ts

@@ -6,7 +6,7 @@ import type ThemedImageProps from './ThemedImage.props';
  * @param ...rest - All other Image props including width/height for SVG components
  */
 declare const ThemedImage: {
-    ({ light, dark, ...props }: ThemedImageProps): import("react/jsx-runtime").JSX.Element;
+    ({ light, dark, ...props }: ThemedImageProps): import("react").JSX.Element;
     displayName: string;
 };
 export default ThemedImage;

package/build/components/TimePicker/TimePicker.d.ts

@@ -1,6 +1,6 @@
 import type { TimePickerProps } from './TimePicker.props';
 declare const TimePicker: {
-    ({ timeZone, date, onChange, use12Hours, minuteInterval, hideFooter, style, ref, onCancel, }: TimePickerProps): import("react/jsx-runtime").JSX.Element;
+    ({ timeZone, date, onChange, use12Hours, minuteInterval, hideFooter, style, ref, onCancel, }: TimePickerProps): import("react").JSX.Element;
     displayName: string;
 };
 export default TimePicker;

package/build/components/TimePicker/TimePickerView.d.ts

@@ -8,5 +8,5 @@ type TimePickerViewProps = {
     minuteInterval?: number;
     containerHeight?: number;
 };
-declare const _default: import("react").MemoExoticComponent<({ currentDate, onSelectDate, timeZone, use12Hours, minuteInterval, }: TimePickerViewProps) => import("react/jsx-runtime").JSX.Element>;
+declare const _default: import("react").MemoExoticComponent<({ currentDate, onSelectDate, timeZone, use12Hours, minuteInterval, }: TimePickerViewProps) => import("react").JSX.Element>;
 export default _default;

package/build/components/TimePicker/TimePickerWheel.d.ts

@@ -4,5 +4,5 @@ type TimePickerWheelProps = {
     setValue?: (value: any) => void;
     items: PickerOption[];
 };
-declare const TimePickerWheel: ({ value, setValue, items }: TimePickerWheelProps) => import("react/jsx-runtime").JSX.Element;
+declare const TimePickerWheel: ({ value, setValue, items }: TimePickerWheelProps) => import("react").JSX.Element;
 export default TimePickerWheel;

package/build/components/TimePicker/TimePickerWheel.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import WheelPicker from '@quidone/react-native-wheel-picker';
 import { useCallback, useMemo } from 'react';
-import { View } from 'react-native';
+import { StyleSheet as RNStyleSheet, View } from 'react-native';
 import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
 import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
@@ -58,7 +58,7 @@ const styles = StyleSheet.create(theme => ({
         justifyContent: 'center',
     },
     overlayContainer: {
-        ...StyleSheet.absoluteFillObject,
+        ...RNStyleSheet.absoluteFill,
         justifyContent: 'center',
         alignItems: 'center',
     },

package/build/components/TimePicker/TimePickerWheel.web.d.ts

@@ -4,5 +4,5 @@ type TimePickerWheelProps = {
     setValue?: (value: any) => void;
     items: PickerOption[];
 };
-declare const _default: import("react").MemoExoticComponent<({ value, setValue, items }: TimePickerWheelProps) => import("react/jsx-runtime").JSX.Element>;
+declare const _default: import("react").MemoExoticComponent<({ value, setValue, items }: TimePickerWheelProps) => import("react").JSX.Element>;
 export default _default;

package/build/components/TimePickerInput/TimePickerInput.d.ts

@@ -1,6 +1,6 @@
 import type TimePickerInputProps from './TimePickerInput.props';
 declare const TimePickerInput: {
-    ({ validationStatus, disabled, focused, readonly, placeholder, inBottomSheet, format, openButtonLabel, autoCloseOnSelect, label, labelVariant, helperText, helperIcon, validText, invalidText, required, onChange, onChangeText, onBlur, onFocus, value, timePickerProps, onClear, ...rest }: TimePickerInputProps): import("react/jsx-runtime").JSX.Element;
+    ({ validationStatus, disabled, focused, readonly, placeholder, inBottomSheet, format, openButtonLabel, autoCloseOnSelect, label, labelVariant, helperText, helperIcon, validText, invalidText, required, onChange, onChangeText, onBlur, onFocus, value, timePickerProps, onClear, ...rest }: TimePickerInputProps): import("react").JSX.Element;
     displayName: string;
 };
 export default TimePickerInput;

package/build/components/TimePickerInput/TimePickerInputDoneButton.d.ts

@@ -2,7 +2,7 @@ declare const TimePickerInputDoneButton: {
     ({ accessoryViewID, closeKeyboard, }: {
         accessoryViewID: string;
         closeKeyboard: () => void;
-    }): import("react/jsx-runtime").JSX.Element;
+    }): import("react").JSX.Element;
     DisplayName: string;
 };
 export default TimePickerInputDoneButton;

package/build/components/Timeline/Timeline.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 import type { TimelineProps } from './Timeline.props';
 declare const Timeline: {
-    ({ children, variant, style, ...rest }: TimelineProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, variant, style, ...rest }: TimelineProps): React.JSX.Element;
     displayName: string;
 };
 export default Timeline;

package/build/components/Timeline/TimelineItem.d.ts

@@ -1,6 +1,6 @@
 import type { TimelineItemProps } from './Timeline.props';
 declare const TimelineItem: {
-    ({ children, helperText, label, position, state, style, variant, accessibilityLabel: accessibilityLabelProp, accessible: accessibleProp, ...rest }: TimelineItemProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, helperText, label, position, state, style, variant, accessibilityLabel: accessibilityLabelProp, accessible: accessibleProp, ...rest }: TimelineItemProps): import("react").JSX.Element;
     displayName: string;
 };
 export default TimelineItem;

package/build/components/ToggleButton/ToggleButton.d.ts

@@ -1,7 +1,7 @@
 import type { ToggleButtonProps } from './ToggleButton.props';
-export declare const ToggleButtonText: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("react-native/types").TextProps & {
+export declare const ToggleButtonText: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("react-native").TextProps & {
     toggled: boolean;
-}> & import("react-native/types").TextProps & {
+}> & import("react-native").TextProps & {
     toggled: boolean;
 }>;
 export declare const ToggleButtonIcon: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("..").IconProps & {
@@ -10,7 +10,7 @@ export declare const ToggleButtonIcon: import("react").ForwardRefExoticComponent
     toggled: boolean;
 }>;
 declare const ToggleButton: {
-    ({ text, toggled, onToggle, ...props }: ToggleButtonProps): import("react/jsx-runtime").JSX.Element;
+    ({ text, toggled, onToggle, ...props }: ToggleButtonProps): import("react").JSX.Element;
     displayName: string;
 };
 export default ToggleButton;

package/build/components/ToggleButton/ToggleButtonIcon.d.ts

@@ -2,7 +2,7 @@ import IconProps from '../Icon/Icon.props';
 declare const ButtonIcon: {
     ({ children, toggled, as, ...props }: IconProps & {
         toggled: boolean;
-    }): import("react/jsx-runtime").JSX.Element;
+    }): import("react").JSX.Element;
     displayName: string;
 };
 export default ButtonIcon;

package/build/components/ToggleButton/ToggleButtonIcon.js

@@ -7,8 +7,7 @@ const ButtonIcon = ({ children, toggled, as = TickSmallIcon, ...props }) => {
     styles.useVariants({ toggled });
     const IconAny = Icon;
     return (_jsx(IconAny, { as: as, ...props, style: Platform.OS === 'web'
-            ? // @ts-expect-error - Spread types may only be created from object types.
-                { ...styles.icon, ...props.style }
+            ? { ...styles.icon, ...props.style }
             : [styles.icon, props.style], children: children }));
 };
 ButtonIcon.displayName = 'ButtonIcon';

package/build/components/ToggleButton/ToggleButtonRoot.d.ts

@@ -5,7 +5,7 @@ declare const ButtonRoot: {
             active?: boolean;
             disabled?: boolean;
         };
-    }): import("react/jsx-runtime").JSX.Element;
+    }): import("react").JSX.Element;
     displayName: string;
 };
 export default ButtonRoot;

package/build/components/ToggleButton/ToggleButtonRoot.js

@@ -32,7 +32,7 @@ const styles = StyleSheet.create(theme => ({
         borderColor: theme.color.interactive.neutral.border.subtle,
         height: theme.components.toggleButton.height,
         _web: {
-            // '_focus-visible': theme.helpers.focusVisible,
+            '_focus-visible': theme.helpers.focusVisible,
             _hover: {
                 backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
             },

package/build/components/ToggleButton/ToggleButtonText.d.ts

@@ -2,7 +2,7 @@ import { type TextProps } from 'react-native';
 declare const ToggleButtonText: {
     ({ children, toggled, ...props }: TextProps & {
         toggled: boolean;
-    }): import("react/jsx-runtime").JSX.Element;
+    }): import("react").JSX.Element;
     displayName: string;
 };
 export default ToggleButtonText;

package/build/components/ToggleButtonCard/ToggleButtonCard.d.ts

@@ -1,11 +1,11 @@
 import ToggleButtonCardProps from './ToggleButtonCard.props';
 import ToggleButtonCardGroupProps from './ToggleButtonCardGroup.props';
 declare const ToggleButtonCardGroup: {
-    ({ onChange, onValueChange, ...props }: ToggleButtonCardGroupProps): import("react/jsx-runtime").JSX.Element;
+    ({ onChange, onValueChange, ...props }: ToggleButtonCardGroupProps): import("react").JSX.Element;
     displayName: string;
 };
 declare const ToggleButtonCard: {
-    ({ children, contentStyle, ...props }: ToggleButtonCardProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, contentStyle, ...props }: ToggleButtonCardProps): import("react").JSX.Element;
     displayName: string;
 };
 export { ToggleButtonCard, ToggleButtonCardGroup };

package/build/components/ToggleButtonCard/ToggleButtonCardGroup.d.ts

@@ -1,6 +1,6 @@
 import ToggleButtonCardGroupProps from './ToggleButtonCardGroup.props';
 declare const ToggleButtonCardGroup: {
-    ({ children, gap, style, flexDirection, flexWrap, justifyContent, alignItems, columns, ...props }: ToggleButtonCardGroupProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, gap, style, flexDirection, flexWrap, justifyContent, alignItems, columns, ...props }: ToggleButtonCardGroupProps): import("react").JSX.Element;
     displayName: string;
 };
 export default ToggleButtonCardGroup;

package/build/components/ToggleButtonCard/ToggleButtonCardRoot.d.ts

@@ -6,7 +6,7 @@ declare const ToggleButtonCardRoot: {
             checked?: boolean;
             active?: boolean;
         };
-    }): import("react/jsx-runtime").JSX.Element;
+    }): import("react").JSX.Element;
     displayName: string;
 };
 export default ToggleButtonCardRoot;

package/build/components/ToggleButtonCard/ToggleButtonCardRoot.js

@@ -56,11 +56,6 @@ const styles = StyleSheet.create(theme => ({
                 },
             },
         },
-        _web: {
-        // '_focus-visible': {
-        //   ...theme.helpers.focusVisible,
-        // },
-        },
     },
     buttonContainer: {
         flexDirection: 'row',

package/build/components/UnstyledIconButton/UnstyledIconButton.d.ts

@@ -1,6 +1,6 @@
 import { UnstyledIconButtonProps } from './UnstyledIconButton.props';
 declare const UnstyledIconButton: {
-    ({ icon, disabled, pressed, size, inverted, iconStyle, ...props }: UnstyledIconButtonProps): import("react/jsx-runtime").JSX.Element;
+    ({ icon, disabled, pressed, size, inverted, iconStyle, ...props }: UnstyledIconButtonProps): import("react").JSX.Element;
     displayName: string;
 };
 export default UnstyledIconButton;

package/build/components/UnstyledIconButton/UnstyledIconButtonIcon.d.ts

@@ -1,6 +1,6 @@
 import IconProps from '../Icon/Icon.props';
 declare const UnstyledIconButtonIcon: {
-    ({ children, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, ...props }: IconProps): import("react").JSX.Element;
     displayName: string;
 };
 export default UnstyledIconButtonIcon;

package/build/components/UnstyledIconButton/UnstyledIconButtonIcon.js

@@ -6,10 +6,9 @@ import { useUnstyledIconButtonContext } from './UnstyledIconButton.context';
 const UnstyledIconButtonIcon = ({ children, ...props }) => {
     const { active, inverted, size } = useUnstyledIconButtonContext();
     styles.useVariants({ active, inverted, size });
-    return (_jsx(Icon, { ...props, style: Platform.OS === 'web'
-            ? // @ts-expect-error - Spread types may only be created from object types.
-                { ...styles.icon, ...props.style }
-            : [styles.icon, props.style], children: children }));
+    return (_jsx(Icon, { ...props, style: (Platform.OS === 'web'
+            ? { ...styles.icon, ...props.style }
+            : [styles.icon, props.style]), children: children }));
 };
 UnstyledIconButtonIcon.displayName = 'UnstyledIconButtonIcon';
 const styles = StyleSheet.create(theme => ({

package/build/components/UnstyledIconButton/UnstyledIconButtonRoot.d.ts

@@ -5,7 +5,7 @@ declare const UnstyledIconButtonRoot: {
             active?: boolean;
             disabled?: boolean;
         };
-    }): import("react/jsx-runtime").JSX.Element;
+    }): import("react").JSX.Element;
     displayName: string;
 };
 export default UnstyledIconButtonRoot;

package/build/components/UnstyledIconButton/UnstyledIconButtonRoot.js

@@ -17,7 +17,7 @@ const styles = StyleSheet.create(theme => ({
         alignItems: 'center',
         borderRadius: theme.borderRadius.sm,
         _web: {
-        // '_focus-visible': theme.helpers.focusVisible,
+            '_focus-visible': theme.helpers.focusVisible,
         },
         variants: {
             disabled: {

package/build/components/UnstyledIconButton/UnstyledIconButtonSpinner.d.ts

@@ -1,6 +1,6 @@
 import type { SpinnerProps } from '../Spinner';
 declare const UnstyledIconButtonSpinner: {
-    ({ color, ...props }: Omit<SpinnerProps, "size">): import("react/jsx-runtime").JSX.Element;
+    ({ color, ...props }: Omit<SpinnerProps, "size">): import("react").JSX.Element;
     displayName: string;
 };
 export default UnstyledIconButtonSpinner;

package/build/core/index.d.ts

@@ -1,5 +1,5 @@
-export { createUnistylesElement, Display, getServerUnistyles, Hide, hydrateServerUnistyles, mq, NavigationBar, resetServerUnistyles, ScopedTheme, StatusBar, StyleSheet, UnistylesRuntime, useServerUnistyles, useUnistyles, withUnistyles, } from 'react-native-unistyles';
-export type { UnistylesBreakpoints, UnistylesThemes, UnistylesVariants, } from 'react-native-unistyles';
 export * from './breakpoints';
 export * from './themes';
+export { Display, Hide, ScopedTheme, StyleSheet, UnistylesRuntime, createUnistylesElement, getServerUnistyles, hydrateServerUnistyles, mq, resetServerUnistyles, useServerUnistyles, useUnistyles, withUnistyles, } from 'react-native-unistyles';
+export type { UnistylesBreakpoints, UnistylesThemes, UnistylesVariants, } from 'react-native-unistyles';
 export type * from '../types/unistyles';

package/build/core/index.js

@@ -1,3 +1,3 @@
-export { createUnistylesElement, Display, getServerUnistyles, Hide, hydrateServerUnistyles, mq, NavigationBar, resetServerUnistyles, ScopedTheme, StatusBar, StyleSheet, UnistylesRuntime, useServerUnistyles, useUnistyles, withUnistyles, } from 'react-native-unistyles';
 export * from './breakpoints';
 export * from './themes';
+export { Display, Hide, ScopedTheme, StyleSheet, UnistylesRuntime, createUnistylesElement, getServerUnistyles, hydrateServerUnistyles, mq, resetServerUnistyles, useServerUnistyles, useUnistyles, withUnistyles, } from 'react-native-unistyles';

package/build/core/themes.d.ts

@@ -36,10 +36,10 @@ export declare const lightTheme: {
             pig: string;
         };
         readonly focusVisible: {
-            outlineStyle: string;
-            outlineWidth: number;
-            outlineColor: "#101010";
-            outlineOffset: number;
+            readonly outlineStyle: "solid";
+            readonly outlineWidth: 2;
+            readonly outlineColor: "#101010";
+            readonly outlineOffset: 1;
         };
     };
     readonly platform: "ios" | "android" | "windows" | "macos" | "web";
@@ -1337,10 +1337,10 @@ export declare const darkTheme: {
             pig: string;
         };
         readonly focusVisible: {
-            outlineStyle: string;
-            outlineWidth: number;
-            outlineColor: "#ebebeb";
-            outlineOffset: number;
+            readonly outlineStyle: "solid";
+            readonly outlineWidth: 2;
+            readonly outlineColor: "#ebebeb";
+            readonly outlineOffset: 1;
         };
     };
     readonly platform: "ios" | "android" | "windows" | "macos" | "web";
@@ -2650,10 +2650,10 @@ export declare const themes: {
                 pig: string;
             };
             readonly focusVisible: {
-                outlineStyle: string;
-                outlineWidth: number;
-                outlineColor: "#101010";
-                outlineOffset: number;
+                readonly outlineStyle: "solid";
+                readonly outlineWidth: 2;
+                readonly outlineColor: "#101010";
+                readonly outlineOffset: 1;
             };
         };
         readonly platform: "ios" | "android" | "windows" | "macos" | "web";
@@ -3951,10 +3951,10 @@ export declare const themes: {
                 pig: string;
             };
             readonly focusVisible: {
-                outlineStyle: string;
-                outlineWidth: number;
-                outlineColor: "#ebebeb";
-                outlineOffset: number;
+                readonly outlineStyle: "solid";
+                readonly outlineWidth: 2;
+                readonly outlineColor: "#ebebeb";
+                readonly outlineOffset: 1;
             };
         };
         readonly platform: "ios" | "android" | "windows" | "macos" | "web";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.35.8",
+  "version": "0.36.0",
   "description": "Utility Warehouse React Native UI library",
   "license": "Apache-2.0",
   "repository": {
@@ -47,44 +47,43 @@
   "devDependencies": {
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
     "@figma/code-connect": "^1.4.9",
-    "@gorhom/bottom-sheet": "5.2.6",
-    "@storybook/addon-a11y": "^10.2.1",
-    "@storybook/addon-docs": "^10.2.1",
-    "@storybook/addon-mcp": "^0.6.0",
-    "@storybook/addon-vitest": "^10.2.1",
-    "@storybook/react-native-web-vite": "^10.2.1",
+    "@gorhom/bottom-sheet": "5.2.14",
+    "@storybook/addon-a11y": "^10.5.6",
+    "@storybook/addon-docs": "^10.5.6",
+    "@storybook/addon-mcp": "^0.7.0",
+    "@storybook/addon-vitest": "^10.5.6",
+    "@storybook/react-native-web-vite": "^10.5.6",
     "@types/prismjs": "^1.26.5",
-    "@types/react": "^19.1.10",
-    "@types/react-dom": "^19.1.6",
-    "@types/react-native": "^0.72.8",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.3",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
     "globals": "^15.15.0",
     "playwright": "^1.59.1",
     "prismjs": "^1.30.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "react-native": "0.80.0",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-native": "0.86.2",
     "react-native-edge-to-edge": "1.6.1",
-    "react-native-gesture-handler": "2.28.0",
-    "react-native-nitro-modules": "0.31.4",
-    "react-native-reanimated": "4.1.3",
-    "react-native-safe-area-context": "5.6.1",
-    "react-native-svg": "^15.12.1",
-    "react-native-unistyles": "3.0.17",
+    "react-native-gesture-handler": "2.32.0",
+    "react-native-nitro-modules": "0.36.5",
+    "react-native-reanimated": "4.5.1",
+    "react-native-safe-area-context": "5.7.0",
+    "react-native-svg": "15.15.4",
+    "react-native-unistyles": "3.3.0",
     "react-native-web": "^0.20.0",
-    "react-native-worklets": "^0.5.1",
+    "react-native-worklets": "0.10.1",
     "remark-gfm": "^4.0.1",
-    "storybook": "^10.4.1",
+    "storybook": "^10.5.6",
     "vite": "^7.1.3",
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^4.1.7",
     "@utilitywarehouse/hearth-fonts": "^0.1.1",
-    "@utilitywarehouse/hearth-react-native-icons": "^0.9.0",
-    "@utilitywarehouse/hearth-react-icons": "^0.9.0",
-    "@utilitywarehouse/hearth-svg-assets": "^0.6.5",
-    "@utilitywarehouse/hearth-tokens": "^0.4.4",
-    "@utilitywarehouse/hearth-storybook-utils": "0.0.0"
+    "@utilitywarehouse/hearth-react-native-icons": "^0.9.2",
+    "@utilitywarehouse/hearth-svg-assets": "^0.6.6",
+    "@utilitywarehouse/hearth-react-icons": "^0.9.2",
+    "@utilitywarehouse/hearth-storybook-utils": "0.0.0",
+    "@utilitywarehouse/hearth-tokens": "^0.4.6"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": ">=5.0.0",

package/public/llms/components/badge.md

@@ -100,6 +100,21 @@ The `Badge` component has different sizes to style the spinner.
       </Box>
     );
   })}
+  <VariantTitle title="Flat base">
+    <Flex direction="row" spacing="md">
+      <Badge colorScheme="info" variant="subtle" flatBase>
+        subtle flatBase
+      </Badge>
+      <Badge colorScheme="info" variant="emphasis" flatBase>
+        emphasis flatBase
+      </Badge>
+    </Flex>
+  </VariantTitle>
+  <VariantTitle title="With icon">
+    <Badge colorScheme="info" icon={TickSmallIcon}>
+      With icon
+    </Badge>
+  </VariantTitle>
 </Flex>
 ```
 

package/public/llms/components/body-text.md

@@ -77,5 +77,20 @@ The `BodyText` component has different sizes to style the text.
       Hello there, I'm some body text!
     </BodyText>
   </VariantTitle>
+  <VariantTitle title="Semibold">
+    <BodyText {...args} weight="semibold">
+      Hello there, I'm some semi bold body text!
+    </BodyText>
+  </VariantTitle>
+  <VariantTitle title="Bold">
+    <BodyText {...args} weight="bold">
+      Hello there, I'm some bold body text!
+    </BodyText>
+  </VariantTitle>
+  <VariantTitle title="Underline">
+    <BodyText {...args} underline>
+      Hello there, I'm some underlined body text!
+    </BodyText>
+  </VariantTitle>
 </Box>
 ```

package/public/llms/components/button.md

@@ -163,6 +163,18 @@ const MyComponent = () => {
         ))}
     </Flex>
   ))}
+  <Flex direction="column" spacing="lg">
+    <VariantTitle title="Padding None" invert={inverted}>
+      <Button
+        text={text}
+        colorScheme="functional"
+        variant="ghost"
+        size="sm"
+        inverted={inverted}
+        paddingNone
+      />
+    </VariantTitle>
+  </Flex>
 </Flex>
 ```
 

package/public/llms/components/description-list.md

@@ -94,6 +94,38 @@ import { DescriptionList, DescriptionListItem } from '@utilitywarehouse/hearth-r
       ))}
     </DescriptionList>
   </VariantTitle>
+  <VariantTitle title="With links">
+    <DescriptionList direction="row">
+      <DescriptionListItem
+        heading="Account Number"
+        description="123456789"
+        trailingContent={<Link href="https://example.com/account">Manage account</Link>}
+      />
+      <DescriptionListItem
+        heading="Status"
+        description="Active"
+        trailingContent={
+          <Link href="https://example.com/status" showIcon={false}>
+            Change
+          </Link>
+        }
+      />
+    </DescriptionList>
+  </VariantTitle>
+  <VariantTitle title="With numeric values">
+    <DescriptionList direction="row">
+      <DescriptionListItem
+        heading="Account Balance"
+        description="Current balance"
+        numericValue="£5,432.10"
+      />
+      <DescriptionListItem
+        heading="Available Credit"
+        description="Credit limit minus current balance"
+        numericValue="£1,234.56"
+      />
+    </DescriptionList>
+  </VariantTitle>
 </Flex>
 ```
 

package/public/llms/components/detail-text.md

@@ -91,5 +91,10 @@ The `DetailText` component has different sizes to style the text.
       Hello there, I'm some detail text!
     </DetailText>
   </VariantTitle>
+  <VariantTitle title="Underline">
+    <DetailText {...args} underline>
+      Hello there, I'm some underlined detail text!
+    </DetailText>
+  </VariantTitle>
 </Box>
 ```