@0xsquid/ui 2.6.3 → 2.6.4

package/dist/cjs/types/stories/controls/Switch.stories.d.ts

@@ -1,11 +1,13 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { type Meta, type StoryObj } from "@storybook/react";
 import { Switch } from "../../components/controls/Switch";
 declare const meta: Meta<typeof Switch>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const LargeChecked: Story;
 export declare const LargeUnchecked: Story;
-export declare const LargeDisabled: Story;
+export declare const LargeCheckedDisabled: Story;
+export declare const LargeUncheckedDisabled: Story;
 export declare const SmallChecked: Story;
 export declare const SmallUnchecked: Story;
-export declare const SmallDisabled: Story;
+export declare const SmallCheckedDisabled: Story;
+export declare const SmallUncheckedDisabled: Story;

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

@@ -33,3 +33,6 @@ export declare const SmallWithoutExtraPadding: Story;
 export declare const LargeWithoutExtraPadding: Story;
 export declare const LargeWithDropdownMenu: Story;
 export declare const LargeWithMultilineSubtitle: Story;
+export declare const SmallWithSwitchControl: Story;
+export declare const LargeWithSwitchControl: Story;
+export declare const LargeWithSwitchControlDisabled: Story;

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

@@ -1,7 +1,7 @@
 export type TextSize = "small" | "medium" | "large";
 export type SwitchSize = "small" | "large";
 export type ButtonVariant = "primary" | "secondary" | "tertiary";
-export type ButtonSize = "md" | "lg";
+export type ButtonSize = "sm" | "md" | "lg";
 export type SwapDirection = "from" | "to";
 export type BoostMode = "normal" | "boost";
 export type HistoryItemStatus = "completed" | "pending" | "failed" | "warning";

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-600", "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_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-600", "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", "button-sm-primary-bg", "button-sm-primary-text", "button-sm-secondary-bg", "button-sm-secondary-text", "button-sm-tertiary-bg", "button-sm-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", "button-sm-primary", "button-sm-secondary", "button-sm-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"];
@@ -26,7 +26,7 @@ export interface InternalTheme {
  * 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" | "menu-bg" | "menu-text" | "menu-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" | "button-sm-primary-bg" | "button-sm-primary-text" | "button-sm-secondary-bg" | "button-sm-secondary-text" | "button-sm-tertiary-bg" | "button-sm-tertiary-text" | "input-placeholder" | "input-text" | "input-selection" | "input-bg" | "animation-bg" | "animation-text" | "modal-backdrop" | "menu-bg" | "menu-text" | "menu-backdrop";
 /**
  * These colors are generated internally using the base colors
  */

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

@@ -1,4 +1,4 @@
 export type { Theme, PublicTheme, Settings } from "./config";
 export * from "./utils";
-export type { SwapState, ThemeType, SwapStep, HistoryItemStatus, ActionStatus, AssetsButtonVariant, ButtonVariant, ButtonSize, DescriptionBlock, } from "./components";
+export type { SwapState, ThemeType, SwapStep, HistoryItemStatus, ActionStatus, AssetsButtonVariant, ButtonVariant, ButtonSize, DescriptionBlock, DropdownPosition, } from "./components";
 export { themeKeysToCssVariables } from "./config";

package/dist/esm/index.js

@@ -97,6 +97,13 @@ const THEME_COLOR_KEYS = [
     "button-md-secondary-text",
     "button-md-tertiary-bg",
     "button-md-tertiary-text",
+    // sm button variant colors
+    "button-sm-primary-bg",
+    "button-sm-primary-text",
+    "button-sm-secondary-bg",
+    "button-sm-secondary-text",
+    "button-sm-tertiary-bg",
+    "button-sm-tertiary-text",
     // input colors
     "input-placeholder",
     "input-text",
@@ -126,12 +133,18 @@ const THEME_COLOR_KEYS = [
     "material-light-blend-grey-800",
 ];
 const THEME_BORDER_RADIUS_KEYS = [
+    // lg button
     "button-lg-primary",
     "button-lg-secondary",
     "button-lg-tertiary",
+    // md button
     "button-md-primary",
     "button-md-secondary",
     "button-md-tertiary",
+    // sm button
+    "button-sm-primary",
+    "button-sm-secondary",
+    "button-sm-tertiary",
     "container",
     "input",
     "menu-sm",
@@ -2933,6 +2946,19 @@ function mapToCssVariables(obj) {
         return acc;
     }, {});
 }
+/**
+ * Simple hash function to create a deterministic index from a given string.
+ * @param {string} str - The input string to hash.
+ * @param {number} max - The maximum value for the hash.
+ * @returns {number} - The index within the array.
+ */
+function hashStringToIndex(str, max) {
+    let index = 0;
+    for (let i = 0; i < str.length; i++) {
+        index = (index * 31 + str.charCodeAt(i)) % max;
+    }
+    return index;
+}
 
 const spacing$1 = {
     "squid-xxs": "0.3125rem", // 5px
@@ -3327,12 +3353,18 @@ const defaultFontFamily = {
     "squid-main": "Geist, sans-serif",
 };
 const defaultBorderRadius = {
+    // lg button
     "button-lg-primary": spacing$1["squid-xxl"],
     "button-lg-secondary": spacing$1["squid-xxl"],
     "button-lg-tertiary": spacing$1["squid-xxl"],
+    // md button
     "button-md-primary": spacing$1["squid-m"],
     "button-md-secondary": spacing$1["squid-m"],
     "button-md-tertiary": spacing$1["squid-m"],
+    // sm button
+    "button-sm-primary": spacing$1["squid-m"],
+    "button-sm-secondary": spacing$1["squid-m"],
+    "button-sm-tertiary": spacing$1["squid-m"],
     container: spacing$1["squid-l"],
     input: "9999px",
     "menu-sm": spacing$1["squid-s"],
@@ -3374,18 +3406,27 @@ const lightTheme = {
         "animation-bg": "#B893EC",
         "animation-text": "#FBFBFD",
         // buttons
+        // lg button
         "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",
+        // md button
         "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",
+        // sm button
+        "button-sm-primary-bg": "#B893EC",
+        "button-sm-primary-text": "#FBFBFD",
+        "button-sm-secondary-bg": "#17191C",
+        "button-sm-secondary-text": "#EDEEF3",
+        "button-sm-tertiary-bg": "#EDEEF3",
+        "button-sm-tertiary-text": "#292C32",
         // input
         "input-bg": "#FBFBFD",
         "input-placeholder": "#A7ABBE",
@@ -3434,18 +3475,27 @@ const darkTheme = {
         "animation-bg": "#9E79D2",
         "animation-text": "#FBFBFD",
         // buttons
+        // lg button
         "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",
+        // md button
         "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",
+        // sm button
+        "button-sm-primary-bg": "#9E79D2",
+        "button-sm-primary-text": "#FBFBFD",
+        "button-sm-secondary-bg": "#FBFBFD",
+        "button-sm-secondary-text": "#292C32",
+        "button-sm-tertiary-bg": "#292C32",
+        "button-sm-tertiary-text": "#D1D6E0",
         // input
         "input-bg": "#17191C",
         "input-placeholder": "#676B7E",
@@ -3524,7 +3574,7 @@ const boxShadowClassMap = {
     xlarge: "tw-shadow-elevation-light-2",
     xxlarge: "tw-shadow-elevation-dark-1",
 };
-const roundedClassMap$1 = {
+const roundedClassMap = {
     xxs: "tw-rounded-squid-xxs",
     xs: "tw-rounded-squid-xs",
     s: "tw-rounded-squid-s",
@@ -3553,7 +3603,7 @@ const borderClassMap = {
 };
 function Image$1(_a) {
     var { src, size = "medium", className: propsClassName, placeholderImageUrl, border = "none", rounded = "xxs", shadow = false, children, containerProps } = _a, props = __rest$1(_a, ["src", "size", "className", "placeholderImageUrl", "border", "rounded", "shadow", "children", "containerProps"]);
-    const className = cn("tw-object-cover tw-aspect-square tw-relative tw-duration-300 tw-transition-[width,height] tw-max-w-full tw-bg-grey-500", sizeClassMap$1[size], propsClassName, roundedClassMap$1[rounded], shadow && boxShadowClassMap[size], borderClassMap[border]);
+    const className = cn("tw-object-cover tw-aspect-square tw-relative tw-duration-300 tw-transition-[width,height] tw-max-w-full tw-bg-grey-500", sizeClassMap$1[size], propsClassName, roundedClassMap[rounded], shadow && boxShadowClassMap[size], borderClassMap[border]);
     const [imageState, setImageState] = useState(ImageState.LOADED);
     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],
@@ -4012,6 +4062,12 @@ function ArrowExpandIcon({ className, size = "24", }) {
 function MoneyBagIcon({ className, size = "24", }) {
     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.5 8H14.5M9.5 8C9.5 8 3.99996 11 4 16C4.00003 20.0207 7.97931 21 12 21C16.0207 21 20 20.0207 20 16C20 11 14.5 8 14.5 8M9.5 8L8.55725 5.48601C8.23089 4.6157 8.56249 3.64123 9.45158 3.37016C10.1074 3.1702 10.9686 3 12 3C13.0314 3 13.8926 3.1702 14.5484 3.37016C15.4375 3.64123 15.7691 4.6157 15.4427 5.48601L14.5 8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
+function PluginIcon({ size = "16", className, }) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 16 16", fill: "none", className: className, children: jsx("path", { d: "M6.66675 1.99998C6.66675 1.63179 6.36827 1.33331 6.00008 1.33331C5.63189 1.33331 5.33341 1.63179 5.33341 1.99998V3.99998H4.66675C3.56218 3.99998 2.66675 4.89541 2.66675 5.99998V9.33331C2.66675 11.1743 4.15913 12.6666 6.00008 12.6666H7.33341V14C7.33341 14.3682 7.63189 14.6666 8.00008 14.6666C8.36827 14.6666 8.66675 14.3682 8.66675 14V12.6666H10.0001C11.841 12.6666 13.3334 11.1743 13.3334 9.33331V5.99998C13.3334 4.89541 12.438 3.99998 11.3334 3.99998H10.6667V1.99998C10.6667 1.63179 10.3683 1.33331 10.0001 1.33331C9.63189 1.33331 9.33341 1.63179 9.33341 1.99998V3.99998H6.66675V1.99998Z", fill: "currentColor" }) }));
+}
+function CircleCheckIcon({ className, size = "24", }) {
+    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", { 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" }) }));
+}
 
 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" }) }));
@@ -4378,16 +4434,23 @@ function Chip(_a) {
     return (jsx("div", Object.assign({}, props, { className: cn("tw-flex tw-h-squid-m tw-items-center tw-justify-center tw-rounded-squid-m tw-bg-grey-500 tw-text-grey-900", icon && "tw-w-squid-m", props.className), children: label ? (jsx(CaptionText, { className: "tw-min-w-squid-xl tw-text-nowrap tw-px-squid-xxs tw-text-center", children: label })) : (icon) })));
 }
 
+const loaderSizeMap = {
+    sm: "16px",
+    md: "24px",
+    lg: "36px",
+};
 const baseButtonClassName = "tw-border tw-relative tw-overflow-hidden tw-group/base-button tw-flex tw-items-center tw-justify-center";
 const buttonWidthClassnameMap = {
+    sm: "tw-w-max",
     md: "tw-min-w-[60px]",
     lg: "tw-w-full",
 };
 const buttonSizeClassMap = {
     md: "tw-px-squid-xs tw-py-squid-xxs tw-h-squid-xl",
     lg: "tw-p-1 tw-h-button",
+    sm: "tw-h-squid-l tw-px-squid-xs",
 };
-const roundedClassMap = {
+const buttonRoundedClassMap = {
     lg: {
         primary: "tw-rounded-button-lg-primary",
         secondary: "tw-rounded-button-lg-secondary",
@@ -4398,6 +4461,11 @@ const roundedClassMap = {
         secondary: "tw-rounded-button-md-secondary",
         tertiary: "tw-rounded-button-md-tertiary",
     },
+    sm: {
+        primary: "tw-rounded-button-sm-primary",
+        secondary: "tw-rounded-button-sm-secondary",
+        tertiary: "tw-rounded-button-sm-tertiary",
+    },
 };
 const buttonVariantClassMap = {
     lg: {
@@ -4410,22 +4478,24 @@ const buttonVariantClassMap = {
         secondary: "tw-bg-button-md-secondary-bg tw-text-button-md-secondary-text",
         tertiary: "tw-bg-button-md-tertiary-bg tw-text-button-md-tertiary-text",
     },
+    sm: {
+        primary: "tw-bg-button-sm-primary-bg tw-text-button-sm-primary-text",
+        secondary: "tw-bg-button-sm-secondary-bg tw-text-button-sm-secondary-text",
+        tertiary: "tw-bg-button-sm-tertiary-bg tw-text-button-sm-tertiary-text",
+    },
 };
 // right now all variants have the same disabled styles
 // in the future, we can add more disabled styles for different variants
 const buttonDisabledClass = "!tw-bg-grey-800 !tw-text-grey-600 tw-cursor-not-allowed";
 const loadingClassname = "tw-invisible tw-opacity-0";
 function Button$1(_a) {
-    var { label, disabled = false, size, variant, icon, link, isLoading = false, showLoader = false, chip, containerClassName, anchorRef, buttonRef } = _a, props = __rest$1(_a, ["label", "disabled", "size", "variant", "icon", "link", "isLoading", "showLoader", "chip", "containerClassName", "anchorRef", "buttonRef"]);
+    var { label, disabled = false, size, variant, icon, link, isLoading = false, showLoader = false, loaderSize = "md", chip, containerClassName, anchorRef, buttonRef } = _a, props = __rest$1(_a, ["label", "disabled", "size", "variant", "icon", "link", "isLoading", "showLoader", "loaderSize", "chip", "containerClassName", "anchorRef", "buttonRef"]);
     const chipElement = chip != null ? (jsx(Chip, Object.assign({}, chip, { className: cn("tw-absolute -tw-right-squid-xxs -tw-top-squid-xxs tw-z-10", chip.className) }))) : null;
-    const children = (jsxs(Fragment, { children: [!disabled && !isLoading && (jsx(ButtonHoverOverlay, { className: roundedClassMap[size][variant] })), jsx("div", { className: "tw-relative tw-z-[5] tw-flex tw-items-center tw-justify-center tw-gap-squid-xxs", children: label == null && icon == null ? (props.children) : size === "lg" ? (jsxs("span", { className: "tw-flex tw-items-center tw-justify-center tw-gap-squid-xs tw-px-squid-m", children: [showLoader && jsx(Loader, {}), jsx(BodyText, { className: isLoading ? loadingClassname : "", size: "medium", children: label })] })) : size === "md" ? (label != null && icon == null ? (
-                // label only
-                jsx(BodyText, { className: isLoading ? loadingClassname : "", size: "small", children: label })) : label == null && icon != null ? (
-                // icon only
-                isLoading ? null : (icon)) : (
-                // icon and label
-                jsxs(Fragment, { children: [icon, jsx(BodyText, { className: "tw-pr-1", size: "small", children: label })] }))) : null })] }));
-    const className = cn(baseButtonClassName, buttonSizeClassMap[size], buttonWidthClassnameMap[size], buttonVariantClassMap[size][variant], "tw-border-material-light-thin", !disabled && !isLoading && "hover:tw-border-material-light-average", roundedClassMap[size][variant], 
+    const children = (jsxs(Fragment, { children: [!disabled && !isLoading && (jsx(ButtonHoverOverlay, { className: buttonRoundedClassMap[size][variant] })), jsx("div", { className: "tw-relative tw-z-[5] tw-flex tw-items-center tw-justify-center tw-gap-squid-xxs", children: label == null && icon == null && !showLoader ? (props.children) : (jsxs("span", { className: cn("tw-flex tw-items-center tw-justify-center", size === "lg"
+                        ? "tw-gap-squid-xs tw-px-squid-m"
+                        : "tw-gap-squid-xxs"), children: [showLoader && jsx(Loader, { size: loaderSizeMap[loaderSize] }), !isLoading && icon, label != null &&
+                            (size === "sm" ? (jsx(CaptionText, { className: cn(isLoading && loadingClassname, icon != null && "tw-pr-1"), children: label })) : (jsx(BodyText, { className: cn(isLoading && loadingClassname, icon != null && "tw-pr-1"), size: size === "lg" ? "medium" : "small", children: label })))] })) })] }));
+    const className = cn(baseButtonClassName, buttonSizeClassMap[size], buttonWidthClassnameMap[size], buttonVariantClassMap[size][variant], "tw-border-material-light-thin", !disabled && !isLoading && "hover:tw-border-material-light-average", buttonRoundedClassMap[size][variant], 
     // disabled styles
     disabled && buttonDisabledClass, isLoading && "tw-cursor-not-allowed", 
     // custom classes from props
@@ -4443,7 +4513,7 @@ function Button$1(_a) {
 const ButtonHoverOverlay = ({ className }) => {
     return (jsx("span", { className: cn("tw-absolute tw-inset-0 tw-z-0 tw-hidden tw-h-full tw-w-full tw-bg-material-light-thin group-hover/base-button:tw-block", className) }));
 };
-const ButtonWrapper = ({ children, size, variant, className, }) => (jsx("div", { className: cn("tw-relative", buttonWidthClassnameMap[size], roundedClassMap[size][variant], className), children: children }));
+const ButtonWrapper = ({ children, size, variant, className, }) => (jsx("div", { className: cn("tw-relative", buttonWidthClassnameMap[size], buttonRoundedClassMap[size][variant], className), children: children }));
 
 function AccountsButton(_a) {
     var { imageUrls } = _a, props = __rest$1(_a, ["imageUrls"]);
@@ -4469,6 +4539,26 @@ function ArrowButton(_a) {
                 "aria-disabled:tw-bg-grey-600 aria-disabled:tw-text-grey-800"), children: jsx(ArrowRightIcon, {}) })] })));
 }
 
+const colors = [
+    "#D94E41",
+    "#E58845",
+    "#D9BA21",
+    "#B1CC29",
+    "#66CC33",
+    "#19A654",
+    "#56BFB6",
+    "#45B0E5",
+    "#3973E5",
+    "#7562D9",
+    "#B167E5",
+    "#E573BF",
+];
+function useColorFromSeed(seed) {
+    return useMemo(() => {
+        return colors[hashStringToIndex(seed, colors.length)];
+    }, [seed]);
+}
+
 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 != null;
@@ -19362,7 +19452,7 @@ const collapsedListItemClassMap = {
     large: "tw-w-[80px]",
 };
 function ListItem(_a) {
-    var { itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, placeholderImageUrl, size = "large", mainIcon, className, isSelected = false, onDetailClick, showDetailOnHoverOnly, rounded = "xxs", detailButtonClassName, loading, containerProps, compactOnMobile, extraPadding = true, itemsContainerRef, dropdownMenuContent, imageGroup, multilineSubtitle = false } = _a, props = __rest$1(_a, ["itemTitle", "mainImageUrl", "subtitle", "subtitleOnHover", "detail", "icon", "secondaryImageUrl", "placeholderImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading", "containerProps", "compactOnMobile", "extraPadding", "itemsContainerRef", "dropdownMenuContent", "imageGroup", "multilineSubtitle"]);
+    var { itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, placeholderImageUrl, size = "large", mainIcon, className, isSelected = false, onDetailClick, showDetailOnHoverOnly, rounded = "xxs", detailButtonClassName, loading, containerProps, compactOnMobile, extraPadding = true, itemsContainerRef, dropdownMenuContent, imageGroup, multilineSubtitle = false, control } = _a, props = __rest$1(_a, ["itemTitle", "mainImageUrl", "subtitle", "subtitleOnHover", "detail", "icon", "secondaryImageUrl", "placeholderImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading", "containerProps", "compactOnMobile", "extraPadding", "itemsContainerRef", "dropdownMenuContent", "imageGroup", "multilineSubtitle", "control"]);
     const { isDropdownOpen, dropdownRef, openDropdown, closeDropdown, openDropdownButtonRef, itemRef, menuRef, dropdownStyles, } = useDropdownMenu({
         itemsContainerRef,
     });
@@ -19398,9 +19488,11 @@ function ListItem(_a) {
         }
         return null;
     };
-    const isInteractive = !!props.onClick;
-    const ItemTag = isInteractive ? "button" : "div";
-    const itemProps = isInteractive ? props : {};
+    const isInteractive = !!props.onClick || !!control;
+    const ItemTag = isInteractive ? (control ? "label" : "button") : "div";
+    const itemProps = isInteractive
+        ? props
+        : {};
     const handleInteraction = (e) => {
         var _a;
         e.preventDefault();
@@ -19417,9 +19509,9 @@ function ListItem(_a) {
     };
     return (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", !multilineSubtitle && listItemSizeMap[size], extraPadding && "tw-px-squid-xs", compactOnMobile
             ? `${collapsedListItemClassMap[size]} mobile-lg:tw-w-full`
-            : "tw-w-full", className), children: [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-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs", !multilineSubtitle
+            : "tw-w-full", className), children: [jsxs(ItemTag, Object.assign({}, itemProps, { onClick: control == null ? handleItemClick : undefined, className: cn("tw-group/list-item tw-peer/list-item tw-relative tw-flex tw-w-full tw-max-w-full  tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs", !multilineSubtitle
                     ? "tw-items-center tw-py-squid-xxs"
-                    : "tw-py-squid-xs", (isSelected || isDropdownOpen) && "tw-bg-material-light-thin", isInteractive && "hover:tw-bg-material-light-thin", isInteractive && "tw-text-left tw-normal-case"), children: [size === "large" ? (jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon !== null && mainIcon !== void 0 ? mainIcon : (imageGroup != null ? (jsx(ImageGroup, { size: "small", imageUrls: imageGroup })) : (jsx(BadgeImage, { image: {
+                    : "tw-py-squid-xs", (isSelected || isDropdownOpen) && "tw-bg-material-light-thin", isInteractive && control == null && "hover:tw-bg-material-light-thin", isInteractive && "tw-text-left tw-normal-case"), children: [size === "large" ? (jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon !== null && mainIcon !== void 0 ? mainIcon : (imageGroup != null ? (jsx(ImageGroup, { size: "small", imageUrls: imageGroup })) : (jsx(BadgeImage, { image: {
                                 src: mainImageUrl,
                                 placeholderImageUrl,
                                 size: "xlarge",
@@ -19439,7 +19531,7 @@ function ListItem(_a) {
                             : "tw-flex", isDetailInteractive && "hover:tw-bg-material-light-thin", detailButtonClassName), children: [!!detail && (jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })), icon ? (jsx("span", { className: "tw-flex tw-items-center tw-justify-center tw-px-[3px] tw-py-2", children: icon })) : null] }))), !!dropdownMenuContent && (jsx(ListItemActionsButton, { ref: openDropdownButtonRef, onClick: (e) => {
                             e.stopPropagation();
                             isDropdownOpen ? closeDropdown() : openDropdown();
-                        }, isActive: isDropdownOpen, className: "tw-z-20 peer-hover/list-item:tw-opacity-100" }))] })), isDropdownOpen && !!dropdownMenuContent ? (jsx(DropdownMenu, { menuRef: menuRef, isHidden: !dropdownStyles, className: cn(!!dropdownStyles &&
+                        }, isActive: isDropdownOpen, className: "tw-z-20 peer-hover/list-item:tw-opacity-100" })), control] })), isDropdownOpen && !!dropdownMenuContent ? (jsx(DropdownMenu, { menuRef: menuRef, isHidden: !dropdownStyles, className: cn(!!dropdownStyles &&
                     dropdownPositionClassMap$1[dropdownStyles.position]), dropdownRef: dropdownRef, children: dropdownMenuContent })) : null] })));
 }
 const ListItemActionsButton = forwardRef((_a, ref) => {
@@ -27534,19 +27626,23 @@ function Switch({ checked = false, onChange, size, disabled = false, inputProps,
         // size styles
         switchSizeClassMap[size], 
         // checked styles
-        checked ? "tw-bg-status-positive" : "tw-bg-grey-800", 
+        disabled || !checked ? "tw-bg-grey-800" : "tw-bg-status-positive", 
         // disabled styles
         disabled ? "tw-cursor-not-allowed" : "tw-cursor-pointer", 
         // Focus visible styles
         "tw-focus-visible-within-outline"), children: [jsx("input", Object.assign({}, inputProps, { disabled: disabled, checked: checked, onChange: disabled ? undefined : (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked), type: "checkbox", className: "tw-peer tw-sr-only" })), jsx("span", { style: {
-                    filter: "drop-shadow(0px 5px 20px rgba(0, 0, 0, 0.33)) drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.20))",
+                    filter: disabled
+                        ? "drop-shadow(0px 5px 20px rgba(0, 0, 0, 0.10)) drop-shadow(0px 1px 5px rgba(0, 0, 0, 0.10))"
+                        : "drop-shadow(0px 5px 20px rgba(0, 0, 0, 0.33)) drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.20))",
                 }, className: clsx("tw-absolute tw-rounded-full tw-border tw-border-material-light-thin tw-transition-all", 
                 // size styles
                 switchKnobSizeClassMap[size], 
                 // checked styles
-                switchKnobCheckedClassMap[size][checked ? "checked" : "unchecked"], checked
-                    ? "group-data-[squid-theme-type=dark]:tw-bg-grey-100 group-data-[squid-theme-type=light]:tw-bg-grey-900"
-                    : "tw-bg-grey-500") })] }));
+                switchKnobCheckedClassMap[size][checked ? "checked" : "unchecked"], disabled
+                    ? "group-data-[squid-theme-type=dark]:tw-bg-grey-700 group-data-[squid-theme-type=light]:tw-bg-grey-900"
+                    : checked
+                        ? "group-data-[squid-theme-type=dark]:tw-bg-grey-100 group-data-[squid-theme-type=light]:tw-bg-grey-900"
+                        : "tw-bg-grey-500") })] }));
 }
 
 function RangeInput({ label, initialValue, onChange, min = 0, max = 99, isWarning = false, }) {
@@ -27660,7 +27756,8 @@ function RangeInput({ label, initialValue, onChange, min = 0, max = 99, isWarnin
                             }, onMouseLeave: handleUpdateValue, className: cn("tw-relative tw-flex tw-h-full tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-p-squid-xxs tw-text-left tw-text-caption tw-font-caption tw-leading-[10px] placeholder-shown:tw-text-grey-600 hover:tw-bg-material-light-thin"), children: jsx(CirclePlusIcon, {}) })] })] }) }));
 }
 
-const imageClass = "tw-w-[40px] tw-aspect-square tw-flex tw-items-center tw-justify-center";
+const imageWrapperClassName = "tw-w-[40px] tw-aspect-square tw-flex tw-items-center tw-justify-center";
+const tokenImageClassName = "tw-absolute tw-h-squid-xl tw-w-squid-xl tw-rounded-full tw-object-cover";
 const themeKeyVariantMap = {
     primary: "grey-800",
     accent: "royal-500",
@@ -27680,6 +27777,12 @@ var AssetsButtonState;
     AssetsButtonState[AssetsButtonState["EMPTY"] = 2] = "EMPTY";
     AssetsButtonState[AssetsButtonState["LOADING"] = 3] = "LOADING";
 })(AssetsButtonState || (AssetsButtonState = {}));
+var ImageLoadingState;
+(function (ImageLoadingState) {
+    ImageLoadingState[ImageLoadingState["LOADING"] = 0] = "LOADING";
+    ImageLoadingState[ImageLoadingState["LOADED"] = 1] = "LOADED";
+    ImageLoadingState[ImageLoadingState["ERROR"] = 2] = "ERROR";
+})(ImageLoadingState || (ImageLoadingState = {}));
 const outlineWidthMap = {
     [AssetsButtonState.LOADING]: {
         inner: 75,
@@ -27699,7 +27802,9 @@ const outlineWidthMap = {
     },
 };
 function AssetsButton({ chain, token, onClick, variant = "primary", isLoading = false, tooltip, emptyTokenLabel = "Select token", }) {
-    var _a, _b;
+    var _a, _b, _c, _d;
+    const [tokenImageLoadingState, setTokenImageLoadingState] = useState(ImageLoadingState.LOADING);
+    const fallbackBgColor = useColorFromSeed((_a = token === null || token === void 0 ? void 0 : token.symbol) !== null && _a !== void 0 ? _a : "");
     const state = useMemo(() => {
         if (chain != null && !isLoading) {
             if (token != null) {
@@ -27714,10 +27819,27 @@ function AssetsButton({ chain, token, onClick, variant = "primary", isLoading =
     }, [token, chain, isLoading]);
     const defaultBgColor = `var(${themeKeysToCssVariables.color[themeKeyVariantMap[variant]].cssVariable})`;
     const outlineWidth = outlineWidthMap[state];
-    const chainBgColor = (_a = chain === null || chain === void 0 ? void 0 : chain.bgColor) !== null && _a !== void 0 ? _a : defaultBgColor;
-    const tokenBgColor = state === AssetsButtonState.FULL
-        ? (_b = token === null || token === void 0 ? void 0 : token.bgColor) !== null && _b !== void 0 ? _b : defaultBgColor
-        : defaultBgColor;
+    const chainBgColor = (_b = chain === null || chain === void 0 ? void 0 : chain.bgColor) !== null && _b !== void 0 ? _b : defaultBgColor;
+    const tokenTextColor = tokenImageLoadingState === ImageLoadingState.ERROR
+        ? "#fff"
+        : token === null || token === void 0 ? void 0 : token.textColor;
+    const tokenBgColor = useMemo(() => {
+        if (state !== AssetsButtonState.FULL) {
+            return defaultBgColor;
+        }
+        if (tokenImageLoadingState === ImageLoadingState.ERROR) {
+            // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+            return fallbackBgColor || defaultBgColor;
+        }
+        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+        return (token === null || token === void 0 ? void 0 : token.bgColor) || defaultBgColor;
+    }, [
+        state,
+        token === null || token === void 0 ? void 0 : token.bgColor,
+        defaultBgColor,
+        tokenImageLoadingState,
+        fallbackBgColor,
+    ]);
     const bgGradient = useMemo(() => {
         switch (state) {
             case AssetsButtonState.EMPTY:
@@ -27735,12 +27857,22 @@ function AssetsButton({ chain, token, onClick, variant = "primary", isLoading =
                 ? "tw-cursor-not-allowed"
                 : "tw-group/assets-button"), children: [jsx("svg", { className: "tw-absolute tw-left-0 tw-z-10 tw-h-[40px] tw-w-[72px] tw-text-material-light-thin", viewBox: "0 0 72 40", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: jsx("path", { d: "m57.86 5.86c-.53.53-1.05 1.06-1.56 1.59-3.29 3.38-6.37 6.55-10.3 6.55s-7.01-3.17-10.3-6.55c-.51-.53-1.03-1.06-1.56-1.59-3.9-3.91-9.02-5.86-14.14-5.86s-10.24 1.95-14.14 5.86c-3.91 3.9-5.86 9.02-5.86 14.14s1.95 10.24 5.86 14.14c3.91 3.91 9.02 5.86 14.14 5.86s10.24-1.95 14.14-5.86c.52-.53 1.04-1.06 1.55-1.58 3.29-3.39 6.37-6.56 10.31-6.56s7.02 3.17 10.31 6.56c.51.53 1.03 1.06 1.55 1.58 3.91 3.91 9.02 5.86 14.14 5.86v-40c-5.12 0-10.24 1.95-14.14 5.86zm14.14 33.14c-5.07 0-9.85-1.98-13.43-5.56-.52-.52-1.02-1.04-1.54-1.57-3.43-3.53-6.67-6.86-11.02-6.86s-7.6 3.33-11.04 6.88c-.5.52-1.01 1.04-1.53 1.56-3.59 3.59-8.36 5.57-13.44 5.57s-9.85-1.98-13.43-5.57c-3.59-3.59-5.56-8.36-5.56-13.43s1.98-9.85 5.56-13.44c3.58-3.6 8.35-5.58 13.43-5.58s9.85 1.98 13.44 5.57c.52.52 1.04 1.05 1.55 1.58 3.43 3.53 6.66 6.86 11.02 6.86s7.59-3.33 11.02-6.86c.51-.52 1.02-1.05 1.55-1.58 3.59-3.59 8.36-5.56 13.43-5.56v38z" }) }), jsxs("svg", { className: "tw-absolute -tw-left-[2px] -tw-top-[2px] tw-z-20 tw-hidden group-hover/assets-button:tw-block", xmlns: "http://www.w3.org/2000/svg", width: outlineWidth.inner, height: "44", viewBox: `0 0 ${outlineWidth.inner} 44`, fill: "none", children: [jsx("clipPath", { id: "halfClip1", children: jsx("rect", { x: "0", y: "0", width: outlineWidth.inner, height: "44" }) }), jsx("path", { d: "M59.1506 36.849L59.1508 36.8492C63.2511 40.9496 68.6272 43 74.0001 43H145C156.598 43 166 33.598 166 22C166 10.402 156.598 1 145 1H74.0001C68.6272 0.999977 63.2511 3.05042 59.1508 7.15076C58.6183 7.68325 58.0958 8.22097 57.5842 8.74755L57.5817 8.75009C55.9228 10.4574 54.3925 12.0283 52.8031 13.1834C51.2282 14.3279 49.6791 15 48 15C46.3209 15 44.7718 14.3279 43.1969 13.1834C41.6075 12.0283 40.0772 10.4574 38.4183 8.75009L38.4159 8.74759C37.9042 8.22101 37.3817 7.68327 36.8492 7.15076C32.7489 3.05042 27.3728 0.999977 21.9999 1C16.6271 1.00002 11.251 3.05047 7.15076 7.15076C3.05045 11.2511 1 16.6272 1 22C1 27.3728 3.05045 32.7489 7.15076 36.8492C11.251 40.9495 16.6271 43 21.9999 43C27.3728 43 32.7489 40.9496 36.8492 36.8492L36.8494 36.849C37.3794 36.3188 37.8994 35.7834 38.4088 35.2589L38.4108 35.2569C40.0704 33.5483 41.6019 31.9756 43.1928 30.8191C44.7691 29.6731 46.3197 29 48 29C49.6803 29 51.2309 29.6731 52.8072 30.8191C54.3981 31.9756 55.9296 33.5483 57.5892 35.2569L57.5912 35.2589C58.1006 35.7834 58.6206 36.3188 59.1506 36.849Z", stroke: "currentColor", className: "tw-text-grey-900", strokeWidth: "2", clipPath: "url(#halfClip1)" })] }), jsxs("svg", { className: "tw-absolute -tw-left-[4px] -tw-top-[4px] tw-z-10 tw-hidden group-hover/assets-button:tw-block", xmlns: "http://www.w3.org/2000/svg", width: outlineWidth.outer, height: "48", viewBox: `0 0 ${outlineWidth.outer} 48`, fill: "none", children: [jsx("clipPath", { id: "halfClip2", children: jsx("rect", { x: "0", y: "0", width: outlineWidth.outer, height: "48" }) }), jsx("path", { d: "M60.4432 39.5559L60.4437 39.5564C64.7391 43.8517 70.3729 46 76.0001 46H147C159.15 46 169 36.1503 169 24C169 11.8497 159.15 2 147 2H76.0001C70.3729 1.99998 64.7391 4.14825 60.4437 8.44365C59.9062 8.98109 59.3797 9.52298 58.8697 10.0479L58.8645 10.0532C57.1905 11.7761 55.7217 13.2796 54.2152 14.3745C52.7378 15.4481 51.3923 16 50 16C48.6077 16 47.2622 15.4481 45.7848 14.3745C44.2783 13.2796 42.8095 11.7761 41.1355 10.0532L41.1305 10.0481C40.6205 9.52314 40.0939 8.98117 39.5563 8.44365C35.2609 4.14825 29.6271 1.99998 23.9999 2C18.3727 2.00002 12.739 4.1483 8.44365 8.44365C4.14827 12.739 2 18.3728 2 24C2 29.6272 4.14827 35.261 8.44365 39.5564C12.739 43.8517 18.3727 46 23.9999 46C29.6271 46 35.2609 43.8517 39.5563 39.5564L39.5568 39.5559C40.0917 39.0207 40.6159 38.481 41.1237 37.9582L41.1281 37.9537C42.8028 36.2295 44.2728 34.7243 45.7808 33.6279C47.2597 32.5528 48.6066 32 50 32C51.3934 32 52.7403 32.5528 54.2192 33.6279C55.7272 34.7243 57.1972 36.2295 58.8719 37.9537L58.8763 37.9582C59.3841 38.481 59.9083 39.0207 60.4432 39.5559Z", stroke: "currentColor", className: "tw-text-material-light-average", strokeWidth: "4", clipPath: "url(#halfClip2)" })] }), jsx("div", { className: cn("tw-assets-button-mask tw-flex tw-h-squid-xl tw-w-[92px] tw-items-center tw-justify-between", state !== AssetsButtonState.FULL && "!tw-w-[72px]"), style: {
                         backgroundImage: bgGradient,
-                    }, children: jsx("div", { className: clsx(imageClass), children: state === AssetsButtonState.CHAIN_ONLY ||
-                            state === AssetsButtonState.FULL ? (jsx("img", { src: chain === null || chain === void 0 ? void 0 : chain.iconUrl, alt: "", className: "tw-h-squid-xl tw-w-squid-xl tw-rounded-full tw-object-cover" })) : (state !== AssetsButtonState.LOADING && (jsx("span", { className: emptyChainIconTextClassNameMap[variant], children: jsx(PlusIcon, {}) }))) }) }), state === AssetsButtonState.FULL ? (jsxs("div", { className: clsx(imageClass, "tw-absolute tw-left-[54px] tw-z-[5] tw-h-squid-xl tw-overflow-hidden"), children: [jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px]", style: {
+                    }, children: jsx("div", { className: clsx(imageWrapperClassName), children: state === AssetsButtonState.CHAIN_ONLY ||
+                            state === AssetsButtonState.FULL ? (jsx("img", { src: chain === null || chain === void 0 ? void 0 : chain.iconUrl, alt: "", className: "tw-h-squid-xl tw-w-squid-xl tw-rounded-full tw-object-cover" })) : (state !== AssetsButtonState.LOADING && (jsx("span", { className: emptyChainIconTextClassNameMap[variant], children: jsx(PlusIcon, {}) }))) }) }), state === AssetsButtonState.FULL ? (jsxs("div", { className: clsx(imageWrapperClassName, "tw-absolute tw-left-[54px] tw-z-[5] tw-h-squid-xl tw-overflow-hidden"), children: [jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px]", style: {
                                 backgroundColor: tokenBgColor,
-                            } }), jsx("img", { src: token === null || token === void 0 ? void 0 : token.iconUrl, alt: token === null || token === void 0 ? void 0 : token.symbol, className: "tw-absolute tw-h-squid-xl tw-w-squid-xl tw-rounded-full tw-object-cover" }), jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px] tw-border-b\n            tw-border-t tw-border-material-light-thin" })] })) : null, jsxs("div", { className: cn("tw-relative tw-flex tw-h-squid-xl tw-w-fit tw-min-w-fit tw-items-center tw-gap-squid-xxs tw-rounded-br-full tw-rounded-tr-full tw-border tw-border-l-0 tw-border-material-light-thin tw-py-squid-xs  tw-pr-squid-xs before:tw-absolute before:-tw-inset-[3px] before:tw-z-[1] before:tw-w-[calc(100%+3px)] before:tw-translate-x-[3px] before:tw-rounded-br-full before:tw-rounded-tr-full before:tw-border-2 before:tw-border-l-0 before:tw-border-transparent after:tw-absolute after:-tw-inset-[5px] after:tw-z-0 after:tw-w-[calc(100%+4px)] after:tw-translate-x-[6px] after:tw-rounded-br-full after:tw-rounded-tr-full after:tw-border-4 after:tw-border-l-0 after:tw-border-transparent group-hover/assets-button:before:tw-border-grey-900 group-hover/assets-button:after:tw-border-material-light-average", state === AssetsButtonState.FULL && "tw-pl-[7px]"), style: {
+                            } }), tokenImageLoadingState === ImageLoadingState.ERROR && (
+                        // show fallback
+                        jsx("div", { style: { color: tokenTextColor }, className: cn(tokenImageClassName, "tw-flex tw-items-center tw-justify-center tw-text-body-small"), children: (_d = (_c = token === null || token === void 0 ? void 0 : token.symbol) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.toUpperCase() })), jsx("img", { onLoad: () => {
+                                setTokenImageLoadingState(ImageLoadingState.LOADED);
+                            }, onError: () => {
+                                setTokenImageLoadingState(ImageLoadingState.ERROR);
+                            }, src: token === null || token === void 0 ? void 0 : token.iconUrl, alt: token === null || token === void 0 ? void 0 : token.symbol, className: cn(tokenImageClassName, 
+                            // when image load failed, hide it with opacity: 0 instead of display: none
+                            // so new images can load and update the loading state
+                            tokenImageLoadingState === ImageLoadingState.ERROR &&
+                                "tw-opacity-0") }), jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px] tw-border-b\n            tw-border-t tw-border-material-light-thin" })] })) : null, jsxs("div", { className: cn("tw-relative tw-flex tw-h-squid-xl tw-w-fit tw-min-w-fit tw-items-center tw-gap-squid-xxs tw-rounded-br-full tw-rounded-tr-full tw-border tw-border-l-0 tw-border-material-light-thin tw-py-squid-xs  tw-pr-squid-xs before:tw-absolute before:-tw-inset-[3px] before:tw-z-[1] before:tw-w-[calc(100%+3px)] before:tw-translate-x-[3px] before:tw-rounded-br-full before:tw-rounded-tr-full before:tw-border-2 before:tw-border-l-0 before:tw-border-transparent after:tw-absolute after:-tw-inset-[5px] after:tw-z-0 after:tw-w-[calc(100%+4px)] after:tw-translate-x-[6px] after:tw-rounded-br-full after:tw-rounded-tr-full after:tw-border-4 after:tw-border-l-0 after:tw-border-transparent group-hover/assets-button:before:tw-border-grey-900 group-hover/assets-button:after:tw-border-material-light-average", state === AssetsButtonState.FULL && "tw-pl-[7px]"), style: {
                         backgroundColor: tokenBgColor,
-                        color: token === null || token === void 0 ? void 0 : token.textColor,
+                        color: tokenTextColor,
                     }, children: [jsx(BodyText, { size: "small", className: cn("tw-leading-[13px]", state === AssetsButtonState.LOADING && "tw-min-w-[135px]"), children: state === AssetsButtonState.FULL
                                 ? token === null || token === void 0 ? void 0 : token.symbol
                                 : state !== AssetsButtonState.LOADING && emptyTokenLabel }), state !== AssetsButtonState.LOADING && (jsx(ChevronLargeRightIcon, { className: "tw-w-4 tw-min-w-4 tw-opacity-66" }))] })] }) })));
@@ -69753,4 +69885,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, AccountListItem, AccountsButton, ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, ActionStatusRow, ActionWrapper, AddressButton, AnimationWrapper, Announcement, AppContainer, Approve, ApproveAction, ArrowBottomTopIcon, ArrowButton, ArrowCornerDownRightIcon, ArrowDownIcon, ArrowExpandIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowSplit, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, AtomIcon, BackpackIcon, BadgeImage, BankIcon, BellAlarmIcon, BlockSkeleton, BodyText, Boost, BoostBadge, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, 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, Copy2Icon, CopyOutlinedIcon, CrossAnimatedIcon, CrossedOutSunSolidIcon, DashboardFast, DepositAddressView, DescriptionBlocks, DetailsToolbar, DiscordIcon, DockIconAnalytics, DockIconCheckout, DockIconHelp, DockIconProfile, DockIconScan, DockIconSwap, DockSwapIcon, DollarOutlinedIcon, DollarSolidIcon, DotGrid1x3HorizontalIcon, DropdownMenu, DropdownMenuItem, DropdownMenuTitle, EmojiMeh, EmojiSadIcon, EmptyHeartIcon, ErrorMessage, EthereumIcon, ExplosionIcon, EyeOpenIcon, FarcasterIcon, 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, ImageStack, ImageState, IncompleteAction, InfinityIcon, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, LaptopIcon, LightningIcon, LimitIcon, LinkIcon, ListItem, ListItemActionsButton, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MarketCapIcon, MaxIcon, Menu, MenuItem, MenuSwapIcon, MirrorIcon, Modal, ModalContent, ModalContentDivider, MoneyBagIcon, 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, 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, SwapErrorIcon, SwapHeader, SwapIcon, SwapInputsIcon, SwapProgressView, SwapProperties, SwapStepItem, SwapStepSeparator, SwapStepsCollapsed, SwapSuccessIcon, SwapTransactionView, SwapWarningIcon, Switch, Tab, Tabs, TagIcon, TagIconFilled, TelegramIcon, TextSkeleton, ThemePreference, ThemeProvider, ThumbsUp, Tick, TimeFliesIcon, Timeline, Timestamp, Toast, TokenDetailsView, TokenGroup, TokenGroups, TokenPair, Tooltip, TradingViewStepsIcon, TransactionAction, TransactionFilters, TransactionHeader, TransactionHeaderLayout, TransactionItem, TransactionProperties, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, Transfer, TranslateIcon, TriangleExclamation, TxProgressViewHeader, UnsupportedPairNotice, UsdAmount, WalletFilledIcon, WalletIcon, WalletLink, WrapAction, XSocialIcon, adjustColorForContrast, baseTailwindConfig, blendColors, cn, darkTheme, getColorBrightness, getContrastColor, getHexColorFromOpacityPercentage, getWalletCardBackground, hexToRgb, isValidHexColor, lightTheme, linkActionTimelineProps, parseColor, parseSquidTheme, pxToRem, remToPx, rgbToHex, spacing$1 as spacing, statusTextClassMap, themeKeysToCssVariables, 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, ArrowExpandIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowSplit, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, AtomIcon, BackpackIcon, BadgeImage, BankIcon, BellAlarmIcon, BlockSkeleton, BodyText, Boost, BoostBadge, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, 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, CircleCheckIcon, CircleMinusIcon, CirclePlusIcon, CircleX, CircleXFilledIcon, ClockOutlineIcon, ClockSolidIcon, CodeBracketsIcon, CodeSolidSquareIcon, CoinsAddIcon, CoinsIcon, CoinsOutlinedIcon, Collapse, CollapsibleMenu, CollectionIcon, ColorPaletteIcon, CommandIcon, CompassRoundOutlinedIcon, CompassRoundSolidIcon, ConsoleIcon, Copy2Icon, CopyOutlinedIcon, CrossAnimatedIcon, CrossedOutSunSolidIcon, DashboardFast, DepositAddressView, DescriptionBlocks, DetailsToolbar, DiscordIcon, DockIconAnalytics, DockIconCheckout, DockIconHelp, DockIconProfile, DockIconScan, DockIconSwap, DockSwapIcon, DollarOutlinedIcon, DollarSolidIcon, DotGrid1x3HorizontalIcon, DropdownMenu, DropdownMenuItem, DropdownMenuTitle, EmojiMeh, EmojiSadIcon, EmptyHeartIcon, ErrorMessage, EthereumIcon, ExplosionIcon, EyeOpenIcon, FarcasterIcon, 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, ImageStack, ImageState, IncompleteAction, InfinityIcon, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, LaptopIcon, LightningIcon, LimitIcon, LinkIcon, ListItem, ListItemActionsButton, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MarketCapIcon, MaxIcon, Menu, MenuItem, MenuSwapIcon, MirrorIcon, Modal, ModalContent, ModalContentDivider, MoneyBagIcon, MoonIcon, NavigationBar, NewsIcon, NewspaperIcon, NotAllowedIcon, NumericInput, PathSquareIcon, PauseIcon, PercentIcon, PhoneIcon, PieChartIcon, PipeSeparator, PluginIcon, PlusIcon, PoopIcon, PowerIcon, PriceChange, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, PunkIcon, QrCodeIcon, RangeInput, ReceiptBillIcon, ReceiveNFTAction, ReceiveTokensAction, 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, SwapErrorIcon, SwapHeader, SwapIcon, SwapInputsIcon, SwapProgressView, SwapProperties, SwapStepItem, SwapStepSeparator, SwapStepsCollapsed, SwapSuccessIcon, SwapTransactionView, SwapWarningIcon, Switch, Tab, Tabs, TagIcon, TagIconFilled, TelegramIcon, TextSkeleton, ThemePreference, ThemeProvider, ThumbsUp, Tick, TimeFliesIcon, Timeline, Timestamp, Toast, TokenDetailsView, TokenGroup, TokenGroups, TokenPair, Tooltip, TradingViewStepsIcon, TransactionAction, TransactionFilters, TransactionHeader, TransactionHeaderLayout, TransactionItem, TransactionProperties, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, Transfer, TranslateIcon, TriangleExclamation, TxProgressViewHeader, UnsupportedPairNotice, UsdAmount, WalletFilledIcon, WalletIcon, WalletLink, WrapAction, XSocialIcon, adjustColorForContrast, baseTailwindConfig, blendColors, buttonRoundedClassMap, cn, darkTheme, getColorBrightness, getContrastColor, getHexColorFromOpacityPercentage, getWalletCardBackground, hexToRgb, isValidHexColor, lightTheme, linkActionTimelineProps, parseColor, parseSquidTheme, pxToRem, remToPx, rgbToHex, spacing$1 as spacing, statusTextClassMap, themeKeysToCssVariables, transactionErrorPauseAnimation, transactionFailureAnimation, transactionHalfSuccessAnimation, transactionPendingAnimation, transactionProcessingAnimation, transactionRejectedAnimation, transactionSuccessAnimation, useCollapsibleMenu, useDropdownMenu, useMediaQuery, useOnResize, useRect, useTimer, useUserTheme, useVersion };

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

@@ -10,10 +10,13 @@ interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     link?: string;
     isLoading?: boolean;
     showLoader?: boolean;
+    loaderSize?: LoaderSize;
     chip?: ChipProps;
     containerClassName?: string;
     buttonRef?: React.Ref<HTMLButtonElement>;
     anchorRef?: React.Ref<HTMLAnchorElement>;
 }
-export declare function Button({ label, disabled, size, variant, icon, link, isLoading, showLoader, chip, containerClassName, anchorRef, buttonRef, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+type LoaderSize = "sm" | "md" | "lg";
+export declare const buttonRoundedClassMap: Record<ButtonSize, Record<ButtonVariant, string>>;
+export declare function Button({ label, disabled, size, variant, icon, link, isLoading, showLoader, loaderSize, chip, containerClassName, anchorRef, buttonRef, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/components/controls/Switch.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SwitchSize } from "../../types/components";
+import { type SwitchSize } from "../../types/components";
 export interface SwitchProps {
     checked?: boolean;
     onChange?: (checked: boolean) => void;

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

@@ -114,3 +114,11 @@ export declare function MoneyBagIcon({ className, size, }: {
     className?: string;
     size?: string;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function PluginIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function CircleCheckIcon({ className, size, }: {
+    className?: string;
+    size?: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { type ImageRoundedSize } from "../../types/components";
+type HTMLInteractiveItem = HTMLButtonElement | HTMLDivElement | HTMLLabelElement;
 interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     itemTitle: string | React.ReactNode;
     mainImageUrl?: string;
@@ -27,9 +28,11 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     itemsContainerRef?: React.RefObject<HTMLElement>;
     imageGroup?: string[];
     multilineSubtitle?: boolean;
+    control?: React.ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLInteractiveItem>) => void;
 }
 type ListItemSize = "small" | "large";
-export declare function ListItem({ itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, placeholderImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, containerProps, compactOnMobile, extraPadding, itemsContainerRef, dropdownMenuContent, imageGroup, multilineSubtitle, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function ListItem({ itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, placeholderImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, containerProps, compactOnMobile, extraPadding, itemsContainerRef, dropdownMenuContent, imageGroup, multilineSubtitle, control, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
 export declare const ListItemActionsButton: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
     isActive?: boolean | undefined;
 }, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;