@heymantle/litho 0.0.3 → 0.0.4

package/dist/cjs/tailwind.config.js

@@ -0,0 +1,17 @@
+/** @type {import('tailwindcss').Config} */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+var _default = {
+    content: [
+        "./components/**/*.{js,jsx,ts,tsx}",
+        "./stories/**/*.{js,jsx,ts,tsx,mdx}",
+        "./.storybook/**/*.{js,jsx,ts,tsx}"
+    ]
+};

package/dist/cjs/utilities/transformers.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get extractComponents () {
+        return extractComponents;
+    },
+    get extractRenderContent () {
+        return extractRenderContent;
+    },
+    get transformStorySource () {
+        return transformStorySource;
+    }
+});
+var transformStorySource = function(code) {
+    // Look for render function and extract its content
+    // This regex looks for render: () => and captures everything until the next comma or end of string
+    var renderMatch = code.match(/render:\s*\(\)\s*=>\s*([\s\S]*?)(?=,\s*parameters|,\s*args|$)/);
+    if (renderMatch) {
+        var jsxContent = renderMatch[1].trim();
+        // Handle different ways the JSX might end
+        // Remove trailing semicolon only if it's the very last character
+        if (jsxContent.endsWith(';')) {
+            jsxContent = jsxContent.slice(0, -1).trim();
+        }
+        // If the content is wrapped in parentheses, remove them
+        if (jsxContent.startsWith('(') && jsxContent.endsWith(')')) {
+            jsxContent = jsxContent.slice(1, -1).trim();
+        }
+        return jsxContent;
+    }
+    return code;
+};
+var extractComponents = function(componentName) {
+    return function(code) {
+        var componentRegex = new RegExp("<".concat(componentName, "[^>]*>[\\s\\S]*?<\\/").concat(componentName, ">"), 'g');
+        var matches = code.match(componentRegex);
+        if (matches) {
+            return matches.join('\n\n');
+        }
+        return code;
+    };
+};
+var extractRenderContent = function(code) {
+    var renderMatch = code.match(/render:\s*\(\)\s*=>\s*([\s\S]*?)(?=,\s*parameters|,\s*args|$)/);
+    if (renderMatch) {
+        var jsxContent = renderMatch[1].trim();
+        // Remove trailing semicolon
+        if (jsxContent.endsWith(';')) {
+            jsxContent = jsxContent.slice(0, -1).trim();
+        }
+        // Remove wrapper parentheses
+        if (jsxContent.startsWith('(') && jsxContent.endsWith(')')) {
+            jsxContent = jsxContent.slice(1, -1).trim();
+        }
+        return jsxContent;
+    }
+    return code;
+};

package/dist/cjs/vite.config.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+var _vite = require("vite");
+var _pluginreact = /*#__PURE__*/ _interop_require_default(require("@vitejs/plugin-react"));
+var _postcss = /*#__PURE__*/ _interop_require_default(require("@tailwindcss/postcss"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+var _default = (0, _vite.defineConfig)({
+    plugins: [
+        (0, _pluginreact.default)()
+    ],
+    esbuild: {
+        loader: 'jsx',
+        include: /src\/.*\.[jt]sx?$/,
+        exclude: []
+    },
+    optimizeDeps: {
+        esbuildOptions: {
+            loader: {
+                '.js': 'jsx'
+            }
+        }
+    }
+});

package/dist/esm/components/ActionList.js

@@ -2,7 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useRef } from "react";
 import { tv } from "tailwind-variants";
-import { Icon, Text, Tooltip } from "../index.js";
+import Icon from "./Icon.js";
+import Text from "./Text.js";
+import Tooltip from "./Tooltip.js";
 import { MobileHorizontalDotsMajor } from "@shopify/polaris-icons";
 var styles = tv({
     base: "Litho-ActionList",
@@ -43,18 +45,38 @@ var itemStyles = tv({
     }
 });
 /**
+ * @typedef {Object} SecondaryAction
+ * @property {React.FunctionComponent<React.SVGProps<SVGSVGElement>>} icon - The icon to display for the secondary action.
+ * @property {string} tooltip - The tooltip to display for the secondary action.
+ * @property {function} onAction - The function to call when the secondary action is selected.
+ */ /**
+ * @typedef {Object} ActionListSection
+ * @property {string} title - The title of the section.
+ * @property {Array<ActionListItem>} items - The items to display in the section.
+ */ /**
+ * @typedef {Object} ActionListItem - An object representing an item in the action list.
+ * @property {string} content - The text content of the action item.
+ * @property {boolean} disabled - Whether the action item is disabled.
+ * @property {boolean} destructive - Whether the action item is destructive.
+ * @property {React.FunctionComponent<React.SVGProps<SVGSVGElement>>} icon - The icon to display for the action item.
+ * @property {function} onAction - The function to call when the action item is selected.
+ * @property {React.ReactNode} prefix - The prefix to display for the action item.
+ * @property {string} imageUrl - The image to display for the action item.
+ * @property {string} url - The URL to navigate to when the action item is selected.
+ * @property {SecondaryAction} secondaryAction - The secondary action to display for the action item.
+ */ /**
  * ActionList component renders a list of actionable items with optional sections.
  * Supports keyboard navigation and action triggers on item selection.
  *
  * @component
  * @param {Object} props - Component properties.
- * @param {Array} [props.sections] - Sections containing items for the action list.
- * Each section has a title and a list of items.
- * @param {Array} [props.items] - List of items to render in the action list when no sections are provided.
+ * @param {Array<{title: string, items: Array<ActionListItem>}>} [props.sections] - Sections containing items for the action list.
+ * @param {Array<ActionListItem>} [props.items] - List of items to render in the action list when no sections are provided.
  * @param {string} [props.iconColor="subdued"] - Default color for icons in the action items.
  * @param {function} [props.onActionAnyItem] - Callback function invoked whenever any action item is selected.
  * @param {boolean} [props.fullWidth=false] - Whether to apply full width styling to the action list.
- * @param {boolean} [props.showSecondaryAction=false] - Whether to show the secondary action icon.
+ * @param {boolean} [props.padded=true] - Whether to apply padding to the action list.
+ * @param {string} [props.className] - Additional CSS classes to apply to the action list.
  * @example
  * const items = [{ content: 'Item 1', onAction: () => {} }];
  * <ActionList items={items} />
@@ -113,7 +135,7 @@ var itemStyles = tv({
     }
     var ActionListItem = function(param) {
         var item = param.item, index = param.index;
-        var content = item.content, disabled = item.disabled, destructive = item.destructive, icon = item.icon, onAction = item.onAction, prefix = item.prefix, imageUrl = item.imageUrl, url = item.url, secondaryAction = item.secondaryAction;
+        var content = item.content, description = item.description, disabled = item.disabled, destructive = item.destructive, icon = item.icon, onAction = item.onAction, prefix = item.prefix, imageUrl = item.imageUrl, url = item.url, secondaryAction = item.secondaryAction;
         var iconColor = disabled ? "disabled" : destructive ? "critical" : _iconColor;
         var textColor = disabled ? "disabled" : destructive ? "critical" : "default";
         var itemClasses = itemStyles({
@@ -164,13 +186,20 @@ var itemStyles = tv({
                         className: "w-5 h-5 rounded-sm"
                     })
                 }) : null,
-                /*#__PURE__*/ _jsx("div", {
+                /*#__PURE__*/ _jsxs("div", {
                     className: "flex-1",
-                    children: /*#__PURE__*/ _jsx(Text, {
-                        color: textColor,
-                        truncate: true,
-                        children: content
-                    })
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            color: textColor,
+                            truncate: true,
+                            children: content
+                        }),
+                        description && /*#__PURE__*/ _jsx(Text, {
+                            color: "subdued",
+                            variant: "bodySm",
+                            children: description
+                        })
+                    ]
                 }),
                 (secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.tooltip) ? /*#__PURE__*/ _jsx(Tooltip, {
                     content: secondaryAction.tooltip,

package/dist/esm/components/AnnouncementBar.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { tv } from "tailwind-variants";
-import { Text, Icon } from "../index.js";
+import Text from "./Text.js";
+import Icon from "./Icon.js";
 var styles = tv({
     base: "Litho-AnnouncementBar text-center p-2 min-h-10 flex items-center justify-center bg-brand",
     variants: {
@@ -29,6 +30,7 @@ var iconContainerStyles = tv({
  * @param {string} props.content - Text content to be displayed.
  * @param {string} [props.icon] - Icon source name.
  * @param {"bounce"} [props.animateIcon] - Animation type for the icon.
+ * @param {boolean} [props.fixed] - Whether to fix the announcement bar to the top of the page.
  *
  * @returns {JSX.Element} AnnouncementBar component.
  */ function AnnouncementBar() {

package/dist/esm/components/AppProvider.js

@@ -57,7 +57,16 @@ import React, { createContext, useState, useEffect, useContext } from "react";
 /**
  * @returns {DarkModeContextType}
  */ export var useDarkMode = function() {
-    return useContext(DarkModeContext);
+    var context = useContext(DarkModeContext);
+    if (!context) {
+        return {
+            darkModeAvailable: false,
+            darkMode: false,
+            toggleDarkMode: function() {},
+            setDarkModeAvailable: function() {}
+        };
+    }
+    return context;
 };
 export var FrameContext = /*#__PURE__*/ createContext({
     embedded: false,

package/dist/esm/components/Autocomplete.js

@@ -112,7 +112,12 @@ function _unsupported_iterable_to_array(o, minLen) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { cloneElement, isValidElement, useState } from "react";
 import { tv } from "tailwind-variants";
-import { Popover, TextField, Checkbox, Spinner, Text, Icon } from "../index.js";
+import Popover from "./Popover.js";
+import TextField from "./TextField.js";
+import Checkbox from "./Checkbox.js";
+import Spinner from "./Spinner.js";
+import Text from "./Text.js";
+import Icon from "./Icon.js";
 import { SearchMinor } from "@shopify/polaris-icons";
 var styles = tv({
     base: "Litho-Autocomplete flex flex-col"
@@ -134,18 +139,30 @@ function attachPropToTextField(children, prop) {
     });
 }
 /**
+ * @typedef {Object} AutocompleteOption
+ * @property {string} label - The label to display for the option.
+ * @property {string} value - The value to associate with the option.
+ * @property {string} [title] - An optional title to display for the option.
+ * @property {boolean} [allowMultiple] - Whether multiple options can be selected.
+ * @property {string} [selected] - The value of the option that is currently selected.
+ * @property {function} [onSelect] - The function to call when the option is selected.
+ * @property {Array<AutocompleteOption>} [options] - An optional array of sub-options to display for the option.
+ */ /**
+ * @typedef {Object} AutocompleteEmptyState
+ * @property {string} content - The content to display in the empty state.
+ * @property {React.ReactNode} icon - An optional icon to display in the empty state.
+ */ /**
  * Autocomplete component that provides a flexible dropdown menu with search and selection capabilities.
  *
  * @component
  * @param {Object} props - The props for the Autocomplete component.
- * @param {Array<Object>} props.options - The options to display in the dropdown. Each option should have a `label` and a `value`.
+ * @param {Array<AutocompleteOption>} props.options - The options to display in the dropdown.
  * @param {Array<string>} props.selected - The currently selected option values.
  * @param {"below"|"above"} [props.preferredPosition="below"] - The preferred position of the dropdown relative to the activator.
  * @param {"left"|"center"|"right"} [props.preferredAlignment="left"] - The preferred alignment of the dropdown.
  * @param {boolean} [props.allowMultiple=false] - Whether multiple options can be selected.
  * @param {boolean} [props.loading=false] - Whether to show a loading spinner in the dropdown.
- * @param {Object} [props.emptyState] - The content to display when there are no options.
- * @param {React.ReactNode} [props.emptyState.icon] - An optional icon to display in the empty state.
+ * @param {AutocompleteEmptyState} [props.emptyState] - The content to display when there are no options.
  * @param {function(Array<string>)} props.onSelect - Callback fired when the selection changes. Receives the new selected values.
  * @param {React.ReactNode} props.textField - The activator for the dropdown, typically a `TextField` component.
  * @param {string} [props.className] - Additional class names to apply to the component.

package/dist/esm/components/Badge.js

@@ -187,7 +187,7 @@ var progressBadgeStyles = tv({
     }
 });
 /**
- * Badge component with optional progress indicator.
+ * A Badge component that renders a small, colored label with a status or progress indicator. The badge can be configured with different statuses, progress states, and sizes.
  *
  * @component
  * @param {object} props - Component properties.
@@ -195,6 +195,7 @@ var progressBadgeStyles = tv({
  * @param {"complete" | "incomplete" | "partiallyComplete" | null} [props.progress] - Progress state of the badge.
  * @param {boolean} [props.capitalize] - Capitalize the first letter of the badge.
  * @param {"default" | "info" | "success" | "warning" | "critical" | "attention" | "highlight"} [props.status="default"] - Status variant to style the badge.
+ * @param {string} [props.className] - Additional CSS classes to apply to the badge.
  * @returns {JSX.Element} - Rendered Badge component with optional progress indicator.
  */ function Badge() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
@@ -221,5 +222,4 @@ var progressBadgeStyles = tv({
         ]
     });
 }
-;
 export default Badge;

package/dist/esm/components/Banner.js

@@ -1,6 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { tv } from "tailwind-variants";
-import { Icon, Spinner, Text, Button, Link } from "../index.js";
+import Icon from "./Icon.js";
+import Spinner from "./Spinner.js";
+import Text from "./Text.js";
+import Button from "./Button.js";
+import Link from "./Link.js";
 import { CancelMinor, CircleAlertMajor, CircleInformationMajor, TickMinor } from "@shopify/polaris-icons";
 var styles = tv({
     base: "Litho-Banner relative rounded-md shadow-card bg-surface-highest outline outline-tint-3"
@@ -86,33 +90,28 @@ var STATUS_STYLES = {
 /**
  * @typedef {'neutral' | 'critical' | 'highlight' | 'success' | 'warning' | 'info' | 'caution' | 'attention'} BannerStatus
  */ /**
+ * @typedef BannerAction
+ * @property {string} content - The button label text
+ * @property {boolean} [primary=false] - Whether the button should have primary styling
+ * @property {boolean} [disabled=false] - Whether the button is disabled
+ * @property {boolean} [loading=false] - Whether to show a loading state
+ * @property {Function} [onAction] - Click handler for the action
+ * @property {string} [url] - URL to navigate to when clicked (opens in new tab)
+ */ /**
  * A Banner component that displays a styled banner with customizable title, status, icon, actions, and dismiss functionality.
  * The banner style and content change based on the provided props, allowing for various statuses and themes.
  *
  * @component
  *
  * @param {Object} props - The properties for configuring the Banner component.
- * @param {string} [props.title=null] - The title text for the banner. If not provided, no title will be displayed.
+ * @param {string} [props.title] - The title text for the banner. If not provided, no title will be displayed.
  * @param {BannerStatus} [props.status='neutral'] - The status of the banner, which determines its color and icon.
- * @param {Function} [props.onDismiss=null] - Callback function to handle the banner's dismiss action.
- * @param {React.ReactNode} [props.children=null] - Additional content to display within the banner.
- * @param {Object} [props.action=null] - Primary action configuration object
- * @param {string} props.action.content - The button label text
- * @param {boolean} [props.action.primary=false] - Whether the button should have primary styling
- * @param {boolean} [props.action.disabled=false] - Whether the button is disabled
- * @param {boolean} [props.action.loading=false] - Whether to show a loading state
- * @param {Function} [props.action.onAction] - Click handler for the action
- * @param {string} [props.action.url] - URL to navigate to when clicked (opens in new tab)
- * @param {Object} [props.secondaryAction=null] - Secondary action configuration object
- * @param {string} props.secondaryAction.content - The action label text
- * @param {boolean} [props.secondaryAction.link=false] - Whether to render as a link instead of a button
- * @param {boolean} [props.secondaryAction.monochrome=false] - Whether the link should be monochrome (only applies if link=true)
- * @param {boolean} [props.secondaryAction.disabled=false] - Whether the action is disabled
- * @param {boolean} [props.secondaryAction.loading=false] - Whether to show a loading state
- * @param {Function} [props.secondaryAction.onAction] - Click handler for the action
- * @param {string} [props.secondaryAction.url] - URL to navigate to when clicked (opens in new tab)
- * @param {FunctionComponent} [props.icon=null] - Custom icon to display on the banner. If not provided, a default icon is used based on the status.
- * @param {boolean} [props.spinner=false] - Shows a spinner icon instead of a status icon when set to true.
+ * @param {Function} [props.onDismiss] - Callback function to handle the banner's dismiss action.
+ * @param {React.ReactNode} [props.children] - Additional content to display within the banner.
+ * @param {BannerAction} [props.action] - Primary action configuration object
+ * @param {BannerAction} [props.secondaryAction] - Secondary action configuration object
+ * @param {FunctionComponent} [props.icon] - Custom icon to display on the banner. If not provided, a default icon is used based on the status.
+ * @param {boolean} [props.spinner] - Shows a spinner icon instead of a status icon when set to true.
  *
  * @returns {JSX.Element} The rendered Banner component.
  *

package/dist/esm/components/Box.js

@@ -187,9 +187,11 @@ var styles = tv({
  * @param {number | string} [props.maxWidth] - Maximum CSS width.
  * @param {number | string} [props.zIndex] - CSS z-index.
  * @param {Object} [props.style] - Additional inline styles for the Box.
+ * @param {string} [props.className] - Additional CSS classes to apply to the Box.
+ * @param {Function} [props.onClick] - Click handler for the Box.
  * 
  * @returns {JSX.Element} A rendered Box component with customized styling.
-*/ function Box() {
+*/ var Box = function() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var _props_as = props.as, as = _props_as === void 0 ? 'div' : _props_as, background = props.background, borderColor = props.borderColor, borderBlockStartWidth = props.borderBlockStartWidth, borderBlockEndWidth = props.borderBlockEndWidth, borderInlineStartWidth = props.borderInlineStartWidth, borderInlineEndWidth = props.borderInlineEndWidth, borderRadius = props.borderRadius, children = props.children, id = props.id, height = props.height, width = props.width, minHeight = props.minHeight, maxHeight = props.maxHeight, minWidth = props.minWidth, maxWidth = props.maxWidth, overflow = props.overflow, overflowX = props.overflowX, overflowY = props.overflowY, padding = props.padding, paddingBlockStart = props.paddingBlockStart, paddingBlockEnd = props.paddingBlockEnd, paddingInlineStart = props.paddingInlineStart, paddingInlineEnd = props.paddingInlineEnd, position = props.position, zIndex = props.zIndex, onClick = props.onClick, style = props.style, className = props.className;
     var classes = styles({
@@ -226,13 +228,12 @@ var styles = tv({
         maxWidth: maxWidth
     });
     var Element = as;
-    return /*#__PURE__*/ _jsx(Element, {
+    return /*#__PURE__*/ _jsx("div", {
         id: id,
         className: "".concat(classes).concat(className ? " ".concat(className) : ""),
         style: inlineStyles,
         onClick: onClick,
         children: children
     });
-}
-;
+};
 export default Box;

package/dist/esm/components/Button.js

@@ -128,9 +128,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useContext, useMemo, useState } from "react";
 import { tv } from "tailwind-variants";
 import { ButtonGroupContext } from "./ButtonGroup.js";
-import { ActionList, Icon, Popover, Spinner, Tooltip } from "../index.js";
+import ActionList from "./ActionList.js";
+import Icon from "./Icon.js";
+import Popover from "./Popover.js";
+import Spinner from "./Spinner.js";
+import Tooltip from "./Tooltip.js";
 import { CaretDownMinor } from "@shopify/polaris-icons";
-import { DarkModeContext } from "./AppProvider.js";
+import { useDarkMode } from "./AppProvider.js";
 var styles = tv({
     base: "Litho-Button relative flex items-center justify-center rounded-md border border-transparent overflow-hidden",
     variants: {
@@ -173,6 +177,7 @@ var styles = 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"
@@ -445,12 +450,18 @@ var contentStyles = tv({
             false: ""
         },
         size: {
+            mini: "p-0",
             small: "py-0.5",
             large: "py-3",
             medium: "py-1"
         }
     },
     compoundVariants: [
+        {
+            size: "mini",
+            iconOnly: true,
+            class: "!px-0"
+        },
         {
             size: "small",
             iconOnly: true,
@@ -700,7 +711,7 @@ var connectedDisclosureStyles = 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 {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.
@@ -708,12 +719,12 @@ var connectedDisclosureStyles = 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 {"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 {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.
@@ -723,12 +734,15 @@ var connectedDisclosureStyles = 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
@@ -738,8 +752,10 @@ var connectedDisclosureStyles = tv({
  * >
  *   Save changes
  * </Button>
+ * ```
  *
  * @example
+ * ```js
  * // Button with connected disclosure
  * <Button
  *   connectedDisclosure={{
@@ -751,9 +767,10 @@ var connectedDisclosureStyles = tv({
  * >
  *   More actions
  * </Button>
+ * ```
  */ function Button() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var darkMode = useContext(DarkModeContext).darkMode;
+    var darkMode = useDarkMode().darkMode;
     var _useState = _sliced_to_array(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, [
         "id",

package/dist/esm/components/Card.js

@@ -4,14 +4,14 @@ function _type_of(obj) {
     return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
 }
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useContext } from "react";
+import React from "react";
 import { tv } from "tailwind-variants";
-import { FrameContext } from "./AppProvider.js";
 import Button from "./Button.js";
 import Icon from "./Icon.js";
 import Spinner from "./Spinner.js";
 import Text from "./Text.js";
 import Tooltip from "./Tooltip.js";
+import { useFrame } from "./Frame.js";
 var styles = tv({
     base: "Litho-Card relative",
     variants: {
@@ -173,7 +173,7 @@ var bodyStyles = 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 = useContext(FrameContext).embedded;
+    var embedded = useFrame().embedded;
     var showHeader = !!(title || action);
     var isClickable = !!onClick;
     var classes = styles({
@@ -198,7 +198,8 @@ var bodyStyles = tv({
         var firstSectionDetected = false;
         function process(child) {
             if (/*#__PURE__*/ React.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.cloneElement(child, {
                         isFirst: true,

package/dist/esm/components/Checkbox.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { tv } from "tailwind-variants";
-import { Icon, Label, Text } from "../index.js";
+import Icon from "./Icon.js";
+import Label from "./Label.js";
+import Text from "./Text.js";
 import { TickMinor, MinusMajor } from "@shopify/polaris-icons";
 var styles = tv({
     base: "Litho-Checkbox group flex gap-2 py-1",
@@ -61,6 +63,9 @@ var checkboxStyles = 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.

package/dist/esm/components/ChoiceList.js

@@ -36,6 +36,12 @@ var styles = 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
@@ -44,10 +50,7 @@ var styles = 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/esm/components/ColorField.js

@@ -49,7 +49,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { SketchPicker } from "react-color";
 import { tv } from "tailwind-variants";
-import { Text } from "../index.js";
+import Text from "./Text.js";
 var colorContainer = tv({
     base: "Litho-ColorField relative flex items-center gap-2 cursor-pointer px-1 py-1 rounded-md w-full-plus-2 -left-1",
     variants: {

package/dist/esm/components/DatePicker.js

@@ -118,7 +118,12 @@ import { useEffect, useState } from "react";
 import { tv } from "tailwind-variants";
 import dayjs from "dayjs";
 import ReactDatePicker from "react-datepicker";
-import { Icon, Listbox, Popover, Text, TextField, TimePicker } from "../index.js";
+import Icon from "./Icon.js";
+import Listbox from "./Listbox.js";
+import Popover from "./Popover.js";
+import Text from "./Text.js";
+import TextField from "./TextField.js";
+import TimePicker from "./TimePicker.js";
 import { CalendarMinor, CalendarTimeMinor, ChevronLeftMinor, ChevronRightMinor } from "@shopify/polaris-icons";
 import { enUS } from "date-fns/locale";
 import { NOW_TODAY, DAY_FORMAT, DAY_TIME_FORMAT, TIME_FORMAT, MONTHS, RANGE_PRESETS, HOURLY_RANGE_PRESETS, DATE_LOCALE_MAP, isValidDate } from "../utilities/dates.js";