@heymantle/litho 0.0.4 → 0.0.5

package/dist/esm/stories/Image.stories.js

@@ -98,12 +98,11 @@ function _unsupported_iterable_to_array(o, minLen) {
 }
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { transformStorySource } from "../utilities/transformers.js";
+import Stack from "../components/Stack.js";
 import Image from "../components/Image.js";
 import Text from "../components/Text.js";
 import Card from "../components/Card.js";
 import Button from "../components/Button.js";
-import HorizontalStack from "../components/HorizontalStack.js";
-import VerticalStack from "../components/VerticalStack.js";
 import Box from "../components/Box.js";
 import Grid from "../components/Grid.js";
 import { useState } from "react";
@@ -188,8 +187,8 @@ export var BorderRadius = {
             minItemWidth: "200px",
             gap: "8",
             children: [
-                /*#__PURE__*/ _jsxs(VerticalStack, {
-                    gap: "2",
+                /*#__PURE__*/ _jsxs(Stack, {
+                    gap: "sm",
                     inlineAlign: "center",
                     children: [
                         /*#__PURE__*/ _jsx(Image, {
@@ -208,8 +207,8 @@ export var BorderRadius = {
                         })
                     ]
                 }),
-                /*#__PURE__*/ _jsxs(VerticalStack, {
-                    gap: "2",
+                /*#__PURE__*/ _jsxs(Stack, {
+                    gap: "sm",
                     inlineAlign: "center",
                     children: [
                         /*#__PURE__*/ _jsx(Image, {
@@ -228,8 +227,8 @@ export var BorderRadius = {
                         })
                     ]
                 }),
-                /*#__PURE__*/ _jsxs(VerticalStack, {
-                    gap: "2",
+                /*#__PURE__*/ _jsxs(Stack, {
+                    gap: "sm",
                     inlineAlign: "center",
                     children: [
                         /*#__PURE__*/ _jsx(Image, {
@@ -248,8 +247,8 @@ export var BorderRadius = {
                         })
                     ]
                 }),
-                /*#__PURE__*/ _jsxs(VerticalStack, {
-                    gap: "2",
+                /*#__PURE__*/ _jsxs(Stack, {
+                    gap: "sm",
                     inlineAlign: "center",
                     children: [
                         /*#__PURE__*/ _jsx(Image, {
@@ -268,8 +267,8 @@ export var BorderRadius = {
                         })
                     ]
                 }),
-                /*#__PURE__*/ _jsxs(VerticalStack, {
-                    gap: "2",
+                /*#__PURE__*/ _jsxs(Stack, {
+                    gap: "sm",
                     inlineAlign: "center",
                     children: [
                         /*#__PURE__*/ _jsx(Image, {
@@ -288,8 +287,8 @@ export var BorderRadius = {
                         })
                     ]
                 }),
-                /*#__PURE__*/ _jsxs(VerticalStack, {
-                    gap: "2",
+                /*#__PURE__*/ _jsxs(Stack, {
+                    gap: "sm",
                     inlineAlign: "center",
                     children: [
                         /*#__PURE__*/ _jsx(Image, {
@@ -321,11 +320,12 @@ export var BorderRadius = {
 };
 export var RoundedProp = {
     render: function() {
-        return /*#__PURE__*/ _jsxs(HorizontalStack, {
-            gap: "4",
+        return /*#__PURE__*/ _jsxs(Stack, {
+            horizontal: true,
+            gap: "md",
             children: [
-                /*#__PURE__*/ _jsxs(VerticalStack, {
-                    gap: "2",
+                /*#__PURE__*/ _jsxs(Stack, {
+                    gap: "sm",
                     inlineAlign: "center",
                     children: [
                         /*#__PURE__*/ _jsx(Image, {
@@ -343,8 +343,8 @@ export var RoundedProp = {
                         })
                     ]
                 }),
-                /*#__PURE__*/ _jsxs(VerticalStack, {
-                    gap: "2",
+                /*#__PURE__*/ _jsxs(Stack, {
+                    gap: "sm",
                     inlineAlign: "center",
                     children: [
                         /*#__PURE__*/ _jsx(Image, {
@@ -394,8 +394,8 @@ export var ResponsiveImage = {
         alt: 'Responsive image'
     },
     render: function(args) {
-        return /*#__PURE__*/ _jsxs(VerticalStack, {
-            gap: "2",
+        return /*#__PURE__*/ _jsxs(Stack, {
+            gap: "sm",
             children: [
                 /*#__PURE__*/ _jsx(Image, _object_spread_props(_object_spread({}, args), {
                     style: {
@@ -422,8 +422,8 @@ export var ResponsiveImage = {
 export var WithLoadCallback = {
     render: function() {
         var _useState = _sliced_to_array(useState('Loading...'), 2), loadStatus = _useState[0], setLoadStatus = _useState[1];
-        return /*#__PURE__*/ _jsxs(VerticalStack, {
-            gap: "4",
+        return /*#__PURE__*/ _jsxs(Stack, {
+            gap: "md",
             children: [
                 /*#__PURE__*/ _jsx(Image, {
                     source: "https://picsum.photos/400/300?random=11",
@@ -514,8 +514,8 @@ export var ProductShowcase = {
                             }),
                             /*#__PURE__*/ _jsx(Box, {
                                 padding: "4",
-                                children: /*#__PURE__*/ _jsxs(VerticalStack, {
-                                    gap: "2",
+                                children: /*#__PURE__*/ _jsxs(Stack, {
+                                    gap: "sm",
                                     children: [
                                         /*#__PURE__*/ _jsx(Text, {
                                             variant: "headingSm",
@@ -575,7 +575,7 @@ export var ProfileCards = {
                 minItemWidth: "200px",
                 gap: "6",
                 children: team.map(function(member, index) {
-                    return /*#__PURE__*/ _jsxs(VerticalStack, {
+                    return /*#__PURE__*/ _jsxs(Stack, {
                         gap: "4",
                         inlineAlign: "center",
                         as: Box,
@@ -594,8 +594,8 @@ export var ProfileCards = {
                                     objectFit: 'cover'
                                 }
                             }),
-                            /*#__PURE__*/ _jsxs(VerticalStack, {
-                                gap: "1",
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                gap: "xs",
                                 inlineAlign: "center",
                                 children: [
                                     /*#__PURE__*/ _jsx(Text, {
@@ -639,10 +639,10 @@ export var ImageGallery = {
         return /*#__PURE__*/ _jsx(Card, {
             title: "Photo Gallery",
             padded: true,
-            children: /*#__PURE__*/ _jsxs(VerticalStack, {
-                gap: "8",
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                gap: "lg",
                 children: [
-                    selectedImage && /*#__PURE__*/ _jsxs(VerticalStack, {
+                    selectedImage && /*#__PURE__*/ _jsxs(Stack, {
                         gap: "4",
                         inlineAlign: "center",
                         as: Box,
@@ -708,8 +708,8 @@ export var ImageGallery = {
 };
 export var BannerImages = {
     render: function() {
-        return /*#__PURE__*/ _jsxs(VerticalStack, {
-            gap: "8",
+        return /*#__PURE__*/ _jsxs(Stack, {
+            gap: "lg",
             children: [
                 /*#__PURE__*/ _jsx(Card, {
                     title: "Hero Banner",
@@ -736,8 +736,8 @@ export var BannerImages = {
                                     color: 'white',
                                     textShadow: '2px 2px 4px rgba(0,0,0,0.7)'
                                 },
-                                children: /*#__PURE__*/ _jsxs(VerticalStack, {
-                                    gap: "2",
+                                children: /*#__PURE__*/ _jsxs(Stack, {
+                                    gap: "sm",
                                     inlineAlign: "center",
                                     children: [
                                         /*#__PURE__*/ _jsx(Text, {

package/dist/esm/stories/InlineError.stories.js

@@ -97,13 +97,13 @@ function _unsupported_iterable_to_array(o, minLen) {
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
 }
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { transformStorySource } from "../utilities/transformers.js";
 import InlineError from "../components/InlineError.js";
 import Text from "../components/Text.js";
 import Card from "../components/Card.js";
 import TextField from "../components/TextField.js";
 import Button from "../components/Button.js";
-import { HorizontalStack, VerticalStack, Box } from "../dist/esm/index.js";
+import Stack from "../components/Stack.js";
+import Box from "../components/Box.js";
 import { AlertMinor, InfoMinor } from "@shopify/polaris-icons";
 import { useState } from "react";
 export default {
@@ -146,8 +146,8 @@ export var Default = {
 };
 export var DifferentMessages = {
     render: function() {
-        return /*#__PURE__*/ _jsxs(VerticalStack, {
-            gap: "4",
+        return /*#__PURE__*/ _jsxs(Stack, {
+            gap: "md",
             children: [
                 /*#__PURE__*/ _jsx(InlineError, {
                     message: "This field is required",
@@ -182,8 +182,8 @@ export var DifferentMessages = {
 };
 export var CustomIcons = {
     render: function() {
-        return /*#__PURE__*/ _jsxs(VerticalStack, {
-            gap: "4",
+        return /*#__PURE__*/ _jsxs(Stack, {
+            gap: "md",
             children: [
                 /*#__PURE__*/ _jsx(InlineError, {
                     message: "This is a critical error",
@@ -212,8 +212,8 @@ export var CustomIcons = {
 };
 export var WithFormField = {
     render: function() {
-        return /*#__PURE__*/ _jsxs(VerticalStack, {
-            gap: "2",
+        return /*#__PURE__*/ _jsxs(Stack, {
+            gap: "sm",
             children: [
                 /*#__PURE__*/ _jsx(TextField, {
                     label: "Email Address",
@@ -302,8 +302,8 @@ export var FormValidation = {
             padded: true,
             children: /*#__PURE__*/ _jsx("form", {
                 onSubmit: handleSubmit,
-                children: /*#__PURE__*/ _jsxs(VerticalStack, {
-                    gap: "6",
+                children: /*#__PURE__*/ _jsxs(Stack, {
+                    gap: "md",
                     children: [
                         /*#__PURE__*/ _jsxs("div", {
                             children: [
@@ -423,16 +423,16 @@ export var MultipleErrors = {
         return /*#__PURE__*/ _jsx(Card, {
             title: "File Upload",
             padded: true,
-            children: /*#__PURE__*/ _jsxs(VerticalStack, {
-                gap: "6",
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                gap: "md",
                 children: [
                     /*#__PURE__*/ _jsx(TextField, {
                         label: "Upload Files",
                         placeholder: "Select files to upload",
                         error: true
                     }),
-                    /*#__PURE__*/ _jsxs(VerticalStack, {
-                        gap: "2",
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        gap: "sm",
                         children: [
                             /*#__PURE__*/ _jsx(InlineError, {
                                 message: "File size must be less than 10MB",
@@ -448,8 +448,9 @@ export var MultipleErrors = {
                             })
                         ]
                     }),
-                    /*#__PURE__*/ _jsxs(HorizontalStack, {
-                        gap: "4",
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        horizontal: true,
+                        gap: "md",
                         children: [
                             /*#__PURE__*/ _jsx(Button, {
                                 children: "Choose Files"
@@ -475,14 +476,14 @@ export var MultipleErrors = {
 };
 export var DifferentContexts = {
     render: function() {
-        return /*#__PURE__*/ _jsxs(VerticalStack, {
-            gap: "8",
+        return /*#__PURE__*/ _jsxs(Stack, {
+            gap: "lg",
             children: [
                 /*#__PURE__*/ _jsx(Card, {
                     title: "Login Form",
                     padded: true,
-                    children: /*#__PURE__*/ _jsxs(VerticalStack, {
-                        gap: "4",
+                    children: /*#__PURE__*/ _jsxs(Stack, {
+                        gap: "md",
                         children: [
                             /*#__PURE__*/ _jsx(TextField, {
                                 label: "Username",
@@ -509,8 +510,8 @@ export var DifferentContexts = {
                 /*#__PURE__*/ _jsx(Card, {
                     title: "Payment Information",
                     padded: true,
-                    children: /*#__PURE__*/ _jsxs(VerticalStack, {
-                        gap: "4",
+                    children: /*#__PURE__*/ _jsxs(Stack, {
+                        gap: "md",
                         children: [
                             /*#__PURE__*/ _jsx(TextField, {
                                 label: "Card Number",
@@ -565,8 +566,8 @@ export var DifferentContexts = {
                 /*#__PURE__*/ _jsx(Card, {
                     title: "Settings",
                     padded: true,
-                    children: /*#__PURE__*/ _jsxs(VerticalStack, {
-                        gap: "4",
+                    children: /*#__PURE__*/ _jsxs(Stack, {
+                        gap: "md",
                         children: [
                             /*#__PURE__*/ _jsx(TextField, {
                                 label: "API Endpoint",
@@ -605,8 +606,8 @@ export var AccessibilityExample = {
         return /*#__PURE__*/ _jsx(Card, {
             title: "Accessibility Features",
             padded: true,
-            children: /*#__PURE__*/ _jsxs(VerticalStack, {
-                gap: "6",
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                gap: "md",
                 children: [
                     /*#__PURE__*/ _jsx(Text, {
                         variant: "headingSm",

package/dist/esm/stories/Label.stories.js

@@ -28,11 +28,11 @@ function _object_spread(target) {
 }
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { transformStorySource } from "../utilities/transformers.js";
+import Stack from "../components/Stack.js";
 import Label from "../components/Label.js";
 import Text from "../components/Text.js";
 import Card from "../components/Card.js";
 import TextField from "../components/TextField.js";
-import VerticalStack from "../components/VerticalStack.js";
 import Box from "../components/Box.js";
 export default {
     title: 'Litho/Label',
@@ -150,8 +150,8 @@ export var Hidden = {
         hidden: true
     },
     render: function(args) {
-        return /*#__PURE__*/ _jsxs(VerticalStack, {
-            gap: "4",
+        return /*#__PURE__*/ _jsxs(Stack, {
+            gap: "md",
             children: [
                 /*#__PURE__*/ _jsx(Label, _object_spread({}, args)),
                 /*#__PURE__*/ _jsx(Text, {
@@ -183,8 +183,8 @@ export var Disabled = {
 };
 export var Variants = {
     render: function() {
-        return /*#__PURE__*/ _jsxs(VerticalStack, {
-            gap: "4",
+        return /*#__PURE__*/ _jsxs(Stack, {
+            gap: "md",
             children: [
                 /*#__PURE__*/ _jsx(Label, {
                     variant: "bodyXs",
@@ -215,8 +215,8 @@ export var Variants = {
 };
 export var FontWeights = {
     render: function() {
-        return /*#__PURE__*/ _jsxs(VerticalStack, {
-            gap: "4",
+        return /*#__PURE__*/ _jsxs(Stack, {
+            gap: "md",
             children: [
                 /*#__PURE__*/ _jsx(Label, {
                     fontWeight: "normal",
@@ -247,8 +247,8 @@ export var FontWeights = {
 };
 export var Colors = {
     render: function() {
-        return /*#__PURE__*/ _jsxs(VerticalStack, {
-            gap: "4",
+        return /*#__PURE__*/ _jsxs(Stack, {
+            gap: "md",
             children: [
                 /*#__PURE__*/ _jsx(Label, {
                     color: "subdued",
@@ -286,11 +286,11 @@ export var WithFormFields = {
         return /*#__PURE__*/ _jsx(Card, {
             title: "User Registration",
             padded: true,
-            children: /*#__PURE__*/ _jsxs(VerticalStack, {
-                gap: "6",
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                gap: "md",
                 children: [
-                    /*#__PURE__*/ _jsxs(VerticalStack, {
-                        gap: "2",
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        gap: "sm",
                         children: [
                             /*#__PURE__*/ _jsx(Label, {
                                 id: "firstName",
@@ -303,8 +303,8 @@ export var WithFormFields = {
                             })
                         ]
                     }),
-                    /*#__PURE__*/ _jsxs(VerticalStack, {
-                        gap: "2",
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        gap: "sm",
                         children: [
                             /*#__PURE__*/ _jsx(Label, {
                                 id: "lastName",
@@ -317,8 +317,8 @@ export var WithFormFields = {
                             })
                         ]
                     }),
-                    /*#__PURE__*/ _jsxs(VerticalStack, {
-                        gap: "2",
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        gap: "sm",
                         children: [
                             /*#__PURE__*/ _jsx(Label, {
                                 id: "email",
@@ -333,8 +333,8 @@ export var WithFormFields = {
                             })
                         ]
                     }),
-                    /*#__PURE__*/ _jsxs(VerticalStack, {
-                        gap: "2",
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        gap: "sm",
                         children: [
                             /*#__PURE__*/ _jsx(Label, {
                                 id: "phone",
@@ -347,8 +347,8 @@ export var WithFormFields = {
                             })
                         ]
                     }),
-                    /*#__PURE__*/ _jsxs(VerticalStack, {
-                        gap: "2",
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        gap: "sm",
                         children: [
                             /*#__PURE__*/ _jsx(Label, {
                                 id: "bio",
@@ -379,18 +379,18 @@ export var FormValidationStates = {
         return /*#__PURE__*/ _jsx(Card, {
             title: "Form Validation Examples",
             padded: true,
-            children: /*#__PURE__*/ _jsxs(VerticalStack, {
-                gap: "8",
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                gap: "lg",
                 children: [
-                    /*#__PURE__*/ _jsxs(VerticalStack, {
-                        gap: "4",
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        gap: "md",
                         children: [
                             /*#__PURE__*/ _jsx(Text, {
                                 variant: "headingSm",
                                 children: "Success State"
                             }),
-                            /*#__PURE__*/ _jsxs(VerticalStack, {
-                                gap: "2",
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                gap: "sm",
                                 children: [
                                     /*#__PURE__*/ _jsx(Label, {
                                         id: "validField",
@@ -406,15 +406,15 @@ export var FormValidationStates = {
                             })
                         ]
                     }),
-                    /*#__PURE__*/ _jsxs(VerticalStack, {
-                        gap: "4",
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        gap: "md",
                         children: [
                             /*#__PURE__*/ _jsx(Text, {
                                 variant: "headingSm",
                                 children: "Error State"
                             }),
-                            /*#__PURE__*/ _jsxs(VerticalStack, {
-                                gap: "2",
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                gap: "sm",
                                 children: [
                                     /*#__PURE__*/ _jsx(Label, {
                                         id: "errorField",
@@ -431,15 +431,15 @@ export var FormValidationStates = {
                             })
                         ]
                     }),
-                    /*#__PURE__*/ _jsxs(VerticalStack, {
-                        gap: "4",
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        gap: "md",
                         children: [
                             /*#__PURE__*/ _jsx(Text, {
                                 variant: "headingSm",
                                 children: "Warning State"
                             }),
-                            /*#__PURE__*/ _jsxs(VerticalStack, {
-                                gap: "2",
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                gap: "sm",
                                 children: [
                                     /*#__PURE__*/ _jsx(Label, {
                                         id: "warningField",
@@ -454,15 +454,15 @@ export var FormValidationStates = {
                             })
                         ]
                     }),
-                    /*#__PURE__*/ _jsxs(VerticalStack, {
-                        gap: "4",
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        gap: "md",
                         children: [
                             /*#__PURE__*/ _jsx(Text, {
                                 variant: "headingSm",
                                 children: "Disabled State"
                             }),
-                            /*#__PURE__*/ _jsxs(VerticalStack, {
-                                gap: "2",
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                gap: "sm",
                                 children: [
                                     /*#__PURE__*/ _jsx(Label, {
                                         id: "disabledField",
@@ -495,21 +495,21 @@ export var AccessibilityExample = {
         return /*#__PURE__*/ _jsx(Card, {
             title: "Accessibility Features",
             padded: true,
-            children: /*#__PURE__*/ _jsxs(VerticalStack, {
-                gap: "8",
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                gap: "lg",
                 children: [
-                    /*#__PURE__*/ _jsxs(VerticalStack, {
-                        gap: "4",
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        gap: "md",
                         children: [
                             /*#__PURE__*/ _jsx(Text, {
                                 variant: "headingSm",
                                 children: "Proper Label Association"
                             }),
-                            /*#__PURE__*/ _jsxs(VerticalStack, {
-                                gap: "4",
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                gap: "md",
                                 children: [
-                                    /*#__PURE__*/ _jsxs(VerticalStack, {
-                                        gap: "2",
+                                    /*#__PURE__*/ _jsxs(Stack, {
+                                        gap: "sm",
                                         children: [
                                             /*#__PURE__*/ _jsx(Label, {
                                                 id: "accessible-username",
@@ -531,18 +531,18 @@ export var AccessibilityExample = {
                             })
                         ]
                     }),
-                    /*#__PURE__*/ _jsxs(VerticalStack, {
-                        gap: "4",
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        gap: "md",
                         children: [
                             /*#__PURE__*/ _jsx(Text, {
                                 variant: "headingSm",
                                 children: "Screen Reader Only Label"
                             }),
-                            /*#__PURE__*/ _jsxs(VerticalStack, {
-                                gap: "4",
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                gap: "md",
                                 children: [
-                                    /*#__PURE__*/ _jsxs(VerticalStack, {
-                                        gap: "2",
+                                    /*#__PURE__*/ _jsxs(Stack, {
+                                        gap: "sm",
                                         children: [
                                             /*#__PURE__*/ _jsx(Label, {
                                                 id: "sr-only-field",
@@ -564,18 +564,18 @@ export var AccessibilityExample = {
                             })
                         ]
                     }),
-                    /*#__PURE__*/ _jsxs(VerticalStack, {
-                        gap: "4",
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        gap: "md",
                         children: [
                             /*#__PURE__*/ _jsx(Text, {
                                 variant: "headingSm",
                                 children: "Label with Additional Context"
                             }),
-                            /*#__PURE__*/ _jsxs(VerticalStack, {
-                                gap: "4",
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                gap: "md",
                                 children: [
-                                    /*#__PURE__*/ _jsxs(VerticalStack, {
-                                        gap: "2",
+                                    /*#__PURE__*/ _jsxs(Stack, {
+                                        gap: "sm",
                                         children: [
                                             /*#__PURE__*/ _jsx(Label, {
                                                 id: "context-field",