@heymantle/litho 0.0.4 → 0.0.5

package/dist/cjs/stories/Image.stories.js

@@ -42,12 +42,11 @@ _export(exports, {
 });
 var _jsxruntime = require("react/jsx-runtime");
 var _transformers = require("../utilities/transformers.js");
+var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
 var _Image = /*#__PURE__*/ _interop_require_default(require("../components/Image.js"));
 var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
 var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
 var _Button = /*#__PURE__*/ _interop_require_default(require("../components/Button.js"));
-var _HorizontalStack = /*#__PURE__*/ _interop_require_default(require("../components/HorizontalStack.js"));
-var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.js"));
 var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
 var _Grid = /*#__PURE__*/ _interop_require_default(require("../components/Grid.js"));
 var _react = require("react");
@@ -235,8 +234,8 @@ var BorderRadius = {
             minItemWidth: "200px",
             gap: "8",
             children: [
-                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-                    gap: "2",
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    gap: "sm",
                     inlineAlign: "center",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Image.default, {
@@ -255,8 +254,8 @@ var BorderRadius = {
                         })
                     ]
                 }),
-                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-                    gap: "2",
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    gap: "sm",
                     inlineAlign: "center",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Image.default, {
@@ -275,8 +274,8 @@ var BorderRadius = {
                         })
                     ]
                 }),
-                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-                    gap: "2",
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    gap: "sm",
                     inlineAlign: "center",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Image.default, {
@@ -295,8 +294,8 @@ var BorderRadius = {
                         })
                     ]
                 }),
-                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-                    gap: "2",
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    gap: "sm",
                     inlineAlign: "center",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Image.default, {
@@ -315,8 +314,8 @@ var BorderRadius = {
                         })
                     ]
                 }),
-                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-                    gap: "2",
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    gap: "sm",
                     inlineAlign: "center",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Image.default, {
@@ -335,8 +334,8 @@ var BorderRadius = {
                         })
                     ]
                 }),
-                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-                    gap: "2",
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    gap: "sm",
                     inlineAlign: "center",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Image.default, {
@@ -368,11 +367,12 @@ var BorderRadius = {
 };
 var RoundedProp = {
     render: function() {
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
-            gap: "4",
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            horizontal: true,
+            gap: "md",
             children: [
-                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-                    gap: "2",
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    gap: "sm",
                     inlineAlign: "center",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Image.default, {
@@ -390,8 +390,8 @@ var RoundedProp = {
                         })
                     ]
                 }),
-                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-                    gap: "2",
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    gap: "sm",
                     inlineAlign: "center",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Image.default, {
@@ -441,8 +441,8 @@ var ResponsiveImage = {
         alt: 'Responsive image'
     },
     render: function(args) {
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-            gap: "2",
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            gap: "sm",
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_Image.default, _object_spread_props(_object_spread({}, args), {
                     style: {
@@ -469,8 +469,8 @@ var ResponsiveImage = {
 var WithLoadCallback = {
     render: function() {
         var _useState = _sliced_to_array((0, _react.useState)('Loading...'), 2), loadStatus = _useState[0], setLoadStatus = _useState[1];
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-            gap: "4",
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            gap: "md",
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_Image.default, {
                     source: "https://picsum.photos/400/300?random=11",
@@ -561,8 +561,8 @@ var ProductShowcase = {
                             }),
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
                                 padding: "4",
-                                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-                                    gap: "2",
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                                    gap: "sm",
                                     children: [
                                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                                             variant: "headingSm",
@@ -622,7 +622,7 @@ var ProfileCards = {
                 minItemWidth: "200px",
                 gap: "6",
                 children: team.map(function(member, index) {
-                    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                         gap: "4",
                         inlineAlign: "center",
                         as: _Box.default,
@@ -641,8 +641,8 @@ var ProfileCards = {
                                     objectFit: 'cover'
                                 }
                             }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-                                gap: "1",
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                                gap: "xs",
                                 inlineAlign: "center",
                                 children: [
                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
@@ -686,10 +686,10 @@ var ImageGallery = {
         return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
             title: "Photo Gallery",
             padded: true,
-            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-                gap: "8",
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                gap: "lg",
                 children: [
-                    selectedImage && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                    selectedImage && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                         gap: "4",
                         inlineAlign: "center",
                         as: _Box.default,
@@ -755,8 +755,8 @@ var ImageGallery = {
 };
 var BannerImages = {
     render: function() {
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-            gap: "8",
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            gap: "lg",
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
                     title: "Hero Banner",
@@ -783,8 +783,8 @@ var BannerImages = {
                                     color: 'white',
                                     textShadow: '2px 2px 4px rgba(0,0,0,0.7)'
                                 },
-                                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-                                    gap: "2",
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                                    gap: "sm",
                                     inlineAlign: "center",
                                     children: [
                                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {

package/dist/cjs/stories/InlineError.stories.js

@@ -38,13 +38,13 @@ _export(exports, {
     }
 });
 var _jsxruntime = require("react/jsx-runtime");
-var _transformers = require("../utilities/transformers.js");
 var _InlineError = /*#__PURE__*/ _interop_require_default(require("../components/InlineError.js"));
 var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
 var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
 var _TextField = /*#__PURE__*/ _interop_require_default(require("../components/TextField.js"));
 var _Button = /*#__PURE__*/ _interop_require_default(require("../components/Button.js"));
-var _ = require("../");
+var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
+var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
 var _polarisicons = require("@shopify/polaris-icons");
 var _react = require("react");
 function _array_like_to_array(arr, len) {
@@ -190,8 +190,8 @@ var Default = {
 };
 var DifferentMessages = {
     render: function() {
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
-            gap: "4",
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            gap: "md",
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_InlineError.default, {
                     message: "This field is required",
@@ -226,8 +226,8 @@ var DifferentMessages = {
 };
 var CustomIcons = {
     render: function() {
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
-            gap: "4",
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            gap: "md",
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_InlineError.default, {
                     message: "This is a critical error",
@@ -256,8 +256,8 @@ var CustomIcons = {
 };
 var WithFormField = {
     render: function() {
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
-            gap: "2",
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            gap: "sm",
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
                     label: "Email Address",
@@ -346,8 +346,8 @@ var FormValidation = {
             padded: true,
             children: /*#__PURE__*/ (0, _jsxruntime.jsx)("form", {
                 onSubmit: handleSubmit,
-                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
-                    gap: "6",
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    gap: "md",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                             children: [
@@ -363,7 +363,7 @@ var FormValidation = {
                                     error: !!errors.name,
                                     placeholder: "Enter your full name"
                                 }),
-                                errors.name && /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
+                                errors.name && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
                                     paddingBlockStart: "2",
                                     children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_InlineError.default, {
                                         message: errors.name,
@@ -387,7 +387,7 @@ var FormValidation = {
                                     error: !!errors.email,
                                     placeholder: "Enter your email"
                                 }),
-                                errors.email && /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
+                                errors.email && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
                                     paddingBlockStart: "2",
                                     children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_InlineError.default, {
                                         message: errors.email,
@@ -411,7 +411,7 @@ var FormValidation = {
                                     error: !!errors.password,
                                     placeholder: "Create a password"
                                 }),
-                                errors.password && /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
+                                errors.password && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
                                     paddingBlockStart: "2",
                                     children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_InlineError.default, {
                                         message: errors.password,
@@ -435,7 +435,7 @@ var FormValidation = {
                                     error: !!errors.confirmPassword,
                                     placeholder: "Confirm your password"
                                 }),
-                                errors.confirmPassword && /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
+                                errors.confirmPassword && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
                                     paddingBlockStart: "2",
                                     children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_InlineError.default, {
                                         message: errors.confirmPassword,
@@ -467,16 +467,16 @@ var MultipleErrors = {
         return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
             title: "File Upload",
             padded: true,
-            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
-                gap: "6",
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                gap: "md",
                 children: [
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
                         label: "Upload Files",
                         placeholder: "Select files to upload",
                         error: true
                     }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
-                        gap: "2",
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                        gap: "sm",
                         children: [
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_InlineError.default, {
                                 message: "File size must be less than 10MB",
@@ -492,8 +492,9 @@ var MultipleErrors = {
                             })
                         ]
                     }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.HorizontalStack, {
-                        gap: "4",
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                        horizontal: true,
+                        gap: "md",
                         children: [
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
                                 children: "Choose Files"
@@ -519,14 +520,14 @@ var MultipleErrors = {
 };
 var DifferentContexts = {
     render: function() {
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
-            gap: "8",
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            gap: "lg",
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
                     title: "Login Form",
                     padded: true,
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
-                        gap: "4",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                        gap: "md",
                         children: [
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
                                 label: "Username",
@@ -553,8 +554,8 @@ var DifferentContexts = {
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
                     title: "Payment Information",
                     padded: true,
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
-                        gap: "4",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                        gap: "md",
                         children: [
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
                                 label: "Card Number",
@@ -576,7 +577,7 @@ var DifferentContexts = {
                                                 error: true,
                                                 placeholder: "MM/YY"
                                             }),
-                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
                                                 paddingBlockStart: "2",
                                                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_InlineError.default, {
                                                     message: "Card has expired",
@@ -592,7 +593,7 @@ var DifferentContexts = {
                                                 error: true,
                                                 placeholder: "123"
                                             }),
-                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
                                                 paddingBlockStart: "2",
                                                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_InlineError.default, {
                                                     message: "Invalid CVV",
@@ -609,8 +610,8 @@ var DifferentContexts = {
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
                     title: "Settings",
                     padded: true,
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
-                        gap: "4",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                        gap: "md",
                         children: [
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
                                 label: "API Endpoint",
@@ -649,8 +650,8 @@ var AccessibilityExample = {
         return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
             title: "Accessibility Features",
             padded: true,
-            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
-                gap: "6",
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                gap: "md",
                 children: [
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                         variant: "headingSm",
@@ -664,7 +665,7 @@ var AccessibilityExample = {
                                 placeholder: "Enter username",
                                 "aria-describedby": "username-fieldError"
                             }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
                                 paddingBlockStart: "2",
                                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_InlineError.default, {
                                     message: "Username must be at least 3 characters long",
@@ -682,7 +683,7 @@ var AccessibilityExample = {
                                 placeholder: "Enter email",
                                 "aria-describedby": "email-fieldError"
                             }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
                                 paddingBlockStart: "2",
                                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_InlineError.default, {
                                     message: "Please enter a valid email address",