@heymantle/litho 0.0.3 → 0.0.4

package/dist/cjs/components/EmptyState.js

@@ -9,8 +9,16 @@ Object.defineProperty(exports, "default", {
     }
 });
 var _jsxruntime = require("react/jsx-runtime");
-var _index = require("../index");
+var _Button = /*#__PURE__*/ _interop_require_default(require("./Button"));
+var _Image = /*#__PURE__*/ _interop_require_default(require("./Image"));
+var _Text = /*#__PURE__*/ _interop_require_default(require("./Text"));
+var _ProgressBar = /*#__PURE__*/ _interop_require_default(require("./ProgressBar"));
 var _tailwindvariants = require("tailwind-variants");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 var styles = (0, _tailwindvariants.tv)({
     base: "Litho-EmptyState py-16 px-4 flex flex-col items-center text-center gap-6"
 });
@@ -49,7 +57,7 @@ var styles = (0, _tailwindvariants.tv)({
         children: [
             iconSource && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                 className: "flex items-center justify-center w-16 h-16",
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Image, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Image.default, {
                     source: iconSource
                 })
             }),
@@ -63,11 +71,11 @@ var styles = (0, _tailwindvariants.tv)({
                     /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                         className: "flex flex-col items-center gap-2 max-w-112",
                         children: [
-                            title && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                            title && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                                 variant: titleVariant,
                                 children: title
                             }),
-                            description && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                            description && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                                 variant: descriptionVariant,
                                 color: "subdued",
                                 children: description
@@ -77,7 +85,7 @@ var styles = (0, _tailwindvariants.tv)({
                     /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                         className: "flex gap-3",
                         children: [
-                            primaryAction && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Button, {
+                            primaryAction && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
                                 primary: true,
                                 onClick: primaryAction.onAction,
                                 disabled: primaryAction.disabled,
@@ -86,7 +94,7 @@ var styles = (0, _tailwindvariants.tv)({
                                 loading: primaryAction.loading,
                                 children: primaryAction.content
                             }),
-                            secondaryAction && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Button, {
+                            secondaryAction && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
                                 onClick: secondaryAction.onAction,
                                 url: secondaryAction.url,
                                 external: secondaryAction.external,
@@ -98,7 +106,7 @@ var styles = (0, _tailwindvariants.tv)({
                     }),
                     progress !== undefined && progress !== null && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                         className: "w-full",
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.ProgressBar, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ProgressBar.default, {
                             animated: true,
                             progress: progress
                         })

package/dist/cjs/components/Filters.js

@@ -12,7 +12,14 @@ Object.defineProperty(exports, "default", {
 var _jsxruntime = require("react/jsx-runtime");
 var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 var _tailwindvariants = require("tailwind-variants");
-var _index = require("../index");
+var _ActionList = /*#__PURE__*/ _interop_require_default(require("./ActionList"));
+var _Button = /*#__PURE__*/ _interop_require_default(require("./Button"));
+var _Icon = /*#__PURE__*/ _interop_require_default(require("./Icon"));
+var _Link = /*#__PURE__*/ _interop_require_default(require("./Link"));
+var _Popover = /*#__PURE__*/ _interop_require_default(require("./Popover"));
+var _Text = /*#__PURE__*/ _interop_require_default(require("./Text"));
+var _TextField = /*#__PURE__*/ _interop_require_default(require("./TextField"));
+var _Tooltip = /*#__PURE__*/ _interop_require_default(require("./Tooltip"));
 var _polarisicons = require("@shopify/polaris-icons");
 var _AppProvider = require("./AppProvider");
 function _array_like_to_array(arr, len) {
@@ -39,6 +46,11 @@ function _define_property(obj, key, value) {
     }
     return obj;
 }
+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();
@@ -306,7 +318,7 @@ var filterContainerStyles = (0, _tailwindvariants.tv)({
                                     showDivider && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                                         className: "h-full min-h-3 disclosure-line mx-1"
                                     }),
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Popover, {
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Popover.default, {
                                         active: activePopoverKey === filter.key,
                                         activatorDisplayType: "block",
                                         onClose: function() {
@@ -329,14 +341,14 @@ var filterContainerStyles = (0, _tailwindvariants.tv)({
                                                 /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                                                     className: "flex items-center justify-between",
                                                     children: [
-                                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                                                             variant: "headingSm",
                                                             fontWeight: "medium",
                                                             children: filter.label
                                                         }),
                                                         /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                                                             className: "relative -right-2",
-                                                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Button, {
+                                                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
                                                                 plain: true,
                                                                 size: "small",
                                                                 icon: _polarisicons.CancelSmallMinor,
@@ -352,7 +364,7 @@ var filterContainerStyles = (0, _tailwindvariants.tv)({
                                                 }, "filter-content-".concat(filter.key)),
                                                 ((appliedFilter === null || appliedFilter === void 0 ? void 0 : appliedFilter.onRemove) || (filter === null || filter === void 0 ? void 0 : filter.onRemove)) && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                                                     className: "pt-1",
-                                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Link, {
+                                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Link.default, {
                                                         bold: true,
                                                         onClick: function() {
                                                             if (appliedFilter === null || appliedFilter === void 0 ? void 0 : appliedFilter.onRemove) {
@@ -384,7 +396,7 @@ var filterContainerStyles = (0, _tailwindvariants.tv)({
                         children: (showMoreFilters || showClearAction) && /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                             className: "flex gap-1.5",
                             children: [
-                                showMoreFilters && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Popover, {
+                                showMoreFilters && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Popover.default, {
                                     active: activePopoverKey === "moreFilters",
                                     activatorDisplayType: "block",
                                     onClose: function() {
@@ -403,7 +415,7 @@ var filterContainerStyles = (0, _tailwindvariants.tv)({
                                         children: [
                                             /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                                                 className: "p-2 pb-0 sticky top-0 bg-surface-highest",
-                                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.TextField, {
+                                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
                                                     value: filterSearchValue,
                                                     onChange: function(value) {
                                                         return setFilterSearchValue(value);
@@ -416,7 +428,7 @@ var filterContainerStyles = (0, _tailwindvariants.tv)({
                                                     }
                                                 })
                                             }),
-                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.ActionList, {
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_ActionList.default, {
                                                 items: moreFilters.map(function(filter) {
                                                     return {
                                                         content: filter.label,
@@ -510,12 +522,12 @@ var pillTextStyles = (0, _tailwindvariants.tv)({
     var content = /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
         className: classes,
         onClick: onClick,
-        children: destructive ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+        children: destructive ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
             source: _polarisicons.DeleteMinor,
             color: "subdued"
         }) : /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
             children: [
-                !applied && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                !applied && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                     source: _polarisicons.PlusMinor,
                     color: "subdued"
                 }),
@@ -523,7 +535,7 @@ var pillTextStyles = (0, _tailwindvariants.tv)({
                     className: textClasses,
                     children: label
                 }),
-                applied && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                applied && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                     source: _polarisicons.CaretDownMinor,
                     color: "subdued"
                 })
@@ -531,7 +543,7 @@ var pillTextStyles = (0, _tailwindvariants.tv)({
         })
     });
     if (destructive) {
-        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Tooltip, {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tooltip.default, {
             content: "Remove filters",
             preferredPosition: "above",
             children: content
@@ -694,7 +706,7 @@ var rightGradientStyles = (0, _tailwindvariants.tv)({
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                 className: leftGradientClasses,
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Button, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
                     rounded: true,
                     shadow: true,
                     icon: _polarisicons.ChevronLeftMinor,
@@ -706,7 +718,7 @@ var rightGradientStyles = (0, _tailwindvariants.tv)({
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                 className: rightGradientClasses,
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Button, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
                     rounded: true,
                     shadow: true,
                     icon: _polarisicons.ChevronRightMinor,
@@ -799,7 +811,7 @@ var tabActionIconStyles = (0, _tailwindvariants.tv)({
                 /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                     className: "relative w-full flex items-center justify-between gap-0 min-h-5 pr-1",
                     children: [
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                             variant: "headingXs",
                             color: color,
                             fontWeight: "medium",
@@ -812,15 +824,15 @@ var tabActionIconStyles = (0, _tailwindvariants.tv)({
                                 !interactive && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                                     className: "min-h-full min-w-2 bg-linear-to-l from-surface-highest to-transparent"
                                 }),
-                                tooltip ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Tooltip, {
+                                tooltip ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tooltip.default, {
                                     content: tooltip,
                                     preferredPosition: "above",
-                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                                         source: icon,
                                         color: interactive ? "link" : "subdued",
                                         className: actionIconClasses
                                     })
-                                }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                                }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                                     source: icon,
                                     color: interactive ? "link" : "subdued",
                                     className: actionIconClasses
@@ -851,11 +863,11 @@ var tabActionIconStyles = (0, _tailwindvariants.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 = (0, _react.useContext)(_AppProvider.DarkModeContext).darkMode;
+    var darkMode = (0, _AppProvider.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__*/ (0, _jsxruntime.jsx)("div", {
         className: "p-1",
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.TextField, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
             icon: _polarisicons.SearchMajor,
             value: queryValue,
             onChange: onQueryChange,

package/dist/cjs/components/FooterHelp.js

@@ -9,8 +9,13 @@ Object.defineProperty(exports, "default", {
     }
 });
 var _jsxruntime = require("react/jsx-runtime");
-var _index = require("../index");
+var _Icon = /*#__PURE__*/ _interop_require_default(require("./Icon"));
 var _polarisicons = require("@shopify/polaris-icons");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 /**
  * Renders a `FooterHelp` component, which provides additional information
  * or guidance to users, typically displayed at the bottom of a page. The component
@@ -34,7 +39,7 @@ var _polarisicons = require("@shopify/polaris-icons");
         children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
             className: "flex items-center gap-3 rounded-full bg-surface-lower py-3 pl-4 pr-5 mx-auto my-5",
             children: [
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                     source: _polarisicons.CircleInformationMajor,
                     color: "subdued"
                 }),

package/dist/cjs/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>
  */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/dist/cjs/components/Frame.js

@@ -3,10 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "default", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get default () {
         return _default;
+    },
+    get useFrame () {
+        return useFrame;
     }
 });
 var _jsxruntime = require("react/jsx-runtime");
@@ -14,7 +22,12 @@ var _react = require("react");
 var _AppProvider = require("../components/AppProvider");
 var _tailwindvariants = require("tailwind-variants");
 var _polarisicons = require("@shopify/polaris-icons");
-var _index = require("../index");
+var _Button = /*#__PURE__*/ _interop_require_default(require("./Button"));
+var _Icon = /*#__PURE__*/ _interop_require_default(require("./Icon"));
+var _FrameSaveBar = /*#__PURE__*/ _interop_require_default(require("./FrameSaveBar"));
+var _TopBar = /*#__PURE__*/ _interop_require_default(require("./TopBar"));
+var _Popover = /*#__PURE__*/ _interop_require_default(require("./Popover"));
+var _ActionList = /*#__PURE__*/ _interop_require_default(require("./ActionList"));
 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 +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 _iterable_to_array_limit(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
@@ -172,7 +190,7 @@ var logoStyles = (0, _tailwindvariants.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 = (0, _react.useContext)(_AppProvider.DarkModeContext).darkMode;
+    var darkMode = (0, _AppProvider.useDarkMode)().darkMode;
     var _useContext = (0, _react.useContext)(_AppProvider.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((0, _react.useState)(""), 2), searchTriggerShortcutText = _useState[0], setSearchTriggerShortcutText = _useState[1];
     (0, _react.useEffect)(function() {
@@ -228,14 +246,14 @@ var logoStyles = (0, _tailwindvariants.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__*/ (0, _jsxruntime.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();
         },
         children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                 source: _polarisicons.SearchMajor,
                 color: "subdued"
             }),
@@ -267,13 +285,13 @@ var logoStyles = (0, _tailwindvariants.tv)({
                         modalIsOpen: modalIsOpen,
                         alwaysShowLogo: alwaysShowLogo
                     }),
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)("a", {
+                    children: logo && /*#__PURE__*/ (0, _jsxruntime.jsx)("a", {
                         href: logo.url,
                         className: "block py-1 px-2 relative -left-2 ".concat(logo.url ? " cursor-pointer" : ""),
                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)("img", {
                             src: logoSource,
                             alt: logo.accessibilityLabel,
-                            style: (logo === null || logo === void 0 ? void 0 : logo.width) ? {
+                            style: logo.width ? {
                                 width: logo.width
                             } : undefined
                         })
@@ -281,7 +299,7 @@ var logoStyles = (0, _tailwindvariants.tv)({
                 }),
                 !contentIsFullPage && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
                     children: [
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.FrameSaveBar, {
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_FrameSaveBar.default, {
                             logo: logo
                         }),
                         /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
@@ -290,7 +308,7 @@ var logoStyles = (0, _tailwindvariants.tv)({
                             }),
                             children: [
                                 announcement,
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.TopBar, {
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_TopBar.default, {
                                     hasNavigation: !!navigation,
                                     userMenu: userMenu,
                                     headerAccessory: headerAccessory,
@@ -333,7 +351,7 @@ var logoStyles = (0, _tailwindvariants.tv)({
                                                 className: "truncate",
                                                 children: userMenu
                                             }),
-                                            moreActions && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Popover, {
+                                            moreActions && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Popover.default, {
                                                 active: showMoreActionsPopover,
                                                 onClose: function() {
                                                     return setShowMoreActionsPopover(false);
@@ -341,7 +359,7 @@ var logoStyles = (0, _tailwindvariants.tv)({
                                                 preferredAlignment: "right",
                                                 preferredPosition: "above",
                                                 containerClassName: "shrink-0 whitespace-nowrap flex-none",
-                                                activator: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Button, {
+                                                activator: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
                                                     icon: _polarisicons.QuestionMarkInverseMajor,
                                                     iconColor: "subdued",
                                                     plain: true,
@@ -349,7 +367,7 @@ var logoStyles = (0, _tailwindvariants.tv)({
                                                         return setShowMoreActionsPopover(!showMoreActionsPopover);
                                                     }
                                                 }),
-                                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.ActionList, {
+                                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ActionList.default, {
                                                     sections: moreActions,
                                                     onActionAnyItem: function() {
                                                         return setShowMoreActionsPopover(false);
@@ -370,7 +388,7 @@ var logoStyles = (0, _tailwindvariants.tv)({
                             },
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                                 className: "fixed cursor-pointer top-2.5 @md:hidden p-2 rounded-full bg-tint-10 hover:bg-tint-12 dark:bg-tint-alt-10 dark:hover:bg-tint-alt-12 left-56.5",
-                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                                     source: _polarisicons.CancelMajor,
                                     color: "alternate"
                                 })
@@ -383,4 +401,11 @@ var logoStyles = (0, _tailwindvariants.tv)({
         })
     });
 };
+var useFrame = function() {
+    var context = (0, _react.useContext)(_AppProvider.FrameContext);
+    if (!context) {
+        throw new Error("useFrame must be used within a FrameProvider");
+    }
+    return context;
+};
 var _default = Frame;

package/dist/cjs/components/FrameSaveBar.js

@@ -13,8 +13,12 @@ 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 _Button = /*#__PURE__*/ _interop_require_default(require("./Button"));
+var _Text = /*#__PURE__*/ _interop_require_default(require("./Text"));
+var _Icon = /*#__PURE__*/ _interop_require_default(require("./Icon"));
+var _Tooltip = /*#__PURE__*/ _interop_require_default(require("./Tooltip"));
 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];
@@ -23,6 +27,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;
@@ -106,8 +115,8 @@ var toggleStyles = (0, _tailwindvariants.tv)({
  * @returns {JSX.Element} The rendered FrameSaveBar component
  */ function FrameSaveBar(param) {
     var logo = param.logo;
-    var darkMode = (0, _react.useContext)(_AppProvider.DarkModeContext).darkMode;
-    var paneIsOpen = (0, _react.useContext)(_AppProvider.FrameContext).paneIsOpen;
+    var darkMode = (0, _AppProvider.useDarkMode)().darkMode;
+    var paneIsOpen = (0, _Frame.useFrame)().paneIsOpen;
     var _useContext = (0, _react.useContext)(_AppProvider.FormContext), showGlobalContextualSaveBar = _useContext.showGlobalContextualSaveBar, message = _useContext.message, saveAction = _useContext.saveAction, discardAction = _useContext.discardAction;
     var _useState = _sliced_to_array((0, _react.useState)(false), 2), visible = _useState[0], setVisible = _useState[1];
     var _useState1 = _sliced_to_array((0, _react.useState)(false), 2), show = _useState1[0], setShow = _useState1[1];
@@ -133,7 +142,7 @@ var toggleStyles = (0, _tailwindvariants.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__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
@@ -142,7 +151,7 @@ var toggleStyles = (0, _tailwindvariants.tv)({
                     tucked: tucked,
                     paneIsOpen: paneIsOpen
                 }),
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Tooltip, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tooltip.default, {
                     content: "Show save bar",
                     position: "below",
                     alignment: "center",
@@ -151,7 +160,7 @@ var toggleStyles = (0, _tailwindvariants.tv)({
                         onClick: function() {
                             return setTucked(false);
                         },
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                             source: _polarisicons.ChevronDownMinor,
                             color: "FrameSaveBar"
                         })
@@ -167,7 +176,7 @@ var toggleStyles = (0, _tailwindvariants.tv)({
                 children: [
                     /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                         className: "hidden @md:block py-1 px-0.5 w-51.5",
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)("img", {
+                        children: logo && /*#__PURE__*/ (0, _jsxruntime.jsx)("img", {
                             src: logoSource,
                             alt: logo.accessibilityLabel,
                             style: (logo === null || logo === void 0 ? void 0 : logo.width) ? {
@@ -181,7 +190,7 @@ var toggleStyles = (0, _tailwindvariants.tv)({
                             /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                                 className: "flex items-center gap-2 min-w-0",
                                 children: [
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                                         variant: "headingMd",
                                         color: "FrameSaveBar",
                                         truncate: true,
@@ -189,7 +198,7 @@ var toggleStyles = (0, _tailwindvariants.tv)({
                                     }),
                                     /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                                         className: "hidden @md:block",
-                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Tooltip, {
+                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tooltip.default, {
                                             content: "Hide save bar",
                                             position: "below",
                                             alignment: "center",
@@ -198,7 +207,7 @@ var toggleStyles = (0, _tailwindvariants.tv)({
                                                 onClick: function() {
                                                     return setTucked(true);
                                                 },
-                                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                                                     source: _polarisicons.ChevronUpMinor,
                                                     color: "FrameSaveBar"
                                                 })
@@ -210,7 +219,7 @@ var toggleStyles = (0, _tailwindvariants.tv)({
                             /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                                 className: "flex items-center gap-2",
                                 children: [
-                                    discardAction && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Button, {
+                                    discardAction && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
                                         primary: true,
                                         onClick: discardAction.onAction,
                                         loading: discardAction.loading,
@@ -219,7 +228,7 @@ var toggleStyles = (0, _tailwindvariants.tv)({
                                         className: discardAction.loading || discardAction.disabled ? "border-transparent!" : undefined,
                                         children: discardAction.content
                                     }),
-                                    saveAction && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Button, {
+                                    saveAction && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
                                         highlight: true,
                                         onClick: saveAction.onAction,
                                         loading: saveAction.loading,

package/dist/cjs/components/Layout.js

@@ -20,9 +20,9 @@ _export(exports, {
 var _jsxruntime = require("react/jsx-runtime");
 var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 var _tailwindvariants = require("tailwind-variants");
-var _AppProvider = require("../components/AppProvider");
 var _LayoutSection = /*#__PURE__*/ _interop_require_default(require("./LayoutSection"));
 var _Text = /*#__PURE__*/ _interop_require_default(require("./Text"));
+var _Frame = require("./Frame");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -106,7 +106,7 @@ var styles = (0, _tailwindvariants.tv)({
  * @returns {JSX.Element} The rendered layout component.
  */ function Layout() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var embedded = (0, _react.useContext)(_AppProvider.FrameContext).embedded;
+    var embedded = (0, _Frame.useFrame)().embedded;
     var children = props.children;
     var analyzeChildren = function(children) {
         var depth = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0;
@@ -195,7 +195,7 @@ var annotatedSectionStyles = (0, _tailwindvariants.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 = (0, _react.useContext)(_AppProvider.FrameContext).embedded;
+    var embedded = (0, _Frame.useFrame)().embedded;
     var annotatedSectionClasses = annotatedSectionStyles({
         embedded: embedded
     });

package/dist/cjs/components/LayoutSection.js

@@ -12,8 +12,8 @@ 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("../components/AppProvider");
 var _Layout = require("./Layout");
+var _Frame = require("./Frame");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -110,7 +110,7 @@ var sectionStyles = (0, _tailwindvariants.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 = (0, _react.useContext)(_AppProvider.FrameContext).embedded;
+    var embedded = (0, _Frame.useFrame)().embedded;
     var parentHasSidebar = (0, _react.useContext)(_Layout.LayoutContext).parentHasSidebar;
     var sectionClasses = sectionStyles({
         sidebar: sidebar,