@utilitywarehouse/hearth-react-native 0.8.2 → 0.9.0

package/build/components/Modal/Modal.web.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, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, fullscreen = false, ...props }) => {
+const Modal = ({ ref, children, heading, description, showCloseButton = true, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress = true, closeOnSecondaryButtonPress = true, loading, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, inNavModal = false, ...props }) => {
     const bottomSheetModalRef = useRef(null);
     const viewRef = useRef(null);
     const scrollViewRef = useRef(null);
@@ -20,7 +20,7 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
     const backgroundOpacity = useSharedValue(0);
     const pretendContentTranslateY = useSharedValue(20);
     const triggerCloseAnimation = useCallback(() => {
-        if (Platform.OS === 'android' && fullscreen) {
+        if (Platform.OS === 'android' && inNavModal) {
             pretendContentTranslateY.value = withTiming(20, {
                 duration: 50,
                 easing: Easing.in(Easing.quad),
@@ -30,14 +30,14 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
                 easing: Easing.in(Easing.quad),
             });
         }
-    }, [Platform.OS, fullscreen, pretendContentTranslateY, backgroundOpacity]);
+    }, [Platform.OS, inNavModal, pretendContentTranslateY, backgroundOpacity]);
     useImperativeHandle(ref, () => ({
         ...bottomSheetModalRef.current,
         triggerCloseAnimation,
     }));
-    // Trigger animations on render for fullscreen Android modal
+    // Trigger animations on render for inNavModal Android modal
     useEffect(() => {
-        if (Platform.OS === 'android' && fullscreen) {
+        if (Platform.OS === 'android' && inNavModal) {
             backgroundOpacity.value = withDelay(300, withTiming(1, {
                 duration: 200,
                 easing: Easing.out(Easing.quad),
@@ -47,11 +47,11 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
                 easing: Easing.out(Easing.quad),
             }));
         }
-    }, [fullscreen, backgroundOpacity, pretendContentTranslateY]);
+    }, [inNavModal, backgroundOpacity, pretendContentTranslateY]);
     const animatedBackgroundStyle = useAnimatedStyle(() => ({
         backgroundColor: hexWithOpacity(theme.components.overlay.backgroundColor, backgroundOpacity.value * (theme.components.overlay.opacity / 100)),
     }));
-    const animatedFullscreenStyle = useAnimatedStyle(() => ({
+    const animatedInNavModalStyle = useAnimatedStyle(() => ({
         backgroundColor: hexWithOpacity(theme.components.overlay.backgroundColor, backgroundOpacity.value * (theme.components.overlay.opacity / 100)),
     }));
     const animatedPretendContentStyle = useAnimatedStyle(() => ({
@@ -98,20 +98,20 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
         }
     };
     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: "Loading..." })] })) : (_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, description && !image ? _jsx(BodyText, { accessible: true, children: description }) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [_jsx(Image, { style: styles.image, ...image }), _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, children: description })) : null] })] })) : null, children, _jsxs(View, { style: styles.footer, children: [onPressPrimaryButton && primaryButtonText ? (_jsx(Button, { onPress: handlePrimaryButtonPress, text: primaryButtonText, ...primaryButtonProps, variant: primaryButtonProps?.variant ?? 'solid', colorScheme: primaryButtonProps?.colorScheme ?? 'highlight' })) : null, onPressSecondaryButton && secondaryButtonText ? (_jsx(Button, { onPress: handleSecondaryButtonPress, text: secondaryButtonText, ...secondaryButtonProps, variant: secondaryButtonProps?.variant ?? 'outline', colorScheme: secondaryButtonProps?.colorScheme ?? 'functional' })) : null] })] })) }));
-    return fullscreen ? (_jsxs(View, { style: { flex: 1, backgroundColor: theme.color.background.primary }, children: [Platform.OS === 'android' ? (_jsx(Animated.View, { style: [styles.androidContainer, animatedBackgroundStyle], children: _jsx(Animated.View, { style: [styles.pretendContent, animatedPretendContentStyle] }) })) : null, _jsx(Animated.View, { style: [styles.fullscreenContainer, Platform.OS === 'android' && animatedFullscreenStyle], children: _jsx(View, { style: styles.fullscreenContent, children: content }) })] })) : (_jsx(BottomSheetModal, { ref: bottomSheetModalRef, enableDynamicSizing: true, snapPoints: image ? ['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 }) }));
+    return inNavModal ? (_jsxs(View, { style: { flex: 1, backgroundColor: theme.color.background.primary }, children: [Platform.OS === 'android' ? (_jsx(Animated.View, { style: [styles.androidContainer, animatedBackgroundStyle], children: _jsx(Animated.View, { style: [styles.pretendContent, animatedPretendContentStyle] }) })) : null, _jsx(Animated.View, { style: [styles.inNavModalContainer, Platform.OS === 'android' && animatedInNavModalStyle], children: _jsx(View, { style: styles.inNavModalContent, children: content }) })] })) : (_jsx(BottomSheetModal, { ref: bottomSheetModalRef, enableDynamicSizing: true, snapPoints: image ? ['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, rt) => ({
     container: {
         flex: 1,
-        gap: theme.components.dialog.gap,
+        gap: theme.components.modal.gap,
     },
     header: {
         flexDirection: 'row',
-        gap: theme.components.dialog.gap,
+        gap: theme.components.modal.gap,
     },
     headerTextContent: {
         flex: 1,
-        gap: theme.components.dialog.content.gap,
+        gap: theme.components.modal.content.gap,
     },
     image: {
         width: 260,
@@ -123,40 +123,40 @@ const styles = StyleSheet.create((theme, rt) => ({
         flex: 1,
     },
     textContent: {
-        gap: theme.components.dialog.content.gap,
+        gap: theme.components.modal.content.gap,
     },
     loadingContainer: {
         flex: 1,
         alignItems: 'center',
         justifyContent: 'center',
         minHeight: 140,
-        gap: theme.components.dialog.content.gap,
+        gap: theme.components.modal.content.gap,
     },
     footer: {
-        gap: theme.components.dialog.action.gap,
+        gap: theme.components.modal.action.gap,
     },
-    fullscreenContainer: {
+    inNavModalContainer: {
         flex: 1,
         ...(Platform.OS === 'ios' ? { backgroundColor: theme.components.overlay.backgroundColor } : {}),
     },
-    fullscreenContent: {
+    inNavModalContent: {
         flex: 1,
-        borderTopLeftRadius: theme.components.dialog.borderRadius,
-        borderTopRightRadius: theme.components.dialog.borderRadius,
+        borderTopLeftRadius: theme.components.modal.borderRadius,
+        borderTopRightRadius: theme.components.modal.borderRadius,
         backgroundColor: theme.color.surface.neutral.strong,
-        gap: theme.components.dialog.gap,
-        padding: theme.components.dialog.padding,
-        paddingBottom: theme.components.dialog.padding + rt.insets.bottom,
+        gap: theme.components.modal.gap,
+        padding: theme.components.modal.padding,
+        paddingBottom: theme.components.modal.padding + rt.insets.bottom,
     },
     androidContainer: {
         height: rt.insets.top + 18,
-        paddingLeft: theme.components.dialog.padding,
-        paddingRight: theme.components.dialog.padding,
+        paddingLeft: theme.components.modal.padding,
+        paddingRight: theme.components.modal.padding,
         justifyContent: 'flex-end',
     },
     pretendContent: {
-        borderTopLeftRadius: theme.components.dialog.borderRadius,
-        borderTopRightRadius: theme.components.dialog.borderRadius,
+        borderTopLeftRadius: theme.components.modal.borderRadius,
+        borderTopRightRadius: theme.components.modal.borderRadius,
         height: 12,
         backgroundColor: theme.components.parts.modalStack.backgroundColorCardTop,
     },

package/build/components/index.d.ts

@@ -35,6 +35,7 @@ export * from './Input';
 export * from './Label';
 export * from './Link';
 export * from './List';
+export * from './Menu';
 export * from './Modal';
 export * from './ProgressStepper';
 export * from './Radio';

package/build/components/index.js

@@ -36,6 +36,7 @@ export * from './Input';
 export * from './Label';
 export * from './Link';
 export * from './List';
+export * from './Menu';
 export * from './Modal';
 export * from './ProgressStepper';
 export * from './Radio';

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

@@ -17,7 +17,6 @@ export { default as carouselControl } from './carousel-control';
 export { default as checkbox } from './checkbox';
 export { default as datePicker } from './date-picker';
 export { default as descriptionList } from './description-list';
-export { default as dialog } from './dialog';
 export { default as divider } from './divider';
 export { default as drawer } from './drawer';
 export { default as expandableCard } from './expandable-card';
@@ -40,6 +39,7 @@ export { default as pill } from './pill';
 export { default as progressBar } from './progress-bar';
 export { default as progressStepper } from './progress-stepper';
 export { default as radio } from './radio';
+export { default as rating } from './rating';
 export { default as sectionHeader } from './section-header';
 export { default as segmentedControl } from './segmented-control';
 export { default as select } from './select';
@@ -48,6 +48,8 @@ export { default as spinner } from './spinner';
 export { default as switch } from './switch';
 export { default as table } from './table';
 export { default as tabs } from './tabs';
+export { default as timePicker } from './time-picker';
+export { default as timeline } from './timeline';
 export { default as toast } from './toast';
 export { default as toggleButton } from './toggle-button';
 export { default as tooltip } from './tooltip';

package/build/tokens/components/dark/index.js

@@ -17,7 +17,6 @@ export { default as carouselControl } from './carousel-control';
 export { default as checkbox } from './checkbox';
 export { default as datePicker } from './date-picker';
 export { default as descriptionList } from './description-list';
-export { default as dialog } from './dialog';
 export { default as divider } from './divider';
 export { default as drawer } from './drawer';
 export { default as expandableCard } from './expandable-card';
@@ -40,6 +39,7 @@ export { default as pill } from './pill';
 export { default as progressBar } from './progress-bar';
 export { default as progressStepper } from './progress-stepper';
 export { default as radio } from './radio';
+export { default as rating } from './rating';
 export { default as sectionHeader } from './section-header';
 export { default as segmentedControl } from './segmented-control';
 export { default as select } from './select';
@@ -48,6 +48,8 @@ export { default as spinner } from './spinner';
 export { default as switch } from './switch';
 export { default as table } from './table';
 export { default as tabs } from './tabs';
+export { default as timePicker } from './time-picker';
+export { default as timeline } from './timeline';
 export { default as toast } from './toast';
 export { default as toggleButton } from './toggle-button';
 export { default as tooltip } from './tooltip';

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

@@ -21,6 +21,9 @@ declare const _default: {
     readonly minWidth: 152;
     readonly paddingHorizontal: 16;
     readonly paddingVertical: 12;
+    readonly stepper: {
+        readonly gap: 4;
+    };
     readonly textArea: {
         readonly height: 96;
     };

package/build/tokens/components/dark/input.js

@@ -21,6 +21,9 @@ export default {
     minWidth: 152,
     paddingHorizontal: 16,
     paddingVertical: 12,
+    stepper: {
+        gap: 4,
+    },
     textArea: {
         height: 96,
     },

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

@@ -10,17 +10,20 @@ declare const _default: {
         readonly gap: 12;
     };
     readonly gap: 24;
-    readonly padding: 48;
+    readonly heading: {
+        readonly gap: 24;
+    };
+    readonly illustration: {
+        readonly padding: 48;
+    };
+    readonly padding: 24;
     readonly mobile: {
-        readonly padding: 16;
         readonly width: 360;
     };
     readonly tablet: {
-        readonly padding: 48;
         readonly width: 504;
     };
     readonly desktop: {
-        readonly padding: 48;
         readonly width: 680;
     };
 };

package/build/tokens/components/dark/modal.js

@@ -10,17 +10,20 @@ export default {
         gap: 12,
     },
     gap: 24,
-    padding: 48,
+    heading: {
+        gap: 24,
+    },
+    illustration: {
+        padding: 48,
+    },
+    padding: 24,
     mobile: {
-        padding: 16,
         width: 360,
     },
     tablet: {
-        padding: 48,
         width: 504,
     },
     desktop: {
-        padding: 48,
         width: 680,
     },
 };

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

@@ -0,0 +1,8 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly borderWidth: 2;
+    readonly gap: 4;
+};
+export default _default;

package/build/tokens/components/dark/rating.js

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export default {
+    borderWidth: 2,
+    gap: 4,
+};

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

@@ -13,9 +13,6 @@ declare const _default: {
     readonly headerCell: {
         readonly borderWidth: 2;
         readonly gap: 8;
-        readonly neutral: {
-            readonly backgroundColor: "#30302c";
-        };
         readonly paddingHorizontal: 12;
         readonly paddingVertical: 16;
     };

package/build/tokens/components/dark/table.js

@@ -13,9 +13,6 @@ export default {
     headerCell: {
         borderWidth: 2,
         gap: 8,
-        neutral: {
-            backgroundColor: '#30302c',
-        },
         paddingHorizontal: 12,
         paddingVertical: 16,
     },

package/build/tokens/components/dark/time-picker.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly gap: 6;
+    readonly gapContainer: 4;
+    readonly minWidth: 288;
+    readonly paddingHorizontal: 16;
+    readonly paddingVertical: 12;
+    readonly time: {
+        readonly columnGap: 4;
+        readonly content: {
+            readonly gap: 8;
+            readonly item: {
+                readonly gap: 2;
+            };
+        };
+        readonly footer: {
+            readonly gap: 8;
+        };
+        readonly gap: 16;
+        readonly item: {
+            readonly height: 40;
+            readonly width: 64;
+        };
+        readonly rowGap: 2;
+    };
+};
+export default _default;

package/build/tokens/components/dark/time-picker.js

@@ -0,0 +1,28 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export default {
+    gap: 6,
+    gapContainer: 4,
+    minWidth: 288,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    time: {
+        columnGap: 4,
+        content: {
+            gap: 8,
+            item: {
+                gap: 2,
+            },
+        },
+        footer: {
+            gap: 8,
+        },
+        gap: 16,
+        item: {
+            height: 40,
+            width: 64,
+        },
+        rowGap: 2,
+    },
+};

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

@@ -0,0 +1,27 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly bar: {
+        readonly width: 2;
+    };
+    readonly content: {
+        readonly gap: 8;
+        readonly paddingBottom: 24;
+        readonly paddingTop: 2;
+    };
+    readonly gap: 12;
+    readonly progress: {
+        readonly circle: {
+            readonly height: 24;
+            readonly width: 24;
+        };
+    };
+    readonly static: {
+        readonly circle: {
+            readonly height: 12;
+            readonly width: 12;
+        };
+    };
+};
+export default _default;

package/build/tokens/components/dark/timeline.js

@@ -0,0 +1,26 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export default {
+    bar: {
+        width: 2,
+    },
+    content: {
+        gap: 8,
+        paddingBottom: 24,
+        paddingTop: 2,
+    },
+    gap: 12,
+    progress: {
+        circle: {
+            height: 24,
+            width: 24,
+        },
+    },
+    static: {
+        circle: {
+            height: 12,
+            width: 12,
+        },
+    },
+};

package/build/tokens/components/light/index.d.ts

@@ -17,7 +17,6 @@ export { default as carouselControl } from './carousel-control';
 export { default as checkbox } from './checkbox';
 export { default as datePicker } from './date-picker';
 export { default as descriptionList } from './description-list';
-export { default as dialog } from './dialog';
 export { default as divider } from './divider';
 export { default as drawer } from './drawer';
 export { default as expandableCard } from './expandable-card';
@@ -40,6 +39,7 @@ export { default as pill } from './pill';
 export { default as progressBar } from './progress-bar';
 export { default as progressStepper } from './progress-stepper';
 export { default as radio } from './radio';
+export { default as rating } from './rating';
 export { default as sectionHeader } from './section-header';
 export { default as segmentedControl } from './segmented-control';
 export { default as select } from './select';
@@ -48,6 +48,8 @@ export { default as spinner } from './spinner';
 export { default as switch } from './switch';
 export { default as table } from './table';
 export { default as tabs } from './tabs';
+export { default as timePicker } from './time-picker';
+export { default as timeline } from './timeline';
 export { default as toast } from './toast';
 export { default as toggleButton } from './toggle-button';
 export { default as tooltip } from './tooltip';

package/build/tokens/components/light/index.js

@@ -17,7 +17,6 @@ export { default as carouselControl } from './carousel-control';
 export { default as checkbox } from './checkbox';
 export { default as datePicker } from './date-picker';
 export { default as descriptionList } from './description-list';
-export { default as dialog } from './dialog';
 export { default as divider } from './divider';
 export { default as drawer } from './drawer';
 export { default as expandableCard } from './expandable-card';
@@ -40,6 +39,7 @@ export { default as pill } from './pill';
 export { default as progressBar } from './progress-bar';
 export { default as progressStepper } from './progress-stepper';
 export { default as radio } from './radio';
+export { default as rating } from './rating';
 export { default as sectionHeader } from './section-header';
 export { default as segmentedControl } from './segmented-control';
 export { default as select } from './select';
@@ -48,6 +48,8 @@ export { default as spinner } from './spinner';
 export { default as switch } from './switch';
 export { default as table } from './table';
 export { default as tabs } from './tabs';
+export { default as timePicker } from './time-picker';
+export { default as timeline } from './timeline';
 export { default as toast } from './toast';
 export { default as toggleButton } from './toggle-button';
 export { default as tooltip } from './tooltip';

package/build/tokens/components/light/input.d.ts

@@ -21,6 +21,9 @@ declare const _default: {
     readonly minWidth: 120;
     readonly paddingHorizontal: 16;
     readonly paddingVertical: 12;
+    readonly stepper: {
+        readonly gap: 4;
+    };
     readonly textArea: {
         readonly height: 96;
     };

package/build/tokens/components/light/input.js

@@ -21,6 +21,9 @@ export default {
     minWidth: 120,
     paddingHorizontal: 16,
     paddingVertical: 12,
+    stepper: {
+        gap: 4,
+    },
     textArea: {
         height: 96,
     },

package/build/tokens/components/light/modal.d.ts

@@ -10,17 +10,20 @@ declare const _default: {
         readonly gap: 12;
     };
     readonly gap: 24;
-    readonly padding: 16;
+    readonly heading: {
+        readonly gap: 24;
+    };
+    readonly illustration: {
+        readonly padding: 48;
+    };
+    readonly padding: 24;
     readonly mobile: {
-        readonly padding: 16;
         readonly width: 360;
     };
     readonly tablet: {
-        readonly padding: 48;
         readonly width: 504;
     };
     readonly desktop: {
-        readonly padding: 48;
         readonly width: 680;
     };
 };

package/build/tokens/components/light/modal.js

@@ -10,17 +10,20 @@ export default {
         gap: 12,
     },
     gap: 24,
-    padding: 16,
+    heading: {
+        gap: 24,
+    },
+    illustration: {
+        padding: 48,
+    },
+    padding: 24,
     mobile: {
-        padding: 16,
         width: 360,
     },
     tablet: {
-        padding: 48,
         width: 504,
     },
     desktop: {
-        padding: 48,
         width: 680,
     },
 };

package/build/tokens/components/light/rating.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly borderWidth: 2;
+    readonly gap: 4;
+};
+export default _default;

package/build/tokens/components/light/rating.js

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export default {
+    borderWidth: 2,
+    gap: 4,
+};

package/build/tokens/components/light/table.d.ts

@@ -13,9 +13,6 @@ declare const _default: {
     readonly headerCell: {
         readonly borderWidth: 2;
         readonly gap: 8;
-        readonly neutral: {
-            readonly backgroundColor: "#f1efe4";
-        };
         readonly paddingHorizontal: 12;
         readonly paddingVertical: 16;
     };

package/build/tokens/components/light/table.js

@@ -13,9 +13,6 @@ export default {
     headerCell: {
         borderWidth: 2,
         gap: 8,
-        neutral: {
-            backgroundColor: '#f1efe4',
-        },
         paddingHorizontal: 12,
         paddingVertical: 16,
     },

package/build/tokens/components/light/time-picker.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly gap: 6;
+    readonly gapContainer: 4;
+    readonly minWidth: 288;
+    readonly paddingHorizontal: 16;
+    readonly paddingVertical: 12;
+    readonly time: {
+        readonly columnGap: 4;
+        readonly content: {
+            readonly gap: 8;
+            readonly item: {
+                readonly gap: 2;
+            };
+        };
+        readonly footer: {
+            readonly gap: 8;
+        };
+        readonly gap: 16;
+        readonly item: {
+            readonly height: 40;
+            readonly width: 64;
+        };
+        readonly rowGap: 2;
+    };
+};
+export default _default;

package/build/tokens/components/light/time-picker.js

@@ -0,0 +1,28 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export default {
+    gap: 6,
+    gapContainer: 4,
+    minWidth: 288,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    time: {
+        columnGap: 4,
+        content: {
+            gap: 8,
+            item: {
+                gap: 2,
+            },
+        },
+        footer: {
+            gap: 8,
+        },
+        gap: 16,
+        item: {
+            height: 40,
+            width: 64,
+        },
+        rowGap: 2,
+    },
+};