@heymantle/litho 0.0.3 → 0.0.5

package/dist/cjs/components/Button.js

@@ -13,7 +13,11 @@ var _jsxruntime = require("react/jsx-runtime");
 var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 var _tailwindvariants = require("tailwind-variants");
 var _ButtonGroup = require("./ButtonGroup");
-var _index = require("../index");
+var _ActionList = /*#__PURE__*/ _interop_require_default(require("./ActionList"));
+var _Icon = /*#__PURE__*/ _interop_require_default(require("./Icon"));
+var _Popover = /*#__PURE__*/ _interop_require_default(require("./Popover"));
+var _Spinner = /*#__PURE__*/ _interop_require_default(require("./Spinner"));
+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) {
@@ -37,6 +41,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();
@@ -224,6 +233,7 @@ var styles = (0, _tailwindvariants.tv)({
         },
         size: {
             stepper: "min-h-3.5 rounded-sm",
+            mini: "min-h-5 min-w-5",
             small: "min-h-7 min-w-7",
             medium: "min-h-8",
             large: "min-h-8"
@@ -239,6 +249,10 @@ var styles = (0, _tailwindvariants.tv)({
         bordered: {
             true: "border-tint-2",
             false: ""
+        },
+        naked: {
+            true: "border-none bg-transparent p-0 hover:bg-transparent w-auto justify-start",
+            false: ""
         }
     },
     compoundVariants: [
@@ -363,6 +377,7 @@ var styles = (0, _tailwindvariants.tv)({
             destructive: false,
             highlight: false,
             pressed: false,
+            naked: false,
             class: "bg-btn-secondary hover:bg-btn-secondary-low active:bg-btn-secondary-lower text-btn-secondary-fg hover:text-btn-secondary-fg-alt border-btn-secondary-border hover:border-btn-secondary-border-low active:border-btn-secondary-border-low\n        dark:outline-hidden dark:border-transparent dark:shadow-btn-dark dark:border-t-tint-alt-3 dark:hover:border-t-tint-alt-2 dark:active:border-t-tint-alt-2"
         },
         {
@@ -374,6 +389,7 @@ var styles = (0, _tailwindvariants.tv)({
             destructive: false,
             highlight: false,
             pressed: true,
+            naked: false,
             class: "bg-btn-secondary hover:bg-btn-secondary-low active:bg-btn-secondary-lower text-btn-secondary-fg hover:text-btn-secondary-fg-alt border-btn-secondary-border hover:border-btn-secondary-border-low active:border-btn-secondary-border-low\n        dark:outline-hidden dark:border-tint-10 dark:shadow-btn-pressed-dark dark:hover:border-tint-10 dark:active:border-tint-10"
         },
         {
@@ -424,16 +440,19 @@ var styles = (0, _tailwindvariants.tv)({
             link: true,
             disabled: false,
             loading: false,
+            naked: false,
             class: "bg-btn-link hover:bg-btn-link-low active:bg-btn-link-lower text-btn-link-fg hover:text-btn-link-fg-alt border-btn-link-border hover:border-btn-link-border-low active:border-btn-link-border-low"
         },
         {
             link: true,
             disabled: true,
+            naked: false,
             class: "bg-btn-link-disabled text-btn-link-disabled-fg"
         },
         {
             link: true,
             loading: true,
+            naked: false,
             class: "bg-btn-link-disabled text-btn-link-disabled-fg"
         },
         // Destructive buttons
@@ -496,12 +515,22 @@ var contentStyles = (0, _tailwindvariants.tv)({
             false: ""
         },
         size: {
+            mini: "p-0",
             small: "py-0.5",
             large: "py-3",
             medium: "py-1"
+        },
+        naked: {
+            true: "px-2",
+            false: ""
         }
     },
     compoundVariants: [
+        {
+            size: "mini",
+            iconOnly: true,
+            class: "!px-0"
+        },
         {
             size: "small",
             iconOnly: true,
@@ -553,6 +582,7 @@ var contentStyles = (0, _tailwindvariants.tv)({
             hasIcon: false,
             hasChildren: true,
             disclosure: false,
+            naked: false,
             class: "px-3"
         },
         {
@@ -602,6 +632,10 @@ var textStyles = (0, _tailwindvariants.tv)({
         highlight: {
             true: "",
             false: ""
+        },
+        naked: {
+            true: "",
+            false: ""
         }
     },
     compoundVariants: [
@@ -628,6 +662,7 @@ var textStyles = (0, _tailwindvariants.tv)({
             primary: false,
             plain: false,
             link: false,
+            naked: false,
             class: "text-btn-secondary-fg"
         },
         {
@@ -711,6 +746,11 @@ var textStyles = (0, _tailwindvariants.tv)({
             highlight: true,
             disabled: true,
             class: "text-btn-highlight-disabled-fg"
+        },
+        {
+            link: true,
+            naked: true,
+            class: "text-blue-700 underline"
         }
     ],
     defaultVariants: {
@@ -751,7 +791,8 @@ var connectedDisclosureStyles = (0, _tailwindvariants.tv)({
  * @param {string} [props.ariaDescribedBy] - ID of the element that describes the button.
  * @param {boolean} [props.ariaChecked] - Whether the button is checked (for toggle buttons).
  * @param {React.Component} [props.icon] - Icon component to display within the button.
- * @param {string} [props.iconColor='default'] - Color of the icon.
+ * @param {"default" | "primary" | "secondary" | "plain" | "link" | "destructive" | "highlight"} [props.iconColor='default'] - Color of the icon.
+ * @param {"default" | "sm" | "lg" | "xl"} [props.iconSize='default'] - Size of the icon.
  * @param {boolean} [props.primary=false] - Whether to show the primary button style.
  * @param {boolean} [props.highlight=false] - Whether to show the highlight button style.
  * @param {boolean} [props.link=false] - Whether to show a link style.
@@ -759,12 +800,16 @@ var connectedDisclosureStyles = (0, _tailwindvariants.tv)({
  * @param {boolean} [props.disclosure=false] - Whether to show a disclosure arrow.
  * @param {boolean} [props.disclosureRight=false] - Whether to show the disclosure on the right.
  * @param {boolean} [props.plain=false] - Whether to show plain styling without background.
- * @param {string} [props.size='medium'] - Size of the button ('small', 'medium', 'large', 'stepper').
+ * @param {boolean} [props.naked=false] - Whether to show the naked styling.
+ * @param {"small" | "medium" | "large" | "stepper"} [props.size='medium'] - Size of the button ('small', 'medium', 'large', 'stepper').
  * @param {boolean} [props.fullWidth] - Whether the button should take full width.
- * @param {string} [props.align='center'] - Alignment of the button content ('left', 'center', 'right').
+ * @param {"left" | "center" | "right"} [props.align='center'] - Alignment of the button content ('left', 'center', 'right').
  * @param {string} [props.tooltip] - Tooltip to show when hovering over the button.
+ * @param {"left" | "center" | "right"} [props.tooltipAlignment='right'] - Alignment of the tooltip ('left', 'center', 'right').
+ * @param {"above" | "below" | "left" | "right"} [props.tooltipPosition='above'] - Position of the tooltip ('above', 'below', 'left', 'right').
+ * @param {"inline-block" | "block" | "inline"} [props.tooltipDisplay='inline-block'] - Display type of the tooltip ('inline-block', 'block', 'inline').
  * @param {Object} [props.connectedDisclosure] - Configuration for connected disclosure menu.
- * @param {Array} [props.connectedDisclosure.actions] - Actions to show in the disclosure menu.
+ * @param {Array<import("./ActionList").ActionListItem>} [props.connectedDisclosure.actions] - Actions to show in the disclosure menu.
  * @param {string} [props.className] - Additional CSS classes for the button.
  * @param {string} [props.contentClassName] - Additional CSS classes for the button content.
  * @param {boolean} [props.rounded] - Whether to show fully rounded corners.
@@ -774,12 +819,15 @@ var connectedDisclosureStyles = (0, _tailwindvariants.tv)({
  * @returns {JSX.Element} The rendered Button component.
  *
  * @example
+ * ```js
  * // Basic button
  * <Button onClick={() => console.log('Clicked')}>
  *   Click me
  * </Button>
+ * ```
  *
  * @example
+ * ```js
  * // Primary button with icon and loading state
  * <Button
  *   primary
@@ -789,8 +837,10 @@ var connectedDisclosureStyles = (0, _tailwindvariants.tv)({
  * >
  *   Save changes
  * </Button>
+ * ```
  *
  * @example
+ * ```js
  * // Button with connected disclosure
  * <Button
  *   connectedDisclosure={{
@@ -802,11 +852,12 @@ var connectedDisclosureStyles = (0, _tailwindvariants.tv)({
  * >
  *   More actions
  * </Button>
+ * ```
  */ function Button() {
     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 _useState = _sliced_to_array((0, _react.useState)(false), 2), showConnectedDisclosurePopover = _useState[0], setShowConnectedDisclosurePopover = _useState[1];
-    var id = props.id, children = props.children, url = props.url, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, external = props.external, target = props.target, submit = props.submit, _props_loading = props.loading, loading = _props_loading === void 0 ? false : _props_loading, _props_pressed = props.pressed, pressed = _props_pressed === void 0 ? false : _props_pressed, accessibilityLabel = props.accessibilityLabel, role = props.role, ariaControls = props.ariaControls, ariaExpanded = props.ariaExpanded, ariaDescribedBy = props.ariaDescribedBy, ariaChecked = props.ariaChecked, icon = props.icon, _iconColor = props.iconColor, _props_bordered = props.bordered, bordered = _props_bordered === void 0 ? false : _props_bordered, _props_primary = props.primary, primary = _props_primary === void 0 ? false : _props_primary, _props_highlight = props.highlight, highlight = _props_highlight === void 0 ? false : _props_highlight, _props_link = props.link, link = _props_link === void 0 ? false : _props_link, _props_destructive = props.destructive, destructive = _props_destructive === void 0 ? false : _props_destructive, _props_disclosure = props.disclosure, disclosure = _props_disclosure === void 0 ? false : _props_disclosure, _props_disclosureRight = props.disclosureRight, disclosureRight = _props_disclosureRight === void 0 ? false : _props_disclosureRight, _props_plain = props.plain, plain = _props_plain === void 0 ? false : _props_plain, _props_size = props.size, size = _props_size === void 0 ? "medium" : _props_size, fullWidth = props.fullWidth, _props_align = props.align, align = _props_align === void 0 ? "center" : _props_align, connectedDisclosure = props.connectedDisclosure, className = props.className, contentClassName = props.contentClassName, rounded = props.rounded, onClick = props.onClick, onMouseDown = props.onMouseDown, tooltip = props.tooltip, _props_tooltipAlignment = props.tooltipAlignment, tooltipAlignment = _props_tooltipAlignment === void 0 ? "right" : _props_tooltipAlignment, _props_tooltipPosition = props.tooltipPosition, tooltipPosition = _props_tooltipPosition === void 0 ? "above" : _props_tooltipPosition, shadow = props.shadow, restProps = _object_without_properties(props, [
+    var id = props.id, children = props.children, url = props.url, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, external = props.external, target = props.target, submit = props.submit, _props_loading = props.loading, loading = _props_loading === void 0 ? false : _props_loading, _props_pressed = props.pressed, pressed = _props_pressed === void 0 ? false : _props_pressed, accessibilityLabel = props.accessibilityLabel, role = props.role, ariaControls = props.ariaControls, ariaExpanded = props.ariaExpanded, ariaDescribedBy = props.ariaDescribedBy, ariaChecked = props.ariaChecked, icon = props.icon, _iconColor = props.iconColor, _props_iconSize = props.iconSize, iconSize = _props_iconSize === void 0 ? "default" : _props_iconSize, _props_bordered = props.bordered, bordered = _props_bordered === void 0 ? false : _props_bordered, _props_primary = props.primary, primary = _props_primary === void 0 ? false : _props_primary, _props_highlight = props.highlight, highlight = _props_highlight === void 0 ? false : _props_highlight, _props_link = props.link, link = _props_link === void 0 ? false : _props_link, _props_destructive = props.destructive, destructive = _props_destructive === void 0 ? false : _props_destructive, _props_disclosure = props.disclosure, disclosure = _props_disclosure === void 0 ? false : _props_disclosure, _props_disclosureRight = props.disclosureRight, disclosureRight = _props_disclosureRight === void 0 ? false : _props_disclosureRight, _props_plain = props.plain, plain = _props_plain === void 0 ? false : _props_plain, _props_naked = props.naked, naked = _props_naked === void 0 ? false : _props_naked, _props_size = props.size, size = _props_size === void 0 ? "medium" : _props_size, fullWidth = props.fullWidth, _props_align = props.align, align = _props_align === void 0 ? "center" : _props_align, connectedDisclosure = props.connectedDisclosure, className = props.className, contentClassName = props.contentClassName, rounded = props.rounded, onClick = props.onClick, onMouseDown = props.onMouseDown, tooltip = props.tooltip, _props_tooltipAlignment = props.tooltipAlignment, tooltipAlignment = _props_tooltipAlignment === void 0 ? "right" : _props_tooltipAlignment, _props_tooltipPosition = props.tooltipPosition, tooltipPosition = _props_tooltipPosition === void 0 ? "above" : _props_tooltipPosition, _props_tooltipDisplay = props.tooltipDisplay, tooltipDisplay = _props_tooltipDisplay === void 0 ? "inline-block" : _props_tooltipDisplay, shadow = props.shadow, restProps = _object_without_properties(props, [
         "id",
         "children",
         "url",
@@ -824,6 +875,7 @@ var connectedDisclosureStyles = (0, _tailwindvariants.tv)({
         "ariaChecked",
         "icon",
         "iconColor",
+        "iconSize",
         "bordered",
         "primary",
         "highlight",
@@ -832,6 +884,7 @@ var connectedDisclosureStyles = (0, _tailwindvariants.tv)({
         "disclosure",
         "disclosureRight",
         "plain",
+        "naked",
         "size",
         "fullWidth",
         "align",
@@ -844,6 +897,7 @@ var connectedDisclosureStyles = (0, _tailwindvariants.tv)({
         "tooltip",
         "tooltipAlignment",
         "tooltipPosition",
+        "tooltipDisplay",
         "shadow"
     ]);
     var hasIcon = !!icon;
@@ -881,14 +935,16 @@ var connectedDisclosureStyles = (0, _tailwindvariants.tv)({
         shadow: shadow,
         darkMode: darkMode,
         bordered: bordered,
-        align: align
+        align: align,
+        naked: naked
     });
     var contentClasses = contentStyles({
         disclosure: disclosure,
         hasIcon: hasIcon,
         hasChildren: hasChildren,
         size: size,
-        iconOnly: iconOnly
+        iconOnly: iconOnly,
+        naked: naked
     });
     var iconClasses = iconStyles();
     var textClasses = textStyles({
@@ -899,7 +955,8 @@ var connectedDisclosureStyles = (0, _tailwindvariants.tv)({
         highlight: highlight,
         pressed: pressed,
         loading: loading,
-        disabled: disabled
+        disabled: disabled,
+        naked: naked
     });
     var connectedDisclosureClasses = connectedDisclosureStyles({
         primary: primary,
@@ -938,16 +995,17 @@ var connectedDisclosureStyles = (0, _tailwindvariants.tv)({
                 children: [
                     loading && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                         className: "Litho-Button__Loading absolute inset-0 flex items-center justify-center",
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Spinner, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
                             size: "small",
                             color: "subdued"
                         })
                     }),
                     memoizedIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                         className: iconClasses,
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                             source: memoizedIcon,
-                            color: disabled ? "disabled" : _iconColor || iconColor
+                            color: disabled ? "disabled" : _iconColor || iconColor,
+                            size: iconSize
                         })
                     }),
                     hasChildren && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
@@ -956,9 +1014,10 @@ var connectedDisclosureStyles = (0, _tailwindvariants.tv)({
                     }),
                     disclosure && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                         className: "Litho-Button__DisclosureIcon relative -left-0.5",
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                             source: _polarisicons.CaretDownMinor,
-                            color: disabled ? "disabled" : _iconColor || iconColor
+                            color: disabled ? "disabled" : _iconColor || iconColor,
+                            size: iconSize
                         })
                     })
                 ]
@@ -975,7 +1034,7 @@ var connectedDisclosureStyles = (0, _tailwindvariants.tv)({
         },
         children: [
             content,
-            showConnectedDisclosure && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Popover, {
+            showConnectedDisclosure && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Popover.default, {
                 active: showConnectedDisclosurePopover,
                 onClose: function() {
                     return setShowConnectedDisclosurePopover(false);
@@ -996,7 +1055,7 @@ var connectedDisclosureStyles = (0, _tailwindvariants.tv)({
                         return setShowConnectedDisclosurePopover(!showConnectedDisclosurePopover);
                     }
                 }),
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.ActionList, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ActionList.default, {
                     items: connectedDisclosureActions,
                     onActionAnyItem: function() {
                         return setShowConnectedDisclosurePopover(false);
@@ -1006,10 +1065,11 @@ var connectedDisclosureStyles = (0, _tailwindvariants.tv)({
         ]
     });
     if (!!tooltip) {
-        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Tooltip, {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tooltip.default, {
             content: tooltip,
             alignment: tooltipAlignment,
             preferredPosition: tooltipPosition,
+            display: tooltipDisplay,
             children: showConnectedDisclosure ? contentWithDisclosure : content
         });
     }

package/dist/cjs/components/Card.js

@@ -10,60 +10,19 @@ Object.defineProperty(exports, "default", {
     }
 });
 var _jsxruntime = require("react/jsx-runtime");
-var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+var _react = /*#__PURE__*/ _interop_require_default(require("react"));
 var _tailwindvariants = require("tailwind-variants");
-var _AppProvider = require("../components/AppProvider");
 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 _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-function _getRequireWildcardCache(nodeInterop) {
-    if (typeof WeakMap !== "function") return null;
-    var cacheBabelInterop = new WeakMap();
-    var cacheNodeInterop = new WeakMap();
-    return (_getRequireWildcardCache = function(nodeInterop) {
-        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
-    })(nodeInterop);
-}
-function _interop_require_wildcard(obj, nodeInterop) {
-    if (!nodeInterop && obj && obj.__esModule) {
-        return obj;
-    }
-    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
-        return {
-            default: obj
-        };
-    }
-    var cache = _getRequireWildcardCache(nodeInterop);
-    if (cache && cache.has(obj)) {
-        return cache.get(obj);
-    }
-    var newObj = {
-        __proto__: null
-    };
-    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
-    for(var key in obj){
-        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
-            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
-            if (desc && (desc.get || desc.set)) {
-                Object.defineProperty(newObj, key, desc);
-            } else {
-                newObj[key] = obj[key];
-            }
-        }
-    }
-    newObj.default = obj;
-    if (cache) {
-        cache.set(obj, newObj);
-    }
-    return newObj;
-}
 function _type_of(obj) {
     "@swc/helpers - typeof";
     return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
@@ -229,7 +188,7 @@ var bodyStyles = (0, _tailwindvariants.tv)({
  * @returns {React.ReactElement} The rendered Card component.
  */ var Card = function(param) {
     var _param_allowOverflow = param.allowOverflow, allowOverflow = _param_allowOverflow === void 0 ? false : _param_allowOverflow, _param_roundedOnMobile = param.roundedOnMobile, roundedOnMobile = _param_roundedOnMobile === void 0 ? false : _param_roundedOnMobile, children = param.children, hideOnPrint = param.hideOnPrint, title = param.title, _param_titleVariant = param.titleVariant, titleVariant = _param_titleVariant === void 0 ? "headingMd" : _param_titleVariant, description = param.description, icon = param.icon, tooltip = param.tooltip, _param_tooltipPreferredPosition = param.tooltipPreferredPosition, tooltipPreferredPosition = _param_tooltipPreferredPosition === void 0 ? "above" : _param_tooltipPreferredPosition, _param_outlined = param.outlined, outlined = _param_outlined === void 0 ? false : _param_outlined, _param_highlighted = param.highlighted, highlighted = _param_highlighted === void 0 ? false : _param_highlighted, _param_subdued = param.subdued, subdued = _param_subdued === void 0 ? false : _param_subdued, _param_alternate = param.alternate, alternate = _param_alternate === void 0 ? false : _param_alternate, _param_padded = param.padded, padded = _param_padded === void 0 ? false : _param_padded, _param_loading = param.loading, loading = _param_loading === void 0 ? false : _param_loading, _param_paddedHalf = param.paddedHalf, paddedHalf = _param_paddedHalf === void 0 ? false : _param_paddedHalf, _param_removeHeaderBottomPadding = param.removeHeaderBottomPadding, removeHeaderBottomPadding = _param_removeHeaderBottomPadding === void 0 ? false : _param_removeHeaderBottomPadding, onClick = param.onClick, _param_emptyState = param.emptyState, emptyState = _param_emptyState === void 0 ? {} : _param_emptyState, action = param.action, className = param.className, headerClassName = param.headerClassName, accessory = param.accessory, _param_fullHeightBody = param.fullHeightBody, fullHeightBody = _param_fullHeightBody === void 0 ? false : _param_fullHeightBody, _param_fullWidthOnMobile = param.fullWidthOnMobile, fullWidthOnMobile = _param_fullWidthOnMobile === void 0 ? true : _param_fullWidthOnMobile, _param_shadow = param.shadow, shadow = _param_shadow === void 0 ? "default" : _param_shadow;
-    var embedded = (0, _react.useContext)(_AppProvider.FrameContext).embedded;
+    var embedded = (0, _Frame.useFrame)().embedded;
     var showHeader = !!(title || action);
     var isClickable = !!onClick;
     var classes = styles({
@@ -254,7 +213,8 @@ var bodyStyles = (0, _tailwindvariants.tv)({
         var firstSectionDetected = false;
         function process(child) {
             if (/*#__PURE__*/ _react.default.isValidElement(child)) {
-                if (child.type.displayName === "Card.Section" && !firstSectionDetected) {
+                var _child_type;
+                if (((_child_type = child.type) === null || _child_type === void 0 ? void 0 : _child_type.displayName) === "Card.Section" && !firstSectionDetected) {
                     firstSectionDetected = true;
                     return /*#__PURE__*/ _react.default.cloneElement(child, {
                         isFirst: true,
@@ -572,6 +532,7 @@ var clickableRowStyles = (0, _tailwindvariants.tv)({
  * @param {Function} [props.onClick] - Click handler for the row.
  * @param {string} [props.id] - ID to apply to the row element.
  * @param {string} [props.url] - URL to open when the row is clicked.
+ * @param {string} [props.className] - Additional classes to apply to the row.
  * @param {boolean} [props.disabled=false] - Disables interaction with the row.
  *
  * @returns {React.ReactElement} The rendered ClickableRow component.

package/dist/cjs/components/Checkbox.js

@@ -10,8 +10,15 @@ Object.defineProperty(exports, "default", {
 });
 var _jsxruntime = require("react/jsx-runtime");
 var _tailwindvariants = require("tailwind-variants");
-var _index = require("../index");
+var _Icon = /*#__PURE__*/ _interop_require_default(require("./Icon"));
+var _Label = /*#__PURE__*/ _interop_require_default(require("./Label"));
+var _Text = /*#__PURE__*/ _interop_require_default(require("./Text"));
 var _polarisicons = require("@shopify/polaris-icons");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 var styles = (0, _tailwindvariants.tv)({
     base: "Litho-Checkbox group flex gap-2 py-1",
     variants: {
@@ -71,6 +78,9 @@ var checkboxStyles = (0, _tailwindvariants.tv)({
  * @param {boolean} [props.checked=false] - Indicates whether the checkbox is checked.
  * @param {boolean} [props.disabled=false] - Indicates whether the checkbox is disabled.
  * @param {string} [props.helpText] - Additional descriptive text for the checkbox.
+ * @param {React.ReactNode|import("./Tooltip").TooltipContentObject} [props.tooltip] - Tooltip content for the checkbox label.
+ * @param {boolean} [props.indeterminate=false] - Indicates whether the checkbox is in an indeterminate state (mixed/partial selection).
+ * @param {string} [props.className] - Additional CSS classes to apply to the checkbox container.
  * @param {function} [props.onChange] - Callback function called when the checkbox state changes.
  * @param {function} [props.onFocus] - Callback function called when the checkbox gains focus.
  * @param {function} [props.onBlur] - Callback function called when the checkbox loses focus.
@@ -138,12 +148,12 @@ var checkboxStyles = (0, _tailwindvariants.tv)({
                         children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                             className: checkboxClasses,
                             children: [
-                                checked && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                                checked && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                                     color: disabled ? "inputFgDisabled" : hasError ? "white" : "inputFg",
                                     source: _polarisicons.TickMinor,
                                     className: "pointer-events-none"
                                 }),
-                                !checked && indeterminate && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                                !checked && indeterminate && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                                     color: disabled ? "inputFgDisabled" : hasError ? "white" : "inputFg",
                                     source: _polarisicons.MinusMajor,
                                     className: "pointer-events-none"
@@ -151,7 +161,7 @@ var checkboxStyles = (0, _tailwindvariants.tv)({
                             ]
                         })
                     }),
-                    label && !labelHidden && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Label, {
+                    label && !labelHidden && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
                         tooltip: tooltip,
                         disabled: disabled,
                         as: "p",
@@ -159,12 +169,12 @@ var checkboxStyles = (0, _tailwindvariants.tv)({
                     })
                 ]
             }),
-            helpText && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+            helpText && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                 color: "subdued",
                 className: "pl-7",
                 children: helpText
             }),
-            error && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+            error && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                 color: "critical",
                 className: "pl-7",
                 children: error

package/dist/cjs/components/ChoiceList.js

@@ -51,6 +51,12 @@ var styles = (0, _tailwindvariants.tv)({
     base: "Litho-ChoiceList flex flex-col gap-1"
 });
 /**
+ * @typedef {Object} ChoiceListItem
+ * @property {string} value - The value of the choice.
+ * @property {string} label - The display label of the choice.
+ * @property {boolean} [disabled=false] - Whether the choice is disabled.
+ * @property {React.ReactNode} [renderChildren] - A function that returns a React node to render as children of the choice.
+ */ /**
  * A ChoiceList component for rendering a list of selectable options.
  *
  * @component
@@ -59,10 +65,7 @@ var styles = (0, _tailwindvariants.tv)({
  * @param {string} [props.title] - The title of the choice list.
  * @param {boolean} [props.titleHidden=false] - Whether to hide the title visually.
  * @param {boolean} [props.allowMultiple=false] - Whether multiple selections are allowed.
- * @param {Array} props.choices - The available choices for selection.
- * @param {string} props.choices[].value - The value of the choice.
- * @param {string} props.choices[].label - The display label of the choice.
- * @param {boolean} [props.choices[].disabled=false] - Whether the choice is disabled.
+ * @param {Array<ChoiceListItem>} props.choices - The available choices for selection.
  * @param {Array} props.selected - The currently selected values.
  * @param {Function} props.onChange - Callback when the selection changes. Receives the updated array of selected values.
  * @param {string} [props.error] - Error message to display, if any.

package/dist/cjs/components/ColorField.js

@@ -11,9 +11,9 @@ Object.defineProperty(exports, "default", {
 });
 var _jsxruntime = require("react/jsx-runtime");
 var _react = require("react");
-var _reactcolor = require("react-color");
+var _reactcolorsketch = /*#__PURE__*/ _interop_require_default(require("@uiw/react-color-sketch"));
 var _tailwindvariants = require("tailwind-variants");
-var _index = require("../index");
+var _Text = /*#__PURE__*/ _interop_require_default(require("./Text"));
 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];
@@ -22,6 +22,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;
@@ -123,11 +128,11 @@ var colorCell = (0, _tailwindvariants.tv)({
             /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                 className: "flex flex-col gap-0",
                 children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                         variant: "bodySm",
                         children: label
                     }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                         variant: "bodySm",
                         color: "subdued",
                         children: value ? value.toUpperCase() : value
@@ -143,7 +148,7 @@ var colorCell = (0, _tailwindvariants.tv)({
                 style: zIndexOverride ? {
                     zIndex: zIndexOverride
                 } : {},
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactcolor.SketchPicker, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactcolorsketch.default, {
                     color: value,
                     onChange: function(param) {
                         var hex = param.hex;

package/dist/cjs/components/DatePicker.js

@@ -14,7 +14,12 @@ var _react = require("react");
 var _tailwindvariants = require("tailwind-variants");
 var _dayjs = /*#__PURE__*/ _interop_require_default(require("dayjs"));
 var _reactdatepicker = /*#__PURE__*/ _interop_require_default(require("react-datepicker"));
-var _index = require("../index");
+var _Icon = /*#__PURE__*/ _interop_require_default(require("./Icon"));
+var _Listbox = /*#__PURE__*/ _interop_require_default(require("./Listbox"));
+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 _TimePicker = /*#__PURE__*/ _interop_require_default(require("./TimePicker"));
 var _polarisicons = require("@shopify/polaris-icons");
 var _locale = require("date-fns/locale");
 var _dates = require("../utilities/dates");
@@ -363,7 +368,7 @@ var getDateRange = function(param) {
                 className: presetContainerStyles({
                     rows: rows
                 }),
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Listbox, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Listbox.default, {
                     displayHorizontallyOnMobile: true,
                     options: presets.map(function(preset) {
                         return {
@@ -440,12 +445,12 @@ var getDateRange = function(param) {
                                         className: buttonStyles({
                                             disabled: prevMonthButtonDisabled
                                         }),
-                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                                             source: _polarisicons.ChevronLeftMinor
                                         })
                                     }),
                                     /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_index.Text, {
+                                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
                                             children: [
                                                 monthLabel,
                                                 " ",
@@ -459,7 +464,7 @@ var getDateRange = function(param) {
                                         className: buttonStyles({
                                             disabled: nextMonthButtonDisabled
                                         }),
-                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                                             source: _polarisicons.ChevronRightMinor
                                         })
                                     })
@@ -467,7 +472,7 @@ var getDateRange = function(param) {
                             });
                         }
                     }),
-                    showTimePicker && !allowRange && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.TimePicker, {
+                    showTimePicker && !allowRange && /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimePicker.default, {
                         value: formattedTime,
                         onChange: function(time) {
                             onChange({
@@ -486,7 +491,7 @@ var getDateRange = function(param) {
     var startDateFormatted = startDate ? (0, _dayjs.default)(startDate).format(displayFormat) : null;
     var endDateFormatted = endDate ? (0, _dayjs.default)(endDate).format(displayFormat) : null;
     var displayValue = allowRange ? "".concat(startDateFormatted).concat(endDateFormatted && endDateFormatted !== startDateFormatted ? " to ".concat(endDateFormatted) : "") : value ? (0, _dayjs.default)(value).format(displayFormat) : "";
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Popover, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Popover.default, {
         active: showPopover,
         activatorDisplayType: "block",
         maxWidth: "datePicker",
@@ -499,7 +504,7 @@ var getDateRange = function(param) {
             onClick: function() {
                 return setShowPopover(!showPopover);
             },
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.TextField, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
                 label: label,
                 labelAction: labelAction,
                 value: displayValue,