@heymantle/litho 0.0.3 → 0.0.4

package/dist/cjs/components/Link.js

@@ -101,11 +101,13 @@ var styles = (0, _tailwindvariants.tv)({
  * @param {boolean} [props.removeUnderline=false] - If true, removes underline from the link.
  * @param {string} [props.accessibilityLabel] - Optional aria-label for accessibility.
  * @param {string} [props.dataPrimaryLink] - Optional data attribute for custom tracking.
- * 
+ * @param {Function} [props.onMouseEnter] - Optional mouse enter event handler for the link.
+ * @param {Function} [props.onMouseLeave] - Optional mouse leave event handler for the link.
+ *
  * @returns {JSX.Element} Rendered link element.
  */ function Link() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var url = props.url, children = props.children, onClick = props.onClick, external = props.external, target = props.target, _props_bold = props.bold, bold = _props_bold === void 0 ? false : _props_bold, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, id = props.id, monochrome = props.monochrome, removeUnderline = props.removeUnderline, accessibilityLabel = props.accessibilityLabel, dataPrimaryLink = props.dataPrimaryLink, color = props.color, className = props.className;
+    var url = props.url, children = props.children, onClick = props.onClick, external = props.external, target = props.target, _props_bold = props.bold, bold = _props_bold === void 0 ? false : _props_bold, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, id = props.id, monochrome = props.monochrome, removeUnderline = props.removeUnderline, accessibilityLabel = props.accessibilityLabel, dataPrimaryLink = props.dataPrimaryLink, color = props.color, className = props.className, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave;
     var classes = styles({
         monochrome: monochrome,
         removeUnderline: removeUnderline,
@@ -121,6 +123,8 @@ var styles = (0, _tailwindvariants.tv)({
         id: id,
         "aria-label": accessibilityLabel,
         "data-primary-link": dataPrimaryLink,
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave,
         children: children
     });
 }

package/dist/cjs/components/List.js

@@ -14,6 +14,7 @@ var styles = (0, _tailwindvariants.tv)({
     base: "Litho-List list-outside ml-5",
     variants: {
         type: {
+            none: "ml-0",
             bullet: "list-disc",
             number: "list-decimal"
         },

package/dist/cjs/components/Listbox.js

@@ -10,11 +10,11 @@ Object.defineProperty(exports, "default", {
     }
 });
 var _jsxruntime = require("react/jsx-runtime");
-var _AppProvider = require("../components/AppProvider");
 var _react = require("react");
 var _polarisicons = require("@shopify/polaris-icons");
 var _tailwindvariants = require("tailwind-variants");
-var _index = require("../index");
+var _Icon = /*#__PURE__*/ _interop_require_default(require("./Icon"));
+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];
@@ -23,6 +23,11 @@ function _array_like_to_array(arr, len) {
 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;
@@ -118,7 +123,7 @@ var containerStyles = (0, _tailwindvariants.tv)({
  */ function Listbox() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var options = props.options, _props_showIcon = props.showIcon, showIcon = _props_showIcon === void 0 ? false : _props_showIcon, _props_displayHorizontallyOnMobile = props.displayHorizontallyOnMobile, displayHorizontallyOnMobile = _props_displayHorizontallyOnMobile === void 0 ? false : _props_displayHorizontallyOnMobile, _props_icon = props.icon, icon = _props_icon === void 0 ? _polarisicons.MobileAcceptMajor : _props_icon;
-    var screenSizes = (0, _react.useContext)(_AppProvider.FrameContext).screenSizes;
+    var screenSizes = (0, _Frame.useFrame)().screenSizes;
     var _useState = _sliced_to_array((0, _react.useState)(null), 2), removeVisualFocus = _useState[0], setRemoveVisualFocus = _useState[1];
     var handleKeyDown = function(e, index) {
         if (!options.length) return;
@@ -198,7 +203,7 @@ var containerStyles = (0, _tailwindvariants.tv)({
                     }),
                     showIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                         className: "w-5 h-5 pointer-events-none",
-                        children: selected && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                        children: selected && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                             source: icon || _polarisicons.MobileAcceptMajor,
                             color: "link"
                         })

package/dist/cjs/components/Modal.js

@@ -22,8 +22,12 @@ var _polarisicons = require("@shopify/polaris-icons");
 var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 var _reactdom = require("react-dom");
 var _tailwindvariants = require("tailwind-variants");
-var _AppProvider = require("../components/AppProvider");
-var _index = require("../index");
+var _Button = /*#__PURE__*/ _interop_require_default(require("./Button"));
+var _Icon = /*#__PURE__*/ _interop_require_default(require("./Icon"));
+var _Spinner = /*#__PURE__*/ _interop_require_default(require("./Spinner"));
+var _Text = /*#__PURE__*/ _interop_require_default(require("./Text"));
+var _Tooltip = /*#__PURE__*/ _interop_require_default(require("./Tooltip"));
+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];
@@ -32,6 +36,11 @@ function _array_like_to_array(arr, len) {
 function _array_with_holes(arr) {
     if (Array.isArray(arr)) return arr;
 }
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -194,7 +203,7 @@ var sectionStyles = (0, _tailwindvariants.tv)({
  */ function Modal() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var children = props.children, title = props.title, subtitle = props.subtitle, open = props.open, onClose = props.onClose, sectioned = props.sectioned, primaryAction = props.primaryAction, secondaryAction = props.secondaryAction, _props_secondaryActions = props.secondaryActions, secondaryActions = _props_secondaryActions === void 0 ? [] : _props_secondaryActions, destructiveAction = props.destructiveAction, loading = props.loading, _props_size = props.size, size = _props_size === void 0 ? "default" : _props_size, leftAccessory = props.leftAccessory, _props_hideCloseButton = props.hideCloseButton, hideCloseButton = _props_hideCloseButton === void 0 ? false : _props_hideCloseButton, backAction = props.backAction, zIndexOverride = props.zIndexOverride;
-    var setModalIsOpen = (0, _react.useContext)(_AppProvider.FrameContext).setModalIsOpen;
+    var setModalIsOpen = (0, _Frame.useFrame)().setModalIsOpen;
     var modalContentRef = (0, _react.useRef)(null);
     var hasChildren = !!children;
     var classes = styles({
@@ -264,7 +273,7 @@ var sectionStyles = (0, _tailwindvariants.tv)({
                             children: [
                                 backAction && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                                     className: "Litho-ModalHeader__BackAction pr-3",
-                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Button, {
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
                                         plain: true,
                                         onClick: backAction,
                                         icon: _polarisicons.ArrowLeftMinor
@@ -273,19 +282,19 @@ var sectionStyles = (0, _tailwindvariants.tv)({
                                 (title || subtitle) && /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                                     className: "flex flex-1 flex-col gap-0",
                                     children: [
-                                        title && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                                        title && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                                             variant: "headingLg",
                                             fontWeight: "semibold",
                                             children: title
                                         }),
-                                        subtitle && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                                        subtitle && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                                             variant: "bodyMd",
                                             color: "subdued",
                                             children: subtitle
                                         })
                                     ]
                                 }),
-                                onClose && !hideCloseButton && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Button, {
+                                onClose && !hideCloseButton && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
                                     plain: true,
                                     icon: _polarisicons.CancelMajor,
                                     onClick: onClose
@@ -296,7 +305,7 @@ var sectionStyles = (0, _tailwindvariants.tv)({
                             className: "Litho-ModalBody grow overflow-y-auto overscroll-contain",
                             children: loading ? /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                                 className: "flex justify-center items-center h-full py-12",
-                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Spinner, {})
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {})
                             }) : sectioned ? /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                                 className: sectionClasses,
                                 children: children
@@ -308,7 +317,7 @@ var sectionStyles = (0, _tailwindvariants.tv)({
                                 /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                                     className: "flex gap-2",
                                     children: [
-                                        destructiveAction && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Button, {
+                                        destructiveAction && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
                                             destructive: destructiveAction.destructive === false ? false : true,
                                             onClick: destructiveAction.onAction,
                                             loading: destructiveAction.loading,
@@ -327,7 +336,7 @@ var sectionStyles = (0, _tailwindvariants.tv)({
                                     className: "flex gap-2",
                                     children: [
                                         (secondaryActions === null || secondaryActions === void 0 ? void 0 : secondaryActions.length) > 0 && secondaryActions.map(function(action) {
-                                            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Button, {
+                                            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
                                                 onClick: action.onAction,
                                                 disabled: action.disabled,
                                                 url: action.url,
@@ -336,7 +345,7 @@ var sectionStyles = (0, _tailwindvariants.tv)({
                                                 children: action.content
                                             }, action.content);
                                         }),
-                                        secondaryAction && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Button, {
+                                        secondaryAction && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
                                             onClick: secondaryAction.onAction,
                                             disabled: secondaryAction.disabled,
                                             url: secondaryAction.url,
@@ -344,7 +353,7 @@ var sectionStyles = (0, _tailwindvariants.tv)({
                                             tooltipAlignment: secondaryAction.tooltipAlignment,
                                             children: secondaryAction.content || "Cancel"
                                         }),
-                                        primaryAction && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Button, {
+                                        primaryAction && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
                                             primary: true,
                                             icon: primaryAction.icon,
                                             onClick: primaryAction.onAction,
@@ -400,16 +409,16 @@ var sectionStyles = (0, _tailwindvariants.tv)({
                             /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                                 className: "flex items-center gap-2 min-h-8",
                                 children: [
-                                    icon && typeof icon === "function" && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                                    icon && typeof icon === "function" && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                                         source: icon,
                                         color: "subdued"
                                     }),
                                     icon && (typeof icon === "undefined" ? "undefined" : _type_of(icon)) === "object" && icon,
-                                    title && typeof title === "string" ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                                    title && typeof title === "string" ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                                         variant: titleVariant,
                                         children: title
                                     }) : title,
-                                    tooltip && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Tooltip, {
+                                    tooltip && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tooltip.default, {
                                         content: tooltip,
                                         preferredPosition: "above"
                                     })
@@ -421,7 +430,7 @@ var sectionStyles = (0, _tailwindvariants.tv)({
                             }),
                             action && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                                 className: "Litho-ModalSection__HeaderAction relative left-2",
-                                children: action.content ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Button, {
+                                children: action.content ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
                                     link: true,
                                     onClick: action.onAction,
                                     primary: action.primary,
@@ -435,7 +444,7 @@ var sectionStyles = (0, _tailwindvariants.tv)({
                             })
                         ]
                     }),
-                    description && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                    description && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                         color: "subdued",
                         children: description
                     })

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, {