@heymantle/litho 0.0.3 → 0.0.4

package/dist/esm/components/DropZone.js

@@ -60,7 +60,14 @@ function _unsupported_iterable_to_array(o, minLen) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { tv } from "tailwind-variants";
-import { Button, Icon, InlineError, Label, Link, SkeletonText, Spinner, Text } from "../index.js";
+import Button from "./Button.js";
+import Icon from "./Icon.js";
+import InlineError from "./InlineError.js";
+import Label from "./Label.js";
+import Link from "./Link.js";
+import SkeletonText from "./SkeletonText.js";
+import Spinner from "./Spinner.js";
+import Text from "./Text.js";
 import { CancelMajor, CircleAlertMajor, FileMinor, ImageMajor, ImagesMajor } from "@shopify/polaris-icons";
 var dropZoneStyles = tv({
     base: "Litho-DropZone w-full flex items-center justify-center p-4 border border-form-border border-dashed rounded-md focus:outline-hidden",
@@ -122,9 +129,12 @@ var dropZoneStyles = tv({
  * @returns {JSX.Element} DropZone component.
  */ function DropZone() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var id = props.id, label = props.label, labelHidden = props.labelHidden, labelAction = props.labelAction, tooltip = props.tooltip, labelVariant = props.labelVariant, _props_type = props.type, type = _props_type === void 0 ? "file" : _props_type, _props_accept = props.accept, accept = _props_accept === void 0 ? typeof props.accept === "string" ? [
-        props.accept
-    ] : props.accept : _props_accept, _props_allowMultiple = props.allowMultiple, allowMultiple = _props_allowMultiple === void 0 ? false : _props_allowMultiple, _props_showDropZoneWhenDisabled = props.showDropZoneWhenDisabled, showDropZoneWhenDisabled = _props_showDropZoneWhenDisabled === void 0 ? true : _props_showDropZoneWhenDisabled, _disabled = props.disabled, onDrop = props.onDrop, onDropAccepted = props.onDropAccepted, onDropRejected = props.onDropRejected, helpText = props.helpText, error = props.error, _props_uploading = props.uploading, uploading = _props_uploading === void 0 ? false : _props_uploading, _props_uploadedFiles = props.uploadedFiles, uploadedFiles = _props_uploadedFiles === void 0 ? [] : _props_uploadedFiles, _props_uploadLabel = props.uploadLabel, uploadLabel = _props_uploadLabel === void 0 ? "Drag and drop files or click to upload" : _props_uploadLabel, _props_uploadingLabel = props.uploadingLabel, uploadingLabel = _props_uploadingLabel === void 0 ? "Uploading..." : _props_uploadingLabel, _props_dragLabel = props.dragLabel, dragLabel = _props_dragLabel === void 0 ? "Release to upload" : _props_dragLabel, tmp = props.showFilePreview, _showFilePreview = tmp === void 0 ? true : tmp, previewLoading = props.previewLoading, _props_previewRows = props.previewRows, previewRows = _props_previewRows === void 0 ? 2 : _props_previewRows, onRemove = props.onRemove, onFilePreviewClick = props.onFilePreviewClick, filename = props.filename;
+    var id = props.id, label = props.label, labelHidden = props.labelHidden, labelAction = props.labelAction, tooltip = props.tooltip, labelVariant = props.labelVariant, _props_type = props.type, type = _props_type === void 0 ? "file" : _props_type, _accept = props.accept, _props_allowMultiple = props.allowMultiple, allowMultiple = _props_allowMultiple === void 0 ? false : _props_allowMultiple, _props_showDropZoneWhenDisabled = props.showDropZoneWhenDisabled, showDropZoneWhenDisabled = _props_showDropZoneWhenDisabled === void 0 ? true : _props_showDropZoneWhenDisabled, _disabled = props.disabled, onDrop = props.onDrop, onDropAccepted = props.onDropAccepted, onDropRejected = props.onDropRejected, helpText = props.helpText, error = props.error, _props_uploading = props.uploading, uploading = _props_uploading === void 0 ? false : _props_uploading, _props_uploadedFiles = props.uploadedFiles, uploadedFiles = _props_uploadedFiles === void 0 ? [] : _props_uploadedFiles, _props_uploadLabel = props.uploadLabel, uploadLabel = _props_uploadLabel === void 0 ? "Drag and drop files or click to upload" : _props_uploadLabel, _props_uploadingLabel = props.uploadingLabel, uploadingLabel = _props_uploadingLabel === void 0 ? "Uploading..." : _props_uploadingLabel, _props_dragLabel = props.dragLabel, dragLabel = _props_dragLabel === void 0 ? "Release to upload" : _props_dragLabel, tmp = props.showFilePreview, _showFilePreview = tmp === void 0 ? true : tmp, previewLoading = props.previewLoading, _props_previewRows = props.previewRows, previewRows = _props_previewRows === void 0 ? 2 : _props_previewRows, onRemove = props.onRemove, onFilePreviewClick = props.onFilePreviewClick, filename = props.filename;
+    var accept = _accept ? typeof _accept === "string" ? [
+        _accept
+    ] : _accept : [
+        "*/*"
+    ];
     var inputRef = useRef(null);
     var _useState = _sliced_to_array(useState(false), 2), hasFocusWithin = _useState[0], setHasFocusWithin = _useState[1];
     var _useState1 = _sliced_to_array(useState(false), 2), isDraggingOver = _useState1[0], setIsDraggingOver = _useState1[1];

package/dist/esm/components/EmptyState.js

@@ -1,5 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Image, Text, ProgressBar } from "../index.js";
+import Button from "./Button.js";
+import Image from "./Image.js";
+import Text from "./Text.js";
+import ProgressBar from "./ProgressBar.js";
 import { tv } from "tailwind-variants";
 var styles = tv({
     base: "Litho-EmptyState py-16 px-4 flex flex-col items-center text-center gap-6"

package/dist/esm/components/Filters.js

@@ -112,9 +112,16 @@ function _unsupported_iterable_to_array(o, minLen) {
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useContext, useEffect, useRef, useState } from "react";
 import { tv } from "tailwind-variants";
-import { ActionList, Button, Icon, Link, Popover, Text, TextField, Tooltip } from "../index.js";
+import ActionList from "./ActionList.js";
+import Button from "./Button.js";
+import Icon from "./Icon.js";
+import Link from "./Link.js";
+import Popover from "./Popover.js";
+import Text from "./Text.js";
+import TextField from "./TextField.js";
+import Tooltip from "./Tooltip.js";
 import { CancelSmallMinor, CaretDownMinor, DeleteMinor, HorizontalDotsMinor, PlusMinor, SearchMajor, ChevronLeftMinor, ChevronRightMinor } from "@shopify/polaris-icons";
-import { DarkModeContext } from "./AppProvider.js";
+import { useDarkMode } from "./AppProvider.js";
 var styles = tv({
     base: "Litho-Filters flex items-center",
     variants: {
@@ -800,7 +807,7 @@ var tabActionIconStyles = tv({
  * @returns {JSX.Element} The text field component.
  */ Filters.TextField = function FiltersTextField() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var darkMode = useContext(DarkModeContext).darkMode;
+    var darkMode = useDarkMode().darkMode;
     var queryValue = props.queryValue, onQueryChange = props.onQueryChange, onQueryBlur = props.onQueryBlur, onQueryFocus = props.onQueryFocus, onQueryClear = props.onQueryClear, _props_queryPlaceholder = props.queryPlaceholder, queryPlaceholder = _props_queryPlaceholder === void 0 ? "Search" : _props_queryPlaceholder, disableQueryField = props.disableQueryField;
     return /*#__PURE__*/ _jsx("div", {
         className: "p-1",

package/dist/esm/components/FooterHelp.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Icon } from "../index.js";
+import Icon from "./Icon.js";
 import { CircleInformationMajor } from "@shopify/polaris-icons";
 /**
  * Renders a `FooterHelp` component, which provides additional information

package/dist/esm/components/Form.js

@@ -1,11 +1,26 @@
 /**
- * A reusable Form component.
+ * A reusable Form component that provides a structured HTML form with customizable attributes and submission handling.
  *
+ * @component
  * @param {Object} [props={}] - The properties passed to the component.
- * @param {string} [props.method="get"] - The HTTP method for the form submission.
- * @param {function} [props.onSubmit] - The function to call when the form is submitted.
+ * @param {string} [props.acceptCharset] - The character encoding that the form accepts.
+ * @param {string} [props.action] - The URL where the form data should be submitted.
+ * @param {string} [props.autoComplete] - Whether the form should have autocomplete enabled. Can be "on" or "off".
  * @param {React.ReactNode} [props.children] - The child elements to be rendered inside the form.
+ * @param {string} [props.encType] - The encoding type for the form submission (e.g., "multipart/form-data", "application/x-www-form-urlencoded").
+ * @param {string} [props.method="post"] - The HTTP method for the form submission. Can be "get", "post", etc.
+ * @param {string} [props.name] - The name attribute for the form element.
+ * @param {boolean} [props.noValidate] - Whether to disable HTML5 form validation.
+ * @param {boolean} [props.preventDefault=true] - Whether to prevent the default form submission behavior.
+ * @param {string} [props.target] - The target window or frame for the form submission (e.g., "_blank", "_self").
+ * @param {Function} [props.onSubmit] - The function to call when the form is submitted. Receives the form event as a parameter.
  * @returns {JSX.Element} The rendered form component.
+ * 
+ * @example
+ * <Form onSubmit={(event) => console.log('Form submitted')}>
+ *   <TextField label="Name" />
+ *   <Button submit>Submit</Button>
+ * </Form>
  */ import { jsx as _jsx } from "react/jsx-runtime";
 function Form() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};

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: {
@@ -162,7 +167,7 @@ var logoStyles = tv({
  * @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 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() {
@@ -218,7 +223,7 @@ 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() {
@@ -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/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,6 +4,7 @@ var styles = tv({
     base: "Litho-List list-outside ml-5",
     variants: {
         type: {
+            none: "ml-0",
             bullet: "list-disc",
             number: "list-decimal"
         },

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.