@0xsquid/ui 0.27.2-beta.0 → 0.27.3-alpha.0

package/README.md

@@ -17,16 +17,16 @@ Import styles in your entry point:
 import "@0xsquid/ui/dist/index.css";
 ```
 
-Wrap your app with our theme provider `<ThemeProvider />` and specify your theme:
+Wrap your app with our theme provider `<SquidConfigProvider />` and specify your theme:
 
 ```jsx
-import { ThemeProvider, Button } from "@0xsquid/ui";
+import { SquidConfigProvider, Button } from "@0xsquid/ui";
 
 function App() {
   return (
-    <ThemeProvider theme={yourTheme}>
+    <SquidConfigProvider theme={yourTheme}>
       <Button label="Hello world" variant="primary" size="md" />
-    </ThemeProvider>
+    </SquidConfigProvider>
   );
 }
 ```

package/dist/cjs/index.js

@@ -2,6 +2,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React$1 = require('react');
+var reactHooks = require('@0xsquid/react-hooks');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -6595,59 +6596,6 @@ var debounce_1 = debounce;
 
 var debounce$1 = /*@__PURE__*/getDefaultExportFromCjs(debounce_1);
 
-/**
- * Convert token amount to USD
- * @param {string|number} tokenAmount - The amount of tokens
- * @param {string|number} tokenPrice - The price of one token in USD
- * @returns {BigNumber} - The equivalent amount in USD
- */
-function convertTokenAmountToUSD(tokenAmount, tokenPrice, maxDecimals = 2) {
-    if (!tokenAmount || !tokenPrice)
-        return "";
-    const amount = new BigNumber(tokenAmount);
-    const price = new BigNumber(tokenPrice);
-    return amount.multipliedBy(price).decimalPlaces(maxDecimals).toString();
-}
-/**
- * Convert USD to token amount
- * @param {string|number} usdAmount - The amount in USD
- * @param {string|number} tokenPrice - The price of one token in USD
- * @param {number} maxDecimals - The maximum number of decimals
- * @returns {BigNumber} - The equivalent amount of tokens
- */
-function convertUSDToTokenAmount(usdAmount, tokenPrice, maxDecimals) {
-    if (!usdAmount || !tokenPrice || !maxDecimals)
-        return "0";
-    const amount = new BigNumber(usdAmount);
-    const price = new BigNumber(tokenPrice);
-    return amount.dividedBy(price).decimalPlaces(maxDecimals).toString();
-}
-const INTL_NUMBER_FORMATTER = new Intl.NumberFormat("en-US", {
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 5,
-});
-/**
- * Formats a number to the en-US number format
- *
- * @param amount - The number to format
- * @returns The formatted string
- */
-function formatAmount(amount) {
-    return INTL_NUMBER_FORMATTER.format(amount);
-}
-function trimExtraDecimals(value, maxDecimals) {
-    var _a;
-    const split = value.split(".");
-    if (split.length > 1) {
-        const decimals = (_a = split[1]) !== null && _a !== void 0 ? _a : "";
-        if (maxDecimals && decimals.length > maxDecimals) {
-            const newValue = `${split[0]}.${decimals.slice(0, maxDecimals)}`;
-            return newValue;
-        }
-    }
-    return value;
-}
-
 function SwapInputsIcon() {
     return (jsxRuntime.jsxs("svg", { width: "20", height: "21", viewBox: "0 0 20 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("g", { clipPath: "url(#clip0_40_7936)", children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M20 10.5C20 16.0228 15.5228 20.5 10 20.5C4.47715 20.5 0 16.0228 0 10.5C0 4.97715 4.47715 0.5 10 0.5C15.5228 0.5 20 4.97715 20 10.5ZM8.38268 4.57612C8.75636 4.7309 9 5.09554 9 5.5V15.5C9 16.0523 8.55228 16.5 8 16.5C7.44772 16.5 7 16.0523 7 15.5V7.91421L5.70711 9.20711C5.31658 9.59763 4.68342 9.59763 4.29289 9.20711C3.90237 8.81658 3.90237 8.18342 4.29289 7.79289L7.29289 4.79289C7.57889 4.5069 8.00901 4.42134 8.38268 4.57612ZM11 15.5C11 15.9045 11.2436 16.2691 11.6173 16.4239C11.991 16.5787 12.4211 16.4931 12.7071 16.2071L15.7071 13.2071C16.0976 12.8166 16.0976 12.1834 15.7071 11.7929C15.3166 11.4024 14.6834 11.4024 14.2929 11.7929L13 13.0858V5.5C13 4.94771 12.5523 4.5 12 4.5C11.4477 4.5 11 4.94771 11 5.5V15.5Z", fill: "currentColor" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_40_7936", children: jsxRuntime.jsx("rect", { width: "20", height: "20", fill: "white", transform: "translate(0 0.5)" }) }) })] }));
 }
@@ -17227,9 +17175,6 @@ function SunIcon({ size = "24", className, }) {
 function MoonIcon({ size = "20", className, }) {
     return (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsxRuntime.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 (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: jsxRuntime.jsx("path", { d: "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" }) }));
-}
 
 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";
@@ -17285,27 +17230,6 @@ function ImageIcon({ size = "20", className, }) {
 function FilterTimelineIcon({ size = "20", className, }) {
     return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: className, children: [jsxRuntime.jsx("path", { 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" }), jsxRuntime.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" }), jsxRuntime.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" }), jsxRuntime.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 PhoneIcon({ size = "24", className, }) {
-    return (jsxRuntime.jsx("svg", { className: className, xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 25 24", fill: "none", children: jsxRuntime.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 (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 25 24", fill: "none", className: className, children: [jsxRuntime.jsx("path", { d: "M4.5 6C4.5 4.89543 5.39543 4 6.5 4H18.5C19.6046 4 20.5 4.89543 20.5 6V15C20.5 15.5523 20.0523 16 19.5 16H5.5C4.94772 16 4.5 15.5523 4.5 15V6Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "square", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M2.5 16H22.5V18C22.5 19.1046 21.6046 20 20.5 20H4.5C3.39543 20 2.5 19.1046 2.5 18V16Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "square", strokeLinejoin: "round" })] }));
-}
-function CopyIcon({ size = "20", className, }) {
-    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 21 20", fill: "none", className: className, children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.16663 6.66666V3.54166C7.16663 2.50612 8.00609 1.66666 9.04163 1.66666H16.9583C17.9938 1.66666 18.8333 2.50612 18.8333 3.54166V11.4583C18.8333 12.4939 17.9938 13.3333 16.9583 13.3333H13.8333V16.4583C13.8333 17.4939 12.9938 18.3333 11.9583 18.3333H4.04163C3.00609 18.3333 2.16663 17.4939 2.16663 16.4583V8.54166C2.16663 7.50612 3.00609 6.66666 4.04163 6.66666H7.16663ZM9.04163 13.3333C8.00609 13.3333 7.16663 12.4939 7.16663 11.4583V8.33332H4.04163C3.92657 8.33332 3.83329 8.4266 3.83329 8.54166V16.4583C3.83329 16.5734 3.92657 16.6667 4.04163 16.6667H11.9583C12.0734 16.6667 12.1666 16.5734 12.1666 16.4583V13.3333H9.04163Z", fill: "currentColor" }) }));
-}
-function FileDownloadIcon({ size = "20", className, }) {
-    return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 21 20", fill: "none", children: [jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.33337 1.66666H10.5V5.83332C10.5 7.21404 11.6193 8.33332 13 8.33332H17.1667V15.8333C17.1667 17.214 16.0474 18.3333 14.6667 18.3333H6.33337C4.95266 18.3333 3.83337 17.214 3.83337 15.8333V4.16666C3.83337 2.78594 4.95266 1.66666 6.33337 1.66666ZM13.1726 14.3392L11.0893 16.4226C10.7639 16.748 10.2362 16.748 9.91079 16.4226L7.82745 14.3392C7.50201 14.0138 7.50201 13.4862 7.82745 13.1607C8.15289 12.8353 8.68053 12.8353 9.00596 13.1607L9.66671 13.8215V10.8333C9.66671 10.3731 10.0398 9.99999 10.5 9.99999C10.9603 9.99999 11.3334 10.3731 11.3334 10.8333V13.8215L11.9941 13.1607C12.3196 12.8353 12.8472 12.8353 13.1726 13.1607C13.4981 13.4862 13.4981 14.0138 13.1726 14.3392Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M12.1667 2.15481L16.6786 6.66666H13C12.5398 6.66666 12.1667 6.29356 12.1667 5.83332V2.15481Z", fill: "currentColor" })] }));
-}
-function CodeSolidSquareIcon({ size = "24", className, }) {
-    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 25 24", fill: "none", className: className, children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.5 6C3.5 4.34315 4.84315 3 6.5 3H18.5C20.1569 3 21.5 4.34315 21.5 6V18C21.5 19.6569 20.1569 21 18.5 21H6.5C4.84315 21 3.5 19.6569 3.5 18V6ZM11.2071 8.79289C11.5976 9.18342 11.5976 9.81658 11.2071 10.2071L9.41421 12L11.2071 13.7929C11.5976 14.1834 11.5976 14.8166 11.2071 15.2071C10.8166 15.5976 10.1834 15.5976 9.79289 15.2071L8 13.4142C7.21895 12.6332 7.21895 11.3668 8 10.5858L9.79289 8.79289C10.1834 8.40237 10.8166 8.40237 11.2071 8.79289ZM15.2071 8.79289C14.8166 8.40237 14.1834 8.40237 13.7929 8.79289C13.4024 9.18342 13.4024 9.81658 13.7929 10.2071L15.5858 12L13.7929 13.7929C13.4024 14.1834 13.4024 14.8166 13.7929 15.2071C14.1834 15.5976 14.8166 15.5976 15.2071 15.2071L17 13.4142C17.781 12.6332 17.781 11.3668 17 10.5858L15.2071 8.79289Z", fill: "currentColor" }) }));
-}
-function CodeBracketsIcon({ size = "20", className, }) {
-    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: className, children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.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 (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 22 22", fill: "none", className: className, children: jsxRuntime.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"]);
@@ -17753,6 +17677,9 @@ const baseTailwindConfig = {
                 ".highlight-adjacent:has(*:hover) .hide-on-parent-hover": {
                     opacity: "0",
                 },
+                ".h-d-screen": {
+                    height: "100dvh",
+                },
             });
         }),
     ],
@@ -17890,9 +17817,8 @@ function NavigationBar(_a) {
                     : "tw-flex"), children: jsxRuntime.jsx(HeadingText, { size: "small", children: title }) })) : null] })));
 }
 
-function PipeSeparator(_a) {
-    var { className } = _a, props = __rest$1(_a, ["className"]);
-    return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn("tw-h-[0.8em] tw-w-[2px] tw-rounded-full tw-bg-[currentColor]", className) })));
+function PipeSeparator(props) {
+    return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn("tw-h-[0.8em] tw-w-[2px] tw-rounded-full tw-bg-[currentColor]", props.className) })));
 }
 
 function CollapsibleMenu({ children, menuRef, isOpen, transitionDuration, size, className, }) {
@@ -18725,69 +18651,6 @@ const useTimer = ({ immediateStart = true, }) => {
     return { timer, stopTimer, startTimer };
 };
 
-exports.ThemePreference = void 0;
-(function (ThemePreference) {
-    ThemePreference["LIGHT"] = "light";
-    ThemePreference["DARK"] = "dark";
-    ThemePreference["SYSTEM"] = "system";
-})(exports.ThemePreference || (exports.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] = React$1.useState(getInitialTheme);
-    const [themeType, setThemeType] = React$1.useState(getEffectiveTheme(themePreference));
-    React$1.useEffect(() => {
-        const handleThemeChange = (e) => {
-            setThemePreference(e.detail);
-        };
-        window.addEventListener(THEME_CHANGE_EVENT, handleThemeChange);
-        return () => {
-            window.removeEventListener(THEME_CHANGE_EVENT, handleThemeChange);
-        };
-    }, []);
-    React$1.useEffect(() => {
-        const mediaQuery = window.matchMedia(THEME_MEDIA_QUERY);
-        const handleChange = () => {
-            if (themePreference === exports.ThemePreference.SYSTEM) {
-                setThemeType(mediaQuery.matches ? "light" : "dark");
-            }
-        };
-        mediaQuery.addEventListener("change", handleChange);
-        handleChange();
-        return () => {
-            mediaQuery.removeEventListener("change", handleChange);
-        };
-    }, [themePreference]);
-    React$1.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 = React$1.useMemo(() => themeType === "dark", [themeType]);
-    return {
-        themePreference,
-        themeType,
-        theme: isDarkMode ? darkTheme : lightTheme,
-        setThemeManually,
-        isDarkMode,
-    };
-}
-function getInitialTheme() {
-    var _a;
-    if (typeof window === "undefined")
-        return exports.ThemePreference.SYSTEM;
-    return ((_a = localStorage.getItem(THEME_STORAGE_KEY)) !== null && _a !== void 0 ? _a : exports.ThemePreference.SYSTEM);
-}
-function getEffectiveTheme(themeType) {
-    if (themeType !== exports.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"
@@ -18880,7 +18743,7 @@ function ListItem(_a) {
     });
     return (jsxRuntime.jsxs("li", Object.assign({}, containerProps, { ref: itemRef, className: cn("tw-relative tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300 tw-highlight-adjacent", listItemSizeMap[size], extraPadding && "tw-px-squid-xs", compactOnMobile
             ? `${collapsedListItemClassMap[size]} mobile-lg:tw-w-full`
-            : "tw-w-full", className), children: [jsxRuntime.jsxs(ItemTag, Object.assign({}, itemProps, { className: cn("tw-group/list-item tw-peer/list-item tw-relative tw-flex tw-w-full tw-max-w-full tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs", (isSelected || isDropdownOpen) && "tw-bg-material-light-thin", isInteractive && "hover:tw-bg-material-light-thin"), children: [size === "large" ? (jsxRuntime.jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, placeholderImageUrl: placeholderImageUrl, size: "md", rounded: rounded })) })) : (jsxRuntime.jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxRuntime.jsxs("div", { className: cn("tw-flex tw-h-[40px] tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xxs", 
+            : "tw-w-full", className), children: [jsxRuntime.jsxs(ItemTag, Object.assign({}, itemProps, { className: cn("tw-group/list-item tw-peer/list-item tw-relative tw-flex tw-w-full tw-max-w-full tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs", (isSelected || isDropdownOpen) && "tw-bg-material-light-thin", isInteractive && "hover:tw-bg-material-light-thin"), children: [size === "large" ? (jsxRuntime.jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon || (jsxRuntime.jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, placeholderImageUrl: placeholderImageUrl, size: "md", rounded: rounded })) })) : (jsxRuntime.jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon || (jsxRuntime.jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxRuntime.jsxs("div", { className: cn("tw-flex tw-h-[40px] tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xxs", 
                         // 'large' variant has extra padding
                         size === "large" ? "tw-w-[56%] tw-pl-squid-xxs" : "tw-w-[67%]"), children: [typeof itemTitle === "string" ? (jsxRuntime.jsx(BodyText, { size: "small", className: cn("tw-max-w-full tw-truncate", subtitle && "tw-h-[17px] !tw-leading-[17px]", compactOnMobile ? "tw-hidden mobile-lg:tw-block" : "tw-block"), children: itemTitle })) : (itemTitle), size === "large" &&
                                 ((loading === null || loading === void 0 ? void 0 : loading.subtitle) ? (loadingComponent()) : subtitle ? (jsxRuntime.jsxs(CaptionText, { className: subtitleClassName, children: [subtitleOnHover && (jsxRuntime.jsx(CaptionText, { className: cn(subtitleClassName, "tw-hidden group-hover/list-item:tw-block"), children: subtitleOnHover })), subtitle] })) : null)] }), showDetail && (jsxRuntime.jsxs(DetailTag, Object.assign({}, detailProps, { className: cn("tw-flex tw-w-fit tw-items-center tw-justify-center tw-rounded-squid-xs", size === "large" ? "tw-h-squid-xl" : "tw-h-squid-l", showDetailOnHoverOnly
@@ -18888,10 +18751,9 @@ function ListItem(_a) {
                             : "tw-flex", isDetailInteractive && "hover:tw-bg-material-light-thin", detailButtonClassName), children: [!!detail && (jsxRuntime.jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })), icon ? (jsxRuntime.jsx("span", { className: "tw-flex tw-items-center tw-justify-center tw-px-[3px] tw-py-2", children: icon })) : null] })))] })), !!dropdownMenuContent && (jsxRuntime.jsx(ListItemActionsButton, { ref: openDropdownButtonRef, onClick: openDropdown, isActive: isDropdownOpen, className: "peer-hover/list-item:tw-opacity-100" })), isDropdownOpen && !!dropdownMenuContent ? (jsxRuntime.jsx(DropdownMenu, { menuRef: menuRef, isHidden: !dropdownStyles, className: cn(!!dropdownStyles &&
                     dropdownPositionClassMap$1[dropdownStyles.position]), dropdownRef: dropdownRef, children: dropdownMenuContent })) : null] })));
 }
-const ListItemActionsButton = React$1.forwardRef((props, ref) => {
-    return (jsxRuntime.jsx("button", Object.assign({}, props, { ref: ref, className: cn("tw-peer tw-absolute tw-right-squid-s tw-top-squid-xxs tw-flex tw-h-squid-xl tw-w-squid-xl tw-items-center tw-justify-center tw-rounded-squid-xs tw-p-2 tw-text-grey-300 hover:tw-bg-material-light-thin hover:tw-opacity-100 focus-visible:tw-opacity-100", props.isActive
-            ? "tw-bg-material-light-thin tw-opacity-100"
-            : "tw-opacity-0", props.className), children: jsxRuntime.jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })));
+const ListItemActionsButton = React$1.forwardRef((_a, ref) => {
+    var { isActive, className } = _a, props = __rest$1(_a, ["isActive", "className"]);
+    return (jsxRuntime.jsx("button", Object.assign({}, props, { ref: ref, className: cn("tw-peer tw-absolute tw-right-squid-s tw-top-squid-xxs tw-flex tw-h-squid-xl tw-w-squid-xl tw-items-center tw-justify-center tw-rounded-squid-xs tw-p-2 tw-text-grey-300 hover:tw-bg-material-light-thin hover:tw-opacity-100 focus-visible:tw-opacity-100", isActive ? "tw-bg-material-light-thin tw-opacity-100" : "tw-opacity-0", className), children: jsxRuntime.jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })));
 });
 
 const dropdownPositionClassMap = {
@@ -18939,7 +18801,7 @@ function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount,
             onClick,
         }
         : {};
-    return (jsxRuntime.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: [jsxRuntime.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: [jsxRuntime.jsxs("div", { className: "tw-relative tw-h-10 tw-w-[60px]", children: [!!statusBadge[status].badge && (jsxRuntime.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 })), jsxRuntime.jsx("img", { src: firstImageUrl, className: "tw-absolute tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" }), jsxRuntime.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" })] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-h-10 tw-flex-1 tw-flex-col tw-self-stretch", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-justify-between tw-text-grey-500", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center", children: [jsxRuntime.jsx(CaptionText, { children: fromLabel }), jsxRuntime.jsx("span", { className: "tw-text-grey-600", children: jsxRuntime.jsx(ChevronRightSmallIcon, {}) }), jsxRuntime.jsx(CaptionText, { children: toLabel })] }), jsxRuntime.jsx("div", { className: cn("tw-flex tw-items-center tw-justify-center tw-gap-squid-xxs tw-hide-on-parent-hover", !!dropdownMenuContent &&
+    return (jsxRuntime.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: [jsxRuntime.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: [jsxRuntime.jsxs("div", { className: "tw-relative tw-h-10 tw-w-[60px]", children: [!!statusBadge[status].badge && (jsxRuntime.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 })), jsxRuntime.jsx("img", { src: firstImageUrl, className: "tw-absolute tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" }), jsxRuntime.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" })] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-h-10 tw-flex-1 tw-flex-col tw-self-stretch", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-justify-between tw-text-grey-500", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center", children: [jsxRuntime.jsx(CaptionText, { children: fromLabel }), jsxRuntime.jsx("span", { className: "tw-text-grey-600", children: jsxRuntime.jsx(ChevronRightSmallIcon, {}) }), jsxRuntime.jsx(CaptionText, { children: toLabel })] }), jsxRuntime.jsx("div", { className: cn("tw-hide-on-parent-hover tw-flex tw-items-center tw-justify-center tw-gap-squid-xxs", !!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 })] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-gap-squid-xxs tw-text-grey-300", children: [jsxRuntime.jsx(BodyText, { size: "small", children: fromAmount }), jsxRuntime.jsx("span", { className: "tw-text-grey-600", children: jsxRuntime.jsx(ChevronLargeRightIcon, {}) }), jsxRuntime.jsx(BodyText, { size: "small", children: toAmount })] })] })] })), !!dropdownMenuContent && (jsxRuntime.jsx(ListItemActionsButton, { ref: openDropdownButtonRef, onClick: openDropdown, isActive: isDropdownOpen, className: "peer-hover/history-item:tw-opacity-100" })), isDropdownOpen && !!dropdownMenuContent ? (jsxRuntime.jsx(DropdownMenu, { menuRef: menuRef, isHidden: !dropdownStyles, className: cn(!!dropdownStyles &&
                     dropdownPositionClassMap[dropdownStyles.position]), dropdownRef: dropdownRef, children: dropdownMenuContent })) : null] }));
 }
@@ -19307,6 +19169,7 @@ const SwapStepsCollapsed = React$1.forwardRef((props, ref) => {
                                         // show separator for all steps except the first one
                                         showStepSeparator: index > 0, link: step.link, status: newStepIndex < index ? "pending" : step.status }, index))) }), jsxRuntime.jsx("footer", { className: "tw-flex tw-max-h-[55px] tw-min-h-[55px] tw-w-full tw-justify-center tw-gap-squid-xs tw-self-stretch tw-px-squid-s tw-pb-squid-s", children: jsxRuntime.jsx(Button$1, { size: "md", variant: "secondary", onClick: footerButton === null || footerButton === void 0 ? void 0 : footerButton.onClick, link: footerButton === null || footerButton === void 0 ? void 0 : footerButton.link, label: footerButton === null || footerButton === void 0 ? void 0 : footerButton.label, className: "tw-w-full", containerClassName: "tw-w-full" }) })] }) })] }) }) }));
 });
+SwapStepsCollapsed.displayName = "SwapStepsCollapsed";
 
 const WIDTH_SM = "69";
 const HEIGHT_SM = "31";
@@ -25262,7 +25125,9 @@ function PopLayout(props) {
 }
 
 function Toast({ headerContent, actionsContent, description, chipLabel, title, }) {
-    return (jsxRuntime.jsxs(Menu, { contentClassName: "tw-px-squid-m tw-pb-squid-s tw-pt-squid-xxs", contentWrapperClassName: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs", rounded: "sm", children: [headerContent, jsxRuntime.jsx("header", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-px-0 tw-py-squid-xxs", children: jsxRuntime.jsx(BodyText, { size: "small", className: "tw-text-grey-100", children: title }) }), jsxRuntime.jsx(CaptionText, { className: "tw-text-center tw-text-material-light-thick", children: description }), jsxRuntime.jsx("menu", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xs", children: actionsContent }), chipLabel && (jsxRuntime.jsx(Chip, { label: chipLabel, className: "tw-absolute tw-right-squid-xs tw-top-squid-xs" }))] }));
+    return (jsxRuntime.jsxs(Menu, { contentClassName: "tw-px-squid-m tw-pb-squid-s tw-pt-squid-xxs", contentWrapperProps: {
+            className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs",
+        }, rounded: "sm", children: [headerContent, jsxRuntime.jsx("header", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-px-0 tw-py-squid-xxs", children: jsxRuntime.jsx(BodyText, { size: "small", className: "tw-text-grey-100", children: title }) }), jsxRuntime.jsx(CaptionText, { className: "tw-text-center tw-text-material-light-thick", children: description }), jsxRuntime.jsx("menu", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xs", children: actionsContent }), chipLabel && (jsxRuntime.jsx(Chip, { label: chipLabel, className: "tw-absolute tw-right-squid-xs tw-top-squid-xs" }))] }));
 }
 
 var lib = {};
@@ -26376,10 +26241,7 @@ const tooltipThresholdPaddingMap = {
     xl: "40px",
     xxl: "60px",
 };
-const TooltipContainer = (_a) => {
-    var { className } = _a, props = __rest$1(_a, ["className"]);
-    return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn("tw-relative", className) })));
-};
+const TooltipContainer = (props) => (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn("tw-relative", props.className) })));
 const TooltipTriggerWrapper = (_a) => {
     var { elementRef } = _a, props = __rest$1(_a, ["elementRef"]);
     return jsxRuntime.jsx("div", Object.assign({}, props, { ref: elementRef }));
@@ -26570,10 +26432,10 @@ function NumericInput(_a) {
         }
     }, [forcedAmount]);
     const updateInputValue = React$1.useCallback((newValue) => {
-        const safeNewValue = trimExtraDecimals(newValue, token.decimals);
+        const safeNewValue = reactHooks.trimExtraDecimals(newValue, token.decimals);
         const formattedAmount = userInputType === UserInputType.TOKEN
             ? safeNewValue
-            : convertTokenAmountToUSD(safeNewValue, token.price, maxUsdDecimals);
+            : reactHooks.convertTokenAmountToUSD(safeNewValue, token.price, maxUsdDecimals);
         setInputValue(formattedAmount);
     }, [userInputType, token.price, direction, token.decimals]);
     const onBalanceButtonClick = React$1.useCallback(() => {
@@ -26586,7 +26448,7 @@ function NumericInput(_a) {
         onAmountChange,
     ]);
     const handleInputChange = (e) => {
-        let value = e.target.value.replace(/,/g, "."); // Replace commas with dots
+        const value = e.target.value.replace(/,/g, "."); // Replace commas with dots
         const maxDecimalsForInputType = userInputType === UserInputType.TOKEN ? token.decimals : maxUsdDecimals;
         const isValidAmount = new RegExp(`^\\d*\\.?\\d{0,${maxDecimalsForInputType}}$`).test(value);
         if (isValidAmount) {
@@ -26607,8 +26469,8 @@ function NumericInput(_a) {
         var _a;
         if (inputValue !== "") {
             const convertedAmount = userInputType === UserInputType.TOKEN
-                ? convertTokenAmountToUSD(inputValue, token.price, maxUsdDecimals)
-                : convertUSDToTokenAmount(inputValue, token.price, token.decimals);
+                ? reactHooks.convertTokenAmountToUSD(inputValue, token.price, maxUsdDecimals)
+                : reactHooks.convertUSDToTokenAmount(inputValue, token.price, token.decimals);
             setInputValue(convertedAmount);
         }
         setUserInputType((prevMode) => prevMode === UserInputType.TOKEN
@@ -26625,7 +26487,7 @@ function NumericInput(_a) {
                 isUsdAmountVerySmall: false,
             };
         if (userInputType === UserInputType.TOKEN) {
-            const usdRawAmount = convertTokenAmountToUSD(amount, token.price, maxUsdDecimals);
+            const usdRawAmount = reactHooks.convertTokenAmountToUSD(amount, token.price, maxUsdDecimals);
             const tokenRawAmount = amount;
             const isTokenAmountVerySmall = !!tokenRawAmount &&
                 RegExpNonZeroValue.test(tokenRawAmount) &&
@@ -26642,7 +26504,7 @@ function NumericInput(_a) {
             };
         }
         else {
-            const tokenRawAmount = convertUSDToTokenAmount(amount, token.price, token.decimals);
+            const tokenRawAmount = reactHooks.convertUSDToTokenAmount(amount, token.price, token.decimals);
             const usdRawAmount = amount;
             const isUsdAmountVerySmall = (!!usdRawAmount &&
                 RegExpNonZeroValue.test(usdRawAmount) &&
@@ -26666,14 +26528,18 @@ function NumericInput(_a) {
             return "0";
         if (userInputType === UserInputType.TOKEN) {
             if (direction === "from") {
-                return formatAmount(convertTokenAmountToUSD(inputValue, token.price, maxUsdDecimals));
+                return reactHooks.formatUsdAmount(reactHooks.convertTokenAmountToUSD(inputValue, token.price, maxUsdDecimals), {
+                    includeSign: false,
+                });
             }
             else {
-                return formatAmount((_a = inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.amountUsd) !== null && _a !== void 0 ? _a : "0");
+                return reactHooks.formatUsdAmount((_a = inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.amountUsd) !== null && _a !== void 0 ? _a : "0", {
+                    includeSign: false,
+                });
             }
         }
         else {
-            return formatAmount(convertUSDToTokenAmount(inputValue, token.price, token.decimals));
+            return reactHooks.formatTokenAmount(reactHooks.convertUSDToTokenAmount(inputValue, token.price, token.decimals));
         }
     }, [
         inputValue,
@@ -26690,7 +26556,7 @@ function NumericInput(_a) {
         : "tw-text-grey-300";
     const BalanceChipTag = balanceChipClickable ? "button" : "div";
     const balanceFormatted = React$1.useMemo(() => {
-        return formatAmount(balance !== null && balance !== void 0 ? balance : "0");
+        return reactHooks.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 inputRef = React$1.useRef(null);
@@ -62092,7 +61958,7 @@ const getSwapProgressTitle = ({ fromToken, toToken, swapState, }) => {
             return "Needs gas on destination";
     }
 };
-const getSwapProgressDescriptions = ({ swapState, toAmount, toChain, toToken, toAddressFormatted, }) => {
+const getSwapProgressDescriptions = ({ swapState, toAmount, toChain, toToken, toAddressFormatted, refundTokenSymbol, }) => {
     switch (swapState) {
         case SwapState.CONFIRM: {
             return "Authenticate the transaction in your wallet.";
@@ -62113,7 +61979,7 @@ const getSwapProgressDescriptions = ({ swapState, toAmount, toChain, toToken, to
             return "You declined the transaction in your wallet.";
         }
         case SwapState.PARTIAL_SUCCESS: {
-            return `You received a refund of axlUSDC to your wallet ${toAddressFormatted} on ${toChain === null || toChain === void 0 ? void 0 : toChain.networkName}.`;
+            return `You received a refund of ${refundTokenSymbol} to your wallet ${toAddressFormatted} on ${toChain === null || toChain === void 0 ? void 0 : toChain.networkName}.`;
         }
         case SwapState.NEEDS_GAS: {
             return "Add gas to the transaction via Axelarscan to complete the swap";
@@ -62130,7 +61996,7 @@ const swapProgressButtonTexts = {
     [SwapState.PARTIAL_SUCCESS]: "Cancel",
     [SwapState.NEEDS_GAS]: "Go to Axelarscan",
 };
-function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, }) {
+function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, refundTokenSymbol, }) {
     const [showSwapInfoSection, setShowSwapInfoSection] = React$1.useState(true);
     const isFirstRenderRef = React$1.useRef(true);
     const { timer, stopTimer, startTimer } = useTimer({
@@ -62160,6 +62026,7 @@ function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, s
             toChain,
             toToken,
             toAddressFormatted,
+            refundTokenSymbol,
         });
         return {
             headerTitle,
@@ -62465,10 +62332,9 @@ function blendColors(foreground, background) {
     return rgbToHex(r, g, b);
 }
 
-function ThemeProvider(_a) {
-    var { theme = lightTheme, children, themeType = "light" } = _a, props = __rest$1(_a, ["theme", "children", "themeType"]);
+function SquidConfigProvider({ theme = lightTheme, children, themeType = "light", }) {
     const parsedStyle = parseSquidTheme(theme);
-    return (jsxRuntime.jsx("div", Object.assign({}, props, { style: Object.assign(Object.assign({}, props.style), parsedStyle), "data-squid-theme-type": themeType, className: cn("tw-group tw-relative tw-h-screen tw-font-geist mobile-lg:tw-h-auto", props.className), children: children })));
+    return (jsxRuntime.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 }));
 }
 
 exports.ActionLayout = ActionLayout;
@@ -62544,20 +62410,16 @@ exports.CircleX = CircleX;
 exports.CircleXFilledIcon = CircleXFilledIcon;
 exports.ClockOutlineIcon = ClockOutlineIcon;
 exports.ClockSolidIcon = ClockSolidIcon;
-exports.CodeBracketsIcon = CodeBracketsIcon;
-exports.CodeSolidSquareIcon = CodeSolidSquareIcon;
 exports.CoinsAddIcon = CoinsAddIcon;
 exports.CoinsIcon = CoinsIcon;
 exports.Collapse = Collapse;
 exports.CollapsibleMenu = CollapsibleMenu;
 exports.CollectionIcon = CollectionIcon;
 exports.ColorPaletteIcon = ColorPaletteIcon;
-exports.CommandIcon = CommandIcon;
 exports.CompassRoundOutlinedIcon = CompassRoundOutlinedIcon;
 exports.CompassRoundSolidIcon = CompassRoundSolidIcon;
 exports.ConsoleIcon = ConsoleIcon;
 exports.Copy = Copy;
-exports.CopyIcon = CopyIcon;
 exports.CrossAnimatedIcon = CrossAnimatedIcon;
 exports.DashboardFast = DashboardFast;
 exports.DescriptionBlocks = DescriptionBlocks;
@@ -62587,7 +62449,6 @@ exports.FeeButton = FeeButton;
 exports.FeesAction = FeesAction;
 exports.FeesLines = FeesLines;
 exports.FeesTotal = FeesTotal;
-exports.FileDownloadIcon = FileDownloadIcon;
 exports.FilledHeartIcon = FilledHeartIcon;
 exports.FilterAscendingIcon = FilterAscendingIcon;
 exports.FilterButton = FilterButton;
@@ -62616,7 +62477,6 @@ exports.InteractionHeader = InteractionHeader;
 exports.InteractionProperties = InteractionProperties;
 exports.InteractionTransactionView = InteractionTransactionView;
 exports.Join = Join;
-exports.LaptopIcon = LaptopIcon;
 exports.LightningIcon = LightningIcon;
 exports.LimitIcon = LimitIcon;
 exports.LinkIcon = LinkIcon;
@@ -62642,7 +62502,6 @@ exports.NotAllowedIcon = NotAllowedIcon;
 exports.NumericInput = NumericInput;
 exports.PathSquareIcon = PathSquareIcon;
 exports.PercentIcon = PercentIcon;
-exports.PhoneIcon = PhoneIcon;
 exports.PieChartIcon = PieChartIcon;
 exports.PipeSeparator = PipeSeparator;
 exports.PlusIcon = PlusIcon;
@@ -62681,13 +62540,13 @@ exports.SparklesIcon = SparklesIcon;
 exports.SquareArrowCenter = SquareArrowCenter;
 exports.SquareArrowTopLeftIcon = SquareArrowTopLeftIcon;
 exports.SquareArrowTopRight2Icon = SquareArrowTopRight2Icon;
+exports.SquidConfigProvider = SquidConfigProvider;
 exports.SquidLogo = SquidLogo;
 exports.StakeAction = StakeAction;
 exports.StartAction = StartAction;
 exports.StocksIcon = StocksIcon;
 exports.SuccessAction = SuccessAction;
 exports.SunIcon = SunIcon;
-exports.SunOutlinedIcon = SunOutlinedIcon;
 exports.SunriseIcon = SunriseIcon;
 exports.SwapAction = SwapAction;
 exports.SwapConfiguration = SwapConfiguration;
@@ -62709,7 +62568,6 @@ exports.Switch = Switch;
 exports.TagIcon = TagIcon;
 exports.TagIconFilled = TagIconFilled;
 exports.TextSkeleton = TextSkeleton;
-exports.ThemeProvider = ThemeProvider;
 exports.ThumbsUp = ThumbsUp;
 exports.Tick = Tick;
 exports.TimeFliesIcon = TimeFliesIcon;
@@ -62751,5 +62609,4 @@ exports.useMediaQuery = useMediaQuery;
 exports.useOnResize = useOnResize;
 exports.useRect = useRect;
 exports.useTimer = useTimer;
-exports.useUserTheme = useUserTheme;
 exports.useVersion = useVersion;

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

@@ -38,31 +38,3 @@ export declare function FilterTimelineIcon({ size, className, }: {
     size?: string;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function PhoneIcon({ size, className, }: {
-    size?: string;
-    className?: string;
-}): import("react/jsx-runtime").JSX.Element;
-export declare function LaptopIcon({ size, className, }: {
-    size?: string;
-    className?: string;
-}): import("react/jsx-runtime").JSX.Element;
-export declare function CopyIcon({ size, className, }: {
-    size?: string;
-    className?: string;
-}): import("react/jsx-runtime").JSX.Element;
-export declare function FileDownloadIcon({ size, className, }: {
-    size?: string;
-    className?: string;
-}): import("react/jsx-runtime").JSX.Element;
-export declare function CodeSolidSquareIcon({ size, className, }: {
-    size?: string;
-    className?: string;
-}): import("react/jsx-runtime").JSX.Element;
-export declare function CodeBracketsIcon({ size, className, }: {
-    size?: string;
-    className?: string;
-}): import("react/jsx-runtime").JSX.Element;
-export declare function CommandIcon({ size, className, }: {
-    size?: string;
-    className?: string;
-}): import("react/jsx-runtime").JSX.Element;

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

@@ -10,7 +10,3 @@ export declare function MoonIcon({ size, className, }: {
     size?: string;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function SunOutlinedIcon({ size, className, }: {
-    size?: string;
-    className?: string;
-}): import("react/jsx-runtime").JSX.Element;

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

@@ -1,3 +1,4 @@
+/// <reference types="trusted-types" />
 import { motion } from "framer-motion";
 import { ComponentProps } from "react";
 interface AppContainerProps extends ComponentProps<typeof motion.div> {

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

@@ -1,2 +1,2 @@
 import { ComponentProps } from "react";
-export declare function PipeSeparator({ className, ...props }: ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export declare function PipeSeparator(props: ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;

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

@@ -3,14 +3,13 @@ import { SwapStepsCollapsedFooterButton } from "../layout/SwapStepsCollapsed";
 type ChainData = {
     networkName: string;
     logoUrl: string;
-    bgColor: string;
 };
 type Token = {
     symbol: string;
     logoUrl: string;
     bgColor: string;
 };
-export declare function SwapProgressView({ steps, isOpen, handleClose, handleComplete, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, }: {
+export declare function SwapProgressView({ steps, isOpen, handleClose, handleComplete, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, refundTokenSymbol, }: {
     steps: SwapStep[];
     handleClose?: (swapState: SwapState) => void;
     handleComplete?: () => void;
@@ -28,5 +27,6 @@ export declare function SwapProgressView({ steps, isOpen, handleClose, handleCom
     swapState: SwapState;
     estimatedTimeToComplete?: string;
     footerButton?: SwapStepsCollapsedFooterButton;
+    refundTokenSymbol?: string;
 }): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -4,4 +4,3 @@ export * from "./useCollapsibleMenu";
 export * from "./useRect";
 export * from "./useVersion";
 export * from "./useTimer";
-export * from "./useUserTheme";

package/dist/cjs/types/providers/SquidConfigProvider.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import "../styles/compiled-tailwind.css";
+import { ThemeType } from "../types/components";
+import { SquidTheme } from "../types/config";
+export declare function SquidConfigProvider({ theme, children, themeType, }: {
+    theme?: SquidTheme;
+    children?: React.ReactNode;
+    themeType?: ThemeType;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-export * from "./ThemeProvider";
+export * from "./SquidConfigProvider";

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

@@ -13,11 +13,11 @@ export type DescriptionBlock = {
     value: string;
     rounded?: boolean;
 };
-export type SwapStep = {
+export interface SwapStep {
     descriptionBlocks: DescriptionBlock[];
     link?: string;
     status: ActionStatus;
-};
+}
 export declare enum SwapState {
     CONFIRM = 0,
     PROGRESS = 1,

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

@@ -1,3 +1,3 @@
 export type { SquidTheme } from "./config";
 export * from "./utils";
-export type { SwapState, ThemeType, SwapStep, HistoryItemStatus, ActionStatus, AssetsButtonVariant, } from "./components";
+export type { SwapState, ThemeType, SwapStep, HistoryItemStatus, ActionStatus, AssetsButtonVariant, DescriptionBlock, } from "./components";