@heymantle/litho 0.0.4 → 0.0.5

package/dist/cjs/components/Stack.js

@@ -0,0 +1,223 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _tailwindvariants = require("tailwind-variants");
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+var styles = (0, _tailwindvariants.tv)({
+    base: "Litho-Stack flex",
+    variants: {
+        direction: {
+            vertical: "flex-col",
+            horizontal: "flex-row"
+        },
+        gap: {
+            // Semantic values (recommended)
+            none: "gap-0",
+            xs: "gap-1",
+            sm: "gap-2",
+            md: "gap-4",
+            lg: "gap-8",
+            // Numeric values (backwards compatibility)
+            "0": "gap-0",
+            "px": "gap-px",
+            "0.5": "gap-0.5",
+            "1": "gap-1",
+            "2": "gap-2",
+            "3": "gap-3",
+            "4": "gap-4",
+            "5": "gap-5",
+            "6": "gap-6",
+            "8": "gap-8",
+            "10": "gap-10"
+        },
+        align: {
+            start: "justify-start",
+            center: "justify-center",
+            end: "justify-end",
+            "space-between": "justify-between",
+            "space-evenly": "justify-evenly",
+            "space-around": "justify-around",
+            spaceBetween: "justify-between"
+        },
+        blockAlign: {
+            start: "items-start",
+            center: "items-center",
+            end: "items-end",
+            stretch: "items-stretch"
+        },
+        inlineAlign: {
+            start: "items-start",
+            center: "items-center",
+            end: "items-end",
+            stretch: "items-stretch"
+        },
+        wrap: {
+            true: "flex-wrap",
+            false: "flex-nowrap"
+        }
+    },
+    defaultVariants: {
+        direction: "vertical",
+        gap: "md",
+        align: "start"
+    }
+});
+/**
+ * Stack Component
+ *
+ * A flexible stack component for creating vertical or horizontal layouts with customizable spacing and alignment.
+ * By default, creates a vertical stack with medium gap spacing.
+ *
+ * @param {Object} [props={}] - Component props.
+ * @param {string} [props.as='div'] - The HTML element to render. Defaults to `div`.
+ * @param {React.ReactNode} [props.children] - Child elements to render inside the stack.
+ * @param {boolean} [props.horizontal=false] - If true, renders a horizontal stack (flex-row). Defaults to vertical (flex-col).
+ * @param {('none'|'xs'|'sm'|'md'|'lg'|'0'|'px'|'0.5'|'1'|'2'|'3'|'4'|'5'|'6'|'8'|'10')} [props.gap='md'] - Spacing between children. Semantic options: 'none' (0), 'xs' (1), 'sm' (2), 'md' (4), 'lg' (8). Numeric options: '0', 'px', '0.5', '1', '2', '3', '4', '5', '6', '8', '10'. Defaults to 'md'.
+ * @param {string} [props.id] - Optional ID for the component.
+ * @param {string} [props.className] - Additional custom class names to apply to the component.
+ * @param {('start'|'center'|'end'|'space-between'|'space-evenly'|'space-around'|'spaceBetween')} [props.align='start'] - Main axis alignment. Controls horizontal alignment for horizontal stacks and vertical alignment for vertical stacks.
+ * @param {('start'|'center'|'end'|'stretch')} [props.blockAlign] - Cross-axis alignment for horizontal stacks (vertical alignment). Only applicable when horizontal=true.
+ * @param {('start'|'center'|'end'|'stretch')} [props.inlineAlign] - Cross-axis alignment for vertical stacks (horizontal alignment). Only applicable when horizontal=false.
+ * @param {boolean} [props.wrap=false] - Whether children should wrap to the next line if necessary. Defaults to false.
+ * @param {Object} [restProps] - Additional props passed to the root element.
+ *
+ * @returns {JSX.Element} The rendered Stack component.
+ *
+ * @example
+ * // Vertical stack (default)
+ * <Stack gap="sm" inlineAlign="center">
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ * </Stack>
+ *
+ * @example
+ * // Horizontal stack
+ * <Stack horizontal gap="md" blockAlign="center" wrap={true}>
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ * </Stack>
+ */ function Stack() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var _props_as = props.as, as = _props_as === void 0 ? "div" : _props_as, children = props.children, _props_horizontal = props.horizontal, horizontal = _props_horizontal === void 0 ? false : _props_horizontal, _props_gap = props.gap, gap = _props_gap === void 0 ? "md" : _props_gap, id = props.id, className = props.className, align = props.align, blockAlign = props.blockAlign, inlineAlign = props.inlineAlign, _props_wrap = props.wrap, wrap = _props_wrap === void 0 ? false : _props_wrap, restProps = _object_without_properties(props, [
+        "as",
+        "children",
+        "horizontal",
+        "gap",
+        "id",
+        "className",
+        "align",
+        "blockAlign",
+        "inlineAlign",
+        "wrap"
+    ]);
+    var direction = horizontal ? "horizontal" : "vertical";
+    // For horizontal stacks, use blockAlign for cross-axis
+    // For vertical stacks, use inlineAlign for cross-axis
+    var crossAxisAlign = horizontal ? blockAlign : inlineAlign;
+    var classes = styles(_object_spread_props(_object_spread({
+        direction: direction,
+        gap: gap,
+        align: align
+    }, horizontal && blockAlign ? {
+        blockAlign: blockAlign
+    } : {}, !horizontal && inlineAlign ? {
+        inlineAlign: inlineAlign
+    } : {}), {
+        wrap: wrap
+    }));
+    var Element = as;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(Element, _object_spread_props(_object_spread({
+        id: id,
+        className: "".concat(classes).concat(className ? " ".concat(className) : "")
+    }, restProps), {
+        children: children
+    }));
+}
+var _default = Stack;

package/dist/cjs/components/Table.js

@@ -1082,7 +1082,7 @@ Table.Cell.displayName = "Table.Cell";
         borderTop: true,
         paddedHalf: paddedHalf,
         children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-            className: "flex justify-start",
+            className: "flex justify-start items-center gap-2",
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_Pagination.default, {
                     hasPrevious: hasPreviousPage,

package/dist/cjs/components/Tabs.js

@@ -194,10 +194,11 @@ var containerStyles = (0, _tailwindvariants.tv)({
  * @param {boolean} [props.activeDisclosure=false] - Whether the "More" disclosure is currently active.
  * @param {boolean} [props.padded=true] - If true, applies padding to the Tabs container.
  * @param {boolean} [props.borderBottom=true] - If true, applies a bottom border to the Tabs container.
+ * @param {boolean} [props.simpleTabs=false] - If true, simplifies the styling for the selected tab.
  * @returns {JSX.Element} The Tabs component.
  */ function Tabs() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var tmp = props.tabs, _tabs = tmp === void 0 ? [] : tmp, _selectedIndex = props.selected, onSelect = props.onSelect, fullWidth = props.fullWidth, _props_disclosureText = props.disclosureText, disclosureText = _props_disclosureText === void 0 ? "More" : _props_disclosureText, _props_disclosure = props.disclosure, disclosure = _props_disclosure === void 0 ? false : _props_disclosure, _props_activeDisclosure = props.activeDisclosure, activeDisclosure = _props_activeDisclosure === void 0 ? false : _props_activeDisclosure, _props_padded = props.padded, padded = _props_padded === void 0 ? true : _props_padded, _props_borderBottom = props.borderBottom, borderBottom = _props_borderBottom === void 0 ? true : _props_borderBottom;
+    var tmp = props.tabs, _tabs = tmp === void 0 ? [] : tmp, _selectedIndex = props.selected, onSelect = props.onSelect, fullWidth = props.fullWidth, _props_disclosureText = props.disclosureText, disclosureText = _props_disclosureText === void 0 ? "More" : _props_disclosureText, _props_disclosure = props.disclosure, disclosure = _props_disclosure === void 0 ? false : _props_disclosure, _props_activeDisclosure = props.activeDisclosure, activeDisclosure = _props_activeDisclosure === void 0 ? false : _props_activeDisclosure, _props_padded = props.padded, padded = _props_padded === void 0 ? true : _props_padded, _props_borderBottom = props.borderBottom, borderBottom = _props_borderBottom === void 0 ? true : _props_borderBottom, _props_simpleTabs = props.simpleTabs, simpleTabs = _props_simpleTabs === void 0 ? false : _props_simpleTabs;
     var selectedIndex = parseInt(_selectedIndex);
     var containerRef = (0, _react.useRef)(null);
     var disclosureRef = (0, _react.useRef)(null);
@@ -306,6 +307,7 @@ var containerStyles = (0, _tailwindvariants.tv)({
                         icon: tab.icon,
                         fullWidth: fullWidth,
                         hidden: tab.hidden,
+                        simple: simpleTabs,
                         children: tab.content
                     }, "tab-".concat(tab.originalIndex));
                 })
@@ -356,10 +358,6 @@ var tabStyles = (0, _tailwindvariants.tv)({
             true: "pl-3 pr-1",
             false: "px-3"
         },
-        selected: {
-            true: "text-tab-active-fg bg-tab-active-bg hover:bg-tab-active-bg-hover active:bg-tab-active-bg-active",
-            false: "text-tab-inactive-fg bg-tab-inactive-bg hover:bg-tab-inactive-bg-hover active:bg-tab-inactive-bg-active"
-        },
         disabled: {
             true: "cursor-not-allowed",
             false: "cursor-pointer"
@@ -370,12 +368,41 @@ var tabStyles = (0, _tailwindvariants.tv)({
         },
         hidden: {
             true: "invisible"
+        },
+        simple: {
+            true: "flex flex-col items-center justify-center rounded-none bg-transparent hover:bg-transparent active:bg-transparent"
+        },
+        selected: {
+            true: "",
+            false: ""
         }
-    }
+    },
+    compoundVariants: [
+        {
+            selected: true,
+            simple: false,
+            class: "text-tab-active-fg bg-tab-active-bg hover:bg-tab-active-bg-hover active:bg-tab-active-bg-active"
+        },
+        {
+            selected: false,
+            simple: false,
+            class: "text-tab-inactive-fg bg-tab-inactive-bg hover:bg-tab-inactive-bg-hover active:bg-tab-inactive-bg-active"
+        },
+        {
+            selected: true,
+            simple: true,
+            class: "text-highest"
+        },
+        {
+            selected: false,
+            simple: true,
+            class: "text-lowest"
+        }
+    ]
 });
 function Tab() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var id = props.id, active = props.active, selected = props.selected, index = props.index, icon = props.icon, onSelect = props.onSelect, onClick = props.onClick, children = props.children, fullWidth = props.fullWidth, hidden = props.hidden, _props_disclosure = props.disclosure, disclosure = _props_disclosure === void 0 ? false : _props_disclosure, _props_alwaysShowDisclosureIcon = props.alwaysShowDisclosureIcon, alwaysShowDisclosureIcon = _props_alwaysShowDisclosureIcon === void 0 ? false : _props_alwaysShowDisclosureIcon, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled;
+    var id = props.id, active = props.active, selected = props.selected, index = props.index, icon = props.icon, onSelect = props.onSelect, onClick = props.onClick, children = props.children, fullWidth = props.fullWidth, hidden = props.hidden, simple = props.simple, _props_disclosure = props.disclosure, disclosure = _props_disclosure === void 0 ? false : _props_disclosure, _props_alwaysShowDisclosureIcon = props.alwaysShowDisclosureIcon, alwaysShowDisclosureIcon = _props_alwaysShowDisclosureIcon === void 0 ? false : _props_alwaysShowDisclosureIcon, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled;
     var polarisIcon = typeof icon === "string" ? _polarisicons[icon] : _polarisicons[icon === null || icon === void 0 ? void 0 : icon.displayName];
     var showDisclosure = disclosure && (selected || alwaysShowDisclosureIcon);
     var tabClasses = tabStyles({
@@ -383,7 +410,8 @@ function Tab() {
         disclosure: showDisclosure,
         disabled: disabled,
         fullWidth: fullWidth,
-        hidden: hidden
+        hidden: hidden,
+        simple: simple
     });
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
         id: id ? "tab-".concat(id) : undefined,
@@ -396,11 +424,12 @@ function Tab() {
                 className: "Litho-Tabs__Tab-Icon mr-1",
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                     source: polarisIcon,
-                    color: selected ? "active" : "subdued"
+                    color: selected && simple ? "default" : selected ? "primary" : "subdued",
+                    size: simple ? "lg" : undefined
                 })
             }),
             icon && !!polarisIcon === false && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                className: "Litho-Tabs__Tab-Icon mr-1",
+                className: "Litho-Tabs__Tab-Icon ".concat(simple ? "mr-0" : "mr-1"),
                 children: icon
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
@@ -411,7 +440,8 @@ function Tab() {
                 className: "Litho-Tabs__Tab-Disclosure",
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                     source: active ? _polarisicons.CaretUpMinor : _polarisicons.CaretDownMinor,
-                    color: selected ? "active" : "subdued"
+                    color: selected && simple ? "default" : selected ? "active" : "subdued",
+                    size: simple ? "lg" : undefined
                 })
             })
         ]

package/dist/cjs/components/VerticalStack.js

@@ -93,7 +93,13 @@ var styles = (0, _tailwindvariants.tv)({
     base: "Litho-VerticalStack flex flex-col",
     variants: {
         gap: {
-            none: "",
+            none: "gap-0",
+            // Semantic values (recommended)
+            xs: "gap-1",
+            sm: "gap-2",
+            md: "gap-4",
+            lg: "gap-8",
+            // Numeric values (backwards compatibility)
             "0": "gap-0",
             "px": "gap-px",
             "0.5": "gap-0.5",
@@ -128,7 +134,7 @@ var styles = (0, _tailwindvariants.tv)({
  * @param {React.ReactNode} [props.children] - The child elements to render within the stack.
  * @param {string} [props.align] - Vertical alignment of the stack content. Options: "start", "end", "center", "spaceBetween".
  * @param {string} [props.inlineAlign] - Horizontal alignment of the stack content. Options: "start", "end", "center", "spaceBetween".
- * @param {string} [props.gap="none"] - Spacing between child elements. Options: "none", "0", "px", "0.5", "1", "2", "3", "4", "6", "8", "10".
+ * @param {('none'|'xs'|'sm'|'md'|'lg'|'0'|'px'|'0.5'|'1'|'2'|'3'|'4'|'5'|'6'|'8'|'10')} [props.gap="none"] - Spacing between child elements. Semantic options: "none", "xs" (1), "sm" (2), "md" (4), "lg" (8). Numeric options: "0", "px", "0.5", "1", "2", "3", "4", "5", "6", "8", "10".
  * @param {string} [props.id] - The id for the root element of the stack.
  * @param {string} [props.className] - Additional CSS classes to append to the generated styles.
  * @param {object} [props.restProps] - Any additional properties to spread onto the root element.

package/dist/cjs/index.js

@@ -159,6 +159,9 @@ _export(exports, {
     get Spinner () {
         return _Spinner.default;
     },
+    get Stack () {
+        return _Stack.default;
+    },
     get Table () {
         return _Table.default;
     },
@@ -248,6 +251,7 @@ var _ResourceList = /*#__PURE__*/ _interop_require_default(require("./components
 var _Select = /*#__PURE__*/ _interop_require_default(require("./components/Select"));
 var _SkeletonText = /*#__PURE__*/ _interop_require_default(require("./components/SkeletonText"));
 var _Spinner = /*#__PURE__*/ _interop_require_default(require("./components/Spinner"));
+var _Stack = /*#__PURE__*/ _interop_require_default(require("./components/Stack"));
 var _Table = /*#__PURE__*/ _interop_require_default(require("./components/Table"));
 var _Tabs = /*#__PURE__*/ _interop_require_default(require("./components/Tabs"));
 var _Tag = /*#__PURE__*/ _interop_require_default(require("./components/Tag"));

package/dist/cjs/stories/ActionList.stories.js

@@ -32,9 +32,9 @@ _export(exports, {
     }
 });
 var _jsxruntime = require("react/jsx-runtime");
-var _ActionList = /*#__PURE__*/ _interop_require_default(require("../components/ActionList.js"));
 var _polarisicons = require("@shopify/polaris-icons");
 var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
+var _ActionList = /*#__PURE__*/ _interop_require_default(require("../components/ActionList.js"));
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj

package/dist/cjs/stories/Autocomplete.stories.js

@@ -38,8 +38,7 @@ var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.j
 var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
 var _Button = /*#__PURE__*/ _interop_require_default(require("../components/Button.js"));
 var _polarisicons = require("@shopify/polaris-icons");
-var _HorizontalStack = /*#__PURE__*/ _interop_require_default(require("../components/HorizontalStack.js"));
-var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.js"));
+var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
 var _Tag = /*#__PURE__*/ _interop_require_default(require("../components/Tag.js"));
 var _Thumbnail = /*#__PURE__*/ _interop_require_default(require("../components/Thumbnail.js"));
 var _transformers = require("../utilities/transformers.js");
@@ -307,8 +306,8 @@ var Default = {
                 width: "400px"
             },
             padded: true,
-            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-                gap: "2",
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                gap: "sm",
                 children: [
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_Autocomplete.default, {
                         options: filteredOptions,
@@ -320,7 +319,8 @@ var Default = {
                             onChange: setInputValue
                         })
                     }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_HorizontalStack.default, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
+                        horizontal: true,
                         children: selected.length > 0 && selected.map(function(item) {
                             return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tag.default, {
                                 children: item
@@ -392,8 +392,8 @@ var MultipleSelection = {
                 width: "400px"
             },
             padded: true,
-            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-                gap: "2",
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                gap: "sm",
                 children: [
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_Autocomplete.default, {
                         options: filteredOptions,
@@ -406,8 +406,9 @@ var MultipleSelection = {
                             onChange: setInputValue
                         })
                     }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_HorizontalStack.default, {
-                        gap: "2",
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
+                        horizontal: true,
+                        gap: "sm",
                         children: selected.length > 0 && selected.map(function(item) {
                             return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tag.default, {
                                 children: item
@@ -499,8 +500,8 @@ var GroupedOptions = {
                 width: "400px"
             },
             padded: true,
-            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-                gap: "2",
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                gap: "sm",
                 children: [
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_Autocomplete.default, {
                         options: filteredOptions,
@@ -512,8 +513,9 @@ var GroupedOptions = {
                             onChange: setInputValue
                         })
                     }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_HorizontalStack.default, {
-                        gap: "2",
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
+                        horizontal: true,
+                        gap: "sm",
                         children: selected.length > 0 && selected.map(function(item) {
                             return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tag.default, {
                                 children: item
@@ -789,8 +791,8 @@ var CustomerSearch = {
                 width: "500px"
             },
             padded: true,
-            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: "bodySm",
@@ -837,8 +839,9 @@ var CustomerSearch = {
                                     var customer = customers.find(function(c) {
                                         return c.value === customerId;
                                     });
-                                    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)(_Thumbnail.default, {

package/dist/cjs/stories/Box.stories.js

@@ -39,8 +39,7 @@ var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"
 var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
 var _Button = /*#__PURE__*/ _interop_require_default(require("../components/Button.js"));
 var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
-var _HorizontalStack = /*#__PURE__*/ _interop_require_default(require("../components/HorizontalStack.js"));
-var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.js"));
+var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
 var _transformers = require("../utilities/transformers.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
@@ -350,8 +349,8 @@ var Default = {
 };
 var WithPadding = {
     render: function() {
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-            gap: "2",
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            gap: "sm",
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
                     padding: "2",
@@ -414,8 +413,8 @@ var AsymmetricPadding = {
 };
 var WithBorders = {
     render: function() {
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-            gap: "2",
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            gap: "sm",
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
                     padding: "4",
@@ -457,8 +456,9 @@ var WithBorders = {
 };
 var BorderRadius = {
     render: function() {
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
-            gap: "2",
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            horizontal: true,
+            gap: "sm",
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
                     padding: "4",
@@ -527,8 +527,9 @@ var LayoutExample = {
                     })
                 }),
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
-                        gap: "2",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                        horizontal: true,
+                        gap: "sm",
                         children: [
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
                                 primary: true,
@@ -556,8 +557,9 @@ var LayoutExample = {
 };
 var OverflowBehavior = {
     render: function() {
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
-            gap: "2",
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            horizontal: true,
+            gap: "sm",
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
                     padding: "4",

package/dist/cjs/stories/ButtonGroup.stories.js

@@ -46,7 +46,7 @@ var _ButtonGroup = /*#__PURE__*/ _interop_require_default(require("../components
 var _Button = /*#__PURE__*/ _interop_require_default(require("../components/Button.js"));
 var _polarisicons = require("@shopify/polaris-icons");
 var _transformers = require("../utilities/transformers.js");
-var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.js"));
+var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
 var _TextField = /*#__PURE__*/ _interop_require_default(require("../components/TextField.js"));
 var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
 var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
@@ -268,8 +268,8 @@ var MixedVariants = {
 };
 var FormActions = {
     render: function() {
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-            gap: "2",
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            gap: "sm",
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
                     paddingBlockEnd: "4",
@@ -280,8 +280,8 @@ var FormActions = {
                 }),
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
                     padded: true,
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-                        gap: "2",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                        gap: "sm",
                         children: [
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
                                 label: "Sample Form Field",

package/dist/cjs/stories/Card.stories.js

@@ -35,8 +35,7 @@ var _jsxruntime = require("react/jsx-runtime");
 var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
 var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.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 _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -241,11 +240,11 @@ var Complex = {
         highlighted: true,
         tooltip: "This is a tooltip",
         tooltipPreferredPosition: "below",
-        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-            gap: "4",
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            gap: "md",
             children: [
-                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-                    gap: "2",
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    gap: "sm",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                             variant: "bodyMd",
@@ -258,8 +257,9 @@ var Complex = {
                         })
                     ]
                 }),
-                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
-                    gap: "1",
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    horizontal: true,
+                    gap: "xs",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
                             size: "small",

package/dist/cjs/stories/Checkbox.stories.js

@@ -43,7 +43,7 @@ _export(exports, {
 var _jsxruntime = require("react/jsx-runtime");
 var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
 var _Checkbox = /*#__PURE__*/ _interop_require_default(require("../components/Checkbox.js"));
-var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.js"));
+var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
 var _transformers = require("../utilities/transformers.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
@@ -212,8 +212,8 @@ var LabelHidden = {
 };
 var MultipleCheckboxes = {
     render: function() {
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
-            gap: "1",
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            gap: "xs",
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
                     label: "Option 1",