@0xsquid/ui 2.2.6 → 2.2.8

package/dist/cjs/index.js

@@ -8501,10 +8501,10 @@ const borderRadiusClassMap = {
 };
 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-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, 
+    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-bg-menu-bg tw-p-squid-xs tw-text-center tw-text-menu-text 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-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]) })] }) })));
+            "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-absolute tw-inset-0 tw-z-10 tw-h-full tw-w-full tw-border tw-border-material-light-thin tw-bg-menu-backdrop", borderRadiusClassMap[rounded]) })] }) })));
 }
 
 function Announcement({ message, detail, mainIcon, link, }) {
@@ -18802,7 +18802,7 @@ function NavigationBar(_a) {
                         // add small spacing on the right when back button is displayed to have the subtitle centered
                         displayBackButton &&
                             (!actions || actions.length === 0) &&
-                            "tw-mr-squid-xl mobile-lg:tw-mr-squid-m mobile-lg:tw-pr-squid-xxl "), children: jsxRuntime.jsx(BodyText, { size: "small", children: subtitle }) })) : null] }), title ? (jsxRuntime.jsx("div", { className: cn("tw-h-squid-xxl tw-w-full tw-flex-1 tw-items-center tw-px-squid-m tw-py-squid-xxs mobile-lg:tw-px-squid-l", 
+                            "tw-mr-squid-xl mobile-lg:tw-mr-squid-m mobile-lg:tw-pr-squid-xxl "), children: jsxRuntime.jsx(BodyText, { size: "small", children: subtitle }) })) : null] }), title ? (jsxRuntime.jsx("div", { className: cn("tw-h-squid-xxl tw-w-full tw-items-center tw-px-squid-m tw-py-squid-xxs mobile-lg:tw-px-squid-l", 
                 // hide the title on small screens when back button is displayed, so it's positioned on the left
                 displayBackButton
                     ? "tw-hidden mobile-xs-height:tw-flex"
@@ -18824,7 +18824,7 @@ function ProductCard({ children }) {
     }, [containerRef]);
     return (jsxRuntime.jsx("div", { style: {
             width: `min(100vw, ${MEDIA_QUERIES.MOBILE_LG.value}px)`,
-        }, className: "mobile-lg:tw-rounded-container tw-shadow-container tw-flex tw-min-h-full tw-max-w-[100vw] tw-flex-col tw-justify-center tw-overflow-hidden tw-bg-grey-900 tw-text-grey-300 tw-outline tw-outline-1 tw-outline-material-light-thin mobile-lg:tw-max-w-card-large", children: jsxRuntime.jsx("div", { ref: containerRef, className: "tw-relative tw-flex tw-h-card-small tw-w-full tw-flex-col tw-justify-end mobile-lg:tw-w-card-large mobile-xs-height:tw-h-card-compact mobile-sm-height:tw-h-card-large", children: children }) }));
+        }, className: "tw-flex tw-min-h-full tw-max-w-[100vw] tw-flex-col tw-justify-center tw-overflow-hidden tw-bg-grey-900 tw-text-grey-300 tw-shadow-container tw-outline tw-outline-1 tw-outline-material-light-thin mobile-lg:tw-max-w-card-large mobile-lg:tw-rounded-container", children: jsxRuntime.jsx("div", { ref: containerRef, className: "tw-relative tw-flex tw-h-card-small tw-w-full tw-flex-col tw-justify-end mobile-lg:tw-w-card-large mobile-xs-height:tw-h-card-compact mobile-sm-height:tw-h-card-large", children: children }) }));
 }
 function BorderedContainer({ children, className, }) {
     return (jsxRuntime.jsx("section", { className: cn("tw-border-t tw-border-t-material-light-thin", className), children: children }));
@@ -19152,7 +19152,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-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] }));
+    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-menu-sm 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-menu-sm", 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) {

package/dist/esm/index.js

@@ -8481,10 +8481,10 @@ const borderRadiusClassMap = {
 };
 function Menu(_a) {
     var { children, containerClassName, contentClassName, rounded = "lg", menuRef, contentWrapperProps } = _a, props = __rest$1(_a, ["children", "containerClassName", "contentClassName", "rounded", "menuRef", "contentWrapperProps"]);
-    return (jsx("div", Object.assign({}, props, { className: cn("tw-max-w-[320px]", containerClassName), ref: menuRef, children: 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, 
+    return (jsx("div", Object.assign({}, props, { className: cn("tw-max-w-[320px]", containerClassName), ref: menuRef, children: 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-bg-menu-bg tw-p-squid-xs tw-text-center tw-text-menu-text 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-backdrop-blur/20 before:tw-backdrop-saturate-150"), children: [typeof children === "string" ? (jsx(CaptionText, { className: "tw-z-20 tw-self-stretch !tw-leading-[10px]", children: children })) : (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 }))), 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]) })] }) })));
+            "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" ? (jsx(CaptionText, { className: "tw-z-20 tw-self-stretch !tw-leading-[10px]", children: children })) : (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 }))), 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-menu-backdrop", borderRadiusClassMap[rounded]) })] }) })));
 }
 
 function Announcement({ message, detail, mainIcon, link, }) {
@@ -18782,7 +18782,7 @@ function NavigationBar(_a) {
                         // add small spacing on the right when back button is displayed to have the subtitle centered
                         displayBackButton &&
                             (!actions || actions.length === 0) &&
-                            "tw-mr-squid-xl mobile-lg:tw-mr-squid-m mobile-lg:tw-pr-squid-xxl "), children: jsx(BodyText, { size: "small", children: subtitle }) })) : null] }), title ? (jsx("div", { className: cn("tw-h-squid-xxl tw-w-full tw-flex-1 tw-items-center tw-px-squid-m tw-py-squid-xxs mobile-lg:tw-px-squid-l", 
+                            "tw-mr-squid-xl mobile-lg:tw-mr-squid-m mobile-lg:tw-pr-squid-xxl "), children: jsx(BodyText, { size: "small", children: subtitle }) })) : null] }), title ? (jsx("div", { className: cn("tw-h-squid-xxl tw-w-full tw-items-center tw-px-squid-m tw-py-squid-xxs mobile-lg:tw-px-squid-l", 
                 // hide the title on small screens when back button is displayed, so it's positioned on the left
                 displayBackButton
                     ? "tw-hidden mobile-xs-height:tw-flex"
@@ -18804,7 +18804,7 @@ function ProductCard({ children }) {
     }, [containerRef]);
     return (jsx("div", { style: {
             width: `min(100vw, ${MEDIA_QUERIES.MOBILE_LG.value}px)`,
-        }, className: "mobile-lg:tw-rounded-container tw-shadow-container tw-flex tw-min-h-full tw-max-w-[100vw] tw-flex-col tw-justify-center tw-overflow-hidden tw-bg-grey-900 tw-text-grey-300 tw-outline tw-outline-1 tw-outline-material-light-thin mobile-lg:tw-max-w-card-large", children: jsx("div", { ref: containerRef, className: "tw-relative tw-flex tw-h-card-small tw-w-full tw-flex-col tw-justify-end mobile-lg:tw-w-card-large mobile-xs-height:tw-h-card-compact mobile-sm-height:tw-h-card-large", children: children }) }));
+        }, className: "tw-flex tw-min-h-full tw-max-w-[100vw] tw-flex-col tw-justify-center tw-overflow-hidden tw-bg-grey-900 tw-text-grey-300 tw-shadow-container tw-outline tw-outline-1 tw-outline-material-light-thin mobile-lg:tw-max-w-card-large mobile-lg:tw-rounded-container", children: jsx("div", { ref: containerRef, className: "tw-relative tw-flex tw-h-card-small tw-w-full tw-flex-col tw-justify-end mobile-lg:tw-w-card-large mobile-xs-height:tw-h-card-compact mobile-sm-height:tw-h-card-large", children: children }) }));
 }
 function BorderedContainer({ children, className, }) {
     return (jsx("section", { className: cn("tw-border-t tw-border-t-material-light-thin", className), children: children }));
@@ -19132,7 +19132,7 @@ function BaseDropdownMenuItem({ label, imageUrl, icon, labelClassName, onClick,
         : {
             ref: contentRef,
         };
-    return (jsxs("li", { ref: itemRef, className: "tw-max-h-squid-xl tw-w-full tw-min-w-[160px] tw-px-squid-xxs", children: [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: [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 ? (jsx("img", { src: imageUrl, className: "tw-h-full tw-w-full tw-rounded-squid-xxs" })) : (icon) }), 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" ? (jsx("span", { className: "tw-flex tw-items-center tw-pl-squid-l", children: jsx(Switch, Object.assign({ size: "small" }, control)) })) : detail ? (jsx("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: detail })) : null] })), children] }));
+    return (jsxs("li", { ref: itemRef, className: "tw-max-h-squid-xl tw-w-full tw-min-w-[160px] tw-px-squid-xxs", children: [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-menu-sm tw-px-squid-xxs hover:tw-bg-material-light-thin", isSelected && "tw-bg-material-light-thin"), children: [jsx("div", { className: "tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-between tw-rounded-menu-sm", children: imageUrl ? (jsx("img", { src: imageUrl, className: "tw-h-full tw-w-full tw-rounded-squid-xxs" })) : (icon) }), 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" ? (jsx("span", { className: "tw-flex tw-items-center tw-pl-squid-l", children: jsx(Switch, Object.assign({ size: "small" }, control)) })) : detail ? (jsx("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: detail })) : null] })), children] }));
 }
 function DropdownMenuItem(props) {
     if (props.submenu) {

package/package.json

@@ -5,7 +5,7 @@
     "url": "git+https://github.com/0xsquid/squid-ui.git"
   },
   "description": "Squid's UI components",
-  "version": "2.2.6",
+  "version": "2.2.8",
   "author": "",
   "license": "MIT",
   "resolutions": {