@heymantle/litho 0.0.10 → 0.0.12

package/dist/cjs/components/Banner.js

@@ -168,10 +168,15 @@ var STATUS_STYLES = {
                             }),
                             !icon && !spinner && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
                                 children: [
+                                    status === "insight" && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                                        source: _polarisicons.MagicMajor,
+                                        color: statusColors.icon
+                                    }),
                                     ![
                                         "warning",
                                         "attention",
-                                        "success"
+                                        "success",
+                                        "insight"
                                     ].includes(status) && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                                         source: _polarisicons.CircleInformationMajor,
                                         color: statusColors.icon

package/dist/cjs/components/Button.js

@@ -488,6 +488,23 @@ var styles = (0, _tailwindvariants.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: {
@@ -496,7 +513,8 @@ var styles = (0, _tailwindvariants.tv)({
         insideButtonGroup: false,
         shadow: false,
         darkMode: false,
-        bordered: false
+        bordered: false,
+        insight: false
     }
 });
 var contentStyles = (0, _tailwindvariants.tv)({
@@ -633,6 +651,10 @@ var textStyles = (0, _tailwindvariants.tv)({
             true: "",
             false: ""
         },
+        insight: {
+            true: "",
+            false: ""
+        },
         naked: {
             true: "",
             false: ""
@@ -663,6 +685,7 @@ var textStyles = (0, _tailwindvariants.tv)({
             plain: false,
             link: false,
             naked: false,
+            insight: false,
             class: "text-btn-secondary-fg"
         },
         {
@@ -801,7 +824,7 @@ var connectedDisclosureStyles = (0, _tailwindvariants.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.
@@ -857,7 +880,7 @@ var connectedDisclosureStyles = (0, _tailwindvariants.tv)({
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var darkMode = (0, _AppProvider.useDarkMode)().darkMode;
     var _useState = _sliced_to_array((0, _react.useState)(false), 2), showConnectedDisclosurePopover = _useState[0], setShowConnectedDisclosurePopover = _useState[1];
-    var id = props.id, children = props.children, url = props.url, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, external = props.external, target = props.target, submit = props.submit, _props_loading = props.loading, loading = _props_loading === void 0 ? false : _props_loading, _props_pressed = props.pressed, pressed = _props_pressed === void 0 ? false : _props_pressed, accessibilityLabel = props.accessibilityLabel, role = props.role, ariaControls = props.ariaControls, ariaExpanded = props.ariaExpanded, ariaDescribedBy = props.ariaDescribedBy, ariaChecked = props.ariaChecked, icon = props.icon, _iconColor = props.iconColor, _props_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",
@@ -883,6 +906,7 @@ var connectedDisclosureStyles = (0, _tailwindvariants.tv)({
         "destructive",
         "disclosure",
         "disclosureRight",
+        "insight",
         "plain",
         "naked",
         "size",
@@ -911,9 +935,10 @@ var connectedDisclosureStyles = (0, _tailwindvariants.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;
@@ -923,6 +948,7 @@ var connectedDisclosureStyles = (0, _tailwindvariants.tv)({
         link: link,
         destructive: destructive,
         highlight: highlight,
+        insight: insight,
         insideButtonGroup: insideButtonGroup,
         loading: loading,
         disabled: disabled,
@@ -953,6 +979,7 @@ var connectedDisclosureStyles = (0, _tailwindvariants.tv)({
         link: link,
         destructive: destructive,
         highlight: highlight,
+        insight: insight,
         pressed: pressed,
         loading: loading,
         disabled: disabled,
@@ -964,6 +991,7 @@ var connectedDisclosureStyles = (0, _tailwindvariants.tv)({
         link: link,
         destructive: destructive,
         highlight: highlight,
+        insight: insight,
         loading: loading,
         disabled: disabled
     });
@@ -1047,6 +1075,7 @@ var connectedDisclosureStyles = (0, _tailwindvariants.tv)({
                     link: link,
                     destructive: destructive,
                     highlight: highlight,
+                    insight: insight,
                     icon: _polarisicons.CaretDownMinor,
                     disclosureRight: true,
                     iconColor: _iconColor,

package/dist/cjs/components/ButtonGroup.js

@@ -145,14 +145,26 @@ var styles = (0, _tailwindvariants.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"
     }
 });
 var ButtonGroupContext = /*#__PURE__*/ (0, _react.createContext)(false);
@@ -170,18 +182,21 @@ var ButtonGroupContext = /*#__PURE__*/ (0, _react.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__*/ (0, _jsxruntime.jsx)(ButtonGroupContext.Provider, {
         value: segmented,

package/dist/cjs/components/Card.js

@@ -429,7 +429,7 @@ var sectionBodyStyles = (0, _tailwindvariants.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,
@@ -499,7 +499,7 @@ var sectionBodyStyles = (0, _tailwindvariants.tv)({
                 ]
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-                className: sectionBodyClasses,
+                className: "".concat(sectionBodyClasses).concat(sectionBodyClassName ? " ".concat(sectionBodyClassName) : ""),
                 children: [
                     emptyState.showIf && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                         className: paddedHalf ? "px-2 @md:px-2.5 pb-2" : !padded ? "px-4 @md:px-5 pb-4" : "",
@@ -516,7 +516,7 @@ var sectionBodyStyles = (0, _tailwindvariants.tv)({
 };
 Card.Section.displayName = "Card.Section";
 var clickableRowStyles = (0, _tailwindvariants.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"
@@ -551,4 +551,40 @@ var clickableRowStyles = (0, _tailwindvariants.tv)({
     });
 };
 Card.ClickableRow.displayName = "Card.ClickableRow";
+Card.Rows = function(param) {
+    var children = param.children;
+    return /*#__PURE__*/ (0, _jsxruntime.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__*/ (0, _jsxruntime.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";
 var _default = Card;

package/dist/cjs/components/ChoiceList.js

@@ -15,7 +15,7 @@ var _Icon = /*#__PURE__*/ _interop_require_default(require("./Icon"));
 var _Label = /*#__PURE__*/ _interop_require_default(require("./Label"));
 var _RadioButton = /*#__PURE__*/ _interop_require_default(require("./RadioButton"));
 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 _polarisicons = require("@shopify/polaris-icons");
 function _array_like_to_array(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
@@ -99,7 +99,8 @@ var styles = (0, _tailwindvariants.tv)({
                 tooltip: tooltip,
                 children: title
             }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
+                gap: "none",
                 children: choices.map(function(choice, index) {
                     return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                         children: [

package/dist/cjs/components/Code.js

@@ -0,0 +1,227 @@
+"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 _tailwindvariants = require("tailwind-variants");
+var _polarisicons = require("@shopify/polaris-icons");
+var _Button = /*#__PURE__*/ _interop_require_default(require("./Button"));
+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 _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 _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 _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 ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+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 styles = (0, _tailwindvariants.tv)({
+    base: "Litho-Code p-2.5 bg-surface-normal shadow-inset rounded-md font-mono text-xs overflow-x-auto whitespace-pre"
+});
+var containerStyles = (0, _tailwindvariants.tv)({
+    base: "Litho-Code-container relative group"
+});
+/**
+ * A code component that renders code blocks with consistent styling.
+ *
+ * @param {Object} props - Properties to customize the code component.
+ * @param {string} [props.className] - Additional CSS class names.
+ * @param {Function} [props.onCopy] - Function to handle copy action.
+ * @param {React.ReactNode} props.children - The code content to be displayed.
+ * @returns {JSX.Element} Rendered code block with applied styles.
+ *
+ * @example
+ * <Code>
+ *   {`const example = "code";`}
+ * </Code>
+ *
+ * @example
+ * <Code onCopy={() => {
+ *   navigator.clipboard.writeText(children);
+ * }}>
+ *   {`const example = "code";`}
+ * </Code>
+ */ function Code() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var className = props.className, onCopy = props.onCopy, children = props.children, rest = _object_without_properties(props, [
+        "className",
+        "onCopy",
+        "children"
+    ]);
+    var _useState = _sliced_to_array((0, _react.useState)(false), 2), copied = _useState[0], setCopied = _useState[1];
+    var classes = styles();
+    var containerClasses = containerStyles();
+    var getTextContent = function(node) {
+        var _node_props;
+        if (typeof node === "string") {
+            return node;
+        }
+        if (typeof node === "number") {
+            return String(node);
+        }
+        if (Array.isArray(node)) {
+            return node.map(getTextContent).join("");
+        }
+        if (node === null || node === void 0 ? void 0 : (_node_props = node.props) === null || _node_props === void 0 ? void 0 : _node_props.children) {
+            return getTextContent(node.props.children);
+        }
+        return "";
+    };
+    var handleCopy = function() {
+        if (onCopy) {
+            onCopy();
+            setCopied(true);
+            setTimeout(function() {
+                setCopied(false);
+            }, 2000);
+        }
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        className: containerClasses,
+        children: [
+            onCopy && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: "absolute top-1 right-1 z-10 opacity-0 group-hover:opacity-100 transition-opacity duration-200",
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                    size: "small",
+                    icon: copied ? _polarisicons.ClipboardCheckFilledMajor : _polarisicons.ClipboardMinor,
+                    onClick: handleCopy,
+                    tooltip: copied ? undefined : "Copy to clipboard"
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("pre", _object_spread_props(_object_spread({}, rest), {
+                className: "".concat(classes).concat(className ? " ".concat(className) : ""),
+                children: children
+            }))
+        ]
+    });
+}
+var _default = Code;

package/dist/cjs/components/Filters.js

@@ -179,7 +179,7 @@ function _unsupported_iterable_to_array(o, minLen) {
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
 }
 var styles = (0, _tailwindvariants.tv)({
-    base: "Litho-Filters flex items-center",
+    base: "Litho-Filters flex items-center overflow-x-auto",
     variants: {
         showTextField: {
             true: "justify-between",

package/dist/cjs/components/Frame.js

@@ -83,7 +83,7 @@ var frameStyles = (0, _tailwindvariants.tv)({
     base: "Litho-Frame bg-surface-normal",
     variants: {
         paneIsOpen: {
-            true: "md:mr-[var(--litho-pane-width)]"
+            true: "mr-[var(--litho-pane-collapsed-width)] sm:mr-0 md:mr-[var(--litho-pane-width)]"
         }
     },
     defaultVariants: {
@@ -94,7 +94,7 @@ var frameHeaderStyles = (0, _tailwindvariants.tv)({
     base: "Litho-Frame-Header bg-surface-normal fixed left-0 right-0 top-0",
     variants: {
         paneIsOpen: {
-            true: "md:mr-[var(--litho-pane-width)]"
+            true: "mr-[var(--litho-pane-width)] md:mr-[var(--litho-pane-width)]"
         }
     },
     defaultVariants: {

package/dist/cjs/components/Layout.js

@@ -71,10 +71,14 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 var LayoutContext = /*#__PURE__*/ (0, _react.createContext)();
 var styles = (0, _tailwindvariants.tv)({
-    base: "Litho-Layout flex flex-col gap-4 w-full max-w-full",
+    base: "Litho-Layout flex gap-4 w-full max-w-full",
     variants: {
         hasSidebarSection: {
             true: ""
+        },
+        reverseOnMobile: {
+            true: "flex-col-reverse @lg:flex-row",
+            false: "flex-col"
         }
     },
     compoundVariants: [
@@ -87,11 +91,17 @@ var styles = (0, _tailwindvariants.tv)({
             hasSidebarSection: true,
             embedded: true,
             className: "@lg-embed:flex-row @lg-embed:items-start @lg-embed:gap-5"
+        },
+        {
+            reverseOnMobile: true,
+            embedded: true,
+            className: "@lg-embed:flex-row"
         }
     ],
     defaultVariants: {
         hasSidebarSection: false,
-        embedded: false
+        embedded: false,
+        reverseOnMobile: false
     }
 });
 /**
@@ -103,11 +113,12 @@ var styles = (0, _tailwindvariants.tv)({
  *
  * @param {Object} props - Component props.
  * @param {React.ReactNode} props.children - The content to render inside the layout.
+ * @param {boolean} [props.reverseOnMobile] - If true, reverses the flex direction on mobile devices.
  * @returns {JSX.Element} The rendered layout component.
  */ function Layout() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var embedded = (0, _Frame.useFrame)().embedded;
-    var children = props.children;
+    var children = props.children, reverseOnMobile = props.reverseOnMobile;
     var analyzeChildren = function(children) {
         var depth = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0;
         if (depth > 3) return {
@@ -153,7 +164,8 @@ var styles = (0, _tailwindvariants.tv)({
     var hasSidebarSection = sections.length > 0;
     var classes = styles({
         hasSidebarSection: hasSidebarSection,
-        embedded: embedded
+        embedded: embedded,
+        reverseOnMobile: reverseOnMobile
     });
     var wrappedChildren = hasSection ? children : /*#__PURE__*/ (0, _jsxruntime.jsx)(Layout.Section, {
         children: children