@heymantle/litho 0.0.3 → 0.0.5

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;
@@ -164,15 +182,18 @@ var logoStyles = (0, _tailwindvariants.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 = (0, _react.useContext)(_AppProvider.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__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+        source: _polarisicons.SearchMajor,
+        color: "subdued"
+    }) : _param_searchIcon, searchModal = param.searchModal, onToggleSearch = param.onToggleSearch, headerAccessory = param.headerAccessory;
+    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() {
@@ -209,7 +230,7 @@ var logoStyles = (0, _tailwindvariants.tv)({
         var handleSearchShortcut = function(e) {
             if ((e.metaKey || e.ctrlKey) && e.key === "k") {
                 e.preventDefault();
-                onToggleSearchModal();
+                onToggleSearch();
             }
         };
         window.addEventListener("keydown", handleSearchShortcut);
@@ -228,22 +249,19 @@ 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();
+            return onToggleSearch();
         },
         children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
-                source: _polarisicons.SearchMajor,
-                color: "subdued"
-            }),
+            searchIcon,
             /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                 className: "flex-1 text-low flex items-center justify-between gap-1",
                 children: [
                     /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                        children: "Search"
+                        children: searchLabel
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                         className: "text-xs text-lowest hidden @md:block",
@@ -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/HorizontalStack.js

@@ -93,7 +93,13 @@ var styles = (0, _tailwindvariants.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",
@@ -101,6 +107,7 @@ var styles = (0, _tailwindvariants.tv)({
             "2": "gap-2",
             "3": "gap-3",
             "4": "gap-4",
+            "5": "gap-5",
             "6": "gap-6",
             "8": "gap-8",
             "10": "gap-10"
@@ -136,7 +143,7 @@ var styles = (0, _tailwindvariants.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/cjs/components/Icon.js

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

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,

package/dist/cjs/components/Link.js

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

package/dist/cjs/components/List.js

@@ -14,13 +14,14 @@ var styles = (0, _tailwindvariants.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/cjs/components/Listbox.js

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

package/dist/cjs/components/Modal.js

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