@heymantle/litho 0.0.3 → 0.0.5

package/dist/cjs/components/Navigation.js

@@ -9,11 +9,12 @@ Object.defineProperty(exports, "default", {
     }
 });
 var _jsxruntime = require("react/jsx-runtime");
-var _react = require("react");
-var _AppProvider = require("../components/AppProvider");
 var _tailwindvariants = require("tailwind-variants");
-var _index = require("../index");
+var _Badge = /*#__PURE__*/ _interop_require_default(require("./Badge"));
+var _Icon = /*#__PURE__*/ _interop_require_default(require("./Icon"));
+var _Text = /*#__PURE__*/ _interop_require_default(require("./Text"));
 var _polarisicons = require("@shopify/polaris-icons");
+var _Frame = require("./Frame");
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -27,6 +28,11 @@ function _define_property(obj, key, value) {
     }
     return obj;
 }
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function _object_spread(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
@@ -79,7 +85,7 @@ var titleStyles = (0, _tailwindvariants.tv)({
  */ function Navigation() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var breadcrumb = props.breadcrumb, sections = props.sections, footerLinks = props.footerLinks;
-    var setShowMobileNavigation = (0, _react.useContext)(_AppProvider.FrameContext).setShowMobileNavigation;
+    var setShowMobileNavigation = (0, _Frame.useFrame)().setShowMobileNavigation;
     var classes = styles(props);
     var sectionClasses = sectionStyles(props);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
@@ -93,7 +99,8 @@ var titleStyles = (0, _tailwindvariants.tv)({
                             label: breadcrumb.content || "Back",
                             onAction: breadcrumb.onAction,
                             icon: _polarisicons.ChevronLeftMinor,
-                            keepNavigationOpen: breadcrumb.keepNavigationOpen
+                            keepNavigationOpen: breadcrumb.keepNavigationOpen,
+                            accessory: breadcrumb.accessory
                         })
                     }),
                     sections && sections.map(function(section, index) {
@@ -116,7 +123,7 @@ var titleStyles = (0, _tailwindvariants.tv)({
                                 section.title && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                                     className: titleClasses,
                                     onClick: handleTitleClick,
-                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                                         color: section.title.selected ? "link" : "normal",
                                         fontWeight: "medium",
                                         variant: "bodySm",
@@ -180,11 +187,12 @@ var linkStyles = (0, _tailwindvariants.tv)({
  * @param {boolean} [props.disclosure] - Whether the link has a disclosure icon.
  * @param {string} [props.iconDisplay] - Icon display style (e.g., "block", "inline").
  * @param {boolean} [props.keepNavigationOpen] - Whether to keep the navigation open.
+ * @param {React.ReactNode} [props.accessory] - Optional accessory to render.
  * @returns {JSX.Element} The rendered Link component.
  */ function Link() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var selected = props.selected, highlight = props.highlight, subLinks = props.subLinks, showSubLinksAsRegularLinks = props.showSubLinksAsRegularLinks, showDividerAbove = props.showDividerAbove, showDividerBelow = props.showDividerBelow, onAction = props.onAction, source = props.source, icon = props.icon, label = props.label, badge = props.badge, external = props.external, expanded = props.expanded, _props_iconDisplay = props.iconDisplay, iconDisplay = _props_iconDisplay === void 0 ? "block" : _props_iconDisplay, _props_keepNavigationOpen = props.keepNavigationOpen, keepNavigationOpen = _props_keepNavigationOpen === void 0 ? false : _props_keepNavigationOpen, _props_onlyShowOnMobile = props.onlyShowOnMobile, onlyShowOnMobile = _props_onlyShowOnMobile === void 0 ? false : _props_onlyShowOnMobile, _props_disclosure = props.disclosure, disclosure = _props_disclosure === void 0 ? false : _props_disclosure;
-    var setShowMobileNavigation = (0, _react.useContext)(_AppProvider.FrameContext).setShowMobileNavigation;
+    var selected = props.selected, highlight = props.highlight, subLinks = props.subLinks, showSubLinksAsRegularLinks = props.showSubLinksAsRegularLinks, showDividerAbove = props.showDividerAbove, showDividerBelow = props.showDividerBelow, onAction = props.onAction, source = props.source, icon = props.icon, label = props.label, badge = props.badge, external = props.external, expanded = props.expanded, _props_iconDisplay = props.iconDisplay, iconDisplay = _props_iconDisplay === void 0 ? "block" : _props_iconDisplay, _props_keepNavigationOpen = props.keepNavigationOpen, keepNavigationOpen = _props_keepNavigationOpen === void 0 ? false : _props_keepNavigationOpen, _props_onlyShowOnMobile = props.onlyShowOnMobile, onlyShowOnMobile = _props_onlyShowOnMobile === void 0 ? false : _props_onlyShowOnMobile, _props_disclosure = props.disclosure, disclosure = _props_disclosure === void 0 ? false : _props_disclosure, accessory = props.accessory;
+    var setShowMobileNavigation = (0, _Frame.useFrame)().setShowMobileNavigation;
     var subLinkIsSelected = subLinks === null || subLinks === void 0 ? void 0 : subLinks.some(function(subLink) {
         return subLink.selected;
     });
@@ -219,12 +227,12 @@ var linkStyles = (0, _tailwindvariants.tv)({
                     /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                         className: "flex items-center gap-2 truncate",
                         children: [
-                            source ? source : icon ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                            source ? source : icon ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                                 source: icon,
                                 color: linkSelected ? "link" : "subdued",
                                 display: iconDisplay
                             }) : null,
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                                 fontWeight: "medium",
                                 color: linkSelected ? "link" : subLinkIsSelected || grandChildLinkIsSelected ? "default" : "normal",
                                 truncate: true,
@@ -232,17 +240,17 @@ var linkStyles = (0, _tailwindvariants.tv)({
                             })
                         ]
                     }),
-                    badge ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Badge, {
+                    badge ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_Badge.default, {
                         status: badge.status,
                         children: badge.label
-                    }) : external ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                    }) : external ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                         source: _polarisicons.ExternalMinor,
                         color: "subdued"
-                    }) : disclosure ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                    }) : disclosure ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                         source: _polarisicons.ChevronRightMinor,
                         color: "subdued",
                         className: "opacity-50"
-                    }) : null
+                    }) : accessory ? accessory : null
                 ]
             }),
             (expanded || selected || subLinkIsSelected || grandChildLinkIsSelected) && !disclosure && subLinks && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
@@ -286,15 +294,16 @@ var subLinkStyles = (0, _tailwindvariants.tv)({
  * @param {string} [props.badge.status] - Badge status (e.g., "success", "warning").
  * @param {string} [props.badge.label] - Badge label.
  * @param {boolean} [props.keepNavigationOpen] - Whether to keep the navigation open.
+ * @param {React.ReactNode} [props.accessory] - Optional accessory to render.
  * @returns {JSX.Element} The rendered SubLink component.
  */ function SubLink() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var selected = props.selected, onAction = props.onAction, label = props.label, badge = props.badge, _props_keepNavigationOpen = props.keepNavigationOpen, keepNavigationOpen = _props_keepNavigationOpen === void 0 ? false : _props_keepNavigationOpen;
+    var selected = props.selected, onAction = props.onAction, label = props.label, badge = props.badge, _props_keepNavigationOpen = props.keepNavigationOpen, keepNavigationOpen = _props_keepNavigationOpen === void 0 ? false : _props_keepNavigationOpen, accessory = props.accessory;
     var subLinkClasses = subLinkStyles({
         selected: selected,
         hasAction: !!onAction
     });
-    var setShowMobileNavigation = (0, _react.useContext)(_AppProvider.FrameContext).setShowMobileNavigation;
+    var setShowMobileNavigation = (0, _Frame.useFrame)().setShowMobileNavigation;
     var handleClick = function() {
         onAction === null || onAction === void 0 ? void 0 : onAction();
         if (!keepNavigationOpen) {
@@ -308,22 +317,23 @@ var subLinkStyles = (0, _tailwindvariants.tv)({
             /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                 className: "flex items-center gap-2",
                 children: [
-                    selected && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                    selected && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                         source: _polarisicons.ChevronRightMinor,
                         color: "subdued",
                         className: "opacity-50"
                     }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                         fontWeight: selected ? "medium" : "normal",
                         color: selected ? "default" : "normal",
                         children: label
                     })
                 ]
             }),
-            badge && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Badge, {
+            badge && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Badge.default, {
                 status: badge.status,
                 children: badge.label
-            })
+            }),
+            accessory
         ]
     });
 }

package/dist/cjs/components/Page.js

@@ -12,12 +12,12 @@ Object.defineProperty(exports, "default", {
 var _jsxruntime = require("react/jsx-runtime");
 var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 var _tailwindvariants = require("tailwind-variants");
-var _AppProvider = require("./AppProvider");
 var _Text = /*#__PURE__*/ _interop_require_default(require("./Text"));
 var _Button = /*#__PURE__*/ _interop_require_default(require("./Button"));
 var _Popover = /*#__PURE__*/ _interop_require_default(require("./Popover"));
 var _ActionList = /*#__PURE__*/ _interop_require_default(require("./ActionList"));
 var _polarisicons = require("@shopify/polaris-icons");
+var _Frame = require("./Frame");
 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];
@@ -248,7 +248,9 @@ var contentStyles = (0, _tailwindvariants.tv)({
 });
 /**
  * Page component that provides a structured layout with a header, primary and secondary actions, and content.
- *
+ * 
+ * @component
+ * 
  * @param {Object} props - Props for the component.
  * @param {string|React.ReactNode} props.title - The title of the page. Can be a string or React element.
  * @param {string|React.ReactNode} props.subtitle - The subtitle of the page. Can be a string or React element.
@@ -257,6 +259,8 @@ var contentStyles = (0, _tailwindvariants.tv)({
  * @param {string} [props.backAction.accessibilityLabel] - Accessibility label for the back action button.
  * @param {boolean} [props.narrowWidth=false] - Whether to use a narrow width layout.
  * @param {boolean} [props.fullWidth=false] - Whether to use a full-width layout.
+ * @param {boolean} [props.showTitleInTopBar=true] - Whether to show the title in the top bar area.
+ * @param {boolean} [props.wrapInContentContainer=true] - Whether to wrap the content in a container with padding.
  * @param {Object} [props.primaryAction] - Configuration for the primary action button.
  * @param {Function} [props.primaryAction.onAction] - Callback when the primary action is triggered.
  * @param {boolean} [props.primaryAction.loading] - Whether the primary action button is in a loading state.
@@ -274,7 +278,7 @@ var contentStyles = (0, _tailwindvariants.tv)({
  */ function Page() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var title = props.title, subtitle = props.subtitle, _props_showTitleInTopBar = props.showTitleInTopBar, showTitleInTopBar = _props_showTitleInTopBar === void 0 ? true : _props_showTitleInTopBar, tmp = props.backAction, _backAction = tmp === void 0 ? null : tmp, children = props.children, narrowWidth = props.narrowWidth, fullWidth = props.fullWidth, primaryAction = props.primaryAction, _props_secondaryActions = props.secondaryActions, secondaryActions = _props_secondaryActions === void 0 ? [] : _props_secondaryActions, titleMetadata = props.titleMetadata, _props_moreActionsLabel = props.moreActionsLabel, moreActionsLabel = _props_moreActionsLabel === void 0 ? "Actions" : _props_moreActionsLabel, _props_wrapInContentContainer = props.wrapInContentContainer, wrapInContentContainer = _props_wrapInContentContainer === void 0 ? true : _props_wrapInContentContainer, footerActions = props.footerActions, className = props.className;
-    var paneIsOpen = (0, _react.useContext)(_AppProvider.FrameContext).paneIsOpen;
+    var paneIsOpen = (0, _Frame.useFrame)().paneIsOpen;
     var detailsRef = (0, _react.useRef)(null);
     var classes = styles({
         narrowWidth: narrowWidth,
@@ -433,6 +437,7 @@ var contentStyles = (0, _tailwindvariants.tv)({
                                                         activator: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
                                                             plain: true,
                                                             disclosure: true,
+                                                            icon: action.icon,
                                                             onClick: function() {
                                                                 return togglePopover(index);
                                                             },

package/dist/cjs/components/Pagination.js

@@ -10,7 +10,9 @@ Object.defineProperty(exports, "default", {
 });
 var _jsxruntime = require("react/jsx-runtime");
 var _polarisicons = require("@shopify/polaris-icons");
-var _index = require("../index");
+var _Button = /*#__PURE__*/ _interop_require_default(require("./Button"));
+var _ButtonGroup = /*#__PURE__*/ _interop_require_default(require("./ButtonGroup"));
+var _Tooltip = /*#__PURE__*/ _interop_require_default(require("./Tooltip"));
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -24,6 +26,11 @@ function _define_property(obj, key, value) {
     }
     return obj;
 }
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function _object_spread(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
@@ -69,15 +76,15 @@ function _object_spread(target) {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var hasNext = props.hasNext, hasPrevious = props.hasPrevious, nextURL = props.nextURL, previousURL = props.previousURL, onNext = props.onNext, onPrevious = props.onPrevious, nextTooltip = props.nextTooltip, previousTooltip = props.previousTooltip;
     var renderButtonWithTooltip = function(tooltip, buttonProps) {
-        var button = /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Button, _object_spread({}, buttonProps));
-        return tooltip ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Tooltip, {
+        var button = /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, _object_spread({}, buttonProps));
+        return tooltip ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tooltip.default, {
             content: tooltip,
             children: button
         }) : button;
     };
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
         className: "Litho-Pagination",
-        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_index.ButtonGroup, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_ButtonGroup.default, {
             segmented: true,
             children: [
                 renderButtonWithTooltip(previousTooltip, {

package/dist/cjs/components/Pane.js

@@ -12,20 +12,77 @@ Object.defineProperty(exports, "default", {
 var _jsxruntime = require("react/jsx-runtime");
 var _polarisicons = require("@shopify/polaris-icons");
 var _tailwindvariants = require("tailwind-variants");
-var _AppProvider = require("./AppProvider");
 var _react = require("react");
-var _index = require("../index");
+var _Text = /*#__PURE__*/ _interop_require_default(require("./Text"));
+var _Button = /*#__PURE__*/ _interop_require_default(require("./Button"));
+var _Popover = /*#__PURE__*/ _interop_require_default(require("./Popover"));
+var _ActionList = /*#__PURE__*/ _interop_require_default(require("./ActionList"));
+var _Frame = require("./Frame");
+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 _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+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);
+}
 var styles = (0, _tailwindvariants.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 = (0, _tailwindvariants.tv)({
-    base: "flex flex-col overflow-y-auto h-full"
+    base: "relative flex flex-col overflow-y-auto h-full"
+});
+var dragHandleStyles = (0, _tailwindvariants.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__*/ (0, _react.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 = (0, _react.useContext)(_AppProvider.FrameContext).setPaneIsOpen;
+    var setPaneIsOpen = (0, _Frame.useFrame)().setPaneIsOpen;
     var classes = styles();
     (0, _react.useEffect)(function() {
         setPaneIsOpen(open);
@@ -61,47 +118,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 = (0, _react.useContext)(PaneContext).onClose;
     var showActionsOrClose = actions.length > 0 || showCloseButton;
-    var childCount = _react.Children.count(children);
+    var _useState = _sliced_to_array((0, _react.useState)(null), 2), showActionsPopover = _useState[0], setShowActionsPopover = _useState[1];
+    (0, _react.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__*/ (0, _jsxruntime.jsx)("div", {
+        className: "Litho-Page__Header--BackAction",
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+            plain: true,
+            icon: _polarisicons.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__*/ (0, _jsxruntime.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__*/ (0, _jsxruntime.jsx)("div", {
-                className: "grid grid-cols-5 col-span-10",
-                children: _react.Children.map(children, function(child, index) {
-                    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                        className: "flex col-span-2 items-center ".concat(childCount === 1 ? "col-span-5" : "", " ").concat(index > 0 ? "justify-center" : ""),
-                        children: child
-                    });
-                })
-            }),
-            showActionsOrClose && /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-                className: "flex col-span-2 items-center justify-end",
+            /*#__PURE__*/ (0, _jsxruntime.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__*/ (0, _jsxruntime.jsx)(_index.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__*/ (0, _jsxruntime.jsxs)("div", {
+                        className: "flex items-center gap-2",
+                        children: [
+                            backAction,
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                                children: [
+                                    title && typeof title === "string" ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        variant: "headingMd",
+                                        className: "!leading-5",
+                                        clampLines: 1,
+                                        children: title
+                                    }) : title,
+                                    subtitle && typeof subtitle === "string" ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        color: "subdued",
+                                        className: "!leading-4",
+                                        clampLines: 1,
+                                        children: subtitle
+                                    }) : subtitle
+                                ]
+                            })
+                        ]
                     }),
-                    showCloseButton && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Button, {
-                        plain: true,
-                        icon: _polarisicons.CancelMajor,
-                        onClick: onClose,
-                        tooltip: "Close",
-                        tooltipPosition: "below"
+                    showActionsOrClose && /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                        className: "flex items-center justify-end",
+                        children: [
+                            actions.map(function(action, index) {
+                                var showPopover = action.subActions || action.subSections;
+                                var innerContent = /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                    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__*/ (0, _jsxruntime.jsx)(_Popover.default, {
+                                        active: showActionsPopover === index,
+                                        onClose: function() {
+                                            return setShowActionsPopover(null);
+                                        },
+                                        activator: innerContent,
+                                        preferredAlignment: "left",
+                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ActionList.default, {
+                                            sections: action.subSections,
+                                            items: action.subActions,
+                                            onActionAnyItem: function() {
+                                                return setShowActionsPopover(null);
+                                            }
+                                        })
+                                    });
+                                }
+                                return innerContent;
+                            }),
+                            allowExpand && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                className: "hidden xl:block",
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                    plain: true,
+                                    icon: expanded ? _polarisicons.MinimizeMajor : _polarisicons.MaximizeMajor,
+                                    onClick: onToggleExpand,
+                                    tooltip: expanded ? "Minimize" : "Expand",
+                                    tooltipPosition: "below"
+                                })
+                            }),
+                            showCloseButton && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                plain: true,
+                                icon: _polarisicons.CancelMajor,
+                                onClick: onClose,
+                                tooltip: "Close",
+                                tooltipPosition: "below"
+                            })
+                        ]
                     })
                 ]
+            }),
+            subHeader && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: "border-edge-subdued ".concat(bottomBorder ? "border-b" : ""),
+                children: subHeader
             })
         ]
     });
@@ -109,9 +236,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__*/ (0, _jsxruntime.jsx)("div", {
-        className: "flex-1 overflow-auto",
+        className: "Litho-Pane__Content flex-1 overflow-auto ".concat(padded ? "p-2" : "", " ").concat(className),
         children: children
     });
 }
@@ -120,7 +247,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__*/ (0, _jsxruntime.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/cjs/components/Popover.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "default", {
     }
 });
 var _jsxruntime = require("react/jsx-runtime");
-var _react = require("react");
+var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 var _reactdom = require("react-dom");
 var _tailwindvariants = require("tailwind-variants");
 var _PopoverManager = /*#__PURE__*/ _interop_require_default(require("./PopoverManager"));
@@ -40,6 +40,47 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
 function _iterable_to_array_limit(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
@@ -148,13 +189,13 @@ var styles = (0, _tailwindvariants.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 = (0, _react.useId)();
     var idRef = (0, _react.useRef)(idValue);
     var initialWidthRef = (0, _react.useRef)(null);
@@ -343,18 +384,30 @@ var styles = (0, _tailwindvariants.tv)({
 }
 Popover.displayName = "Popover";
 var sectionStyles = (0, _tailwindvariants.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__*/ (0, _jsxruntime.jsx)("div", {
         className: "".concat(sectionClasses).concat(className ? " ".concat(className) : ""),
         children: children