@heymantle/litho 0.0.3 → 0.0.5

package/dist/esm/components/Frame.js

@@ -47,10 +47,15 @@ function _unsupported_iterable_to_array(o, minLen) {
 }
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useContext, useState, useMemo } from "react";
-import { DarkModeContext, FrameContext } from "./AppProvider.js";
+import { useDarkMode, FrameContext } from "./AppProvider.js";
 import { tv } from "tailwind-variants";
 import { CancelMajor, SearchMajor, QuestionMarkInverseMajor } from "@shopify/polaris-icons";
-import { Button, Icon, FrameSaveBar, TopBar, Popover, ActionList } from "../index.js";
+import Button from "./Button.js";
+import Icon from "./Icon.js";
+import FrameSaveBar from "./FrameSaveBar.js";
+import TopBar from "./TopBar.js";
+import Popover from "./Popover.js";
+import ActionList from "./ActionList.js";
 var frameStyles = tv({
     base: "Litho-Frame bg-surface-normal",
     variants: {
@@ -154,15 +159,18 @@ var logoStyles = tv({
  * @param {number} props.logo.width - Width of the logo image.
  * @param {boolean} props.showSearchTrigger - Whether to show the search trigger.
  * @param {React.ReactNode} props.searchModal - Modal to render as the search modal.
- * @param {function} props.onToggleSearchModal - Function to toggle the search modal.
+ * @param {function} props.onToggleSearch - Function to toggle the search modal.
  * @param {string} [props.className] - Additional CSS classes for the Frame.
  * @param {React.ReactNode} props.children - Content to render within the Frame.
  * @param {boolean} [props.alwaysShowUserMenuInTopBar] - Whether to always show the user menu in the top bar.
  * @param {React.ReactNode} [props.headerAccessory] - Accessory to render in the header.
  * @returns {React.ReactElement} The rendered Frame component.
  */ var Frame = function(param) {
-    var navigation = param.navigation, announcement = param.announcement, logo = param.logo, children = param.children, className = param.className, userMenu = param.userMenu, moreActions = param.moreActions, _param_showSearchTrigger = param.showSearchTrigger, showSearchTrigger = _param_showSearchTrigger === void 0 ? true : _param_showSearchTrigger, _param_alwaysShowUserMenuInTopBar = param.alwaysShowUserMenuInTopBar, alwaysShowUserMenuInTopBar = _param_alwaysShowUserMenuInTopBar === void 0 ? false : _param_alwaysShowUserMenuInTopBar, searchModal = param.searchModal, onToggleSearchModal = param.onToggleSearchModal, headerAccessory = param.headerAccessory;
-    var darkMode = useContext(DarkModeContext).darkMode;
+    var navigation = param.navigation, announcement = param.announcement, logo = param.logo, children = param.children, className = param.className, userMenu = param.userMenu, moreActions = param.moreActions, _param_showSearchTrigger = param.showSearchTrigger, showSearchTrigger = _param_showSearchTrigger === void 0 ? true : _param_showSearchTrigger, _param_alwaysShowUserMenuInTopBar = param.alwaysShowUserMenuInTopBar, alwaysShowUserMenuInTopBar = _param_alwaysShowUserMenuInTopBar === void 0 ? false : _param_alwaysShowUserMenuInTopBar, _param_searchLabel = param.searchLabel, searchLabel = _param_searchLabel === void 0 ? "Search" : _param_searchLabel, _param_searchIcon = param.searchIcon, searchIcon = _param_searchIcon === void 0 ? /*#__PURE__*/ _jsx(Icon, {
+        source: SearchMajor,
+        color: "subdued"
+    }) : _param_searchIcon, searchModal = param.searchModal, onToggleSearch = param.onToggleSearch, headerAccessory = param.headerAccessory;
+    var darkMode = useDarkMode().darkMode;
     var _useContext = useContext(FrameContext), contentIsInIframe = _useContext.contentIsInIframe, contentIsFullPage = _useContext.contentIsFullPage, showMobileNavigation = _useContext.showMobileNavigation, setShowMobileNavigation = _useContext.setShowMobileNavigation, modalIsOpen = _useContext.modalIsOpen, paneIsOpen = _useContext.paneIsOpen, embedded = _useContext.embedded;
     var _useState = _sliced_to_array(useState(""), 2), searchTriggerShortcutText = _useState[0], setSearchTriggerShortcutText = _useState[1];
     useEffect(function() {
@@ -199,7 +207,7 @@ var logoStyles = tv({
         var handleSearchShortcut = function(e) {
             if ((e.metaKey || e.ctrlKey) && e.key === "k") {
                 e.preventDefault();
-                onToggleSearchModal();
+                onToggleSearch();
             }
         };
         window.addEventListener("keydown", handleSearchShortcut);
@@ -218,22 +226,19 @@ var logoStyles = tv({
         contentIsFullPage,
         navigation
     ]);
-    var logoSource = darkMode ? logo.darkSource : logo.source;
+    var logoSource = logo ? darkMode ? logo === null || logo === void 0 ? void 0 : logo.darkSource : logo === null || logo === void 0 ? void 0 : logo.source : undefined;
     var searchTrigger = showSearchTrigger ? /*#__PURE__*/ _jsxs("div", {
         className: "w-full pl-2 pr-3 h-8 rounded-md flex items-center gap-2 cursor-pointer bg-tint-2 hover:bg-tint-3 active:bg-tint-4 dark:bg-tint-alt-2 dark:hover:bg-tint-alt-3 dark:active:bg-tint-alt-4",
         onClick: function() {
-            return onToggleSearchModal();
+            return onToggleSearch();
         },
         children: [
-            /*#__PURE__*/ _jsx(Icon, {
-                source: SearchMajor,
-                color: "subdued"
-            }),
+            searchIcon,
             /*#__PURE__*/ _jsxs("div", {
                 className: "flex-1 text-low flex items-center justify-between gap-1",
                 children: [
                     /*#__PURE__*/ _jsx("span", {
-                        children: "Search"
+                        children: searchLabel
                     }),
                     /*#__PURE__*/ _jsx("span", {
                         className: "text-xs text-lowest hidden @md:block",
@@ -257,13 +262,13 @@ var logoStyles = tv({
                         modalIsOpen: modalIsOpen,
                         alwaysShowLogo: alwaysShowLogo
                     }),
-                    children: /*#__PURE__*/ _jsx("a", {
+                    children: logo && /*#__PURE__*/ _jsx("a", {
                         href: logo.url,
                         className: "block py-1 px-2 relative -left-2 ".concat(logo.url ? " cursor-pointer" : ""),
                         children: /*#__PURE__*/ _jsx("img", {
                             src: logoSource,
                             alt: logo.accessibilityLabel,
-                            style: (logo === null || logo === void 0 ? void 0 : logo.width) ? {
+                            style: logo.width ? {
                                 width: logo.width
                             } : undefined
                         })
@@ -373,4 +378,11 @@ var logoStyles = tv({
         })
     });
 };
+export var useFrame = function() {
+    var context = useContext(FrameContext);
+    if (!context) {
+        throw new Error("useFrame must be used within a FrameProvider");
+    }
+    return context;
+};
 export default Frame;

package/dist/esm/components/FrameSaveBar.js

@@ -47,10 +47,14 @@ function _unsupported_iterable_to_array(o, minLen) {
 }
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useContext, useEffect, useState } from "react";
-import { FormContext, DarkModeContext, FrameContext } from "./AppProvider.js";
+import { FormContext, useDarkMode } from "./AppProvider.js";
 import { tv } from "tailwind-variants";
-import { Button, Text, Icon, Tooltip } from "../index.js";
+import Button from "./Button.js";
+import Text from "./Text.js";
+import Icon from "./Icon.js";
+import Tooltip from "./Tooltip.js";
 import { ChevronUpMinor, ChevronDownMinor } from "@shopify/polaris-icons";
+import { useFrame } from "./Frame.js";
 var styles = tv({
     base: "Litho-FrameSaveBar fixed top-[var(--litho-header-offset)] right-0 left-0 h-[var(--litho-header-height)] px-4 @md:px-5 flex items-center gap-2 bg-surface-alternate dark:bg-brand transition-opacity transition-transform duration-300 transform",
     variants: {
@@ -96,8 +100,8 @@ var toggleStyles = tv({
  * @returns {JSX.Element} The rendered FrameSaveBar component
  */ function FrameSaveBar(param) {
     var logo = param.logo;
-    var darkMode = useContext(DarkModeContext).darkMode;
-    var paneIsOpen = useContext(FrameContext).paneIsOpen;
+    var darkMode = useDarkMode().darkMode;
+    var paneIsOpen = useFrame().paneIsOpen;
     var _useContext = useContext(FormContext), showGlobalContextualSaveBar = _useContext.showGlobalContextualSaveBar, message = _useContext.message, saveAction = _useContext.saveAction, discardAction = _useContext.discardAction;
     var _useState = _sliced_to_array(useState(false), 2), visible = _useState[0], setVisible = _useState[1];
     var _useState1 = _sliced_to_array(useState(false), 2), show = _useState1[0], setShow = _useState1[1];
@@ -123,7 +127,7 @@ var toggleStyles = tv({
     }, [
         showGlobalContextualSaveBar
     ]);
-    var logoSource = darkMode ? logo.source : logo.darkSource;
+    var logoSource = logo ? darkMode ? logo === null || logo === void 0 ? void 0 : logo.source : logo === null || logo === void 0 ? void 0 : logo.darkSource : undefined;
     if (!visible) return null;
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
@@ -157,7 +161,7 @@ var toggleStyles = tv({
                 children: [
                     /*#__PURE__*/ _jsx("div", {
                         className: "hidden @md:block py-1 px-0.5 w-51.5",
-                        children: /*#__PURE__*/ _jsx("img", {
+                        children: logo && /*#__PURE__*/ _jsx("img", {
                             src: logoSource,
                             alt: logo.accessibilityLabel,
                             style: (logo === null || logo === void 0 ? void 0 : logo.width) ? {

package/dist/esm/components/HorizontalStack.js

@@ -83,7 +83,13 @@ var styles = tv({
     base: "Litho-HorizontalStack flex flex-row",
     variants: {
         gap: {
-            none: "",
+            none: "gap-0",
+            // Semantic values (recommended)
+            xs: "gap-1",
+            sm: "gap-2",
+            md: "gap-4",
+            lg: "gap-8",
+            // Numeric values (backwards compatibility)
             "0": "gap-0",
             "px": "gap-px",
             "0.5": "gap-0.5",
@@ -91,6 +97,7 @@ var styles = tv({
             "2": "gap-2",
             "3": "gap-3",
             "4": "gap-4",
+            "5": "gap-5",
             "6": "gap-6",
             "8": "gap-8",
             "10": "gap-10"
@@ -126,7 +133,7 @@ var styles = tv({
  * @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 {string} [props.gap] - Spacing between children. Options: 'none', '0', 'px', '0.5', '1', '2', '3', '4', '6', '8', '10'.
+ * @param {('none'|'xs'|'sm'|'md'|'lg'|'0'|'px'|'0.5'|'1'|'2'|'3'|'4'|'5'|'6'|'8'|'10')} [props.gap] - Spacing between children. Semantic options: 'none', 'xs' (1), 'sm' (2), 'md' (4), 'lg' (8). Numeric options: '0', 'px', '0.5', '1', '2', '3', '4', '5', '6', '8', '10'.
  * @param {string} [props.id] - Optional ID for the component.
  * @param {string} [props.className] - Additional custom class names to apply to the component.
  * @param {string} [props.align='start'] - Horizontal alignment of children. Options: 'start', 'center', 'end'.

package/dist/esm/components/Icon.js

@@ -33,6 +33,7 @@ var iconStyles = tv({
             default: "fill-higher",
             base: "fill-higher",
             subdued: "fill-low",
+            lower: "fill-lower",
             link: "fill-link",
             primary: "fill-link",
             alternate: "fill-alternate",

package/dist/esm/components/InlineError.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { tv } from "tailwind-variants";
-import { default as Icon } from "./Icon.js";
+import Icon from "./Icon.js";
 import { CircleAlertMajor } from "@shopify/polaris-icons";
 var styles = tv({
     base: "Litho-InlineError flex items-start justify-start gap-2"

package/dist/esm/components/Layout.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { createContext, useContext, useMemo } from "react";
+import React, { createContext, useMemo } from "react";
 import { tv } from "tailwind-variants";
-import { FrameContext } from "./AppProvider.js";
 import Section from "./LayoutSection.js";
 import Text from "./Text.js";
+import { useFrame } from "./Frame.js";
 export var LayoutContext = /*#__PURE__*/ createContext();
 var styles = tv({
     base: "Litho-Layout flex flex-col gap-4 w-full max-w-full",
@@ -42,7 +42,7 @@ var styles = tv({
  * @returns {JSX.Element} The rendered layout component.
  */ function Layout() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var embedded = useContext(FrameContext).embedded;
+    var embedded = useFrame().embedded;
     var children = props.children;
     var analyzeChildren = function(children) {
         var depth = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0;
@@ -131,7 +131,7 @@ var annotatedSectionStyles = tv({
  */ function AnnotatedSection() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var children = props.children, title = props.title, description = props.description;
-    var embedded = useContext(FrameContext).embedded;
+    var embedded = useFrame().embedded;
     var annotatedSectionClasses = annotatedSectionStyles({
         embedded: embedded
     });

package/dist/esm/components/LayoutSection.js

@@ -2,8 +2,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useContext } from "react";
 import { tv } from "tailwind-variants";
-import { FrameContext } from "./AppProvider.js";
 import { LayoutContext } from "./Layout.js";
+import { useFrame } from "./Frame.js";
 var sectionStyles = tv({
     base: "Litho-Layout__Section",
     variants: {
@@ -59,7 +59,7 @@ var sectionStyles = tv({
  */ function Section() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var children = props.children, _props_sidebar = props.sidebar, sidebar = _props_sidebar === void 0 ? false : _props_sidebar, className = props.className, sticky = props.sticky;
-    var embedded = useContext(FrameContext).embedded;
+    var embedded = useFrame().embedded;
     var parentHasSidebar = useContext(LayoutContext).parentHasSidebar;
     var sectionClasses = sectionStyles({
         sidebar: sidebar,

package/dist/esm/components/Link.js

@@ -91,11 +91,13 @@ var styles = 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,
@@ -111,6 +113,8 @@ var styles = tv({
         id: id,
         "aria-label": accessibilityLabel,
         "data-primary-link": dataPrimaryLink,
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave,
         children: children
     });
 }

package/dist/esm/components/List.js

@@ -4,13 +4,14 @@ var styles = tv({
     base: "Litho-List list-outside ml-5",
     variants: {
         type: {
+            none: "ml-0",
             bullet: "list-disc",
             number: "list-decimal"
         },
         spacing: {
-            loose: "space-y-2",
-            normal: "space-y-1",
-            tight: "space-y-0"
+            loose: "space-y-3",
+            normal: "space-y-2",
+            tight: "space-y-1"
         }
     }
 });

package/dist/esm/components/Listbox.js

@@ -46,11 +46,11 @@ 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 { FrameContext } from "./AppProvider.js";
-import { useContext, useState } from "react";
+import { useState } from "react";
 import { MobileAcceptMajor } from "@shopify/polaris-icons";
 import { tv } from "tailwind-variants";
-import { Icon } from "../index.js";
+import Icon from "./Icon.js";
+import { useFrame } from "./Frame.js";
 var styles = tv({
     base: "Litho-Listbox__Option rounded-md cursor-pointer min-h-8 py-1 flex items-center justify-between pl-3 focus:outline-hidden active:ring-0",
     variants: {
@@ -108,7 +108,7 @@ var containerStyles = 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 ? MobileAcceptMajor : _props_icon;
-    var screenSizes = useContext(FrameContext).screenSizes;
+    var screenSizes = useFrame().screenSizes;
     var _useState = _sliced_to_array(useState(null), 2), removeVisualFocus = _useState[0], setRemoveVisualFocus = _useState[1];
     var handleKeyDown = function(e, index) {
         if (!options.length) return;

package/dist/esm/components/Modal.js

@@ -51,11 +51,15 @@ function _unsupported_iterable_to_array(o, minLen) {
 }
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowLeftMinor, CancelMajor } from "@shopify/polaris-icons";
-import React, { createContext, useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
+import React, { createContext, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { tv } from "tailwind-variants";
-import { FrameContext } from "./AppProvider.js";
-import { Button, Icon, Spinner, Text, Tooltip } from "../index.js";
+import Button from "./Button.js";
+import Icon from "./Icon.js";
+import Spinner from "./Spinner.js";
+import Text from "./Text.js";
+import Tooltip from "./Tooltip.js";
+import { useFrame } from "./Frame.js";
 export var ModalContext = /*#__PURE__*/ createContext(false);
 var containerStyles = tv({
     base: "Litho-ModalContainer fixed inset-0 block flex flex-col justify-end md:justify-center items-center pointer-events-none"
@@ -135,7 +139,7 @@ var sectionStyles = 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 = useContext(FrameContext).setModalIsOpen;
+    var setModalIsOpen = useFrame().setModalIsOpen;
     var modalContentRef = useRef(null);
     var hasChildren = !!children;
     var classes = styles({

package/dist/esm/components/Navigation.js

@@ -27,11 +27,12 @@ function _object_spread(target) {
     return target;
 }
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useContext } from "react";
-import { FrameContext } from "./AppProvider.js";
 import { tv } from "tailwind-variants";
-import { Badge, Icon, Text } from "../index.js";
+import Badge from "./Badge.js";
+import Icon from "./Icon.js";
+import Text from "./Text.js";
 import { ChevronLeftMinor, ChevronRightMinor, ExternalMinor } from "@shopify/polaris-icons";
+import { useFrame } from "./Frame.js";
 var styles = tv({
     base: "Litho-Navigation h-full w-full pt-12 @md:pt-0 pr-2.5 pb-3 @md:pb-0 flex flex-col gap-2 justify-between bg-surface-normal"
 });
@@ -69,7 +70,7 @@ var titleStyles = 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 = useContext(FrameContext).setShowMobileNavigation;
+    var setShowMobileNavigation = useFrame().setShowMobileNavigation;
     var classes = styles(props);
     var sectionClasses = sectionStyles(props);
     return /*#__PURE__*/ _jsxs("div", {
@@ -83,7 +84,8 @@ var titleStyles = tv({
                             label: breadcrumb.content || "Back",
                             onAction: breadcrumb.onAction,
                             icon: ChevronLeftMinor,
-                            keepNavigationOpen: breadcrumb.keepNavigationOpen
+                            keepNavigationOpen: breadcrumb.keepNavigationOpen,
+                            accessory: breadcrumb.accessory
                         })
                     }),
                     sections && sections.map(function(section, index) {
@@ -170,11 +172,12 @@ var linkStyles = 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 = useContext(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 = useFrame().setShowMobileNavigation;
     var subLinkIsSelected = subLinks === null || subLinks === void 0 ? void 0 : subLinks.some(function(subLink) {
         return subLink.selected;
     });
@@ -232,7 +235,7 @@ var linkStyles = tv({
                         source: ChevronRightMinor,
                         color: "subdued",
                         className: "opacity-50"
-                    }) : null
+                    }) : accessory ? accessory : null
                 ]
             }),
             (expanded || selected || subLinkIsSelected || grandChildLinkIsSelected) && !disclosure && subLinks && /*#__PURE__*/ _jsx("div", {
@@ -276,15 +279,16 @@ var subLinkStyles = 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 = useContext(FrameContext).setShowMobileNavigation;
+    var setShowMobileNavigation = useFrame().setShowMobileNavigation;
     var handleClick = function() {
         onAction === null || onAction === void 0 ? void 0 : onAction();
         if (!keepNavigationOpen) {
@@ -313,7 +317,8 @@ var subLinkStyles = tv({
             badge && /*#__PURE__*/ _jsx(Badge, {
                 status: badge.status,
                 children: badge.label
-            })
+            }),
+            accessory
         ]
     });
 }

package/dist/esm/components/Page.js

@@ -110,14 +110,14 @@ 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, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useContext, useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import { tv } from "tailwind-variants";
-import { FrameContext } from "./AppProvider.js";
 import Text from "./Text.js";
 import Button from "./Button.js";
 import Popover from "./Popover.js";
 import ActionList from "./ActionList.js";
 import { ArrowLeftMinor, MobileHorizontalDotsMajor } from "@shopify/polaris-icons";
+import { useFrame } from "./Frame.js";
 var styles = tv({
     base: "Litho-Page w-full mx-auto",
     variants: {
@@ -192,7 +192,9 @@ var contentStyles = 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.
@@ -201,6 +203,8 @@ var contentStyles = 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.
@@ -218,7 +222,7 @@ var contentStyles = 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 = useContext(FrameContext).paneIsOpen;
+    var paneIsOpen = useFrame().paneIsOpen;
     var detailsRef = useRef(null);
     var classes = styles({
         narrowWidth: narrowWidth,
@@ -377,6 +381,7 @@ var contentStyles = tv({
                                                         activator: /*#__PURE__*/ _jsx(Button, {
                                                             plain: true,
                                                             disclosure: true,
+                                                            icon: action.icon,
                                                             onClick: function() {
                                                                 return togglePopover(index);
                                                             },

package/dist/esm/components/Pagination.js

@@ -28,7 +28,9 @@ function _object_spread(target) {
 }
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronLeftMinor, ChevronRightMinor } from "@shopify/polaris-icons";
-import { Button, ButtonGroup, Tooltip } from "../index.js";
+import Button from "./Button.js";
+import ButtonGroup from "./ButtonGroup.js";
+import Tooltip from "./Tooltip.js";
 /**
  * Pagination component for navigating between pages or steps.
  * Provides support for next and previous navigation with optional tooltips.