@heymantle/litho 0.0.4 → 0.0.5

package/dist/cjs/components/Autocomplete.js

@@ -248,17 +248,25 @@ function attachPropToTextField(children, prop) {
         var option = param.option, allowMultiple = param.allowMultiple, selected = param.selected, onSelect = param.onSelect, setShowOptionsPopover = param.setShowOptionsPopover;
         var isChecked = selected.includes(option.value);
         if (allowMultiple) {
-            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
-                label: option.label,
-                checked: isChecked,
-                onChange: function() {
-                    onSelect(isChecked ? selected.filter(function(v) {
-                        return v !== option.value;
-                    }) : _to_consumable_array(selected).concat([
-                        option.value
-                    ]));
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                onMouseDown: function(e) {
+                    e.preventDefault();
                 },
-                className: "px-2 py-1.5 cursor-pointer rounded-md hover-dark"
+                onClick: function(e) {
+                    e.stopPropagation();
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
+                    label: option.label,
+                    checked: isChecked,
+                    onChange: function() {
+                        onSelect(isChecked ? selected.filter(function(v) {
+                            return v !== option.value;
+                        }) : _to_consumable_array(selected).concat([
+                            option.value
+                        ]));
+                    },
+                    className: "px-2 py-1.5 cursor-pointer rounded-md hover-dark"
+                })
             });
         }
         return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
@@ -349,6 +357,8 @@ Autocomplete.displayName = "Autocomplete";
  * @param {function} [props.onFocus] - Callback fired when the TextField gains focus (native TextField event).
  * @param {string} [props.placeholder] - Placeholder text for the TextField.
  * @param {string} [props.value] - The current value of the TextField.
+ * @param {string} [props.label] - The label for the TextField.
+ * @param {string} [props.labelHidden] - Whether to hide the label.
  * @param {function} [props.onChange] - Callback fired when the TextField value changes.
  *
  * @example
@@ -356,7 +366,7 @@ Autocomplete.displayName = "Autocomplete";
  *   placeholder="Search..."
  *   onTextFieldFocus={() => console.log("Focused")}
  * />
- */ Autocomplete.TextField = function AutocompleteTextField() {
+ */ var AutocompleteTextField = function() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, _object_spread_props(_object_spread({}, props), {
         onFocus: function() {
@@ -369,5 +379,6 @@ Autocomplete.displayName = "Autocomplete";
         }
     }));
 };
-Autocomplete.TextField.displayName = "Autocomplete.TextField";
+Autocomplete.TextField = AutocompleteTextField;
+AutocompleteTextField.displayName = "Autocomplete.TextField";
 var _default = Autocomplete;

package/dist/cjs/components/Button.js

@@ -249,6 +249,10 @@ var styles = (0, _tailwindvariants.tv)({
         bordered: {
             true: "border-tint-2",
             false: ""
+        },
+        naked: {
+            true: "border-none bg-transparent p-0 hover:bg-transparent w-auto justify-start",
+            false: ""
         }
     },
     compoundVariants: [
@@ -373,6 +377,7 @@ var styles = (0, _tailwindvariants.tv)({
             destructive: false,
             highlight: false,
             pressed: false,
+            naked: false,
             class: "bg-btn-secondary hover:bg-btn-secondary-low active:bg-btn-secondary-lower text-btn-secondary-fg hover:text-btn-secondary-fg-alt border-btn-secondary-border hover:border-btn-secondary-border-low active:border-btn-secondary-border-low\n        dark:outline-hidden dark:border-transparent dark:shadow-btn-dark dark:border-t-tint-alt-3 dark:hover:border-t-tint-alt-2 dark:active:border-t-tint-alt-2"
         },
         {
@@ -384,6 +389,7 @@ var styles = (0, _tailwindvariants.tv)({
             destructive: false,
             highlight: false,
             pressed: true,
+            naked: false,
             class: "bg-btn-secondary hover:bg-btn-secondary-low active:bg-btn-secondary-lower text-btn-secondary-fg hover:text-btn-secondary-fg-alt border-btn-secondary-border hover:border-btn-secondary-border-low active:border-btn-secondary-border-low\n        dark:outline-hidden dark:border-tint-10 dark:shadow-btn-pressed-dark dark:hover:border-tint-10 dark:active:border-tint-10"
         },
         {
@@ -434,16 +440,19 @@ var styles = (0, _tailwindvariants.tv)({
             link: true,
             disabled: false,
             loading: false,
+            naked: false,
             class: "bg-btn-link hover:bg-btn-link-low active:bg-btn-link-lower text-btn-link-fg hover:text-btn-link-fg-alt border-btn-link-border hover:border-btn-link-border-low active:border-btn-link-border-low"
         },
         {
             link: true,
             disabled: true,
+            naked: false,
             class: "bg-btn-link-disabled text-btn-link-disabled-fg"
         },
         {
             link: true,
             loading: true,
+            naked: false,
             class: "bg-btn-link-disabled text-btn-link-disabled-fg"
         },
         // Destructive buttons
@@ -510,6 +519,10 @@ var contentStyles = (0, _tailwindvariants.tv)({
             small: "py-0.5",
             large: "py-3",
             medium: "py-1"
+        },
+        naked: {
+            true: "px-2",
+            false: ""
         }
     },
     compoundVariants: [
@@ -569,6 +582,7 @@ var contentStyles = (0, _tailwindvariants.tv)({
             hasIcon: false,
             hasChildren: true,
             disclosure: false,
+            naked: false,
             class: "px-3"
         },
         {
@@ -618,6 +632,10 @@ var textStyles = (0, _tailwindvariants.tv)({
         highlight: {
             true: "",
             false: ""
+        },
+        naked: {
+            true: "",
+            false: ""
         }
     },
     compoundVariants: [
@@ -644,6 +662,7 @@ var textStyles = (0, _tailwindvariants.tv)({
             primary: false,
             plain: false,
             link: false,
+            naked: false,
             class: "text-btn-secondary-fg"
         },
         {
@@ -727,6 +746,11 @@ var textStyles = (0, _tailwindvariants.tv)({
             highlight: true,
             disabled: true,
             class: "text-btn-highlight-disabled-fg"
+        },
+        {
+            link: true,
+            naked: true,
+            class: "text-blue-700 underline"
         }
     ],
     defaultVariants: {
@@ -768,6 +792,7 @@ var connectedDisclosureStyles = (0, _tailwindvariants.tv)({
  * @param {boolean} [props.ariaChecked] - Whether the button is checked (for toggle buttons).
  * @param {React.Component} [props.icon] - Icon component to display within the button.
  * @param {"default" | "primary" | "secondary" | "plain" | "link" | "destructive" | "highlight"} [props.iconColor='default'] - Color of the icon.
+ * @param {"default" | "sm" | "lg" | "xl"} [props.iconSize='default'] - Size of the icon.
  * @param {boolean} [props.primary=false] - Whether to show the primary button style.
  * @param {boolean} [props.highlight=false] - Whether to show the highlight button style.
  * @param {boolean} [props.link=false] - Whether to show a link style.
@@ -775,10 +800,14 @@ var connectedDisclosureStyles = (0, _tailwindvariants.tv)({
  * @param {boolean} [props.disclosure=false] - Whether to show a disclosure arrow.
  * @param {boolean} [props.disclosureRight=false] - Whether to show the disclosure on the right.
  * @param {boolean} [props.plain=false] - Whether to show plain styling without background.
+ * @param {boolean} [props.naked=false] - Whether to show the naked styling.
  * @param {"small" | "medium" | "large" | "stepper"} [props.size='medium'] - Size of the button ('small', 'medium', 'large', 'stepper').
  * @param {boolean} [props.fullWidth] - Whether the button should take full width.
  * @param {"left" | "center" | "right"} [props.align='center'] - Alignment of the button content ('left', 'center', 'right').
  * @param {string} [props.tooltip] - Tooltip to show when hovering over the button.
+ * @param {"left" | "center" | "right"} [props.tooltipAlignment='right'] - Alignment of the tooltip ('left', 'center', 'right').
+ * @param {"above" | "below" | "left" | "right"} [props.tooltipPosition='above'] - Position of the tooltip ('above', 'below', 'left', 'right').
+ * @param {"inline-block" | "block" | "inline"} [props.tooltipDisplay='inline-block'] - Display type of the tooltip ('inline-block', 'block', 'inline').
  * @param {Object} [props.connectedDisclosure] - Configuration for connected disclosure menu.
  * @param {Array<import("./ActionList").ActionListItem>} [props.connectedDisclosure.actions] - Actions to show in the disclosure menu.
  * @param {string} [props.className] - Additional CSS classes for the button.
@@ -828,7 +857,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_bordered = props.bordered, bordered = _props_bordered === void 0 ? false : _props_bordered, _props_primary = props.primary, primary = _props_primary === void 0 ? false : _props_primary, _props_highlight = props.highlight, highlight = _props_highlight === void 0 ? false : _props_highlight, _props_link = props.link, link = _props_link === void 0 ? false : _props_link, _props_destructive = props.destructive, destructive = _props_destructive === void 0 ? false : _props_destructive, _props_disclosure = props.disclosure, disclosure = _props_disclosure === void 0 ? false : _props_disclosure, _props_disclosureRight = props.disclosureRight, disclosureRight = _props_disclosureRight === void 0 ? false : _props_disclosureRight, _props_plain = props.plain, plain = _props_plain === void 0 ? false : _props_plain, _props_size = props.size, size = _props_size === void 0 ? "medium" : _props_size, fullWidth = props.fullWidth, _props_align = props.align, align = _props_align === void 0 ? "center" : _props_align, connectedDisclosure = props.connectedDisclosure, className = props.className, contentClassName = props.contentClassName, rounded = props.rounded, onClick = props.onClick, onMouseDown = props.onMouseDown, tooltip = props.tooltip, _props_tooltipAlignment = props.tooltipAlignment, tooltipAlignment = _props_tooltipAlignment === void 0 ? "right" : _props_tooltipAlignment, _props_tooltipPosition = props.tooltipPosition, tooltipPosition = _props_tooltipPosition === void 0 ? "above" : _props_tooltipPosition, shadow = props.shadow, restProps = _object_without_properties(props, [
+    var id = props.id, children = props.children, url = props.url, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, external = props.external, target = props.target, submit = props.submit, _props_loading = props.loading, loading = _props_loading === void 0 ? false : _props_loading, _props_pressed = props.pressed, pressed = _props_pressed === void 0 ? false : _props_pressed, accessibilityLabel = props.accessibilityLabel, role = props.role, ariaControls = props.ariaControls, ariaExpanded = props.ariaExpanded, ariaDescribedBy = props.ariaDescribedBy, ariaChecked = props.ariaChecked, icon = props.icon, _iconColor = props.iconColor, _props_iconSize = props.iconSize, iconSize = _props_iconSize === void 0 ? "default" : _props_iconSize, _props_bordered = props.bordered, bordered = _props_bordered === void 0 ? false : _props_bordered, _props_primary = props.primary, primary = _props_primary === void 0 ? false : _props_primary, _props_highlight = props.highlight, highlight = _props_highlight === void 0 ? false : _props_highlight, _props_link = props.link, link = _props_link === void 0 ? false : _props_link, _props_destructive = props.destructive, destructive = _props_destructive === void 0 ? false : _props_destructive, _props_disclosure = props.disclosure, disclosure = _props_disclosure === void 0 ? false : _props_disclosure, _props_disclosureRight = props.disclosureRight, disclosureRight = _props_disclosureRight === void 0 ? false : _props_disclosureRight, _props_plain = props.plain, plain = _props_plain === void 0 ? false : _props_plain, _props_naked = props.naked, naked = _props_naked === void 0 ? false : _props_naked, _props_size = props.size, size = _props_size === void 0 ? "medium" : _props_size, fullWidth = props.fullWidth, _props_align = props.align, align = _props_align === void 0 ? "center" : _props_align, connectedDisclosure = props.connectedDisclosure, className = props.className, contentClassName = props.contentClassName, rounded = props.rounded, onClick = props.onClick, onMouseDown = props.onMouseDown, tooltip = props.tooltip, _props_tooltipAlignment = props.tooltipAlignment, tooltipAlignment = _props_tooltipAlignment === void 0 ? "right" : _props_tooltipAlignment, _props_tooltipPosition = props.tooltipPosition, tooltipPosition = _props_tooltipPosition === void 0 ? "above" : _props_tooltipPosition, _props_tooltipDisplay = props.tooltipDisplay, tooltipDisplay = _props_tooltipDisplay === void 0 ? "inline-block" : _props_tooltipDisplay, shadow = props.shadow, restProps = _object_without_properties(props, [
         "id",
         "children",
         "url",
@@ -846,6 +875,7 @@ var connectedDisclosureStyles = (0, _tailwindvariants.tv)({
         "ariaChecked",
         "icon",
         "iconColor",
+        "iconSize",
         "bordered",
         "primary",
         "highlight",
@@ -854,6 +884,7 @@ var connectedDisclosureStyles = (0, _tailwindvariants.tv)({
         "disclosure",
         "disclosureRight",
         "plain",
+        "naked",
         "size",
         "fullWidth",
         "align",
@@ -866,6 +897,7 @@ var connectedDisclosureStyles = (0, _tailwindvariants.tv)({
         "tooltip",
         "tooltipAlignment",
         "tooltipPosition",
+        "tooltipDisplay",
         "shadow"
     ]);
     var hasIcon = !!icon;
@@ -903,14 +935,16 @@ var connectedDisclosureStyles = (0, _tailwindvariants.tv)({
         shadow: shadow,
         darkMode: darkMode,
         bordered: bordered,
-        align: align
+        align: align,
+        naked: naked
     });
     var contentClasses = contentStyles({
         disclosure: disclosure,
         hasIcon: hasIcon,
         hasChildren: hasChildren,
         size: size,
-        iconOnly: iconOnly
+        iconOnly: iconOnly,
+        naked: naked
     });
     var iconClasses = iconStyles();
     var textClasses = textStyles({
@@ -921,7 +955,8 @@ var connectedDisclosureStyles = (0, _tailwindvariants.tv)({
         highlight: highlight,
         pressed: pressed,
         loading: loading,
-        disabled: disabled
+        disabled: disabled,
+        naked: naked
     });
     var connectedDisclosureClasses = connectedDisclosureStyles({
         primary: primary,
@@ -969,7 +1004,8 @@ var connectedDisclosureStyles = (0, _tailwindvariants.tv)({
                         className: iconClasses,
                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                             source: memoizedIcon,
-                            color: disabled ? "disabled" : _iconColor || iconColor
+                            color: disabled ? "disabled" : _iconColor || iconColor,
+                            size: iconSize
                         })
                     }),
                     hasChildren && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
@@ -980,7 +1016,8 @@ var connectedDisclosureStyles = (0, _tailwindvariants.tv)({
                         className: "Litho-Button__DisclosureIcon relative -left-0.5",
                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                             source: _polarisicons.CaretDownMinor,
-                            color: disabled ? "disabled" : _iconColor || iconColor
+                            color: disabled ? "disabled" : _iconColor || iconColor,
+                            size: iconSize
                         })
                     })
                 ]
@@ -1032,6 +1069,7 @@ var connectedDisclosureStyles = (0, _tailwindvariants.tv)({
             content: tooltip,
             alignment: tooltipAlignment,
             preferredPosition: tooltipPosition,
+            display: tooltipDisplay,
             children: showConnectedDisclosure ? contentWithDisclosure : content
         });
     }

package/dist/cjs/components/Card.js

@@ -532,6 +532,7 @@ var clickableRowStyles = (0, _tailwindvariants.tv)({
  * @param {Function} [props.onClick] - Click handler for the row.
  * @param {string} [props.id] - ID to apply to the row element.
  * @param {string} [props.url] - URL to open when the row is clicked.
+ * @param {string} [props.className] - Additional classes to apply to the row.
  * @param {boolean} [props.disabled=false] - Disables interaction with the row.
  *
  * @returns {React.ReactElement} The rendered ClickableRow component.

package/dist/cjs/components/ColorField.js

@@ -11,7 +11,7 @@ Object.defineProperty(exports, "default", {
 });
 var _jsxruntime = require("react/jsx-runtime");
 var _react = require("react");
-var _reactcolor = require("react-color");
+var _reactcolorsketch = /*#__PURE__*/ _interop_require_default(require("@uiw/react-color-sketch"));
 var _tailwindvariants = require("tailwind-variants");
 var _Text = /*#__PURE__*/ _interop_require_default(require("./Text"));
 function _array_like_to_array(arr, len) {
@@ -148,7 +148,7 @@ var colorCell = (0, _tailwindvariants.tv)({
                 style: zIndexOverride ? {
                     zIndex: zIndexOverride
                 } : {},
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactcolor.SketchPicker, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactcolorsketch.default, {
                     color: value,
                     onChange: function(param) {
                         var hex = param.hex;

package/dist/cjs/components/EmptyState.js

@@ -50,10 +50,10 @@ var styles = (0, _tailwindvariants.tv)({
  * @returns {JSX.Element} The rendered EmptyState component.
  */ function EmptyState() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var description = props.description, icon = props.icon, iconSource = props.iconSource, primaryAction = props.primaryAction, secondaryAction = props.secondaryAction, title = props.title, _props_titleVariant = props.titleVariant, titleVariant = _props_titleVariant === void 0 ? "headingXl" : _props_titleVariant, _props_descriptionVariant = props.descriptionVariant, descriptionVariant = _props_descriptionVariant === void 0 ? "bodyLg" : _props_descriptionVariant, progress = props.progress;
+    var description = props.description, icon = props.icon, iconSource = props.iconSource, primaryAction = props.primaryAction, secondaryAction = props.secondaryAction, title = props.title, _props_titleVariant = props.titleVariant, titleVariant = _props_titleVariant === void 0 ? "headingXl" : _props_titleVariant, _props_descriptionVariant = props.descriptionVariant, descriptionVariant = _props_descriptionVariant === void 0 ? "bodyLg" : _props_descriptionVariant, progress = props.progress, className = props.className;
     var classes = styles();
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-        className: classes,
+        className: "".concat(classes).concat(className ? " ".concat(className) : ""),
         children: [
             iconSource && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                 className: "flex items-center justify-center w-16 h-16",

package/dist/cjs/components/Filters.js

@@ -860,11 +860,11 @@ var tabActionIconStyles = (0, _tailwindvariants.tv)({
  * @param {boolean} [props.subdued=false] - Whether the text field appears subdued.
  * @param {boolean} [props.disableQueryField=false] - Whether the text field is disabled.
  * @param {boolean} [props.transparent=true] - Whether the text field has a transparent background.
+ * @param {string} [props.autoComplete="on"] - Whether the text field should autocomplete.
  * @returns {JSX.Element} The text field component.
- */ Filters.TextField = function FiltersTextField() {
-    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+ */ Filters.TextField = function(props) {
     var darkMode = (0, _AppProvider.useDarkMode)().darkMode;
-    var queryValue = props.queryValue, onQueryChange = props.onQueryChange, onQueryBlur = props.onQueryBlur, onQueryFocus = props.onQueryFocus, onQueryClear = props.onQueryClear, _props_queryPlaceholder = props.queryPlaceholder, queryPlaceholder = _props_queryPlaceholder === void 0 ? "Search" : _props_queryPlaceholder, disableQueryField = props.disableQueryField;
+    var queryValue = props.queryValue, onQueryChange = props.onQueryChange, onQueryBlur = props.onQueryBlur, onQueryFocus = props.onQueryFocus, onQueryClear = props.onQueryClear, _props_queryPlaceholder = props.queryPlaceholder, queryPlaceholder = _props_queryPlaceholder === void 0 ? "Search" : _props_queryPlaceholder, disableQueryField = props.disableQueryField, _props_autoComplete = props.autoComplete, autoComplete = _props_autoComplete === void 0 ? "on" : _props_autoComplete;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
         className: "p-1",
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
@@ -877,6 +877,7 @@ var tabActionIconStyles = (0, _tailwindvariants.tv)({
             disabled: disableQueryField,
             subdued: darkMode,
             transparent: !darkMode,
+            autoComplete: autoComplete,
             clearButton: true,
             onClearButtonClick: onQueryClear
         })

package/dist/cjs/components/Frame.js

@@ -182,14 +182,17 @@ var logoStyles = (0, _tailwindvariants.tv)({
  * @param {number} props.logo.width - Width of the logo image.
  * @param {boolean} props.showSearchTrigger - Whether to show the search trigger.
  * @param {React.ReactNode} props.searchModal - Modal to render as the search modal.
- * @param {function} props.onToggleSearchModal - Function to toggle the search modal.
+ * @param {function} props.onToggleSearch - Function to toggle the search modal.
  * @param {string} [props.className] - Additional CSS classes for the Frame.
  * @param {React.ReactNode} props.children - Content to render within the Frame.
  * @param {boolean} [props.alwaysShowUserMenuInTopBar] - Whether to always show the user menu in the top bar.
  * @param {React.ReactNode} [props.headerAccessory] - Accessory to render in the header.
  * @returns {React.ReactElement} The rendered Frame component.
  */ var Frame = function(param) {
-    var navigation = param.navigation, announcement = param.announcement, logo = param.logo, children = param.children, className = param.className, userMenu = param.userMenu, moreActions = param.moreActions, _param_showSearchTrigger = param.showSearchTrigger, showSearchTrigger = _param_showSearchTrigger === void 0 ? true : _param_showSearchTrigger, _param_alwaysShowUserMenuInTopBar = param.alwaysShowUserMenuInTopBar, alwaysShowUserMenuInTopBar = _param_alwaysShowUserMenuInTopBar === void 0 ? false : _param_alwaysShowUserMenuInTopBar, searchModal = param.searchModal, onToggleSearchModal = param.onToggleSearchModal, headerAccessory = param.headerAccessory;
+    var navigation = param.navigation, announcement = param.announcement, logo = param.logo, children = param.children, className = param.className, userMenu = param.userMenu, moreActions = param.moreActions, _param_showSearchTrigger = param.showSearchTrigger, showSearchTrigger = _param_showSearchTrigger === void 0 ? true : _param_showSearchTrigger, _param_alwaysShowUserMenuInTopBar = param.alwaysShowUserMenuInTopBar, alwaysShowUserMenuInTopBar = _param_alwaysShowUserMenuInTopBar === void 0 ? false : _param_alwaysShowUserMenuInTopBar, _param_searchLabel = param.searchLabel, searchLabel = _param_searchLabel === void 0 ? "Search" : _param_searchLabel, _param_searchIcon = param.searchIcon, searchIcon = _param_searchIcon === void 0 ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+        source: _polarisicons.SearchMajor,
+        color: "subdued"
+    }) : _param_searchIcon, searchModal = param.searchModal, onToggleSearch = param.onToggleSearch, headerAccessory = param.headerAccessory;
     var darkMode = (0, _AppProvider.useDarkMode)().darkMode;
     var _useContext = (0, _react.useContext)(_AppProvider.FrameContext), contentIsInIframe = _useContext.contentIsInIframe, contentIsFullPage = _useContext.contentIsFullPage, showMobileNavigation = _useContext.showMobileNavigation, setShowMobileNavigation = _useContext.setShowMobileNavigation, modalIsOpen = _useContext.modalIsOpen, paneIsOpen = _useContext.paneIsOpen, embedded = _useContext.embedded;
     var _useState = _sliced_to_array((0, _react.useState)(""), 2), searchTriggerShortcutText = _useState[0], setSearchTriggerShortcutText = _useState[1];
@@ -227,7 +230,7 @@ var logoStyles = (0, _tailwindvariants.tv)({
         var handleSearchShortcut = function(e) {
             if ((e.metaKey || e.ctrlKey) && e.key === "k") {
                 e.preventDefault();
-                onToggleSearchModal();
+                onToggleSearch();
             }
         };
         window.addEventListener("keydown", handleSearchShortcut);
@@ -250,18 +253,15 @@ var logoStyles = (0, _tailwindvariants.tv)({
     var searchTrigger = showSearchTrigger ? /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
         className: "w-full pl-2 pr-3 h-8 rounded-md flex items-center gap-2 cursor-pointer bg-tint-2 hover:bg-tint-3 active:bg-tint-4 dark:bg-tint-alt-2 dark:hover:bg-tint-alt-3 dark:active:bg-tint-alt-4",
         onClick: function() {
-            return onToggleSearchModal();
+            return onToggleSearch();
         },
         children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
-                source: _polarisicons.SearchMajor,
-                color: "subdued"
-            }),
+            searchIcon,
             /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                 className: "flex-1 text-low flex items-center justify-between gap-1",
                 children: [
                     /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                        children: "Search"
+                        children: searchLabel
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                         className: "text-xs text-lowest hidden @md:block",

package/dist/cjs/components/HorizontalStack.js

@@ -93,7 +93,13 @@ var styles = (0, _tailwindvariants.tv)({
     base: "Litho-HorizontalStack flex flex-row",
     variants: {
         gap: {
-            none: "",
+            none: "gap-0",
+            // Semantic values (recommended)
+            xs: "gap-1",
+            sm: "gap-2",
+            md: "gap-4",
+            lg: "gap-8",
+            // Numeric values (backwards compatibility)
             "0": "gap-0",
             "px": "gap-px",
             "0.5": "gap-0.5",
@@ -101,6 +107,7 @@ var styles = (0, _tailwindvariants.tv)({
             "2": "gap-2",
             "3": "gap-3",
             "4": "gap-4",
+            "5": "gap-5",
             "6": "gap-6",
             "8": "gap-8",
             "10": "gap-10"
@@ -136,7 +143,7 @@ var styles = (0, _tailwindvariants.tv)({
  * @param {Object} [props={}] - Component props.
  * @param {string} [props.as='div'] - The HTML element to render. Defaults to `div`.
  * @param {React.ReactNode} [props.children] - Child elements to render inside the stack.
- * @param {string} [props.gap] - Spacing between children. Options: 'none', '0', 'px', '0.5', '1', '2', '3', '4', '6', '8', '10'.
+ * @param {('none'|'xs'|'sm'|'md'|'lg'|'0'|'px'|'0.5'|'1'|'2'|'3'|'4'|'5'|'6'|'8'|'10')} [props.gap] - Spacing between children. Semantic options: 'none', 'xs' (1), 'sm' (2), 'md' (4), 'lg' (8). Numeric options: '0', 'px', '0.5', '1', '2', '3', '4', '5', '6', '8', '10'.
  * @param {string} [props.id] - Optional ID for the component.
  * @param {string} [props.className] - Additional custom class names to apply to the component.
  * @param {string} [props.align='start'] - Horizontal alignment of children. Options: 'start', 'center', 'end'.

package/dist/cjs/components/Icon.js

@@ -84,6 +84,7 @@ var iconStyles = (0, _tailwindvariants.tv)({
             default: "fill-higher",
             base: "fill-higher",
             subdued: "fill-low",
+            lower: "fill-lower",
             link: "fill-link",
             primary: "fill-link",
             alternate: "fill-alternate",

package/dist/cjs/components/List.js

@@ -19,9 +19,9 @@ var styles = (0, _tailwindvariants.tv)({
             number: "list-decimal"
         },
         spacing: {
-            loose: "space-y-2",
-            normal: "space-y-1",
-            tight: "space-y-0"
+            loose: "space-y-3",
+            normal: "space-y-2",
+            tight: "space-y-1"
         }
     }
 });

package/dist/cjs/components/Pane.js

@@ -13,6 +13,7 @@ var _jsxruntime = require("react/jsx-runtime");
 var _polarisicons = require("@shopify/polaris-icons");
 var _tailwindvariants = require("tailwind-variants");
 var _react = require("react");
+var _Text = /*#__PURE__*/ _interop_require_default(require("./Text"));
 var _Button = /*#__PURE__*/ _interop_require_default(require("./Button"));
 var _Popover = /*#__PURE__*/ _interop_require_default(require("./Popover"));
 var _ActionList = /*#__PURE__*/ _interop_require_default(require("./ActionList"));
@@ -69,10 +70,13 @@ 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-Pane hidden md:block fixed inset-0 w-full md:left-auto md:max-w-100 block bg-surface-highest shadow-card-strong pointer-events-auto"
+    base: "Litho-Pane hidden md:block fixed inset-0 w-full md:left-auto md:max-w-[var(--litho-pane-width)] block bg-surface-lowest shadow-pane-inner pointer-events-auto"
 });
 var innerStyles = (0, _tailwindvariants.tv)({
-    base: "flex flex-col overflow-y-auto h-full"
+    base: "relative flex flex-col overflow-y-auto h-full"
+});
+var dragHandleStyles = (0, _tailwindvariants.tv)({
+    base: "cursor-col-resize absolute top-0 left-0 w-1 h-full transition-colors duration-300 hover-delay hover:bg-tint-3"
 });
 var PaneContext = /*#__PURE__*/ (0, _react.createContext)({});
 function Pane() {
@@ -114,27 +118,57 @@ function Pane() {
 }
 function Header() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var children = props.children, _props_actions = props.actions, actions = _props_actions === void 0 ? [] : _props_actions, _props_showCloseButton = props.showCloseButton, showCloseButton = _props_showCloseButton === void 0 ? true : _props_showCloseButton, _props_bottomBorder = props.bottomBorder, bottomBorder = _props_bottomBorder === void 0 ? true : _props_bottomBorder, subHeader = props.subHeader;
+    var title = props.title, subtitle = props.subtitle, _props_actions = props.actions, actions = _props_actions === void 0 ? [] : _props_actions, _props_showCloseButton = props.showCloseButton, showCloseButton = _props_showCloseButton === void 0 ? true : _props_showCloseButton, _props_bottomBorder = props.bottomBorder, bottomBorder = _props_bottomBorder === void 0 ? true : _props_bottomBorder, subHeader = props.subHeader, tmp = props.backAction, _backAction = tmp === void 0 ? null : tmp, _props_expanded = props.expanded, expanded = _props_expanded === void 0 ? false : _props_expanded, _props_onToggleExpand = props.onToggleExpand, onToggleExpand = _props_onToggleExpand === void 0 ? function() {} : _props_onToggleExpand, _props_allowExpand = props.allowExpand, allowExpand = _props_allowExpand === void 0 ? true : _props_allowExpand;
     var onClose = (0, _react.useContext)(PaneContext).onClose;
     var showActionsOrClose = actions.length > 0 || showCloseButton;
-    var childCount = _react.Children.count(children);
     var _useState = _sliced_to_array((0, _react.useState)(null), 2), showActionsPopover = _useState[0], setShowActionsPopover = _useState[1];
+    (0, _react.useEffect)(function() {
+        var width = expanded ? 'var(--litho-pane-width-expanded)' : 'var(--litho-pane-width-default)';
+        document.documentElement.style.setProperty('--litho-pane-width', width);
+    }, [
+        expanded
+    ]);
+    var backAction = _backAction ? /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        className: "Litho-Page__Header--BackAction",
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+            plain: true,
+            icon: _polarisicons.ArrowLeftMinor,
+            onClick: function() {
+                return _backAction === null || _backAction === void 0 ? void 0 : _backAction.onAction();
+            },
+            accessibilityLabel: _backAction === null || _backAction === void 0 ? void 0 : _backAction.accessibilityLabel
+        })
+    }) : null;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        className: "Litho-Pane__Header",
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-                className: "grid grid-cols-12 min-h-14 px-2 border-edge-subdued ".concat(bottomBorder ? "border-b" : ""),
+                className: "flex items-center justify-between min-h-14 px-2 border-edge-subdued ".concat(bottomBorder ? "border-b" : ""),
                 children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                        className: "grid grid-cols-5 col-span-10",
-                        children: _react.Children.map(children, function(child, index) {
-                            return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                                className: "flex col-span-2 items-center ".concat(childCount === 1 ? "col-span-5" : "", " ").concat(index > 0 ? "justify-center" : ""),
-                                children: child
-                            });
-                        })
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                        className: "flex items-center gap-2",
+                        children: [
+                            backAction,
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                                children: [
+                                    title && typeof title === "string" ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        variant: "headingMd",
+                                        className: "!leading-5",
+                                        clampLines: 1,
+                                        children: title
+                                    }) : title,
+                                    subtitle && typeof subtitle === "string" ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        color: "subdued",
+                                        className: "!leading-4",
+                                        clampLines: 1,
+                                        children: subtitle
+                                    }) : subtitle
+                                ]
+                            })
+                        ]
                     }),
                     showActionsOrClose && /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-                        className: "flex col-span-2 items-center justify-end",
+                        className: "flex items-center justify-end",
                         children: [
                             actions.map(function(action, index) {
                                 var showPopover = action.subActions || action.subSections;
@@ -171,6 +205,16 @@ function Header() {
                                 }
                                 return innerContent;
                             }),
+                            allowExpand && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                className: "hidden xl:block",
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                    plain: true,
+                                    icon: expanded ? _polarisicons.MinimizeMajor : _polarisicons.MaximizeMajor,
+                                    onClick: onToggleExpand,
+                                    tooltip: expanded ? "Minimize" : "Expand",
+                                    tooltipPosition: "below"
+                                })
+                            }),
                             showCloseButton && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
                                 plain: true,
                                 icon: _polarisicons.CancelMajor,
@@ -192,9 +236,9 @@ function Header() {
 Pane.Header = Header;
 function Content() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var children = props.children;
+    var children = props.children, _props_padded = props.padded, padded = _props_padded === void 0 ? true : _props_padded, className = props.className;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-        className: "flex-1 overflow-auto",
+        className: "Litho-Pane__Content flex-1 overflow-auto ".concat(padded ? "p-2" : "", " ").concat(className),
         children: children
     });
 }
@@ -203,7 +247,7 @@ function Footer() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var children = props.children, _props_topBorder = props.topBorder, topBorder = _props_topBorder === void 0 ? true : _props_topBorder;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-        className: "min-h-14 ".concat(topBorder ? "border-t border-edge-subdued" : ""),
+        className: "Litho-Pane__Footer min-h-12 ".concat(topBorder ? "border-t border-edge-subdued" : ""),
         children: children
     });
 }