@utilitywarehouse/hearth-react-native 0.5.0 → 0.7.0

package/build/components/ProgressStepper/ProgressStep.js

@@ -4,12 +4,12 @@ import { StyleSheet } from 'react-native-unistyles';
 import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { Icon } from '../Icon';
 import { BodyText } from '../BodyText';
-const ProgressStep = ({ state, index = 0, isLast = false, ...rest }) => {
-    styles.useVariants({ state, isLast });
+const ProgressStep = ({ status, index = 0, isLast = false, ...rest }) => {
+    styles.useVariants({ status, isLast });
     const renderStepNumber = () => {
         return (_jsx(BodyText, { size: "md", weight: "semibold", style: styles.text, children: index + 1 }));
     };
-    return (_jsxs(View, { style: styles.container, accessible: true, "aria-label": `Step ${index + 1}, ${rest.id}, ${state}`, ...rest, children: [_jsx(View, { style: styles.step, children: state === 'complete' ? (_jsx(Icon, { as: TickSmallIcon, width: 20, height: 20, style: styles.text })) : state === 'active' ? (_jsx(View, { style: styles.inner, children: renderStepNumber() })) : (renderStepNumber()) }), !isLast && _jsx(View, { style: styles.connector })] }));
+    return (_jsxs(View, { style: styles.container, accessible: true, "aria-label": `Step ${index + 1}, ${rest.id}, ${status}`, ...rest, children: [_jsx(View, { style: styles.step, children: status === 'complete' ? (_jsx(Icon, { as: TickSmallIcon, width: 20, height: 20, style: styles.text })) : status === 'active' ? (_jsx(View, { style: styles.inner, children: renderStepNumber() })) : (renderStepNumber()) }), !isLast && _jsx(View, { style: styles.connector })] }));
 };
 ProgressStep.displayName = 'ProgressStep';
 const styles = StyleSheet.create(theme => ({
@@ -37,7 +37,7 @@ const styles = StyleSheet.create(theme => ({
         alignItems: 'center',
         justifyContent: 'center',
         variants: {
-            state: {
+            status: {
                 complete: {
                     backgroundColor: theme.color.surface.brand.default,
                 },
@@ -64,7 +64,7 @@ const styles = StyleSheet.create(theme => ({
     },
     text: {
         variants: {
-            state: {
+            status: {
                 complete: {
                     color: theme.color.text.inverted,
                 },
@@ -83,7 +83,7 @@ const styles = StyleSheet.create(theme => ({
         flex: 1,
         height: theme.components.progressStepper.bar.height,
         variants: {
-            state: {
+            status: {
                 complete: {
                     backgroundColor: theme.components.progressStepper.bar.complete.backgroundColor,
                 },

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

@@ -1,5 +1,5 @@
 import { ViewProps } from 'react-native';
-export type StepState = 'complete' | 'active' | 'incomplete';
+export type StepStatus = 'complete' | 'active' | 'incomplete';
 export interface ProgressStepperProps extends ViewProps {
     /**
      * Child ProgressStep components
@@ -12,9 +12,9 @@ export interface ProgressStepProps extends ViewProps {
      */
     id: string;
     /**
-     * Current state of the step
+     * Current status of the step
      */
-    state: StepState;
+    status: StepStatus;
 }
 export interface ProgressStepperRootProps extends ViewProps {
     children: React.ReactNode;

package/build/components/ProgressStepper/index.d.ts

@@ -1,3 +1,3 @@
 export { default as ProgressStepper } from './ProgressStepper';
 export { default as ProgressStep } from './ProgressStep';
-export type { ProgressStepperProps, ProgressStepProps, StepState } from './ProgressStepper.props';
+export type { ProgressStepperProps, ProgressStepProps, StepStatus } from './ProgressStepper.props';

package/build/components/Radio/RadioIcon.js

@@ -1,11 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Platform } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { Icon } from '../Icon';
 import { CircleIcon } from '../Icons';
-import { Platform } from 'react-native';
 const RadioIcon = ({ style, ...props }) => {
     return (_jsx(Icon, { as: CircleIcon, ...props, style: Platform.OS === 'web'
-            ? StyleSheet.compose(styles.container, style)
+            ? {
+                // @ts-expect-error - style prop type issue
+                ...styles.container,
+                // @ts-expect-error - style prop type issue
+                ...props.style,
+            }
             : [styles.container, style] }));
 };
 RadioIcon.displayName = 'RadioIcon';

package/build/components/RadioCard/RadioCardIcon.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Platform } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { Icon } from '../Icon';
 import { CircleIcon } from '../Icons';
-import { Platform } from 'react-native';
 const RadioCardIcon = ({ style, ...props }) => {
     return (_jsx(Icon, { as: CircleIcon, ...props, style: Platform.OS === 'web'
-            ? StyleSheet.compose(styles.container, style)
+            ? // @ts-expect-error - style prop type issue
+                { ...styles.container, ...props.style }
             : [styles.container, style] }));
 };
 RadioCardIcon.displayName = 'RadioCardIcon';

package/build/components/Spinner/Spinner.js

@@ -7,7 +7,9 @@ import { Circle, G, Svg } from 'react-native-svg';
 import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
 import { getFlattenedColorValue } from '../../utils';
+// @ts-expect-error - Animated.View type issue
 const AnimatedSvg = Animated.createAnimatedComponent(Svg);
+// @ts-expect-error - Animated.View type issue
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
 const SpinnerRoot = ({ size = 'md', color, ...props }) => {
     const { components } = useTheme();

package/build/components/Spinner/Spinner.web.js

@@ -8,7 +8,9 @@ import { Circle, G, Svg } from 'react-native-svg';
 import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
 import { getFlattenedColorValue } from '../../utils';
+// @ts-expect-error - Animated.View type issue
 const AnimatedSvg = Animated.createAnimatedComponent(Svg);
+// @ts-expect-error - Animated.View type issue
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
 const SpinnerRoot = ({ size = 'md', color, ...props }) => {
     const { components } = useTheme();

package/build/components/Switch/Switch.js

@@ -4,10 +4,12 @@ import { useEffect } from 'react';
 import { Pressable } from 'react-native';
 import Animated, { Easing, interpolateColor, useAnimatedStyle, useReducedMotion, useSharedValue, withSpring, withTiming, } from 'react-native-reanimated';
 import { StyleSheet } from 'react-native-unistyles';
+import { useAnimatedTheme } from 'react-native-unistyles/reanimated';
 import { useTheme } from '../../hooks';
 import { Icon } from '../Icon';
 const CustomSwitch = ({ value = false, onValueChange, disabled = false, size = 'medium', ...accessibilityProps }) => {
     const { components, color } = useTheme();
+    const theme = useAnimatedTheme();
     const SWITCH_WIDTH = size === 'medium' ? components.switch.md.width : components.switch.sm.width;
     const THUMB_SIZE = size === 'medium' ? components.switch.md.circle.size : components.switch.sm.circle.size;
     const PADDING = components.switch.padding;
@@ -17,11 +19,11 @@ const CustomSwitch = ({ value = false, onValueChange, disabled = false, size = '
     const progress = useSharedValue(value ? 1 : 0);
     const animatedThumbStyle = useAnimatedStyle(() => ({
         transform: [{ translateX: offset.value }],
-    }));
+    }), [offset]);
     const animatedSwitchBackgroundStyle = useAnimatedStyle(() => {
         const backgroundColor = interpolateColor(progress.value, [0, 1], [
-            color.interactive.functional.surface.strong.default,
-            color.interactive.brand.surface.strong.default,
+            theme.value.color.interactive.functional.surface.strong.default,
+            theme.value.color.interactive.brand.surface.strong.default,
         ]);
         return { backgroundColor };
     });

package/build/components/Switch/Switch.web.js

@@ -6,6 +6,7 @@ import Animated, { Easing, interpolateColor, useAnimatedStyle, useReducedMotion,
 import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
 import { Icon } from '../Icon';
+// @ts-expect-error - Animated.View type issue
 const AnimatedView = Animated.createAnimatedComponent(View);
 const CustomSwitch = ({ value = false, onValueChange, disabled = false, size = 'medium', ...accessibilityProps }) => {
     const { components, color } = useTheme();

package/build/components/Tabs/TabsList.js

@@ -6,6 +6,7 @@ import Animated, { runOnJS, useAnimatedScrollHandler, useAnimatedStyle, useShare
 import { StyleSheet } from 'react-native-unistyles';
 import { UnstyledIconButton } from '../UnstyledIconButton';
 import { useTabsContext } from './Tabs.context';
+// @ts-expect-error - Animated.View type issue
 const Indicator = Animated.createAnimatedComponent(View);
 const SCROLL_STEP_RATIO = 0.6;
 const SCROLL_BUTTON_HITSLOP = { top: 10, bottom: 10, left: 10, right: 10 };
@@ -59,7 +60,11 @@ const TabsList = ({ children, style, ...rest }) => {
         }
         return;
     }, [updateScrollState]);
-    return (_jsxs(View, { style: [styles.wrapper, style], ...rest, accessibilityRole: "tablist", children: [canScrollLeft && (_jsx(View, { style: [styles.iconButtonWrap, styles.scrollButtonLeft], accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : {}), children: _jsx(UnstyledIconButton, { accessibilityLabel: undefined, icon: ChevronLeftSmallIcon, onPress: () => scrollBy(-1), style: styles.iconButton, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", hitSlop: SCROLL_BUTTON_HITSLOP, ...(Platform.OS === 'web' ? { 'aria-hidden': true, tabIndex: -1 } : {}) }) })), _jsx(Animated.ScrollView, { ref: scrollRef, horizontal: true, showsHorizontalScrollIndicator: false, onLayout: onLayoutContainer, onContentSizeChange: onContentSizeChange, onScroll: onScrollHandler, scrollEventThrottle: 16, bounces: false, contentContainerStyle: styles.scrollContent, children: _jsxs(View, { style: styles.container, children: [children, _jsx(Indicator, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", style: [styles.indicator, indicatorStyle] })] }) }), canScrollRight && (_jsx(View, { style: [styles.iconButtonWrap, styles.scrollButtonRight], accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : {}), children: _jsx(UnstyledIconButton, { accessibilityLabel: undefined, icon: ChevronRightSmallIcon, onPress: () => scrollBy(1), style: styles.iconButton, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", hitSlop: SCROLL_BUTTON_HITSLOP, ...(Platform.OS === 'web' ? { 'aria-hidden': true, tabIndex: -1 } : {}) }) }))] }));
+    return (_jsxs(View, { style: [styles.wrapper, style], ...rest, accessibilityRole: "tablist", children: [canScrollLeft && (_jsx(View, { style: [styles.iconButtonWrap, styles.scrollButtonLeft], accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : {}), children: _jsx(UnstyledIconButton, { accessibilityLabel: undefined, icon: ChevronLeftSmallIcon, onPress: () => scrollBy(-1), style: styles.iconButton, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", hitSlop: SCROLL_BUTTON_HITSLOP, ...(Platform.OS === 'web' ? { 'aria-hidden': true, tabIndex: -1 } : {}) }) })), _jsx(Animated.ScrollView, { ref: scrollRef, horizontal: true, showsHorizontalScrollIndicator: false, onLayout: onLayoutContainer, onContentSizeChange: onContentSizeChange, onScroll: onScrollHandler, scrollEventThrottle: 16, bounces: false, contentContainerStyle: styles.scrollContent, children: _jsxs(View, { style: styles.container, children: [children, _jsx(Indicator
+                        // @ts-expect-error - Animated.View type issue
+                        , { 
+                            // @ts-expect-error - Animated.View type issue
+                            accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", style: [styles.indicator, indicatorStyle] })] }) }), canScrollRight && (_jsx(View, { style: [styles.iconButtonWrap, styles.scrollButtonRight], accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : {}), children: _jsx(UnstyledIconButton, { accessibilityLabel: undefined, icon: ChevronRightSmallIcon, onPress: () => scrollBy(1), style: styles.iconButton, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", hitSlop: SCROLL_BUTTON_HITSLOP, ...(Platform.OS === 'web' ? { 'aria-hidden': true, tabIndex: -1 } : {}) }) }))] }));
 };
 TabsList.displayName = 'TabsList';
 const styles = StyleSheet.create(theme => ({

package/build/components/Textarea/TextareaField.js

@@ -20,7 +20,7 @@ const styles = StyleSheet.create(theme => ({
         color: theme.color.text.primary,
         fontSize: theme.typography.mobile.bodyText.md.fontSize,
         fontFamily: theme.typography.mobile.bodyText.fontFamily,
-        fontWeight: theme.typography.mobile.bodyText.fontWeight,
+        fontWeight: `${theme.typography.mobile.bodyText.fontWeight}`,
         borderWidth: 0,
         outlineWidth: 0,
         _web: {

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

@@ -0,0 +1,12 @@
+import type ThemedImageProps from './ThemedImage.props';
+/**
+ * ThemedImage component that displays different images or components based on the current theme
+ * @param light - Image source or SVG component to display in light mode
+ * @param dark - Image source or SVG component to display in dark mode
+ * @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;
+    displayName: string;
+};
+export default ThemedImage;

package/build/components/ThemedImage/ThemedImage.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isValidElement } from 'react';
+import { Image } from 'react-native';
+import useColorMode from '../../hooks/useColorMode';
+/**
+ * ThemedImage component that displays different images or components based on the current theme
+ * @param light - Image source or SVG component to display in light mode
+ * @param dark - Image source or SVG component to display in dark mode
+ * @param ...rest - All other Image props including width/height for SVG components
+ */
+const ThemedImage = ({ light, dark, ...props }) => {
+    const [colorMode] = useColorMode();
+    const source = colorMode === 'light' ? light : dark;
+    // If the source is a React element (like an SVG component), render it directly
+    if (isValidElement(source)) {
+        return source;
+    }
+    // If the source is a component type (function/class), instantiate it with props
+    if (typeof source === 'function') {
+        const Source = source;
+        return _jsx(Source, { ...props });
+    }
+    // Otherwise, render as a regular Image with the source
+    return _jsx(Image, { source: source, ...props });
+};
+ThemedImage.displayName = 'ThemedImage';
+export default ThemedImage;

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

@@ -0,0 +1,13 @@
+import type { ComponentType, ReactElement } from 'react';
+import type { ImageProps, ImageSourcePropType } from 'react-native';
+interface ThemedImageProps extends Omit<ImageProps, 'source'> {
+    /**
+     * Image source or component to display in light mode
+     */
+    light: ImageSourcePropType | ReactElement | ComponentType<any>;
+    /**
+     * Image source or component to display in dark mode
+     */
+    dark: ImageSourcePropType | ReactElement | ComponentType<any>;
+}
+export default ThemedImageProps;

package/build/components/ThemedImage/ThemedImage.props.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export { default as ThemedImage } from './ThemedImage';
+export type { default as ThemedImageProps } from './ThemedImage.props';

package/build/components/ThemedImage/index.js

@@ -0,0 +1 @@
+export { default as ThemedImage } from './ThemedImage';

package/build/components/ToggleButton/ToggleButtonIcon.js

@@ -7,7 +7,8 @@ const ButtonIcon = ({ children, toggled, as = TickSmallIcon, ...props }) => {
     styles.useVariants({ toggled });
     const IconAny = Icon;
     return (_jsx(IconAny, { as: as, ...props, style: Platform.OS === 'web'
-            ? StyleSheet.compose(styles.icon, props.style)
+            ? // @ts-ignore
+                { ...styles.icon, ...props.style }
             : [styles.icon, props.style], children: children }));
 };
 ButtonIcon.displayName = 'ButtonIcon';

package/build/components/ToggleButton/ToggleButtonRoot.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Pressable } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { useCardActionContext } from '../Card';
+import { useCardPressHandlerContext } from '../Card';
 const ButtonRoot = ({ children, onToggle, toggled, states, onPress, ...props }) => {
     const { active } = states || {};
-    const { pressed } = useCardActionContext();
+    const { pressed } = useCardPressHandlerContext();
     styles.useVariants({
         toggled,
         active: active || pressed,

package/build/components/UnstyledIconButton/UnstyledIconButtonIcon.js

@@ -7,7 +7,8 @@ const UnstyledIconButtonIcon = ({ children, ...props }) => {
     const { active, inverted, size } = useUnstyledIconButtonContext();
     styles.useVariants({ active, inverted, size });
     return (_jsx(Icon, { ...props, style: Platform.OS === 'web'
-            ? StyleSheet.compose(styles.icon, props.style)
+            ? // @ts-ignore
+                { ...styles.icon, ...props.style }
             : [styles.icon, props.style], children: children }));
 };
 UnstyledIconButtonIcon.displayName = 'UnstyledIconButtonIcon';

package/build/components/index.d.ts

@@ -9,6 +9,7 @@ export * from './Card';
 export * from './Carousel';
 export * from './Center';
 export * from './Checkbox';
+export * from './Container';
 export * from './CurrencyInput';
 export * from './DatePicker';
 export * from './DatePickerInput';
@@ -41,7 +42,8 @@ export * from './Spinner';
 export * from './Switch';
 export * from './Tabs';
 export * from './Textarea';
+export * from './ThemedImage';
 export * from './ToggleButtonCard';
-export { FlatList, Image, KeyboardAvoidingView, ScrollView, SectionList, StatusBar, View, } from 'react-native';
+export { FlatList, Image, KeyboardAvoidingView, ScrollView, SectionList, View } from 'react-native';
 export { Pressable } from 'react-native';
 export { createIcon } from '@gluestack-ui/icon';

package/build/components/index.js

@@ -10,6 +10,7 @@ export * from './Card';
 export * from './Carousel';
 export * from './Center';
 export * from './Checkbox';
+export * from './Container';
 export * from './CurrencyInput';
 export * from './DatePicker';
 export * from './DatePickerInput';
@@ -42,7 +43,8 @@ export * from './Spinner';
 export * from './Switch';
 export * from './Tabs';
 export * from './Textarea';
+export * from './ThemedImage';
 export * from './ToggleButtonCard';
-export { FlatList, Image, KeyboardAvoidingView, ScrollView, SectionList, StatusBar, View, } from 'react-native';
+export { FlatList, Image, KeyboardAvoidingView, ScrollView, SectionList, View } from 'react-native';
 export { Pressable } from 'react-native';
 export { createIcon } from '@gluestack-ui/icon';

package/build/core/index.d.ts

@@ -1,5 +1,5 @@
-export * from './themes';
-export * from './breakpoints';
-export { StyleSheet, UnistylesRuntime, withUnistyles, Hide, Display, ScopedTheme, mq, getServerUnistyles, useUnistyles, hydrateServerUnistyles, useServerUnistyles, resetServerUnistyles, } from 'react-native-unistyles';
+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 type * from '../types/unistyles';

package/build/core/index.js

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

package/build/core/themes.d.ts

@@ -285,6 +285,7 @@ export declare const lightTheme: {
                     readonly lineHeight: 36;
                 };
             };
+            readonly listSpacing: 16;
         };
         readonly tablet: {
             readonly bodyText: {
@@ -370,6 +371,7 @@ export declare const lightTheme: {
                     readonly lineHeight: 36;
                 };
             };
+            readonly listSpacing: 16;
         };
         readonly desktop: {
             readonly bodyText: {
@@ -455,6 +457,7 @@ export declare const lightTheme: {
                     readonly lineHeight: 48;
                 };
             };
+            readonly listSpacing: 16;
         };
     };
     readonly layout: {
@@ -464,7 +467,7 @@ export declare const lightTheme: {
                 readonly minWidth: 320;
             };
             readonly container: {
-                readonly margin: 16;
+                readonly marginHorizontal: 16;
                 readonly paddingBottom: 32;
                 readonly paddingTop: 24;
                 readonly width: 360;
@@ -492,7 +495,7 @@ export declare const lightTheme: {
                 readonly minWidth: 740;
             };
             readonly container: {
-                readonly margin: 32;
+                readonly marginHorizontal: 32;
                 readonly paddingBottom: 32;
                 readonly paddingTop: 24;
                 readonly width: 744;
@@ -520,7 +523,7 @@ export declare const lightTheme: {
                 readonly minWidth: 992;
             };
             readonly container: {
-                readonly margin: 32;
+                readonly marginHorizontal: 32;
                 readonly paddingBottom: 48;
                 readonly paddingTop: 32;
                 readonly width: 1096;
@@ -1632,6 +1635,7 @@ export declare const darkTheme: {
                     readonly lineHeight: 36;
                 };
             };
+            readonly listSpacing: 16;
         };
         readonly tablet: {
             readonly bodyText: {
@@ -1717,6 +1721,7 @@ export declare const darkTheme: {
                     readonly lineHeight: 36;
                 };
             };
+            readonly listSpacing: 16;
         };
         readonly desktop: {
             readonly bodyText: {
@@ -1802,6 +1807,7 @@ export declare const darkTheme: {
                     readonly lineHeight: 48;
                 };
             };
+            readonly listSpacing: 16;
         };
     };
     readonly layout: {
@@ -1811,7 +1817,7 @@ export declare const darkTheme: {
                 readonly minWidth: 320;
             };
             readonly container: {
-                readonly margin: 16;
+                readonly marginHorizontal: 16;
                 readonly paddingBottom: 32;
                 readonly paddingTop: 24;
                 readonly width: 360;
@@ -1839,7 +1845,7 @@ export declare const darkTheme: {
                 readonly minWidth: 740;
             };
             readonly container: {
-                readonly margin: 32;
+                readonly marginHorizontal: 32;
                 readonly paddingBottom: 32;
                 readonly paddingTop: 24;
                 readonly width: 744;
@@ -1867,7 +1873,7 @@ export declare const darkTheme: {
                 readonly minWidth: 992;
             };
             readonly container: {
-                readonly margin: 32;
+                readonly marginHorizontal: 32;
                 readonly paddingBottom: 48;
                 readonly paddingTop: 32;
                 readonly width: 1096;
@@ -2991,6 +2997,7 @@ export declare const themes: {
                         readonly lineHeight: 36;
                     };
                 };
+                readonly listSpacing: 16;
             };
             readonly tablet: {
                 readonly bodyText: {
@@ -3076,6 +3083,7 @@ export declare const themes: {
                         readonly lineHeight: 36;
                     };
                 };
+                readonly listSpacing: 16;
             };
             readonly desktop: {
                 readonly bodyText: {
@@ -3161,6 +3169,7 @@ export declare const themes: {
                         readonly lineHeight: 48;
                     };
                 };
+                readonly listSpacing: 16;
             };
         };
         readonly layout: {
@@ -3170,7 +3179,7 @@ export declare const themes: {
                     readonly minWidth: 320;
                 };
                 readonly container: {
-                    readonly margin: 16;
+                    readonly marginHorizontal: 16;
                     readonly paddingBottom: 32;
                     readonly paddingTop: 24;
                     readonly width: 360;
@@ -3198,7 +3207,7 @@ export declare const themes: {
                     readonly minWidth: 740;
                 };
                 readonly container: {
-                    readonly margin: 32;
+                    readonly marginHorizontal: 32;
                     readonly paddingBottom: 32;
                     readonly paddingTop: 24;
                     readonly width: 744;
@@ -3226,7 +3235,7 @@ export declare const themes: {
                     readonly minWidth: 992;
                 };
                 readonly container: {
-                    readonly margin: 32;
+                    readonly marginHorizontal: 32;
                     readonly paddingBottom: 48;
                     readonly paddingTop: 32;
                     readonly width: 1096;
@@ -4338,6 +4347,7 @@ export declare const themes: {
                         readonly lineHeight: 36;
                     };
                 };
+                readonly listSpacing: 16;
             };
             readonly tablet: {
                 readonly bodyText: {
@@ -4423,6 +4433,7 @@ export declare const themes: {
                         readonly lineHeight: 36;
                     };
                 };
+                readonly listSpacing: 16;
             };
             readonly desktop: {
                 readonly bodyText: {
@@ -4508,6 +4519,7 @@ export declare const themes: {
                         readonly lineHeight: 48;
                     };
                 };
+                readonly listSpacing: 16;
             };
         };
         readonly layout: {
@@ -4517,7 +4529,7 @@ export declare const themes: {
                     readonly minWidth: 320;
                 };
                 readonly container: {
-                    readonly margin: 16;
+                    readonly marginHorizontal: 16;
                     readonly paddingBottom: 32;
                     readonly paddingTop: 24;
                     readonly width: 360;
@@ -4545,7 +4557,7 @@ export declare const themes: {
                     readonly minWidth: 740;
                 };
                 readonly container: {
-                    readonly margin: 32;
+                    readonly marginHorizontal: 32;
                     readonly paddingBottom: 32;
                     readonly paddingTop: 24;
                     readonly width: 744;
@@ -4573,7 +4585,7 @@ export declare const themes: {
                     readonly minWidth: 992;
                 };
                 readonly container: {
-                    readonly margin: 32;
+                    readonly marginHorizontal: 32;
                     readonly paddingBottom: 48;
                     readonly paddingTop: 32;
                     readonly width: 1096;

package/build/hooks/useColorMode.d.ts

@@ -1,2 +1,2 @@
-declare const useColorMode: () => readonly ["light" | "dark", import("react").Dispatch<import("react").SetStateAction<"light" | "dark">>];
+declare const useColorMode: () => readonly ["light" | "dark", (mode: "light" | "dark") => void];
 export default useColorMode;

package/build/hooks/useColorMode.js

@@ -1,13 +1,12 @@
-import { useEffect, useState } from 'react';
+import { useCallback } from 'react';
 import { UnistylesRuntime, useUnistyles } from 'react-native-unistyles';
 const useColorMode = () => {
-    const { theme: { colorMode: themeColorMode }, } = useUnistyles();
-    const [colorMode, setColorMode] = useState(UnistylesRuntime.themeName);
-    useEffect(() => {
-        if (colorMode === themeColorMode)
+    const { theme } = useUnistyles();
+    const setColorModeWrapper = useCallback((mode) => {
+        if (mode === theme.colorMode)
             return;
-        setColorMode(themeColorMode);
-    }, [themeColorMode, colorMode]);
-    return [colorMode, setColorMode];
+        UnistylesRuntime.setTheme(mode);
+    }, [theme.colorMode]);
+    return [theme.colorMode, setColorModeWrapper];
 };
 export default useColorMode;

package/build/hooks/useStyleProps.js

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
-import useTheme from './useTheme';
 import { propStyleMapping, resolveThemeValue, themeStyleMapping, viewStyleProps } from '../utils';
+import useTheme from './useTheme';
 /**
  * Hook to process utility style props and resolve theme values
  * @param props Component props to process

package/build/tokens/components/dark/banner.d.ts

@@ -30,5 +30,24 @@ declare const _default: {
         readonly padding: 16;
     };
     readonly imageContainerBorderColor: "#ebebeb";
+    readonly banner: {
+        readonly illustration: {
+            readonly lg: {
+                readonly width: 100;
+            };
+            readonly md: {
+                readonly width: 80;
+            };
+            readonly sm: {
+                readonly width: 60;
+            };
+            readonly xl: {
+                readonly width: 120;
+            };
+            readonly xs: {
+                readonly width: 40;
+            };
+        };
+    };
 };
 export default _default;