@0xsquid/ui 2.2.0 → 2.2.3

package/dist/cjs/index.js

@@ -2875,7 +2875,7 @@ function Checkmark1Icon({ className, size = "16", }) {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 16 16", fill: "none", className: className, children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.8809 2.82977C13.3432 3.13201 13.4729 3.75174 13.1706 4.21399L7.50398 12.8807C7.3318 13.144 7.04572 13.3109 6.73174 13.3313C6.41777 13.3517 6.11252 13.2231 5.90775 12.9842L2.90775 9.4842C2.54833 9.06487 2.59689 8.43357 3.01622 8.07415C3.43554 7.71473 4.06684 7.76329 4.42627 8.18262L6.55918 10.671L11.4967 3.11949C11.7989 2.65725 12.4187 2.52753 12.8809 2.82977Z", fill: "currentColor" }) }));
 }
 function Checkmark2Icon({ className, size = "16", style, }) {
-    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM15.774 10.1333C16.1237 9.70582 16.0607 9.0758 15.6332 8.72607C15.2058 8.37635 14.5758 8.43935 14.226 8.86679L10.4258 13.5116L9.20711 12.2929C8.81658 11.9024 8.18342 11.9024 7.79289 12.2929C7.40237 12.6834 7.40237 13.3166 7.79289 13.7071L9.79289 15.7071C9.99267 15.9069 10.2676 16.0129 10.5498 15.9988C10.832 15.9847 11.095 15.8519 11.274 15.6333L15.774 10.1333Z", fill: "none", className: className, style: style }) }));
+    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM15.774 10.1333C16.1237 9.70582 16.0607 9.0758 15.6332 8.72607C15.2058 8.37635 14.5758 8.43935 14.226 8.86679L10.4258 13.5116L9.20711 12.2929C8.81658 11.9024 8.18342 11.9024 7.79289 12.2929C7.40237 12.6834 7.40237 13.3166 7.79289 13.7071L9.79289 15.7071C9.99267 15.9069 10.2676 16.0129 10.5498 15.9988C10.832 15.9847 11.095 15.8519 11.274 15.6333L15.774 10.1333Z", fill: "currentColor", className: className, style: style }) }));
 }
 
 function DotGrid1x3HorizontalIcon({ className, size = "16", }) {
@@ -3146,14 +3146,14 @@ const THEME_COLOR_KEYS = [
     "status-positive",
     "status-negative",
     "status-partial",
-    // LG button variant colors
+    // lg button variant colors
     "button-lg-primary-bg",
     "button-lg-primary-text",
     "button-lg-secondary-bg",
     "button-lg-secondary-text",
     "button-lg-tertiary-bg",
     "button-lg-tertiary-text",
-    // MD button variant colors
+    // md button variant colors
     "button-md-primary-bg",
     "button-md-primary-text",
     "button-md-secondary-bg",
@@ -3170,6 +3170,10 @@ const THEME_COLOR_KEYS = [
     "animation-text",
     // modal
     "modal-backdrop",
+    // menu
+    "menu-bg",
+    "menu-text",
+    "menu-backdrop",
     // material-* variants are generated internally and are not part of the public theme
     "material-light-thin",
     "material-light-average",
@@ -3193,8 +3197,8 @@ const THEME_BORDER_RADIUS_KEYS = [
     "button-md-tertiary",
     "container",
     "input",
-    "tooltip-sm",
-    "tooltip-lg",
+    "menu-sm",
+    "menu-lg",
     "modal",
 ];
 const THEME_FONT_SIZE_KEYS = [
@@ -3246,7 +3250,7 @@ function SearchIcon({ className, size = "24", }) {
 
 function Input(_a) {
     var { placeholder = "Search", showIcon = true, className, icon, isError = false, isWarning = false, containerClassName, actionButtonProps, autoFocusTimeout, inputRef: inputRefProp } = _a, props = __rest$1(_a, ["placeholder", "showIcon", "className", "icon", "isError", "isWarning", "containerClassName", "actionButtonProps", "autoFocusTimeout", "inputRef"]);
-    const showActionButton = !!actionButtonProps;
+    const showActionButton = actionButtonProps != null;
     const localInputRef = React$1.useRef(null);
     const inputRef = inputRefProp !== null && inputRefProp !== void 0 ? inputRefProp : localInputRef;
     React$1.useEffect(() => {
@@ -3260,10 +3264,10 @@ function Input(_a) {
             clearTimeout(timeoutId);
         };
     }, [autoFocusTimeout]);
-    return (jsxRuntime.jsxs("div", { className: cn("tw-text-input-placeholder tw-relative tw-w-full", containerClassName), children: [jsxRuntime.jsx("input", Object.assign({}, props, { ref: inputRef, "aria-invalid": isError, className: cn("tw-font-regular tw-rounded-input tw-bg-input-bg tw-text-input-text placeholder:tw-text-input-placeholder selection:tw-bg-input-selection tw-relative tw-h-10 tw-w-full tw-border tw-border-material-light-thin tw-text-body-small invalid:tw-outline-status-negative", showIcon ? "tw-pl-[40px]" : "tw-px-squid-s", showActionButton ? "tw-pr-[70px]" : "tw-pr-2.5", isError && "!tw-outline-status-negative", className, isWarning && "focus-visible:tw-outline-status-partial"), placeholder: placeholder })), showIcon ? (jsxRuntime.jsx("div", { className: "tw-absolute tw-inset-y-0 tw-left-0 tw-flex tw-h-full tw-w-[44px] tw-items-center tw-justify-center tw-px-squid-xs", children: icon || jsxRuntime.jsx(SearchIcon, {}) })) : null, showActionButton ? (jsxRuntime.jsx("div", { className: "tw-absolute tw-inset-y-0 tw-right-1.5 tw-flex tw-items-center tw-justify-center", children: jsxRuntime.jsx(InputActionButton, Object.assign({}, actionButtonProps)) })) : null] }));
+    return (jsxRuntime.jsxs("div", { className: cn("tw-relative tw-w-full tw-text-input-placeholder", containerClassName), children: [jsxRuntime.jsx("input", Object.assign({}, props, { ref: inputRef, "aria-invalid": isError, className: cn("tw-font-regular tw-relative tw-h-10 tw-w-full tw-rounded-input tw-border tw-border-material-light-thin tw-bg-input-bg tw-text-body-small tw-text-input-text selection:tw-bg-input-selection placeholder:tw-text-input-placeholder invalid:tw-outline-status-negative", showIcon ? "tw-pl-[40px]" : "tw-px-squid-s", showActionButton ? "tw-pr-[70px]" : "tw-pr-2.5", isError && "!tw-outline-status-negative", className, isWarning && "focus-visible:tw-outline-status-partial"), placeholder: placeholder })), showIcon ? (jsxRuntime.jsx("div", { className: "tw-absolute tw-inset-y-0 tw-left-0 tw-flex tw-h-full tw-w-[44px] tw-items-center tw-justify-center tw-px-squid-xs", children: icon || jsxRuntime.jsx(SearchIcon, {}) })) : null, showActionButton ? (jsxRuntime.jsx("div", { className: "tw-absolute tw-inset-y-0 tw-right-1.5 tw-flex tw-items-center tw-justify-center", children: jsxRuntime.jsx(InputActionButton, Object.assign({}, actionButtonProps)) })) : null] }));
 }
 const InputActionButton = ({ onClick, variant = "tertiary", label = "Paste", }) => {
-    return (jsxRuntime.jsx(Button$1, { size: "md", variant: variant, onClick: onClick, className: "!tw-h-[30px] !tw-w-fit !tw-min-w-0", children: jsxRuntime.jsx(CaptionText, { children: label }) }));
+    return (jsxRuntime.jsx(Button$1, { size: "md", variant: variant, onClick: onClick, className: "!tw-h-[30px] !tw-w-fit !tw-min-w-0 !tw-rounded-input", children: jsxRuntime.jsx(CaptionText, { children: label }) }));
 };
 
 /*
@@ -7395,7 +7399,6 @@ const create = (createState) => createState ? createImpl(createState) : createIm
 
 const useSettingsStore = create(() => ({
     showProgressAnimation: true,
-    showModalBackdrop: true,
 }));
 
 const AnimationWrapper = (playerProps) => {
@@ -18458,9 +18461,9 @@ const defaultBorderRadius = {
     "button-md-secondary": spacing$1["squid-m"],
     "button-md-tertiary": spacing$1["squid-m"],
     container: spacing$1["squid-l"],
-    input: "9px",
-    "tooltip-sm": spacing$1["squid-s"],
-    "tooltip-lg": spacing$1["squid-m"],
+    input: "9999px",
+    "menu-sm": spacing$1["squid-s"],
+    "menu-lg": spacing$1["squid-m"],
     modal: spacing$1["squid-l"],
 };
 const lightTheme = {
@@ -18493,6 +18496,33 @@ const lightTheme = {
         "status-partial": "#EC9213",
         // highlight
         "highlight-700": "#E4FE53",
+        // animation
+        "animation-bg": "#B893EC",
+        "animation-text": "#FBFBFD",
+        // buttons
+        "button-lg-primary-bg": "#B893EC",
+        "button-lg-primary-text": "#FBFBFD",
+        "button-lg-secondary-bg": "#17191C",
+        "button-lg-secondary-text": "#EDEEF3",
+        "button-lg-tertiary-bg": "#EDEEF3",
+        "button-lg-tertiary-text": "#292C32",
+        "button-md-primary-bg": "#B893EC",
+        "button-md-primary-text": "#FBFBFD",
+        "button-md-secondary-bg": "#17191C",
+        "button-md-secondary-text": "#EDEEF3",
+        "button-md-tertiary-bg": "#EDEEF3",
+        "button-md-tertiary-text": "#292C32",
+        // input
+        "input-bg": "#FBFBFD",
+        "input-placeholder": "#A7ABBE",
+        "input-selection": "#292C32",
+        "input-text": "#292C32",
+        // menu
+        "menu-bg": "#FBFBFDA8",
+        "menu-text": "#17191CA8",
+        "menu-backdrop": "#17191C1A",
+        // modal
+        "modal-backdrop": "#FBFBFD54",
     },
 };
 const darkTheme = {
@@ -18525,6 +18555,33 @@ const darkTheme = {
         "status-partial": "#F3AF25",
         // highlight
         "highlight-700": "#E4FE53",
+        // animation
+        "animation-bg": "#9E79D2",
+        "animation-text": "#FBFBFD",
+        // buttons
+        "button-lg-primary-bg": "#9E79D2",
+        "button-lg-primary-text": "#FBFBFD",
+        "button-lg-secondary-bg": "#FBFBFD",
+        "button-lg-secondary-text": "#292C32",
+        "button-lg-tertiary-bg": "#292C32",
+        "button-lg-tertiary-text": "#D1D6E0",
+        "button-md-primary-bg": "#9E79D2",
+        "button-md-primary-text": "#FBFBFD",
+        "button-md-secondary-bg": "#FBFBFD",
+        "button-md-secondary-text": "#292C32",
+        "button-md-tertiary-bg": "#292C32",
+        "button-md-tertiary-text": "#D1D6E0",
+        // input
+        "input-bg": "#17191C",
+        "input-placeholder": "#676B7E",
+        "input-text": "#D1D6E0",
+        "input-selection": "#D1D6E0",
+        // menu
+        "menu-bg": "#17191CA8",
+        "menu-text": "#FBFBFDA8",
+        "menu-backdrop": "#FBFBFD1A",
+        // modal
+        "modal-backdrop": "#17191C54",
     },
 };
 
@@ -18576,15 +18633,15 @@ function DetailsToolbar({ errorMessage, helpButton, isLoading, isEmpty, flipButt
 }
 
 const borderRadiusClassMap = {
-    sm: "tw-rounded-tooltip-sm",
-    lg: "tw-rounded-tooltip-lg",
+    sm: "tw-rounded-menu-sm before:tw-rounded-menu-sm",
+    lg: "tw-rounded-menu-lg before:tw-rounded-menu-lg",
 };
 function Menu(_a) {
     var { children, containerClassName, contentClassName, rounded = "lg", menuRef, contentWrapperProps } = _a, props = __rest$1(_a, ["children", "containerClassName", "contentClassName", "rounded", "menuRef", "contentWrapperProps"]);
-    return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn("tw-max-w-[320px]", containerClassName), ref: menuRef, children: jsxRuntime.jsxs("div", { className: cn("tw-relative tw-inline-flex tw-max-w-full tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-m tw-bg-material-dark-thick tw-p-squid-xs tw-text-center tw-text-material-light-thick group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2", borderRadiusClassMap[rounded], contentClassName, 
+    return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn("tw-max-w-[320px]", containerClassName), ref: menuRef, children: jsxRuntime.jsxs("div", { className: cn("tw-bg-menu-bg tw-text-menu-text tw-relative tw-inline-flex tw-max-w-full tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-p-squid-xs tw-text-center group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2", borderRadiusClassMap[rounded], contentClassName, 
             // :before element to create a backdrop
             // Not applied to the div itself because the backdrop-filter spec does not apply nested backdrop filters
-            "before:tw-absolute before:tw-inset-0 before:-tw-z-[1] before:tw-h-full before:tw-w-full before:tw-rounded-squid-m before:tw-backdrop-blur/20 before:tw-backdrop-saturate-150"), children: [typeof children === "string" ? (jsxRuntime.jsx(CaptionText, { className: "tw-z-20 tw-self-stretch !tw-leading-[10px]", children: children })) : (jsxRuntime.jsx("div", Object.assign({}, contentWrapperProps, { className: cn("tw-z-20 tw-max-w-full tw-text-caption tw-font-caption", contentWrapperProps === null || contentWrapperProps === void 0 ? void 0 : contentWrapperProps.className), children: children }))), jsxRuntime.jsx("div", { className: cn("tw-absolute tw-inset-0 tw-z-10 tw-h-full tw-w-full tw-border tw-border-material-light-thin tw-bg-material-light-thin", borderRadiusClassMap[rounded]) })] }) })));
+            "before:tw-absolute before:tw-inset-0 before:-tw-z-[1] before:tw-h-full before:tw-w-full before:tw-backdrop-blur/20 before:tw-backdrop-saturate-150"), children: [typeof children === "string" ? (jsxRuntime.jsx(CaptionText, { className: "tw-z-20 tw-self-stretch !tw-leading-[10px]", children: children })) : (jsxRuntime.jsx("div", Object.assign({}, contentWrapperProps, { className: cn("tw-z-20 tw-max-w-full tw-text-caption tw-font-caption", contentWrapperProps === null || contentWrapperProps === void 0 ? void 0 : contentWrapperProps.className), children: children }))), jsxRuntime.jsx("div", { className: cn("tw-bg-menu-backdrop tw-absolute tw-inset-0 tw-z-10 tw-h-full tw-w-full tw-border tw-border-material-light-thin", borderRadiusClassMap[rounded]) })] }) })));
 }
 
 function DropdownMenu({ dropdownRef, className, menuRef, isHidden = false, listClassName, containerClassName, children, contentWrapperProps, menuContentClassName, }) {
@@ -18601,7 +18658,6 @@ const modalWidthClassMap = {
 };
 function Modal({ children, className, onBackdropClick, isOpen: _isOpen = true, maxHeight = false, width = "large", }) {
     const [isOpen, setIsOpen] = React$1.useState(_isOpen);
-    const showBackdrop = useSettingsStore((state) => state.showModalBackdrop);
     React$1.useEffect(() => {
         if (_isOpen) {
             setIsOpen(true);
@@ -18625,8 +18681,7 @@ function Modal({ children, className, onBackdropClick, isOpen: _isOpen = true, m
             : undefined, style: {
             [CSS_VARS.BLUR_IN_DURATION]: `${ANIMATION_DURATIONS.SHOW_MODAL}ms`,
             [CSS_VARS.BLUR_OUT_DURATION]: `${ANIMATION_DURATIONS.HIDE_MODAL}ms`,
-        }, className: cn("tw-absolute tw-inset-0 tw-z-40 tw-flex tw-items-start tw-justify-center tw-px-squid-xs tw-py-squid-xl tw-pb-squid-m", showBackdrop &&
-            (_isOpen ? "tw-animate-blur-in" : "tw-animate-blur-out")), children: jsxRuntime.jsx("div", { style: {
+        }, className: cn("tw-absolute tw-inset-0 tw-z-40 tw-flex tw-items-start tw-justify-center tw-px-squid-xs tw-py-squid-xl tw-pb-squid-m", _isOpen ? "tw-animate-blur-in" : "tw-animate-blur-out"), children: jsxRuntime.jsx("div", { style: {
                 [CSS_VARS.SLIDE_TO_TOP_DURATION]: `${ANIMATION_DURATIONS.SHOW_MODAL}ms`,
                 [CSS_VARS.SLIDE_TO_BOTTOM_DURATION]: `${ANIMATION_DURATIONS.HIDE_MODAL}ms`,
             }, className: cn("tw-relative tw-flex tw-max-h-modal-compact tw-max-w-full tw-flex-col tw-items-start tw-justify-end tw-gap-squid-xxs tw-self-end mobile-xs:tw-w-modal-compact mobile-lg:tw-max-h-modal-large", className, _isOpen ? "tw-animate-slide-to-top" : "tw-animate-slide-to-bottom", maxHeight && "tw-h-full", modalWidthClassMap[width]), children: children }) })));
@@ -18638,7 +18693,7 @@ const borderTypeClassMap = {
 };
 function ModalContent(_a) {
     var { children, addGap = false, paddingY = false, borderType = "border", className } = _a, props = __rest$1(_a, ["children", "addGap", "paddingY", "borderType", "className"]);
-    return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn("tw-rounded-modal tw-flex tw-h-full tw-max-h-[445px] tw-w-full tw-flex-col tw-self-stretch tw-bg-grey-800 tw-text-grey-300 mobile-sm-height:tw-max-h-[535px]", addGap && "tw-gap-squid-xxs tw-pt-squid-xxs", borderTypeClassMap[borderType], paddingY && "tw-py-squid-xxs", className), children: children })));
+    return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn("tw-flex tw-h-full tw-max-h-[445px] tw-w-full tw-flex-col tw-self-stretch tw-rounded-modal tw-bg-grey-800 tw-text-grey-300 mobile-sm-height:tw-max-h-[535px]", addGap && "tw-gap-squid-xxs tw-pt-squid-xxs", borderTypeClassMap[borderType], paddingY && "tw-py-squid-xxs", className), children: children })));
 }
 function ModalContentDivider() {
     return (jsxRuntime.jsx("svg", { width: "100%", height: "11", viewBox: "0 0 400 11", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("rect", { x: "1", y: "5", width: "398", height: "1", fill: "currentColor" }) }));
@@ -19021,7 +19076,7 @@ function BaseDropdownMenuItem({ label, imageUrl, icon, labelClassName, onClick,
         : {
             ref: contentRef,
         };
-    return (jsxRuntime.jsxs("li", { ref: itemRef, className: "tw-max-h-squid-xl tw-w-full tw-min-w-[160px] tw-px-squid-xxs", children: [jsxRuntime.jsxs(ContentTag, Object.assign({}, contentTagProps, { onClick: onClick, className: cn("tw-flex tw-h-squid-l tw-w-full tw-cursor-pointer tw-items-center tw-gap-squid-xxs tw-rounded-squid-xs tw-px-squid-xxs hover:tw-bg-material-light-thin", isSelected && "tw-bg-material-light-thin"), children: [jsxRuntime.jsx("div", { className: "tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-between tw-rounded-squid-xs", children: imageUrl ? (jsxRuntime.jsx("img", { src: imageUrl, className: "tw-h-full tw-w-full tw-rounded-squid-xxs" })) : (icon) }), jsxRuntime.jsx(CaptionText, { className: cn(labelClassName, "tw-max-w-full tw-flex-1 tw-truncate tw-text-left !tw-leading-[18px]"), children: label }), (control === null || control === void 0 ? void 0 : control.type) === "switch" ? (jsxRuntime.jsx("span", { className: "tw-flex tw-items-center tw-pl-squid-l", children: jsxRuntime.jsx(Switch, Object.assign({ size: "small" }, control)) })) : detail ? (jsxRuntime.jsx("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: detail })) : null] })), children] }));
+    return (jsxRuntime.jsxs("li", { ref: itemRef, className: "tw-max-h-squid-xl tw-w-full tw-min-w-[160px] tw-px-squid-xxs", children: [jsxRuntime.jsxs(ContentTag, Object.assign({}, contentTagProps, { onClick: onClick, className: cn("tw-rounded-menu-sm tw-flex tw-h-squid-l tw-w-full tw-cursor-pointer tw-items-center tw-gap-squid-xxs tw-px-squid-xxs hover:tw-bg-material-light-thin", isSelected && "tw-bg-material-light-thin"), children: [jsxRuntime.jsx("div", { className: "tw-rounded-menu-sm tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-between", children: imageUrl ? (jsxRuntime.jsx("img", { src: imageUrl, className: "tw-h-full tw-w-full tw-rounded-squid-xxs" })) : (icon) }), jsxRuntime.jsx(CaptionText, { className: cn(labelClassName, "tw-max-w-full tw-flex-1 tw-truncate tw-text-left !tw-leading-[18px]"), children: label }), (control === null || control === void 0 ? void 0 : control.type) === "switch" ? (jsxRuntime.jsx("span", { className: "tw-flex tw-items-center tw-pl-squid-l", children: jsxRuntime.jsx(Switch, Object.assign({ size: "small" }, control)) })) : detail ? (jsxRuntime.jsx("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: detail })) : null] })), children] }));
 }
 function DropdownMenuItem(props) {
     if (props.submenu) {
@@ -19130,7 +19185,7 @@ function ListItem(_a) {
         if (isDropdownOpen)
             closeDropdown();
     };
-    return (jsxRuntime.jsxs("li", Object.assign({}, containerProps, { ref: itemRef, className: cn("tw-highlight-adjacent tw-relative tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300", listItemSizeMap[size], extraPadding && "tw-px-squid-xs", compactOnMobile
+    return (jsxRuntime.jsxs("li", Object.assign({}, containerProps, { ref: itemRef, className: cn("tw-relative tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300 tw-highlight-adjacent", listItemSizeMap[size], extraPadding && "tw-px-squid-xs", compactOnMobile
             ? `${collapsedListItemClassMap[size]} mobile-lg:tw-w-full`
             : "tw-w-full", className), children: [jsxRuntime.jsxs(ItemTag, Object.assign({}, itemProps, { onClick: handleItemClick, className: cn("tw-group/list-item tw-peer/list-item tw-relative tw-flex tw-w-full tw-max-w-full tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs", (isSelected || isDropdownOpen) && "tw-bg-material-light-thin", isInteractive && "hover:tw-bg-material-light-thin"), children: [size === "large" ? (jsxRuntime.jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon || (jsxRuntime.jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, placeholderImageUrl: placeholderImageUrl, size: "md", rounded: rounded })) })) : (jsxRuntime.jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon || (jsxRuntime.jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxRuntime.jsxs("div", { className: cn("tw-flex tw-h-[40px] tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xxs", 
                         // 'large' variant has extra padding
@@ -19144,9 +19199,10 @@ function ListItem(_a) {
                     dropdownPositionClassMap$1[dropdownStyles.position]), dropdownRef: dropdownRef, children: dropdownMenuContent })) : null] })));
 }
 const ListItemActionsButton = React$1.forwardRef((_a, ref) => {
-    var { isActive, className } = _a, props = __rest$1(_a, ["isActive", "className"]);
+    var { isActive = false, className } = _a, props = __rest$1(_a, ["isActive", "className"]);
     return (jsxRuntime.jsx("button", Object.assign({}, props, { ref: ref, className: cn("tw-peer tw-absolute tw-right-squid-s tw-top-squid-xxs tw-flex tw-h-squid-xl tw-w-squid-xl tw-items-center tw-justify-center tw-rounded-squid-xs tw-p-2 tw-text-grey-300 hover:tw-bg-material-light-thin hover:tw-opacity-100 focus-visible:tw-opacity-100", isActive ? "tw-bg-material-light-thin tw-opacity-100" : "tw-opacity-0", className), children: jsxRuntime.jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })));
 });
+ListItemActionsButton.displayName = "ListItemActionsButton";
 
 const dropdownPositionClassMap = {
     top: "tw-right-squid-xxs tw-bottom-[50px]",
@@ -19512,7 +19568,7 @@ const SwapStepsCollapsed = React$1.forwardRef((props, ref) => {
     const routeStepsListRef = React$1.useRef(null);
     const handleToggleRouteSteps = () => {
         if (isRouteVisible) {
-            if (routeStepsListRef.current) {
+            if (routeStepsListRef.current != null) {
                 // reset scroll position of route steps list
                 routeStepsListRef.current.scrollTo({
                     top: routeStepsListRef.current.scrollHeight,
@@ -19528,18 +19584,18 @@ const SwapStepsCollapsed = React$1.forwardRef((props, ref) => {
             onOpen === null || onOpen === void 0 ? void 0 : onOpen();
         }
     };
-    return (jsxRuntime.jsx("div", { className: "tw-relative tw-h-[60px] tw-w-modal-compact tw-max-w-full tw-rounded-squid-l mobile-lg:tw-min-w-modal-large", children: jsxRuntime.jsx("div", { className: cn("tw-absolute tw-bottom-0 tw-z-10 tw-flex tw-w-full tw-max-w-modal-compact tw-flex-col tw-justify-end tw-gap-squid-xxs tw-overflow-hidden tw-rounded-squid-l mobile-lg:tw-max-w-modal-large", isRouteVisible ? "tw-h-[535px]" : "tw-h-[60px]"), children: jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col tw-justify-end", children: [!isRouteVisible && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "tw-absolute tw-left-0 tw-top-0 tw-z-10 tw-h-[21px] tw-w-full tw-bg-gradient-to-b tw-from-grey-800 tw-transition-colors group-hover/swap-step-item-button:tw-from-grey-600" }), jsxRuntime.jsx("span", { className: "tw-absolute tw-bottom-0 tw-left-0 tw-z-10 tw-h-[21px] tw-w-full tw-bg-gradient-to-t tw-from-grey-800 tw-transition-colors group-hover/swap-step-item-button:tw-from-grey-600" })] })), jsxRuntime.jsx("div", { onClick: handleToggleRouteSteps, style: {
+    return (jsxRuntime.jsx("div", { className: "tw-relative tw-h-[60px] tw-w-modal-compact tw-max-w-full tw-rounded-button-lg-tertiary mobile-lg:tw-min-w-modal-large", children: jsxRuntime.jsx("div", { className: cn("tw-absolute tw-bottom-0 tw-z-10 tw-flex tw-w-full tw-max-w-modal-compact tw-flex-col tw-justify-end tw-gap-squid-xxs tw-overflow-hidden tw-rounded-button-lg-tertiary mobile-lg:tw-max-w-modal-large", isRouteVisible ? "tw-h-[535px]" : "tw-h-[60px]"), children: jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col tw-justify-end", children: [!isRouteVisible && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "tw-absolute tw-left-0 tw-top-0 tw-z-10 tw-h-[21px] tw-w-full tw-bg-gradient-to-b tw-from-grey-800 tw-transition-colors group-hover/swap-step-item-button:tw-from-grey-600" }), jsxRuntime.jsx("span", { className: "tw-absolute tw-bottom-0 tw-left-0 tw-z-10 tw-h-[21px] tw-w-full tw-bg-gradient-to-t tw-from-grey-800 tw-transition-colors group-hover/swap-step-item-button:tw-from-grey-600" })] })), jsxRuntime.jsx("div", { onClick: handleToggleRouteSteps, style: {
                             [CSS_VARS.FADE_OUT_DURATION]: `${ANIMATION_DURATIONS.HIDE_ROUTE}ms`,
                             [CSS_VARS.FADE_IN_DURATION]: `${ANIMATION_DURATIONS.SHOW_ROUTE}ms`,
-                        }, className: cn("tw-absolute tw-top-0 tw-h-[535px] tw-w-full tw-rounded-squid-l tw-bg-material-dark-thick tw-backdrop-blur/10  ", isShowRouteAnimationRunning
+                        }, className: cn("tw-absolute tw-top-0 tw-h-[535px] tw-w-full tw-rounded-button-lg-tertiary tw-bg-material-dark-thick tw-backdrop-blur/10  ", isShowRouteAnimationRunning
                             ? "tw-animate-fade-in"
                             : "tw-animate-fade-out") }), jsxRuntime.jsx("div", { style: {
                             zIndex: 20,
                             display: isRouteVisible ? "none" : "block",
-                        }, onClick: handleToggleRouteSteps, className: "tw-absolute tw-inset-0 tw-h-[60px] tw-cursor-pointer tw-rounded-squid-l tw-border tw-border-material-light-thin hover:tw-border-material-light-average hover:tw-bg-material-light-thin" }), jsxRuntime.jsx("div", { onClick: isShowRouteAnimationRunning ? undefined : handleToggleRouteSteps, style: {
+                        }, onClick: handleToggleRouteSteps, className: "tw-absolute tw-inset-0 tw-h-[60px] tw-cursor-pointer tw-rounded-button-lg-tertiary tw-border tw-border-material-light-thin hover:tw-border-material-light-average hover:tw-bg-material-light-thin" }), jsxRuntime.jsx("div", { onClick: isShowRouteAnimationRunning ? undefined : handleToggleRouteSteps, style: {
                             [CSS_VARS.COLLAPSE_ROUTE_DURATION]: `${ANIMATION_DURATIONS.HIDE_ROUTE}ms`,
                             [CSS_VARS.EXPAND_ROUTE_DURATION]: `${ANIMATION_DURATIONS.SHOW_ROUTE}ms`,
-                        }, className: cn("tw-relative tw-h-[60px] tw-max-h-[470px] tw-w-full tw-overflow-hidden tw-rounded-squid-l tw-border tw-border-material-light-thin tw-bg-grey-800 tw-backdrop-blur-2xl mobile-xs-height:tw-max-h-[535px]", isRouteVisible &&
+                        }, className: cn("tw-relative tw-h-[60px] tw-max-h-[470px] tw-w-full tw-overflow-hidden tw-rounded-button-lg-tertiary tw-border tw-border-material-light-thin tw-bg-grey-800 tw-backdrop-blur-2xl mobile-xs-height:tw-max-h-[535px]", isRouteVisible &&
                             (isShowRouteAnimationRunning
                                 ? "tw-animate-expand-route"
                                 : "tw-animate-collapse-route")), children: jsxRuntime.jsxs("div", { className: cn("tw-flex tw-flex-col tw-gap-squid-xxs", isRouteVisible || isShowRouteAnimationRunning
@@ -26954,7 +27010,7 @@ function NumericInput(_a) {
                                                 ? "tw-opacity-0"
                                                 : "" }), jsxRuntime.jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat("%") })] })) : null] }) }))), jsxRuntime.jsx(Tooltip, Object.assign({}, (isLoading ? undefined : balanceButton === null || balanceButton === void 0 ? void 0 : balanceButton.tooltip), { tooltipWidth: "max", childrenClassName: "tw-rounded-squid-s", containerClassName: "tw-rounded-squid-s", children: jsxRuntime.jsxs(BalanceChipTag, { onClick: onBalanceButtonClick, className: cn(buttonClassName, balanceChipClickable
                                 ? interactiveChipClassName
-                                : notInteractiveChipClassName), children: [jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxRuntime.jsx(CaptionText, { children: balanceFormatted }), jsxRuntime.jsx(Chip, { label: "Max" })] }) }))] }))] }));
+                                : notInteractiveChipClassName), children: [jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxRuntime.jsx(CaptionText, { children: balanceFormatted }), !(balanceButton === null || balanceButton === void 0 ? void 0 : balanceButton.hideMaxChip) && jsxRuntime.jsx(Chip, { label: "Max" })] }) }))] }))] }));
 }
 
 function SettingsSlider({ value, type, onChange, decimalsFormat, max, min, isSelected = false, }) {
@@ -68849,7 +68905,7 @@ function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, s
                     ? ""
                     : showSwapInfoSection
                         ? "tw-animate-scale-and-fade-up"
-                        : "tw-animate-scale-and-fade-down"), children: [jsxRuntime.jsx("div", { className: "tw-flex tw-h-[130px] tw-w-full tw-items-center tw-justify-center tw-rounded-tl-squid-l tw-rounded-tr-squid-l tw-bg-animation-bg tw-text-material-light-thin mobile-xs-height:tw-h-[160px]", style: {
+                        : "tw-animate-scale-and-fade-down"), children: [jsxRuntime.jsx("div", { className: "tw-flex tw-h-[130px] tw-w-full tw-items-center tw-justify-center tw-rounded-tl-modal tw-rounded-tr-modal tw-bg-animation-bg tw-text-material-light-thin mobile-xs-height:tw-h-[160px]", style: {
                             // box shadow simulating bottom outline (we do not use css outline because cannot apply it to only one side)
                             boxShadow: "0 1px 0 currentColor",
                         }, children: jsxRuntime.jsx("div", { children: jsxRuntime.jsx(AnimationWrapper, { style: {
@@ -69141,7 +69197,6 @@ const parseSquidTheme = (userTheme, themeType) => {
         // color representing the blend of material-light and grey-300
         "material-light-blend-grey-800": (_b = blendColors(materialVariants["material-light-thin"], fullPublicTheme.color["grey-800"])) !== null && _b !== void 0 ? _b : "",
     };
-    // The default colors for buttons that will be used if the user didn't provide any
     const defaultButtonColors = {
         "button-lg-primary-bg": fullPublicTheme.color["royal-500"],
         "button-lg-primary-text": fullPublicTheme.color[themeType === "light" ? "grey-900" : "grey-100"],
@@ -69169,9 +69224,14 @@ const parseSquidTheme = (userTheme, themeType) => {
     const defaultModalColors = {
         "modal-backdrop": materialVariants["material-dark-average"],
     };
+    const defaultMenuColors = {
+        "menu-bg": materialVariants["material-dark-thick"],
+        "menu-text": materialVariants["material-light-thick"],
+        "menu-backdrop": materialVariants["material-light-thin"],
+    };
     // Adds the internal colors and any missing config to the full theme
     const fullTheme = deepmerge$1({
-        color: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, materialVariants), opacityVariants), defaultButtonColors), defaultInputColors), defaultAnimationColors), defaultModalColors),
+        color: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, materialVariants), opacityVariants), defaultButtonColors), defaultInputColors), defaultAnimationColors), defaultModalColors), defaultMenuColors),
     }, fullPublicTheme);
     return flatten(fullTheme, {
         prefix: THEME_CSS_VARIABLE_PREFIX,
@@ -69549,6 +69609,7 @@ exports.parseSquidTheme = parseSquidTheme;
 exports.pxToRem = pxToRem;
 exports.remToPx = remToPx;
 exports.rgbToHex = rgbToHex;
+exports.spacing = spacing$1;
 exports.statusTextClassMap = statusTextClassMap;
 exports.transactionErrorPauseAnimation = transactionErrorPauseAnimation;
 exports.transactionFailureAnimation = transactionFailureAnimation;

package/dist/cjs/types/components/controls/NumericInput.d.ts

@@ -32,6 +32,7 @@ interface NumericInputProps extends React.InputHTMLAttributes<HTMLInputElement>
     isInteractive?: boolean;
     balanceButton?: {
         tooltip?: Omit<TooltipProps, "children">;
+        hideMaxChip?: boolean;
     };
 }
 export declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, inputModeButton, isInteractive, balanceButton, ...props }: NumericInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/components/layout/SwapConfiguration.d.ts

@@ -33,6 +33,7 @@ interface SwapConfigurationProps {
     };
     balanceButton?: {
         tooltip?: Omit<TooltipProps, "children">;
+        hideMaxChip?: boolean;
     };
     assetsButton?: {
         tooltip?: Omit<TooltipProps, "children">;

package/dist/cjs/types/components/layout/SwapStepsCollapsed.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-import { SwapStep } from "../../types/components";
-export type SwapStepsCollapsedFooterButton = {
+import { type SwapStep } from "../../types/components";
+export interface SwapStepsCollapsedFooterButton {
     label: string;
     link?: string;
     onClick?: () => void;
-};
+}
 interface SwapStepsCollapsedProps {
     steps: SwapStep[];
     currentStepIndex: number;

package/dist/cjs/types/components/lists/DropdownMenuItem.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { AllOrNone } from "../../types";
-import { SwitchProps } from "../controls";
+import { type AllOrNone } from "../../types";
+import { type SwitchProps } from "../controls";
 interface DropdownMenuItemControl extends Omit<SwitchProps, "size"> {
     type: "switch";
 }

package/dist/cjs/types/core/index.d.ts

@@ -1,4 +1,4 @@
 export { MEDIA_QUERIES, CSS_VARS } from "./constants";
 export { darkTheme, lightTheme } from "./themes";
-export { baseTailwindConfig } from "./design-system";
+export { baseTailwindConfig, spacing } from "./design-system";
 export { cn } from "./utils";

package/dist/cjs/types/stories/layout/DetailsToolbar.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { type Meta, type StoryObj } from "@storybook/react";
 import { DetailsToolbar } from "../../components/layout/DetailsToolbar";
 declare const meta: Meta<typeof DetailsToolbar>;
 export default meta;

package/dist/cjs/types/stories/layout/SwapConfiguration.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { type Meta, type StoryObj } from "@storybook/react";
 import { SwapConfiguration } from "../../components/layout/SwapConfiguration";
 declare const meta: Meta<typeof SwapConfiguration>;
 export default meta;
@@ -25,6 +25,7 @@ export declare const FromAddressEmpty: Story;
 export declare const ToAddressEmpty: Story;
 export declare const Error: Story;
 export declare const WithTooltips: Story;
+export declare const HideMaxChip: Story;
 export declare const WithoutSourceConnectLabels: Story;
 export declare const WithoutDestConnectLabels: Story;
 export declare const AddressOnly: Story;

package/dist/cjs/types/types/config.d.ts

@@ -1,6 +1,6 @@
 import { type DeepPartial } from "./utils";
-declare const THEME_COLOR_KEYS: readonly ["grey-100", "grey-200", "grey-300", "grey-400", "grey-500", "grey-600", "grey-700", "grey-800", "grey-900", "royal-300", "royal-400", "royal-500", "royal-700", "highlight-700", "status-positive", "status-negative", "status-partial", "button-lg-primary-bg", "button-lg-primary-text", "button-lg-secondary-bg", "button-lg-secondary-text", "button-lg-tertiary-bg", "button-lg-tertiary-text", "button-md-primary-bg", "button-md-primary-text", "button-md-secondary-bg", "button-md-secondary-text", "button-md-tertiary-bg", "button-md-tertiary-text", "input-placeholder", "input-text", "input-selection", "input-bg", "animation-bg", "animation-text", "modal-backdrop", "material-light-thin", "material-light-average", "material-light-thick", "material-dark-thin", "material-dark-average", "material-dark-thick", "grey-100-005", "material-light-blend-grey-900", "material-light-blend-grey-800"];
-declare const THEME_BORDER_RADIUS_KEYS: readonly ["button-lg-primary", "button-lg-secondary", "button-lg-tertiary", "button-md-primary", "button-md-secondary", "button-md-tertiary", "container", "input", "tooltip-sm", "tooltip-lg", "modal"];
+declare const THEME_COLOR_KEYS: readonly ["grey-100", "grey-200", "grey-300", "grey-400", "grey-500", "grey-600", "grey-700", "grey-800", "grey-900", "royal-300", "royal-400", "royal-500", "royal-700", "highlight-700", "status-positive", "status-negative", "status-partial", "button-lg-primary-bg", "button-lg-primary-text", "button-lg-secondary-bg", "button-lg-secondary-text", "button-lg-tertiary-bg", "button-lg-tertiary-text", "button-md-primary-bg", "button-md-primary-text", "button-md-secondary-bg", "button-md-secondary-text", "button-md-tertiary-bg", "button-md-tertiary-text", "input-placeholder", "input-text", "input-selection", "input-bg", "animation-bg", "animation-text", "modal-backdrop", "menu-bg", "menu-text", "menu-backdrop", "material-light-thin", "material-light-average", "material-light-thick", "material-dark-thin", "material-dark-average", "material-dark-thick", "grey-100-005", "material-light-blend-grey-900", "material-light-blend-grey-800"];
+declare const THEME_BORDER_RADIUS_KEYS: readonly ["button-lg-primary", "button-lg-secondary", "button-lg-tertiary", "button-md-primary", "button-md-secondary", "button-md-tertiary", "container", "input", "menu-sm", "menu-lg", "modal"];
 declare const THEME_FONT_SIZE_KEYS: readonly ["caption", "body-large", "body-medium", "body-small", "heading-small", "heading-medium", "heading-large"];
 declare const THEME_FONT_WEIGHT_KEYS: readonly ["caption", "body-small", "body-medium", "body-large", "heading-small", "heading-medium", "heading-large"];
 declare const THEME_FONT_FAMILY_KEYS: readonly ["squid-main"];
@@ -23,12 +23,12 @@ export interface InternalTheme {
     boxShadow: ThemeBoxShadow;
 }
 /**
- * All the button variant colors are optional
+ * These colors are optional
  * and will be generated internally using the base colors if not provided
  */
-type OptionalColorsKeys = "button-lg-primary-bg" | "button-lg-primary-text" | "button-lg-secondary-bg" | "button-lg-secondary-text" | "button-lg-tertiary-bg" | "button-lg-tertiary-text" | "button-md-primary-bg" | "button-md-primary-text" | "button-md-secondary-bg" | "button-md-secondary-text" | "button-md-tertiary-bg" | "button-md-tertiary-text" | "input-placeholder" | "input-text" | "input-selection" | "input-bg" | "animation-bg" | "animation-text" | "modal-backdrop";
+type OptionalColorsKeys = "button-lg-primary-bg" | "button-lg-primary-text" | "button-lg-secondary-bg" | "button-lg-secondary-text" | "button-lg-tertiary-bg" | "button-lg-tertiary-text" | "button-md-primary-bg" | "button-md-primary-text" | "button-md-secondary-bg" | "button-md-secondary-text" | "button-md-tertiary-bg" | "button-md-tertiary-text" | "input-placeholder" | "input-text" | "input-selection" | "input-bg" | "animation-bg" | "animation-text" | "modal-backdrop" | "menu-bg" | "menu-text" | "menu-backdrop";
 /**
- * These transparent colors are generated internally using the base colors
+ * These colors are generated internally using the base colors
  */
 type HiddenColorsKeys = "material-light-thin" | "material-light-average" | "material-light-thick" | "material-dark-thin" | "material-dark-average" | "material-dark-thick" | "grey-100-005" | "material-light-blend-grey-900" | "material-light-blend-grey-800";
 /**
@@ -39,6 +39,10 @@ export interface PublicTheme extends Omit<InternalTheme, "color"> {
     color: // Remove the hidden colors and the optional colors
     Omit<InternalTheme["color"], HiddenColorsKeys | OptionalColorsKeys> & Partial<Pick<InternalTheme["color"], OptionalColorsKeys>>;
 }
+/**
+ * The theme interface exposed for the end user
+ * Everything is optional, any missing config will be generated internally
+ */
 export type Theme = DeepPartial<PublicTheme>;
 interface CssVariable {
     cssVariable: string;
@@ -53,6 +57,5 @@ export declare const THEME_CSS_VARIABLE_PREFIX = "--st-";
 export declare const themeKeysToCssVariables: ThemeCssVariables;
 export interface Settings {
     showProgressAnimation: boolean;
-    showModalBackdrop: boolean;
 }
 export {};