@heymantle/litho 0.0.3 → 0.0.5

package/dist/esm/components/Pane.js

@@ -1,21 +1,73 @@
 "use client";
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    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 { FrameContext } from "./AppProvider.js";
-import { createContext, useContext, useEffect, Children } from "react";
-import { Button } from "../index.js";
+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() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var open = props.open, onClose = props.onClose, children = props.children;
-    var setPaneIsOpen = useContext(FrameContext).setPaneIsOpen;
+    var setPaneIsOpen = useFrame().setPaneIsOpen;
     var classes = styles();
     useEffect(function() {
         setPaneIsOpen(open);
@@ -51,47 +103,117 @@ 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;
+    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: "grid grid-cols-12 min-h-14 pl-4 pr-3 border-edge-subdued ".concat(bottomBorder ? "border-b" : ""),
+        className: "Litho-Pane__Header",
         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
-                    });
-                })
-            }),
-            showActionsOrClose && /*#__PURE__*/ _jsxs("div", {
-                className: "flex col-span-2 items-center justify-end",
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex items-center justify-between min-h-14 px-2 border-edge-subdued ".concat(bottomBorder ? "border-b" : ""),
                 children: [
-                    actions.map(function(action, index) {
-                        return /*#__PURE__*/ _jsx(Button, {
-                            plain: !action.destructive,
-                            onClick: action.onAction || action.onClick,
-                            disabled: action.disabled,
-                            icon: action.icon,
-                            loading: action.loading,
-                            external: action.external,
-                            url: action.url,
-                            destructive: action.destructive,
-                            tooltip: action.tooltip,
-                            tooltipPosition: "below"
-                        }, index);
+                    /*#__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
+                                ]
+                            })
+                        ]
                     }),
-                    showCloseButton && /*#__PURE__*/ _jsx(Button, {
-                        plain: true,
-                        icon: CancelMajor,
-                        onClick: onClose,
-                        tooltip: "Close",
-                        tooltipPosition: "below"
+                    showActionsOrClose && /*#__PURE__*/ _jsxs("div", {
+                        className: "flex items-center justify-end",
+                        children: [
+                            actions.map(function(action, index) {
+                                var showPopover = action.subActions || action.subSections;
+                                var innerContent = /*#__PURE__*/ _jsx(Button, {
+                                    plain: !action.destructive,
+                                    onClick: showPopover ? function() {
+                                        return setShowActionsPopover(index);
+                                    } : action.onAction || action.onClick,
+                                    disabled: action.disabled,
+                                    icon: action.icon,
+                                    loading: action.loading,
+                                    external: action.external,
+                                    url: action.url,
+                                    destructive: action.destructive,
+                                    tooltip: action.tooltip && showActionsPopover !== index ? action.tooltip : undefined,
+                                    tooltipPosition: "below"
+                                }, index);
+                                if (showPopover) {
+                                    return /*#__PURE__*/ _jsx(Popover, {
+                                        active: showActionsPopover === index,
+                                        onClose: function() {
+                                            return setShowActionsPopover(null);
+                                        },
+                                        activator: innerContent,
+                                        preferredAlignment: "left",
+                                        children: /*#__PURE__*/ _jsx(ActionList, {
+                                            sections: action.subSections,
+                                            items: action.subActions,
+                                            onActionAnyItem: function() {
+                                                return setShowActionsPopover(null);
+                                            }
+                                        })
+                                    });
+                                }
+                                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,
+                                onClick: onClose,
+                                tooltip: "Close",
+                                tooltipPosition: "below"
+                            })
+                        ]
                     })
                 ]
+            }),
+            subHeader && /*#__PURE__*/ _jsx("div", {
+                className: "border-edge-subdued ".concat(bottomBorder ? "border-b" : ""),
+                children: subHeader
             })
         ]
     });
@@ -99,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
     });
 }
@@ -110,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/Popover.js

@@ -98,7 +98,7 @@ 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 { useEffect, useId, useMemo, useRef, useState, useLayoutEffect } from "react";
+import React, { useEffect, useId, useMemo, useRef, useState, useLayoutEffect } from "react";
 import { createPortal } from "react-dom";
 import { tv } from "tailwind-variants";
 import PopoverManager from "./PopoverManager.js";
@@ -133,13 +133,13 @@ var styles = tv({
  * @param {boolean} [props.sectioned=false] - Whether the popover content is sectioned with padding.
  * @param {string} [props.preferredAlignment="center"] - Preferred alignment for the popover (left, center, right).
  * @param {string} [props.preferredPosition="below"] - Preferred position for the popover (above, below, cover).
- * @param {boolean|string} [props.autofocusTarget=false] - Automatically focus on the first focusable element in the popover.
  * @param {string} [props.className] - Additional class name for the popover.
  * @param {string} [props.containerClassName] - Additional class name for the popover container.
  * @returns {JSX.Element} The rendered popover component.
  */ function Popover() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var tmp = props.activatorWrapper, ActivatorWrapper = tmp === void 0 ? "div" : tmp, _props_activatorDisplayType = props.activatorDisplayType, activatorDisplayType = _props_activatorDisplayType === void 0 ? "inline-block" : _props_activatorDisplayType, activator = props.activator, children = props.children, onClose = props.onClose, active = props.active, fixed = props.fixed, zIndexOverride = props.zIndexOverride, _props_sectioned = props.sectioned, sectioned = _props_sectioned === void 0 ? false : _props_sectioned, _props_preferredAlignment = props.preferredAlignment, preferredAlignment = _props_preferredAlignment === void 0 ? "center" : _props_preferredAlignment, _props_preferredPosition = props.preferredPosition, preferredPosition = _props_preferredPosition === void 0 ? "below" : _props_preferredPosition, _props_autofocusTarget = props.autofocusTarget, autofocusTarget = _props_autofocusTarget === void 0 ? false : _props_autofocusTarget, _props_matchActivatorWidth = props.matchActivatorWidth, matchActivatorWidth = _props_matchActivatorWidth === void 0 ? false : _props_matchActivatorWidth, _props_maxWidth = props.maxWidth, maxWidth = _props_maxWidth === void 0 ? "default" : _props_maxWidth, className = props.className, containerClassName = props.containerClassName;
+    var activatorWrapper = props.activatorWrapper, _props_activatorDisplayType = props.activatorDisplayType, activatorDisplayType = _props_activatorDisplayType === void 0 ? "inline-block" : _props_activatorDisplayType, activator = props.activator, children = props.children, onClose = props.onClose, active = props.active, fixed = props.fixed, zIndexOverride = props.zIndexOverride, _props_sectioned = props.sectioned, sectioned = _props_sectioned === void 0 ? false : _props_sectioned, _props_preferredAlignment = props.preferredAlignment, preferredAlignment = _props_preferredAlignment === void 0 ? "center" : _props_preferredAlignment, _props_preferredPosition = props.preferredPosition, preferredPosition = _props_preferredPosition === void 0 ? "below" : _props_preferredPosition, _props_matchActivatorWidth = props.matchActivatorWidth, matchActivatorWidth = _props_matchActivatorWidth === void 0 ? false : _props_matchActivatorWidth, _props_maxWidth = props.maxWidth, maxWidth = _props_maxWidth === void 0 ? "default" : _props_maxWidth, className = props.className, containerClassName = props.containerClassName;
+    var ActivatorWrapper = activatorWrapper || "div";
     var idValue = useId();
     var idRef = useRef(idValue);
     var initialWidthRef = useRef(null);
@@ -328,18 +328,30 @@ var styles = tv({
 }
 Popover.displayName = "Popover";
 var sectionStyles = tv({
-    base: "Litho-Popover__Section border-b border-edge-default last:border-b-0"
+    base: "Litho-Popover__Section border-b border-edge-default last:border-b-0",
+    variants: {
+        padded: {
+            true: "p-3",
+            false: ""
+        }
+    },
+    defaultVariants: {
+        padded: false
+    }
 });
 /**
  * Section component for use within the Popover.
  *
  * @param {Object} props - The component props.
  * @param {React.ReactNode} [props.children] - The content of the section.
+ * @param {boolean} [props.padded=false] - Whether the section has padding.
  * @returns {JSX.Element} The rendered section.
  */ function Section() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var children = props.children, className = props.className;
-    var sectionClasses = sectionStyles();
+    var children = props.children, className = props.className, _props_padded = props.padded, padded = _props_padded === void 0 ? false : _props_padded;
+    var sectionClasses = sectionStyles({
+        padded: padded
+    });
     return /*#__PURE__*/ _jsx("div", {
         className: "".concat(sectionClasses).concat(className ? " ".concat(className) : ""),
         children: children

package/dist/esm/components/RangeSlider.js

@@ -47,7 +47,9 @@ function _unsupported_iterable_to_array(o, minLen) {
 }
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useRef, useState, useEffect } from "react";
-import { Label, Text, TextField } from "../index.js";
+import Label from "./Label.js";
+import Text from "./Text.js";
+import TextField from "./TextField.js";
 import { tv } from "tailwind-variants";
 var rangeStyles = tv({
     base: "Litho-RangeSlider__ActiveRange absolute left-0 top-1/2 -translate-y-1/2 rounded-l-full h-1 pointer-events-none",

package/dist/esm/components/ResourceList.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { tv } from "tailwind-variants";
-import { Spinner, VerticalStack } from "../index.js";
+import Spinner from "./Spinner.js";
+import VerticalStack from "./VerticalStack.js";
 var styles = tv({
     base: "Litho-ResourceList flex flex-col min-w-72",
     variants: {

package/dist/esm/components/Select.js

@@ -122,6 +122,8 @@ var contentStyles = tv({
  * @param {function} props.onFocus - Callback for when the select gains focus.
  * @param {function} props.onBlur - Callback for when the select loses focus.
  * @param {boolean} [props.requiredIndicator] - Whether to show a required indicator next to the label.
+ * @param {string} [props.className] - Additional CSS classes to apply to the select container.
+ * @param {string} [props.contentClassName] - Additional CSS classes to apply to the select content area.
  * @returns {JSX.Element} The rendered Select component.
  */ function Select() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};

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

@@ -145,7 +145,19 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { SortAscendingMajor, SortDescendingMajor } from "@shopify/polaris-icons";
 import React, { Children, cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
 import { ModalContext } from "./Modal.js";
-import { ActionList, Button, ButtonGroup, Card, Checkbox, EmptyState, Icon, Pagination, Popover, SkeletonText, Spinner, Text, Tooltip } from "../index.js";
+import ActionList from "./ActionList.js";
+import Button from "./Button.js";
+import ButtonGroup from "./ButtonGroup.js";
+import Card from "./Card.js";
+import Checkbox from "./Checkbox.js";
+import EmptyState from "./EmptyState.js";
+import Icon from "./Icon.js";
+import Pagination from "./Pagination.js";
+import Popover from "./Popover.js";
+import SkeletonText from "./SkeletonText.js";
+import Spinner from "./Spinner.js";
+import Text from "./Text.js";
+import Tooltip from "./Tooltip.js";
 import { styles } from "../styles/Table.js";
 import { SelectionType } from "../utilities/useIndexResourceState.js";
 import { useMounted } from "../utilities/useMounted.js";
@@ -475,7 +487,8 @@ var TableWrapperContext = /*#__PURE__*/ createContext({});
                             alignment: alignment,
                             verticalAlign: verticalAlign,
                             tableIsSelectable: selectable,
-                            headingStyle: headingStyle
+                            headingStyle: headingStyle,
+                            bordered: bordered
                         }),
                         style: {
                             width: width,
@@ -750,7 +763,7 @@ var TableWrapperContext = /*#__PURE__*/ createContext({});
             ref: containerRef,
             children: [
                 /*#__PURE__*/ _jsxs("div", {
-                    className: "relative overflow-hidden",
+                    className: "relative overflow-hidden ".concat(bordered ? "rounded-md" : ""),
                     children: [
                         loading ? /*#__PURE__*/ _jsx("div", {
                             className: "pt-9",
@@ -1014,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,