@0xsquid/ui 0.2.0 → 0.3.0

package/README.md

@@ -70,3 +70,23 @@ yarn format:fix
 ```bash
 yarn lint:fix
 ```
+
+### Images
+
+In case you need to add images somewhere that need to be included in the final bundle, convert them to base64 instead.
+
+Example:
+
+```diff
+.my-image {
+-  background-image: url('my-image.png');
++  background-image: url('data:image/png;base64,iVBORw0...');
+}
+```
+
+Or in a React component:
+
+```diff
+-  <img src="my-image.png" />
++  <img src="data:image/png;base64,iVBORw0..." />
+```

package/dist/cjs/index.js

@@ -2574,16 +2574,6 @@ function __rest(s, e) {
     return t;
 }
 
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
 typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
     var e = new Error(message);
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
@@ -2723,273 +2713,140 @@ function Chip(_a) {
     return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn('tw-flex tw-h-squid-m tw-items-center tw-justify-center tw-rounded-squid-m tw-bg-grey-500 tw-text-grey-900', icon && 'tw-w-squid-m', props.className), children: label ? (jsxRuntime.jsx(CaptionText, { className: "tw-min-w-squid-xl tw-px-squid-xxs tw-text-center", children: label })) : (icon) })));
 }
 
+function PlusIcon() {
+    return (jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M12 17V12M12 12V7M12 12H17M12 12H7", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }) }));
+}
+
+const SQUID_THEME_CSS_VARIABLE_PREFIX = '--squid-theme-';
 /**
  * Mapping between readable variables name and css variables used TailwindCSS config
  */
 const themeTypesKeys = {
     'accent-gold': {
-        cssVariable: '--squid-theme-accent-gold',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}accent-gold`,
     },
     'accent-salmon': {
-        cssVariable: '--squid-theme-accent-salmon',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}accent-salmon`,
     },
     'grey-100': {
-        cssVariable: '--squid-theme-grey-100',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-100`,
     },
     'grey-200': {
-        cssVariable: '--squid-theme-grey-200',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-200`,
     },
     'grey-300': {
-        cssVariable: '--squid-theme-grey-300',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-300`,
     },
     'grey-400': {
-        cssVariable: '--squid-theme-grey-400',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-400`,
     },
     'grey-500': {
-        cssVariable: '--squid-theme-grey-500',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-500`,
     },
     'grey-600': {
-        cssVariable: '--squid-theme-grey-600',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-600`,
     },
     'grey-700': {
-        cssVariable: '--squid-theme-grey-700',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-700`,
     },
     'grey-800': {
-        cssVariable: '--squid-theme-grey-800',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-800`,
     },
     'grey-900': {
-        cssVariable: '--squid-theme-grey-900',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-900`,
     },
     'material-dark-average': {
-        cssVariable: '--squid-theme-material-dark-average',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-dark-average`,
     },
     'material-dark-thick': {
-        cssVariable: '--squid-theme-material-dark-thick',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-dark-thick`,
     },
     'material-dark-thin': {
-        cssVariable: '--squid-theme-material-dark-thin',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-dark-thin`,
     },
     'material-light-average': {
-        cssVariable: '--squid-theme-material-light-average',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-average`,
     },
     'material-light-thick': {
-        cssVariable: '--squid-theme-material-light-thick',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-thick`,
     },
     'material-light-thin': {
-        cssVariable: '--squid-theme-material-light-thin',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-thin`,
     },
     'royal-100': {
-        cssVariable: '--squid-theme-royal-100',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-100`,
     },
     'royal-200': {
-        cssVariable: '--squid-theme-royal-200',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-200`,
     },
     'royal-300': {
-        cssVariable: '--squid-theme-royal-300',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-300`,
     },
     'royal-400': {
-        cssVariable: '--squid-theme-royal-400',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-400`,
     },
     'royal-500': {
-        cssVariable: '--squid-theme-royal-500',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-500`,
     },
     'royal-600': {
-        cssVariable: '--squid-theme-royal-600',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-600`,
     },
     'royal-700': {
-        cssVariable: '--squid-theme-royal-700',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-700`,
     },
     'royal-800': {
-        cssVariable: '--squid-theme-royal-800',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-800`,
     },
     'status-negative': {
-        cssVariable: '--squid-theme-status-negative',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-negative`,
     },
     'status-positive': {
-        cssVariable: '--squid-theme-status-positive',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-positive`,
     },
     'volt-300': {
-        cssVariable: '--squid-theme-volt-300',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-300`,
     },
     'volt-400': {
-        cssVariable: '--squid-theme-volt-400',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-400`,
     },
     'volt-600': {
-        cssVariable: '--squid-theme-volt-600',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-600`,
     },
     'volt-700': {
-        cssVariable: '--squid-theme-volt-700',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-700`,
     },
     'volt-800': {
-        cssVariable: '--squid-theme-volt-800',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-800`,
     },
     'volt-900': {
-        cssVariable: '--squid-theme-volt-900',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-900`,
     },
 };
 
-/**
- * Parsing the user readable config to css variables with HSL values
- * @param style
- */
-const getParsedStyle = (style) => {
-    if (style) {
-        const styleKeys = Object.keys(themeTypesKeys);
-        const parsed = styleKeys.map((sk) => {
-            const themeItem = themeTypesKeys[sk];
-            let userValue = style[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'].cssVariable}-005`]: getHexColorFromOpacityPercentage(style['grey-100'], 0.05),
-        });
-        return parsed.reduce((a, v) => {
-            const key = Object.keys(v)[0];
-            return Object.assign(Object.assign({}, a), { [key]: v[key] });
-        });
-    }
-};
-function getDominantColor(_a) {
-    return __awaiter(this, arguments, void 0, function* ({ imageUrl, sampleSize = 1000, }) {
-        return new Promise((resolve, reject) => {
-            const img = document.createElement('img');
-            img.src = imageUrl;
-            img.crossOrigin = 'Anonymous';
-            img.onload = () => {
-                const canvas = document.createElement('canvas');
-                const ctx = canvas.getContext('2d');
-                if (!ctx)
-                    return reject(new Error('Could not create canvas context'));
-                const width = img.width;
-                const height = img.height;
-                const aspectRatio = width / height;
-                const newWidth = Math.sqrt(sampleSize * aspectRatio);
-                const newHeight = Math.sqrt(sampleSize / aspectRatio);
-                canvas.width = newWidth;
-                canvas.height = newHeight;
-                ctx.drawImage(img, 0, 0, newWidth, newHeight);
-                const imageData = ctx.getImageData(0, 0, newWidth, newHeight);
-                const data = imageData.data;
-                const colorCounts = {};
-                for (let i = 0; i < data.length; i += 4) {
-                    const r = data[i];
-                    const g = data[i + 1];
-                    const b = data[i + 2];
-                    const color = `${r},${g},${b}`;
-                    colorCounts[color] = (colorCounts[color] || 0) + 1;
-                }
-                let dominantColor = '';
-                let maxCount = 0;
-                for (const color in colorCounts) {
-                    if (colorCounts[color] > maxCount) {
-                        dominantColor = color;
-                        maxCount = colorCounts[color];
-                    }
-                }
-                resolve(dominantColor.split(',').map(Number));
-            };
-            img.onerror = reject;
-        });
-    });
-}
-function getContrastColor({ r, g, b, }) {
-    const brightness = (r * 299 + g * 587 + b * 114) / 1000;
-    return brightness >= 128 ? '#000' : '#fff';
-}
-/**
- * Returns a hexadecimal color with opacity based on the given color and opacity percentage.
- *
- * @example getHexColorFromOpacityPercentage('#FF0000', 0.5) // '#FF000080'
- *
- * @param {string} color - The base color in hexadecimal format.
- * @param {number} opacity - The opacity percentage (0-1).
- * @returns {string} The hexadecimal color with opacity.
- */
-function getHexColorFromOpacityPercentage(color, opacity) {
-    return (color +
-        Math.round(opacity * 255)
-            .toString(16)
-            .padStart(2, '0')).toUpperCase();
-}
-
-function PlusIcon() {
-    return (jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M12 17V12M12 12V7M12 12H17M12 12H7", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }) }));
-}
-
-const DEFAULT_RGB = [158, 121, 210];
 const imageClass = 'tw-w-10 tw-aspect-square tw-ml-2 tw-mr-2 -tw-translate-x-2 tw-flex tw-items-center tw-justify-center';
-function Dropdown({ chainImageUrl, tokenImageUrl, tokenSymbol, }) {
-    const [tokenImageRgb, setTokenImageRgb] = react.useState(DEFAULT_RGB);
-    const [chainImageRgb, setChainImageRgb] = react.useState(DEFAULT_RGB);
-    react.useEffect(() => {
-        if (tokenImageUrl) {
-            // get dominant color when image is loaded
-            getDominantColor({ imageUrl: tokenImageUrl })
-                .then((color) => {
-                setTokenImageRgb(color);
-            })
-                .catch((error) => {
-                setTokenImageRgb(DEFAULT_RGB);
-                console.error('Error getting dominant color for token:', error);
-            });
-        }
-        if (chainImageUrl) {
-            getDominantColor({ imageUrl: chainImageUrl })
-                .then((color) => {
-                setChainImageRgb(color);
-            })
-                .catch((error) => {
-                setChainImageRgb(DEFAULT_RGB);
-                console.error('Error getting dominant color for chain:', error);
-            });
-        }
-    }, []);
+const defaultDropdownColor = `var(${themeTypesKeys['royal-500'].cssVariable})`;
+function Dropdown({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor = defaultDropdownColor, tokenBgColor = defaultDropdownColor, tokenTextColor, }) {
     const dropdownGradient = react.useMemo(() => {
-        const defaultRgb = DEFAULT_RGB.join(',');
         // if no chain icon, gradient is as follows:
         // 0%-100% default color
         if (!chainImageUrl) {
-            return `linear-gradient(to right, rgb(${defaultRgb}), rgb(${defaultRgb}))`;
+            return `linear-gradient(to right, ${defaultDropdownColor}, ${defaultDropdownColor})`;
         }
-        const tokenRgb = tokenImageRgb.join(',');
-        const chainRgb = chainImageRgb.join(',');
         // if chain icon present but no token icon, gradient is as follows:
         // 0%-25% chain color, 25%-100% default color
         if (!tokenImageUrl) {
-            return `linear-gradient(to right, rgb(${chainRgb}) 25%, rgb(${defaultRgb}) 30%)`;
+            return `linear-gradient(to right, ${chainBgColor} 25%, ${defaultDropdownColor} 30%)`;
         }
         // if both chain and token icons present, gradient is as follows:
         // 0%-20% chain color, 20%-100% token color
-        return `linear-gradient(to right, rgb(${chainRgb}) 20%, rgb(${tokenRgb}) 25%)`;
-    }, [chainImageUrl, tokenImageUrl, tokenImageRgb, chainImageRgb]);
-    return (jsxRuntime.jsxs("div", { className: "dropdown-mask tw-flex tw-h-10 tw-w-[209px] tw-items-center tw-text-grey-100", style: {
+        return `linear-gradient(to right, ${chainBgColor} 20%, ${tokenBgColor} 25%)`;
+    }, [chainBgColor, tokenBgColor]);
+    return (jsxRuntime.jsxs("div", { className: "tw-token-chain-mask tw-flex tw-h-10 tw-w-[209px] tw-items-center tw-text-grey-100", style: {
             backgroundImage: dropdownGradient,
-        }, children: [jsxRuntime.jsx("div", { className: clsx(imageClass), children: chainImageUrl ? jsxRuntime.jsx("img", { src: chainImageUrl, alt: "" }) : jsxRuntime.jsx(PlusIcon, {}) }), tokenImageUrl && chainImageUrl ? (jsxRuntime.jsx("div", { className: clsx(imageClass), children: jsxRuntime.jsx("img", { src: tokenImageUrl, alt: "" }) })) : null, tokenImageUrl && chainImageUrl ? (jsxRuntime.jsx(TokenSymbol, { rgb: tokenImageRgb, symbol: tokenSymbol || '' })) : (jsxRuntime.jsx(SelectTokenLabel, {}))] }));
-}
-const TokenSymbol = ({ rgb, symbol, }) => {
-    return (jsxRuntime.jsxs("div", { className: "tw-mx-auto tw-flex tw-items-center tw-justify-center tw-gap-1.5", style: {
-            color: getContrastColor({
-                r: Number(rgb[0]),
-                g: Number(rgb[1]),
-                b: Number(rgb[2]),
-            }),
-        }, children: [jsxRuntime.jsx(BodyText, { size: "small", children: symbol }), jsxRuntime.jsx(ChevronArrowIcon, {})] }));
+        }, children: [jsxRuntime.jsx("div", { className: clsx(imageClass), children: chainImageUrl ? jsxRuntime.jsx("img", { src: chainImageUrl, alt: "" }) : jsxRuntime.jsx(PlusIcon, {}) }), tokenImageUrl && chainImageUrl ? (jsxRuntime.jsx("div", { className: clsx(imageClass), children: jsxRuntime.jsx("img", { src: tokenImageUrl, alt: "" }) })) : null, tokenImageUrl && chainImageUrl ? (jsxRuntime.jsx("span", { style: { color: tokenTextColor }, children: jsxRuntime.jsx(TokenSymbol, { symbol: tokenSymbol || '' }) })) : (jsxRuntime.jsx(SelectTokenLabel, {}))] }));
+}
+const TokenSymbol = ({ symbol }) => {
+    return (jsxRuntime.jsxs("div", { className: "tw-mx-auto tw-flex tw-items-center tw-justify-center tw-gap-1.5", children: [jsxRuntime.jsx(BodyText, { size: "small", children: symbol }), jsxRuntime.jsx(ChevronArrowIcon, {})] }));
 };
 const SelectTokenLabel = () => {
     return (jsxRuntime.jsxs("div", { className: "tw-mx-auto tw-flex tw-items-center tw-justify-center tw-gap-1.5", children: [jsxRuntime.jsx(BodyText, { size: "small", children: "Select token" }), jsxRuntime.jsx(ChevronArrowIcon, {})] }));
@@ -3141,7 +2998,7 @@ function SwapConfiguration({ priceImpactPercentage, amount = 0, swapAmountUsd =
     const priceImpactClass = (priceImpactPercentage !== null && priceImpactPercentage !== void 0 ? priceImpactPercentage : 0) > 5
         ? 'tw-text-status-negative'
         : 'tw-text-grey-300';
-    return (jsxRuntime.jsxs("section", { className: "tw-h-[205px] tw-max-h-[205px] tw-bg-grey-900 tw-px-squid-l tw-pb-squid-m", children: [jsxRuntime.jsxs("header", { className: "tw-flex tw-items-center tw-gap-1 tw-py-squid-s tw-leading-5 tw-text-grey-300", children: [jsxRuntime.jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsxRuntime.jsx(BodyText, { className: "tw-text-grey-600", size: "small", children: ":" }), jsxRuntime.jsx(WalletAddress, { ens: "so-so.eth" })] }), jsxRuntime.jsx(Dropdown, { chainImageUrl: chain === null || chain === void 0 ? void 0 : chain.iconUrl, tokenImageUrl: token === null || token === void 0 ? void 0 : token.iconUrl, tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol }), jsxRuntime.jsx("input", { className: "tw-h-[75px] tw-w-full tw-bg-transparent tw-py-squid-m tw-text-heading-small tw-font-heading-regular tw-text-royal-400 placeholder:tw-text-grey-600 focus:tw-outline-none", placeholder: "0", value: amount }), !(token === null || token === void 0 ? void 0 : token.iconUrl) || isFetching ? null : (jsxRuntime.jsxs("footer", { className: "tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-text-grey-500", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-1.5", children: [jsxRuntime.jsx(SwapInputsIcon, {}), jsxRuntime.jsx(UsdAmount, { usdAmount: swapAmountUsd }), priceImpactPercentage ? (jsxRuntime.jsxs("span", { className: clsx('tw-flex tw-items-center', priceImpactClass), children: [jsxRuntime.jsx(ArrowTriangle, {}), jsxRuntime.jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-1.5", children: [jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxRuntime.jsx(CaptionText, { children: balance }), jsxRuntime.jsx(MaxIcon, {})] })] }))] }));
+    return (jsxRuntime.jsxs("section", { className: "tw-h-[205px] tw-max-h-[205px] tw-bg-grey-900 tw-px-squid-l tw-pb-squid-m", children: [jsxRuntime.jsxs("header", { className: "tw-flex tw-items-center tw-gap-1 tw-py-squid-s tw-leading-5 tw-text-grey-300", children: [jsxRuntime.jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsxRuntime.jsx(BodyText, { className: "tw-text-grey-600", size: "small", children: ":" }), jsxRuntime.jsx(WalletAddress, { ens: "so-so.eth" })] }), jsxRuntime.jsx(Dropdown, { chainImageUrl: chain === null || chain === void 0 ? void 0 : chain.iconUrl, tokenImageUrl: token === null || token === void 0 ? void 0 : token.iconUrl, tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol, chainBgColor: chain === null || chain === void 0 ? void 0 : chain.bgColor, tokenBgColor: token === null || token === void 0 ? void 0 : token.bgColor, tokenTextColor: token === null || token === void 0 ? void 0 : token.textColor }), jsxRuntime.jsx("input", { className: "tw-h-[75px] tw-w-full tw-bg-transparent tw-py-squid-m tw-text-heading-small tw-font-heading-regular tw-text-royal-400 placeholder:tw-text-grey-600 focus:tw-outline-none", placeholder: "0", value: amount }), !(token === null || token === void 0 ? void 0 : token.iconUrl) || isFetching ? null : (jsxRuntime.jsxs("footer", { className: "tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-text-grey-500", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-1.5", children: [jsxRuntime.jsx(SwapInputsIcon, {}), jsxRuntime.jsx(UsdAmount, { usdAmount: swapAmountUsd }), priceImpactPercentage ? (jsxRuntime.jsxs("span", { className: clsx('tw-flex tw-items-center', priceImpactClass), children: [jsxRuntime.jsx(ArrowTriangle, {}), jsxRuntime.jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-1.5", children: [jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxRuntime.jsx(CaptionText, { children: balance }), jsxRuntime.jsx(MaxIcon, {})] })] }))] }));
 }
 
 function DropdownMenuItem({ label, imageUrl, icon, }) {
@@ -3174,6 +3031,59 @@ function SectionTitle({ title, icon, accessory, actionIcon, className, }) {
     return (jsxRuntime.jsxs("header", { className: cn('tw-flex tw-h-[46px] tw-w-full tw-items-center tw-gap-squid-xxs tw-bg-grey-900 tw-px-squid-m tw-pb-squid-xs tw-pt-squid-m tw-text-royal-400', className), children: [icon, jsxRuntime.jsx(CaptionText, { children: title }), accessory ? (jsxRuntime.jsx(CaptionText, { className: "tw-flex-1 tw-text-right tw-text-grey-500", children: accessory })) : actionIcon ? (jsxRuntime.jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end", children: actionIcon })) : null] }));
 }
 
+/**
+ * Parsing the user readable config to css variables with HSL values
+ * @param style
+ */
+const getParsedStyle = (style) => {
+    if (style) {
+        const styleKeys = Object.keys(themeTypesKeys);
+        const parsed = styleKeys.map((sk) => {
+            const themeItem = themeTypesKeys[sk];
+            let userValue = style[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'].cssVariable}-005`]: getHexColorFromOpacityPercentage(style['grey-100'], 0.05),
+        });
+        return parsed.reduce((a, v) => {
+            const key = Object.keys(v)[0];
+            return Object.assign(Object.assign({}, a), { [key]: v[key] });
+        });
+    }
+};
+/**
+ * Returns a hexadecimal color with opacity based on the given color and opacity percentage.
+ *
+ * @example getHexColorFromOpacityPercentage('#FF0000', 0.5) // '#FF000080'
+ *
+ * @param {string} color - The base color in hexadecimal format.
+ * @param {number} opacity - The opacity percentage (0-1).
+ * @returns {string} The hexadecimal color with opacity.
+ */
+function getHexColorFromOpacityPercentage(color, opacity) {
+    return (color +
+        Math.round(opacity * 255)
+            .toString(16)
+            .padStart(2, '0')).toUpperCase();
+}
+
 const squidConfigContext = react.createContext(undefined);
 function SquidConfigProvider({ theme, children, }) {
     const Provider = squidConfigContext.Provider;

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

@@ -2,6 +2,9 @@ interface DropdownProps {
     tokenImageUrl?: string;
     chainImageUrl?: string;
     tokenSymbol?: string;
+    chainBgColor?: string;
+    tokenBgColor?: string;
+    tokenTextColor?: string;
 }
-export declare function Dropdown({ chainImageUrl, tokenImageUrl, tokenSymbol, }: DropdownProps): import("react/jsx-runtime").JSX.Element;
+export declare function Dropdown({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor, tokenBgColor, tokenTextColor, }: DropdownProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -8,10 +8,13 @@ interface SwapConfigurationProps {
     isFetching?: boolean;
     chain?: {
         iconUrl: string;
+        bgColor: string;
     };
     token?: {
         iconUrl: string;
         symbol: string;
+        bgColor: string;
+        textColor: string;
     };
 }
 export declare function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd, balance, isFetching, chain, token, direction, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;

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

@@ -37,6 +37,7 @@ export interface ConfigTheme {
     'accent-salmon': string;
     'accent-gold': string;
 }
+export declare const SQUID_THEME_CSS_VARIABLE_PREFIX = "--squid-theme-";
 /**
  * Mapping between readable variables name and css variables used TailwindCSS config
  */

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useRef, useState, useEffect, useMemo, createContext } from 'react';
+import { useRef, useMemo, createContext } from 'react';
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
@@ -2572,16 +2572,6 @@ function __rest(s, e) {
     return t;
 }
 
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
 typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
     var e = new Error(message);
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
@@ -2721,273 +2711,140 @@ function Chip(_a) {
     return (jsx("div", Object.assign({}, props, { className: cn('tw-flex tw-h-squid-m tw-items-center tw-justify-center tw-rounded-squid-m tw-bg-grey-500 tw-text-grey-900', icon && 'tw-w-squid-m', props.className), children: label ? (jsx(CaptionText, { className: "tw-min-w-squid-xl tw-px-squid-xxs tw-text-center", children: label })) : (icon) })));
 }
 
+function PlusIcon() {
+    return (jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M12 17V12M12 12V7M12 12H17M12 12H7", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }) }));
+}
+
+const SQUID_THEME_CSS_VARIABLE_PREFIX = '--squid-theme-';
 /**
  * Mapping between readable variables name and css variables used TailwindCSS config
  */
 const themeTypesKeys = {
     'accent-gold': {
-        cssVariable: '--squid-theme-accent-gold',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}accent-gold`,
     },
     'accent-salmon': {
-        cssVariable: '--squid-theme-accent-salmon',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}accent-salmon`,
     },
     'grey-100': {
-        cssVariable: '--squid-theme-grey-100',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-100`,
     },
     'grey-200': {
-        cssVariable: '--squid-theme-grey-200',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-200`,
     },
     'grey-300': {
-        cssVariable: '--squid-theme-grey-300',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-300`,
     },
     'grey-400': {
-        cssVariable: '--squid-theme-grey-400',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-400`,
     },
     'grey-500': {
-        cssVariable: '--squid-theme-grey-500',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-500`,
     },
     'grey-600': {
-        cssVariable: '--squid-theme-grey-600',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-600`,
     },
     'grey-700': {
-        cssVariable: '--squid-theme-grey-700',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-700`,
     },
     'grey-800': {
-        cssVariable: '--squid-theme-grey-800',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-800`,
     },
     'grey-900': {
-        cssVariable: '--squid-theme-grey-900',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-900`,
     },
     'material-dark-average': {
-        cssVariable: '--squid-theme-material-dark-average',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-dark-average`,
     },
     'material-dark-thick': {
-        cssVariable: '--squid-theme-material-dark-thick',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-dark-thick`,
     },
     'material-dark-thin': {
-        cssVariable: '--squid-theme-material-dark-thin',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-dark-thin`,
     },
     'material-light-average': {
-        cssVariable: '--squid-theme-material-light-average',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-average`,
     },
     'material-light-thick': {
-        cssVariable: '--squid-theme-material-light-thick',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-thick`,
     },
     'material-light-thin': {
-        cssVariable: '--squid-theme-material-light-thin',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-thin`,
     },
     'royal-100': {
-        cssVariable: '--squid-theme-royal-100',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-100`,
     },
     'royal-200': {
-        cssVariable: '--squid-theme-royal-200',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-200`,
     },
     'royal-300': {
-        cssVariable: '--squid-theme-royal-300',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-300`,
     },
     'royal-400': {
-        cssVariable: '--squid-theme-royal-400',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-400`,
     },
     'royal-500': {
-        cssVariable: '--squid-theme-royal-500',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-500`,
     },
     'royal-600': {
-        cssVariable: '--squid-theme-royal-600',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-600`,
     },
     'royal-700': {
-        cssVariable: '--squid-theme-royal-700',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-700`,
     },
     'royal-800': {
-        cssVariable: '--squid-theme-royal-800',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-800`,
     },
     'status-negative': {
-        cssVariable: '--squid-theme-status-negative',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-negative`,
     },
     'status-positive': {
-        cssVariable: '--squid-theme-status-positive',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-positive`,
     },
     'volt-300': {
-        cssVariable: '--squid-theme-volt-300',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-300`,
     },
     'volt-400': {
-        cssVariable: '--squid-theme-volt-400',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-400`,
     },
     'volt-600': {
-        cssVariable: '--squid-theme-volt-600',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-600`,
     },
     'volt-700': {
-        cssVariable: '--squid-theme-volt-700',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-700`,
     },
     'volt-800': {
-        cssVariable: '--squid-theme-volt-800',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-800`,
     },
     'volt-900': {
-        cssVariable: '--squid-theme-volt-900',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-900`,
     },
 };
 
-/**
- * Parsing the user readable config to css variables with HSL values
- * @param style
- */
-const getParsedStyle = (style) => {
-    if (style) {
-        const styleKeys = Object.keys(themeTypesKeys);
-        const parsed = styleKeys.map((sk) => {
-            const themeItem = themeTypesKeys[sk];
-            let userValue = style[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'].cssVariable}-005`]: getHexColorFromOpacityPercentage(style['grey-100'], 0.05),
-        });
-        return parsed.reduce((a, v) => {
-            const key = Object.keys(v)[0];
-            return Object.assign(Object.assign({}, a), { [key]: v[key] });
-        });
-    }
-};
-function getDominantColor(_a) {
-    return __awaiter(this, arguments, void 0, function* ({ imageUrl, sampleSize = 1000, }) {
-        return new Promise((resolve, reject) => {
-            const img = document.createElement('img');
-            img.src = imageUrl;
-            img.crossOrigin = 'Anonymous';
-            img.onload = () => {
-                const canvas = document.createElement('canvas');
-                const ctx = canvas.getContext('2d');
-                if (!ctx)
-                    return reject(new Error('Could not create canvas context'));
-                const width = img.width;
-                const height = img.height;
-                const aspectRatio = width / height;
-                const newWidth = Math.sqrt(sampleSize * aspectRatio);
-                const newHeight = Math.sqrt(sampleSize / aspectRatio);
-                canvas.width = newWidth;
-                canvas.height = newHeight;
-                ctx.drawImage(img, 0, 0, newWidth, newHeight);
-                const imageData = ctx.getImageData(0, 0, newWidth, newHeight);
-                const data = imageData.data;
-                const colorCounts = {};
-                for (let i = 0; i < data.length; i += 4) {
-                    const r = data[i];
-                    const g = data[i + 1];
-                    const b = data[i + 2];
-                    const color = `${r},${g},${b}`;
-                    colorCounts[color] = (colorCounts[color] || 0) + 1;
-                }
-                let dominantColor = '';
-                let maxCount = 0;
-                for (const color in colorCounts) {
-                    if (colorCounts[color] > maxCount) {
-                        dominantColor = color;
-                        maxCount = colorCounts[color];
-                    }
-                }
-                resolve(dominantColor.split(',').map(Number));
-            };
-            img.onerror = reject;
-        });
-    });
-}
-function getContrastColor({ r, g, b, }) {
-    const brightness = (r * 299 + g * 587 + b * 114) / 1000;
-    return brightness >= 128 ? '#000' : '#fff';
-}
-/**
- * Returns a hexadecimal color with opacity based on the given color and opacity percentage.
- *
- * @example getHexColorFromOpacityPercentage('#FF0000', 0.5) // '#FF000080'
- *
- * @param {string} color - The base color in hexadecimal format.
- * @param {number} opacity - The opacity percentage (0-1).
- * @returns {string} The hexadecimal color with opacity.
- */
-function getHexColorFromOpacityPercentage(color, opacity) {
-    return (color +
-        Math.round(opacity * 255)
-            .toString(16)
-            .padStart(2, '0')).toUpperCase();
-}
-
-function PlusIcon() {
-    return (jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M12 17V12M12 12V7M12 12H17M12 12H7", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }) }));
-}
-
-const DEFAULT_RGB = [158, 121, 210];
 const imageClass = 'tw-w-10 tw-aspect-square tw-ml-2 tw-mr-2 -tw-translate-x-2 tw-flex tw-items-center tw-justify-center';
-function Dropdown({ chainImageUrl, tokenImageUrl, tokenSymbol, }) {
-    const [tokenImageRgb, setTokenImageRgb] = useState(DEFAULT_RGB);
-    const [chainImageRgb, setChainImageRgb] = useState(DEFAULT_RGB);
-    useEffect(() => {
-        if (tokenImageUrl) {
-            // get dominant color when image is loaded
-            getDominantColor({ imageUrl: tokenImageUrl })
-                .then((color) => {
-                setTokenImageRgb(color);
-            })
-                .catch((error) => {
-                setTokenImageRgb(DEFAULT_RGB);
-                console.error('Error getting dominant color for token:', error);
-            });
-        }
-        if (chainImageUrl) {
-            getDominantColor({ imageUrl: chainImageUrl })
-                .then((color) => {
-                setChainImageRgb(color);
-            })
-                .catch((error) => {
-                setChainImageRgb(DEFAULT_RGB);
-                console.error('Error getting dominant color for chain:', error);
-            });
-        }
-    }, []);
+const defaultDropdownColor = `var(${themeTypesKeys['royal-500'].cssVariable})`;
+function Dropdown({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor = defaultDropdownColor, tokenBgColor = defaultDropdownColor, tokenTextColor, }) {
     const dropdownGradient = useMemo(() => {
-        const defaultRgb = DEFAULT_RGB.join(',');
         // if no chain icon, gradient is as follows:
         // 0%-100% default color
         if (!chainImageUrl) {
-            return `linear-gradient(to right, rgb(${defaultRgb}), rgb(${defaultRgb}))`;
+            return `linear-gradient(to right, ${defaultDropdownColor}, ${defaultDropdownColor})`;
         }
-        const tokenRgb = tokenImageRgb.join(',');
-        const chainRgb = chainImageRgb.join(',');
         // if chain icon present but no token icon, gradient is as follows:
         // 0%-25% chain color, 25%-100% default color
         if (!tokenImageUrl) {
-            return `linear-gradient(to right, rgb(${chainRgb}) 25%, rgb(${defaultRgb}) 30%)`;
+            return `linear-gradient(to right, ${chainBgColor} 25%, ${defaultDropdownColor} 30%)`;
         }
         // if both chain and token icons present, gradient is as follows:
         // 0%-20% chain color, 20%-100% token color
-        return `linear-gradient(to right, rgb(${chainRgb}) 20%, rgb(${tokenRgb}) 25%)`;
-    }, [chainImageUrl, tokenImageUrl, tokenImageRgb, chainImageRgb]);
-    return (jsxs("div", { className: "dropdown-mask tw-flex tw-h-10 tw-w-[209px] tw-items-center tw-text-grey-100", style: {
+        return `linear-gradient(to right, ${chainBgColor} 20%, ${tokenBgColor} 25%)`;
+    }, [chainBgColor, tokenBgColor]);
+    return (jsxs("div", { className: "tw-token-chain-mask tw-flex tw-h-10 tw-w-[209px] tw-items-center tw-text-grey-100", style: {
             backgroundImage: dropdownGradient,
-        }, children: [jsx("div", { className: clsx(imageClass), children: chainImageUrl ? jsx("img", { src: chainImageUrl, alt: "" }) : jsx(PlusIcon, {}) }), tokenImageUrl && chainImageUrl ? (jsx("div", { className: clsx(imageClass), children: jsx("img", { src: tokenImageUrl, alt: "" }) })) : null, tokenImageUrl && chainImageUrl ? (jsx(TokenSymbol, { rgb: tokenImageRgb, symbol: tokenSymbol || '' })) : (jsx(SelectTokenLabel, {}))] }));
-}
-const TokenSymbol = ({ rgb, symbol, }) => {
-    return (jsxs("div", { className: "tw-mx-auto tw-flex tw-items-center tw-justify-center tw-gap-1.5", style: {
-            color: getContrastColor({
-                r: Number(rgb[0]),
-                g: Number(rgb[1]),
-                b: Number(rgb[2]),
-            }),
-        }, children: [jsx(BodyText, { size: "small", children: symbol }), jsx(ChevronArrowIcon, {})] }));
+        }, children: [jsx("div", { className: clsx(imageClass), children: chainImageUrl ? jsx("img", { src: chainImageUrl, alt: "" }) : jsx(PlusIcon, {}) }), tokenImageUrl && chainImageUrl ? (jsx("div", { className: clsx(imageClass), children: jsx("img", { src: tokenImageUrl, alt: "" }) })) : null, tokenImageUrl && chainImageUrl ? (jsx("span", { style: { color: tokenTextColor }, children: jsx(TokenSymbol, { symbol: tokenSymbol || '' }) })) : (jsx(SelectTokenLabel, {}))] }));
+}
+const TokenSymbol = ({ symbol }) => {
+    return (jsxs("div", { className: "tw-mx-auto tw-flex tw-items-center tw-justify-center tw-gap-1.5", children: [jsx(BodyText, { size: "small", children: symbol }), jsx(ChevronArrowIcon, {})] }));
 };
 const SelectTokenLabel = () => {
     return (jsxs("div", { className: "tw-mx-auto tw-flex tw-items-center tw-justify-center tw-gap-1.5", children: [jsx(BodyText, { size: "small", children: "Select token" }), jsx(ChevronArrowIcon, {})] }));
@@ -3139,7 +2996,7 @@ function SwapConfiguration({ priceImpactPercentage, amount = 0, swapAmountUsd =
     const priceImpactClass = (priceImpactPercentage !== null && priceImpactPercentage !== void 0 ? priceImpactPercentage : 0) > 5
         ? 'tw-text-status-negative'
         : 'tw-text-grey-300';
-    return (jsxs("section", { className: "tw-h-[205px] tw-max-h-[205px] tw-bg-grey-900 tw-px-squid-l tw-pb-squid-m", children: [jsxs("header", { className: "tw-flex tw-items-center tw-gap-1 tw-py-squid-s tw-leading-5 tw-text-grey-300", children: [jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsx(BodyText, { className: "tw-text-grey-600", size: "small", children: ":" }), jsx(WalletAddress, { ens: "so-so.eth" })] }), jsx(Dropdown, { chainImageUrl: chain === null || chain === void 0 ? void 0 : chain.iconUrl, tokenImageUrl: token === null || token === void 0 ? void 0 : token.iconUrl, tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol }), jsx("input", { className: "tw-h-[75px] tw-w-full tw-bg-transparent tw-py-squid-m tw-text-heading-small tw-font-heading-regular tw-text-royal-400 placeholder:tw-text-grey-600 focus:tw-outline-none", placeholder: "0", value: amount }), !(token === null || token === void 0 ? void 0 : token.iconUrl) || isFetching ? null : (jsxs("footer", { className: "tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-text-grey-500", children: [jsxs("div", { className: "tw-flex tw-items-center tw-gap-1.5", children: [jsx(SwapInputsIcon, {}), jsx(UsdAmount, { usdAmount: swapAmountUsd }), priceImpactPercentage ? (jsxs("span", { className: clsx('tw-flex tw-items-center', priceImpactClass), children: [jsx(ArrowTriangle, {}), jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] }), jsxs("div", { className: "tw-flex tw-items-center tw-gap-1.5", children: [jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsx(CaptionText, { children: balance }), jsx(MaxIcon, {})] })] }))] }));
+    return (jsxs("section", { className: "tw-h-[205px] tw-max-h-[205px] tw-bg-grey-900 tw-px-squid-l tw-pb-squid-m", children: [jsxs("header", { className: "tw-flex tw-items-center tw-gap-1 tw-py-squid-s tw-leading-5 tw-text-grey-300", children: [jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsx(BodyText, { className: "tw-text-grey-600", size: "small", children: ":" }), jsx(WalletAddress, { ens: "so-so.eth" })] }), jsx(Dropdown, { chainImageUrl: chain === null || chain === void 0 ? void 0 : chain.iconUrl, tokenImageUrl: token === null || token === void 0 ? void 0 : token.iconUrl, tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol, chainBgColor: chain === null || chain === void 0 ? void 0 : chain.bgColor, tokenBgColor: token === null || token === void 0 ? void 0 : token.bgColor, tokenTextColor: token === null || token === void 0 ? void 0 : token.textColor }), jsx("input", { className: "tw-h-[75px] tw-w-full tw-bg-transparent tw-py-squid-m tw-text-heading-small tw-font-heading-regular tw-text-royal-400 placeholder:tw-text-grey-600 focus:tw-outline-none", placeholder: "0", value: amount }), !(token === null || token === void 0 ? void 0 : token.iconUrl) || isFetching ? null : (jsxs("footer", { className: "tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-text-grey-500", children: [jsxs("div", { className: "tw-flex tw-items-center tw-gap-1.5", children: [jsx(SwapInputsIcon, {}), jsx(UsdAmount, { usdAmount: swapAmountUsd }), priceImpactPercentage ? (jsxs("span", { className: clsx('tw-flex tw-items-center', priceImpactClass), children: [jsx(ArrowTriangle, {}), jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] }), jsxs("div", { className: "tw-flex tw-items-center tw-gap-1.5", children: [jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsx(CaptionText, { children: balance }), jsx(MaxIcon, {})] })] }))] }));
 }
 
 function DropdownMenuItem({ label, imageUrl, icon, }) {
@@ -3172,6 +3029,59 @@ function SectionTitle({ title, icon, accessory, actionIcon, className, }) {
     return (jsxs("header", { className: cn('tw-flex tw-h-[46px] tw-w-full tw-items-center tw-gap-squid-xxs tw-bg-grey-900 tw-px-squid-m tw-pb-squid-xs tw-pt-squid-m tw-text-royal-400', className), children: [icon, jsx(CaptionText, { children: title }), accessory ? (jsx(CaptionText, { className: "tw-flex-1 tw-text-right tw-text-grey-500", children: accessory })) : actionIcon ? (jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end", children: actionIcon })) : null] }));
 }
 
+/**
+ * Parsing the user readable config to css variables with HSL values
+ * @param style
+ */
+const getParsedStyle = (style) => {
+    if (style) {
+        const styleKeys = Object.keys(themeTypesKeys);
+        const parsed = styleKeys.map((sk) => {
+            const themeItem = themeTypesKeys[sk];
+            let userValue = style[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'].cssVariable}-005`]: getHexColorFromOpacityPercentage(style['grey-100'], 0.05),
+        });
+        return parsed.reduce((a, v) => {
+            const key = Object.keys(v)[0];
+            return Object.assign(Object.assign({}, a), { [key]: v[key] });
+        });
+    }
+};
+/**
+ * Returns a hexadecimal color with opacity based on the given color and opacity percentage.
+ *
+ * @example getHexColorFromOpacityPercentage('#FF0000', 0.5) // '#FF000080'
+ *
+ * @param {string} color - The base color in hexadecimal format.
+ * @param {number} opacity - The opacity percentage (0-1).
+ * @returns {string} The hexadecimal color with opacity.
+ */
+function getHexColorFromOpacityPercentage(color, opacity) {
+    return (color +
+        Math.round(opacity * 255)
+            .toString(16)
+            .padStart(2, '0')).toUpperCase();
+}
+
 const squidConfigContext = createContext(undefined);
 function SquidConfigProvider({ theme, children, }) {
     const Provider = squidConfigContext.Provider;

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

@@ -2,6 +2,9 @@ interface DropdownProps {
     tokenImageUrl?: string;
     chainImageUrl?: string;
     tokenSymbol?: string;
+    chainBgColor?: string;
+    tokenBgColor?: string;
+    tokenTextColor?: string;
 }
-export declare function Dropdown({ chainImageUrl, tokenImageUrl, tokenSymbol, }: DropdownProps): import("react/jsx-runtime").JSX.Element;
+export declare function Dropdown({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor, tokenBgColor, tokenTextColor, }: DropdownProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/components/layout/SwapConfiguration.d.ts

@@ -8,10 +8,13 @@ interface SwapConfigurationProps {
     isFetching?: boolean;
     chain?: {
         iconUrl: string;
+        bgColor: string;
     };
     token?: {
         iconUrl: string;
         symbol: string;
+        bgColor: string;
+        textColor: string;
     };
 }
 export declare function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd, balance, isFetching, chain, token, direction, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/types/config.d.ts

@@ -37,6 +37,7 @@ export interface ConfigTheme {
     'accent-salmon': string;
     'accent-gold': string;
 }
+export declare const SQUID_THEME_CSS_VARIABLE_PREFIX = "--squid-theme-";
 /**
  * Mapping between readable variables name and css variables used TailwindCSS config
  */

package/dist/index.css

@@ -2009,9 +2009,9 @@ video {
   cursor: not-allowed;
 }
 
-.dropdown-mask {
-  -webkit-mask-image: url('/public/assets/images/dropdown-mask.png');
-          mask-image: url('/public/assets/images/dropdown-mask.png');
+.tw-token-chain-mask {
+  -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAaIAAABQBAMAAACpCGz6AAAAAXNSR0IArs4c6QAAABtQTFRFR3BM////////////////////////////////Fv0dDgAAAAh0Uk5TABtReZjD3+88JgQSAAACUklEQVR42u3cQWsaURQF4PNGY7eP2ibbCYY2yyQbszSFQJYtFHSpXYRZthXBddXx/Nz+gxQay4Wpkzuzybtc5ttfOIc3iIz3iYowun8kV19vIhSVmTT0oBcFD3afIoQyk1L5UtBsSoptDqHMJKEHHa4r7c8hlJmEJKgerrwyXEgPmh0JV+YQNTOJ6EHDjEfsIkTNTBp60DGPWkIoM2n9RMU71phAKDNpTZo+P7to8ZnTg56y1gKiMpOMHjQUrFVGiMpMKnrQU6W7sSPSg4ZC6W7siPSgJ0p320ckvuCfB6276SMSWxz0qFjYPiJxhWdn+gNq+ojEDzybUbMwfURih78yqspo+ohEDgAYULcwdER6zlvqymj5iMSmebwNID7Sqn0EkDX/YDzo0yKJOWj7FSPMaNd3AJdsZhMPhcY07Jd8BdJ9i/YLcQsENra9iWE4pWn7iIy+5OjTlwlO6Ms8G8KX8yzCl9A16holaARnAtb0pQS96Rp1jV4fCvqyd9dol/2GM+4aPXWNukav7gkD+jL39+bE4dutsGZTq+sYRjPaFoHGEZcRAMIHWrYFcNmqEBBurb/Jf9N2NSoUtGsOoNd6fa1Hu3IAYd16xXBMq8ro8pdlnDn69X/ub0PD3RaNv00nd9touduNQbx3stX52d/mrbvtaH8b7O5uGTi9CaLvzN2hVp+W3Hm7UbX0e+tNZAX/s9duJhYGbyaKXsGK/TUUMpOAHvRt0byQzBgsJLIHUqxyKGQmET1ouJjVXEBXZpLRg4bR/ZR8bPtvBlOmcDToHwH+7Tk7/P1uAAAAAElFTkSuQmCC');
+          mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAaIAAABQBAMAAACpCGz6AAAAAXNSR0IArs4c6QAAABtQTFRFR3BM////////////////////////////////Fv0dDgAAAAh0Uk5TABtReZjD3+88JgQSAAACUklEQVR42u3cQWsaURQF4PNGY7eP2ibbCYY2yyQbszSFQJYtFHSpXYRZthXBddXx/Nz+gxQay4Wpkzuzybtc5ttfOIc3iIz3iYowun8kV19vIhSVmTT0oBcFD3afIoQyk1L5UtBsSoptDqHMJKEHHa4r7c8hlJmEJKgerrwyXEgPmh0JV+YQNTOJ6EHDjEfsIkTNTBp60DGPWkIoM2n9RMU71phAKDNpTZo+P7to8ZnTg56y1gKiMpOMHjQUrFVGiMpMKnrQU6W7sSPSg4ZC6W7siPSgJ0p320ckvuCfB6276SMSWxz0qFjYPiJxhWdn+gNq+ojEDzybUbMwfURih78yqspo+ohEDgAYULcwdER6zlvqymj5iMSmebwNID7Sqn0EkDX/YDzo0yKJOWj7FSPMaNd3AJdsZhMPhcY07Jd8BdJ9i/YLcQsENra9iWE4pWn7iIy+5OjTlwlO6Ms8G8KX8yzCl9A16holaARnAtb0pQS96Rp1jV4fCvqyd9dol/2GM+4aPXWNukav7gkD+jL39+bE4dutsGZTq+sYRjPaFoHGEZcRAMIHWrYFcNmqEBBurb/Jf9N2NSoUtGsOoNd6fa1Hu3IAYd16xXBMq8ro8pdlnDn69X/ub0PD3RaNv00nd9touduNQbx3stX52d/mrbvtaH8b7O5uGTi9CaLvzN2hVp+W3Hm7UbX0e+tNZAX/s9duJhYGbyaKXsGK/TUUMpOAHvRt0byQzBgsJLIHUqxyKGQmET1ouJjVXEBXZpLRg4bR/ZR8bPtvBlOmcDToHwH+7Tk7/P1uAAAAAElFTkSuQmCC');
   -webkit-mask-size: 100% 100%;
           mask-size: 100% 100%;
   aspect-ratio: 209/40;
@@ -2021,9 +2021,9 @@ video {
           mask-position: center;
 }
 
-.token-swap-mask {
-  -webkit-mask-image: url('/public/assets/images/token-swap-mask.png');
-          mask-image: url('/public/assets/images/token-swap-mask.png');
+.tw-token-pair-mask {
+  -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMcAAABZCAMAAAC9t8DHAAAALVBMVEVHcEzi4+Tp6uvv8PHx8vPy8/T19fb29vb3+Pj5+fr6+/v7+/v9/f3+/v7///+I7qq0AAAADnRSTlMADx8wQ1VqhJ+3yt7u+X/ouusAAANMSURBVHja3duLbt0wCAZg8BUw8P6Pu3bSuqpZ1jgOR6q/B/Avgp2rA1dgLrV1YmbqrZaMECA4LZVGPNTM3c3dzHQwtZJgynya+ZuH0lIlUX9j/oUKnQy+nnZkQvV+WulifspMen5yNsWkYWX17wwqCE/ASiFp2Fj9CuUC6+rltAozCptfZEoZ1mTSa1HuPpOWuvqM0RDuwz5i0oqYT+IMdxWeTTMul1aG+jQbFW7BNnzeaPAdJPM7tCPMwx6Ultj8HiOEo6g0pwT/kdlvs5OhY9KcE5zK4h4w9KvTEru/rpAsQWnIvmpiaiVZT8OJM1VQRxL7MusAR818nXG6Wob5MmtwUNQPwk6/iU3N141yNl3XEV7qhrl7wDwmfwzhwtpYXCJF/TmUFspYmlnIfhB1Zc/s5kHdb+aPkgxnivijtMIHFH+WSYF/q8MfxjjbjvWnNuzqT7N2aEf0Islk7h7WkGoeQSrCZ1jFI2j5OFnFUCr4qQo2j0HwWx4eRbmX/K52MY8yErxrHkl1DFXzQFZDptXr0eGWJFTsxGr+41kBQPKfrwMk2aAfDJCG/3yCUNR/vpGhmW+x0PsWdVTovgFrQL4B68C+gw7Dd0CgvgPapB/7rA/yHbRNrh91l/uSPerQssv97h7PH4yAvMVlEGCT53NoOyzzPd5fSQIAlC2WB0D3SKZv7AXvdyFrXIJQLTnn0miEv29HDquiJfgjNTGPQYfPg6GfCFPXyO9RQa9GjTJ8VcUjvw9C8wkrOyETWcj32rCGnO6DbRpw8fjQ/WX7GeoIaEdQQyTDuTIiVkfEKYtT1AbLI63wGVJIGfGFEEZ1mxN8J0vcDG4WUEZ0IVrhK6TXlPHoHooOR0kC+hx71uIUM7Qdyggt5CytjoCBT5W4tKoBA0cVMgqcqiOgjJgtl1KCjhEnmJUl7KBlWd+OGP9HjnGGE2uPCNoQ7kDSqJ/KsI2FyTrtTlqFE2vbU7UnOBGRRpfTsMnc75VLsIpNpFWYkPrwS0wqwqrUhl1Ma7NpqV8Y27ghPCF1uZSWYF767h/0QWe9CEnj22lYupwMboNbhqfEp2FuJEPN/zIV7jUhzJtPM9PBvWaEdZhq68RDVQf33spEDUtpcj3tF5fuzGpqosw0AAAAAElFTkSuQmCC');
+          mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMcAAABZCAMAAAC9t8DHAAAALVBMVEVHcEzi4+Tp6uvv8PHx8vPy8/T19fb29vb3+Pj5+fr6+/v7+/v9/f3+/v7///+I7qq0AAAADnRSTlMADx8wQ1VqhJ+3yt7u+X/ouusAAANMSURBVHja3duLbt0wCAZg8BUw8P6Pu3bSuqpZ1jgOR6q/B/Avgp2rA1dgLrV1YmbqrZaMECA4LZVGPNTM3c3dzHQwtZJgynya+ZuH0lIlUX9j/oUKnQy+nnZkQvV+WulifspMen5yNsWkYWX17wwqCE/ASiFp2Fj9CuUC6+rltAozCptfZEoZ1mTSa1HuPpOWuvqM0RDuwz5i0oqYT+IMdxWeTTMul1aG+jQbFW7BNnzeaPAdJPM7tCPMwx6Ultj8HiOEo6g0pwT/kdlvs5OhY9KcE5zK4h4w9KvTEru/rpAsQWnIvmpiaiVZT8OJM1VQRxL7MusAR818nXG6Wob5MmtwUNQPwk6/iU3N141yNl3XEV7qhrl7wDwmfwzhwtpYXCJF/TmUFspYmlnIfhB1Zc/s5kHdb+aPkgxnivijtMIHFH+WSYF/q8MfxjjbjvWnNuzqT7N2aEf0Islk7h7WkGoeQSrCZ1jFI2j5OFnFUCr4qQo2j0HwWx4eRbmX/K52MY8yErxrHkl1DFXzQFZDptXr0eGWJFTsxGr+41kBQPKfrwMk2aAfDJCG/3yCUNR/vpGhmW+x0PsWdVTovgFrQL4B68C+gw7Dd0CgvgPapB/7rA/yHbRNrh91l/uSPerQssv97h7PH4yAvMVlEGCT53NoOyzzPd5fSQIAlC2WB0D3SKZv7AXvdyFrXIJQLTnn0miEv29HDquiJfgjNTGPQYfPg6GfCFPXyO9RQa9GjTJ8VcUjvw9C8wkrOyETWcj32rCGnO6DbRpw8fjQ/WX7GeoIaEdQQyTDuTIiVkfEKYtT1AbLI63wGVJIGfGFEEZ1mxN8J0vcDG4WUEZ0IVrhK6TXlPHoHooOR0kC+hx71uIUM7Qdyggt5CytjoCBT5W4tKoBA0cVMgqcqiOgjJgtl1KCjhEnmJUl7KBlWd+OGP9HjnGGE2uPCNoQ7kDSqJ/KsI2FyTrtTlqFE2vbU7UnOBGRRpfTsMnc75VLsIpNpFWYkPrwS0wqwqrUhl1Ma7NpqV8Y27ghPCF1uZSWYF767h/0QWe9CEnj22lYupwMboNbhqfEp2FuJEPN/zIV7jUhzJtPM9PBvWaEdZhq68RDVQf33spEDUtpcj3tF5fuzGpqosw0AAAAAElFTkSuQmCC');
   -webkit-mask-size: 100% 100%;
           mask-size: 100% 100%;
   aspect-ratio: 747/334;

package/dist/index.d.ts

@@ -71,8 +71,11 @@ interface DropdownProps {
     tokenImageUrl?: string;
     chainImageUrl?: string;
     tokenSymbol?: string;
+    chainBgColor?: string;
+    tokenBgColor?: string;
+    tokenTextColor?: string;
 }
-declare function Dropdown({ chainImageUrl, tokenImageUrl, tokenSymbol, }: DropdownProps): react_jsx_runtime.JSX.Element;
+declare function Dropdown({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor, tokenBgColor, tokenTextColor, }: DropdownProps): react_jsx_runtime.JSX.Element;
 
 declare function FeeButton(): react_jsx_runtime.JSX.Element;
 
@@ -142,10 +145,13 @@ interface SwapConfigurationProps {
     isFetching?: boolean;
     chain?: {
         iconUrl: string;
+        bgColor: string;
     };
     token?: {
         iconUrl: string;
         symbol: string;
+        bgColor: string;
+        textColor: string;
     };
 }
 declare function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd, balance, isFetching, chain, token, direction, }: SwapConfigurationProps): react_jsx_runtime.JSX.Element;

package/package.json

@@ -2,10 +2,10 @@
   "name": "@0xsquid/ui",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/0xsquid/api-widget.git"
+    "url": "git+https://github.com/0xsquid/squid-ui.git"
   },
   "description": "Squid's UI components",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "author": "",
   "license": "MIT",
   "scripts": {
@@ -68,7 +68,7 @@
     "postcss": "8.4.36",
     "prettier": "3.2.5",
     "prettier-plugin-tailwindcss": "0.5.12",
-    "release-it": "16.3.0",
+    "release-it": "17.2.1",
     "rollup": "^4.17.2",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",