@utilitywarehouse/hearth-react-native 0.1.0 → 0.2.0

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

@@ -2,17 +2,10 @@
  * Do not edit directly, this file was auto-generated.
  */
 export default {
-    backgroundColor: '#222222',
-    borderColor: '#e7e6e6',
-    borderColorInvalid: '#ff7964',
-    borderColorReadOnly: '#464444',
-    borderColorValid: '#58ca93',
     borderRadius: 8,
     borderWidth: 1,
     borderWidthFocused: 2,
     calendar: {
-        backgroundColor: '#222222',
-        borderColor: '#4c473d',
         borderRadius: 8,
         borderWidth: 1,
         columnGap: 4,
@@ -25,13 +18,8 @@ export default {
             dateGap: 8,
         },
         item: {
-            backgroundColorActive: '#464444',
-            backgroundColorHover: '#3e3c3b',
-            backgroundColorRange: '#3e3c3b',
-            backgroundColorSelected: '#7a42c8',
             borderRadius: 8,
             minWidth: 32,
-            roundelBackgroundColor: '#a782db',
             roundelBackgroundColorInverted: '#fcfbf2',
             roundelHeight: 6,
             roundelWidth: 6,

package/build/tokens/components/dark/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/dark/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/dark/dialog.d.ts

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

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

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

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

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

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

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

package/build/tokens/components/dark/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/dark/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/dark/icon-button.d.ts

@@ -16,13 +16,13 @@ declare const _default: {
         readonly width: 32;
     };
     readonly unstyled: {
-        readonly foregroundColor: "#e7e6e6";
+        readonly foregroundColor: "#f7f7f7";
         readonly foregroundColorActive: "#b2afae";
-        readonly foregroundColorHover: "#d1d0d0";
+        readonly foregroundColorHover: "#d3d3d3";
         readonly inverted: {
-            readonly foregroundColor: "#fcfbf2";
-            readonly foregroundColorActive: "#f1efe4";
-            readonly foregroundColorHover: "#f7f6eb";
+            readonly foregroundColor: "#101010";
+            readonly foregroundColorActive: "#3a3837";
+            readonly foregroundColorHover: "#232323";
         };
         readonly md: {
             readonly height: 24;

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

@@ -16,13 +16,13 @@ export default {
         width: 32,
     },
     unstyled: {
-        foregroundColor: '#e7e6e6',
+        foregroundColor: '#f7f7f7',
         foregroundColorActive: '#b2afae',
-        foregroundColorHover: '#d1d0d0',
+        foregroundColorHover: '#d3d3d3',
         inverted: {
-            foregroundColor: '#fcfbf2',
-            foregroundColorActive: '#f1efe4',
-            foregroundColorHover: '#f7f6eb',
+            foregroundColor: '#101010',
+            foregroundColorActive: '#3a3837',
+            foregroundColorHover: '#232323',
         },
         md: {
             height: 24,

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

@@ -2,14 +2,6 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
-    readonly emphasis: {
-        readonly broadbandGreenBackground: "#506c21";
-        readonly cashbackLilacBackground: "#8b2bc9";
-        readonly energyBlueBackground: "#326e7a";
-        readonly insuranceOrangeBackground: "#9b4c0e";
-        readonly mobileRoseBackground: "#a7266d";
-        readonly piggyPinkBackground: "#8f358f";
-    };
     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: "#35421c";
-        readonly cashbackLilacBackground: "#522270";
-        readonly energyBlueBackground: "#254348";
-        readonly insuranceOrangeBackground: "#5a3213";
-        readonly mobileRoseBackground: "#601f42";
-        readonly piggyPinkBackground: "#5d2167";
-        readonly yellowBackground: "#756230";
-    };
 };
 export default _default;

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

@@ -2,14 +2,6 @@
  * Do not edit directly, this file was auto-generated.
  */
 export default {
-    emphasis: {
-        broadbandGreenBackground: '#506c21',
-        cashbackLilacBackground: '#8b2bc9',
-        energyBlueBackground: '#326e7a',
-        insuranceOrangeBackground: '#9b4c0e',
-        mobileRoseBackground: '#a7266d',
-        piggyPinkBackground: '#8f358f',
-    },
     lg: {
         borderRadiusNone: 0,
         borderRadiusRounded: 8,
@@ -29,13 +21,4 @@ export default {
         padding: 6,
         width: 32,
     },
-    subtle: {
-        broadbandGreenBackground: '#35421c',
-        cashbackLilacBackground: '#522270',
-        energyBlueBackground: '#254348',
-        insuranceOrangeBackground: '#5a3213',
-        mobileRoseBackground: '#601f42',
-        piggyPinkBackground: '#5d2167',
-        yellowBackground: '#756230',
-    },
 };

package/build/tokens/components/dark/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/dark/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/dark/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/dark/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/dark/inline-link.d.ts

@@ -3,7 +3,7 @@
  */
 declare const _default: {
     readonly color: "#6bb0ff";
-    readonly colorVisited: "#a782db";
+    readonly colorVisited: "#996cda";
     readonly inverted: {
         readonly color: "#fcfbf2";
         readonly colorActive: "#f1efe4";

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

@@ -3,7 +3,7 @@
  */
 export default {
     color: '#6bb0ff',
-    colorVisited: '#a782db',
+    colorVisited: '#996cda',
     inverted: {
         color: '#fcfbf2',
         colorActive: '#f1efe4',

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

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

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

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

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

@@ -2,9 +2,9 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
-    readonly color: "#e7e6e6";
+    readonly color: "#ebebeb";
     readonly colorActive: "#b2afae";
-    readonly colorHover: "#d1d0d0";
+    readonly colorHover: "#d3d3d3";
     readonly gap: 2;
     readonly inverted: {
         readonly color: "#fcfbf2";

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

@@ -2,9 +2,9 @@
  * Do not edit directly, this file was auto-generated.
  */
 export default {
-    color: '#e7e6e6',
+    color: '#ebebeb',
     colorActive: '#b2afae',
-    colorHover: '#d1d0d0',
+    colorHover: '#d3d3d3',
     gap: 2,
     inverted: {
         color: '#fcfbf2',

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

@@ -2,26 +2,7 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
-    readonly gap: 12;
-    readonly heading: {
-        readonly gap: 12;
-        readonly textContentGap: 2;
-    };
-    readonly item: {
-        readonly backgroundColorActive: "#4c473d";
-        readonly backgroundColorHover: "#30302c";
-        readonly borderWidth: 1;
-        readonly contentGap: 2;
-        readonly emphasis: {
-            readonly borderColor: "#e7e6e6";
-        };
-        readonly gap: 12;
-        readonly padding: 16;
-        readonly subtle: {
-            readonly borderColor: "#4c473d";
-        };
-    };
-    readonly listContainer: {
+    readonly container: {
         readonly emphasisWarmWhite: {
             readonly borderRadius: 16;
         };
@@ -30,6 +11,9 @@ declare const _default: {
         };
         readonly none: {
             readonly borderRadius: 0;
+            readonly item: {
+                readonly paddingHorizontal: 0;
+            };
         };
         readonly subtleWarmWhite: {
             readonly borderRadius: 16;
@@ -38,6 +22,22 @@ declare const _default: {
             readonly borderRadius: 16;
         };
     };
+    readonly gap: 12;
+    readonly item: {
+        readonly contentGap: 2;
+        readonly functional: {
+            readonly borderWidth: 1;
+            readonly padding: 16;
+            readonly paddingNone: 0;
+        };
+        readonly gap: 12;
+        readonly stylised: {
+            readonly borderWidth: 2;
+            readonly height: 72;
+            readonly paddingLeft: 0;
+            readonly paddingRight: 16;
+        };
+    };
     readonly list: {
         readonly gap: 4;
     };

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

@@ -2,26 +2,7 @@
  * Do not edit directly, this file was auto-generated.
  */
 export default {
-    gap: 12,
-    heading: {
-        gap: 12,
-        textContentGap: 2,
-    },
-    item: {
-        backgroundColorActive: '#4c473d',
-        backgroundColorHover: '#30302c',
-        borderWidth: 1,
-        contentGap: 2,
-        emphasis: {
-            borderColor: '#e7e6e6',
-        },
-        gap: 12,
-        padding: 16,
-        subtle: {
-            borderColor: '#4c473d',
-        },
-    },
-    listContainer: {
+    container: {
         emphasisWarmWhite: {
             borderRadius: 16,
         },
@@ -30,6 +11,9 @@ export default {
         },
         none: {
             borderRadius: 0,
+            item: {
+                paddingHorizontal: 0,
+            },
         },
         subtleWarmWhite: {
             borderRadius: 16,
@@ -38,6 +22,22 @@ export default {
             borderRadius: 16,
         },
     },
+    gap: 12,
+    item: {
+        contentGap: 2,
+        functional: {
+            borderWidth: 1,
+            padding: 16,
+            paddingNone: 0,
+        },
+        gap: 12,
+        stylised: {
+            borderWidth: 2,
+            height: 72,
+            paddingLeft: 0,
+            paddingRight: 16,
+        },
+    },
     list: {
         gap: 4,
     },

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

@@ -2,24 +2,12 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
-    readonly backgroundColor: "#222222";
-    readonly borderColor: "#4c473d";
     readonly borderWidth: 1;
     readonly gap: 4;
     readonly item: {
         readonly borderRadius: 8;
         readonly gap: 6;
-        readonly grey: {
-            readonly backgroundColorActive: "#464444";
-            readonly backgroundColorHover: "#3e3c3b";
-            readonly foregroundColor: "#e7e6e6";
-        };
         readonly padding: 12;
-        readonly red: {
-            readonly backgroundColorActive: "#3b1512";
-            readonly backgroundColorHover: "#521a16";
-            readonly foregroundColor: "#ff7964";
-        };
     };
     readonly list: {
         readonly gap: 4;

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

@@ -2,24 +2,12 @@
  * Do not edit directly, this file was auto-generated.
  */
 export default {
-    backgroundColor: '#222222',
-    borderColor: '#4c473d',
     borderWidth: 1,
     gap: 4,
     item: {
         borderRadius: 8,
         gap: 6,
-        grey: {
-            backgroundColorActive: '#464444',
-            backgroundColorHover: '#3e3c3b',
-            foregroundColor: '#e7e6e6',
-        },
         padding: 12,
-        red: {
-            backgroundColorActive: '#3b1512',
-            backgroundColorHover: '#521a16',
-            foregroundColor: '#ff7964',
-        },
     },
     list: {
         gap: 4,

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

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

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

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