@heymantle/litho 0.0.9 → 0.0.12

package/dist/cjs/components/ResourceList.js

@@ -11,7 +11,7 @@ Object.defineProperty(exports, "default", {
 var _jsxruntime = require("react/jsx-runtime");
 var _tailwindvariants = require("tailwind-variants");
 var _Spinner = /*#__PURE__*/ _interop_require_default(require("./Spinner"));
-var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("./VerticalStack"));
+var _Stack = /*#__PURE__*/ _interop_require_default(require("./Stack"));
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -52,7 +52,7 @@ var styles = (0, _tailwindvariants.tv)({
         small: "2",
         large: "4"
     };
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
         gap: gapMap[gap],
         className: styles({
             divider: divider

package/dist/cjs/components/TabNavigation.js

@@ -0,0 +1,300 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _react = require("react");
+var _polarisicons = require("@shopify/polaris-icons");
+var _tailwindvariants = require("tailwind-variants");
+var _Button = /*#__PURE__*/ _interop_require_default(require("./Button"));
+var _Text = /*#__PURE__*/ _interop_require_default(require("./Text"));
+var _Spinner = /*#__PURE__*/ _interop_require_default(require("./Spinner"));
+var _Tooltip = /*#__PURE__*/ _interop_require_default(require("./Tooltip"));
+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_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;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+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);
+}
+var AVG_CHAR_WIDTH = 5.5;
+var tabStyles = (0, _tailwindvariants.tv)({
+    base: "relative group cursor-pointer rounded-t-sm items-center px-2 pt-2 gap-0.5 overflow-hidden min-w-[60px] max-w-[160px] pointer-coarse:pb-1 pointer-coarse:pt-3 transition-colors",
+    variants: {
+        isActive: {
+            true: "bg-surface-lowest",
+            false: "bg-transparent hover:bg-surface-lower"
+        }
+    },
+    defaultVariants: {
+        isActive: false
+    }
+});
+var textStyles = (0, _tailwindvariants.tv)({
+    base: "leading-none break-all",
+    variants: {
+        isActive: {
+            true: "",
+            false: "text-low"
+        }
+    }
+});
+var gradientOverlayStyles = (0, _tailwindvariants.tv)({
+    base: "sm:opacity-0 sm:group-hover:opacity-100 transition-opacity absolute pointer-events-none pointer-coarse:hidden",
+    variants: {
+        isActive: {
+            true: "bg-surface-lowest",
+            false: "bg-surface-lower"
+        }
+    }
+});
+// Component to handle truncation detection and tooltip
+function TabTitle(param) {
+    var title = param.title, isActive = param.isActive, tabContainerRef = param.tabContainerRef;
+    var _useState = _sliced_to_array((0, _react.useState)(false), 2), shouldShowTooltip = _useState[0], setShouldShowTooltip = _useState[1];
+    (0, _react.useLayoutEffect)(function() {
+        if (!title || !(tabContainerRef === null || tabContainerRef === void 0 ? void 0 : tabContainerRef.current)) {
+            setShouldShowTooltip(false);
+            return;
+        }
+        var checkOverflow = function() {
+            if (!(tabContainerRef === null || tabContainerRef === void 0 ? void 0 : tabContainerRef.current)) return;
+            var tabElement = tabContainerRef.current;
+            if (!tabElement) return;
+            // Get the actual tab width
+            var tabWidth = tabElement.offsetWidth;
+            var estimatedCharCapacity = Math.floor(tabWidth / AVG_CHAR_WIDTH);
+            // Show tooltip if title length exceeds estimated capacity
+            setShouldShowTooltip(title.length > estimatedCharCapacity);
+        };
+        var resizeObserver = null;
+        // Use requestAnimationFrame to ensure DOM is ready
+        var rafId = requestAnimationFrame(function() {
+            checkOverflow();
+            // Watch for size changes
+            if (tabContainerRef === null || tabContainerRef === void 0 ? void 0 : tabContainerRef.current) {
+                resizeObserver = new ResizeObserver(checkOverflow);
+                resizeObserver.observe(tabContainerRef.current);
+            }
+        });
+        return function() {
+            cancelAnimationFrame(rafId);
+            if (resizeObserver) {
+                resizeObserver.disconnect();
+            }
+        };
+    }, [
+        title,
+        tabContainerRef
+    ]);
+    var textElement = /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        className: "overflow-hidden",
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+            variant: "bodyXs",
+            className: textStyles({
+                isActive: isActive
+            }),
+            clampLines: 1,
+            children: title
+        })
+    });
+    // Only show tooltip if text is likely truncated based on character count vs tab width
+    if (shouldShowTooltip) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tooltip.default, {
+            content: title,
+            className: "align-top",
+            children: textElement
+        });
+    }
+    return textElement;
+}
+function TabNavigation() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var _props_tabs = props.tabs, tabs = _props_tabs === void 0 ? [] : _props_tabs, activeTabId = props.activeTabId, onTabClick = props.onTabClick, onTabClose = props.onTabClose, _props_className = props.className, className = _props_className === void 0 ? "" : _props_className;
+    var scrollContainerRef = (0, _react.useRef)(null);
+    var tabRefsMap = (0, _react.useRef)(new Map());
+    // Function to scroll the active tab into view and center it
+    var scrollToActiveTab = (0, _react.useCallback)(function() {
+        if (!scrollContainerRef.current || !activeTabId) return;
+        var container = scrollContainerRef.current;
+        var activeTabElement = container.querySelector('[data-tab-id="'.concat(activeTabId, '"]'));
+        if (!activeTabElement) return;
+        // Calculate the scroll position to center the tab
+        var tabOffsetLeft = activeTabElement.offsetLeft;
+        var tabWidth = activeTabElement.offsetWidth;
+        var containerWidth = container.offsetWidth;
+        // Center the tab in the container: position of tab - (container width - tab width) / 2
+        var scrollLeft = tabOffsetLeft - (containerWidth - tabWidth) / 2;
+        // Calculate max scroll to prevent over-scrolling
+        var maxScroll = container.scrollWidth - containerWidth;
+        container.scrollTo({
+            left: Math.max(0, Math.min(scrollLeft, maxScroll)),
+            behavior: 'smooth'
+        });
+    }, [
+        activeTabId
+    ]);
+    // Scroll to active tab when it changes or when tabs are updated
+    (0, _react.useEffect)(function() {
+        if (!activeTabId || tabs.length === 0) return;
+        // Use double requestAnimationFrame to ensure DOM is fully updated and rendered
+        requestAnimationFrame(function() {
+            requestAnimationFrame(function() {
+                scrollToActiveTab();
+            });
+        });
+    }, [
+        activeTabId,
+        tabs,
+        scrollToActiveTab
+    ]);
+    // Clean up refs for removed tabs
+    (0, _react.useEffect)(function() {
+        var currentTabIds = new Set(tabs.map(function(tab) {
+            return tab.id;
+        }));
+        var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+        try {
+            for(var _iterator = tabRefsMap.current[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+                var _step_value = _sliced_to_array(_step.value, 1), tabId = _step_value[0];
+                if (!currentTabIds.has(tabId)) {
+                    tabRefsMap.current.delete(tabId);
+                }
+            }
+        } catch (err) {
+            _didIteratorError = true;
+            _iteratorError = err;
+        } finally{
+            try {
+                if (!_iteratorNormalCompletion && _iterator.return != null) {
+                    _iterator.return();
+                }
+            } finally{
+                if (_didIteratorError) {
+                    throw _iteratorError;
+                }
+            }
+        }
+    }, [
+        tabs
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        className: "Litho-TabNavigation ".concat(className),
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+            ref: scrollContainerRef,
+            className: "scroll-container flex overflow-x-scroll overflow-y-hidden items-center px-1 pt-1 w-full gap-0.5 bg-tint-2",
+            children: tabs.map(function(tab) {
+                var isActive = activeTabId === tab.id;
+                // Get or create ref for this tab
+                if (!tabRefsMap.current.has(tab.id)) {
+                    tabRefsMap.current.set(tab.id, {
+                        current: null
+                    });
+                }
+                var tabRef = tabRefsMap.current.get(tab.id);
+                return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                    ref: function(el) {
+                        tabRef.current = el;
+                    },
+                    "data-tab-id": tab.id,
+                    className: tabStyles({
+                        isActive: isActive
+                    }),
+                    onClick: function() {
+                        return onTabClick === null || onTabClick === void 0 ? void 0 : onTabClick(tab.id);
+                    },
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                            className: "h-5 relative",
+                            children: [
+                                tab.loading ? /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                    className: "flex items-center justify-center h-5",
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
+                                        size: "small"
+                                    })
+                                }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(TabTitle, {
+                                    title: tab.title,
+                                    isActive: isActive,
+                                    tabContainerRef: tabRef
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                    className: "".concat(gradientOverlayStyles({
+                                        isActive: isActive
+                                    }), " right-[-4px] top-[-4px] w-4.5 h-6")
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                    className: "".concat(gradientOverlayStyles({
+                                        isActive: isActive
+                                    }), " w-2 h-6 bg-gradient-to-l ").concat(isActive ? 'from-surface-lowest' : 'from-surface-lower', " right-[14px] top-[-4px]")
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                            size: "mini",
+                            iconSize: "sm",
+                            plain: true,
+                            icon: _polarisicons.CancelMinor,
+                            onClick: function(e) {
+                                e.stopPropagation();
+                                onTabClose === null || onTabClose === void 0 ? void 0 : onTabClose(tab.id);
+                            },
+                            className: "sm:opacity-0 sm:group-hover:opacity-100 transition-all !absolute right-[3px] top-[4px] ".concat(isActive ? 'bg-surface-lowest' : 'bg-surface-lower')
+                        })
+                    ]
+                }, tab.id);
+            })
+        })
+    });
+}
+var _default = TabNavigation;

package/dist/cjs/components/TextField.js

@@ -564,6 +564,9 @@ var clearButtonStyles = (0, _tailwindvariants.tv)({
                     }),
                     labelAction && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Link.default, {
                         onClick: labelAction.onAction,
+                        insight: labelAction.insight,
+                        icon: labelAction.insight ? _polarisicons.MagicMajor : undefined,
+                        color: labelAction.insight ? "insight" : undefined,
                         removeUnderline: true,
                         children: labelAction.content
                     })

package/dist/cjs/components/Tip.js

@@ -134,6 +134,9 @@ var statusHelpers = {
     },
     attention: {},
     highlight: {},
+    insight: {
+        icon: _polarisicons.MagicMajor
+    },
     neutral: {}
 };
 /**

package/dist/cjs/components/Tooltip.js

@@ -14,7 +14,7 @@ var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 var _reactdom = require("react-dom");
 var _tailwindvariants = require("tailwind-variants");
 var _Text = /*#__PURE__*/ _interop_require_default(require("./Text"));
-var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("./VerticalStack"));
+var _Stack = /*#__PURE__*/ _interop_require_default(require("./Stack"));
 var _List = /*#__PURE__*/ _interop_require_default(require("./List"));
 var _Icon = /*#__PURE__*/ _interop_require_default(require("./Icon"));
 var _polarisicons = require("@shopify/polaris-icons");
@@ -148,7 +148,9 @@ var styles = (0, _tailwindvariants.tv)({
         display: {
             inline: "inline",
             "inline-block": "inline-block",
-            block: "block"
+            block: "block",
+            flex: "flex",
+            "inline-flex": "inline-flex"
         },
         hasUnderline: {
             true: "Litho-TooltipContainer--HasUnderline border-b border-dotted",
@@ -180,7 +182,7 @@ var wrapperStyles = (0, _tailwindvariants.tv)({
     }
 });
 var tooltipStyles = (0, _tailwindvariants.tv)({
-    base: "Litho-Tooltip inline-block w-auto max-w-60 whitespace-normal overflow-hidden bg-surface-alternate text-alternate dark:text-highest py-1.5 px-3 rounded-md",
+    base: "Litho-Tooltip block w-auto max-w-60 whitespace-normal overflow-hidden bg-surface-alternate text-alternate dark:text-highest py-1.5 px-3 rounded-md",
     variants: {
         alignment: {
             center: "text-center",
@@ -193,21 +195,15 @@ var tooltipStyles = (0, _tailwindvariants.tv)({
     }
 });
 var arrowStyles = (0, _tailwindvariants.tv)({
-    base: "Litho-TooltipArrow absolute w-0 h-0 border-l-transparent border-r-transparent border-l-6 border-r-6",
+    base: "Litho-TooltipArrow absolute w-0 h-0 border-l-transparent border-r-transparent border-l-6 border-r-6 left-1/2 -translate-x-1/2",
     variants: {
         preferredPosition: {
             above: "Litho-TooltipArrow--Above mb-0.5 bottom-full border-b-0 border-t-6 border-t-surface-alternate",
             below: "Litho-TooltipArrow--Below mt-0.5 top-full border-t-0 border-b-6 border-b-surface-alternate"
-        },
-        alignment: {
-            center: "left-1/2 -translate-x-1/2",
-            left: "left-2.5",
-            right: "right-2.5"
         }
     },
     defaultVariants: {
-        preferredPosition: "below",
-        alignment: "center"
+        preferredPosition: "below"
     }
 });
 /**
@@ -236,6 +232,7 @@ var arrowStyles = (0, _tailwindvariants.tv)({
  * @param {boolean} [props.hasUnderline=false] - Whether the activator should have an underline.
  * @param {number | boolean} [props.zIndexOverride] - Override for the z-index of the tooltip.
  * @param {"inline" | "inline-block" | "block"} [props.display="inline-block"] - The display property of the tooltip container.
+ * @param {string} [props.className] - Additional class name for the tooltip container.
  *
  * @returns {React.ReactElement} The rendered Tooltip component.
  *
@@ -258,7 +255,7 @@ var arrowStyles = (0, _tailwindvariants.tv)({
  * </Tooltip>
  */ function Tooltip() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var _props_display = props.display, display = _props_display === void 0 ? "inline-block" : _props_display, children = props.children, content = props.content, _props_dismissOnMouseOut = props.dismissOnMouseOut, dismissOnMouseOut = _props_dismissOnMouseOut === void 0 ? true : _props_dismissOnMouseOut, _props_dismissOnActivatorClick = props.dismissOnActivatorClick, dismissOnActivatorClick = _props_dismissOnActivatorClick === void 0 ? true : _props_dismissOnActivatorClick, _props_preferredPosition = props.preferredPosition, preferredPosition = _props_preferredPosition === void 0 ? "below" : _props_preferredPosition, _props_alignment = props.alignment, alignment = _props_alignment === void 0 ? "center" : _props_alignment, _props_hoverDelay = props.hoverDelay, hoverDelay = _props_hoverDelay === void 0 ? 0 : _props_hoverDelay, _props_hasUnderline = props.hasUnderline, hasUnderline = _props_hasUnderline === void 0 ? false : _props_hasUnderline, zIndexOverride = props.zIndexOverride;
+    var _props_display = props.display, display = _props_display === void 0 ? "inline-block" : _props_display, children = props.children, content = props.content, _props_dismissOnMouseOut = props.dismissOnMouseOut, dismissOnMouseOut = _props_dismissOnMouseOut === void 0 ? true : _props_dismissOnMouseOut, _props_dismissOnActivatorClick = props.dismissOnActivatorClick, dismissOnActivatorClick = _props_dismissOnActivatorClick === void 0 ? true : _props_dismissOnActivatorClick, _props_preferredPosition = props.preferredPosition, preferredPosition = _props_preferredPosition === void 0 ? "below" : _props_preferredPosition, _props_alignment = props.alignment, alignment = _props_alignment === void 0 ? "center" : _props_alignment, _props_hoverDelay = props.hoverDelay, hoverDelay = _props_hoverDelay === void 0 ? 0 : _props_hoverDelay, _props_hasUnderline = props.hasUnderline, hasUnderline = _props_hasUnderline === void 0 ? false : _props_hasUnderline, zIndexOverride = props.zIndexOverride, className = props.className;
     var activatorRef = (0, _react.useRef)(null);
     var tooltipRef = (0, _react.useRef)(null);
     var _useState = _sliced_to_array((0, _react.useState)({
@@ -270,6 +267,7 @@ var arrowStyles = (0, _tailwindvariants.tv)({
     var classes = styles({
         hasUnderline: hasUnderline,
         display: display,
+        className: className,
         alignment: alignment
     });
     var wrapperClasses = wrapperStyles({
@@ -360,9 +358,10 @@ var arrowStyles = (0, _tailwindvariants.tv)({
                 children: item.content
             }, key);
         } else if (item.type == "list") {
-            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
                 inlineAlign: "start",
                 align: "start",
+                gap: "0",
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default, {
                     type: "bullet",
                     children: item.content.map(function(item) {

package/dist/cjs/index.js

@@ -45,6 +45,9 @@ _export(exports, {
     get ChoiceList () {
         return _ChoiceList.default;
     },
+    get Code () {
+        return _Code.default;
+    },
     get Collapsible () {
         return _Collapsible.default;
     },
@@ -217,6 +220,7 @@ var _ButtonGroup = /*#__PURE__*/ _interop_require_default(require("./components/
 var _Card = /*#__PURE__*/ _interop_require_default(require("./components/Card"));
 var _Checkbox = /*#__PURE__*/ _interop_require_default(require("./components/Checkbox"));
 var _ChoiceList = /*#__PURE__*/ _interop_require_default(require("./components/ChoiceList"));
+var _Code = /*#__PURE__*/ _interop_require_default(require("./components/Code"));
 var _Collapsible = /*#__PURE__*/ _interop_require_default(require("./components/Collapsible"));
 var _ColorField = /*#__PURE__*/ _interop_require_default(require("./components/ColorField"));
 var _ContextualSaveBar = /*#__PURE__*/ _interop_require_default(require("./components/ContextualSaveBar"));

package/dist/cjs/stories/Checkbox.stories.js

@@ -36,6 +36,12 @@ _export(exports, {
     get WithHelpText () {
         return WithHelpText;
     },
+    get WithReactElementLabel () {
+        return WithReactElementLabel;
+    },
+    get WithReactElementLabelAndHelpText () {
+        return WithReactElementLabelAndHelpText;
+    },
     get default () {
         return _default;
     }
@@ -44,6 +50,7 @@ var _jsxruntime = require("react/jsx-runtime");
 var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
 var _Checkbox = /*#__PURE__*/ _interop_require_default(require("../components/Checkbox.js"));
 var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
+var _Badge = /*#__PURE__*/ _interop_require_default(require("../components/Badge.js"));
 var _transformers = require("../utilities/transformers.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
@@ -79,7 +86,7 @@ var _default = {
     argTypes: {
         label: {
             control: 'text',
-            description: 'The text label for the checkbox'
+            description: 'The label for the checkbox. Can be a string or a React element.'
         },
         checked: {
             control: 'boolean',
@@ -264,3 +271,167 @@ var MultipleCheckboxes = {
         }
     }
 };
+var WithReactElementLabel = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            gap: "md",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
+                    label: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                        horizontal: true,
+                        gap: "xs",
+                        blockAlign: "center",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                children: "Premium Feature"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Badge.default, {
+                                size: "small",
+                                tone: "success",
+                                children: "Pro"
+                            })
+                        ]
+                    }),
+                    onChange: function(checked) {
+                        return console.log('Premium feature:', checked);
+                    }
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
+                    label: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                        horizontal: true,
+                        gap: "xs",
+                        blockAlign: "center",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                children: "Beta Access"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Badge.default, {
+                                size: "small",
+                                tone: "attention",
+                                children: "Beta"
+                            })
+                        ]
+                    }),
+                    checked: true,
+                    onChange: function(checked) {
+                        return console.log('Beta access:', checked);
+                    }
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
+                    label: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                        horizontal: true,
+                        gap: "xs",
+                        blockAlign: "center",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                children: "Enterprise Only"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Badge.default, {
+                                size: "small",
+                                tone: "info",
+                                children: "Enterprise"
+                            })
+                        ]
+                    }),
+                    onChange: function(checked) {
+                        return console.log('Enterprise only:', checked);
+                    }
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Checkbox labels can be React elements, allowing for rich content like badges alongside text.'
+            },
+            source: {
+                transform: _transformers.transformStorySource
+            }
+        }
+    }
+};
+var WithReactElementLabelAndHelpText = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            gap: "md",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
+                    label: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                        horizontal: true,
+                        gap: "xs",
+                        blockAlign: "center",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                children: "Advanced Analytics"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Badge.default, {
+                                size: "small",
+                                tone: "info",
+                                children: "Pro"
+                            })
+                        ]
+                    }),
+                    helpText: "Get detailed insights into your data with advanced visualization tools",
+                    onChange: function(checked) {
+                        return console.log('Advanced analytics:', checked);
+                    }
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
+                    label: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                        horizontal: true,
+                        gap: "xs",
+                        blockAlign: "center",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                children: "API Access"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Badge.default, {
+                                size: "small",
+                                tone: "attention",
+                                children: "Beta"
+                            })
+                        ]
+                    }),
+                    helpText: "Enable programmatic access to your account (currently in beta testing)",
+                    checked: true,
+                    onChange: function(checked) {
+                        return console.log('API access:', checked);
+                    }
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
+                    label: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                        horizontal: true,
+                        gap: "xs",
+                        blockAlign: "center",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                children: "Priority Support"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Badge.default, {
+                                size: "small",
+                                tone: "success",
+                                children: "Enterprise"
+                            })
+                        ]
+                    }),
+                    helpText: "Get 24/7 dedicated support from our enterprise team",
+                    disabled: true,
+                    onChange: function(checked) {
+                        return console.log('Priority support:', checked);
+                    }
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'React element labels work seamlessly with help text, error states, and disabled states.'
+            },
+            source: {
+                transform: _transformers.transformStorySource
+            }
+        }
+    }
+};