@heymantle/litho 0.0.4 → 0.0.5

package/dist/cjs/stories/Loading.stories.js

@@ -45,12 +45,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 _Loading = /*#__PURE__*/ _interop_require_default(require("../components/Loading.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 _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.js"));
-var _HorizontalStack = /*#__PURE__*/ _interop_require_default(require("../components/HorizontalStack.js"));
 var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
 var _react = require("react");
 function _array_like_to_array(arr, len) {
@@ -187,12 +186,13 @@ var Default = {
 };
 var Sizes = {
     render: function() {
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
-            gap: "2",
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            horizontal: true,
+            gap: "sm",
             blockAlign: "center",
             children: [
-                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-                    gap: "2",
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    gap: "sm",
                     inlineAlign: "center",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Loading.default, {
@@ -203,8 +203,8 @@ var Sizes = {
                         })
                     ]
                 }),
-                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-                    gap: "2",
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    gap: "sm",
                     inlineAlign: "center",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Loading.default, {
@@ -215,8 +215,8 @@ var Sizes = {
                         })
                     ]
                 }),
-                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-                    gap: "2",
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    gap: "sm",
                     inlineAlign: "center",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Loading.default, {
@@ -240,11 +240,12 @@ var Sizes = {
 };
 var Colors = {
     render: function() {
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
-            gap: "12",
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            horizontal: true,
+            gap: "lg",
             children: [
-                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-                    gap: "4",
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    gap: "md",
                     inlineAlign: "center",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Loading.default, {
@@ -255,8 +256,8 @@ var Colors = {
                         })
                     ]
                 }),
-                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-                    gap: "4",
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    gap: "md",
                     inlineAlign: "center",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Loading.default, {
@@ -267,8 +268,8 @@ var Colors = {
                         })
                     ]
                 }),
-                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-                    gap: "4",
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    gap: "md",
                     inlineAlign: "center",
                     as: _Box.default,
                     padding: "8",
@@ -297,8 +298,9 @@ var Colors = {
 };
 var InlineLoading = {
     render: function() {
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
-            gap: "2",
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            horizontal: true,
+            gap: "sm",
             blockAlign: "center",
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_Loading.default, {
@@ -323,7 +325,7 @@ var CardLoading = {
         return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
             title: "User Profile",
             padded: true,
-            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                 gap: "4",
                 inlineAlign: "center",
                 blockAlign: "center",
@@ -363,10 +365,11 @@ var OverlayLoading = {
                 title: "Data Dashboard",
                 padded: true,
                 children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-                        gap: "4",
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                        gap: "md",
                         children: [
-                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                                horizontal: true,
                                 align: "space-between",
                                 children: [
                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
@@ -384,8 +387,8 @@ var OverlayLoading = {
                                 padding: "8",
                                 background: "surface-neutral-subdued",
                                 borderRadius: "1",
-                                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-                                    gap: "1",
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                                    gap: "xs",
                                     children: [
                                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                                             children: "Revenue: $125,000"
@@ -401,7 +404,7 @@ var OverlayLoading = {
                             })
                         ]
                     }),
-                    isLoading && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                    isLoading && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                         gap: "4",
                         inlineAlign: "center",
                         blockAlign: "center",
@@ -453,8 +456,9 @@ var ButtonLoading = {
                 });
             }, 2000);
         };
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
-            gap: "4",
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            horizontal: true,
+            gap: "md",
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
                     primary: true,
@@ -462,8 +466,9 @@ var ButtonLoading = {
                         return handleButtonClick('save');
                     },
                     disabled: loadingStates.save,
-                    children: loadingStates.save ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
-                        gap: "2",
+                    children: loadingStates.save ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                        horizontal: true,
+                        gap: "sm",
                         blockAlign: "center",
                         children: [
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_Loading.default, {
@@ -481,8 +486,9 @@ var ButtonLoading = {
                         return handleButtonClick('upload');
                     },
                     disabled: loadingStates.upload,
-                    children: loadingStates.upload ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
-                        gap: "2",
+                    children: loadingStates.upload ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                        horizontal: true,
+                        gap: "sm",
                         blockAlign: "center",
                         children: [
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_Loading.default, {
@@ -499,8 +505,9 @@ var ButtonLoading = {
                         return handleButtonClick('process');
                     },
                     disabled: loadingStates.process,
-                    children: loadingStates.process ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
-                        gap: "2",
+                    children: loadingStates.process ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                        horizontal: true,
+                        gap: "sm",
                         blockAlign: "center",
                         children: [
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_Loading.default, {
@@ -540,8 +547,8 @@ var TableLoading = {
                         children: loadingTable ? 'Show Data' : 'Show Loading'
                     })
                 }),
-                loadingTable ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-                    gap: "4",
+                loadingTable ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    gap: "md",
                     inlineAlign: "center",
                     blockAlign: "center",
                     as: _Box.default,
@@ -703,11 +710,12 @@ var ProgressiveLoading = {
         return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
             title: "Data Import Process",
             padded: true,
-            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-                gap: "8",
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                gap: "lg",
                 children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
-                        gap: "4",
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                        horizontal: true,
+                        gap: "md",
                         children: [
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
                                 primary: true,
@@ -722,8 +730,8 @@ var ProgressiveLoading = {
                             })
                         ]
                     }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
-                        gap: "4",
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
+                        gap: "md",
                         inlineAlign: "center",
                         as: _Box.default,
                         padding: "8",
@@ -800,11 +808,12 @@ var SkeletonLoading = {
                         children: showSkeleton ? 'Show Content' : 'Show Skeleton'
                     })
                 }),
-                showSkeleton ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-                    gap: "4",
+                showSkeleton ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    gap: "md",
                     children: [
-                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
-                            gap: "4",
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                            horizontal: true,
+                            gap: "md",
                             blockAlign: "center",
                             children: [
                                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_Loading.default, {
@@ -857,8 +866,8 @@ var SkeletonLoading = {
                             }
                         })
                     ]
-                }) : /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-                    gap: "4",
+                }) : /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    gap: "md",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                             variant: "headingLg",
@@ -870,7 +879,7 @@ var SkeletonLoading = {
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                             children: "In this article, we'll explore the key concepts that make interfaces both beautiful and functional, from color theory and typography to interaction design and usability testing."
                         }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
                             inlineAlign: "center",
                             blockAlign: "center",
                             as: _Box.default,

package/dist/cjs/stories/Modal.stories.js

@@ -36,10 +36,10 @@ _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 _Modal = /*#__PURE__*/ _interop_require_default(require("../components/Modal.js"));
 var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
 var _TextField = /*#__PURE__*/ _interop_require_default(require("../components/TextField.js"));
-var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.js"));
 var _Grid = /*#__PURE__*/ _interop_require_default(require("../components/Grid.js"));
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
@@ -184,8 +184,8 @@ var Large = {
     args: {
         size: 'large',
         title: 'Edit Product Details',
-        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-            gap: "4",
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            gap: "md",
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
                     label: "Product Name",
@@ -257,8 +257,8 @@ var Loading = {
 var WithMultipleActions = {
     args: {
         title: 'Export Data',
-        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-            gap: "4",
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            gap: "md",
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                     children: "Choose your export format:"
@@ -297,8 +297,8 @@ var FullScreen = {
         size: 'full',
         title: 'Full Screen Modal',
         subtitle: 'This modal takes up the entire viewport',
-        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-            gap: "8",
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            gap: "lg",
             paddingBlock: "8",
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {

package/dist/cjs/stories/Page.stories.js

@@ -42,10 +42,19 @@ _export(exports, {
 });
 var _jsxruntime = require("react/jsx-runtime");
 var _transformers = require("../utilities/transformers.js");
-var _ = require("../");
+var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
+var _Page = /*#__PURE__*/ _interop_require_default(require("../components/Page.js"));
+var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
+var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
+var _Layout = /*#__PURE__*/ _interop_require_default(require("../components/Layout.js"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 var _default = {
     title: "Litho/Page",
-    component: _.Page,
+    component: _Page.default,
     parameters: {
         layout: "fullscreen",
         docs: {
@@ -89,9 +98,9 @@ var _default = {
 };
 var Default = {
     render: function() {
-        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Page, {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Page.default, {
             title: "Default Page",
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Text, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                 children: "This is a basic page with a title and some content."
             })
         });
@@ -99,7 +108,7 @@ var Default = {
 };
 var WithSubtitle = {
     render: function() {
-        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Page, {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Page.default, {
             title: "Page with Subtitle",
             subtitle: "This page includes a subtitle for additional context",
             backAction: {
@@ -108,11 +117,11 @@ var WithSubtitle = {
                 },
                 accessibilityLabel: "Go back to products"
             },
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Layout, {
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Layout.Section, {
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Card, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Layout.default, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Layout.default.Section, {
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
                         padded: true,
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Text, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                             children: "Page content goes here."
                         })
                     })
@@ -130,9 +139,9 @@ var WithPrimaryAction = {
                 return console.log("Save clicked");
             }
         },
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Card, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
             sectioned: true,
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Text, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                 children: "This page has a primary action button in the header."
             })
         })
@@ -161,9 +170,9 @@ var WithSecondaryActions = {
                 }
             }
         ],
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Card, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
             sectioned: true,
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Text, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                 children: "This page has both primary and secondary actions."
             })
         })
@@ -184,9 +193,9 @@ var WithBackAction = {
                 return console.log("Save clicked");
             }
         },
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Card, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
             sectioned: true,
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Text, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                 children: "This page has a back action to navigate to the previous page."
             })
         })
@@ -196,9 +205,9 @@ var NarrowWidth = {
     args: {
         title: "Narrow Width Page",
         narrowWidth: true,
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Card, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
             sectioned: true,
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Text, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                 children: "This page uses a narrow width layout for focused content."
             })
         })
@@ -208,9 +217,9 @@ var FullWidth = {
     args: {
         title: "Full Width Page",
         fullWidth: true,
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Card, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
             sectioned: true,
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Text, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                 children: "This page uses the full width of the viewport."
             })
         })
@@ -239,9 +248,9 @@ var WithFooterActions = {
                 }
             }
         },
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Card, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
             sectioned: true,
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Text, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                 children: "This page includes footer actions for additional controls."
             })
         })
@@ -288,27 +297,27 @@ var ComplexPage = {
                 ]
             }
         ],
-        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
-            gap: "6",
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            gap: "md",
             children: [
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Card, {
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
                     sectioned: true,
                     title: "Customer Information",
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Text, {
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                         children: "Basic customer details and contact information."
                     })
                 }),
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Card, {
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
                     sectioned: true,
                     title: "Order History",
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Text, {
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                         children: "Previous orders and transaction history."
                     })
                 }),
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Card, {
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
                     sectioned: true,
                     title: "Preferences",
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Text, {
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                         children: "Customer preferences and settings."
                     })
                 })