@utilitywarehouse/hearth-react-native 0.3.0 → 0.3.1

package/build/components/Radio/Radio.d.ts

@@ -10,12 +10,12 @@ declare const RadioIcon: import("react").ForwardRefExoticComponent<import("react
 }>;
 declare const RadioLabel: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("../Label/Label.props").default> & Omit<import("../Label/Label.props").default, "ref">>;
 declare const Radio: {
-    ({ children, label, disabled, helperIcon, helperText, invalidText, validText, validationStatus: validation, showValidationIcon, type, ...props }: RadioProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, label, disabled, helperIcon, helperText, invalidText, validText, validationStatus: validation, showValidationIcon, type, image, ...props }: RadioProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 declare const RadioTile: {
     ({ type, ...props }: RadioProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
-export { Radio, RadioGroup, RadioIndicator, RadioIcon, RadioLabel, RadioTile };
+export { Radio, RadioGroup, RadioIcon, RadioIndicator, RadioLabel, RadioTile };
 export default Radio;

package/build/components/Radio/Radio.js

@@ -1,15 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { createRadio } from '@gluestack-ui/radio';
-import StyledRadio from './RadioRoot';
-import StyledRadioIndicator from './RadioIndicator';
+import StyledRadioGroup from './RadioGroupRoot';
 import StyledRadioIcon from './RadioIcon';
+import StyledRadioIndicator from './RadioIndicator';
 import StyledRadioLabel from './RadioLabel';
-import StyledRadioGroup from './RadioGroupRoot';
+import StyledRadio from './RadioRoot';
+import { useFormFieldContext } from '../FormField';
 import { Helper } from '../Helper';
 import { useRadioGroupContext } from './RadioGroup.context';
-import { useFormFieldContext } from '../FormField';
-import RadioTileRoot from './RadioTileRoot';
+import RadioImage from './RadioImage';
 import RadioTextContent from './RadioTextContent';
+import RadioTileRoot from './RadioTileRoot';
 const RadioComponent = createRadio({
     Root: StyledRadio,
     Group: StyledRadioGroup,
@@ -25,16 +26,16 @@ RadioGroup.displayName = 'RadioGroup';
 RadioIndicator.displayName = 'RadioIndicator';
 RadioIcon.displayName = 'RadioIcon';
 RadioLabel.displayName = 'RadioLabel';
-const Radio = ({ children, label, disabled, helperIcon, helperText, invalidText, validText, validationStatus: validation, showValidationIcon, type = 'default', ...props }) => {
+const Radio = ({ children, label, disabled, helperIcon, helperText, invalidText, validText, validationStatus: validation, showValidationIcon, type = 'default', image, ...props }) => {
     const { validationStatus: fieldValidationStatus } = useFormFieldContext();
     const { validationStatus: groupValidationStatus, type: groupType } = useRadioGroupContext();
     const validationStatus = fieldValidationStatus ?? groupValidationStatus ?? validation ?? 'initial';
     const radioType = groupType ?? type;
-    const radioChildren = children ? (children) : (_jsxs(_Fragment, { children: [_jsx(RadioIndicator, { children: _jsx(RadioIcon, {}) }), _jsxs(RadioTextContent, { children: [!!label && _jsx(RadioLabel, { children: label }), !!helperText && _jsx(Helper, { disabled: disabled, icon: helperIcon, text: helperText }), validationStatus === 'invalid' && !!invalidText && (_jsx(Helper, { showIcon: showValidationIcon, disabled: disabled, validationStatus: "invalid", text: invalidText })), validationStatus === 'valid' && !!validText && (_jsx(Helper, { disabled: disabled, showIcon: showValidationIcon, validationStatus: "valid", text: validText }))] })] }));
+    const radioChildren = children ? (children) : (_jsxs(_Fragment, { children: [_jsx(RadioIndicator, { children: _jsx(RadioIcon, {}) }), image ? _jsx(RadioImage, { ...image }) : null, _jsxs(RadioTextContent, { children: [!!label && _jsx(RadioLabel, { children: label }), !!helperText && _jsx(Helper, { disabled: disabled, icon: helperIcon, text: helperText }), validationStatus === 'invalid' && !!invalidText && (_jsx(Helper, { showIcon: showValidationIcon, disabled: disabled, validationStatus: "invalid", text: invalidText })), validationStatus === 'valid' && !!validText && (_jsx(Helper, { disabled: disabled, showIcon: showValidationIcon, validationStatus: "valid", text: validText }))] })] }));
     return (_jsx(RadioComponent, { ...props, isDisabled: disabled, children: radioType === 'tile' ? _jsx(RadioTileRoot, { children: radioChildren }) : radioChildren }));
 };
 const RadioTile = ({ type = 'tile', ...props }) => _jsx(Radio, { ...props, type: type });
 RadioTile.displayName = 'RadioTile';
 Radio.displayName = 'Radio';
-export { Radio, RadioGroup, RadioIndicator, RadioIcon, RadioLabel, RadioTile };
+export { Radio, RadioGroup, RadioIcon, RadioIndicator, RadioLabel, RadioTile };
 export default Radio;

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

@@ -1,5 +1,5 @@
 import type { ComponentType } from 'react';
-import type { PressableProps, ViewProps } from 'react-native';
+import type { ImageProps, PressableProps, ViewProps } from 'react-native';
 interface RadioBaseProps extends Omit<PressableProps, 'children'> {
     value: string;
     onChange?: (isSelected: boolean) => void;
@@ -15,6 +15,7 @@ interface RadioWithChildrenProps extends RadioBaseProps {
     invalidText?: never;
     validText?: never;
     showValidationIcon?: never;
+    image?: never;
 }
 interface RadioWithoutChildrenProps extends RadioBaseProps {
     children?: never;
@@ -24,6 +25,7 @@ interface RadioWithoutChildrenProps extends RadioBaseProps {
     invalidText?: string;
     validText?: string;
     showValidationIcon?: boolean;
+    image?: ImageProps;
 }
 type RadioProps = RadioWithChildrenProps | RadioWithoutChildrenProps;
 export default RadioProps;

package/build/components/Radio/RadioImage.d.ts

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

package/build/components/Radio/RadioImage.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Image } from 'react-native';
+const RadioImage = ({ source, style, ...props }) => (_jsx(Image, { source: source, style: style, ...props }));
+RadioImage.displayName = 'RadioImage';
+export default RadioImage;

package/build/components/Radio/RadioTileRoot.js

@@ -18,7 +18,7 @@ const styles = StyleSheet.create(theme => ({
         gap: theme.components.radio.gap,
         padding: theme.components.radio.tile.padding,
         borderWidth: theme.components.radio.tile.borderWidth,
-        borderColor: theme.color.border.subtle,
+        borderColor: theme.color.border.strong,
         borderRadius: theme.components.radio.tile.borderRadius,
         backgroundColor: theme.color.surface.neutral.strong,
         variants: {

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

@@ -1,5 +1,6 @@
-export { default as Radio, RadioIndicator, RadioLabel, RadioIcon, RadioTile } from './Radio';
+export { default as Radio, RadioIcon, RadioIndicator, RadioLabel, RadioTile } from './Radio';
+export type { default as RadioProps } from './Radio.props';
 export { default as RadioGroup } from './RadioGroup';
 export { default as RadioGroupTextContent } from './RadioGroupTextContent';
+export { default as RadioImage } from './RadioImage';
 export { default as RadioTextContent } from './RadioTextContent';
-export type { default as RadioProps } from './Radio.props';

package/build/components/Radio/index.js

@@ -1,4 +1,5 @@
-export { default as Radio, RadioIndicator, RadioLabel, RadioIcon, RadioTile } from './Radio';
+export { default as Radio, RadioIcon, RadioIndicator, RadioLabel, RadioTile } from './Radio';
 export { default as RadioGroup } from './RadioGroup';
 export { default as RadioGroupTextContent } from './RadioGroupTextContent';
+export { default as RadioImage } from './RadioImage';
 export { default as RadioTextContent } from './RadioTextContent';

package/build/components/Select/SelectOption.js

@@ -22,13 +22,7 @@ const SelectOption = ({ label, value, leadingIcon: LeftIcon, trailingIcon: Right
             close();
         }
     };
-    return (_jsxs(Pressable, { onPress: handlePress, disabled: disabled, style: ({ pressed }) => [styles.container, pressed && styles.pressed], children: [!!LeftIcon && (_jsx(View, { children: (() => {
-                    const IconAny = Icon;
-                    return _jsx(IconAny, { style: styles.icon, as: LeftIcon });
-                })() })), _jsx(View, { style: styles.labelContainer, children: _jsx(BodyText, { children: label }) }), isSelected && (_jsx(View, { children: _jsx(TickSmallIcon, { style: styles.icon }) })), !!RightIcon && !isSelected && (_jsx(View, { children: (() => {
-                    const IconAny = Icon;
-                    return _jsx(IconAny, { style: styles.icon, as: RightIcon });
-                })() }))] }));
+    return (_jsxs(Pressable, { onPress: handlePress, disabled: disabled, style: ({ pressed }) => [styles.container, pressed && styles.pressed], children: [!!LeftIcon && (_jsx(View, { children: _jsx(Icon, { as: LeftIcon, style: styles.icon }) })), _jsx(View, { style: styles.labelContainer, children: _jsx(BodyText, { children: label }) }), isSelected && (_jsx(View, { children: _jsx(Icon, { as: TickSmallIcon, style: styles.icon }) })), !!RightIcon && !isSelected && (_jsx(View, { children: _jsx(Icon, { as: RightIcon, style: styles.icon }) }))] }));
 };
 const styles = StyleSheet.create(theme => ({
     container: {

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

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

package/build/components/UnstyledIconButton/UnstyledIconButton.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createButton } from '@gluestack-ui/button';
-import UnstyledIconButtonRootComponent from './UnstyledIconButtonRoot';
+import { useButtonGroupContext } from '../Button/ButtonGroup.context';
 import UnstyledIconButtonIconComponent from './UnstyledIconButtonIcon';
+import UnstyledIconButtonRootComponent from './UnstyledIconButtonRoot';
 import UnstyledIconButtonSpinerComponent from './UnstyledIconButtonSpinner';
-import { useButtonGroupContext } from '../Button/ButtonGroup.context';
 const UnstyledIconButtonComponent = createButton({
     Root: UnstyledIconButtonRootComponent,
     Icon: UnstyledIconButtonIconComponent,
@@ -15,12 +15,12 @@ const UnstyledIconButtonSpinner = UnstyledIconButtonComponent.Spinner;
 const UnstyledIconButtonIcon = UnstyledIconButtonComponent.Icon;
 UnstyledIconButtonSpinner.displayName = 'UnstyledIconButtonSpinner';
 UnstyledIconButtonIcon.displayName = 'UnstyledIconButtonIcon';
-const UnstyledIconButton = ({ icon, disabled = false, pressed, size = 'md', inverted = false, ...props }) => {
+const UnstyledIconButton = ({ icon, disabled = false, pressed, size = 'md', inverted = false, iconStyle, ...props }) => {
     const { disabled: groupDisabled, loading: groupLoading } = useButtonGroupContext();
     const { loading } = props;
     const isLoading = loading ?? groupLoading;
     const buttonDisabled = isLoading || (disabled ?? groupDisabled);
-    return (_jsx(UnstyledIconButtonComponent, { ...props, size: size, inverted: inverted, isDisabled: buttonDisabled, isPressed: pressed, icon: icon, children: loading ? _jsx(UnstyledIconButtonSpinner, {}) : _jsx(UnstyledIconButtonIcon, { as: icon }) }));
+    return (_jsx(UnstyledIconButtonComponent, { ...props, size: size, inverted: inverted, isDisabled: buttonDisabled, isPressed: pressed, icon: icon, children: loading ? (_jsx(UnstyledIconButtonSpinner, {})) : (_jsx(UnstyledIconButtonIcon, { as: icon, style: iconStyle })) }));
 };
 UnstyledIconButton.displayName = 'UnstyledIconButton';
 export default UnstyledIconButton;

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

@@ -1,5 +1,5 @@
 import type { ComponentType } from 'react';
-import type { PressableProps } from 'react-native';
+import type { PressableProps, ViewProps } from 'react-native';
 export type UnstyledIconButtonProps = {
     disabled?: boolean;
     pressed?: boolean;
@@ -8,4 +8,5 @@ export type UnstyledIconButtonProps = {
     size?: 'sm' | 'md';
     inverted?: boolean;
     children?: React.ReactNode;
+    iconStyle?: ViewProps['style'];
 } & PressableProps;

package/build/core/themes.d.ts

@@ -1017,7 +1017,7 @@ export declare const lightTheme: {
             readonly brand: "#7a42c8";
             readonly inverted: "#fcfbf2";
             readonly primary: "#101010";
-            readonly secondary: "#888888";
+            readonly secondary: "#5b5b5b";
         };
         readonly blue: {
             readonly '0': "#f8fbff";
@@ -2010,7 +2010,7 @@ export declare const darkTheme: {
         readonly white: "#ffffff";
         readonly black: "#000000";
         readonly background: {
-            readonly brand: "#996cda";
+            readonly brand: "#7a42c8";
             readonly primary: "#191917";
             readonly secondary: "#232323";
         };
@@ -2086,7 +2086,7 @@ export declare const darkTheme: {
         readonly interactive: {
             readonly affirmative: {
                 readonly border: {
-                    readonly strong: "#ebebeb";
+                    readonly strong: "#101010";
                     readonly subtle: "#58ca93";
                 };
                 readonly foreground: {
@@ -2122,7 +2122,7 @@ export declare const darkTheme: {
             };
             readonly destructive: {
                 readonly border: {
-                    readonly strong: "#ebebeb";
+                    readonly strong: "#101010";
                     readonly subtle: "#ff7964";
                 };
                 readonly foreground: {
@@ -2170,7 +2170,7 @@ export declare const darkTheme: {
             };
             readonly highlight: {
                 readonly border: {
-                    readonly strong: "#f7f7f7";
+                    readonly strong: "#101010";
                 };
                 readonly foreground: {
                     readonly strong: "#101010";
@@ -2250,7 +2250,7 @@ export declare const darkTheme: {
         readonly text: {
             readonly affirmative: "#58ca93";
             readonly brand: "#af90de";
-            readonly inverted: "#191917";
+            readonly inverted: "#fcfbf2";
             readonly primary: "#ebebeb";
             readonly secondary: "#b2afae";
         };
@@ -3488,7 +3488,7 @@ export declare const themes: {
                 readonly brand: "#7a42c8";
                 readonly inverted: "#fcfbf2";
                 readonly primary: "#101010";
-                readonly secondary: "#888888";
+                readonly secondary: "#5b5b5b";
             };
             readonly blue: {
                 readonly '0': "#f8fbff";
@@ -4481,7 +4481,7 @@ export declare const themes: {
             readonly white: "#ffffff";
             readonly black: "#000000";
             readonly background: {
-                readonly brand: "#996cda";
+                readonly brand: "#7a42c8";
                 readonly primary: "#191917";
                 readonly secondary: "#232323";
             };
@@ -4557,7 +4557,7 @@ export declare const themes: {
             readonly interactive: {
                 readonly affirmative: {
                     readonly border: {
-                        readonly strong: "#ebebeb";
+                        readonly strong: "#101010";
                         readonly subtle: "#58ca93";
                     };
                     readonly foreground: {
@@ -4593,7 +4593,7 @@ export declare const themes: {
                 };
                 readonly destructive: {
                     readonly border: {
-                        readonly strong: "#ebebeb";
+                        readonly strong: "#101010";
                         readonly subtle: "#ff7964";
                     };
                     readonly foreground: {
@@ -4641,7 +4641,7 @@ export declare const themes: {
                 };
                 readonly highlight: {
                     readonly border: {
-                        readonly strong: "#f7f7f7";
+                        readonly strong: "#101010";
                     };
                     readonly foreground: {
                         readonly strong: "#101010";
@@ -4721,7 +4721,7 @@ export declare const themes: {
             readonly text: {
                 readonly affirmative: "#58ca93";
                 readonly brand: "#af90de";
-                readonly inverted: "#191917";
+                readonly inverted: "#fcfbf2";
                 readonly primary: "#ebebeb";
                 readonly secondary: "#b2afae";
             };

package/build/tokens/color.d.ts

@@ -458,12 +458,12 @@ export declare const light: {
         readonly brand: "#7a42c8";
         readonly inverted: "#fcfbf2";
         readonly primary: "#101010";
-        readonly secondary: "#888888";
+        readonly secondary: "#5b5b5b";
     };
 };
 export declare const dark: {
     readonly background: {
-        readonly brand: "#996cda";
+        readonly brand: "#7a42c8";
         readonly primary: "#191917";
         readonly secondary: "#232323";
     };
@@ -539,7 +539,7 @@ export declare const dark: {
     readonly interactive: {
         readonly affirmative: {
             readonly border: {
-                readonly strong: "#ebebeb";
+                readonly strong: "#101010";
                 readonly subtle: "#58ca93";
             };
             readonly foreground: {
@@ -575,7 +575,7 @@ export declare const dark: {
         };
         readonly destructive: {
             readonly border: {
-                readonly strong: "#ebebeb";
+                readonly strong: "#101010";
                 readonly subtle: "#ff7964";
             };
             readonly foreground: {
@@ -623,7 +623,7 @@ export declare const dark: {
         };
         readonly highlight: {
             readonly border: {
-                readonly strong: "#f7f7f7";
+                readonly strong: "#101010";
             };
             readonly foreground: {
                 readonly strong: "#101010";
@@ -703,7 +703,7 @@ export declare const dark: {
     readonly text: {
         readonly affirmative: "#58ca93";
         readonly brand: "#af90de";
-        readonly inverted: "#191917";
+        readonly inverted: "#fcfbf2";
         readonly primary: "#ebebeb";
         readonly secondary: "#b2afae";
     };
@@ -1166,12 +1166,12 @@ declare const color: {
             readonly brand: "#7a42c8";
             readonly inverted: "#fcfbf2";
             readonly primary: "#101010";
-            readonly secondary: "#888888";
+            readonly secondary: "#5b5b5b";
         };
     };
     readonly dark: {
         readonly background: {
-            readonly brand: "#996cda";
+            readonly brand: "#7a42c8";
             readonly primary: "#191917";
             readonly secondary: "#232323";
         };
@@ -1247,7 +1247,7 @@ declare const color: {
         readonly interactive: {
             readonly affirmative: {
                 readonly border: {
-                    readonly strong: "#ebebeb";
+                    readonly strong: "#101010";
                     readonly subtle: "#58ca93";
                 };
                 readonly foreground: {
@@ -1283,7 +1283,7 @@ declare const color: {
             };
             readonly destructive: {
                 readonly border: {
-                    readonly strong: "#ebebeb";
+                    readonly strong: "#101010";
                     readonly subtle: "#ff7964";
                 };
                 readonly foreground: {
@@ -1331,7 +1331,7 @@ declare const color: {
             };
             readonly highlight: {
                 readonly border: {
-                    readonly strong: "#f7f7f7";
+                    readonly strong: "#101010";
                 };
                 readonly foreground: {
                     readonly strong: "#101010";
@@ -1411,7 +1411,7 @@ declare const color: {
         readonly text: {
             readonly affirmative: "#58ca93";
             readonly brand: "#af90de";
-            readonly inverted: "#191917";
+            readonly inverted: "#fcfbf2";
             readonly primary: "#ebebeb";
             readonly secondary: "#b2afae";
         };

package/build/tokens/color.js

@@ -458,12 +458,12 @@ export const light = {
         brand: '#7a42c8',
         inverted: '#fcfbf2',
         primary: '#101010',
-        secondary: '#888888',
+        secondary: '#5b5b5b',
     },
 };
 export const dark = {
     background: {
-        brand: '#996cda',
+        brand: '#7a42c8',
         primary: '#191917',
         secondary: '#232323',
     },
@@ -539,7 +539,7 @@ export const dark = {
     interactive: {
         affirmative: {
             border: {
-                strong: '#ebebeb',
+                strong: '#101010',
                 subtle: '#58ca93',
             },
             foreground: {
@@ -575,7 +575,7 @@ export const dark = {
         },
         destructive: {
             border: {
-                strong: '#ebebeb',
+                strong: '#101010',
                 subtle: '#ff7964',
             },
             foreground: {
@@ -623,7 +623,7 @@ export const dark = {
         },
         highlight: {
             border: {
-                strong: '#f7f7f7',
+                strong: '#101010',
             },
             foreground: {
                 strong: '#101010',
@@ -703,7 +703,7 @@ export const dark = {
     text: {
         affirmative: '#58ca93',
         brand: '#af90de',
-        inverted: '#191917',
+        inverted: '#fcfbf2',
         primary: '#ebebeb',
         secondary: '#b2afae',
     },

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

@@ -5,7 +5,20 @@ declare const _default: {
     readonly borderRadius: 8;
     readonly borderWidth: 2;
     readonly contentGap: 4;
+    readonly focus: "#101010";
     readonly gap: 8;
+    readonly iconButton: {
+        readonly unstyled: {
+            readonly foregroundColor: "#101010";
+            readonly foregroundColorActive: "#3f3f3f";
+            readonly foregroundColorHover: "#3a3837";
+        };
+    };
+    readonly link: {
+        readonly color: "#101010";
+        readonly colorActive: "#3f3f3f";
+        readonly colorHover: "#3a3837";
+    };
     readonly padding: 14;
 };
 export default _default;

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

@@ -5,6 +5,19 @@ export default {
     borderRadius: 8,
     borderWidth: 2,
     contentGap: 4,
+    focus: '#101010',
     gap: 8,
+    iconButton: {
+        unstyled: {
+            foregroundColor: '#101010',
+            foregroundColorActive: '#3f3f3f',
+            foregroundColorHover: '#3a3837',
+        },
+    },
+    link: {
+        color: '#101010',
+        colorActive: '#3f3f3f',
+        colorHover: '#3a3837',
+    },
     padding: 14,
 };

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

@@ -6,6 +6,9 @@ declare const _default: {
     readonly borderWidth: 2;
     readonly checked: {
         readonly backgroundColor: "#ebebeb";
+        readonly icon: {
+            readonly color: "#101010";
+        };
     };
     readonly gap: 8;
     readonly group: {

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

@@ -6,6 +6,9 @@ export default {
     borderWidth: 2,
     checked: {
         backgroundColor: '#ebebeb',
+        icon: {
+            color: '#101010',
+        },
     },
     gap: 8,
     group: {

package/build/tokens/components/dark/icon-button.d.ts

@@ -2,6 +2,13 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
+    readonly iconButton: {
+        readonly unstyled: {
+            readonly foregroundColor: "#101010";
+            readonly foregroundColorActive: "#3f3f3f";
+            readonly foregroundColorHover: "#3a3837";
+        };
+    };
     readonly borderRadius: 8;
     readonly md: {
         readonly height: 48;

package/build/tokens/components/dark/icon-button.js

@@ -2,6 +2,13 @@
  * Do not edit directly, this file was auto-generated.
  */
 export default {
+    iconButton: {
+        unstyled: {
+            foregroundColor: '#101010',
+            foregroundColorActive: '#3f3f3f',
+            foregroundColorHover: '#3a3837',
+        },
+    },
     borderRadius: 8,
     md: {
         height: 48,

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

@@ -33,6 +33,7 @@ export { default as overlay } from './overlay';
 export { default as pagination } from './pagination';
 export { default as parts } from './parts';
 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 sectionHeader } from './section-header';

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

@@ -33,6 +33,7 @@ export { default as overlay } from './overlay';
 export { default as pagination } from './pagination';
 export { default as parts } from './parts';
 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 sectionHeader } from './section-header';

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

@@ -2,6 +2,11 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
+    readonly link: {
+        readonly color: "#101010";
+        readonly colorActive: "#3f3f3f";
+        readonly colorHover: "#3a3837";
+    };
     readonly color: "#ebebeb";
     readonly colorActive: "#b2afae";
     readonly colorHover: "#d3d3d3";

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

@@ -2,6 +2,11 @@
  * Do not edit directly, this file was auto-generated.
  */
 export default {
+    link: {
+        color: '#101010',
+        colorActive: '#3f3f3f',
+        colorHover: '#3a3837',
+    },
     color: '#ebebeb',
     colorActive: '#b2afae',
     colorHover: '#d3d3d3',

package/build/tokens/components/dark/progress-bar.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly barColor: "#4c473d";
+    readonly circular: {
+        readonly md: {
+            readonly bar: {
+                readonly width: 12;
+            };
+            readonly gap: 0;
+            readonly height: 140;
+            readonly label: {
+                readonly fontFamily: "DM Sans";
+                readonly fontSize: 24;
+                readonly fontWeight: 400;
+                readonly lineHeight: 24;
+            };
+        };
+        readonly sm: {
+            readonly barWidth: 8;
+            readonly height: 80;
+        };
+    };
+    readonly linear: {
+        readonly bar: {
+            readonly borderRadius: 9999;
+            readonly height: 12;
+        };
+        readonly gap: 8;
+        readonly label: {
+            readonly gap: 8;
+        };
+    };
+    readonly progress: {
+        readonly dangerColor: "#ff634a";
+        readonly defaultColor: "#c6b5e2";
+        readonly successColor: "#36bf7d";
+    };
+};
+export default _default;