@utilitywarehouse/hearth-react-native 0.1.0 → 0.3.0

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

@@ -5,44 +5,16 @@ declare const _default: {
     readonly borderRadius: 16;
     readonly brand: {
         readonly borderWidth: 2;
-        readonly emphasis: {
-            readonly borderColor: "#101010";
-            readonly broadbandGreenBackgroundColor: "#8cba3b";
-            readonly cashbackLilacBackgroundColor: "#be7aeb";
-            readonly energyBlueBackgroundColor: "#6db5c3";
-            readonly insuranceOrangeBackgroundColor: "#ff7b00";
-            readonly mobileRoseBackgroundColor: "#ee6dbb";
-            readonly piggyPinkBackgroundColor: "#f295ff";
-            readonly purpleBackgroundColor: "#7a42c8";
-        };
-        readonly subtle: {
-            readonly borderColor: "#101010";
-            readonly broadbandGreenBackgroundColor: "#d2e6b0";
-            readonly cashbackLilacBackgroundColor: "#dfbdf5";
-            readonly energyBlueBackgroundColor: "#bddee4";
-            readonly insuranceOrangeBackgroundColor: "#ffb46d";
-            readonly mobileRoseBackgroundColor: "#fad0e9";
-            readonly piggyPinkBackgroundColor: "#f9ceff";
-            readonly purpleBackgroundColor: "#d5c3ee";
-            readonly yellowBackgroundColor: "#ffd885";
-        };
     };
     readonly neutral: {
         readonly emphasis: {
-            readonly borderColor: "#101010";
             readonly borderWidth: 2;
         };
         readonly subtle: {
-            readonly borderColor: "#d4d2c0";
             readonly borderWidth: 1;
         };
-        readonly warmWhiteBackgroundColor: "#fcfbf2";
-        readonly whiteBackgroundColor: "#ffffff";
     };
     readonly selectable: {
-        readonly backgroundColor: "#ffffff";
-        readonly borderColor: "#d4d2c0";
-        readonly borderColorSelected: "#101010";
         readonly borderWidth: 1;
         readonly borderWidthSelected: 2;
         readonly gap: 16;

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

@@ -5,44 +5,16 @@ export default {
     borderRadius: 16,
     brand: {
         borderWidth: 2,
-        emphasis: {
-            borderColor: '#101010',
-            broadbandGreenBackgroundColor: '#8cba3b',
-            cashbackLilacBackgroundColor: '#be7aeb',
-            energyBlueBackgroundColor: '#6db5c3',
-            insuranceOrangeBackgroundColor: '#ff7b00',
-            mobileRoseBackgroundColor: '#ee6dbb',
-            piggyPinkBackgroundColor: '#f295ff',
-            purpleBackgroundColor: '#7a42c8',
-        },
-        subtle: {
-            borderColor: '#101010',
-            broadbandGreenBackgroundColor: '#d2e6b0',
-            cashbackLilacBackgroundColor: '#dfbdf5',
-            energyBlueBackgroundColor: '#bddee4',
-            insuranceOrangeBackgroundColor: '#ffb46d',
-            mobileRoseBackgroundColor: '#fad0e9',
-            piggyPinkBackgroundColor: '#f9ceff',
-            purpleBackgroundColor: '#d5c3ee',
-            yellowBackgroundColor: '#ffd885',
-        },
     },
     neutral: {
         emphasis: {
-            borderColor: '#101010',
             borderWidth: 2,
         },
         subtle: {
-            borderColor: '#d4d2c0',
             borderWidth: 1,
         },
-        warmWhiteBackgroundColor: '#fcfbf2',
-        whiteBackgroundColor: '#ffffff',
     },
     selectable: {
-        backgroundColor: '#ffffff',
-        borderColor: '#d4d2c0',
-        borderColorSelected: '#101010',
         borderWidth: 1,
         borderWidthSelected: 2,
         gap: 16,

package/build/tokens/components/light/carousel-control.d.ts

@@ -4,15 +4,7 @@
 declare const _default: {
     readonly gap: 8;
     readonly item: {
-        readonly backgroundColorActive: "#101010";
-        readonly borderColor: "#101010";
-        readonly borderColorHover: "#3e3c3b";
         readonly borderWidth: 2;
-        readonly inverted: {
-            readonly backgroundColorActive: "#fcfbf2";
-            readonly borderColor: "#fcfbf2";
-            readonly borderColorHover: "#f1efe4";
-        };
     };
     readonly size: 12;
 };

package/build/tokens/components/light/carousel-control.js

@@ -4,15 +4,7 @@
 export default {
     gap: 8,
     item: {
-        backgroundColorActive: '#101010',
-        borderColor: '#101010',
-        borderColorHover: '#3e3c3b',
         borderWidth: 2,
-        inverted: {
-            backgroundColorActive: '#fcfbf2',
-            borderColor: '#fcfbf2',
-            borderColorHover: '#f1efe4',
-        },
     },
     size: 12,
 };

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

@@ -6,27 +6,22 @@ declare const _default: {
     readonly borderWidth: 2;
     readonly checked: {
         readonly backgroundColor: "#101010";
-        readonly borderColor: "#101010";
-        readonly iconColor: "#fcfbf2";
     };
-    readonly gap: 8;
+    readonly gap: 12;
     readonly group: {
         readonly gap: 16;
         readonly stack: {
-            readonly gap: 32;
+            readonly gap: 20;
         };
     };
     readonly outlineColorActive: "#d4d2c0";
     readonly outlineColorHover: "#f1efe4";
     readonly outlineWidth: 3;
     readonly tile: {
-        readonly backgroundColor: "#ffffff";
-        readonly borderColor: "#d4d2c0";
-        readonly borderColorSelected: "#101010";
         readonly borderRadius: 8;
         readonly borderWidth: 1;
         readonly borderWidthSelected: 2;
-        readonly gap: 8;
+        readonly gap: 12;
         readonly group: {
             readonly gap: 6;
             readonly stack: {
@@ -37,9 +32,5 @@ declare const _default: {
         readonly minWidth: 80;
         readonly padding: 12;
     };
-    readonly unchecked: {
-        readonly backgroundColor: "#ffffff";
-        readonly borderColor: "#8a8686";
-    };
 };
 export default _default;

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

@@ -6,27 +6,22 @@ export default {
     borderWidth: 2,
     checked: {
         backgroundColor: '#101010',
-        borderColor: '#101010',
-        iconColor: '#fcfbf2',
     },
-    gap: 8,
+    gap: 12,
     group: {
         gap: 16,
         stack: {
-            gap: 32,
+            gap: 20,
         },
     },
     outlineColorActive: '#d4d2c0',
     outlineColorHover: '#f1efe4',
     outlineWidth: 3,
     tile: {
-        backgroundColor: '#ffffff',
-        borderColor: '#d4d2c0',
-        borderColorSelected: '#101010',
         borderRadius: 8,
         borderWidth: 1,
         borderWidthSelected: 2,
-        gap: 8,
+        gap: 12,
         group: {
             gap: 6,
             stack: {
@@ -37,8 +32,4 @@ export default {
         minWidth: 80,
         padding: 12,
     },
-    unchecked: {
-        backgroundColor: '#ffffff',
-        borderColor: '#8a8686',
-    },
 };

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

@@ -2,17 +2,10 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
-    readonly backgroundColor: "#ffffff";
-    readonly borderColor: "#101010";
-    readonly borderColorInvalid: "#de2612";
-    readonly borderColorReadOnly: "#d1d0d0";
-    readonly borderColorValid: "#0f834a";
     readonly borderRadius: 8;
     readonly borderWidth: 1;
     readonly borderWidthFocused: 2;
     readonly calendar: {
-        readonly backgroundColor: "#ffffff";
-        readonly borderColor: "#d4d2c0";
         readonly borderRadius: 8;
         readonly borderWidth: 1;
         readonly columnGap: 4;
@@ -25,13 +18,8 @@ declare const _default: {
             readonly dateGap: 8;
         };
         readonly item: {
-            readonly backgroundColorActive: "#d1d0d0";
-            readonly backgroundColorHover: "#e7e6e6";
-            readonly backgroundColorRange: "#f6f5f5";
-            readonly backgroundColorSelected: "#7a42c8";
             readonly borderRadius: 8;
             readonly minWidth: 32;
-            readonly roundelBackgroundColor: "#7a42c8";
             readonly roundelBackgroundColorInverted: "#fcfbf2";
             readonly roundelHeight: 6;
             readonly roundelWidth: 6;

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

@@ -2,17 +2,10 @@
  * Do not edit directly, this file was auto-generated.
  */
 export default {
-    backgroundColor: '#ffffff',
-    borderColor: '#101010',
-    borderColorInvalid: '#de2612',
-    borderColorReadOnly: '#d1d0d0',
-    borderColorValid: '#0f834a',
     borderRadius: 8,
     borderWidth: 1,
     borderWidthFocused: 2,
     calendar: {
-        backgroundColor: '#ffffff',
-        borderColor: '#d4d2c0',
         borderRadius: 8,
         borderWidth: 1,
         columnGap: 4,
@@ -25,13 +18,8 @@ export default {
             dateGap: 8,
         },
         item: {
-            backgroundColorActive: '#d1d0d0',
-            backgroundColorHover: '#e7e6e6',
-            backgroundColorRange: '#f6f5f5',
-            backgroundColorSelected: '#7a42c8',
             borderRadius: 8,
             minWidth: 32,
-            roundelBackgroundColor: '#7a42c8',
             roundelBackgroundColorInverted: '#fcfbf2',
             roundelHeight: 6,
             roundelWidth: 6,

package/build/tokens/components/light/description-list.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly gap: 12;
+    readonly item: {
+        readonly column: {
+            readonly gap: 2;
+        };
+        readonly gap: 16;
+        readonly row: {
+            readonly gap: 8;
+            readonly headingWidth: 180;
+        };
+    };
+    readonly stack: {
+        readonly gap: 16;
+    };
+};
+export default _default;

package/build/tokens/components/light/description-list.js

@@ -0,0 +1,19 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export default {
+    gap: 12,
+    item: {
+        column: {
+            gap: 2,
+        },
+        gap: 16,
+        row: {
+            gap: 8,
+            headingWidth: 180,
+        },
+    },
+    stack: {
+        gap: 16,
+    },
+};

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

@@ -5,7 +5,6 @@ declare const _default: {
     readonly action: {
         readonly gap: 12;
     };
-    readonly backgroundColor: "#ffffff";
     readonly borderRadius: 16;
     readonly content: {
         readonly gap: 12;

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

@@ -5,7 +5,6 @@ export default {
     action: {
         gap: 12,
     },
-    backgroundColor: '#ffffff',
     borderRadius: 16,
     content: {
         gap: 12,

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

@@ -3,6 +3,9 @@
  */
 declare const _default: {
     readonly borderWidth: 1;
-    readonly color: "#d4d2c0";
+    readonly divider: {
+        readonly borderWidth: 2;
+        readonly color: "#101010";
+    };
 };
 export default _default;

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

@@ -3,5 +3,8 @@
  */
 export default {
     borderWidth: 1,
-    color: '#d4d2c0',
+    divider: {
+        borderWidth: 2,
+        color: '#101010',
+    },
 };

package/build/tokens/components/light/expandable-card.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly gapHorizontal: 12;
+    readonly gapVertical: 2;
+    readonly group: {
+        readonly gap: 12;
+    };
+};
+export default _default;

package/build/tokens/components/light/expandable-card.js

@@ -0,0 +1,10 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export default {
+    gapHorizontal: 12,
+    gapVertical: 2,
+    group: {
+        gap: 12,
+    },
+};

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

@@ -17,12 +17,12 @@ declare const _default: {
     };
     readonly unstyled: {
         readonly foregroundColor: "#101010";
-        readonly foregroundColorActive: "#464444";
-        readonly foregroundColorHover: "#3e3c3b";
+        readonly foregroundColorActive: "#3f3f3f";
+        readonly foregroundColorHover: "#3a3837";
         readonly inverted: {
-            readonly foregroundColor: "#fcfbf2";
-            readonly foregroundColorActive: "#f1efe4";
-            readonly foregroundColorHover: "#f7f6eb";
+            readonly foregroundColor: "#f7f7f7";
+            readonly foregroundColorActive: "#b2afae";
+            readonly foregroundColorHover: "#d3d3d3";
         };
         readonly md: {
             readonly height: 24;

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

@@ -17,12 +17,12 @@ export default {
     },
     unstyled: {
         foregroundColor: '#101010',
-        foregroundColorActive: '#464444',
-        foregroundColorHover: '#3e3c3b',
+        foregroundColorActive: '#3f3f3f',
+        foregroundColorHover: '#3a3837',
         inverted: {
-            foregroundColor: '#fcfbf2',
-            foregroundColorActive: '#f1efe4',
-            foregroundColorHover: '#f7f6eb',
+            foregroundColor: '#f7f7f7',
+            foregroundColorActive: '#b2afae',
+            foregroundColorHover: '#d3d3d3',
         },
         md: {
             height: 24,

package/build/tokens/components/light/icon-container.d.ts

@@ -2,14 +2,6 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
-    readonly emphasis: {
-        readonly broadbandGreenBackground: "#8cba3b";
-        readonly cashbackLilacBackground: "#be7aeb";
-        readonly energyBlueBackground: "#6db5c3";
-        readonly insuranceOrangeBackground: "#ff7b00";
-        readonly mobileRoseBackground: "#ee6dbb";
-        readonly piggyPinkBackground: "#f295ff";
-    };
     readonly lg: {
         readonly borderRadiusNone: 0;
         readonly borderRadiusRounded: 8;
@@ -29,14 +21,5 @@ declare const _default: {
         readonly padding: 6;
         readonly width: 32;
     };
-    readonly subtle: {
-        readonly broadbandGreenBackground: "#d2e6b0";
-        readonly cashbackLilacBackground: "#dfbdf5";
-        readonly energyBlueBackground: "#bddee4";
-        readonly insuranceOrangeBackground: "#ffb46d";
-        readonly mobileRoseBackground: "#fad0e9";
-        readonly piggyPinkBackground: "#f9ceff";
-        readonly yellowBackground: "#ffd885";
-    };
 };
 export default _default;

package/build/tokens/components/light/icon-container.js

@@ -2,14 +2,6 @@
  * Do not edit directly, this file was auto-generated.
  */
 export default {
-    emphasis: {
-        broadbandGreenBackground: '#8cba3b',
-        cashbackLilacBackground: '#be7aeb',
-        energyBlueBackground: '#6db5c3',
-        insuranceOrangeBackground: '#ff7b00',
-        mobileRoseBackground: '#ee6dbb',
-        piggyPinkBackground: '#f295ff',
-    },
     lg: {
         borderRadiusNone: 0,
         borderRadiusRounded: 8,
@@ -29,13 +21,4 @@ export default {
         padding: 6,
         width: 32,
     },
-    subtle: {
-        broadbandGreenBackground: '#d2e6b0',
-        cashbackLilacBackground: '#dfbdf5',
-        energyBlueBackground: '#bddee4',
-        insuranceOrangeBackground: '#ffb46d',
-        mobileRoseBackground: '#fad0e9',
-        piggyPinkBackground: '#f9ceff',
-        yellowBackground: '#ffd885',
-    },
 };

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

@@ -3,6 +3,7 @@
  */
 export { default as accordion } from './accordion';
 export { default as alert } from './alert';
+export { default as avatar } from './avatar';
 export { default as badge } from './badge';
 export { default as banner } from './banner';
 export { default as bottomNavigation } from './bottom-navigation';
@@ -13,14 +14,14 @@ export { default as card } from './card';
 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 focus } from './focus';
-export { default as footer } from './footer';
+export { default as expandableCard } from './expandable-card';
 export { default as formField } from './form-field';
-export { default as icon } from './icon';
 export { default as iconButton } from './icon-button';
 export { default as iconContainer } from './icon-container';
+export { default as indicatorIconButton } from './indicator-icon-button';
 export { default as inlineLink } from './inline-link';
 export { default as input } from './input';
 export { default as link } from './link';
@@ -29,15 +30,20 @@ export { default as menu } from './menu';
 export { default as modal } from './modal';
 export { default as navigation } from './navigation';
 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 progressStepper } from './progress-stepper';
 export { default as radio } from './radio';
+export { default as sectionHeader } from './section-header';
 export { default as segmentedControl } from './segmented-control';
 export { default as select } from './select';
 export { default as skeleton } from './skeleton';
 export { default as spinner } from './spinner';
 export { default as switch } from './switch';
-export { default as text } from './text';
+export { default as table } from './table';
+export { default as tabs } from './tabs';
+export { default as toast } from './toast';
 export { default as toggleButton } from './toggle-button';
+export { default as tooltip } from './tooltip';
 export { default as topNavigation } from './top-navigation';

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

@@ -3,6 +3,7 @@
  */
 export { default as accordion } from './accordion';
 export { default as alert } from './alert';
+export { default as avatar } from './avatar';
 export { default as badge } from './badge';
 export { default as banner } from './banner';
 export { default as bottomNavigation } from './bottom-navigation';
@@ -13,14 +14,14 @@ export { default as card } from './card';
 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 focus } from './focus';
-export { default as footer } from './footer';
+export { default as expandableCard } from './expandable-card';
 export { default as formField } from './form-field';
-export { default as icon } from './icon';
 export { default as iconButton } from './icon-button';
 export { default as iconContainer } from './icon-container';
+export { default as indicatorIconButton } from './indicator-icon-button';
 export { default as inlineLink } from './inline-link';
 export { default as input } from './input';
 export { default as link } from './link';
@@ -29,15 +30,20 @@ export { default as menu } from './menu';
 export { default as modal } from './modal';
 export { default as navigation } from './navigation';
 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 progressStepper } from './progress-stepper';
 export { default as radio } from './radio';
+export { default as sectionHeader } from './section-header';
 export { default as segmentedControl } from './segmented-control';
 export { default as select } from './select';
 export { default as skeleton } from './skeleton';
 export { default as spinner } from './spinner';
 export { default as switch } from './switch';
-export { default as text } from './text';
+export { default as table } from './table';
+export { default as tabs } from './tabs';
+export { default as toast } from './toast';
 export { default as toggleButton } from './toggle-button';
+export { default as tooltip } from './tooltip';
 export { default as topNavigation } from './top-navigation';

package/build/tokens/components/light/indicator-icon-button.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly indicator: {
+        readonly height: 8;
+        readonly radius: 9999;
+        readonly width: 8;
+    };
+};
+export default _default;

package/build/tokens/components/light/indicator-icon-button.js

@@ -0,0 +1,10 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export default {
+    indicator: {
+        height: 8,
+        radius: 9999,
+        width: 8,
+    },
+};

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

@@ -2,15 +2,9 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
-    readonly backgroundColor: "#ffffff";
-    readonly borderColor: "#101010";
-    readonly borderColorInvalid: "#de2612";
-    readonly borderColorReadOnly: "#d1d0d0";
-    readonly borderColorValid: "#0f834a";
     readonly borderRadius: 8;
     readonly borderWidth: 1;
     readonly borderWidthFocused: 2;
-    readonly color: "#101010";
     readonly currency: {
         readonly gap: 2;
         readonly height: 60;
@@ -24,13 +18,11 @@ declare const _default: {
         readonly gap: 2;
     };
     readonly maxWidth: 504;
-    readonly minWidth: 200;
+    readonly minWidth: 120;
     readonly paddingHorizontal: 16;
     readonly paddingVertical: 12;
-    readonly placeholderColor: "#6f6c6b";
     readonly textArea: {
         readonly height: 96;
-        readonly resizeIconColor: "#6f6c6b";
     };
     readonly validation: {
         readonly gap: 2;

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

@@ -2,15 +2,9 @@
  * Do not edit directly, this file was auto-generated.
  */
 export default {
-    backgroundColor: '#ffffff',
-    borderColor: '#101010',
-    borderColorInvalid: '#de2612',
-    borderColorReadOnly: '#d1d0d0',
-    borderColorValid: '#0f834a',
     borderRadius: 8,
     borderWidth: 1,
     borderWidthFocused: 2,
-    color: '#101010',
     currency: {
         gap: 2,
         height: 60,
@@ -24,13 +18,11 @@ export default {
         gap: 2,
     },
     maxWidth: 504,
-    minWidth: 200,
+    minWidth: 120,
     paddingHorizontal: 16,
     paddingVertical: 12,
-    placeholderColor: '#6f6c6b',
     textArea: {
         height: 96,
-        resizeIconColor: '#6f6c6b',
     },
     validation: {
         gap: 2,

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

@@ -3,8 +3,8 @@
  */
 declare const _default: {
     readonly color: "#101010";
-    readonly colorActive: "#464444";
-    readonly colorHover: "#3e3c3b";
+    readonly colorActive: "#3f3f3f";
+    readonly colorHover: "#3a3837";
     readonly gap: 2;
     readonly inverted: {
         readonly color: "#fcfbf2";