@heymantle/litho 0.0.4 → 0.0.5

package/dist/esm/stories/Box.stories.js

@@ -3,8 +3,7 @@ import Box from "../components/Box.js";
 import Text from "../components/Text.js";
 import Button from "../components/Button.js";
 import Card from "../components/Card.js";
-import HorizontalStack from "../components/HorizontalStack.js";
-import VerticalStack from "../components/VerticalStack.js";
+import Stack from "../components/Stack.js";
 import { transformStorySource } from "../utilities/transformers.js";
 export default {
     title: "Litho/Box",
@@ -309,8 +308,8 @@ export var Default = {
 };
 export var WithPadding = {
     render: function() {
-        return /*#__PURE__*/ _jsxs(VerticalStack, {
-            gap: "2",
+        return /*#__PURE__*/ _jsxs(Stack, {
+            gap: "sm",
             children: [
                 /*#__PURE__*/ _jsx(Box, {
                     padding: "2",
@@ -373,8 +372,8 @@ export var AsymmetricPadding = {
 };
 export var WithBorders = {
     render: function() {
-        return /*#__PURE__*/ _jsxs(VerticalStack, {
-            gap: "2",
+        return /*#__PURE__*/ _jsxs(Stack, {
+            gap: "sm",
             children: [
                 /*#__PURE__*/ _jsx(Box, {
                     padding: "4",
@@ -416,8 +415,9 @@ export var WithBorders = {
 };
 export var BorderRadius = {
     render: function() {
-        return /*#__PURE__*/ _jsxs(HorizontalStack, {
-            gap: "2",
+        return /*#__PURE__*/ _jsxs(Stack, {
+            horizontal: true,
+            gap: "sm",
             children: [
                 /*#__PURE__*/ _jsx(Box, {
                     padding: "4",
@@ -486,8 +486,9 @@ export var LayoutExample = {
                     })
                 }),
                 /*#__PURE__*/ _jsx(Box, {
-                    children: /*#__PURE__*/ _jsxs(HorizontalStack, {
-                        gap: "2",
+                    children: /*#__PURE__*/ _jsxs(Stack, {
+                        horizontal: true,
+                        gap: "sm",
                         children: [
                             /*#__PURE__*/ _jsx(Button, {
                                 primary: true,
@@ -515,8 +516,9 @@ export var LayoutExample = {
 };
 export var OverflowBehavior = {
     render: function() {
-        return /*#__PURE__*/ _jsxs(HorizontalStack, {
-            gap: "2",
+        return /*#__PURE__*/ _jsxs(Stack, {
+            horizontal: true,
+            gap: "sm",
             children: [
                 /*#__PURE__*/ _jsx(Box, {
                     padding: "4",

package/dist/esm/stories/ButtonGroup.stories.js

@@ -50,7 +50,7 @@ import ButtonGroup from "../components/ButtonGroup.js";
 import Button from "../components/Button.js";
 import { SaveMinor, UndoMajor, RedoMajor } from "@shopify/polaris-icons";
 import { transformStorySource } from "../utilities/transformers.js";
-import VerticalStack from "../components/VerticalStack.js";
+import Stack from "../components/Stack.js";
 import TextField from "../components/TextField.js";
 import Card from "../components/Card.js";
 import Box from "../components/Box.js";
@@ -221,8 +221,8 @@ export var MixedVariants = {
 };
 export var FormActions = {
     render: function() {
-        return /*#__PURE__*/ _jsxs(VerticalStack, {
-            gap: "2",
+        return /*#__PURE__*/ _jsxs(Stack, {
+            gap: "sm",
             children: [
                 /*#__PURE__*/ _jsx(Box, {
                     paddingBlockEnd: "4",
@@ -233,8 +233,8 @@ export var FormActions = {
                 }),
                 /*#__PURE__*/ _jsx(Card, {
                     padded: true,
-                    children: /*#__PURE__*/ _jsxs(VerticalStack, {
-                        gap: "2",
+                    children: /*#__PURE__*/ _jsxs(Stack, {
+                        gap: "sm",
                         children: [
                             /*#__PURE__*/ _jsx(TextField, {
                                 label: "Sample Form Field",

package/dist/esm/stories/Card.stories.js

@@ -2,8 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Card from "../components/Card.js";
 import Text from "../components/Text.js";
 import Button from "../components/Button.js";
-import VerticalStack from "../components/VerticalStack.js";
-import HorizontalStack from "../components/HorizontalStack.js";
+import Stack from "../components/Stack.js";
 export default {
     title: "Litho/Card",
     component: Card,
@@ -203,11 +202,11 @@ export var Complex = {
         highlighted: true,
         tooltip: "This is a tooltip",
         tooltipPreferredPosition: "below",
-        children: /*#__PURE__*/ _jsxs(VerticalStack, {
-            gap: "4",
+        children: /*#__PURE__*/ _jsxs(Stack, {
+            gap: "md",
             children: [
-                /*#__PURE__*/ _jsxs(VerticalStack, {
-                    gap: "2",
+                /*#__PURE__*/ _jsxs(Stack, {
+                    gap: "sm",
                     children: [
                         /*#__PURE__*/ _jsx(Text, {
                             variant: "bodyMd",
@@ -220,8 +219,9 @@ export var Complex = {
                         })
                     ]
                 }),
-                /*#__PURE__*/ _jsxs(HorizontalStack, {
-                    gap: "1",
+                /*#__PURE__*/ _jsxs(Stack, {
+                    horizontal: true,
+                    gap: "xs",
                     children: [
                         /*#__PURE__*/ _jsx(Button, {
                             size: "small",

package/dist/esm/stories/Checkbox.stories.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Card from "../components/Card.js";
 import Checkbox from "../components/Checkbox.js";
-import VerticalStack from "../components/VerticalStack.js";
+import Stack from "../components/Stack.js";
 import { transformStorySource } from "../utilities/transformers.js";
 export default {
     title: 'Litho/Checkbox',
@@ -165,8 +165,8 @@ export var LabelHidden = {
 };
 export var MultipleCheckboxes = {
     render: function() {
-        return /*#__PURE__*/ _jsxs(VerticalStack, {
-            gap: "1",
+        return /*#__PURE__*/ _jsxs(Stack, {
+            gap: "xs",
             children: [
                 /*#__PURE__*/ _jsx(Checkbox, {
                     label: "Option 1",

package/dist/esm/stories/ChoiceList.stories.js

@@ -103,8 +103,7 @@ import Text from "../components/Text.js";
 import Card from "../components/Card.js";
 import Button from "../components/Button.js";
 import { transformStorySource } from "../utilities/transformers.js";
-import VerticalStack from "../components/VerticalStack.js";
-import HorizontalStack from "../components/HorizontalStack.js";
+import Stack from "../components/Stack.js";
 import Badge from "../components/Badge.js";
 export default {
     title: "Litho/ChoiceList",
@@ -483,15 +482,16 @@ export var ProductCategories = {
                     onChange: setSelectedCategories,
                     allowMultiple: true
                 }),
-                /*#__PURE__*/ _jsxs(VerticalStack, {
-                    gap: "1",
+                /*#__PURE__*/ _jsxs(Stack, {
+                    gap: "xs",
                     children: [
                         /*#__PURE__*/ _jsx(Text, {
                             variant: "headingSm",
                             children: "Selected: "
                         }),
-                        /*#__PURE__*/ _jsx(HorizontalStack, {
-                            gap: "1",
+                        /*#__PURE__*/ _jsx(Stack, {
+                            horizontal: true,
+                            gap: "xs",
                             children: selectedCategories.map(function(category) {
                                 return /*#__PURE__*/ _jsx(Badge, {
                                     children: category
@@ -550,8 +550,8 @@ export var SubscriptionPlan = {
                 }),
                 /*#__PURE__*/ _jsx(Card.Section, {
                     subdued: true,
-                    children: /*#__PURE__*/ _jsxs(VerticalStack, {
-                        gap: "2",
+                    children: /*#__PURE__*/ _jsxs(Stack, {
+                        gap: "sm",
                         children: [
                             /*#__PURE__*/ _jsx(Text, {
                                 variant: "headingSm",
@@ -590,8 +590,8 @@ export var SurveyForm = {
             title: "Product Feedback Survey",
             children: [
                 /*#__PURE__*/ _jsx(Card.Section, {
-                    children: /*#__PURE__*/ _jsxs(VerticalStack, {
-                        gap: "2",
+                    children: /*#__PURE__*/ _jsxs(Stack, {
+                        gap: "sm",
                         children: [
                             /*#__PURE__*/ _jsx(ChoiceList, {
                                 title: "How satisfied are you with our product?",
@@ -690,8 +690,9 @@ export var SurveyForm = {
                 }),
                 /*#__PURE__*/ _jsx(Card.Section, {
                     subdued: true,
-                    children: /*#__PURE__*/ _jsxs(HorizontalStack, {
-                        gap: "1",
+                    children: /*#__PURE__*/ _jsxs(Stack, {
+                        horizontal: true,
+                        gap: "xs",
                         children: [
                             /*#__PURE__*/ _jsx(Button, {
                                 primary: true,

package/dist/esm/stories/Collapsible.stories.js

@@ -99,12 +99,11 @@ function _unsupported_iterable_to_array(o, minLen) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import Collapsible from "../components/Collapsible.js";
+import Stack from "../components/Stack.js";
 import Text from "../components/Text.js";
 import Card from "../components/Card.js";
 import Button from "../components/Button.js";
 import List from "../components/List.js";
-import VerticalStack from "../components/VerticalStack.js";
-import HorizontalStack from "../components/HorizontalStack.js";
 import Box from "../components/Box.js";
 import { transformStorySource } from "../utilities/transformers.js";
 export default {
@@ -143,8 +142,8 @@ export default {
 export var Default = {
     render: function(args) {
         var _useState = _sliced_to_array(useState(args.open), 2), open = _useState[0], setOpen = _useState[1];
-        return /*#__PURE__*/ _jsxs(VerticalStack, {
-            gap: "4",
+        return /*#__PURE__*/ _jsxs(Stack, {
+            gap: "md",
             children: [
                 /*#__PURE__*/ _jsxs(Button, {
                     onClick: function() {
@@ -187,7 +186,8 @@ export var WithCard = {
                     padding: "4",
                     borderBlockEndWidth: "025",
                     borderColor: "border",
-                    children: /*#__PURE__*/ _jsxs(HorizontalStack, {
+                    children: /*#__PURE__*/ _jsxs(Stack, {
+                        horizontal: true,
                         align: "space-between",
                         blockAlign: "center",
                         children: [
@@ -286,8 +286,8 @@ export var FAQ = {
             }
             setOpenItems(newOpenItems);
         };
-        return /*#__PURE__*/ _jsxs(VerticalStack, {
-            gap: "4",
+        return /*#__PURE__*/ _jsxs(Stack, {
+            gap: "md",
             children: [
                 /*#__PURE__*/ _jsx(Box, {
                     paddingBlockEnd: "4",
@@ -383,8 +383,8 @@ export var AccordionGroup = {
         return /*#__PURE__*/ _jsx(Card, {
             title: "Product Information",
             padded: true,
-            children: /*#__PURE__*/ _jsx(VerticalStack, {
-                gap: "2",
+            children: /*#__PURE__*/ _jsx(Stack, {
+                gap: "sm",
                 children: sections.map(function(section) {
                     return /*#__PURE__*/ _jsxs(Box, {
                         children: [
@@ -531,8 +531,9 @@ export var NestedCollapsible = {
                                             borderStyle: 'dashed'
                                         },
                                         children: [
-                                            /*#__PURE__*/ _jsxs(HorizontalStack, {
-                                                gap: "2",
+                                            /*#__PURE__*/ _jsxs(Stack, {
+                                                horizontal: true,
+                                                gap: "sm",
                                                 blockAlign: "center",
                                                 paddingBlockEnd: "1",
                                                 children: [
@@ -544,8 +545,9 @@ export var NestedCollapsible = {
                                                     })
                                                 ]
                                             }),
-                                            /*#__PURE__*/ _jsxs(HorizontalStack, {
-                                                gap: "2",
+                                            /*#__PURE__*/ _jsxs(Stack, {
+                                                horizontal: true,
+                                                gap: "sm",
                                                 blockAlign: "center",
                                                 paddingBlockEnd: "1",
                                                 children: [
@@ -557,8 +559,9 @@ export var NestedCollapsible = {
                                                     })
                                                 ]
                                             }),
-                                            /*#__PURE__*/ _jsxs(HorizontalStack, {
-                                                gap: "2",
+                                            /*#__PURE__*/ _jsxs(Stack, {
+                                                horizontal: true,
+                                                gap: "sm",
                                                 blockAlign: "center",
                                                 paddingBlockEnd: "1",
                                                 children: [
@@ -603,8 +606,9 @@ export var NestedCollapsible = {
                                             borderStyle: 'dashed'
                                         },
                                         children: [
-                                            /*#__PURE__*/ _jsxs(HorizontalStack, {
-                                                gap: "2",
+                                            /*#__PURE__*/ _jsxs(Stack, {
+                                                horizontal: true,
+                                                gap: "sm",
                                                 blockAlign: "center",
                                                 paddingBlockEnd: "1",
                                                 children: [
@@ -616,8 +620,9 @@ export var NestedCollapsible = {
                                                     })
                                                 ]
                                             }),
-                                            /*#__PURE__*/ _jsxs(HorizontalStack, {
-                                                gap: "2",
+                                            /*#__PURE__*/ _jsxs(Stack, {
+                                                horizontal: true,
+                                                gap: "sm",
                                                 blockAlign: "center",
                                                 paddingBlockEnd: "1",
                                                 children: [
@@ -632,8 +637,9 @@ export var NestedCollapsible = {
                                         ]
                                     })
                                 }),
-                                /*#__PURE__*/ _jsxs(HorizontalStack, {
-                                    gap: "2",
+                                /*#__PURE__*/ _jsxs(Stack, {
+                                    horizontal: true,
+                                    gap: "sm",
                                     blockAlign: "center",
                                     paddingBlockEnd: "1",
                                     children: [
@@ -681,18 +687,19 @@ export var AdvancedSettings = {
         return /*#__PURE__*/ _jsx(Card, {
             title: "Application Settings",
             padded: true,
-            children: /*#__PURE__*/ _jsxs(VerticalStack, {
-                gap: "6",
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                gap: "md",
                 children: [
-                    /*#__PURE__*/ _jsxs(VerticalStack, {
-                        gap: "4",
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        gap: "md",
                         children: [
                             /*#__PURE__*/ _jsx(Text, {
                                 variant: "headingSm",
                                 children: "Basic Settings"
                             }),
-                            /*#__PURE__*/ _jsxs(HorizontalStack, {
-                                gap: "2",
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                horizontal: true,
+                                gap: "sm",
                                 blockAlign: "center",
                                 as: "label",
                                 children: [
@@ -708,8 +715,9 @@ export var AdvancedSettings = {
                                     })
                                 ]
                             }),
-                            /*#__PURE__*/ _jsxs(HorizontalStack, {
-                                gap: "2",
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                horizontal: true,
+                                gap: "sm",
                                 blockAlign: "center",
                                 as: "label",
                                 children: [
@@ -759,15 +767,16 @@ export var AdvancedSettings = {
                                     padding: "4",
                                     background: "subdued",
                                     borderRadius: "default",
-                                    children: /*#__PURE__*/ _jsxs(VerticalStack, {
-                                        gap: "4",
+                                    children: /*#__PURE__*/ _jsxs(Stack, {
+                                        gap: "md",
                                         children: [
                                             /*#__PURE__*/ _jsx(Text, {
                                                 tone: "subdued",
                                                 children: "⚠️ Caution: These settings can affect application performance"
                                             }),
-                                            /*#__PURE__*/ _jsxs(HorizontalStack, {
-                                                gap: "2",
+                                            /*#__PURE__*/ _jsxs(Stack, {
+                                                horizontal: true,
+                                                gap: "sm",
                                                 blockAlign: "center",
                                                 as: "label",
                                                 children: [
@@ -783,8 +792,9 @@ export var AdvancedSettings = {
                                                     })
                                                 ]
                                             }),
-                                            /*#__PURE__*/ _jsxs(HorizontalStack, {
-                                                gap: "2",
+                                            /*#__PURE__*/ _jsxs(Stack, {
+                                                horizontal: true,
+                                                gap: "sm",
                                                 blockAlign: "center",
                                                 children: [
                                                     /*#__PURE__*/ _jsx(Text, {
@@ -805,8 +815,9 @@ export var AdvancedSettings = {
                                                     })
                                                 ]
                                             }),
-                                            /*#__PURE__*/ _jsxs(HorizontalStack, {
-                                                gap: "2",
+                                            /*#__PURE__*/ _jsxs(Stack, {
+                                                horizontal: true,
+                                                gap: "sm",
                                                 blockAlign: "center",
                                                 children: [
                                                     /*#__PURE__*/ _jsx(Text, {
@@ -837,8 +848,9 @@ export var AdvancedSettings = {
                         paddingBlockStart: "4",
                         borderBlockStartWidth: "025",
                         borderColor: "border",
-                        children: /*#__PURE__*/ _jsxs(HorizontalStack, {
-                            gap: "2",
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            horizontal: true,
+                            gap: "sm",
                             children: [
                                 /*#__PURE__*/ _jsx(Button, {
                                     primary: true,

package/dist/esm/stories/ColorField.stories.js

@@ -99,11 +99,10 @@ function _unsupported_iterable_to_array(o, minLen) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import ColorField from "../components/ColorField.js";
+import Stack from "../components/Stack.js";
 import Text from "../components/Text.js";
 import Card from "../components/Card.js";
 import Button from "../components/Button.js";
-import VerticalStack from "../components/VerticalStack.js";
-import HorizontalStack from "../components/HorizontalStack.js";
 import Box from "../components/Box.js";
 import Grid from "../components/Grid.js";
 import { transformStorySource } from "../utilities/transformers.js";
@@ -244,8 +243,8 @@ export var MultipleColorFields = {
             padded: true,
             maxInlineSize: "400",
             children: [
-                /*#__PURE__*/ _jsxs(VerticalStack, {
-                    gap: "6",
+                /*#__PURE__*/ _jsxs(Stack, {
+                    gap: "md",
                     children: [
                         /*#__PURE__*/ _jsx(ColorField, {
                             label: "Primary Color",
@@ -358,16 +357,17 @@ export var DesignSystemColors = {
                 info: "#17a2b8"
             });
         };
-        return /*#__PURE__*/ _jsxs(HorizontalStack, {
-            gap: "8",
+        return /*#__PURE__*/ _jsxs(Stack, {
+            horizontal: true,
+            gap: "lg",
             children: [
                 /*#__PURE__*/ _jsxs(Card, {
                     title: "Design System Colors",
                     padded: true,
                     maxInlineSize: "350",
                     children: [
-                        /*#__PURE__*/ _jsxs(VerticalStack, {
-                            gap: "6",
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            gap: "md",
                             children: [
                                 /*#__PURE__*/ _jsx(ColorField, {
                                     label: "Primary",
@@ -427,8 +427,8 @@ export var DesignSystemColors = {
                     style: {
                         flex: 1
                     },
-                    children: /*#__PURE__*/ _jsxs(VerticalStack, {
-                        gap: "4",
+                    children: /*#__PURE__*/ _jsxs(Stack, {
+                        gap: "md",
                         children: [
                             /*#__PURE__*/ _jsx(Box, {
                                 padding: "4",
@@ -568,16 +568,17 @@ export var ProductCustomization = {
                 return _object_spread_props(_object_spread({}, prev), _define_property({}, part, color));
             });
         };
-        return /*#__PURE__*/ _jsxs(HorizontalStack, {
-            gap: "8",
+        return /*#__PURE__*/ _jsxs(Stack, {
+            horizontal: true,
+            gap: "lg",
             children: [
                 /*#__PURE__*/ _jsxs(Card, {
                     title: "Customize Your Sunglasses",
                     padded: true,
                     maxInlineSize: "300",
                     children: [
-                        /*#__PURE__*/ _jsxs(VerticalStack, {
-                            gap: "6",
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            gap: "md",
                             children: [
                                 /*#__PURE__*/ _jsx(ColorField, {
                                     label: "Frame Color",
@@ -635,8 +636,8 @@ export var ProductCustomization = {
                                 }),
                                 /*#__PURE__*/ _jsx(Box, {
                                     paddingBlockStart: "2",
-                                    children: /*#__PURE__*/ _jsxs(VerticalStack, {
-                                        gap: "1",
+                                    children: /*#__PURE__*/ _jsxs(Stack, {
+                                        gap: "xs",
                                         children: [
                                             /*#__PURE__*/ _jsxs(Text, {
                                                 variant: "bodySm",
@@ -673,7 +674,8 @@ export var ProductCustomization = {
                         flex: 1
                     },
                     children: [
-                        /*#__PURE__*/ _jsx(HorizontalStack, {
+                        /*#__PURE__*/ _jsx(Stack, {
+                            horizontal: true,
                             align: "center",
                             blockAlign: "center",
                             style: {
@@ -798,7 +800,8 @@ export var ResponsiveBehavior = {
                                 onChange: setColor
                             })
                         }),
-                        /*#__PURE__*/ _jsx(HorizontalStack, {
+                        /*#__PURE__*/ _jsx(Stack, {
+                            horizontal: true,
                             align: "center",
                             children: /*#__PURE__*/ _jsx(ColorField, {
                                 label: "Center Positioned",
@@ -807,7 +810,8 @@ export var ResponsiveBehavior = {
                                 onChange: setColor
                             })
                         }),
-                        /*#__PURE__*/ _jsx(HorizontalStack, {
+                        /*#__PURE__*/ _jsx(Stack, {
+                            horizontal: true,
                             align: "end",
                             children: /*#__PURE__*/ _jsx(ColorField, {
                                 label: "Right Aligned",

package/dist/esm/stories/ContextualSaveBar.stories.js

@@ -219,6 +219,7 @@ function _ts_generator(thisArg, body) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import ContextualSaveBar from "../components/ContextualSaveBar.js";
+import Stack from "../components/Stack.js";
 import Text from "../components/Text.js";
 import Card from "../components/Card.js";
 import Button from "../components/Button.js";
@@ -226,8 +227,6 @@ import TextField from "../components/TextField.js";
 import Page from "../components/Page.js";
 import Frame from "../components/Frame.js";
 import AppProvider from "../components/AppProvider.js";
-import VerticalStack from "../components/VerticalStack.js";
-import HorizontalStack from "../components/HorizontalStack.js";
 import Box from "../components/Box.js";
 import { transformStorySource } from "../utilities/transformers.js";
 export default {
@@ -343,8 +342,8 @@ export var Default = {
                 /*#__PURE__*/ _jsx(Card, {
                     title: "Product Information",
                     padded: true,
-                    children: /*#__PURE__*/ _jsxs(VerticalStack, {
-                        gap: "6",
+                    children: /*#__PURE__*/ _jsxs(Stack, {
+                        gap: "md",
                         children: [
                             /*#__PURE__*/ _jsx(TextField, {
                                 label: "Product Title",
@@ -502,19 +501,20 @@ export var CustomMessages = {
                         content: "Discard changes"
                     }
                 }),
-                /*#__PURE__*/ _jsx(VerticalStack, {
-                    gap: "8",
+                /*#__PURE__*/ _jsx(Stack, {
+                    gap: "lg",
                     children: scenarios.map(function(scenario) {
                         return /*#__PURE__*/ _jsxs(Card, {
                             title: scenario.title,
                             padded: true,
                             children: [
-                                /*#__PURE__*/ _jsx(VerticalStack, {
-                                    gap: "4",
+                                /*#__PURE__*/ _jsx(Stack, {
+                                    gap: "md",
                                     children: scenario.fields.map(function(field) {
                                         return /*#__PURE__*/ _jsx(Box, {
-                                            children: field.type === "checkbox" ? /*#__PURE__*/ _jsxs(HorizontalStack, {
-                                                gap: "2",
+                                            children: field.type === "checkbox" ? /*#__PURE__*/ _jsxs(Stack, {
+                                                horizontal: true,
+                                                gap: "sm",
                                                 blockAlign: "center",
                                                 as: "label",
                                                 children: [
@@ -710,8 +710,9 @@ export var LoadingStates = {
                                 }),
                                 /*#__PURE__*/ _jsx(Box, {
                                     paddingBlockStart: "2",
-                                    children: /*#__PURE__*/ _jsxs(HorizontalStack, {
-                                        gap: "4",
+                                    children: /*#__PURE__*/ _jsxs(Stack, {
+                                        horizontal: true,
+                                        gap: "md",
                                         children: [
                                             /*#__PURE__*/ _jsx(Button, {
                                                 onClick: function() {
@@ -810,8 +811,8 @@ export var DisabledActions = {
                 /*#__PURE__*/ _jsx(Card, {
                     title: "Article Creation",
                     padded: true,
-                    children: /*#__PURE__*/ _jsxs(VerticalStack, {
-                        gap: "6",
+                    children: /*#__PURE__*/ _jsxs(Stack, {
+                        gap: "md",
                         children: [
                             /*#__PURE__*/ _jsx(TextField, {
                                 label: "Title *",