@0xsquid/ui 2.3.1 → 2.3.2-beta.0

package/dist/cjs/index.js

@@ -3548,7 +3548,7 @@ function Image$1(_a) {
     const [imageState, setImageState] = React$1.useState(exports.ImageState.LOADING);
     return (jsxRuntime.jsxs("div", Object.assign({}, containerProps, { className: cn("tw-relative", containerProps === null || containerProps === void 0 ? void 0 : containerProps.className), children: [border === "gradient" && (jsxRuntime.jsx("span", { style: {
                     borderRadius: gradientRoundedClassMap[rounded],
-                }, className: cn(className, "!tw-absolute -tw-left-[2px] -tw-top-[2px] !tw-h-[calc(100%+4px)] !tw-w-[calc(100%+4px)] tw-bg-conic-gradient tw-bg-center") })), children != null ? (jsxRuntime.jsx("div", Object.assign({ className: cn(className, "tw-bg-grey-500") }, props, { children: children }))) : (imageState !== exports.ImageState.LOADED &&
+                }, className: cn(className, "!tw-absolute -tw-left-[2px] -tw-top-[2px] !tw-h-[calc(100%+4px)] !tw-w-[calc(100%+4px)] tw-bg-conic-gradient tw-bg-center") })), children != null ? (jsxRuntime.jsx("div", Object.assign({ className: cn(className, "tw-flex tw-items-center tw-justify-center tw-bg-grey-500") }, props, { children: children }))) : (imageState !== exports.ImageState.LOADED &&
                 (placeholderImageUrl ? (jsxRuntime.jsx("img", Object.assign({ src: placeholderImageUrl, className: className }, props))) : (jsxRuntime.jsx("div", Object.assign({ className: cn(className, "tw-bg-grey-500") }, props))))), children == null && src && (jsxRuntime.jsx("img", Object.assign({}, props, { src: src, onError: () => {
                     setImageState(exports.ImageState.ERROR);
                 }, onLoad: () => {
@@ -3635,12 +3635,12 @@ function IconLabel({ src, children, rounded }) {
     return (jsxRuntime.jsxs("div", { className: "tw-inline-flex tw-items-center tw-gap-squid-xxs", children: [src && jsxRuntime.jsx(Image$1, { src: src, rounded: rounded, size: "medium" }), typeof children === "string" ? (jsxRuntime.jsx(CaptionText, { children: children })) : (children)] }));
 }
 
-function ImageGroup({ imageUrls, badgeUrl }) {
+function ImageGroup({ imageUrls, badge }) {
     return (jsxRuntime.jsxs("div", { className: "tw-relative tw-flex tw-h-squid-xxl tw-w-squid-xxl tw-flex-shrink-0 tw-flex-wrap tw-content-center tw-items-center tw-justify-center tw-gap-0.5 tw-rounded-squid-s tw-border tw-border-solid tw-border-material-light-thin tw-bg-grey-700", children: [imageUrls.map((url) => (jsxRuntime.jsx(Image$1, { src: url, size: "medium", rounded: "xxs", style: {
                     width: "24px",
                     height: "24px",
                     borderRadius: "7.5px",
-                } }, url))), jsxRuntime.jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px] tw-bg-highlight-700", children: jsxRuntime.jsx(Image$1, { border: "outline-lg", src: badgeUrl, size: "medium", className: "tw-p-0.5" }) })] }));
+                } }, url))), badge != null && (jsxRuntime.jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px]", children: jsxRuntime.jsx(Image$1, Object.assign({}, badge, { border: "outline-lg", size: "medium" })) }))] }));
 }
 
 function Approve() {
@@ -3957,11 +3957,14 @@ function PhoneIcon({ size = "24", className, }) {
 function LaptopIcon({ size = "24", className, }) {
     return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 25 24", fill: "none", className: className, children: [jsxRuntime.jsx("path", { d: "M4.5 6C4.5 4.89543 5.39543 4 6.5 4H18.5C19.6046 4 20.5 4.89543 20.5 6V15C20.5 15.5523 20.0523 16 19.5 16H5.5C4.94772 16 4.5 15.5523 4.5 15V6Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "square", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M2.5 16H22.5V18C22.5 19.1046 21.6046 20 20.5 20H4.5C3.39543 20 2.5 19.1046 2.5 18V16Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "square", strokeLinejoin: "round" })] }));
 }
+function CopyOutlinedIcon({ size = "24", className, }) {
+    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: jsxRuntime.jsx("path", { d: "M9 9V5.25C9 4.00736 10.0074 3 11.25 3H18.75C19.9926 3 21 4.00736 21 5.25V12.75C21 13.9926 19.9926 15 18.75 15H15M12.75 9H5.25C4.00736 9 3 10.0074 3 11.25V18.75C3 19.9926 4.00736 21 5.25 21H12.75C13.9926 21 15 19.9926 15 18.75V11.25C15 10.0074 13.9926 9 12.75 9Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
 function CopyIcon({ size = "20", className, }) {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 21 20", fill: "none", className: className, children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.16663 6.66666V3.54166C7.16663 2.50612 8.00609 1.66666 9.04163 1.66666H16.9583C17.9938 1.66666 18.8333 2.50612 18.8333 3.54166V11.4583C18.8333 12.4939 17.9938 13.3333 16.9583 13.3333H13.8333V16.4583C13.8333 17.4939 12.9938 18.3333 11.9583 18.3333H4.04163C3.00609 18.3333 2.16663 17.4939 2.16663 16.4583V8.54166C2.16663 7.50612 3.00609 6.66666 4.04163 6.66666H7.16663ZM9.04163 13.3333C8.00609 13.3333 7.16663 12.4939 7.16663 11.4583V8.33332H4.04163C3.92657 8.33332 3.83329 8.4266 3.83329 8.54166V16.4583C3.83329 16.5734 3.92657 16.6667 4.04163 16.6667H11.9583C12.0734 16.6667 12.1666 16.5734 12.1666 16.4583V13.3333H9.04163Z", fill: "currentColor" }) }));
 }
 function FileDownloadIcon({ size = "20", className, }) {
-    return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 21 20", fill: "none", children: [jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.33337 1.66666H10.5V5.83332C10.5 7.21404 11.6193 8.33332 13 8.33332H17.1667V15.8333C17.1667 17.214 16.0474 18.3333 14.6667 18.3333H6.33337C4.95266 18.3333 3.83337 17.214 3.83337 15.8333V4.16666C3.83337 2.78594 4.95266 1.66666 6.33337 1.66666ZM13.1726 14.3392L11.0893 16.4226C10.7639 16.748 10.2362 16.748 9.91079 16.4226L7.82745 14.3392C7.50201 14.0138 7.50201 13.4862 7.82745 13.1607C8.15289 12.8353 8.68053 12.8353 9.00596 13.1607L9.66671 13.8215V10.8333C9.66671 10.3731 10.0398 9.99999 10.5 9.99999C10.9603 9.99999 11.3334 10.3731 11.3334 10.8333V13.8215L11.9941 13.1607C12.3196 12.8353 12.8472 12.8353 13.1726 13.1607C13.4981 13.4862 13.4981 14.0138 13.1726 14.3392Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M12.1667 2.15481L16.6786 6.66666H13C12.5398 6.66666 12.1667 6.29356 12.1667 5.83332V2.15481Z", fill: "currentColor" })] }));
+    return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 21 20", fill: "none", className: className, children: [jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.33337 1.66666H10.5V5.83332C10.5 7.21404 11.6193 8.33332 13 8.33332H17.1667V15.8333C17.1667 17.214 16.0474 18.3333 14.6667 18.3333H6.33337C4.95266 18.3333 3.83337 17.214 3.83337 15.8333V4.16666C3.83337 2.78594 4.95266 1.66666 6.33337 1.66666ZM13.1726 14.3392L11.0893 16.4226C10.7639 16.748 10.2362 16.748 9.91079 16.4226L7.82745 14.3392C7.50201 14.0138 7.50201 13.4862 7.82745 13.1607C8.15289 12.8353 8.68053 12.8353 9.00596 13.1607L9.66671 13.8215V10.8333C9.66671 10.3731 10.0398 9.99999 10.5 9.99999C10.9603 9.99999 11.3334 10.3731 11.3334 10.8333V13.8215L11.9941 13.1607C12.3196 12.8353 12.8472 12.8353 13.1726 13.1607C13.4981 13.4862 13.4981 14.0138 13.1726 14.3392Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M12.1667 2.15481L16.6786 6.66666H13C12.5398 6.66666 12.1667 6.29356 12.1667 5.83332V2.15481Z", fill: "currentColor" })] }));
 }
 function CodeSolidSquareIcon({ size = "24", className, }) {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 25 24", fill: "none", className: className, children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.5 6C3.5 4.34315 4.84315 3 6.5 3H18.5C20.1569 3 21.5 4.34315 21.5 6V18C21.5 19.6569 20.1569 21 18.5 21H6.5C4.84315 21 3.5 19.6569 3.5 18V6ZM11.2071 8.79289C11.5976 9.18342 11.5976 9.81658 11.2071 10.2071L9.41421 12L11.2071 13.7929C11.5976 14.1834 11.5976 14.8166 11.2071 15.2071C10.8166 15.5976 10.1834 15.5976 9.79289 15.2071L8 13.4142C7.21895 12.6332 7.21895 11.3668 8 10.5858L9.79289 8.79289C10.1834 8.40237 10.8166 8.40237 11.2071 8.79289ZM15.2071 8.79289C14.8166 8.40237 14.1834 8.40237 13.7929 8.79289C13.4024 9.18342 13.4024 9.81658 13.7929 10.2071L15.5858 12L13.7929 13.7929C13.4024 14.1834 13.4024 14.8166 13.7929 15.2071C14.1834 15.5976 14.8166 15.5976 15.2071 15.2071L17 13.4142C17.781 12.6332 17.781 11.3668 17 10.5858L15.2071 8.79289Z", fill: "currentColor" }) }));
@@ -3984,6 +3987,9 @@ function SmileFilledIcon({ className, size = "27", }) {
 function StarLinesIcon({ size = "20", className, }) {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: className, children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.8455 1.41356C12.3313 0.606286 13.5017 0.606288 13.9875 1.41356L15.2314 3.4805L17.5816 4.0248C18.4995 4.23739 18.8611 5.35048 18.2435 6.06199L16.6621 7.88373L16.8707 10.2871C16.9522 11.2257 16.0053 11.9137 15.1378 11.5461L12.9165 10.6051L10.6952 11.5461C9.8277 11.9137 8.88085 11.2257 8.96232 10.2871L9.1709 7.88373L7.58951 6.06199C6.97187 5.35048 7.33354 4.23739 8.25143 4.0248L10.6016 3.4805L11.8455 1.41356ZM6.42243 8.57745C6.74786 8.90289 6.74786 9.43053 6.42243 9.75596L3.08909 13.0893C2.76366 13.4147 2.23602 13.4147 1.91058 13.0893C1.58514 12.7639 1.58514 12.2362 1.91058 11.9108L5.24392 8.57745C5.56935 8.25202 6.09699 8.25202 6.42243 8.57745ZM8.08909 12.7441C8.41453 13.0696 8.41453 13.5972 8.08909 13.9226L4.75576 17.256C4.43032 17.5814 3.90269 17.5814 3.57725 17.256C3.25181 16.9305 3.25181 16.4029 3.57725 16.0775L6.91058 12.7441C7.23602 12.4187 7.76366 12.4187 8.08909 12.7441ZM13.9224 12.7441C14.2479 13.0696 14.2479 13.5972 13.9224 13.9226L10.5891 17.256C10.2637 17.5814 9.73602 17.5814 9.41058 17.256C9.08515 16.9305 9.08515 16.4029 9.41058 16.0775L12.7439 12.7441C13.0694 12.4187 13.597 12.4187 13.9224 12.7441Z", fill: "currentColor" }) }));
 }
+function QrCodeIcon({ size = "24", className, }) {
+    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: jsxRuntime.jsx("path", { d: "M14 14V16H16M18 14H20M20 18H18V20M14 19.99V20M16 10H18C19.1046 10 20 9.10457 20 8V6C20 4.89543 19.1046 4 18 4H16C14.8954 4 14 4.89543 14 6V8C14 9.10457 14.8954 10 16 10ZM6 20H8C9.10457 20 10 19.1046 10 18V16C10 14.8954 9.10457 14 8 14H6C4.89543 14 4 14.8954 4 16V18C4 19.1046 4.89543 20 6 20ZM6 10H8C9.10457 10 10 9.10457 10 8V6C10 4.89543 9.10457 4 8 4H6C4.89543 4 4 4.89543 4 6V8C4 9.10457 4.89543 10 6 10Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
 
 function EmptyHeartIcon({ className }) {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", className: className, children: jsxRuntime.jsx("path", { d: "M21 10C21 15.75 12.75 20 12 20C11.25 20 3 15.75 3 10C3 6 5.5 4 8 4C10.5 4 12 5.5 12 5.5C12 5.5 13.5 4 16 4C18.5 4 21 6 21 10Z", stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round" }) }));
@@ -4077,8 +4083,8 @@ function PieChartIcon() {
     return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", fill: "none", viewBox: "0 0 14 14", children: [jsxRuntime.jsx("path", { fill: "currentColor", d: "M13.478 8.582A6.667 6.667 0 007.667.366V6.53l5.81 2.053z" }), jsxRuntime.jsx("path", { fill: "currentColor", d: "M13.034 9.84L6.778 7.629A.667.667 0 016.334 7V.366a6.667 6.667 0 106.7 9.474z" })] }));
 }
 
-function PlusIcon({ className, size = "24", }) {
-    return (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsxRuntime.jsx("path", { d: "M12 17V12M12 12V7M12 12H17M12 12H7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
+function PlusIcon({ className, size = "24", strokeWidth = "2", }) {
+    return (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsxRuntime.jsx("path", { d: "M12 17V12M12 12V7M12 12H17M12 12H7", stroke: "currentColor", strokeWidth: strokeWidth, strokeLinecap: "round" }) }));
 }
 
 function RefreshIcon() {
@@ -18960,6 +18966,24 @@ function SwapProgressViewHeader({ title, description, }) {
     return (jsxRuntime.jsxs("header", { className: "tw-flex tw-min-h-[95px] tw-w-full tw-flex-col tw-gap-squid-s tw-bg-grey-800 tw-px-squid-m tw-py-squid-s", children: [jsxRuntime.jsx(BodyText, { size: "large", className: "tw-min-h-squid-m !tw-leading-[25px] tw-text-grey-300", children: title }), jsxRuntime.jsx(CaptionText, { className: "tw-h-squid-l tw-text-grey-500", children: description })] }));
 }
 
+function AccountListItem({ isConnected, imageUrls = [], imageUrl, badgeUrl, actions = [], subtitle, title, mainButton, }) {
+    const badge = {
+        src: isConnected ? badgeUrl : undefined,
+        children: isConnected ? undefined : (jsxRuntime.jsx(PlusIcon, { className: "tw-text-grey-900 group-data-[squid-theme-type=dark]:tw-text-grey-100", size: "15", strokeWidth: "3" })),
+        className: isConnected ? undefined : "tw-bg-royal-500",
+        border: "outline-lg",
+        size: "medium",
+    };
+    return (jsxRuntime.jsxs("li", { className: "tw-flex tw-h-[80px] tw-w-full tw-items-center tw-gap-squid-s tw-px-squid-m tw-py-squid-xs tw-text-grey-300", children: [imageUrl != null ? (jsxRuntime.jsx(BadgeImage, { className: "tw-min-w-fit", image: {
+                    src: imageUrl,
+                    size: "xxlarge",
+                    rounded: "s",
+                    border: "outline-sm",
+                }, badge: badge })) : (jsxRuntime.jsx(ImageGroup, { imageUrls: imageUrls, badge: badge })), jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-1 tw-flex-col tw-items-start tw-gap-squid-xs", children: [jsxRuntime.jsx(BodyText, { size: "small", className: "tw-h-[13px] !tw-leading-[13px]", children: title }), jsxRuntime.jsx(BodyText, { size: "small", className: "tw-h-[13px] !tw-leading-[13px] tw-text-grey-500", children: subtitle })] }), jsxRuntime.jsx("menu", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: isConnected
+                    ? actions.map((action) => React$1.createElement(IconButton, Object.assign({}, action, { key: action.key })))
+                    : mainButton != null && (jsxRuntime.jsx(Button$1, Object.assign({ size: "md", variant: "primary" }, mainButton))) })] }));
+}
+
 const SPACING = 10;
 function useDropdownMenu(props) {
     const { initialIsModalOpen, itemsContainerRef } = props !== null && props !== void 0 ? props : {};
@@ -69691,6 +69715,7 @@ function ThemeProvider(_a) {
 }
 
 exports.ANIMATION_DURATIONS = ANIMATION_DURATIONS;
+exports.AccountListItem = AccountListItem;
 exports.AccountsButton = AccountsButton;
 exports.ActionLayout = ActionLayout;
 exports.ActionLineOutRow = ActionLineOutRow;
@@ -69783,6 +69808,7 @@ exports.CompassRoundSolidIcon = CompassRoundSolidIcon;
 exports.ConsoleIcon = ConsoleIcon;
 exports.Copy = Copy;
 exports.CopyIcon = CopyIcon;
+exports.CopyOutlinedIcon = CopyOutlinedIcon;
 exports.CrossAnimatedIcon = CrossAnimatedIcon;
 exports.CrossedOutSunSolidIcon = CrossedOutSunSolidIcon;
 exports.DashboardFast = DashboardFast;
@@ -69888,6 +69914,7 @@ exports.ProfileHeaderBackground = ProfileHeaderBackground;
 exports.PropertiesLayout = PropertiesLayout;
 exports.PropertyListItem = PropertyListItem;
 exports.PunkIcon = PunkIcon;
+exports.QrCodeIcon = QrCodeIcon;
 exports.RangeInput = RangeInput;
 exports.ReceiptBillIcon = ReceiptBillIcon;
 exports.ReceiveNFTAction = ReceiveNFTAction;

package/dist/cjs/types/components/badges/ImageGroup.d.ts

@@ -1,6 +1,7 @@
+import { type ImageProps } from "./Image";
 interface ImageGroupProps {
     imageUrls: string[];
-    badgeUrl?: string;
+    badge?: Omit<ImageProps, "border" | "size">;
 }
-export declare function ImageGroup({ imageUrls, badgeUrl }: ImageGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function ImageGroup({ imageUrls, badge }: ImageGroupProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/components/buttons/IconButton.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
-interface IconButtonProps extends React.ComponentProps<"button"> {
+export interface IconButtonProps extends React.ComponentProps<"button"> {
     icon: React.ReactNode;
 }
 export declare const IconButton: import("react").ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-export {};

package/dist/cjs/types/components/icons/Generic.d.ts

@@ -62,6 +62,10 @@ export declare function LaptopIcon({ size, className, }: {
     size?: string;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function CopyOutlinedIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function CopyIcon({ size, className, }: {
     size?: string;
     className?: string;
@@ -97,3 +101,7 @@ export declare function StarLinesIcon({ size, className, }: {
     size?: string;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function QrCodeIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/components/icons/Plus.d.ts

@@ -1,4 +1,5 @@
-export declare function PlusIcon({ className, size, }: {
+export declare function PlusIcon({ className, size, strokeWidth, }: {
     className?: string;
     size?: string;
+    strokeWidth?: string;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { type IconButtonProps } from "../buttons";
+interface ActionButton extends IconButtonProps {
+    key: NonNullable<React.Key>;
+}
+interface AccountListItemProps {
+    isConnected?: boolean;
+    imageUrls?: string[];
+    imageUrl?: string;
+    badgeUrl?: string;
+    actions?: ActionButton[];
+    title?: string;
+    subtitle?: string;
+    mainButton?: {
+        label: string;
+    } & React.ComponentProps<"button">;
+}
+export declare function AccountListItem({ isConnected, imageUrls, imageUrl, badgeUrl, actions, subtitle, title, mainButton, }: AccountListItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,3 +1,4 @@
+export * from "./AccountListItem";
 export * from "./DropdownMenuItem";
 export * from "./DropdownMenuTitle";
 export * from "./HistoryItem";

package/dist/cjs/types/stories/badges/ImageGroup.stories.d.ts

@@ -4,3 +4,5 @@ declare const meta: Meta<typeof ImageGroup>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const Badge: Story;
+export declare const CustomBadgeContent: Story;

package/dist/cjs/types/stories/lists/AccountListItem.stories.d.ts

@@ -0,0 +1,8 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { AccountListItem } from "../../components/lists/AccountListItem";
+declare const meta: Meta<typeof AccountListItem>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Disconnected: Story;
+export declare const Connected: Story;
+export declare const Actions: Story;

package/dist/esm/index.js

@@ -3528,7 +3528,7 @@ function Image$1(_a) {
     const [imageState, setImageState] = useState(ImageState.LOADING);
     return (jsxs("div", Object.assign({}, containerProps, { className: cn("tw-relative", containerProps === null || containerProps === void 0 ? void 0 : containerProps.className), children: [border === "gradient" && (jsx("span", { style: {
                     borderRadius: gradientRoundedClassMap[rounded],
-                }, className: cn(className, "!tw-absolute -tw-left-[2px] -tw-top-[2px] !tw-h-[calc(100%+4px)] !tw-w-[calc(100%+4px)] tw-bg-conic-gradient tw-bg-center") })), children != null ? (jsx("div", Object.assign({ className: cn(className, "tw-bg-grey-500") }, props, { children: children }))) : (imageState !== ImageState.LOADED &&
+                }, className: cn(className, "!tw-absolute -tw-left-[2px] -tw-top-[2px] !tw-h-[calc(100%+4px)] !tw-w-[calc(100%+4px)] tw-bg-conic-gradient tw-bg-center") })), children != null ? (jsx("div", Object.assign({ className: cn(className, "tw-flex tw-items-center tw-justify-center tw-bg-grey-500") }, props, { children: children }))) : (imageState !== ImageState.LOADED &&
                 (placeholderImageUrl ? (jsx("img", Object.assign({ src: placeholderImageUrl, className: className }, props))) : (jsx("div", Object.assign({ className: cn(className, "tw-bg-grey-500") }, props))))), children == null && src && (jsx("img", Object.assign({}, props, { src: src, onError: () => {
                     setImageState(ImageState.ERROR);
                 }, onLoad: () => {
@@ -3615,12 +3615,12 @@ function IconLabel({ src, children, rounded }) {
     return (jsxs("div", { className: "tw-inline-flex tw-items-center tw-gap-squid-xxs", children: [src && jsx(Image$1, { src: src, rounded: rounded, size: "medium" }), typeof children === "string" ? (jsx(CaptionText, { children: children })) : (children)] }));
 }
 
-function ImageGroup({ imageUrls, badgeUrl }) {
+function ImageGroup({ imageUrls, badge }) {
     return (jsxs("div", { className: "tw-relative tw-flex tw-h-squid-xxl tw-w-squid-xxl tw-flex-shrink-0 tw-flex-wrap tw-content-center tw-items-center tw-justify-center tw-gap-0.5 tw-rounded-squid-s tw-border tw-border-solid tw-border-material-light-thin tw-bg-grey-700", children: [imageUrls.map((url) => (jsx(Image$1, { src: url, size: "medium", rounded: "xxs", style: {
                     width: "24px",
                     height: "24px",
                     borderRadius: "7.5px",
-                } }, url))), jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px] tw-bg-highlight-700", children: jsx(Image$1, { border: "outline-lg", src: badgeUrl, size: "medium", className: "tw-p-0.5" }) })] }));
+                } }, url))), badge != null && (jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px]", children: jsx(Image$1, Object.assign({}, badge, { border: "outline-lg", size: "medium" })) }))] }));
 }
 
 function Approve() {
@@ -3937,11 +3937,14 @@ function PhoneIcon({ size = "24", className, }) {
 function LaptopIcon({ size = "24", className, }) {
     return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 25 24", fill: "none", className: className, children: [jsx("path", { d: "M4.5 6C4.5 4.89543 5.39543 4 6.5 4H18.5C19.6046 4 20.5 4.89543 20.5 6V15C20.5 15.5523 20.0523 16 19.5 16H5.5C4.94772 16 4.5 15.5523 4.5 15V6Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "square", strokeLinejoin: "round" }), jsx("path", { d: "M2.5 16H22.5V18C22.5 19.1046 21.6046 20 20.5 20H4.5C3.39543 20 2.5 19.1046 2.5 18V16Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "square", strokeLinejoin: "round" })] }));
 }
+function CopyOutlinedIcon({ size = "24", className, }) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: jsx("path", { d: "M9 9V5.25C9 4.00736 10.0074 3 11.25 3H18.75C19.9926 3 21 4.00736 21 5.25V12.75C21 13.9926 19.9926 15 18.75 15H15M12.75 9H5.25C4.00736 9 3 10.0074 3 11.25V18.75C3 19.9926 4.00736 21 5.25 21H12.75C13.9926 21 15 19.9926 15 18.75V11.25C15 10.0074 13.9926 9 12.75 9Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
 function CopyIcon({ size = "20", className, }) {
     return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 21 20", fill: "none", className: className, children: jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.16663 6.66666V3.54166C7.16663 2.50612 8.00609 1.66666 9.04163 1.66666H16.9583C17.9938 1.66666 18.8333 2.50612 18.8333 3.54166V11.4583C18.8333 12.4939 17.9938 13.3333 16.9583 13.3333H13.8333V16.4583C13.8333 17.4939 12.9938 18.3333 11.9583 18.3333H4.04163C3.00609 18.3333 2.16663 17.4939 2.16663 16.4583V8.54166C2.16663 7.50612 3.00609 6.66666 4.04163 6.66666H7.16663ZM9.04163 13.3333C8.00609 13.3333 7.16663 12.4939 7.16663 11.4583V8.33332H4.04163C3.92657 8.33332 3.83329 8.4266 3.83329 8.54166V16.4583C3.83329 16.5734 3.92657 16.6667 4.04163 16.6667H11.9583C12.0734 16.6667 12.1666 16.5734 12.1666 16.4583V13.3333H9.04163Z", fill: "currentColor" }) }));
 }
 function FileDownloadIcon({ size = "20", className, }) {
-    return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 21 20", fill: "none", children: [jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.33337 1.66666H10.5V5.83332C10.5 7.21404 11.6193 8.33332 13 8.33332H17.1667V15.8333C17.1667 17.214 16.0474 18.3333 14.6667 18.3333H6.33337C4.95266 18.3333 3.83337 17.214 3.83337 15.8333V4.16666C3.83337 2.78594 4.95266 1.66666 6.33337 1.66666ZM13.1726 14.3392L11.0893 16.4226C10.7639 16.748 10.2362 16.748 9.91079 16.4226L7.82745 14.3392C7.50201 14.0138 7.50201 13.4862 7.82745 13.1607C8.15289 12.8353 8.68053 12.8353 9.00596 13.1607L9.66671 13.8215V10.8333C9.66671 10.3731 10.0398 9.99999 10.5 9.99999C10.9603 9.99999 11.3334 10.3731 11.3334 10.8333V13.8215L11.9941 13.1607C12.3196 12.8353 12.8472 12.8353 13.1726 13.1607C13.4981 13.4862 13.4981 14.0138 13.1726 14.3392Z", fill: "currentColor" }), jsx("path", { d: "M12.1667 2.15481L16.6786 6.66666H13C12.5398 6.66666 12.1667 6.29356 12.1667 5.83332V2.15481Z", fill: "currentColor" })] }));
+    return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 21 20", fill: "none", className: className, children: [jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.33337 1.66666H10.5V5.83332C10.5 7.21404 11.6193 8.33332 13 8.33332H17.1667V15.8333C17.1667 17.214 16.0474 18.3333 14.6667 18.3333H6.33337C4.95266 18.3333 3.83337 17.214 3.83337 15.8333V4.16666C3.83337 2.78594 4.95266 1.66666 6.33337 1.66666ZM13.1726 14.3392L11.0893 16.4226C10.7639 16.748 10.2362 16.748 9.91079 16.4226L7.82745 14.3392C7.50201 14.0138 7.50201 13.4862 7.82745 13.1607C8.15289 12.8353 8.68053 12.8353 9.00596 13.1607L9.66671 13.8215V10.8333C9.66671 10.3731 10.0398 9.99999 10.5 9.99999C10.9603 9.99999 11.3334 10.3731 11.3334 10.8333V13.8215L11.9941 13.1607C12.3196 12.8353 12.8472 12.8353 13.1726 13.1607C13.4981 13.4862 13.4981 14.0138 13.1726 14.3392Z", fill: "currentColor" }), jsx("path", { d: "M12.1667 2.15481L16.6786 6.66666H13C12.5398 6.66666 12.1667 6.29356 12.1667 5.83332V2.15481Z", fill: "currentColor" })] }));
 }
 function CodeSolidSquareIcon({ size = "24", className, }) {
     return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 25 24", fill: "none", className: className, children: jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.5 6C3.5 4.34315 4.84315 3 6.5 3H18.5C20.1569 3 21.5 4.34315 21.5 6V18C21.5 19.6569 20.1569 21 18.5 21H6.5C4.84315 21 3.5 19.6569 3.5 18V6ZM11.2071 8.79289C11.5976 9.18342 11.5976 9.81658 11.2071 10.2071L9.41421 12L11.2071 13.7929C11.5976 14.1834 11.5976 14.8166 11.2071 15.2071C10.8166 15.5976 10.1834 15.5976 9.79289 15.2071L8 13.4142C7.21895 12.6332 7.21895 11.3668 8 10.5858L9.79289 8.79289C10.1834 8.40237 10.8166 8.40237 11.2071 8.79289ZM15.2071 8.79289C14.8166 8.40237 14.1834 8.40237 13.7929 8.79289C13.4024 9.18342 13.4024 9.81658 13.7929 10.2071L15.5858 12L13.7929 13.7929C13.4024 14.1834 13.4024 14.8166 13.7929 15.2071C14.1834 15.5976 14.8166 15.5976 15.2071 15.2071L17 13.4142C17.781 12.6332 17.781 11.3668 17 10.5858L15.2071 8.79289Z", fill: "currentColor" }) }));
@@ -3964,6 +3967,9 @@ function SmileFilledIcon({ className, size = "27", }) {
 function StarLinesIcon({ size = "20", className, }) {
     return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: className, children: jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.8455 1.41356C12.3313 0.606286 13.5017 0.606288 13.9875 1.41356L15.2314 3.4805L17.5816 4.0248C18.4995 4.23739 18.8611 5.35048 18.2435 6.06199L16.6621 7.88373L16.8707 10.2871C16.9522 11.2257 16.0053 11.9137 15.1378 11.5461L12.9165 10.6051L10.6952 11.5461C9.8277 11.9137 8.88085 11.2257 8.96232 10.2871L9.1709 7.88373L7.58951 6.06199C6.97187 5.35048 7.33354 4.23739 8.25143 4.0248L10.6016 3.4805L11.8455 1.41356ZM6.42243 8.57745C6.74786 8.90289 6.74786 9.43053 6.42243 9.75596L3.08909 13.0893C2.76366 13.4147 2.23602 13.4147 1.91058 13.0893C1.58514 12.7639 1.58514 12.2362 1.91058 11.9108L5.24392 8.57745C5.56935 8.25202 6.09699 8.25202 6.42243 8.57745ZM8.08909 12.7441C8.41453 13.0696 8.41453 13.5972 8.08909 13.9226L4.75576 17.256C4.43032 17.5814 3.90269 17.5814 3.57725 17.256C3.25181 16.9305 3.25181 16.4029 3.57725 16.0775L6.91058 12.7441C7.23602 12.4187 7.76366 12.4187 8.08909 12.7441ZM13.9224 12.7441C14.2479 13.0696 14.2479 13.5972 13.9224 13.9226L10.5891 17.256C10.2637 17.5814 9.73602 17.5814 9.41058 17.256C9.08515 16.9305 9.08515 16.4029 9.41058 16.0775L12.7439 12.7441C13.0694 12.4187 13.597 12.4187 13.9224 12.7441Z", fill: "currentColor" }) }));
 }
+function QrCodeIcon({ size = "24", className, }) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: jsx("path", { d: "M14 14V16H16M18 14H20M20 18H18V20M14 19.99V20M16 10H18C19.1046 10 20 9.10457 20 8V6C20 4.89543 19.1046 4 18 4H16C14.8954 4 14 4.89543 14 6V8C14 9.10457 14.8954 10 16 10ZM6 20H8C9.10457 20 10 19.1046 10 18V16C10 14.8954 9.10457 14 8 14H6C4.89543 14 4 14.8954 4 16V18C4 19.1046 4.89543 20 6 20ZM6 10H8C9.10457 10 10 9.10457 10 8V6C10 4.89543 9.10457 4 8 4H6C4.89543 4 4 4.89543 4 6V8C4 9.10457 4.89543 10 6 10Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
 
 function EmptyHeartIcon({ className }) {
     return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", className: className, children: jsx("path", { d: "M21 10C21 15.75 12.75 20 12 20C11.25 20 3 15.75 3 10C3 6 5.5 4 8 4C10.5 4 12 5.5 12 5.5C12 5.5 13.5 4 16 4C18.5 4 21 6 21 10Z", stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round" }) }));
@@ -4057,8 +4063,8 @@ function PieChartIcon() {
     return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", fill: "none", viewBox: "0 0 14 14", children: [jsx("path", { fill: "currentColor", d: "M13.478 8.582A6.667 6.667 0 007.667.366V6.53l5.81 2.053z" }), jsx("path", { fill: "currentColor", d: "M13.034 9.84L6.778 7.629A.667.667 0 016.334 7V.366a6.667 6.667 0 106.7 9.474z" })] }));
 }
 
-function PlusIcon({ className, size = "24", }) {
-    return (jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsx("path", { d: "M12 17V12M12 12V7M12 12H17M12 12H7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
+function PlusIcon({ className, size = "24", strokeWidth = "2", }) {
+    return (jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsx("path", { d: "M12 17V12M12 12V7M12 12H17M12 12H7", stroke: "currentColor", strokeWidth: strokeWidth, strokeLinecap: "round" }) }));
 }
 
 function RefreshIcon() {
@@ -18940,6 +18946,24 @@ function SwapProgressViewHeader({ title, description, }) {
     return (jsxs("header", { className: "tw-flex tw-min-h-[95px] tw-w-full tw-flex-col tw-gap-squid-s tw-bg-grey-800 tw-px-squid-m tw-py-squid-s", children: [jsx(BodyText, { size: "large", className: "tw-min-h-squid-m !tw-leading-[25px] tw-text-grey-300", children: title }), jsx(CaptionText, { className: "tw-h-squid-l tw-text-grey-500", children: description })] }));
 }
 
+function AccountListItem({ isConnected, imageUrls = [], imageUrl, badgeUrl, actions = [], subtitle, title, mainButton, }) {
+    const badge = {
+        src: isConnected ? badgeUrl : undefined,
+        children: isConnected ? undefined : (jsx(PlusIcon, { className: "tw-text-grey-900 group-data-[squid-theme-type=dark]:tw-text-grey-100", size: "15", strokeWidth: "3" })),
+        className: isConnected ? undefined : "tw-bg-royal-500",
+        border: "outline-lg",
+        size: "medium",
+    };
+    return (jsxs("li", { className: "tw-flex tw-h-[80px] tw-w-full tw-items-center tw-gap-squid-s tw-px-squid-m tw-py-squid-xs tw-text-grey-300", children: [imageUrl != null ? (jsx(BadgeImage, { className: "tw-min-w-fit", image: {
+                    src: imageUrl,
+                    size: "xxlarge",
+                    rounded: "s",
+                    border: "outline-sm",
+                }, badge: badge })) : (jsx(ImageGroup, { imageUrls: imageUrls, badge: badge })), jsxs("div", { className: "tw-flex tw-flex-1 tw-flex-col tw-items-start tw-gap-squid-xs", children: [jsx(BodyText, { size: "small", className: "tw-h-[13px] !tw-leading-[13px]", children: title }), jsx(BodyText, { size: "small", className: "tw-h-[13px] !tw-leading-[13px] tw-text-grey-500", children: subtitle })] }), jsx("menu", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: isConnected
+                    ? actions.map((action) => createElement(IconButton, Object.assign({}, action, { key: action.key })))
+                    : mainButton != null && (jsx(Button$1, Object.assign({ size: "md", variant: "primary" }, mainButton))) })] }));
+}
+
 const SPACING = 10;
 function useDropdownMenu(props) {
     const { initialIsModalOpen, itemsContainerRef } = props !== null && props !== void 0 ? props : {};
@@ -69670,4 +69694,4 @@ function ThemeProvider(_a) {
     return (jsx("div", Object.assign({}, props, { style: Object.assign(Object.assign({}, props.style), parsedStyle), "data-squid-theme-type": themeType, className: cn("tw-group tw-relative tw-flex tw-font-squid-main tw-h-d-screen mobile-lg:tw-h-auto", props.className), children: children })));
 }
 
-export { ANIMATION_DURATIONS, AccountsButton, ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, ActionStatusRow, ActionWrapper, AddressButton, AnimationWrapper, Announcement, AppContainer, Approve, ApproveAction, ArrowBottomTopIcon, ArrowButton, ArrowCornerDownRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowSplit, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, AssetsView, AtomIcon, BackpackIcon, BadgeImage, BankIcon, BellAlarmIcon, BlockSkeleton, BodyText, Boost, BoostBadge, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, BrokenHeartIcon, BubblesIcon, Button$1 as Button, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CSS_VARS, Calendar, CaptionText, CatSquareIcon, CelebrateIcon, ChainLink, Checkmark1Icon, Checkmark2Icon, ChevronArrowIcon, ChevronDownSmallIcon, ChevronGrabberVerticalIcon, ChevronLargeDownIcon, ChevronLargeRightIcon, ChevronRightSmallIcon, ChevronTopIcon, ChevronTopSmallIcon, Chip, CircleMinusIcon, CirclePlusIcon, CircleX, CircleXFilledIcon, ClockOutlineIcon, ClockSolidIcon, CodeBracketsIcon, CodeSolidSquareIcon, CoinsAddIcon, CoinsIcon, CoinsOutlinedIcon, Collapse, CollapsibleMenu, CollectionIcon, ColorPaletteIcon, CommandIcon, CompassRoundOutlinedIcon, CompassRoundSolidIcon, ConsoleIcon, Copy, CopyIcon, CrossAnimatedIcon, CrossedOutSunSolidIcon, DashboardFast, DescriptionBlocks, DetailsToolbar, DiscordIcon, DockIconAnalytics, DockIconCheckout, DockIconHelp, DockIconProfile, DockIconScan, DockIconSwap, DockSwapIcon, DollarOutlinedIcon, DollarSolidIcon, DotGrid1x3HorizontalIcon, DropdownMenu, DropdownMenuItem, DropdownMenuTitle, EmojiMeh, EmojiSadIcon, EmptyHeartIcon, ErrorMessage, EthereumIcon, ExplosionIcon, EyeOpenIcon, FavouriteFilterIcon, FeeButton, FeesAction, FeesLines, FeesTotal, FileDownloadIcon, FilledHeartIcon, FilterAscendingIcon, FilterButton, FilterIcon, FilterTimelineIcon, GasIcon, GhostIcon, GithubIcon, HashLink, HeadingText, HeartSmallIcon, HelpIcon, HighestPriceRangeIcon, HistoryItem, HomeIcon, IconButton, IconLabel, Image$1 as Image, ImageGroup, ImageIcon, ImageSparkle, ImageState, IncompleteAction, InfinityIcon, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, LaptopIcon, LightningIcon, LimitIcon, LinkIcon, List, ListItem, ListItemActionsButton, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MainView, MarketCapIcon, MaxIcon, Menu, MenuItem, MenuSwapIcon, MirrorIcon, Modal, ModalContent, ModalContentDivider, MoonIcon, NavigationBar, NewsIcon, NewspaperIcon, NotAllowedIcon, NumericInput, PathSquareIcon, PauseIcon, PercentIcon, PhoneIcon, PieChartIcon, PipeSeparator, PlusIcon, PoopIcon, PowerIcon, PriceChange, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, PunkIcon, RangeInput, ReceiptBillIcon, ReceiveNFTAction, ReceiveTokensAction, RecipientView, RefreshIcon, ReorderIcon, RouteStep, STEP_ITEM_HEIGHT, SearchIcon, SectionTitle, SendTokensAction, SettingsButton, SettingsGearIcon, SettingsItem, SettingsSlider, SettingsSliderIcon, ShoppingBagIcon, SizeTransition, SmileFilledIcon, SmileIcon, SnapIcon, SortIcon, SparkleIcon, SparklesIcon, SquareArrowCenter, SquareArrowTopLeftIcon, SquareArrowTopRight2Icon, SquidLogo, SquidVector, StakeAction, StarLinesIcon, StartAction, StocksIcon, SuccessAction, SunIcon, SunOutlinedIcon, SunriseIcon, SunriseSmallIcon, SwapAction, SwapConfiguration, SwapDetailsView, SwapErrorIcon, SwapHeader, SwapIcon, SwapInputsIcon, SwapProgressView, SwapProgressViewHeader, SwapProperties, SwapStepItem, SwapStepSeparator, SwapStepsCollapsed, SwapSuccessIcon, SwapTransactionView, SwapWarningIcon, Switch, TagIcon, TagIconFilled, TextSkeleton, ThemePreference, ThemeProvider, ThumbsUp, Tick, TimeFliesIcon, Timeline, Timestamp, Toast, TokenDetailsView, TokenGroup, TokenPair, Tooltip, TradingViewStepsIcon, TransactionAction, TransactionFilters, TransactionHeader, TransactionHeaderLayout, TransactionItem, TransactionProperties, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, Transfer, TranslateIcon, TriangleExclamation, UsdAmount, WalletFilledIcon, WalletIcon, WalletLink, WalletsView, WrapAction, XSocial, adjustColorForContrast, baseTailwindConfig, blendColors, cn, darkTheme, getColorBrightness, getContrastColor, getHexColorFromOpacityPercentage, getWalletCardBackground, hexToRgb, isValidHexColor, lightTheme, linkActionTimelineProps, parseColor, parseSquidTheme, pxToRem, remToPx, rgbToHex, spacing$1 as spacing, statusTextClassMap, transactionErrorPauseAnimation, transactionFailureAnimation, transactionHalfSuccessAnimation, transactionPendingAnimation, transactionProcessingAnimation, transactionRejectedAnimation, transactionSuccessAnimation, useCollapsibleMenu, useDropdownMenu, useMediaQuery, useOnResize, useRect, useTimer, useUserTheme, useVersion };
+export { ANIMATION_DURATIONS, AccountListItem, AccountsButton, ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, ActionStatusRow, ActionWrapper, AddressButton, AnimationWrapper, Announcement, AppContainer, Approve, ApproveAction, ArrowBottomTopIcon, ArrowButton, ArrowCornerDownRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowSplit, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, AssetsView, AtomIcon, BackpackIcon, BadgeImage, BankIcon, BellAlarmIcon, BlockSkeleton, BodyText, Boost, BoostBadge, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, BrokenHeartIcon, BubblesIcon, Button$1 as Button, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CSS_VARS, Calendar, CaptionText, CatSquareIcon, CelebrateIcon, ChainLink, Checkmark1Icon, Checkmark2Icon, ChevronArrowIcon, ChevronDownSmallIcon, ChevronGrabberVerticalIcon, ChevronLargeDownIcon, ChevronLargeRightIcon, ChevronRightSmallIcon, ChevronTopIcon, ChevronTopSmallIcon, Chip, CircleMinusIcon, CirclePlusIcon, CircleX, CircleXFilledIcon, ClockOutlineIcon, ClockSolidIcon, CodeBracketsIcon, CodeSolidSquareIcon, CoinsAddIcon, CoinsIcon, CoinsOutlinedIcon, Collapse, CollapsibleMenu, CollectionIcon, ColorPaletteIcon, CommandIcon, CompassRoundOutlinedIcon, CompassRoundSolidIcon, ConsoleIcon, Copy, CopyIcon, CopyOutlinedIcon, CrossAnimatedIcon, CrossedOutSunSolidIcon, DashboardFast, DescriptionBlocks, DetailsToolbar, DiscordIcon, DockIconAnalytics, DockIconCheckout, DockIconHelp, DockIconProfile, DockIconScan, DockIconSwap, DockSwapIcon, DollarOutlinedIcon, DollarSolidIcon, DotGrid1x3HorizontalIcon, DropdownMenu, DropdownMenuItem, DropdownMenuTitle, EmojiMeh, EmojiSadIcon, EmptyHeartIcon, ErrorMessage, EthereumIcon, ExplosionIcon, EyeOpenIcon, FavouriteFilterIcon, FeeButton, FeesAction, FeesLines, FeesTotal, FileDownloadIcon, FilledHeartIcon, FilterAscendingIcon, FilterButton, FilterIcon, FilterTimelineIcon, GasIcon, GhostIcon, GithubIcon, HashLink, HeadingText, HeartSmallIcon, HelpIcon, HighestPriceRangeIcon, HistoryItem, HomeIcon, IconButton, IconLabel, Image$1 as Image, ImageGroup, ImageIcon, ImageSparkle, ImageState, IncompleteAction, InfinityIcon, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, LaptopIcon, LightningIcon, LimitIcon, LinkIcon, List, ListItem, ListItemActionsButton, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MainView, MarketCapIcon, MaxIcon, Menu, MenuItem, MenuSwapIcon, MirrorIcon, Modal, ModalContent, ModalContentDivider, MoonIcon, NavigationBar, NewsIcon, NewspaperIcon, NotAllowedIcon, NumericInput, PathSquareIcon, PauseIcon, PercentIcon, PhoneIcon, PieChartIcon, PipeSeparator, PlusIcon, PoopIcon, PowerIcon, PriceChange, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, PunkIcon, QrCodeIcon, RangeInput, ReceiptBillIcon, ReceiveNFTAction, ReceiveTokensAction, RecipientView, RefreshIcon, ReorderIcon, RouteStep, STEP_ITEM_HEIGHT, SearchIcon, SectionTitle, SendTokensAction, SettingsButton, SettingsGearIcon, SettingsItem, SettingsSlider, SettingsSliderIcon, ShoppingBagIcon, SizeTransition, SmileFilledIcon, SmileIcon, SnapIcon, SortIcon, SparkleIcon, SparklesIcon, SquareArrowCenter, SquareArrowTopLeftIcon, SquareArrowTopRight2Icon, SquidLogo, SquidVector, StakeAction, StarLinesIcon, StartAction, StocksIcon, SuccessAction, SunIcon, SunOutlinedIcon, SunriseIcon, SunriseSmallIcon, SwapAction, SwapConfiguration, SwapDetailsView, SwapErrorIcon, SwapHeader, SwapIcon, SwapInputsIcon, SwapProgressView, SwapProgressViewHeader, SwapProperties, SwapStepItem, SwapStepSeparator, SwapStepsCollapsed, SwapSuccessIcon, SwapTransactionView, SwapWarningIcon, Switch, TagIcon, TagIconFilled, TextSkeleton, ThemePreference, ThemeProvider, ThumbsUp, Tick, TimeFliesIcon, Timeline, Timestamp, Toast, TokenDetailsView, TokenGroup, TokenPair, Tooltip, TradingViewStepsIcon, TransactionAction, TransactionFilters, TransactionHeader, TransactionHeaderLayout, TransactionItem, TransactionProperties, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, Transfer, TranslateIcon, TriangleExclamation, UsdAmount, WalletFilledIcon, WalletIcon, WalletLink, WalletsView, WrapAction, XSocial, adjustColorForContrast, baseTailwindConfig, blendColors, cn, darkTheme, getColorBrightness, getContrastColor, getHexColorFromOpacityPercentage, getWalletCardBackground, hexToRgb, isValidHexColor, lightTheme, linkActionTimelineProps, parseColor, parseSquidTheme, pxToRem, remToPx, rgbToHex, spacing$1 as spacing, statusTextClassMap, transactionErrorPauseAnimation, transactionFailureAnimation, transactionHalfSuccessAnimation, transactionPendingAnimation, transactionProcessingAnimation, transactionRejectedAnimation, transactionSuccessAnimation, useCollapsibleMenu, useDropdownMenu, useMediaQuery, useOnResize, useRect, useTimer, useUserTheme, useVersion };

package/dist/esm/types/components/badges/ImageGroup.d.ts

@@ -1,6 +1,7 @@
+import { type ImageProps } from "./Image";
 interface ImageGroupProps {
     imageUrls: string[];
-    badgeUrl?: string;
+    badge?: Omit<ImageProps, "border" | "size">;
 }
-export declare function ImageGroup({ imageUrls, badgeUrl }: ImageGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function ImageGroup({ imageUrls, badge }: ImageGroupProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/components/buttons/IconButton.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
-interface IconButtonProps extends React.ComponentProps<"button"> {
+export interface IconButtonProps extends React.ComponentProps<"button"> {
     icon: React.ReactNode;
 }
 export declare const IconButton: import("react").ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-export {};

package/dist/esm/types/components/icons/Generic.d.ts

@@ -62,6 +62,10 @@ export declare function LaptopIcon({ size, className, }: {
     size?: string;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function CopyOutlinedIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function CopyIcon({ size, className, }: {
     size?: string;
     className?: string;
@@ -97,3 +101,7 @@ export declare function StarLinesIcon({ size, className, }: {
     size?: string;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function QrCodeIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/icons/Plus.d.ts

@@ -1,4 +1,5 @@
-export declare function PlusIcon({ className, size, }: {
+export declare function PlusIcon({ className, size, strokeWidth, }: {
     className?: string;
     size?: string;
+    strokeWidth?: string;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/lists/AccountListItem.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { type IconButtonProps } from "../buttons";
+interface ActionButton extends IconButtonProps {
+    key: NonNullable<React.Key>;
+}
+interface AccountListItemProps {
+    isConnected?: boolean;
+    imageUrls?: string[];
+    imageUrl?: string;
+    badgeUrl?: string;
+    actions?: ActionButton[];
+    title?: string;
+    subtitle?: string;
+    mainButton?: {
+        label: string;
+    } & React.ComponentProps<"button">;
+}
+export declare function AccountListItem({ isConnected, imageUrls, imageUrl, badgeUrl, actions, subtitle, title, mainButton, }: AccountListItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/types/components/lists/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./AccountListItem";
 export * from "./DropdownMenuItem";
 export * from "./DropdownMenuTitle";
 export * from "./HistoryItem";

package/dist/esm/types/stories/badges/ImageGroup.stories.d.ts

@@ -4,3 +4,5 @@ declare const meta: Meta<typeof ImageGroup>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const Badge: Story;
+export declare const CustomBadgeContent: Story;

package/dist/esm/types/stories/lists/AccountListItem.stories.d.ts

@@ -0,0 +1,8 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { AccountListItem } from "../../components/lists/AccountListItem";
+declare const meta: Meta<typeof AccountListItem>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Disconnected: Story;
+export declare const Connected: Story;
+export declare const Actions: Story;

package/dist/index.d.ts

@@ -86,9 +86,9 @@ declare function IconLabel({ src, children, rounded }: IconLabelProps): react_js
 
 interface ImageGroupProps {
     imageUrls: string[];
-    badgeUrl?: string;
+    badge?: Omit<ImageProps, "border" | "size">;
 }
-declare function ImageGroup({ imageUrls, badgeUrl }: ImageGroupProps): react_jsx_runtime.JSX.Element;
+declare function ImageGroup({ imageUrls, badge }: ImageGroupProps): react_jsx_runtime.JSX.Element;
 
 declare const LoadingProvider: react.Provider<boolean | null>;
 interface LoadingSkeletonProps {
@@ -632,6 +632,10 @@ declare function LaptopIcon({ size, className, }: {
     size?: string;
     className?: string;
 }): react_jsx_runtime.JSX.Element;
+declare function CopyOutlinedIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
 declare function CopyIcon({ size, className, }: {
     size?: string;
     className?: string;
@@ -667,6 +671,10 @@ declare function StarLinesIcon({ size, className, }: {
     size?: string;
     className?: string;
 }): react_jsx_runtime.JSX.Element;
+declare function QrCodeIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
 
 declare function EmptyHeartIcon({ className }: {
     className?: string;
@@ -761,9 +769,10 @@ declare function PathSquareIcon({ size, className, }: {
 
 declare function PieChartIcon(): react_jsx_runtime.JSX.Element;
 
-declare function PlusIcon({ className, size, }: {
+declare function PlusIcon({ className, size, strokeWidth, }: {
     className?: string;
     size?: string;
+    strokeWidth?: string;
 }): react_jsx_runtime.JSX.Element;
 
 declare function RefreshIcon(): react_jsx_runtime.JSX.Element;
@@ -1581,7 +1590,7 @@ interface ModalContentProps extends React.HTMLAttributes<HTMLDivElement> {
 declare function ModalContent({ children, addGap, paddingY, borderType, className, ...props }: ModalContentProps): react_jsx_runtime.JSX.Element;
 declare function ModalContentDivider(): react_jsx_runtime.JSX.Element;
 
-interface ActionButton {
+interface ActionButton$1 {
     labelOrIcon: string | React.ReactNode;
     onClick?: () => void;
     id: React.Key;
@@ -1595,7 +1604,7 @@ interface NavigationBarProps extends React.ComponentProps<"nav"> {
     transparent?: boolean;
     displayButtonShadows?: boolean;
     onBackButtonClick?: () => void;
-    actions?: ActionButton[];
+    actions?: ActionButton$1[];
     isLoading?: boolean;
     subtitle?: string;
 }
@@ -1985,6 +1994,23 @@ interface FromToProps {
 }
 declare function Transfer({ isLoading, from, to, className }: FromToProps): react_jsx_runtime.JSX.Element;
 
+interface ActionButton extends IconButtonProps {
+    key: NonNullable<React.Key>;
+}
+interface AccountListItemProps {
+    isConnected?: boolean;
+    imageUrls?: string[];
+    imageUrl?: string;
+    badgeUrl?: string;
+    actions?: ActionButton[];
+    title?: string;
+    subtitle?: string;
+    mainButton?: {
+        label: string;
+    } & React.ComponentProps<"button">;
+}
+declare function AccountListItem({ isConnected, imageUrls, imageUrl, badgeUrl, actions, subtitle, title, mainButton, }: AccountListItemProps): react_jsx_runtime.JSX.Element;
+
 /**
  * Utility type to allow for a type to be either all of the properties of another type, or none of them
  * @example
@@ -16938,4 +16964,4 @@ declare const transactionRejectedAnimation: {
     markers: never[];
 };
 
-export { ANIMATION_DURATIONS, AccountsButton, type ActionButton, ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, type ActionStatus, ActionStatusRow, ActionWrapper, AddressButton, type AllOrNone, AnimationWrapper, Announcement, type AnnouncementProps, AppContainer, Approve, ApproveAction, ArrowBottomTopIcon, ArrowButton, ArrowCornerDownRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowSplit, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, type AssetsButtonVariant, AssetsView, AtomIcon, BackpackIcon, BadgeImage, BankIcon, type BaseActionProps, type BaseTransactionViewProps, BellAlarmIcon, BlockSkeleton, BodyText, Boost, BoostBadge, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, BrokenHeartIcon, BubblesIcon, Button, type ButtonSize, type ButtonVariant, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CSS_VARS, Calendar, CaptionText, CatSquareIcon, CelebrateIcon, ChainLink, Checkmark1Icon, Checkmark2Icon, ChevronArrowIcon, ChevronDownSmallIcon, ChevronGrabberVerticalIcon, ChevronLargeDownIcon, ChevronLargeRightIcon, ChevronRightSmallIcon, ChevronTopIcon, ChevronTopSmallIcon, Chip, type ChipProps, CircleMinusIcon, CirclePlusIcon, CircleX, CircleXFilledIcon, ClockOutlineIcon, ClockSolidIcon, CodeBracketsIcon, CodeSolidSquareIcon, CoinsAddIcon, CoinsIcon, CoinsOutlinedIcon, Collapse, CollapsibleMenu, CollectionIcon, ColorPaletteIcon, CommandIcon, CompassRoundOutlinedIcon, CompassRoundSolidIcon, ConsoleIcon, Copy, CopyIcon, CrossAnimatedIcon, CrossedOutSunSolidIcon, DashboardFast, type DeepPartial, type DescriptionBlock, DescriptionBlocks, DetailsToolbar, DiscordIcon, DockIconAnalytics, DockIconCheckout, DockIconHelp, DockIconProfile, DockIconScan, DockIconSwap, DockSwapIcon, DollarOutlinedIcon, DollarSolidIcon, DotGrid1x3HorizontalIcon, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuTitle, type DropdownPosition, type DropdownStyles, EmojiMeh, EmojiSadIcon, EmptyHeartIcon, ErrorMessage, EthereumIcon, ExplosionIcon, EyeOpenIcon, FavouriteFilterIcon, FeeButton, FeesAction, type FeesActionProps, FeesLines, FeesTotal, FileDownloadIcon, FilledHeartIcon, FilterAscendingIcon, FilterButton, FilterIcon, FilterTimelineIcon, GasIcon, GhostIcon, GithubIcon, HashLink, HeadingText, HeartSmallIcon, HelpIcon, HighestPriceRangeIcon, HistoryItem, type HistoryItemStatus, HomeIcon, IconButton, IconLabel, Image, ImageGroup, ImageIcon, type ImageProps, ImageSparkle, ImageState, IncompleteAction, InfinityIcon, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, LaptopIcon, LightningIcon, LimitIcon, LinkIcon, List, ListItem, ListItemActionsButton, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MainView, MarketCapIcon, MaxIcon, Menu, MenuItem, MenuSwapIcon, MirrorIcon, Modal, ModalContent, ModalContentDivider, MoonIcon, NavigationBar, NewsIcon, NewspaperIcon, NotAllowedIcon, NumericInput, PathSquareIcon, PauseIcon, PercentIcon, PhoneIcon, PieChartIcon, PipeSeparator, PlusIcon, PoopIcon, PowerIcon, PriceChange, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, type PropertyListItemProps, type PublicTheme, PunkIcon, RangeInput, ReceiptBillIcon, ReceiveNFTAction, ReceiveTokensAction, RecipientView, RefreshIcon, ReorderIcon, RouteStep, STEP_ITEM_HEIGHT, SearchIcon, SectionTitle, SendTokensAction, type Settings, SettingsButton, type SettingsButtonProps, type SettingsControl, SettingsGearIcon, SettingsItem, type SettingsItemProps, SettingsSlider, SettingsSliderIcon, type SettingsSliderProps, ShoppingBagIcon, SizeTransition, SmileFilledIcon, SmileIcon, SnapIcon, SortIcon, SparkleIcon, SparklesIcon, SquareArrowCenter, SquareArrowTopLeftIcon, SquareArrowTopRight2Icon, SquidLogo, SquidVector, StakeAction, StarLinesIcon, StartAction, StocksIcon, SuccessAction, SunIcon, SunOutlinedIcon, SunriseIcon, SunriseSmallIcon, SwapAction, SwapConfiguration, SwapDetailsView, SwapErrorIcon, SwapHeader, type SwapHeaderProps, SwapIcon, SwapInputsIcon, SwapProgressView, SwapProgressViewHeader, SwapProperties, type SwapPropertiesProps, SwapState, type SwapStep, SwapStepItem, SwapStepSeparator, SwapStepsCollapsed, type SwapStepsCollapsedFooterButton, SwapSuccessIcon, SwapTransactionView, SwapWarningIcon, Switch, type SwitchProps, TagIcon, TagIconFilled, TextSkeleton, type Theme, ThemePreference, ThemeProvider, type ThemeType, ThumbsUp, Tick, TimeFliesIcon, type Timeframe, Timeline, Timestamp, Toast, TokenDetailsView, TokenGroup, type TokenGroupProps, TokenPair, Tooltip, type TooltipProps, type TooltipThreshold, type TooltipWidth, TradingViewStepsIcon, TransactionAction, type TransactionActionProps, type TransactionActionType, TransactionFilters, TransactionHeader, TransactionHeaderLayout, type TransactionHeaderProps, type TransactionHeaderType, TransactionItem, TransactionProperties, type TransactionPropertiesProps, type TransactionPropertiesType, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, type TransactionViewProps, type TransactionViewType, Transfer, TranslateIcon, TriangleExclamation, UsdAmount, WalletFilledIcon, WalletIcon, WalletLink, WalletsView, WrapAction, XSocial, adjustColorForContrast, baseTailwindConfig, blendColors, cn, darkTheme, getColorBrightness, getContrastColor, getHexColorFromOpacityPercentage, getWalletCardBackground, hexToRgb, isValidHexColor, lightTheme, linkActionTimelineProps, parseColor, parseSquidTheme, pxToRem, remToPx, rgbToHex, spacing, statusTextClassMap, transactionErrorPauseAnimation, transactionFailureAnimation, transactionHalfSuccessAnimation, transactionPendingAnimation, transactionProcessingAnimation, transactionRejectedAnimation, transactionSuccessAnimation, useCollapsibleMenu, useDropdownMenu, useMediaQuery, useOnResize, useRect, useTimer, useUserTheme, useVersion };
+export { ANIMATION_DURATIONS, AccountListItem, AccountsButton, type ActionButton$1 as ActionButton, ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, type ActionStatus, ActionStatusRow, ActionWrapper, AddressButton, type AllOrNone, AnimationWrapper, Announcement, type AnnouncementProps, AppContainer, Approve, ApproveAction, ArrowBottomTopIcon, ArrowButton, ArrowCornerDownRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowSplit, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, type AssetsButtonVariant, AssetsView, AtomIcon, BackpackIcon, BadgeImage, BankIcon, type BaseActionProps, type BaseTransactionViewProps, BellAlarmIcon, BlockSkeleton, BodyText, Boost, BoostBadge, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, BrokenHeartIcon, BubblesIcon, Button, type ButtonSize, type ButtonVariant, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CSS_VARS, Calendar, CaptionText, CatSquareIcon, CelebrateIcon, ChainLink, Checkmark1Icon, Checkmark2Icon, ChevronArrowIcon, ChevronDownSmallIcon, ChevronGrabberVerticalIcon, ChevronLargeDownIcon, ChevronLargeRightIcon, ChevronRightSmallIcon, ChevronTopIcon, ChevronTopSmallIcon, Chip, type ChipProps, CircleMinusIcon, CirclePlusIcon, CircleX, CircleXFilledIcon, ClockOutlineIcon, ClockSolidIcon, CodeBracketsIcon, CodeSolidSquareIcon, CoinsAddIcon, CoinsIcon, CoinsOutlinedIcon, Collapse, CollapsibleMenu, CollectionIcon, ColorPaletteIcon, CommandIcon, CompassRoundOutlinedIcon, CompassRoundSolidIcon, ConsoleIcon, Copy, CopyIcon, CopyOutlinedIcon, CrossAnimatedIcon, CrossedOutSunSolidIcon, DashboardFast, type DeepPartial, type DescriptionBlock, DescriptionBlocks, DetailsToolbar, DiscordIcon, DockIconAnalytics, DockIconCheckout, DockIconHelp, DockIconProfile, DockIconScan, DockIconSwap, DockSwapIcon, DollarOutlinedIcon, DollarSolidIcon, DotGrid1x3HorizontalIcon, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuTitle, type DropdownPosition, type DropdownStyles, EmojiMeh, EmojiSadIcon, EmptyHeartIcon, ErrorMessage, EthereumIcon, ExplosionIcon, EyeOpenIcon, FavouriteFilterIcon, FeeButton, FeesAction, type FeesActionProps, FeesLines, FeesTotal, FileDownloadIcon, FilledHeartIcon, FilterAscendingIcon, FilterButton, FilterIcon, FilterTimelineIcon, GasIcon, GhostIcon, GithubIcon, HashLink, HeadingText, HeartSmallIcon, HelpIcon, HighestPriceRangeIcon, HistoryItem, type HistoryItemStatus, HomeIcon, IconButton, type IconButtonProps, IconLabel, Image, ImageGroup, ImageIcon, type ImageProps, ImageSparkle, ImageState, IncompleteAction, InfinityIcon, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, LaptopIcon, LightningIcon, LimitIcon, LinkIcon, List, ListItem, ListItemActionsButton, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MainView, MarketCapIcon, MaxIcon, Menu, MenuItem, MenuSwapIcon, MirrorIcon, Modal, ModalContent, ModalContentDivider, MoonIcon, NavigationBar, NewsIcon, NewspaperIcon, NotAllowedIcon, NumericInput, PathSquareIcon, PauseIcon, PercentIcon, PhoneIcon, PieChartIcon, PipeSeparator, PlusIcon, PoopIcon, PowerIcon, PriceChange, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, type PropertyListItemProps, type PublicTheme, PunkIcon, QrCodeIcon, RangeInput, ReceiptBillIcon, ReceiveNFTAction, ReceiveTokensAction, RecipientView, RefreshIcon, ReorderIcon, RouteStep, STEP_ITEM_HEIGHT, SearchIcon, SectionTitle, SendTokensAction, type Settings, SettingsButton, type SettingsButtonProps, type SettingsControl, SettingsGearIcon, SettingsItem, type SettingsItemProps, SettingsSlider, SettingsSliderIcon, type SettingsSliderProps, ShoppingBagIcon, SizeTransition, SmileFilledIcon, SmileIcon, SnapIcon, SortIcon, SparkleIcon, SparklesIcon, SquareArrowCenter, SquareArrowTopLeftIcon, SquareArrowTopRight2Icon, SquidLogo, SquidVector, StakeAction, StarLinesIcon, StartAction, StocksIcon, SuccessAction, SunIcon, SunOutlinedIcon, SunriseIcon, SunriseSmallIcon, SwapAction, SwapConfiguration, SwapDetailsView, SwapErrorIcon, SwapHeader, type SwapHeaderProps, SwapIcon, SwapInputsIcon, SwapProgressView, SwapProgressViewHeader, SwapProperties, type SwapPropertiesProps, SwapState, type SwapStep, SwapStepItem, SwapStepSeparator, SwapStepsCollapsed, type SwapStepsCollapsedFooterButton, SwapSuccessIcon, SwapTransactionView, SwapWarningIcon, Switch, type SwitchProps, TagIcon, TagIconFilled, TextSkeleton, type Theme, ThemePreference, ThemeProvider, type ThemeType, ThumbsUp, Tick, TimeFliesIcon, type Timeframe, Timeline, Timestamp, Toast, TokenDetailsView, TokenGroup, type TokenGroupProps, TokenPair, Tooltip, type TooltipProps, type TooltipThreshold, type TooltipWidth, TradingViewStepsIcon, TransactionAction, type TransactionActionProps, type TransactionActionType, TransactionFilters, TransactionHeader, TransactionHeaderLayout, type TransactionHeaderProps, type TransactionHeaderType, TransactionItem, TransactionProperties, type TransactionPropertiesProps, type TransactionPropertiesType, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, type TransactionViewProps, type TransactionViewType, Transfer, TranslateIcon, TriangleExclamation, UsdAmount, WalletFilledIcon, WalletIcon, WalletLink, WalletsView, WrapAction, XSocial, adjustColorForContrast, baseTailwindConfig, blendColors, cn, darkTheme, getColorBrightness, getContrastColor, getHexColorFromOpacityPercentage, getWalletCardBackground, hexToRgb, isValidHexColor, lightTheme, linkActionTimelineProps, parseColor, parseSquidTheme, pxToRem, remToPx, rgbToHex, spacing, statusTextClassMap, transactionErrorPauseAnimation, transactionFailureAnimation, transactionHalfSuccessAnimation, transactionPendingAnimation, transactionProcessingAnimation, transactionRejectedAnimation, transactionSuccessAnimation, useCollapsibleMenu, useDropdownMenu, useMediaQuery, useOnResize, useRect, useTimer, useUserTheme, useVersion };

package/package.json

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