@0xsquid/ui 0.27.5 → 0.27.7-beta.0

package/dist/esm/index.js

@@ -2633,6 +2633,37 @@ const getFirstUniques = (array, key, count) => {
     }
     return uniqueItems;
 };
+function isObject$3(value) {
+    return typeof value === "object" && !Array.isArray(value) && value !== null;
+}
+function flatten(obj, options = {}) {
+    const parsed = {};
+    function toKebabCase(key) {
+        return key.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+    }
+    function recurse(current, currentPrefix) {
+        var _a;
+        for (const [key, value] of Object.entries(current)) {
+            const newPrefix = `${currentPrefix}${toKebabCase(key)}`;
+            if (isObject$3(value)) {
+                recurse(value, `${newPrefix}-`);
+            }
+            else if (typeof value === "string" || typeof value === "number") {
+                parsed[`${(_a = options.prefix) !== null && _a !== void 0 ? _a : ""}${newPrefix}`] = String(value);
+            }
+        }
+    }
+    recurse(obj, "");
+    return parsed;
+}
+// Map theme keys to css variables
+// Example { "accent-gold": "var(--accent-gold)" }
+function mapToCssVariables(obj) {
+    return Object.entries(obj).reduce((acc, [key, { cssVariable }]) => {
+        acc[key] = `var(${cssVariable})`;
+        return acc;
+    }, {});
+}
 
 const badgeSizeClassMap = {
     sm: "tw-w-4 tw-h-4",
@@ -2726,36 +2757,30 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
 
 // font size, line height, and letter spacing classes
 const textClassMap$1 = {
-    small: "tw-text-body-small tw-tracking-body-small tw-leading-body-small",
-    medium: "tw-text-body-medium tw-tracking-body-medium tw-leading-body-medium",
-    large: "tw-text-body-large tw-tracking-body-large tw-leading-body-large",
+    small: "tw-text-body-small tw-tracking-body-small tw-leading-body-small tw-font-body-small",
+    medium: "tw-text-body-medium tw-tracking-body-medium tw-leading-body-medium tw-font-body-medium",
+    large: "tw-text-body-large tw-tracking-body-large tw-leading-body-large tw-font-body-large",
 };
 function BodyText(_a) {
-    var { size, children, bold, tight } = _a, props = __rest$1(_a, ["size", "children", "bold", "tight"]);
-    const fontWeightClass = bold
-        ? "tw-font-typography-bold"
-        : "tw-font-typography-regular";
+    var { size, children, bold = false, tight = false } = _a, props = __rest$1(_a, ["size", "children", "bold", "tight"]);
+    const fontWeightClass = bold ? "!tw-font-bold" : "!tw-font-regular";
     return (jsx("span", Object.assign({}, props, { className: cn(textClassMap$1[size], fontWeightClass, tight && "!tw-leading-[1]", props.className), children: children })));
 }
 
 function CaptionText(_a) {
-    var { children, bold } = _a, props = __rest$1(_a, ["children", "bold"]);
-    const boldClass = bold
-        ? "tw-font-typography-bold"
-        : "tw-font-typography-regular";
-    return (jsx("span", Object.assign({}, props, { className: cn(boldClass, "tw-text-caption tw-leading-caption", props.className), children: children })));
+    var { children, bold = false } = _a, props = __rest$1(_a, ["children", "bold"]);
+    const boldClass = bold && "!tw-font-bold";
+    return (jsx("span", Object.assign({}, props, { className: cn(boldClass, "tw-text-caption tw-font-caption tw-leading-caption", props.className), children: children })));
 }
 
 // font size, line height, and letter spacing classes
 const textClassMap = {
-    small: "tw-text-heading-small tw-tracking-heading-small tw-leading-heading-small",
-    medium: "tw-text-heading-medium tw-tracking-heading-medium tw-leading-heading-medium",
-    large: "tw-text-heading-large tw-tracking-heading-large tw-leading-heading-large",
-};
-function HeadingText({ children, bold, size, className, }) {
-    const fontWeightClass = bold
-        ? "tw-font-heading-bold"
-        : "tw-font-heading-regular";
+    small: "tw-text-heading-small tw-tracking-heading-small tw-leading-heading-small tw-font-heading-small",
+    medium: "tw-text-heading-medium tw-tracking-heading-medium tw-leading-heading-medium tw-font-heading-medium",
+    large: "tw-text-heading-large tw-tracking-heading-large tw-leading-heading-large tw-font-heading-large",
+};
+function HeadingText({ children, bold = false, size, className, }) {
+    const fontWeightClass = bold ? "!tw-font-bold" : "!tw-font-regular";
     return (jsx("h6", { className: clsx(textClassMap[size], fontWeightClass, className), children: children }));
 }
 
@@ -3007,8 +3032,8 @@ const buttonSizeClassMap = {
     lg: "tw-p-1 tw-h-button",
 };
 const roundedClassMap = {
-    md: "tw-rounded-squid-m",
-    lg: "tw-rounded-squid-xxl",
+    md: "tw-rounded-button-medium",
+    lg: "tw-rounded-button-large",
 };
 const buttonVariantClassMap = {
     primary: "tw-bg-royal-500 group-data-[squid-theme-type=light]:tw-text-grey-900 group-data-[squid-theme-type=dark]:tw-text-grey-100",
@@ -3020,11 +3045,11 @@ const buttonVariantClassMap = {
 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, size, variant, icon, link, isLoading = false, chip, containerClassName } = _a, props = __rest$1(_a, ["label", "disabled", "size", "variant", "icon", "link", "isLoading", "chip", "containerClassName"]);
-    const chipElement = chip ? (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] })), jsx("div", { className: "tw-relative tw-z-[5] tw-flex tw-items-center tw-justify-center tw-gap-squid-xxs", children: !label && !icon ? (props.children) : size === "lg" ? (jsx("span", { className: "tw-px-squid-m", children: jsx(BodyText, { className: isLoading ? loadingClassname : "", size: "medium", children: label }) })) : size === "md" ? (label && !icon ? (
+    var { label, disabled = false, size, variant, icon, link, isLoading = false, chip, containerClassName, anchorRef, buttonRef } = _a, props = __rest$1(_a, ["label", "disabled", "size", "variant", "icon", "link", "isLoading", "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] })), 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" ? (jsx("span", { className: "tw-px-squid-m", children: 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 && icon ? (
+                jsx(BodyText, { className: isLoading ? loadingClassname : "", size: "small", children: label })) : label == null && icon != null ? (
                 // icon only
                 isLoading ? null : (icon)) : (
                 // icon and label
@@ -3035,10 +3060,10 @@ function Button$1(_a) {
     // custom classes from props
     props.className);
     const ButtonWrapper = ({ children }) => (jsx("div", { className: cn("tw-relative", buttonWidthClassnameMap[size], roundedClassMap[size], containerClassName), children: children }));
-    if (link) {
-        return (jsxs(ButtonWrapper, { children: [jsx("a", { "aria-disabled": disabled, href: disabled ? undefined : link, target: "_blank", className: className, children: children }), chipElement] }));
+    if (link != null) {
+        return (jsxs(ButtonWrapper, { children: [jsx("a", { ref: anchorRef, "aria-disabled": disabled, href: disabled ? undefined : link, target: "_blank", className: className, rel: "noreferrer", children: children }), chipElement] }));
     }
-    return (jsxs(ButtonWrapper, { children: [jsx("button", Object.assign({}, props, { "aria-disabled": disabled || isLoading, className: className, disabled: disabled || isLoading, children: children })), chipElement] }));
+    return (jsxs(ButtonWrapper, { children: [jsx("button", Object.assign({}, props, { ref: buttonRef, "aria-disabled": disabled || isLoading, className: className, disabled: disabled || isLoading, children: children })), chipElement] }));
 }
 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) }));
@@ -3056,7 +3081,140 @@ function ArrowButton(_a) {
                 "aria-disabled:tw-bg-grey-600 aria-disabled:tw-text-grey-800"), children: jsx(ArrowRightIcon, {}) })] })));
 }
 
-const INTERNAL_SQUID_THEME_KEYS = [
+// const INTERNAL_THEME_COLOR_KEYS = [
+//   "grey-100",
+//   "grey-200",
+//   "grey-300",
+//   "grey-400",
+//   "grey-500",
+//   "grey-600",
+//   "grey-700",
+//   "grey-800",
+//   "grey-900",
+//   "royal-300",
+//   "royal-400",
+//   "royal-500",
+//   "royal-700",
+//   "status-positive",
+//   "status-negative",
+//   "status-partial",
+//   "material-light-thin",
+//   "material-light-average",
+//   "material-light-thick",
+//   "material-dark-thin",
+//   "material-dark-average",
+//   "material-dark-thick",
+//   // grey-100 with 0.05 opacity
+//   "grey-100-005",
+//   // material-light and grey-900 blended color
+//   "material-light-blend-grey-900",
+//   // material-light and grey-300 blended color
+//   "material-light-blend-grey-800",
+//   "volt-700",
+// ] as const;
+// const THEME_BORDER_RADIUS_KEYS = ["button-lg", "button-md"] as const;
+// const THEME_TEXT_KEYS = [
+//   "caption-size",
+//   "caption-weight",
+//   "body-large-size",
+//   "body-large-weight",
+//   "body-medium-size",
+//   "body-medium-weight",
+//   "body-small-size",
+//   "body-small-weight",
+//   "heading-small-size",
+//   "heading-small-weight",
+//   "heading-medium-size",
+//   "heading-medium-weight",
+//   "heading-large-size",
+//   "heading-large-weight",
+// ] as const;
+// export type InternalThemeColors = Record<
+//   (typeof INTERNAL_THEME_COLOR_KEYS)[number],
+//   string
+// >;
+// export type ThemeBorderRadius = Record<
+//   (typeof THEME_BORDER_RADIUS_KEYS)[number],
+//   string
+// >;
+// export interface InternalSquidTheme {
+//   colors: InternalThemeColors;
+//   fontFamily: string;
+//   text: ThemeText;
+//   borderRadius: ThemeBorderRadius;
+// }
+// export interface SquidTheme {
+//   colors: SquidThemeColors;
+//   fontFamily?: string;
+//   text?: ThemeText;
+//   borderRadius?: ThemeBorderRadius;
+// }
+// // User-readable colors config
+// // renames:
+// // grey- to content-
+// // royal- to accent-
+// export interface SquidThemeColors {
+//   "content-100": string;
+//   "content-200": string;
+//   "content-300": string;
+//   "content-400": string;
+//   "content-500": string;
+//   "content-600": string;
+//   "content-700": string;
+//   "content-800": string;
+//   "content-900": string;
+//   "accent-300": string;
+//   "accent-400": string;
+//   "accent-500": string;
+//   "accent-700": string;
+//   "status-positive": string;
+//   "status-negative": string;
+//   "status-warning": string;
+//   "highlight-700": string;
+// }
+// export type ThemeText = Record<(typeof THEME_TEXT_KEYS)[number], string>;
+// export const SQUID_THEME_CSS_VARIABLE_PREFIX = "--st-";
+// const themeColorKeysToCssVariablesMap = Object.fromEntries(
+//   INTERNAL_THEME_COLOR_KEYS.map((key) => [
+//     key,
+//     {
+//       cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}color-${key}`,
+//     },
+//   ]),
+// ) as Record<keyof InternalThemeColors, { cssVariable: string }>;
+// const themeBorderRadiusKeysToCssVariablesMap = Object.fromEntries(
+//   THEME_BORDER_RADIUS_KEYS.map((key) => [
+//     key,
+//     {
+//       cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}borderRadius-${key}`,
+//     },
+//   ]),
+// ) as Record<keyof ThemeBorderRadius, { cssVariable: string }>;
+// const themeTextKeysToCssVariablesMap = Object.fromEntries(
+//   THEME_TEXT_KEYS.map((key) => [
+//     key,
+//     {
+//       cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}text-${key}`,
+//     },
+//   ]),
+// ) as Record<keyof ThemeText, { cssVariable: string }>;
+// type ThemeCssVariableMap<T extends Record<string, any>> = {
+//   [K in keyof T]: { cssVariable: string };
+// };
+// interface InternalThemeMap {
+//   colors: ThemeCssVariableMap<InternalThemeColors>;
+//   borderRadius: ThemeCssVariableMap<ThemeBorderRadius>;
+//   text: ThemeCssVariableMap<ThemeText>;
+// }
+// export const internalThemeKeysToCssVariablesMap: InternalThemeMap = {
+//   colors: themeColorKeysToCssVariablesMap,
+//   borderRadius: themeBorderRadiusKeysToCssVariablesMap,
+//   text: themeTextKeysToCssVariablesMap,
+// };
+// console.log({
+//   internalThemeKeysToCssVariablesMap,
+// });
+const THEME_COLOR_KEYS = [
     "grey-100",
     "grey-200",
     "grey-300",
@@ -3079,24 +3237,56 @@ const INTERNAL_SQUID_THEME_KEYS = [
     "material-dark-thin",
     "material-dark-average",
     "material-dark-thick",
+    "highlight-700",
     // grey-100 with 0.05 opacity
     "grey-100-005",
     // material-light and grey-900 blended color
     "material-light-blend-grey-900",
     // material-light and grey-300 blended color
     "material-light-blend-grey-800",
-    "volt-700",
 ];
-const SQUID_THEME_CSS_VARIABLE_PREFIX = "--squid-theme-";
+const THEME_BORDER_RADIUS_KEYS = ["button-large", "button-medium"];
+const THEME_FONT_SIZE_KEYS = [
+    "caption",
+    "body-large",
+    "body-medium",
+    "body-small",
+    "heading-small",
+    "heading-medium",
+    "heading-large",
+];
+const THEME_FONT_WEIGHT_KEYS = [
+    "caption",
+    "body-small",
+    "body-medium",
+    "body-large",
+    "heading-small",
+    "heading-medium",
+    "heading-large",
+];
+const THEME_FONT_FAMILY_KEYS = ["squid-main"];
 /**
- * Mapping between readable variables name and css variables used TailwindCSS config
+ * 'st' = Squid Theme
  */
-const themeTypesKeys = Object.fromEntries(INTERNAL_SQUID_THEME_KEYS.map((key) => [
-    key,
-    {
-        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}${key}`,
-    },
-]));
+const THEME_CSS_VARIABLE_PREFIX = "--st-";
+function keysToCssVariables(keys, prefix) {
+    return keys.reduce((acc, key) => {
+        acc[key] = {
+            cssVariable: `${THEME_CSS_VARIABLE_PREFIX}${prefix}-${String(key)}`,
+        };
+        return acc;
+    }, 
+    // eslint-disable-next-line @typescript-eslint/prefer-reduce-type-parameter, @typescript-eslint/consistent-type-assertions
+    {});
+}
+const themeKeysToCssVariables = {
+    color: keysToCssVariables(THEME_COLOR_KEYS, "color"),
+    borderRadius: keysToCssVariables(THEME_BORDER_RADIUS_KEYS, "border-radius"),
+    // text: keysToCssVariables<ThemeText>(THEME_TEXT_KEYS, "text"),
+    fontSize: keysToCssVariables(THEME_FONT_SIZE_KEYS, "font-size"),
+    fontWeight: keysToCssVariables(THEME_FONT_WEIGHT_KEYS, "font-weight"),
+    fontFamily: keysToCssVariables(THEME_FONT_FAMILY_KEYS, "font-family"),
+};
 
 function SearchIcon({ 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: "M20 20L16.05 16.05M18 11C18 14.866 14.866 18 11 18C7.13401 18 4 14.866 4 11C4 7.13401 7.13401 4 11 4C14.866 4 18 7.13401 18 11Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
@@ -3114,9 +3304,11 @@ function Input(_a) {
             var _a;
             (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }, autoFocusTimeout);
-        return () => clearTimeout(timeoutId);
+        return () => {
+            clearTimeout(timeoutId);
+        };
     }, [autoFocusTimeout]);
-    return (jsxs("div", { className: cn("tw-relative tw-w-full tw-text-grey-600", containerClassName), children: [jsx("input", Object.assign({}, props, { ref: inputRef, "aria-invalid": isError, className: cn("tw-relative tw-h-10 tw-w-full tw-rounded-full tw-border tw-border-material-light-thin tw-bg-grey-900 tw-text-body-small tw-font-typography-regular tw-text-grey-300 placeholder:tw-text-grey-600 invalid:tw-outline-status-negative", showIcon ? "tw-pl-[40px]" : "tw-px-squid-s", showActionButton ? "tw-pr-[70px]" : "tw-pr-2.5", isError && "!tw-outline-status-negative", className, isWarning && "focus-visible:tw-outline-status-partial"), placeholder: placeholder })), showIcon ? (jsx("div", { className: "tw-absolute tw-inset-y-0 tw-left-0 tw-flex tw-h-full tw-w-[44px] tw-items-center tw-justify-center tw-px-squid-xs", children: icon || jsx(SearchIcon, {}) })) : null, showActionButton ? (jsx("div", { className: "tw-absolute tw-inset-y-0 tw-right-1.5 tw-flex tw-items-center tw-justify-center", children: jsx(InputActionButton, Object.assign({}, actionButtonProps)) })) : null] }));
+    return (jsxs("div", { className: cn("tw-relative tw-w-full tw-text-grey-600", containerClassName), children: [jsx("input", Object.assign({}, props, { ref: inputRef, "aria-invalid": isError, className: cn("tw-font-regular tw-relative tw-h-10 tw-w-full tw-rounded-full tw-border tw-border-material-light-thin tw-bg-grey-900 tw-text-body-small tw-text-grey-300 placeholder:tw-text-grey-600 invalid:tw-outline-status-negative", showIcon ? "tw-pl-[40px]" : "tw-px-squid-s", showActionButton ? "tw-pr-[70px]" : "tw-pr-2.5", isError && "!tw-outline-status-negative", className, isWarning && "focus-visible:tw-outline-status-partial"), placeholder: placeholder })), showIcon ? (jsx("div", { className: "tw-absolute tw-inset-y-0 tw-left-0 tw-flex tw-h-full tw-w-[44px] tw-items-center tw-justify-center tw-px-squid-xs", children: icon || jsx(SearchIcon, {}) })) : null, showActionButton ? (jsx("div", { className: "tw-absolute tw-inset-y-0 tw-right-1.5 tw-flex tw-items-center tw-justify-center", children: jsx(InputActionButton, Object.assign({}, actionButtonProps)) })) : null] }));
 }
 const InputActionButton = ({ onClick, variant = "tertiary", label = "Paste", }) => {
     return (jsx(Button$1, { size: "md", variant: variant, onClick: onClick, className: "!tw-h-[30px] !tw-w-fit !tw-min-w-0", children: jsx(CaptionText, { children: label }) }));
@@ -16735,9 +16927,9 @@ const ANIMATION_DURATIONS = {
     BOOST_BUTTON: 500,
 };
 const ANIMATION_TIMINGS = {
-    EXPAND_ROUTE: "linear", //'cubic-bezier(.32, .72, 0, 1)',
-    COLLAPSE_ROUTE: "linear", //'cubic-bezier(.32, .72, 0, 1)',
-    CHANGE_SWAP_STEP: "linear", //'cubic-bezier(.4,0,.2,1)',
+    EXPAND_ROUTE: "linear", // 'cubic-bezier(.32, .72, 0, 1)',
+    COLLAPSE_ROUTE: "linear", // 'cubic-bezier(.32, .72, 0, 1)',
+    CHANGE_SWAP_STEP: "linear", // 'cubic-bezier(.4,0,.2,1)',
     SHOW_ROUTE: "cubic-bezier(.165,.84,.44,1)",
     HIDE_ROUTE: "cubic-bezier(.165,.84,.44,1)",
 };
@@ -17251,6 +17443,12 @@ function SunIcon({ size = "24", className, }) {
 function MoonIcon({ size = "20", className, }) {
     return (jsx("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsx("path", { d: "M10.0463 2.99972C10.2292 2.73432 10.2427 2.38723 10.0809 2.10846C9.91903 1.8297 9.61096 1.66925 9.28979 1.69647C5.02109 2.05816 1.66992 5.63639 1.66992 9.9982C1.66992 14.5997 5.40018 18.33 10.0017 18.33C14.3636 18.33 17.9419 14.9787 18.3035 10.7098C18.3307 10.3887 18.1702 10.0806 17.8914 9.91879C17.6127 9.75698 17.2656 9.77044 17.0002 9.95336C16.1951 10.5083 15.2201 10.8331 14.1667 10.8331C11.4052 10.8331 9.16667 8.59452 9.16667 5.8331C9.16667 4.77977 9.49145 3.80481 10.0463 2.99972Z", fill: "currentColor" }) }));
 }
+function SunOutlinedIcon({ 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: "M12 3V2M12 22V21M18.3598 5.64005L19.0698 4.93005M4.93016 19.07L5.64016 18.36M21 12H22M2 12H3M18.3598 18.36L19.0698 19.07M4.93016 4.93005L5.64016 5.64005M15.5355 8.46447C17.4882 10.4171 17.4882 13.5829 15.5355 15.5355C13.5829 17.4882 10.4171 17.4882 8.46447 15.5355C6.51185 13.5829 6.51185 10.4171 8.46447 8.46447C10.4171 6.51185 13.5829 6.51185 15.5355 8.46447Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+function CrossedOutSunSolidIcon({ size = "20", className, }) {
+    return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: className, children: [jsx("g", { clipPath: "url(#clip0_3313_9942)", children: jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 0.833313C10.4603 0.833313 10.8334 1.20641 10.8334 1.66665V2.49998C10.8334 2.96022 10.4603 3.33331 10 3.33331C9.5398 3.33331 9.16671 2.96022 9.16671 2.49998V1.66665C9.16671 1.20641 9.5398 0.833313 10 0.833313ZM10 16.6667C10.4603 16.6667 10.8334 17.0398 10.8334 17.5V18.3333C10.8334 18.7936 10.4603 19.1667 10 19.1667C9.5398 19.1667 9.16671 18.7936 9.16671 18.3333V17.5C9.16671 17.0398 9.5398 16.6667 10 16.6667ZM16.6667 10C16.6667 9.53976 17.0398 9.16666 17.5 9.16666H18.3334C18.7936 9.16666 19.1667 9.53976 19.1667 10C19.1667 10.4602 18.7936 10.8333 18.3334 10.8333H17.5C17.0398 10.8333 16.6667 10.4602 16.6667 10ZM0.833374 10C0.833374 9.53976 1.20647 9.16666 1.66671 9.16666H2.50004C2.96028 9.16666 3.33337 9.53976 3.33337 10C3.33337 10.4602 2.96028 10.8333 2.50004 10.8333H1.66671C1.20647 10.8333 0.833374 10.4602 0.833374 10ZM14.7107 14.7107C15.0361 14.3853 15.5637 14.3853 15.8892 14.7107L16.4808 15.3024C16.8063 15.6278 16.8063 16.1554 16.4808 16.4809C16.1554 16.8063 15.6278 16.8063 15.3023 16.4809L14.7107 15.8892C14.3852 15.5638 14.3852 15.0361 14.7107 14.7107ZM3.51925 3.5191C3.84469 3.19366 4.37232 3.19366 4.69776 3.5191L5.28943 4.11077C5.61486 4.43621 5.61486 4.96384 5.28943 5.28928C4.96399 5.61472 4.43635 5.61472 4.11091 5.28928L3.51925 4.69761C3.19381 4.37218 3.19381 3.84454 3.51925 3.5191ZM6.46451 6.46445C7.91429 5.01466 10.0329 4.64131 11.8271 5.34441L5.34447 11.8271C4.64137 10.0328 5.01472 7.91423 6.46451 6.46445ZM8.17288 14.6555L14.6556 8.17282C15.3587 9.96708 14.9854 12.0857 13.5356 13.5355C12.0858 14.9853 9.96714 15.3587 8.17288 14.6555ZM17.2071 4.20709C17.5976 3.81657 17.5976 3.1834 17.2071 2.79288C16.8166 2.40235 16.1834 2.40235 15.7929 2.79288L2.79289 15.7929C2.40237 16.1834 2.40237 16.8166 2.79289 17.2071C3.18342 17.5976 3.81658 17.5976 4.20711 17.2071L17.2071 4.20709Z", fill: "currentColor" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_3313_9942", children: jsx("rect", { width: size, height: size, fill: "currentColor" }) }) })] }));
+}
 
 const dockIconClassname = "tw-text-grey-900";
 const dockIconSelectedClassname = "group-data-[squid-theme-type=dark]:tw-text-royal-700 group-data-[squid-theme-type=light]:tw-text-volt-700";
@@ -17306,59 +17504,45 @@ function ImageIcon({ size = "20", className, }) {
 function FilterTimelineIcon({ size = "20", className, }) {
     return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: className, children: [jsx("path", { d: "M5.00117 3.33325C5.46141 3.33325 5.8345 3.70635 5.8345 4.16659V13.8206L6.91042 12.7442C7.23577 12.4186 7.76341 12.4185 8.08894 12.7438C8.41446 13.0692 8.4146 13.5968 8.08925 13.9224L5.59058 16.4224C5.43434 16.5787 5.22241 16.6665 5.00139 16.6666C4.78038 16.6666 4.56839 16.5789 4.41207 16.4227L1.91074 13.9227C1.58521 13.5973 1.58507 13.0697 1.91042 12.7442C2.23577 12.4186 2.76341 12.4185 3.08894 12.7438L4.16784 13.8222V4.16659C4.16784 3.70635 4.54093 3.33325 5.00117 3.33325Z", fill: "currentColor" }), jsx("path", { d: "M9.99984 4.99992C9.5396 4.99992 9.1665 5.37301 9.1665 5.83325C9.1665 6.29349 9.5396 6.66659 9.99984 6.66659H16.6665C17.1267 6.66659 17.4998 6.29349 17.4998 5.83325C17.4998 5.37301 17.1267 4.99992 16.6665 4.99992H9.99984Z", fill: "currentColor" }), jsx("path", { d: "M13.3332 13.3333C12.8729 13.3333 12.4998 13.7063 12.4998 14.1666C12.4998 14.6268 12.8729 14.9999 13.3332 14.9999H16.6665C17.1267 14.9999 17.4998 14.6268 17.4998 14.1666C17.4998 13.7063 17.1267 13.3333 16.6665 13.3333H13.3332Z", fill: "currentColor" }), jsx("path", { d: "M10.8332 9.99992C10.8332 9.53968 11.2063 9.16659 11.6665 9.16659H16.6665C17.1267 9.16659 17.4998 9.53968 17.4998 9.99992C17.4998 10.4602 17.1267 10.8333 16.6665 10.8333H11.6665C11.2063 10.8333 10.8332 10.4602 10.8332 9.99992Z", fill: "currentColor" })] }));
 }
+function NewspaperIcon({ 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: "M12 8C12 6.34315 13.3431 5 15 5H20C21.1046 5 22 5.89543 22 7V17C22 18.1046 21.1046 19 20 19H15.277C14.5966 19 13.9296 19.1642 13.3508 19.5219C12.772 19.8796 12.3043 20.3914 12 21M12 8C12 6.34315 10.6569 5 9 5H4C2.89543 5 2 5.89543 2 7V17C2 18.1046 2.89543 19 4 19H8.723C9.40341 19 10.0704 19.1642 10.6492 19.5219C11.228 19.8796 11.6957 20.3914 12 21M12 8V21", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+function AtomIcon({ className, size = "24", }) {
+    return (jsxs("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: "M19.4739 4.52612C21.0463 6.09858 18.9749 10.7195 14.8472 14.8472C10.7195 18.9749 6.09858 21.0463 4.52612 19.4739C2.95366 17.9014 5.0251 13.2805 9.15281 9.15281C13.2805 5.0251 17.9014 2.95366 19.4739 4.52612Z", stroke: "currentColor", strokeWidth: "2" }), jsx("path", { d: "M19.4739 19.4739C17.9014 21.0463 13.2805 18.9749 9.15281 14.8472C5.0251 10.7195 2.95366 6.09858 4.52612 4.52612C6.09858 2.95366 10.7195 5.0251 14.8472 9.15281C18.9749 13.2805 21.0463 17.9014 19.4739 19.4739Z", stroke: "currentColor", strokeWidth: "2" })] }));
+}
+function SunriseSmallIcon({ className, size = "20", }) {
+    return (jsxs("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: "M9.99984 1.66663C10.4601 1.66663 10.8332 2.03972 10.8332 2.49996V3.33329C10.8332 3.79353 10.4601 4.16663 9.99984 4.16663C9.5396 4.16663 9.1665 3.79353 9.1665 3.33329V2.49996C9.1665 2.03972 9.5396 1.66663 9.99984 1.66663ZM1.6665 9.99996C1.6665 9.53972 2.0396 9.16663 2.49984 9.16663H3.33317C3.79341 9.16663 4.1665 9.53972 4.1665 9.99996C4.1665 10.4602 3.79341 10.8333 3.33317 10.8333H2.49984C2.0396 10.8333 1.6665 10.4602 1.6665 9.99996ZM15.8332 9.99996C15.8332 9.53972 16.2063 9.16663 16.6665 9.16663H17.4998C17.9601 9.16663 18.3332 9.53972 18.3332 9.99996C18.3332 10.4602 17.9601 10.8333 17.4998 10.8333H16.6665C16.2063 10.8333 15.8332 10.4602 15.8332 9.99996Z", fill: "currentColor" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14.1241 5.87517C13.7987 5.54973 13.7987 5.0221 14.1241 4.69666L14.7134 4.1074C15.0388 3.78197 15.5665 3.78197 15.8919 4.1074C16.2173 4.43284 16.2173 4.96048 15.8919 5.28592L15.3026 5.87517C14.9772 6.20061 14.4496 6.20061 14.1241 5.87517Z", fill: "currentColor" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1.6665 13.3333C1.6665 12.8731 2.0396 12.5 2.49984 12.5H17.4998C17.9601 12.5 18.3332 12.8731 18.3332 13.3333C18.3332 13.7935 17.9601 14.1666 17.4998 14.1666H2.49984C2.0396 14.1666 1.6665 13.7935 1.6665 13.3333ZM4.99984 16.6666C4.99984 16.2064 5.37293 15.8333 5.83317 15.8333H14.1665C14.6267 15.8333 14.9998 16.2064 14.9998 16.6666C14.9998 17.1269 14.6267 17.5 14.1665 17.5H5.83317C5.37293 17.5 4.99984 17.1269 4.99984 16.6666Z", fill: "currentColor" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.10785 4.1074C4.43328 3.78197 4.96092 3.78197 5.28636 4.1074L5.87561 4.69666C6.20105 5.0221 6.20105 5.54973 5.87561 5.87517C5.55018 6.20061 5.02254 6.20061 4.6971 5.87517L4.10785 5.28591C3.78241 4.96048 3.78241 4.43284 4.10785 4.1074Z", fill: "currentColor" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.6665 10.8333C6.20627 10.8333 5.83317 10.4602 5.83317 9.99996C5.83317 7.69877 7.69865 5.83329 9.99984 5.83329C12.301 5.83329 14.1665 7.69877 14.1665 9.99996C14.1665 10.4602 13.7934 10.8333 13.3332 10.8333C11.9184 10.8333 8.08126 10.8333 6.6665 10.8333Z", fill: "currentColor" })] }));
+}
+function CoinsOutlinedIcon({ 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 16C5.68629 16 3 13.3137 3 10C3 6.68629 5.68629 4 9 4C11.4597 4 13.5737 5.48012 14.5 7.59829M21 14C21 17.3137 18.3137 20 15 20C12.3841 20 10.1591 18.3259 9.33811 15.9906C9.11911 15.3677 9 14.6978 9 14C9 10.7998 11.5055 8.1847 14.6619 8.00937C14.7738 8.00315 14.8865 8 15 8C18.3137 8 21 10.6863 21 14Z", stroke: "currentColor", strokeWidth: "2" }) }));
+}
+function PhoneIcon({ size = "24", className, }) {
+    return (jsx("svg", { className: className, xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 25 24", fill: "none", children: jsx("path", { d: "M10.5 19H14.5M8.5 22H16.5C17.6046 22 18.5 21.1046 18.5 20V4C18.5 2.89543 17.6046 2 16.5 2H8.5C7.39543 2 6.5 2.89543 6.5 4V20C6.5 21.1046 7.39543 22 8.5 22Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
+}
+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 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" })] }));
+}
+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" }) }));
+}
+function CodeBracketsIcon({ 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.8688 2.5249C12.3153 2.63652 12.5867 3.08896 12.4751 3.53546L9.14178 16.8688C9.03015 17.3153 8.57771 17.5868 8.13121 17.4752C7.68472 17.3635 7.41325 16.9111 7.52487 16.4646L10.8582 3.13123C10.9698 2.68474 11.4223 2.41327 11.8688 2.5249ZM5.58925 6.07746C5.91469 6.4029 5.91469 6.93053 5.58925 7.25597L3.43443 9.41079C3.10899 9.73623 3.10899 10.2639 3.43443 10.5893L5.58925 12.7441C5.91469 13.0696 5.91469 13.5972 5.58925 13.9226C5.26381 14.2481 4.73617 14.2481 4.41074 13.9226L2.25591 11.7678C1.2796 10.7915 1.27961 9.20859 2.25592 8.23228L4.41074 6.07746C4.73617 5.75202 5.26381 5.75202 5.58925 6.07746ZM14.4107 6.07746C14.7362 5.75202 15.2638 5.75202 15.5892 6.07746L17.7441 8.23228C18.7204 9.20859 18.7204 10.7915 17.7441 11.7678L15.5892 13.9226C15.2638 14.2481 14.7362 14.2481 14.4107 13.9226C14.0853 13.5972 14.0853 13.0696 14.4107 12.7441L16.5656 10.5893C16.891 10.2639 16.891 9.73623 16.5656 9.41079L14.4107 7.25597C14.0853 6.93053 14.0853 6.4029 14.4107 6.07746Z", fill: "currentColor" }) }));
+}
+function CommandIcon({ size = "22", className, }) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 22 22", fill: "none", className: className, children: jsx("path", { d: "M8 17V17C8 16.0219 8.28951 15.0657 8.83205 14.2519L13.1679 7.74808C13.7105 6.93427 14 5.97808 14 5V5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
 
 function FeeButton(_a) {
     var { feeInUsd = "0", chipLabel = "Fee", className, tooltip } = _a, props = __rest$1(_a, ["feeInUsd", "chipLabel", "className", "tooltip"]);
     return (jsx(Tooltip, Object.assign({}, tooltip, { tooltipWidth: "max", containerClassName: "tw-rounded-squid-m tw-w-full", childrenClassName: "tw-rounded-squid-m", children: jsxs("button", Object.assign({}, props, { className: cn("tw-flex tw-h-squid-xl tw-w-full tw-items-center tw-gap-x-squid-xs tw-rounded-squid-m tw-px-squid-xs hover:tw-bg-material-light-thin", className), children: [jsx(Chip, { label: chipLabel, className: "tw-hidden mobile-xs:tw-flex" }), jsxs("span", { className: "tw-flex tw-items-center", children: [jsx(UsdAmount, { usdAmount: feeInUsd }), jsx(ChevronDownSmallIcon, { className: "tw-text-grey-600" })] })] })) })));
 }
 
-const lightTheme = {
-    // content
-    "content-100": "#17191C",
-    "content-200": "#292C32",
-    "content-300": "#292C32",
-    "content-400": "#676B7E",
-    "content-500": "#8A8FA8",
-    "content-600": "#A7ABBE",
-    "content-700": "#D1D6E0",
-    "content-800": "#EDEEF3",
-    "content-900": "#FBFBFD",
-    // accent
-    "accent-300": "#8C53C5",
-    "accent-400": "#9E79D2",
-    "accent-500": "#B893EC",
-    "accent-700": "#E3D0FD",
-    // status
-    "status-positive": "#17CF26",
-    "status-negative": "#FF5B4D",
-    "status-warning": "#EC9213",
-    // highlight
-    "highlight-700": "#E4FE53",
-};
-const darkTheme = {
-    // content
-    "content-100": "#FBFBFD",
-    "content-200": "#EDEFF3",
-    "content-300": "#D1D6E0",
-    "content-400": "#A7ABBE",
-    "content-500": "#8A8FA8",
-    "content-600": "#676B7E",
-    "content-700": "#4C515D",
-    "content-800": "#292C32",
-    "content-900": "#17191C",
-    // accent
-    "accent-300": "#D9BEF4",
-    "accent-400": "#B893EC",
-    "accent-500": "#9E79D2",
-    "accent-700": "#6B45A1",
-    // status
-    "status-positive": "#7AE870",
-    "status-negative": "#FF4D5B",
-    "status-warning": "#F3AF25",
-    // highlight
-    "highlight-700": "#08A054",
-};
-
 var createPlugin$2 = {};
 
 var createPlugin$1 = {};
@@ -17467,7 +17651,7 @@ const boxShadow = {
 const backgrounds = {
     "royal-light": "linear-gradient(180deg, #A577D8 0%, #BF91F2 100%)",
     "royal-dark": "linear-gradient(180deg, #BF91F2 0%, #A577D8 100%)",
-    "dark-cover": "linear-gradient(90deg, var(--squid-theme-material-dark-thick) 45.4%, transparent 50.85%, var(--squid-theme-material-dark-thick) 55.61%)",
+    "dark-cover": `linear-gradient(90deg, var(${themeKeysToCssVariables.color["material-dark-thick"].cssVariable}) 45.4%, transparent 50.85%, var(${themeKeysToCssVariables.color["material-dark-thick"].cssVariable}) 55.61%)`,
 };
 const baseTailwindConfig = {
     prefix: "tw-",
@@ -17592,13 +17776,13 @@ const baseTailwindConfig = {
                     },
                     "100%": {
                         "backdrop-filter": "blur(20px) saturate(150%)",
-                        "background-color": `var(${themeTypesKeys["material-dark-average"].cssVariable})`,
+                        "background-color": `var(${themeKeysToCssVariables.color["material-dark-average"].cssVariable})`,
                     },
                 },
                 "blur-out": {
                     "0%": {
                         "backdrop-filter": "blur(20px) saturate(150%)",
-                        "background-color": `var(${themeTypesKeys["material-dark-average"].cssVariable})`,
+                        "background-color": `var(${themeKeysToCssVariables.color["material-dark-average"].cssVariable})`,
                     },
                     "100%": {
                         "backdrop-filter": "blur(0px)",
@@ -17673,9 +17857,7 @@ const baseTailwindConfig = {
                 33: "0.33",
                 66: "0.66",
             },
-            fontFamily: {
-                geist: ["Geist", "sans-serif"],
-            },
+            fontFamily: mapToCssVariables(themeKeysToCssVariables.fontFamily),
             letterSpacing: {
                 // body text
                 "body-small": "-0.366px",
@@ -17686,26 +17868,8 @@ const baseTailwindConfig = {
                 "heading-medium": "-2.465px",
                 "heading-large": "-3.525px",
             },
-            fontSize: {
-                // caption text
-                caption: "0.875rem", // 14px
-                // body text
-                "body-small": "1.14375rem", // 18.5px
-                "body-medium": "1.40625rem", // 22.5px
-                "body-large": "1.75625rem", // 28.1px
-                // heading
-                "heading-small": "2.1875rem", // 35px
-                "heading-medium": "3.08125rem", // 49.3px
-                "heading-large": "4.40625rem", // 70.5px
-            },
-            fontWeight: {
-                // body text and caption text
-                "typography-regular": "400",
-                "typography-bold": "600",
-                // headings
-                "heading-regular": "400",
-                "heading-bold": "600",
-            },
+            fontSize: mapToCssVariables(themeKeysToCssVariables.fontSize),
+            fontWeight: mapToCssVariables(themeKeysToCssVariables.fontWeight),
             lineHeight: {
                 // caption text
                 caption: "19.6px",
@@ -17725,14 +17889,11 @@ const baseTailwindConfig = {
             maxWidth: widths,
             maxHeight: heights,
             spacing: spacing$1,
-            borderRadius: spacing$1,
+            borderRadius: Object.assign(Object.assign({}, spacing$1), mapToCssVariables(themeKeysToCssVariables.borderRadius)),
             boxShadow,
             backgroundImage: backgrounds,
             backdropBlur,
-            colors: Object.assign({}, Object.entries(themeTypesKeys).reduce((acc, [key, { cssVariable }]) => {
-                acc[key] = `var(${cssVariable})`;
-                return acc;
-            }, {})),
+            colors: mapToCssVariables(themeKeysToCssVariables.color),
         },
     },
     plugins: [
@@ -17742,13 +17903,13 @@ const baseTailwindConfig = {
                 ".focus-visible-within-outline:has(:focus-visible)": {
                     "outline-style": "solid",
                     "outline-width": "2px",
-                    "outline-color": `var(${themeTypesKeys["royal-500"].cssVariable})`,
+                    "outline-color": `var(${themeKeysToCssVariables.color["royal-500"].cssVariable})`,
                 },
                 ".scrollbar-hidden": {
                     scrollbarWidth: "none",
                 },
                 ".highlight-adjacent:has(button:hover)>button:first-child": {
-                    backgroundColor: `var(${themeTypesKeys["material-light-thin"].cssVariable})`,
+                    backgroundColor: `var(${themeKeysToCssVariables.color["material-light-thin"].cssVariable})`,
                 },
                 ".highlight-adjacent:has(*:hover) .hide-on-parent-hover": {
                     opacity: "0",
@@ -17761,9 +17922,94 @@ const baseTailwindConfig = {
     ],
 };
 
+const defaultFontSize = {
+    caption: "0.875rem", // 14px
+    "body-small": "1.14375rem", // 18.5px
+    "body-medium": "1.40625rem", // 22.5px
+    "body-large": "1.75625rem", // 28.1px
+    "heading-small": "2.1875rem", // 35,px
+    "heading-medium": "3.08125rem", // 49.3px
+    "heading-large": "4.40625rem", // 70.5px
+};
+const defaultFontWeight = {
+    caption: "400",
+    "body-small": "400",
+    "body-medium": "400",
+    "body-large": "400",
+    "heading-small": "400",
+    "heading-medium": "400",
+    "heading-large": "400",
+};
+const defaultFontFamily = {
+    "squid-main": "Geist, sans-serif",
+};
+const defaultBorderRadius = {
+    "button-large": spacing$1["squid-xxl"],
+    "button-medium": spacing$1["squid-m"],
+};
+const lightTheme = {
+    borderRadius: defaultBorderRadius,
+    fontSize: defaultFontSize,
+    fontWeight: defaultFontWeight,
+    fontFamily: defaultFontFamily,
+    color: {
+        // content
+        "grey-100": "#17191C",
+        "grey-200": "#292C32",
+        "grey-300": "#292C32",
+        "grey-400": "#676B7E",
+        "grey-500": "#8A8FA8",
+        "grey-600": "#A7ABBE",
+        "grey-700": "#D1D6E0",
+        "grey-800": "#EDEEF3",
+        "grey-900": "#FBFBFD",
+        // accent
+        "royal-300": "#8C53C5",
+        "royal-400": "#9E79D2",
+        "royal-500": "#B893EC",
+        "royal-700": "#E3D0FD",
+        // status
+        "status-positive": "#17CF26",
+        "status-negative": "#FF5B4D",
+        "status-partial": "#EC9213",
+        // highlight
+        "highlight-700": "#E4FE53",
+    },
+};
+const darkTheme = {
+    borderRadius: defaultBorderRadius,
+    fontSize: defaultFontSize,
+    fontWeight: defaultFontWeight,
+    fontFamily: defaultFontFamily,
+    color: {
+        // content
+        "grey-100": "#FBFBFD",
+        "grey-200": "#EDEFF3",
+        "grey-300": "#D1D6E0",
+        "grey-400": "#A7ABBE",
+        "grey-500": "#8A8FA8",
+        "grey-600": "#676B7E",
+        "grey-700": "#4C515D",
+        "grey-800": "#292C32",
+        "grey-900": "#17191C",
+        // accent
+        "royal-300": "#D9BEF4",
+        "royal-400": "#B893EC",
+        "royal-500": "#9E79D2",
+        "royal-700": "#6B45A1",
+        // status
+        "status-positive": "#7AE870",
+        "status-negative": "#FF4D5B",
+        "status-partial": "#F3AF25",
+        // highlight
+        "highlight-700": "#08A054",
+    },
+};
+const defaultTheme = lightTheme;
+
 function StopsButton(_a) {
     var { stopsCount = 0, estimatedTime = "0s", tooltip, providers } = _a, props = __rest$1(_a, ["stopsCount", "estimatedTime", "tooltip", "providers"]);
-    return (jsx(Tooltip, Object.assign({}, tooltip, { tooltipWidth: "max", containerClassName: "mobile-lg:tw-w-[190px] tw-rounded-squid-m tw-justify-end tw-flex", childrenClassName: "tw-rounded-squid-m tw-w-fit", children: jsxs("button", Object.assign({}, props, { onClick: props.disabled ? undefined : props.onClick, className: "tw-group/stops-button tw-flex tw-h-squid-xl tw-flex-1 tw-items-center tw-justify-end tw-rounded-squid-m tw-pr-squid-xs hover:tw-bg-material-light-thin", children: [jsx(Providers, { providers: providers }), jsxs(CaptionText, { className: "tw-flex tw-max-w-full tw-items-center tw-gap-[3px] tw-truncate tw-text-grey-500 mobile-lg:tw-w-[50px]", children: [jsx("span", { children: stopsCount }), jsx("span", { className: "tw-hidden mobile-lg:tw-block", children: "stops" })] }), jsx(ChevronDownSmallIcon, { className: "tw-text-grey-600" }), jsx("div", { className: "tw-pl-squid-xs", children: jsx(Chip, { label: estimatedTime }) })] })) })));
+    return (jsx(Tooltip, Object.assign({}, tooltip, { tooltipWidth: "max", containerClassName: "mobile-lg:tw-w-[190px] tw-rounded-squid-m tw-justify-end tw-flex", childrenClassName: "tw-rounded-squid-m tw-w-fit", children: jsxs("button", Object.assign({}, props, { onClick: props.disabled ? undefined : props.onClick, className: "tw-group/stops-button tw-flex tw-h-squid-xl tw-flex-1 tw-items-center tw-justify-end tw-rounded-squid-m tw-pr-squid-xs hover:tw-bg-material-light-thin", children: [jsx(Providers, { providers: providers }), jsxs(CaptionText, { className: "tw-flex tw-max-w-full tw-items-center tw-gap-[3px] tw-truncate tw-text-grey-500 mobile-lg:tw-w-[50px]", children: [jsx("span", { children: stopsCount }), jsx("span", { className: "tw-hidden mobile-lg:tw-block", children: Number(stopsCount) === 1 ? "stop" : "stops" })] }), jsx(ChevronDownSmallIcon, { className: "tw-text-grey-600" }), jsx("div", { className: "tw-pl-squid-xs", children: jsx(Chip, { label: estimatedTime }) })] })) })));
 }
 const MAX_PROVIDERS = 4;
 const spacing = {
@@ -17817,7 +18063,7 @@ function Menu(_a) {
     return (jsx("div", Object.assign({}, props, { className: cn("tw-max-w-[320px]", containerClassName), ref: menuRef, children: jsxs("div", { className: cn("tw-relative tw-inline-flex tw-max-w-full tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-m tw-bg-material-dark-thick tw-p-squid-xs tw-text-center tw-text-material-light-thick group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2", borderRadiusClassMap[rounded], contentClassName, 
             // :before element to create a backdrop
             // Not applied to the div itself because the backdrop-filter spec does not apply nested backdrop filters
-            "before:tw-absolute before:tw-inset-0 before:-tw-z-[1] before:tw-h-full before:tw-w-full before:tw-rounded-squid-m before:tw-backdrop-blur/20 before:tw-backdrop-saturate-150"), children: [typeof children === "string" ? (jsx(CaptionText, { className: "tw-z-20 tw-self-stretch !tw-leading-[10px]", children: children })) : (jsx("div", Object.assign({}, contentWrapperProps, { className: cn("tw-z-20 tw-max-w-full tw-text-caption", contentWrapperProps === null || contentWrapperProps === void 0 ? void 0 : contentWrapperProps.className), children: children }))), jsx("div", { className: cn("tw-absolute tw-inset-0 tw-z-10 tw-h-full tw-w-full tw-border tw-border-material-light-thin tw-bg-material-light-thin", borderRadiusClassMap[rounded]) })] }) })));
+            "before:tw-absolute before:tw-inset-0 before:-tw-z-[1] before:tw-h-full before:tw-w-full before:tw-rounded-squid-m before:tw-backdrop-blur/20 before:tw-backdrop-saturate-150"), children: [typeof children === "string" ? (jsx(CaptionText, { className: "tw-z-20 tw-self-stretch !tw-leading-[10px]", children: children })) : (jsx("div", Object.assign({}, contentWrapperProps, { className: cn("tw-z-20 tw-max-w-full tw-text-caption tw-font-caption", contentWrapperProps === null || contentWrapperProps === void 0 ? void 0 : contentWrapperProps.className), children: children }))), jsx("div", { className: cn("tw-absolute tw-inset-0 tw-z-10 tw-h-full tw-w-full tw-border tw-border-material-light-thin tw-bg-material-light-thin", borderRadiusClassMap[rounded]) })] }) })));
 }
 
 function DropdownMenu({ dropdownRef, className, menuRef, isHidden = false, listClassName, containerClassName, children, contentWrapperProps, menuContentClassName, }) {
@@ -17825,7 +18071,7 @@ function DropdownMenu({ dropdownRef, className, menuRef, isHidden = false, listC
 }
 
 function InfoBox({ title, description, icon }) {
-    return (jsxs("div", { className: "tw-align-self-stretch tw-flex tw-flex-col tw-items-center tw-gap-squid-xs tw-px-squid-m tw-pb-squid-l tw-pt-squid-xs tw-text-royal-400", children: [icon, jsxs("div", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xxs tw-text-center", children: [jsx(BodyText, { size: "small", className: "!tw-leading-[9px]", children: title }), jsx(CaptionText, { className: "tw-text-grey-500", children: description })] })] }));
+    return (jsxs("div", { className: "tw-align-self-stretch tw-flex tw-flex-col tw-items-center tw-gap-squid-xs tw-px-squid-m tw-pb-squid-l tw-pt-squid-xs tw-text-royal-400", children: [icon, jsxs("div", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xxs tw-text-center", children: [jsx(BodyText, { size: "small", className: "!tw-leading-[9px]", children: title }), typeof description === "string" ? (jsx(CaptionText, { className: "tw-text-grey-500", children: description })) : (description)] })] }));
 }
 
 const modalWidthClassMap = {
@@ -18495,7 +18741,7 @@ function LogoContainer({ children }) {
     return (jsx("div", { className: "tw-flex tw-h-[60px] tw-w-[60px] tw-items-center tw-justify-center", children: children }));
 }
 
-function SwapConfiguration({ amount, tokenPrice = 0, isFetching: isFetchingProp = false, chain, token, direction = "from", onAmountChange, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, maxUsdDecimals, isInputInteractive = true, isLoading = false, inputModeButton, balanceButton, assetsButton, walletButton, }) {
+function SwapConfiguration({ amount, tokenPrice = 0, isFetching: isFetchingProp = false, chain, token, direction = "from", onAmountChange, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, maxUsdDecimals, isInputInteractive = true, isLoading = false, inputModeButton, balanceButton, assetsButton, walletButton, showNumericInputDetails = true, }) {
     var _a, _b, _c;
     const isWalletButtonInteractive = !isLoading && !!(walletButton === null || walletButton === void 0 ? void 0 : walletButton.onClick);
     const WalletButtonTag = isWalletButtonInteractive ? "button" : "div";
@@ -18515,7 +18761,7 @@ function SwapConfiguration({ amount, tokenPrice = 0, isFetching: isFetchingProp
                 }, balance: balance, criticalPriceImpactPercentage: criticalPriceImpactPercentage, error: error, formatIfVerySmall: {
                     token: "0.001",
                     usd: "0.01",
-                }, maxUsdDecimals: maxUsdDecimals, isLoading: isFetching, priceImpactPercentage: priceImpactPercentage, showDetails: !!token, direction: direction, forcedAmount: amount, inputModeButton: inputModeButton, balanceButton: balanceButton, isInteractive: isInputInteractive && !isLoading })] }));
+                }, maxUsdDecimals: maxUsdDecimals, isLoading: isFetching, priceImpactPercentage: priceImpactPercentage, showDetails: showNumericInputDetails, direction: direction, forcedAmount: amount, inputModeButton: inputModeButton, balanceButton: balanceButton, isInteractive: isInputInteractive && !isLoading })] }));
 }
 
 function SwapProgressViewHeader({ title, description, }) {
@@ -18727,6 +18973,69 @@ const useTimer = ({ immediateStart = true, }) => {
     return { timer, stopTimer, startTimer };
 };
 
+var ThemePreference;
+(function (ThemePreference) {
+    ThemePreference["LIGHT"] = "light";
+    ThemePreference["DARK"] = "dark";
+    ThemePreference["SYSTEM"] = "system";
+})(ThemePreference || (ThemePreference = {}));
+const THEME_STORAGE_KEY = "__squid-app-theme-type__";
+const THEME_CHANGE_EVENT = "squid-app-theme-change";
+const THEME_MEDIA_QUERY = "(prefers-color-scheme: light)";
+function useUserTheme() {
+    const [themePreference, setThemePreference] = useState(getInitialTheme);
+    const [themeType, setThemeType] = useState(getEffectiveTheme(themePreference));
+    useEffect(() => {
+        const handleThemeChange = (e) => {
+            setThemePreference(e.detail);
+        };
+        window.addEventListener(THEME_CHANGE_EVENT, handleThemeChange);
+        return () => {
+            window.removeEventListener(THEME_CHANGE_EVENT, handleThemeChange);
+        };
+    }, []);
+    useEffect(() => {
+        const mediaQuery = window.matchMedia(THEME_MEDIA_QUERY);
+        const handleChange = () => {
+            if (themePreference === ThemePreference.SYSTEM) {
+                setThemeType(mediaQuery.matches ? "light" : "dark");
+            }
+        };
+        mediaQuery.addEventListener("change", handleChange);
+        handleChange();
+        return () => {
+            mediaQuery.removeEventListener("change", handleChange);
+        };
+    }, [themePreference]);
+    useEffect(() => {
+        setThemeType(getEffectiveTheme(themePreference));
+    }, [themePreference]);
+    const setThemeManually = (theme) => {
+        setThemePreference(theme);
+        localStorage.setItem(THEME_STORAGE_KEY, theme);
+        window.dispatchEvent(new CustomEvent(THEME_CHANGE_EVENT, { detail: theme }));
+    };
+    const isDarkMode = useMemo(() => themeType === "dark", [themeType]);
+    return {
+        themePreference,
+        themeType,
+        theme: isDarkMode ? darkTheme : lightTheme,
+        setThemeManually,
+        isDarkMode,
+    };
+}
+function getInitialTheme() {
+    var _a;
+    if (typeof window === "undefined")
+        return ThemePreference.SYSTEM;
+    return ((_a = localStorage.getItem(THEME_STORAGE_KEY)) !== null && _a !== void 0 ? _a : ThemePreference.SYSTEM);
+}
+function getEffectiveTheme(themeType) {
+    if (themeType !== ThemePreference.SYSTEM)
+        return themeType;
+    return window.matchMedia(THEME_MEDIA_QUERY).matches ? "light" : "dark";
+}
+
 function BaseDropdownMenuItem({ label, imageUrl, icon, labelClassName, onClick, link, control, detail, isSelected, itemRef, children, contentRef, }) {
     const ContentTag = link
         ? "a"
@@ -18914,7 +19223,7 @@ function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount,
             onClick,
         }
         : {};
-    return (jsxs("li", { ref: itemRef, className: cn("tw-relative tw-flex tw-h-list-item-large tw-min-w-list-item-small tw-self-stretch tw-bg-grey-900 tw-px-squid-xs tw-text-grey-300", !!dropdownMenuContent && "tw-highlight-adjacent"), children: [jsxs(ItemTag, Object.assign({}, itemTagProps, { className: cn("tw-group/history-item tw-peer/history-item tw-relative tw-flex tw-w-full tw-flex-shrink-0 tw-items-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs", isInteractive && "hover:tw-bg-material-light-thin"), children: [jsxs("div", { className: "tw-relative tw-h-10 tw-w-[60px]", children: [!!statusBadge[status].badge && (jsx("span", { className: cn("tw-absolute -tw-left-[5px] tw-bottom-0 tw-z-10 tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-center tw-overflow-hidden tw-rounded-full tw-border tw-border-grey-900 tw-p-0.5", statusBadge[status].containerClassName), children: statusBadge[status].badge })), jsx("img", { src: firstImageUrl, className: "tw-absolute tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" }), jsx("img", { src: secondImageUrl, className: "tw-absolute tw-left-5 tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" })] }), jsxs("div", { className: "tw-flex tw-h-10 tw-flex-1 tw-flex-col tw-self-stretch", children: [jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-justify-between tw-text-grey-500", children: [jsxs("div", { className: "tw-flex tw-items-center", children: [jsx(CaptionText, { children: fromLabel }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronRightSmallIcon, {}) }), jsx(CaptionText, { children: toLabel })] }), jsx("div", { className: cn("tw-hide-on-parent-hover tw-flex tw-items-center tw-justify-center tw-gap-squid-xxs", !!dropdownMenuContent &&
+    return (jsxs("li", { ref: itemRef, className: cn("tw-relative tw-flex tw-h-list-item-large tw-min-w-list-item-small tw-self-stretch tw-bg-grey-900 tw-px-squid-xs tw-text-grey-300", !!dropdownMenuContent && "tw-highlight-adjacent"), children: [jsxs(ItemTag, Object.assign({}, itemTagProps, { className: cn("tw-group/history-item tw-peer/history-item tw-relative tw-flex tw-w-full tw-flex-shrink-0 tw-items-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs", isInteractive && "hover:tw-bg-material-light-thin"), children: [jsxs("div", { className: "tw-relative tw-h-10 tw-w-[60px]", children: [!!statusBadge[status].badge && (jsx("span", { className: cn("tw-absolute -tw-left-[5px] tw-bottom-0 tw-z-10 tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-center tw-overflow-hidden tw-rounded-full tw-border tw-border-grey-900 tw-p-0.5", statusBadge[status].containerClassName), children: statusBadge[status].badge })), jsx("img", { src: firstImageUrl, className: "tw-absolute tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" }), jsx("img", { src: secondImageUrl, className: "tw-absolute tw-left-5 tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" })] }), jsxs("div", { className: "tw-flex tw-h-10 tw-flex-1 tw-flex-col tw-self-stretch", children: [jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-justify-between tw-text-grey-500", children: [jsxs("div", { className: "tw-flex tw-items-center", children: [jsx(CaptionText, { children: fromLabel }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronRightSmallIcon, {}) }), jsx(CaptionText, { children: toLabel })] }), jsx("div", { className: cn("tw-flex tw-items-center tw-justify-center tw-gap-squid-xxs tw-hide-on-parent-hover", !!dropdownMenuContent &&
                                             "tw-transition-opacity group-hover/history-item:tw-hidden group-hover/history-item:tw-opacity-0 peer-focus:tw-hidden peer-focus:tw-opacity-0", isDropdownOpen && "tw-opacity-0"), children: statusLabel })] }), jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-gap-squid-xxs tw-text-grey-300", children: [jsx(BodyText, { size: "small", children: fromAmount }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronLargeRightIcon, {}) }), jsx(BodyText, { size: "small", children: toAmount })] })] })] })), !!dropdownMenuContent && (jsx(ListItemActionsButton, { ref: openDropdownButtonRef, onClick: openDropdown, isActive: isDropdownOpen, className: "peer-hover/history-item:tw-opacity-100" })), isDropdownOpen && !!dropdownMenuContent ? (jsx(DropdownMenu, { menuRef: menuRef, isHidden: !dropdownStyles, className: cn(!!dropdownStyles &&
                     dropdownPositionClassMap[dropdownStyles.position]), dropdownRef: dropdownRef, children: dropdownMenuContent })) : null] }));
 }
@@ -26657,11 +26966,11 @@ function NumericInput(_a) {
     const balanceFormatted = useMemo(() => {
         return formatTokenAmount(balance !== null && balance !== void 0 ? balance : "0");
     }, [balance]);
-    const containerClassname = "tw-px-squid-xs tw-pb-[15px] tw-pt-[5px] tw-text-heading-small tw-font-heading-regular mobile-lg:tw-px-squid-m tw-relative tw-h-[65px] mobile-sm-height:tw-h-[75px]";
+    const containerClassname = "tw-px-squid-xs tw-pb-[15px] tw-pt-[5px] tw-text-heading-small tw-font-regular mobile-lg:tw-px-squid-m tw-relative tw-h-[65px] mobile-sm-height:tw-h-[75px]";
     const inputRef = useRef(null);
     return (jsxs(Fragment, { children: [isInteractive && !isLoading ? (jsxs("form", { className: containerClassname, onSubmit: (e) => {
                     e.preventDefault();
-                }, children: [userInputType === UserInputType.USD && (jsx("span", { className: "tw-absolute tw-left-5 tw-top-[11px] tw-leading-[43px] tw-text-grey-600 mobile-lg:tw-left-[30px]", children: "$" })), jsx("input", Object.assign({ ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, placeholder: "0", className: cn("tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-grey-300 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-400 focus:tw-outline-none", userInputType === UserInputType.USD && "tw-pl-[33px]") }, props))] })) : (jsx("div", { className: cn(containerClassname, (isLoading || Number(inputValue || 0) === 0) && loadingClassName), children: jsx("div", { className: "tw-flex tw-h-[55px] tw-w-full tw-items-center tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300 mobile-sm-height:tw-h-[65px]", children: jsx("span", { children: inputValue || 0 }) }) })), !showDetails ? null : (jsxs("footer", { className: cn("tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-xs tw-text-grey-500 mobile-lg:tw-px-squid-m", isLoading && loadingClassName), children: [error ? (jsx("div", { className: "tw-px-squid-xs", children: jsx(ErrorMessage, { message: error.message }) })) : (jsx(Tooltip, Object.assign({}, (isLoading
+                }, children: [userInputType === UserInputType.USD && (jsx("span", { className: "tw-absolute tw-left-5 tw-top-[11px] tw-leading-[43px] tw-text-grey-600 mobile-lg:tw-left-[30px]", children: "$" })), jsx("input", Object.assign({ ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, placeholder: "0", className: cn("tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-grey-300 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-400 focus:tw-outline-none", userInputType === UserInputType.USD && "tw-pl-[33px]") }, props))] })) : (jsx("div", { className: cn(containerClassname, (isLoading || Number(inputValue || 0) === 0) && loadingClassName), children: jsx("div", { className: "tw-font-regular tw-flex tw-h-[55px] tw-w-full tw-items-center tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-text-grey-300 mobile-sm-height:tw-h-[65px]", children: jsx("span", { children: inputValue || 0 }) }) })), !showDetails ? null : (jsxs("footer", { className: cn("tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-xs tw-text-grey-500 mobile-lg:tw-px-squid-m", isLoading && loadingClassName), children: [error ? (jsx("div", { className: "tw-px-squid-xs", children: jsx(ErrorMessage, { message: error.message }) })) : (jsx(Tooltip, Object.assign({}, (isLoading
                         ? undefined
                         : userInputType === UserInputType.TOKEN
                             ? inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.tokenModeTooltip
@@ -26678,7 +26987,7 @@ function NumericInput(_a) {
                                 : notInteractiveChipClassName), children: [jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsx(CaptionText, { children: balanceFormatted }), jsx(Chip, { label: "Max" })] }) }))] }))] }));
 }
 
-function SettingsSlider({ value, type, onChange, decimalsFormat, max, min, isSelected, }) {
+function SettingsSlider({ value, type, onChange, decimalsFormat, max, min, isSelected = false, }) {
     const [isInputVisible, setIsInputVisible] = useState(false);
     const [inputValue, setInputValue] = useState(String(value !== null && value !== void 0 ? value : 0));
     useEffect(() => {
@@ -26708,11 +27017,14 @@ function SettingsSlider({ value, type, onChange, decimalsFormat, max, min, isSel
     }, [onChange]);
     const handleKeyDown = useCallback((e) => {
         // block unwanted (but still valid) characters
-        if (["e", "E", "+", "-"].includes(e.key))
-            return e.preventDefault();
+        if (["e", "E", "+", "-"].includes(e.key)) {
+            e.preventDefault();
+            return;
+        }
         // close input when pressing escape
-        if (e.key === "Escape")
-            return handleCloseInput();
+        if (e.key === "Escape") {
+            handleCloseInput();
+        }
     }, []);
     const handleOpenInput = useCallback(() => {
         setIsInputVisible(true);
@@ -26720,7 +27032,7 @@ function SettingsSlider({ value, type, onChange, decimalsFormat, max, min, isSel
     const handleCloseInput = useCallback(() => {
         setIsInputVisible(false);
     }, []);
-    return (jsxs("div", { ref: sliderRef, className: "tw-relative tw-flex tw-h-[30px] tw-items-center tw-justify-center tw-rounded-squid-xs", children: [jsxs("button", { 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-xs tw-pr-[40px] tw-text-left tw-text-caption !tw-font-medium tw-leading-[10px] -tw-outline-offset-2 placeholder-shown:tw-text-grey-600 hover:tw-bg-material-light-thin", value === 0 || value === undefined
+    return (jsxs("div", { ref: sliderRef, className: "tw-relative tw-flex tw-h-[30px] tw-items-center tw-justify-center tw-rounded-squid-xs", children: [jsxs("button", { 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-xs tw-pr-[40px] tw-text-left tw-text-caption tw-font-caption tw-leading-[10px] -tw-outline-offset-2 placeholder-shown:tw-text-grey-600 hover:tw-bg-material-light-thin", value === 0 || value === undefined
                     ? "tw-text-grey-600"
                     : "tw-text-grey-300", isInputVisible ? "tw-bg-material-light-thin" : "tw-bg-transparent", isSelected && "tw-outline tw-outline-2 tw-outline-royal-500"), children: [value !== null && value !== void 0 ? value : 0, jsx(CaptionText, { className: "!tw-font-medium !tw-leading-[10px] tw-text-grey-300", children: type === "percentage" ? "%" : "$" })] }), jsx("button", { onClick: handleOpenInput, className: "tw-absolute tw-right-squid-xs tw-flex tw-h-[26px] tw-w-[26px] tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-xxs !tw-font-medium tw-leading-[10px] hover:tw-bg-material-light-thin", children: jsx(Chip, { icon: jsx(ChevronGrabberVerticalIcon, { className: "tw-text-grey-900" }) }) }), isInputVisible && (jsx(Menu, { menuRef: menuRef, containerClassName: "tw-absolute tw-bottom-full tw-z-10 tw-pb-squid-m tw-w-[160px]", children: jsx("form", { onSubmit: (e) => {
                         e.preventDefault();
@@ -26862,7 +27174,7 @@ function RangeInput({ label, initialValue, onChange, min = 0, max = 99, isWarnin
                                 if (event.key === "Enter" || event.key === " ") {
                                     handleUpdateValue();
                                 }
-                            }, onMouseLeave: handleUpdateValue, className: cn("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-medium tw-leading-[10px] placeholder-shown:tw-text-grey-600 hover:tw-bg-material-light-thin"), children: jsx(CircleMinusIcon, {}) }), jsxs("div", { className: "tw-relative", children: [jsx(Input, { step: 0.1, min: min, max: max, isWarning: isWarning, defaultValue: initialValue || "0", placeholder: "0", showIcon: false, type: "number", inputRef: inputRef, onChange: (event) => {
+                            }, onMouseLeave: handleUpdateValue, className: cn("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(CircleMinusIcon, {}) }), jsxs("div", { className: "tw-relative", children: [jsx(Input, { step: 0.1, min: min, max: max, isWarning: isWarning, defaultValue: initialValue !== null && initialValue !== void 0 ? initialValue : "0", placeholder: "0", showIcon: false, type: "number", inputRef: inputRef, onChange: (event) => {
                                         var _a;
                                         if (!inputDecoratorRef.current || !inputRef.current)
                                             return;
@@ -26887,7 +27199,7 @@ function RangeInput({ label, initialValue, onChange, min = 0, max = 99, isWarnin
                                 if (event.key === "Enter" || event.key === " ") {
                                     handleUpdateValue();
                                 }
-                            }, 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-medium tw-leading-[10px] placeholder-shown:tw-text-grey-600 hover:tw-bg-material-light-thin"), children: jsx(CirclePlusIcon, {}) })] })] }) }));
+                            }, 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";
@@ -26919,9 +27231,9 @@ const outlineWidthMap = {
 };
 function AssetsButton({ chain, token, onClick, variant = "primary", isLoading = false, tooltip, }) {
     var _a;
-    const defaultBgColor = `var(${themeTypesKeys[themeKeyVariantMap[variant]].cssVariable})`;
+    const defaultBgColor = `var(${themeKeysToCssVariables.color[themeKeyVariantMap[variant]].cssVariable})`;
     const outlineWidth = outlineWidthMap[isLoading ? "loading" : !!token && !!chain ? "full" : "empty"];
-    const chainBgColor = (_a = (chain && chain.bgColor)) !== null && _a !== void 0 ? _a : defaultBgColor;
+    const chainBgColor = (_a = chain === null || chain === void 0 ? void 0 : chain.bgColor) !== null && _a !== void 0 ? _a : defaultBgColor;
     const tokenBgColor = (chain && token && !isLoading && token.bgColor) || defaultBgColor;
     const bgGradient = useMemo(() => {
         if (!chain || isLoading) {
@@ -26950,7 +27262,7 @@ function AssetsButton({ chain, token, onClick, variant = "primary", isLoading =
 function FilterButton({ selected, numApplied = 0, onClick, }) {
     return (jsxs("div", { className: "tw-relative", children: [jsx(Button$1, { variant: "tertiary", size: "md", className: cn(selected
                     ? "!tw-bg-grey-500 !tw-text-grey-800"
-                    : "!tw-border-transparent !tw-bg-grey-800 !tw-text-grey-500"), onClick: onClick, children: jsx(FilterIcon, {}) }), numApplied > 0 && (jsx("div", { className: "tw-absolute tw-right-0 tw-top-0 tw-h-squid-m tw-w-squid-xl -tw-translate-y-1/2 tw-translate-x-1/2 tw-rounded-full tw-bg-[#E4FE53] tw-text-center tw-leading-[1] tw-text-grey-200 dark:tw-text-grey-900", children: jsx(CaptionText, { children: numApplied }) }))] }));
+                    : "!tw-border-transparent !tw-bg-grey-800 !tw-text-grey-500"), onClick: onClick, children: jsx(FilterIcon, {}) }), numApplied > 0 && (jsx("div", { className: "tw-absolute tw-right-0 tw-top-0 tw-h-squid-m tw-w-squid-xl -tw-translate-y-1/2 tw-translate-x-1/2 tw-rounded-full tw-bg-volt-700 tw-text-center tw-leading-[1] tw-text-grey-200 dark:tw-text-grey-900", children: jsx(CaptionText, { children: numApplied }) }))] }));
 }
 
 function SettingsButton({ label, isSelected = false, onClick, }) {
@@ -26958,9 +27270,10 @@ function SettingsButton({ label, isSelected = false, onClick, }) {
 }
 
 const IconButton = forwardRef((_a, ref) => {
-    var { icon } = _a, props = __rest$1(_a, ["icon"]);
-    return (jsx("button", Object.assign({}, props, { ref: ref, className: cn("tw-flex tw-h-8 tw-w-8 tw-min-w-8 tw-items-center tw-justify-center tw-rounded-squid-xs hover:tw-bg-material-light-thin", props.disabled ? "tw-text-grey-600" : "tw-text-grey-300", props.className), children: icon })));
+    var { icon, disabled = false } = _a, props = __rest$1(_a, ["icon", "disabled"]);
+    return (jsx("button", Object.assign({}, props, { ref: ref, disabled: disabled, className: cn("tw-flex tw-h-8 tw-w-8 tw-min-w-8 tw-items-center tw-justify-center tw-rounded-squid-xs hover:tw-bg-material-light-thin", disabled ? "tw-text-grey-600" : "tw-text-grey-300", props.className), children: icon })));
 });
+IconButton.displayName = "IconButton";
 
 function AssetsView({ chains, favoriteTokens, popularTokens, userTokens, }) {
     const matchesMobileLg = useMediaQuery(MEDIA_QUERIES.MOBILE_LG.media);
@@ -27104,11 +27417,13 @@ const SearchAddress = ({ type }) => {
                         }, icon: jsx("img", { src: "/assets/images/blast.jpg", className: "tw-rounded-squid-xxs" }) })) : null, jsx(Button$1, { size: "md", variant: "primary", icon: jsx(ArrowRightIcon, {}), disabled: type === "recipientEmpty" })] })] }));
 };
 
-function SwapDetailsView({ isLoading, canToggleBoostMode = true, }) {
+const ROUTING_TOKEN_SUPPORT_ARTICLE = "https://support.squidrouter.com/squid-overview/liquidity-pools/what-is-a-routing-token";
+
+function SwapDetailsView({ isLoading, canToggleBoostMode = true, displayBoostMode = false, }) {
     const [isModalOpen, setIsModalOpen] = useState(true);
     return (jsx(Fragment, { children: jsxs(Modal, { isOpen: isModalOpen, onBackdropClick: () => {
                 setIsModalOpen(false);
-            }, children: [jsxs(ModalContent, { children: [jsx(Settings, { canToggleBoostMode: canToggleBoostMode }), jsxs("ul", { className: "tw-flex tw-flex-col tw-items-start tw-gap-squid-xxs tw-self-stretch tw-py-squid-xs", children: [jsx(PropertyListItem, { isLoading: isLoading, icon: jsx(ClockOutlineIcon, {}), label: "Estimated time to complete", detail: "~20s" }), jsx(PropertyListItem, { isLoading: isLoading, icon: jsx(ArrowBottomTopIcon, {}), label: "Exchange rate", detail: "1 ETH = 4,031.05 USDC" }), jsx(PropertyListItem, { isLoading: isLoading, icon: jsx(ArrowWallDownIcon, {}), label: "Receive minimum", detail: "750.5 USDC" }), jsx(PropertyListItem, { isLoading: isLoading, icon: jsx(GasIcon, {}), label: "Cross-chain gas fees", detail: jsxs(Fragment, { children: [jsx(CaptionText, { children: "0.02534 ETH" }), jsx(CaptionText, { className: "tw-text-grey-500", children: "$9.92" })] }) }), jsx(PropertyListItem, { isLoading: isLoading, icon: jsx(ReorderIcon, {}), label: "Expected gas refund", detail: jsxs(Fragment, { children: [jsx(CaptionText, { children: "-0.06336 ETH" }), jsx(CaptionText, { className: "tw-text-grey-500", children: "-$2.48" })] }) }), jsx(PropertyListItem, { isLoading: isLoading, icon: jsx(ReceiptBillIcon, {}), label: "Total fee", detail: jsxs(Fragment, { children: [jsx(CaptionText, { children: "0.0177 ETH" }), jsx(CaptionText, { className: "tw-text-grey-500", children: "$7.43" })] }) })] }), jsx(InfoBox, { icon: jsx(SnapIcon, {}), title: "Squid\u2019s price commitment", description: "In case of market price fluctuating significantly, your transaction may revert and you will receive axlUSDC on the destination chain instead." })] }), jsx(Button$1, { size: "lg", variant: "secondary", label: "Close", onClick: () => {
+            }, children: [jsxs(ModalContent, { children: [displayBoostMode && (jsx(Settings, { canToggleBoostMode: canToggleBoostMode })), jsxs("ul", { className: "tw-flex tw-flex-col tw-items-start tw-gap-squid-xxs tw-self-stretch tw-py-squid-m", children: [jsx(PropertyListItem, { isLoading: isLoading, icon: jsx(ArrowBottomTopIcon, {}), label: "Exchange rate", detail: "1 ETH = 4,031.05 USDC" }), jsx(PropertyListItem, { isLoading: isLoading, icon: jsx(ArrowWallDownIcon, {}), label: "Receive minimum", detail: "750.5 USDC" }), jsx(PropertyListItem, { isLoading: isLoading, icon: jsx(GasIcon, {}), label: "Cross-chain gas fees", detail: jsxs(Fragment, { children: [jsx(CaptionText, { children: "0.02534 ETH" }), jsx(CaptionText, { className: "tw-text-grey-500", children: "$9.92" })] }) }), jsx(PropertyListItem, { isLoading: isLoading, icon: jsx(ReorderIcon, {}), label: "Expected gas refund", detail: jsxs(Fragment, { children: [jsx(CaptionText, { children: "-0.06336 ETH" }), jsx(CaptionText, { className: "tw-text-grey-500", children: "-$2.48" })] }) }), jsx(PropertyListItem, { isLoading: isLoading, icon: jsx(ReceiptBillIcon, {}), label: "Total fee", detail: jsxs(Fragment, { children: [jsx(CaptionText, { children: "0.0177 ETH" }), jsx(CaptionText, { className: "tw-text-grey-500", children: "$7.43" })] }) })] }), jsx("span", { children: jsx(InfoBox, { icon: jsx(SnapIcon, {}), title: "Squid's price commitment", description: jsx(Fragment, { children: jsxs(CaptionText, { className: "tw-text-grey-500", children: ["In case of market prices fluctuating significantly, your transaction may revert and you will receive one of Squid's routing tokens on the destination chain instead.", " ", jsx("a", { className: "tw-text-grey-300", href: ROUTING_TOKEN_SUPPORT_ARTICLE, target: "_blank", children: "Learn more" })] }) }) }) })] }), jsx(Button$1, { size: "lg", variant: "secondary", label: "Close", onClick: () => {
                         setIsModalOpen(false);
                     } })] }) }));
 }
@@ -62263,27 +62578,7 @@ function WalletsView() {
     return (jsxs(Modal, { maxHeight: true, children: [jsxs(ModalContent, { addGap: true, children: [jsx("div", { className: "tw-px-squid-xs tw-py-squid-xxs", children: jsx(Input, { placeholder: "Select your wallet" }) }), jsxs("ul", { className: "tw-flex tw-flex-col tw-gap-squid-xxs tw-overflow-auto tw-py-squid-xxs", children: [jsx(ListItem, { icon: jsx("span", { className: "tw-text-material-light-average", children: jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-400", detail: "Installed", itemTitle: jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Rainbow" }), mainImageUrl: "/assets/images/avatar.png" }), jsx(ListItem, { icon: jsx("span", { className: "tw-text-material-light-average", children: jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-400", detail: "Installed", itemTitle: jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Metamask" }), mainImageUrl: "/assets/images/punks.png" }), jsx("span", { className: "tw-text-material-light-thin", children: jsx(ModalContentDivider, {}) }), jsx(ListItem, { icon: jsx("span", { className: "tw-text-material-light-average", children: jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-400", subtitle: "Connect with an Injected Wallet", itemTitle: jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Browser Extension" }), mainImageUrl: "/assets/images/avatar.png" }), jsx(ListItem, { icon: jsx("span", { className: "tw-text-material-light-average", children: jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-400", itemTitle: jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Metamask" }), mainImageUrl: "/assets/images/punks.png" }), " ", jsx(ListItem, { icon: jsx("span", { className: "tw-text-material-light-average", children: jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-400", itemTitle: jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Rainbow" }), mainImageUrl: "/assets/images/avatar.png" }), jsx(ListItem, { icon: jsx("span", { className: "tw-text-material-light-average", children: jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-400", itemTitle: jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Metamask" }), mainImageUrl: "/assets/images/punks.png" }), " ", jsx(ListItem, { icon: jsx("span", { className: "tw-text-material-light-average", children: jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-400", itemTitle: jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Rainbow" }), mainImageUrl: "/assets/images/avatar.png" }), jsx(ListItem, { icon: jsx("span", { className: "tw-text-material-light-average", children: jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-400", itemTitle: jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Metamask" }), mainImageUrl: "/assets/images/punks.png" }), " ", jsx(ListItem, { icon: jsx("span", { className: "tw-text-material-light-average", children: jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-400", itemTitle: jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Rainbow" }), mainImageUrl: "/assets/images/avatar.png" }), jsx(ListItem, { icon: jsx("span", { className: "tw-text-material-light-average", children: jsx(ChevronLargeRightIcon, {}) }), className: "tw-bg-transparent tw-text-royal-400", itemTitle: jsx(BodyText, { size: "small", className: "!tw-leading-[13px] tw-text-grey-300", children: "Metamask" }), mainImageUrl: "/assets/images/punks.png" })] })] }), jsx(Button$1, { size: "lg", variant: "secondary", label: "Cancel" })] }));
 }
 
-// list of the theme variables that need to be replaced
-// from the user readable theme config
-// to the internal theme config
-const themeKeysToReplace = [
-    {
-        userKey: "content",
-        internalKey: "grey",
-    },
-    {
-        userKey: "accent",
-        internalKey: "royal",
-    },
-    {
-        userKey: "status-warning",
-        internalKey: "status-partial",
-    },
-    {
-        userKey: "highlight",
-        internalKey: "volt",
-    },
-];
+/* eslint-disable @typescript-eslint/prefer-reduce-type-parameter */
 /**
  * Parses the user readable config to css variables
  * Also maps the public theme variables to the internal theme variables
@@ -62305,22 +62600,12 @@ const themeKeysToReplace = [
  */
 const parseSquidTheme = (userTheme) => {
     var _a, _b;
-    if (!userTheme)
+    if (userTheme == null)
         return undefined;
-    let squidTheme = Object.entries(userTheme).reduce((internalKeys, [userKey, userValue]) => {
-        // content-* -> grey-*
-        // accent-* -> royal-*
-        const keyToReplace = themeKeysToReplace.find((k) => userKey.includes(k.userKey));
-        if (keyToReplace) {
-            const newKey = userKey.replace(keyToReplace.userKey, keyToReplace.internalKey);
-            internalKeys[newKey] = userValue;
-        }
-        else {
-            internalKeys[userKey] = userValue;
-        }
-        return internalKeys;
-    }, {});
-    // add material-{light,dark}-{thin,average,thick} colors to the squid theme object
+    console.log({
+        userTheme,
+    });
+    //   add material-{light,dark}-{thin,average,thick} colors to the squid theme object
     // using the following formula:
     // material-light-thin -> grey-100 + 10% opacity
     // material-light-average -> grey-100 + 33% opacity
@@ -62329,50 +62614,38 @@ const parseSquidTheme = (userTheme) => {
     // material-dark-average -> grey-900 + 33% opacity
     // material-dark-thick -> grey-900 + 66% opacity
     const materialVariants = {
-        "material-light-thin": getHexColorFromOpacityPercentage(squidTheme["grey-100"], 0.1),
-        "material-light-average": getHexColorFromOpacityPercentage(squidTheme["grey-100"], 0.33),
-        "material-light-thick": getHexColorFromOpacityPercentage(squidTheme["grey-100"], 0.66),
-        "material-dark-thin": getHexColorFromOpacityPercentage(squidTheme["grey-900"], 0.1),
-        "material-dark-average": getHexColorFromOpacityPercentage(squidTheme["grey-900"], 0.33),
-        "material-dark-thick": getHexColorFromOpacityPercentage(squidTheme["grey-900"], 0.66),
+        "material-light-thin": getHexColorFromOpacityPercentage(userTheme.color["grey-100"], 0.1),
+        "material-light-average": getHexColorFromOpacityPercentage(userTheme.color["grey-100"], 0.33),
+        "material-light-thick": getHexColorFromOpacityPercentage(userTheme.color["grey-100"], 0.66),
+        "material-dark-thin": getHexColorFromOpacityPercentage(userTheme.color["grey-900"], 0.1),
+        "material-dark-average": getHexColorFromOpacityPercentage(userTheme.color["grey-900"], 0.33),
+        "material-dark-thick": getHexColorFromOpacityPercentage(userTheme.color["grey-900"], 0.66),
     };
-    squidTheme = Object.assign(Object.assign({}, squidTheme), materialVariants);
-    const styleKeys = Object.keys(themeTypesKeys);
-    const parsed = styleKeys.map((sk) => {
-        const themeItem = themeTypesKeys[sk];
-        let userValue = squidTheme[sk];
-        return {
-            [themeItem.cssVariable]: userValue,
-        };
-    });
-    // adds a variant with 0.05 opacity for each color
-    // will result in variables like this:
-    // var(--squid-theme-grey-100-005) --> grey-100 with 0.05 opacity
-    // styleKeys.forEach((sk) => {
-    //   const themeItem = themeTypesKeys[sk]
-    //   const valueWith005Opacity = getHexColorFromOpacityPercentage(
-    //     style[sk], // i.e "#ffffff"
-    //     0.05,
-    //   )
-    //   // { "--squid-theme-grey-100-005": "#ffffff80" }
-    //   parsed.push({
-    //     [`${themeItem.cssVariable}-005`]: valueWith005Opacity,
-    //   })
-    // })
-    parsed.push({
-        [themeTypesKeys["grey-100-005"].cssVariable]: getHexColorFromOpacityPercentage(squidTheme["grey-100"], 0.05),
-    });
-    // color representing the blend of material-light and grey-900
-    parsed.push({
-        [themeTypesKeys["material-light-blend-grey-900"].cssVariable]: (_a = blendColors(squidTheme["material-light-thin"], squidTheme["grey-900"])) !== null && _a !== void 0 ? _a : "",
-    });
-    // color representing the blend of material-light and grey-300
-    parsed.push({
-        [themeTypesKeys["material-light-blend-grey-800"].cssVariable]: (_b = blendColors(squidTheme["material-light-thin"], squidTheme["grey-800"])) !== null && _b !== void 0 ? _b : "",
-    });
-    return parsed.reduce((a, v) => {
-        const key = Object.keys(v)[0];
-        return Object.assign(Object.assign({}, a), { [key]: v[key] });
+    const opacityVariants = {
+        // opacity variants
+        "grey-100-005": getHexColorFromOpacityPercentage(userTheme.color["grey-100"], 0.05),
+        // color representing the blend of material-light and grey-900
+        "material-light-blend-grey-900": (_a = blendColors(materialVariants["material-light-thin"], userTheme.color["grey-900"])) !== null && _a !== void 0 ? _a : "",
+        // color representing the blend of material-light and grey-300
+        "material-light-blend-grey-800": (_b = blendColors(materialVariants["material-light-thin"], userTheme.color["grey-800"])) !== null && _b !== void 0 ? _b : "",
+    };
+    // Adds the internal colors to the user theme
+    const internalTheme = Object.assign(Object.assign({}, userTheme), { color: Object.assign(Object.assign(Object.assign({}, userTheme.color), materialVariants), opacityVariants) });
+    // return flatten(
+    //   {
+    //     ...userTheme,
+    //     colors: {
+    //       ...userTheme,
+    //       ...materialVariants,
+    //       ...opacityVariants,
+    //     },
+    //   },
+    //   {
+    //     prefix: SQUID_THEME_CSS_VARIABLE_PREFIX,
+    //   },
+    // );
+    return flatten(internalTheme, {
+        prefix: THEME_CSS_VARIABLE_PREFIX,
     });
 };
 /**
@@ -62391,20 +62664,21 @@ function getHexColorFromOpacityPercentage(color, opacity) {
             .padStart(2, "0")).toUpperCase();
 }
 function hexToRgb(hex) {
+    var _a;
     // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
-    let shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])([a-f\d])?$/i;
-    hex = hex.replace(shorthandRegex, function (m, r, g, b, a) {
-        return r + r + g + g + b + b + (a ? a + a : "");
+    const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])([a-f\d])?$/i;
+    const cleanHex = hex.replace(shorthandRegex, function (m, r, g, b, a) {
+        return r + r + g + g + b + b + (a != null ? a + a : "");
     });
-    let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(hex);
-    return result
-        ? {
-            r: parseInt(result[1], 16),
-            g: parseInt(result[2], 16),
-            b: parseInt(result[3], 16),
-            a: result[4] ? parseInt(result[4], 16) / 255 : 1,
-        }
-        : null;
+    const [, r, g, b, a] = ((_a = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(cleanHex)) !== null && _a !== void 0 ? _a : []);
+    if (r == null || g == null || b == null)
+        return null;
+    return {
+        r: parseInt(r, 16),
+        g: parseInt(g, 16),
+        b: parseInt(b, 16),
+        a: a != null ? parseInt(a, 16) / 255 : 1,
+    };
 }
 function rgbToHex(r, g, b) {
     return ("#" +
@@ -62421,19 +62695,20 @@ function rgbToHex(r, g, b) {
 // let resultingColor = blendColors(foregroundColor, bgColor)
 // console.log(resultingColor) // Output: ~#2f3033
 function blendColors(foreground, background) {
-    let fg = hexToRgb(foreground);
-    let bg = hexToRgb(background);
-    if (!fg || !bg)
+    const fg = hexToRgb(foreground);
+    const bg = hexToRgb(background);
+    if (fg == null || bg == null)
         return null;
-    let r = Math.round(fg.r * fg.a + bg.r * (1 - fg.a));
-    let g = Math.round(fg.g * fg.a + bg.g * (1 - fg.a));
-    let b = Math.round(fg.b * fg.a + bg.b * (1 - fg.a));
+    const r = Math.round(fg.r * fg.a + bg.r * (1 - fg.a));
+    const g = Math.round(fg.g * fg.a + bg.g * (1 - fg.a));
+    const b = Math.round(fg.b * fg.a + bg.b * (1 - fg.a));
     return rgbToHex(r, g, b);
 }
 
-function SquidConfigProvider({ theme = lightTheme, children, themeType = "light", }) {
+function ThemeProvider(_a) {
+    var { theme = lightTheme, children, themeType = "light" } = _a, props = __rest$1(_a, ["theme", "children", "themeType"]);
     const parsedStyle = parseSquidTheme(theme);
-    return (jsx("div", { style: parsedStyle, "data-squid-theme-type": themeType, className: "tw-h-d-screen tw-group tw-relative tw-flex tw-font-geist mobile-lg:tw-h-auto", children: children }));
+    return (jsx("div", Object.assign({}, props, { style: Object.assign(Object.assign({}, props.style), parsedStyle), "data-squid-theme-type": themeType, className: cn("tw-font-squid-main tw-group tw-relative tw-flex tw-h-d-screen mobile-lg:tw-h-auto", props.className), children: children })));
 }
 
-export { ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, ActionStatusRow, ActionWrapper, AddressButton, AnimationWrapper, AppContainer, Approve, ApproveAction, ArrowBottomTopIcon, ArrowButton, ArrowCornerDownRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowSplit, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, AssetsView, 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, ChainLink, Checkmark1Icon, Checkmark2Icon, ChevronArrowIcon, ChevronDownSmallIcon, ChevronGrabberVerticalIcon, ChevronLargeDownIcon, ChevronLargeRightIcon, ChevronRightSmallIcon, ChevronTopIcon, ChevronTopSmallIcon, Chip, CircleMinusIcon, CirclePlusIcon, CircleX, CircleXFilledIcon, ClockOutlineIcon, ClockSolidIcon, CoinsAddIcon, CoinsIcon, Collapse, CollapsibleMenu, CollectionIcon, ColorPaletteIcon, CompassRoundOutlinedIcon, CompassRoundSolidIcon, ConsoleIcon, Copy, CrossAnimatedIcon, DashboardFast, DescriptionBlocks, DetailsToolbar, DiscordIcon, DockIconAnalytics, DockIconCheckout, DockIconHelp, DockIconProfile, DockIconScan, DockIconSwap, DockSwapIcon, DollarOutlinedIcon, DollarSolidIcon, DotGrid1x3HorizontalIcon, DropdownMenu, DropdownMenuItem, DropdownMenuTitle, EmojiMeh, EmojiSadIcon, EmptyHeartIcon, ErrorMessage, EthereumIcon, ExplosionIcon, EyeOpenIcon, FeeButton, FeesAction, FeesLines, FeesTotal, FilledHeartIcon, FilterAscendingIcon, FilterButton, FilterIcon, FilterTimelineIcon, GasIcon, GhostIcon, GithubIcon, HashLink, HeadingText, HeartSmallIcon, HelpIcon, HistoryItem, HomeIcon, IconButton, IconLabel, Image$1 as Image, ImageIcon, ImageSparkle, IncompleteAction, InfinityIcon, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, LightningIcon, LimitIcon, LinkIcon, List, ListItem, ListItemActionsButton, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MainView, MaxIcon, Menu, MenuItem, MenuSwapIcon, MirrorIcon, Modal, ModalContent, ModalContentDivider, MoonIcon, NavigationBar, NotAllowedIcon, NumericInput, PathSquareIcon, PercentIcon, PieChartIcon, PipeSeparator, PlusIcon, PoopIcon, PowerIcon, 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, SmileIcon, SnapIcon, SortIcon, SparkleIcon, SparklesIcon, SquareArrowCenter, SquareArrowTopLeftIcon, SquareArrowTopRight2Icon, SquidConfigProvider, SquidLogo, StakeAction, StartAction, StocksIcon, SuccessAction, SunIcon, SunriseIcon, SwapAction, SwapConfiguration, SwapDetailsView, SwapErrorIcon, SwapHeader, SwapIcon, SwapInputsIcon, SwapProgressView, SwapProgressViewHeader, SwapProperties, SwapStepItem, SwapStepSeparator, SwapStepsCollapsed, SwapSuccessIcon, SwapTransactionView, SwapWarningIcon, Switch, TagIcon, TagIconFilled, TextSkeleton, ThumbsUp, Tick, TimeFliesIcon, Timeline, Timestamp, Toast, TokenPair, Tooltip, TradingViewStepsIcon, TransactionAction, TransactionFilters, TransactionHeader, TransactionHeaderLayout, TransactionItem, TransactionProperties, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, Transfer, TranslateIcon, TriangleExclamation, UsdAmount, WalletFilledIcon, WalletIcon, WalletLink, WalletsView, WrapAction, XSocial, baseTailwindConfig, cn, darkTheme, lightTheme, linkActionTimelineProps, statusTextClassMap, useCollapsibleMenu, useDropdownMenu, useMediaQuery, useOnResize, useRect, useTimer, useVersion };
+export { ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, ActionStatusRow, ActionWrapper, AddressButton, AnimationWrapper, 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, 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, FeeButton, FeesAction, FeesLines, FeesTotal, FileDownloadIcon, FilledHeartIcon, FilterAscendingIcon, FilterButton, FilterIcon, FilterTimelineIcon, GasIcon, GhostIcon, GithubIcon, HashLink, HeadingText, HeartSmallIcon, HelpIcon, HistoryItem, HomeIcon, IconButton, IconLabel, Image$1 as Image, ImageIcon, ImageSparkle, IncompleteAction, InfinityIcon, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, LaptopIcon, LightningIcon, LimitIcon, LinkIcon, List, ListItem, ListItemActionsButton, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MainView, MaxIcon, Menu, MenuItem, MenuSwapIcon, MirrorIcon, Modal, ModalContent, ModalContentDivider, MoonIcon, NavigationBar, NewspaperIcon, NotAllowedIcon, NumericInput, PathSquareIcon, PercentIcon, PhoneIcon, PieChartIcon, PipeSeparator, PlusIcon, PoopIcon, PowerIcon, 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, SmileIcon, SnapIcon, SortIcon, SparkleIcon, SparklesIcon, SquareArrowCenter, SquareArrowTopLeftIcon, SquareArrowTopRight2Icon, SquidLogo, StakeAction, 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, TokenPair, Tooltip, TradingViewStepsIcon, TransactionAction, TransactionFilters, TransactionHeader, TransactionHeaderLayout, TransactionItem, TransactionProperties, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, Transfer, TranslateIcon, TriangleExclamation, UsdAmount, WalletFilledIcon, WalletIcon, WalletLink, WalletsView, WrapAction, XSocial, baseTailwindConfig, cn, darkTheme, defaultTheme, lightTheme, linkActionTimelineProps, statusTextClassMap, useCollapsibleMenu, useDropdownMenu, useMediaQuery, useOnResize, useRect, useTimer, useUserTheme, useVersion };