@heymantle/litho 0.0.9 → 0.0.12

package/dist/cjs/utilities/useTabStorage.js

@@ -0,0 +1,325 @@
+"use client";
+"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 default () {
+        return _default;
+    },
+    get useTabStorage () {
+        return useTabStorage;
+    }
+});
+var _react = require("react");
+var _usePaneState = require("./usePaneState");
+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];
+    return arr2;
+}
+function _array_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array(arr);
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _iterable_to_array(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+function _non_iterable_spread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function _to_consumable_array(arr) {
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+function useTabStorage() {
+    var orgId = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : null;
+    // Use a default orgId if none is provided to ensure functionality works
+    var currentOrgId = orgId || 'default';
+    var _usePaneState1 = (0, _usePaneState.usePaneState)(currentOrgId), paneState = _usePaneState1.state, setPaneTabs = _usePaneState1.setTabs, setPaneActiveTabId = _usePaneState1.setActiveTabId, setPaneCollapsed = _usePaneState1.setCollapsed;
+    // Use paneState directly - no need for local state or sync logic
+    var tabs = Array.isArray(paneState.tabs) ? paneState.tabs : [];
+    var activeTabId = paneState.activeTabId || null;
+    // Helper to dispatch change event (for backward compatibility)
+    var notifyTabChange = (0, _react.useCallback)(function() {
+        window.dispatchEvent(new CustomEvent('litho-pane-tabs-changed'));
+    }, []);
+    // Add a new tab
+    var addTab = (0, _react.useCallback)(function(tabData) {
+        if (!setPaneTabs || !setPaneActiveTabId) {
+            console.warn('Cannot add tab: orgId is required');
+            return null;
+        }
+        var resultTabId = null;
+        // Use functional updater to check for duplicates and add tab atomically
+        setPaneTabs(function(prevTabs) {
+            var currentTabs = prevTabs || [];
+            // If an explicit ID is provided, check if a tab with that ID already exists
+            if (tabData.id) {
+                var existingTabById = currentTabs.find(function(tab) {
+                    return tab.id === tabData.id;
+                });
+                if (existingTabById) {
+                    resultTabId = existingTabById.id;
+                    return currentTabs; // Return unchanged - tab already exists
+                }
+            }
+            // Create new tab
+            var newTab = _object_spread({
+                id: tabData.id || "tab-".concat(Date.now(), "-").concat(Math.random().toString(36).substring(2, 11)),
+                title: tabData.title,
+                subtitle: tabData.subtitle,
+                content: tabData.content,
+                header: tabData.header,
+                footer: tabData.footer,
+                actions: tabData.actions || [],
+                createdAt: Date.now()
+            }, tabData);
+            resultTabId = newTab.id;
+            return _to_consumable_array(currentTabs).concat([
+                newTab
+            ]);
+        });
+        // Set active tab ID if a new tab was created
+        if (resultTabId) {
+            setPaneActiveTabId(resultTabId);
+            notifyTabChange();
+        }
+        return resultTabId;
+    }, [
+        setPaneTabs,
+        setPaneActiveTabId,
+        notifyTabChange
+    ]);
+    // Remove a tab
+    var removeTab = (0, _react.useCallback)(function(tabId) {
+        if (!setPaneTabs || !setPaneActiveTabId) {
+            console.warn('Cannot remove tab: orgId is required');
+            return;
+        }
+        var removedTabIndex = tabs.findIndex(function(tab) {
+            return tab.id === tabId;
+        });
+        var tabsAfterRemoval = tabs.filter(function(tab) {
+            return tab.id !== tabId;
+        });
+        setPaneTabs(tabsAfterRemoval);
+        // Handle tab switching if the removed tab was the active tab
+        if (activeTabId === tabId && removedTabIndex >= 0) {
+            var newActiveIndex = removedTabIndex > 0 ? removedTabIndex - 1 : 0;
+            var newActiveTab = tabsAfterRemoval[newActiveIndex];
+            setPaneActiveTabId(newActiveTab ? newActiveTab.id : null);
+        }
+        notifyTabChange();
+    }, [
+        tabs,
+        activeTabId,
+        setPaneTabs,
+        setPaneActiveTabId,
+        notifyTabChange
+    ]);
+    // Set active tab
+    var setActiveTab = (0, _react.useCallback)(function(tabId) {
+        if (!setPaneActiveTabId) {
+            console.warn('Cannot set active tab: orgId is required');
+            return;
+        }
+        setPaneActiveTabId(tabId);
+        notifyTabChange();
+    }, [
+        setPaneActiveTabId,
+        notifyTabChange
+    ]);
+    // Update a tab's properties
+    var updateTab = (0, _react.useCallback)(function(tabId, updates) {
+        if (!setPaneTabs) {
+            console.warn('Cannot update tab: orgId is required');
+            return;
+        }
+        setPaneTabs(function(prevTabs) {
+            return prevTabs.map(function(tab) {
+                return tab.id === tabId ? _object_spread({}, tab, updates) : tab;
+            });
+        });
+        notifyTabChange();
+    }, [
+        setPaneTabs,
+        notifyTabChange
+    ]);
+    // Clear all tabs (useful for scope switching if needed)
+    var clearAllTabs = (0, _react.useCallback)(function() {
+        if (!setPaneTabs || !setPaneActiveTabId) {
+            console.warn('Cannot clear tabs: orgId is required');
+            return;
+        }
+        setPaneTabs([]);
+        setPaneActiveTabId(null);
+        notifyTabChange();
+    }, [
+        setPaneTabs,
+        setPaneActiveTabId,
+        notifyTabChange
+    ]);
+    /**
+   * Attempts to expand the pane using multiple strategies to ensure it works
+   * regardless of timing issues with React state updates
+   * @param {Object} tabStorageInstance - The tabStorage instance (for accessing expandPaneRef)
+   */ var attemptExpandPane = (0, _react.useCallback)(function(tabStorageInstance) {
+        if (!tabStorageInstance) return;
+        var expandPane = function() {
+            var _tabStorageInstance_expandPaneRef_current, _tabStorageInstance_expandPaneRef;
+            (_tabStorageInstance_expandPaneRef = tabStorageInstance.expandPaneRef) === null || _tabStorageInstance_expandPaneRef === void 0 ? void 0 : (_tabStorageInstance_expandPaneRef_current = _tabStorageInstance_expandPaneRef.current) === null || _tabStorageInstance_expandPaneRef_current === void 0 ? void 0 : _tabStorageInstance_expandPaneRef_current.call(_tabStorageInstance_expandPaneRef);
+        };
+        // Try immediate expansion first (in case ref is ready)
+        expandPane();
+        // Then try after next frame (ensures React has updated)
+        if (typeof window !== 'undefined' && window.requestAnimationFrame) {
+            requestAnimationFrame(function() {
+                expandPane();
+                // Also try after another frame as backup
+                requestAnimationFrame(expandPane);
+            });
+        }
+        // Also try with setTimeout as additional fallback
+        setTimeout(expandPane, 0);
+    }, []);
+    /**
+   * Generic helper: find existing tab by predicate, or create new one
+   * @param {function} predicate - Function to find existing tab
+   * @param {Object} tabData - Data for new tab if not found
+   * @param {Object} tabStorageInstance - The tabStorage instance (for accessing expandPaneRef)
+   * @returns {string|null} Tab ID (existing or newly created), or null if tabStorage is not available
+   */ var findOrCreateTab = (0, _react.useCallback)(function(predicate, tabData, tabStorageInstance) {
+        // Return null if tabStorage is not available
+        if (!setPaneTabs || !setPaneActiveTabId) {
+            return null;
+        }
+        var existing = tabs.find(predicate);
+        if (existing) {
+            setActiveTab(existing.id);
+            // Attempt to expand pane (expandPaneRef will be set by Pane component on tabStorage)
+            if (tabStorageInstance) {
+                attemptExpandPane(tabStorageInstance);
+            }
+            return existing.id;
+        }
+        // Create new tab
+        var newTabId = addTab(tabData);
+        // Attempt to expand pane after creating new tab
+        if (newTabId && tabStorageInstance) {
+            attemptExpandPane(tabStorageInstance);
+        }
+        return newTabId;
+    }, [
+        tabs,
+        addTab,
+        setActiveTab,
+        attemptExpandPane
+    ]);
+    /**
+   * Expands the pane if it's collapsed
+   * @param {Object} tabStorageInstance - The tabStorage instance (for accessing expandPaneRef)
+   * @returns {boolean} Whether the pane was expanded (true) or not (false)
+   */ var expandIfCollapsed = (0, _react.useCallback)(function(tabStorageInstance) {
+        var _tabStorageInstance_isCollapsed;
+        // Check isCollapsed from Pane component (source of truth)
+        var wasCollapsed = (_tabStorageInstance_isCollapsed = tabStorageInstance === null || tabStorageInstance === void 0 ? void 0 : tabStorageInstance.isCollapsed) !== null && _tabStorageInstance_isCollapsed !== void 0 ? _tabStorageInstance_isCollapsed : paneState.collapsed;
+        if (wasCollapsed) {
+            var _tabStorageInstance_expandPaneRef;
+            // Update state to match
+            setPaneCollapsed(false);
+            // Expand via ref if available
+            if (tabStorageInstance === null || tabStorageInstance === void 0 ? void 0 : (_tabStorageInstance_expandPaneRef = tabStorageInstance.expandPaneRef) === null || _tabStorageInstance_expandPaneRef === void 0 ? void 0 : _tabStorageInstance_expandPaneRef.current) {
+                tabStorageInstance.expandPaneRef.current();
+            }
+            return true;
+        }
+        return false;
+    }, [
+        paneState.collapsed,
+        setPaneCollapsed
+    ]);
+    // Create tabStorage instance with self-referencing methods
+    var tabStorageInstanceRef = (0, _react.useRef)(null);
+    var tabStorageInstance = (0, _react.useMemo)(function() {
+        var instance = {
+            tabs: tabs,
+            activeTabId: activeTabId,
+            addTab: addTab,
+            removeTab: removeTab,
+            setActiveTab: setActiveTab,
+            updateTab: updateTab,
+            clearAllTabs: clearAllTabs,
+            findOrCreateTab: function(predicate, tabData) {
+                // Use the ref to avoid circular dependency
+                var currentInstance = tabStorageInstanceRef.current || instance;
+                return findOrCreateTab(predicate, tabData, currentInstance);
+            },
+            attemptExpandPane: function() {
+                var currentInstance = tabStorageInstanceRef.current || instance;
+                attemptExpandPane(currentInstance);
+            },
+            expandIfCollapsed: function() {
+                var currentInstance = tabStorageInstanceRef.current || instance;
+                return expandIfCollapsed(currentInstance);
+            },
+            orgId: currentOrgId
+        };
+        tabStorageInstanceRef.current = instance;
+        return instance;
+    }, [
+        tabs,
+        activeTabId,
+        addTab,
+        removeTab,
+        setActiveTab,
+        updateTab,
+        clearAllTabs,
+        findOrCreateTab,
+        attemptExpandPane,
+        expandIfCollapsed,
+        currentOrgId
+    ]);
+    return tabStorageInstance;
+}
+var _default = useTabStorage;

package/dist/esm/components/Banner.js

@@ -5,7 +5,7 @@ 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";
+import { CancelMinor, CircleAlertMajor, CircleInformationMajor, MagicMajor, TickMinor } from "@shopify/polaris-icons";
 var styles = tv({
     base: "Litho-Banner relative rounded-md shadow-card bg-surface-highest outline outline-tint-3"
 });
@@ -153,10 +153,15 @@ var STATUS_STYLES = {
                             }),
                             !icon && !spinner && /*#__PURE__*/ _jsxs(_Fragment, {
                                 children: [
+                                    status === "insight" && /*#__PURE__*/ _jsx(Icon, {
+                                        source: MagicMajor,
+                                        color: statusColors.icon
+                                    }),
                                     ![
                                         "warning",
                                         "attention",
-                                        "success"
+                                        "success",
+                                        "insight"
                                     ].includes(status) && /*#__PURE__*/ _jsx(Icon, {
                                         source: CircleInformationMajor,
                                         color: statusColors.icon

package/dist/esm/components/Button.js

@@ -432,6 +432,23 @@ var styles = tv({
             highlight: true,
             loading: true,
             class: "bg-btn-highlight-disabled text-btn-highlight-disabled-fg"
+        },
+        // Insight buttons
+        {
+            insight: true,
+            disabled: false,
+            loading: false,
+            class: "bg-btn-insight hover:bg-btn-insight-low active:bg-btn-insight-lower text-btn-insight-fg hover:text-btn-insight-fg-alt border-btn-insight-border hover:border-btn-insight-border-low active:border-btn-insight-border-low\n        dark:outline-hidden dark:border-transparent dark:shadow-btn-dark dark:border-t-tint-alt-6 dark:hover:border-t-tint-alt-7 dark:active:border-t-tint-alt-8"
+        },
+        {
+            primary: true,
+            disabled: true,
+            class: "bg-btn-primary-disabled text-btn-primary-disabled-fg"
+        },
+        {
+            primary: true,
+            loading: true,
+            class: "bg-btn-primary-disabled text-btn-primary-disabled-fg"
         }
     ],
     defaultVariants: {
@@ -440,7 +457,8 @@ var styles = tv({
         insideButtonGroup: false,
         shadow: false,
         darkMode: false,
-        bordered: false
+        bordered: false,
+        insight: false
     }
 });
 var contentStyles = tv({
@@ -577,6 +595,10 @@ var textStyles = tv({
             true: "",
             false: ""
         },
+        insight: {
+            true: "",
+            false: ""
+        },
         naked: {
             true: "",
             false: ""
@@ -607,6 +629,7 @@ var textStyles = tv({
             plain: false,
             link: false,
             naked: false,
+            insight: false,
             class: "text-btn-secondary-fg"
         },
         {
@@ -745,7 +768,7 @@ var connectedDisclosureStyles = tv({
  * @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 {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 {"mini" | "small" | "medium" | "large" | "stepper"} [props.size='medium'] - Size of the button ('mini', 'small', 'medium', 'large', 'stepper').
  * @param {boolean} [props.fullWidth] - Whether the button should take full width.
  * @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.
@@ -801,7 +824,7 @@ var connectedDisclosureStyles = tv({
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     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_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, [
+    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_insight = props.insight, insight = _props_insight === void 0 ? false : _props_insight, _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",
@@ -827,6 +850,7 @@ var connectedDisclosureStyles = tv({
         "destructive",
         "disclosure",
         "disclosureRight",
+        "insight",
         "plain",
         "naked",
         "size",
@@ -855,9 +879,10 @@ var connectedDisclosureStyles = tv({
         link: "btn-link".concat(base),
         destructive: "btn-destructive".concat(base),
         highlight: "btn-highlight".concat(base),
+        insight: "btn-insight".concat(base),
         default: "btn-secondary".concat(base)
     };
-    var iconColor = iconColorMap[primary ? "primary" : plain ? "plain" : link ? "link" : destructive ? "destructive" : highlight ? "highlight" : "default"];
+    var iconColor = iconColorMap[primary ? "primary" : plain ? "plain" : link ? "link" : destructive ? "destructive" : highlight ? "highlight" : insight ? "insight" : "default"];
     var iconOnly = hasIcon && !hasChildren;
     var connectedDisclosureActions = (connectedDisclosure === null || connectedDisclosure === void 0 ? void 0 : connectedDisclosure.actions) || [];
     var showConnectedDisclosure = connectedDisclosure && connectedDisclosureActions.length > 0;
@@ -867,6 +892,7 @@ var connectedDisclosureStyles = tv({
         link: link,
         destructive: destructive,
         highlight: highlight,
+        insight: insight,
         insideButtonGroup: insideButtonGroup,
         loading: loading,
         disabled: disabled,
@@ -897,6 +923,7 @@ var connectedDisclosureStyles = tv({
         link: link,
         destructive: destructive,
         highlight: highlight,
+        insight: insight,
         pressed: pressed,
         loading: loading,
         disabled: disabled,
@@ -908,6 +935,7 @@ var connectedDisclosureStyles = tv({
         link: link,
         destructive: destructive,
         highlight: highlight,
+        insight: insight,
         loading: loading,
         disabled: disabled
     });
@@ -991,6 +1019,7 @@ var connectedDisclosureStyles = tv({
                     link: link,
                     destructive: destructive,
                     highlight: highlight,
+                    insight: insight,
                     icon: CaretDownMinor,
                     disclosureRight: true,
                     iconColor: _iconColor,

package/dist/esm/components/ButtonGroup.js

@@ -86,14 +86,26 @@ var styles = tv({
     variants: {
         segmented: {
             true: "Litho-ButtonGroup--Segmented",
-            false: "gap-2"
+            false: ""
         },
         noWrap: {
             true: "flex-nowrap"
         },
         fullWidth: {
             true: "Litho-ButtonGroup--FullWidth"
+        },
+        gap: {
+            "0": "gap-0",
+            "1": "gap-1",
+            "2": "gap-2",
+            "3": "gap-3",
+            "4": "gap-4",
+            "5": "gap-5",
+            "6": "gap-6"
         }
+    },
+    defaultVariants: {
+        gap: "2"
     }
 });
 export var ButtonGroupContext = /*#__PURE__*/ createContext(false);
@@ -111,18 +123,21 @@ export var ButtonGroupContext = /*#__PURE__*/ createContext(false);
  * @returns {JSX.Element} The rendered ButtonGroup component.
  */ function ButtonGroup() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var children = props.children, _props_segmented = props.segmented, segmented = _props_segmented === void 0 ? false : _props_segmented, id = props.id, className = props.className, _props_fullWidth = props.fullWidth, fullWidth = _props_fullWidth === void 0 ? false : _props_fullWidth, _props_noWrap = props.noWrap, noWrap = _props_noWrap === void 0 ? false : _props_noWrap, restProps = _object_without_properties(props, [
+    var children = props.children, _props_segmented = props.segmented, segmented = _props_segmented === void 0 ? false : _props_segmented, id = props.id, className = props.className, _props_fullWidth = props.fullWidth, fullWidth = _props_fullWidth === void 0 ? false : _props_fullWidth, _props_noWrap = props.noWrap, noWrap = _props_noWrap === void 0 ? false : _props_noWrap, tmp = props.gap, _gap = tmp === void 0 ? "2" : tmp, restProps = _object_without_properties(props, [
         "children",
         "segmented",
         "id",
         "className",
         "fullWidth",
-        "noWrap"
+        "noWrap",
+        "gap"
     ]);
+    var gap = segmented ? "0" : _gap;
     var classes = styles({
         segmented: segmented,
         noWrap: noWrap,
-        fullWidth: fullWidth
+        fullWidth: fullWidth,
+        gap: gap
     });
     return /*#__PURE__*/ _jsx(ButtonGroupContext.Provider, {
         value: segmented,

package/dist/esm/components/Card.js

@@ -414,7 +414,7 @@ var sectionBodyStyles = tv({
  *
  * @returns {React.ReactElement} The rendered Section component.
  */ Card.Section = function(param) {
-    var title = param.title, _param_titleVariant = param.titleVariant, titleVariant = _param_titleVariant === void 0 ? "headingSm" : _param_titleVariant, action = param.action, children = param.children, _param_padded = param.padded, padded = _param_padded === void 0 ? true : _param_padded, _param_paddedHalf = param.paddedHalf, paddedHalf = _param_paddedHalf === void 0 ? false : _param_paddedHalf, _param_isFirst = param.isFirst, isFirst = _param_isFirst === void 0 ? false : _param_isFirst, _param_cardHasHeader = param.cardHasHeader, cardHasHeader = _param_cardHasHeader === void 0 ? false : _param_cardHasHeader, _param_borderBottom = param.borderBottom, borderBottom = _param_borderBottom === void 0 ? true : _param_borderBottom, _param_borderTop = param.borderTop, borderTop = _param_borderTop === void 0 ? false : _param_borderTop, _param_subdued = param.subdued, subdued = _param_subdued === void 0 ? false : _param_subdued, _param_headerGap = param.headerGap, headerGap = _param_headerGap === void 0 ? "0" : _param_headerGap, _param_gap = param.gap, gap = _param_gap === void 0 ? "0" : _param_gap, icon = param.icon, tooltip = param.tooltip, description = param.description, accessory = param.accessory, _param_emptyState = param.emptyState, emptyState = _param_emptyState === void 0 ? {} : _param_emptyState, className = param.className;
+    var title = param.title, _param_titleVariant = param.titleVariant, titleVariant = _param_titleVariant === void 0 ? "headingSm" : _param_titleVariant, action = param.action, children = param.children, _param_padded = param.padded, padded = _param_padded === void 0 ? true : _param_padded, _param_paddedHalf = param.paddedHalf, paddedHalf = _param_paddedHalf === void 0 ? false : _param_paddedHalf, _param_isFirst = param.isFirst, isFirst = _param_isFirst === void 0 ? false : _param_isFirst, _param_cardHasHeader = param.cardHasHeader, cardHasHeader = _param_cardHasHeader === void 0 ? false : _param_cardHasHeader, _param_borderBottom = param.borderBottom, borderBottom = _param_borderBottom === void 0 ? true : _param_borderBottom, _param_borderTop = param.borderTop, borderTop = _param_borderTop === void 0 ? false : _param_borderTop, _param_subdued = param.subdued, subdued = _param_subdued === void 0 ? false : _param_subdued, _param_headerGap = param.headerGap, headerGap = _param_headerGap === void 0 ? "0" : _param_headerGap, _param_gap = param.gap, gap = _param_gap === void 0 ? "0" : _param_gap, icon = param.icon, tooltip = param.tooltip, description = param.description, accessory = param.accessory, _param_emptyState = param.emptyState, emptyState = _param_emptyState === void 0 ? {} : _param_emptyState, className = param.className, sectionBodyClassName = param.sectionBodyClassName;
     var showHeader = !!(title || action);
     var sectionClasses = sectionStyles({
         borderBottom: borderBottom,
@@ -484,7 +484,7 @@ var sectionBodyStyles = tv({
                 ]
             }),
             /*#__PURE__*/ _jsxs("div", {
-                className: sectionBodyClasses,
+                className: "".concat(sectionBodyClasses).concat(sectionBodyClassName ? " ".concat(sectionBodyClassName) : ""),
                 children: [
                     emptyState.showIf && /*#__PURE__*/ _jsx("div", {
                         className: paddedHalf ? "px-2 @md:px-2.5 pb-2" : !padded ? "px-4 @md:px-5 pb-4" : "",
@@ -501,7 +501,7 @@ var sectionBodyStyles = tv({
 };
 Card.Section.displayName = "Card.Section";
 var clickableRowStyles = tv({
-    base: "Litho-Card__ClickableRow flex py-1.5 px-2.5 cursor-pointer rounded-md hover:bg-tint-2 active:bg-tint-3",
+    base: "Litho-Card__Row py-1.5 px-2.5 cursor-pointer rounded-md hover:bg-tint-2 active:bg-tint-3",
     variants: {
         disabled: {
             true: "opacity-50 cursor-not-allowed pointer-events-none"
@@ -536,4 +536,40 @@ var clickableRowStyles = tv({
     });
 };
 Card.ClickableRow.displayName = "Card.ClickableRow";
+Card.Rows = function(param) {
+    var children = param.children;
+    return /*#__PURE__*/ _jsx("div", {
+        className: "px-1.5 pb-1.5 @md:pb-2 @md:px-2",
+        children: children
+    });
+};
+Card.Rows.displayName = "Card.Rows";
+/**
+ * Row component for creating clickable rows inside the Card.
+ *
+ * @component
+ * @param {Object} props - Props for the Row component.
+ * @param {React.ReactNode} [props.children] - Child elements to render inside the row.
+ * @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 Row component.
+ */ Card.Row = function(param) {
+    var children = param.children, onClick = param.onClick, id = param.id, url = param.url, _param_disabled = param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, className = param.className;
+    var classes = clickableRowStyles({
+        disabled: disabled
+    });
+    return /*#__PURE__*/ _jsx("div", {
+        id: id,
+        onClick: url ? function() {
+            return window.open(url, "_blank");
+        } : onClick,
+        className: "".concat(classes).concat(className ? " ".concat(className) : ""),
+        children: children
+    });
+};
+Card.Row.displayName = "Card.Row";
 export default Card;

package/dist/esm/components/Checkbox.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { tv } from "tailwind-variants";
+import { isValidElement } from "react";
 import Icon from "./Icon.js";
 import Label from "./Label.js";
 import Text from "./Text.js";
@@ -54,7 +55,7 @@ var checkboxStyles = tv({
  * @component
  *
  * @param {Object} props - Props for the Checkbox component.
- * @param {string} [props.label] - The text label for the checkbox.
+ * @param {string|React.ReactNode} [props.label] - The label for the checkbox. Can be a string or a React element (e.g., text with a badge).
  * @param {boolean} [props.labelHidden=false] - If true, hides the label visually but keeps it available for screen readers.
  * @param {string} [props.id] - The unique identifier for the checkbox input.
  * @param {string} [props.name] - The name attribute for the checkbox input.
@@ -73,6 +74,7 @@ var checkboxStyles = tv({
  * @returns {JSX.Element} The rendered Checkbox component.
  *
  * @example
+ * // Basic usage with string label
  * <Checkbox
  *   label="Accept Terms"
  *   id="accept-terms"
@@ -82,11 +84,20 @@ var checkboxStyles = tv({
  *   helpText="You must accept the terms to proceed."
  *   onChange={(e) => console.log('Checkbox changed:', e.target.checked)}
  * />
+ *
+ * @example
+ * // With React element label (e.g., text with badge)
+ * <Checkbox
+ *   label={<Stack horizontal gap="xs" blockAlign="center"><span>Premium Feature</span><Badge>Pro</Badge></Stack>}
+ *   checked={false}
+ *   onChange={(checked) => console.log('Checkbox changed:', checked)}
+ * />
  */ function Checkbox() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var label = props.label, tooltip = props.tooltip, labelHidden = props.labelHidden, id = props.id, name = props.name, value = props.value, error = props.error, tmp = props.checked, _checked = tmp === void 0 ? false : tmp, _props_indeterminate = props.indeterminate, indeterminate = _props_indeterminate === void 0 ? false : _props_indeterminate, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, helpText = props.helpText, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, className = props.className;
     var checked = !!_checked;
     var hasError = !!error;
+    var labelIsReactElement = /*#__PURE__*/ isValidElement(label);
     var classes = styles({
         disabled: disabled
     });
@@ -149,7 +160,7 @@ var checkboxStyles = tv({
                     label && !labelHidden && /*#__PURE__*/ _jsx(Label, {
                         tooltip: tooltip,
                         disabled: disabled,
-                        as: "p",
+                        as: labelIsReactElement ? "div" : "p",
                         children: label
                     })
                 ]