@utilitywarehouse/hearth-react-native 0.5.0 → 0.7.0

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

@@ -30,4 +30,23 @@ export default {
         padding: 16,
     },
     imageContainerBorderColor: '#ebebeb',
+    banner: {
+        illustration: {
+            lg: {
+                width: 100,
+            },
+            md: {
+                width: 80,
+            },
+            sm: {
+                width: 60,
+            },
+            xl: {
+                width: 120,
+            },
+            xs: {
+                width: 40,
+            },
+        },
+    },
 };

package/build/tokens/components/dark/card-action.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly content: {
+        readonly gap: 12;
+        readonly paddingHorizontal: 16;
+        readonly paddingVertical: 12;
+    };
+};
+export default _default;

package/build/tokens/components/dark/card-action.js

@@ -0,0 +1,10 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export default {
+    content: {
+        gap: 12,
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+    },
+};

package/build/tokens/components/dark/card-content.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly banner: {
+        readonly illustration: {
+            readonly lg: {
+                readonly width: 100;
+            };
+            readonly md: {
+                readonly width: 80;
+            };
+            readonly sm: {
+                readonly width: 60;
+            };
+            readonly xl: {
+                readonly width: 120;
+            };
+            readonly xs: {
+                readonly width: 40;
+            };
+        };
+    };
+};
+export default _default;

package/build/tokens/components/dark/card-content.js

@@ -0,0 +1,24 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export default {
+    banner: {
+        illustration: {
+            lg: {
+                width: 100,
+            },
+            md: {
+                width: 80,
+            },
+            sm: {
+                width: 60,
+            },
+            xl: {
+                width: 120,
+            },
+            xs: {
+                width: 40,
+            },
+        },
+    },
+};

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

@@ -0,0 +1,29 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly footer: {
+        readonly horizontal: {
+            readonly gap: 16;
+        };
+        readonly padding: 24;
+        readonly vertical: {
+            readonly gap: 8;
+        };
+    };
+    readonly gap: 20;
+    readonly heading: {
+        readonly gap: 8;
+    };
+    readonly width: 360;
+    readonly mobile: {
+        readonly padding: 16;
+    };
+    readonly tablet: {
+        readonly padding: 24;
+    };
+    readonly desktop: {
+        readonly padding: 24;
+    };
+};
+export default _default;

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

@@ -0,0 +1,28 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export default {
+    footer: {
+        horizontal: {
+            gap: 16,
+        },
+        padding: 24,
+        vertical: {
+            gap: 8,
+        },
+    },
+    gap: 20,
+    heading: {
+        gap: 8,
+    },
+    width: 360,
+    mobile: {
+        padding: 16,
+    },
+    tablet: {
+        padding: 24,
+    },
+    desktop: {
+        padding: 24,
+    },
+};

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

@@ -3,6 +3,5 @@
  */
 declare const _default: {
     readonly colorMode: "dark";
-    readonly mode: "dark";
 };
 export default _default;

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

@@ -3,5 +3,4 @@
  */
 export default {
     colorMode: 'dark',
-    mode: 'dark',
 };

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

@@ -11,12 +11,15 @@ export { default as bottomSheet } from './bottom-sheet';
 export { default as breadcrumb } from './breadcrumb';
 export { default as button } from './button';
 export { default as card } from './card';
+export { default as cardAction } from './card-action';
+export { default as cardContent } from './card-content';
 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';
 export { default as formField } from './form-field';
 export { default as iconButton } from './icon-button';

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

@@ -11,12 +11,15 @@ export { default as bottomSheet } from './bottom-sheet';
 export { default as breadcrumb } from './breadcrumb';
 export { default as button } from './button';
 export { default as card } from './card';
+export { default as cardAction } from './card-action';
+export { default as cardContent } from './card-content';
 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';
 export { default as formField } from './form-field';
 export { default as iconButton } from './icon-button';

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

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

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

@@ -30,4 +30,23 @@ export default {
         padding: 16,
     },
     imageContainerBorderColor: '#101010',
+    banner: {
+        illustration: {
+            lg: {
+                width: 100,
+            },
+            md: {
+                width: 80,
+            },
+            sm: {
+                width: 60,
+            },
+            xl: {
+                width: 120,
+            },
+            xs: {
+                width: 40,
+            },
+        },
+    },
 };

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

@@ -0,0 +1,11 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly content: {
+        readonly gap: 12;
+        readonly paddingHorizontal: 16;
+        readonly paddingVertical: 12;
+    };
+};
+export default _default;

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

@@ -0,0 +1,10 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export default {
+    content: {
+        gap: 12,
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+    },
+};

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

@@ -0,0 +1,25 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly banner: {
+        readonly illustration: {
+            readonly lg: {
+                readonly width: 100;
+            };
+            readonly md: {
+                readonly width: 80;
+            };
+            readonly sm: {
+                readonly width: 60;
+            };
+            readonly xl: {
+                readonly width: 120;
+            };
+            readonly xs: {
+                readonly width: 40;
+            };
+        };
+    };
+};
+export default _default;

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

@@ -0,0 +1,24 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export default {
+    banner: {
+        illustration: {
+            lg: {
+                width: 100,
+            },
+            md: {
+                width: 80,
+            },
+            sm: {
+                width: 60,
+            },
+            xl: {
+                width: 120,
+            },
+            xs: {
+                width: 40,
+            },
+        },
+    },
+};

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

@@ -0,0 +1,29 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly footer: {
+        readonly horizontal: {
+            readonly gap: 16;
+        };
+        readonly padding: 24;
+        readonly vertical: {
+            readonly gap: 8;
+        };
+    };
+    readonly gap: 20;
+    readonly heading: {
+        readonly gap: 8;
+    };
+    readonly width: 360;
+    readonly mobile: {
+        readonly padding: 16;
+    };
+    readonly tablet: {
+        readonly padding: 24;
+    };
+    readonly desktop: {
+        readonly padding: 24;
+    };
+};
+export default _default;

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

@@ -0,0 +1,28 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export default {
+    footer: {
+        horizontal: {
+            gap: 16,
+        },
+        padding: 24,
+        vertical: {
+            gap: 8,
+        },
+    },
+    gap: 20,
+    heading: {
+        gap: 8,
+    },
+    width: 360,
+    mobile: {
+        padding: 16,
+    },
+    tablet: {
+        padding: 24,
+    },
+    desktop: {
+        padding: 24,
+    },
+};

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

@@ -3,6 +3,5 @@
  */
 declare const _default: {
     readonly colorMode: "light";
-    readonly mode: "light";
 };
 export default _default;

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

@@ -3,5 +3,4 @@
  */
 export default {
     colorMode: 'light',
-    mode: 'light',
 };

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

@@ -11,12 +11,15 @@ export { default as bottomSheet } from './bottom-sheet';
 export { default as breadcrumb } from './breadcrumb';
 export { default as button } from './button';
 export { default as card } from './card';
+export { default as cardAction } from './card-action';
+export { default as cardContent } from './card-content';
 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';
 export { default as formField } from './form-field';
 export { default as iconButton } from './icon-button';

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

@@ -11,12 +11,15 @@ export { default as bottomSheet } from './bottom-sheet';
 export { default as breadcrumb } from './breadcrumb';
 export { default as button } from './button';
 export { default as card } from './card';
+export { default as cardAction } from './card-action';
+export { default as cardContent } from './card-content';
 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';
 export { default as formField } from './form-field';
 export { default as iconButton } from './icon-button';

package/build/tokens/layout.d.ts

@@ -7,7 +7,7 @@ export declare const mobile: {
         readonly minWidth: 320;
     };
     readonly container: {
-        readonly margin: 16;
+        readonly marginHorizontal: 16;
         readonly paddingBottom: 32;
         readonly paddingTop: 24;
         readonly width: 360;
@@ -35,7 +35,7 @@ export declare const tablet: {
         readonly minWidth: 740;
     };
     readonly container: {
-        readonly margin: 32;
+        readonly marginHorizontal: 32;
         readonly paddingBottom: 32;
         readonly paddingTop: 24;
         readonly width: 744;
@@ -63,7 +63,7 @@ export declare const desktop: {
         readonly minWidth: 992;
     };
     readonly container: {
-        readonly margin: 32;
+        readonly marginHorizontal: 32;
         readonly paddingBottom: 48;
         readonly paddingTop: 32;
         readonly width: 1096;
@@ -92,7 +92,7 @@ declare const layout: {
             readonly minWidth: 320;
         };
         readonly container: {
-            readonly margin: 16;
+            readonly marginHorizontal: 16;
             readonly paddingBottom: 32;
             readonly paddingTop: 24;
             readonly width: 360;
@@ -120,7 +120,7 @@ declare const layout: {
             readonly minWidth: 740;
         };
         readonly container: {
-            readonly margin: 32;
+            readonly marginHorizontal: 32;
             readonly paddingBottom: 32;
             readonly paddingTop: 24;
             readonly width: 744;
@@ -148,7 +148,7 @@ declare const layout: {
             readonly minWidth: 992;
         };
         readonly container: {
-            readonly margin: 32;
+            readonly marginHorizontal: 32;
             readonly paddingBottom: 48;
             readonly paddingTop: 32;
             readonly width: 1096;

package/build/tokens/layout.js

@@ -7,7 +7,7 @@ export const mobile = {
         minWidth: 320,
     },
     container: {
-        margin: 16,
+        marginHorizontal: 16,
         paddingBottom: 32,
         paddingTop: 24,
         width: 360,
@@ -35,7 +35,7 @@ export const tablet = {
         minWidth: 740,
     },
     container: {
-        margin: 32,
+        marginHorizontal: 32,
         paddingBottom: 32,
         paddingTop: 24,
         width: 744,
@@ -63,7 +63,7 @@ export const desktop = {
         minWidth: 992,
     },
     container: {
-        margin: 32,
+        marginHorizontal: 32,
         paddingBottom: 48,
         paddingTop: 32,
         width: 1096,

package/build/tokens/typography.d.ts

@@ -85,6 +85,7 @@ export declare const mobile: {
             readonly lineHeight: 36;
         };
     };
+    readonly listSpacing: 16;
 };
 export declare const tablet: {
     readonly bodyText: {
@@ -170,6 +171,7 @@ export declare const tablet: {
             readonly lineHeight: 36;
         };
     };
+    readonly listSpacing: 16;
 };
 export declare const desktop: {
     readonly bodyText: {
@@ -255,6 +257,7 @@ export declare const desktop: {
             readonly lineHeight: 48;
         };
     };
+    readonly listSpacing: 16;
 };
 declare const typography: {
     readonly mobile: {
@@ -341,6 +344,7 @@ declare const typography: {
                 readonly lineHeight: 36;
             };
         };
+        readonly listSpacing: 16;
     };
     readonly tablet: {
         readonly bodyText: {
@@ -426,6 +430,7 @@ declare const typography: {
                 readonly lineHeight: 36;
             };
         };
+        readonly listSpacing: 16;
     };
     readonly desktop: {
         readonly bodyText: {
@@ -511,6 +516,7 @@ declare const typography: {
                 readonly lineHeight: 48;
             };
         };
+        readonly listSpacing: 16;
     };
 };
 export default typography;

package/build/tokens/typography.js

@@ -85,6 +85,7 @@ export const mobile = {
             lineHeight: 36,
         },
     },
+    listSpacing: 16,
 };
 export const tablet = {
     bodyText: {
@@ -170,6 +171,7 @@ export const tablet = {
             lineHeight: 36,
         },
     },
+    listSpacing: 16,
 };
 export const desktop = {
     bodyText: {
@@ -255,6 +257,7 @@ export const desktop = {
             lineHeight: 48,
         },
     },
+    listSpacing: 16,
 };
 const typography = { mobile, tablet, desktop };
 export default typography;