@heymantle/litho 0.0.4 → 0.0.5

package/dist/esm/components/Pane.js

@@ -46,18 +46,22 @@ function _unsupported_iterable_to_array(o, minLen) {
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
 }
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CancelMajor } from "@shopify/polaris-icons";
+import { CancelMajor, ArrowLeftMinor, MaximizeMajor, MinimizeMajor } from "@shopify/polaris-icons";
 import { tv } from "tailwind-variants";
 import { createContext, useContext, useEffect, Children, useState } from "react";
+import Text from "./Text.js";
 import Button from "./Button.js";
 import Popover from "./Popover.js";
 import ActionList from "./ActionList.js";
 import { useFrame } from "./Frame.js";
 var styles = tv({
-    base: "Litho-Pane hidden md:block fixed inset-0 w-full md:left-auto md:max-w-100 block bg-surface-highest shadow-card-strong pointer-events-auto"
+    base: "Litho-Pane hidden md:block fixed inset-0 w-full md:left-auto md:max-w-[var(--litho-pane-width)] block bg-surface-lowest shadow-pane-inner pointer-events-auto"
 });
 var innerStyles = tv({
-    base: "flex flex-col overflow-y-auto h-full"
+    base: "relative flex flex-col overflow-y-auto h-full"
+});
+var dragHandleStyles = tv({
+    base: "cursor-col-resize absolute top-0 left-0 w-1 h-full transition-colors duration-300 hover-delay hover:bg-tint-3"
 });
 var PaneContext = /*#__PURE__*/ createContext({});
 function Pane() {
@@ -99,27 +103,57 @@ function Pane() {
 }
 function Header() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var children = props.children, _props_actions = props.actions, actions = _props_actions === void 0 ? [] : _props_actions, _props_showCloseButton = props.showCloseButton, showCloseButton = _props_showCloseButton === void 0 ? true : _props_showCloseButton, _props_bottomBorder = props.bottomBorder, bottomBorder = _props_bottomBorder === void 0 ? true : _props_bottomBorder, subHeader = props.subHeader;
+    var title = props.title, subtitle = props.subtitle, _props_actions = props.actions, actions = _props_actions === void 0 ? [] : _props_actions, _props_showCloseButton = props.showCloseButton, showCloseButton = _props_showCloseButton === void 0 ? true : _props_showCloseButton, _props_bottomBorder = props.bottomBorder, bottomBorder = _props_bottomBorder === void 0 ? true : _props_bottomBorder, subHeader = props.subHeader, tmp = props.backAction, _backAction = tmp === void 0 ? null : tmp, _props_expanded = props.expanded, expanded = _props_expanded === void 0 ? false : _props_expanded, _props_onToggleExpand = props.onToggleExpand, onToggleExpand = _props_onToggleExpand === void 0 ? function() {} : _props_onToggleExpand, _props_allowExpand = props.allowExpand, allowExpand = _props_allowExpand === void 0 ? true : _props_allowExpand;
     var onClose = useContext(PaneContext).onClose;
     var showActionsOrClose = actions.length > 0 || showCloseButton;
-    var childCount = Children.count(children);
     var _useState = _sliced_to_array(useState(null), 2), showActionsPopover = _useState[0], setShowActionsPopover = _useState[1];
+    useEffect(function() {
+        var width = expanded ? 'var(--litho-pane-width-expanded)' : 'var(--litho-pane-width-default)';
+        document.documentElement.style.setProperty('--litho-pane-width', width);
+    }, [
+        expanded
+    ]);
+    var backAction = _backAction ? /*#__PURE__*/ _jsx("div", {
+        className: "Litho-Page__Header--BackAction",
+        children: /*#__PURE__*/ _jsx(Button, {
+            plain: true,
+            icon: ArrowLeftMinor,
+            onClick: function() {
+                return _backAction === null || _backAction === void 0 ? void 0 : _backAction.onAction();
+            },
+            accessibilityLabel: _backAction === null || _backAction === void 0 ? void 0 : _backAction.accessibilityLabel
+        })
+    }) : null;
     return /*#__PURE__*/ _jsxs("div", {
+        className: "Litho-Pane__Header",
         children: [
             /*#__PURE__*/ _jsxs("div", {
-                className: "grid grid-cols-12 min-h-14 px-2 border-edge-subdued ".concat(bottomBorder ? "border-b" : ""),
+                className: "flex items-center justify-between min-h-14 px-2 border-edge-subdued ".concat(bottomBorder ? "border-b" : ""),
                 children: [
-                    /*#__PURE__*/ _jsx("div", {
-                        className: "grid grid-cols-5 col-span-10",
-                        children: Children.map(children, function(child, index) {
-                            return /*#__PURE__*/ _jsx("div", {
-                                className: "flex col-span-2 items-center ".concat(childCount === 1 ? "col-span-5" : "", " ").concat(index > 0 ? "justify-center" : ""),
-                                children: child
-                            });
-                        })
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex items-center gap-2",
+                        children: [
+                            backAction,
+                            /*#__PURE__*/ _jsxs("div", {
+                                children: [
+                                    title && typeof title === "string" ? /*#__PURE__*/ _jsx(Text, {
+                                        variant: "headingMd",
+                                        className: "!leading-5",
+                                        clampLines: 1,
+                                        children: title
+                                    }) : title,
+                                    subtitle && typeof subtitle === "string" ? /*#__PURE__*/ _jsx(Text, {
+                                        color: "subdued",
+                                        className: "!leading-4",
+                                        clampLines: 1,
+                                        children: subtitle
+                                    }) : subtitle
+                                ]
+                            })
+                        ]
                     }),
                     showActionsOrClose && /*#__PURE__*/ _jsxs("div", {
-                        className: "flex col-span-2 items-center justify-end",
+                        className: "flex items-center justify-end",
                         children: [
                             actions.map(function(action, index) {
                                 var showPopover = action.subActions || action.subSections;
@@ -156,6 +190,16 @@ function Header() {
                                 }
                                 return innerContent;
                             }),
+                            allowExpand && /*#__PURE__*/ _jsx("div", {
+                                className: "hidden xl:block",
+                                children: /*#__PURE__*/ _jsx(Button, {
+                                    plain: true,
+                                    icon: expanded ? MinimizeMajor : MaximizeMajor,
+                                    onClick: onToggleExpand,
+                                    tooltip: expanded ? "Minimize" : "Expand",
+                                    tooltipPosition: "below"
+                                })
+                            }),
                             showCloseButton && /*#__PURE__*/ _jsx(Button, {
                                 plain: true,
                                 icon: CancelMajor,
@@ -177,9 +221,9 @@ function Header() {
 Pane.Header = Header;
 function Content() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var children = props.children;
+    var children = props.children, _props_padded = props.padded, padded = _props_padded === void 0 ? true : _props_padded, className = props.className;
     return /*#__PURE__*/ _jsx("div", {
-        className: "flex-1 overflow-auto",
+        className: "Litho-Pane__Content flex-1 overflow-auto ".concat(padded ? "p-2" : "", " ").concat(className),
         children: children
     });
 }
@@ -188,7 +232,7 @@ function Footer() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var children = props.children, _props_topBorder = props.topBorder, topBorder = _props_topBorder === void 0 ? true : _props_topBorder;
     return /*#__PURE__*/ _jsx("div", {
-        className: "min-h-14 ".concat(topBorder ? "border-t border-edge-subdued" : ""),
+        className: "Litho-Pane__Footer min-h-12 ".concat(topBorder ? "border-t border-edge-subdued" : ""),
         children: children
     });
 }

package/dist/esm/components/Stack.js

@@ -0,0 +1,213 @@
+"use client";
+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;
+}
+import { jsx as _jsx } from "react/jsx-runtime";
+import { tv } from "tailwind-variants";
+var styles = 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__*/ _jsx(Element, _object_spread_props(_object_spread({
+        id: id,
+        className: "".concat(classes).concat(className ? " ".concat(className) : "")
+    }, restProps), {
+        children: children
+    }));
+}
+export default Stack;

package/dist/esm/components/Table.js

@@ -1027,7 +1027,7 @@ Table.Cell.displayName = "Table.Cell";
         borderTop: true,
         paddedHalf: paddedHalf,
         children: /*#__PURE__*/ _jsxs("div", {
-            className: "flex justify-start",
+            className: "flex justify-start items-center gap-2",
             children: [
                 /*#__PURE__*/ _jsx(Pagination, {
                     hasPrevious: hasPreviousPage,

package/dist/esm/components/Tabs.js

@@ -139,10 +139,11 @@ var containerStyles = 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 = useRef(null);
     var disclosureRef = useRef(null);
@@ -251,6 +252,7 @@ var containerStyles = tv({
                         icon: tab.icon,
                         fullWidth: fullWidth,
                         hidden: tab.hidden,
+                        simple: simpleTabs,
                         children: tab.content
                     }, "tab-".concat(tab.originalIndex));
                 })
@@ -301,10 +303,6 @@ var tabStyles = 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"
@@ -315,12 +313,41 @@ var tabStyles = 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({
@@ -328,7 +355,8 @@ function Tab() {
         disclosure: showDisclosure,
         disabled: disabled,
         fullWidth: fullWidth,
-        hidden: hidden
+        hidden: hidden,
+        simple: simple
     });
     return /*#__PURE__*/ _jsxs("div", {
         id: id ? "tab-".concat(id) : undefined,
@@ -341,11 +369,12 @@ function Tab() {
                 className: "Litho-Tabs__Tab-Icon mr-1",
                 children: /*#__PURE__*/ _jsx(Icon, {
                     source: polarisIcon,
-                    color: selected ? "active" : "subdued"
+                    color: selected && simple ? "default" : selected ? "primary" : "subdued",
+                    size: simple ? "lg" : undefined
                 })
             }),
             icon && !!polarisIcon === false && /*#__PURE__*/ _jsx("span", {
-                className: "Litho-Tabs__Tab-Icon mr-1",
+                className: "Litho-Tabs__Tab-Icon ".concat(simple ? "mr-0" : "mr-1"),
                 children: icon
             }),
             /*#__PURE__*/ _jsx("span", {
@@ -356,7 +385,8 @@ function Tab() {
                 className: "Litho-Tabs__Tab-Disclosure",
                 children: /*#__PURE__*/ _jsx(Icon, {
                     source: active ? CaretUpMinor : CaretDownMinor,
-                    color: selected ? "active" : "subdued"
+                    color: selected && simple ? "default" : selected ? "active" : "subdued",
+                    size: simple ? "lg" : undefined
                 })
             })
         ]

package/dist/esm/components/VerticalStack.js

@@ -83,7 +83,13 @@ var styles = 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",
@@ -118,7 +124,7 @@ var styles = 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/esm/index.js

@@ -47,6 +47,7 @@ export { default as ResourceList } from "./components/ResourceList.js";
 export { default as Select } from "./components/Select.js";
 export { default as SkeletonText } from "./components/SkeletonText.js";
 export { default as Spinner } from "./components/Spinner.js";
+export { default as Stack } from "./components/Stack.js";
 export { default as Table } from "./components/Table.js";
 export { default as Tabs } from "./components/Tabs.js";
 export { default as Tag } from "./components/Tag.js";

package/dist/esm/stories/ActionList.stories.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import ActionList from "../components/ActionList.js";
 import { EditMinor, DeleteMinor, DuplicateMinor, ViewMinor, ArchiveMinor, NoteMinor } from "@shopify/polaris-icons";
 import Card from "../components/Card.js";
+import ActionList from "../components/ActionList.js";
 export default {
     title: "Litho/ActionList",
     component: ActionList,

package/dist/esm/stories/Autocomplete.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 { SearchMinor, ProductsMinor, CustomersMinor } from "@shopify/polaris-icons";
-import HorizontalStack from "../components/HorizontalStack.js";
-import VerticalStack from "../components/VerticalStack.js";
+import Stack from "../components/Stack.js";
 import Tag from "../components/Tag.js";
 import Thumbnail from "../components/Thumbnail.js";
 import { transformStorySource } from "../utilities/transformers.js";
@@ -269,8 +268,8 @@ export var Default = {
                 width: "400px"
             },
             padded: true,
-            children: /*#__PURE__*/ _jsxs(VerticalStack, {
-                gap: "2",
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                gap: "sm",
                 children: [
                     /*#__PURE__*/ _jsx(Autocomplete, {
                         options: filteredOptions,
@@ -282,7 +281,8 @@ export var Default = {
                             onChange: setInputValue
                         })
                     }),
-                    /*#__PURE__*/ _jsx(HorizontalStack, {
+                    /*#__PURE__*/ _jsx(Stack, {
+                        horizontal: true,
                         children: selected.length > 0 && selected.map(function(item) {
                             return /*#__PURE__*/ _jsx(Tag, {
                                 children: item
@@ -354,8 +354,8 @@ export var MultipleSelection = {
                 width: "400px"
             },
             padded: true,
-            children: /*#__PURE__*/ _jsxs(VerticalStack, {
-                gap: "2",
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                gap: "sm",
                 children: [
                     /*#__PURE__*/ _jsx(Autocomplete, {
                         options: filteredOptions,
@@ -368,8 +368,9 @@ export var MultipleSelection = {
                             onChange: setInputValue
                         })
                     }),
-                    /*#__PURE__*/ _jsx(HorizontalStack, {
-                        gap: "2",
+                    /*#__PURE__*/ _jsx(Stack, {
+                        horizontal: true,
+                        gap: "sm",
                         children: selected.length > 0 && selected.map(function(item) {
                             return /*#__PURE__*/ _jsx(Tag, {
                                 children: item
@@ -461,8 +462,8 @@ export var GroupedOptions = {
                 width: "400px"
             },
             padded: true,
-            children: /*#__PURE__*/ _jsxs(VerticalStack, {
-                gap: "2",
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                gap: "sm",
                 children: [
                     /*#__PURE__*/ _jsx(Autocomplete, {
                         options: filteredOptions,
@@ -474,8 +475,9 @@ export var GroupedOptions = {
                             onChange: setInputValue
                         })
                     }),
-                    /*#__PURE__*/ _jsx(HorizontalStack, {
-                        gap: "2",
+                    /*#__PURE__*/ _jsx(Stack, {
+                        horizontal: true,
+                        gap: "sm",
                         children: selected.length > 0 && selected.map(function(item) {
                             return /*#__PURE__*/ _jsx(Tag, {
                                 children: item
@@ -751,8 +753,8 @@ export var CustomerSearch = {
                 width: "500px"
             },
             padded: true,
-            children: /*#__PURE__*/ _jsxs(VerticalStack, {
-                gap: "2",
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                gap: "sm",
                 children: [
                     /*#__PURE__*/ _jsx(Text, {
                         variant: "bodySm",
@@ -799,8 +801,9 @@ export var CustomerSearch = {
                                     var customer = customers.find(function(c) {
                                         return c.value === customerId;
                                     });
-                                    return /*#__PURE__*/ _jsxs(HorizontalStack, {
-                                        gap: "2",
+                                    return /*#__PURE__*/ _jsxs(Stack, {
+                                        horizontal: true,
+                                        gap: "sm",
                                         blockAlign: "center",
                                         children: [
                                             /*#__PURE__*/ _jsx(Thumbnail, {