@relayprotocol/relay-kit-ui 7.1.5 → 8.0.0

package/_cjs/src/components/common/PercentageButtons.js

@@ -4,7 +4,8 @@ exports.PercentageButtons = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const index_js_1 = require("../primitives/index.js");
 const maxAmountBuffer_js_1 = require("../../constants/maxAmountBuffer.js");
-const PercentageButtons = ({ balance, onPercentageClick, getFeeBufferAmount, fromChain, publicClient, isFromNative, variant = 'desktop', percentages = [20, 50], buttonStyles: customButtonStyles }) => {
+const cn_js_1 = require("../../utils/cn.js");
+const PercentageButtons = ({ balance, onPercentageClick, getFeeBufferAmount, fromChain, publicClient, isFromNative, variant = 'desktop', percentages = [20, 50], buttonClassName: customButtonClassName }) => {
     const getExecutionBuffer = (amount) => {
         if (amount <= 0n)
             return 0n;
@@ -13,23 +14,9 @@ const PercentageButtons = ({ balance, onPercentageClick, getFeeBufferAmount, fro
         return bpsBuffer > minimumBuffer ? bpsBuffer : minimumBuffer;
     };
     const isMobile = variant === 'mobile';
-    const defaultButtonStyles = {
-        fontSize: isMobile ? 14 : 12,
-        fontWeight: '500',
-        px: '1',
-        py: isMobile ? '6px' : '1',
-        minHeight: isMobile ? 'auto' : '23px',
-        lineHeight: '100%',
-        backgroundColor: 'widget-selector-background',
-        border: 'none',
-        borderRadius: isMobile ? '6px' : '12px',
-        flex: isMobile ? '1' : 'none',
-        justifyContent: 'center',
-        _hover: {
-            backgroundColor: 'widget-selector-hover-background'
-        }
-    };
-    const buttonStyles = customButtonStyles || defaultButtonStyles;
+    const defaultButtonClassName = (0, cn_js_1.cn)('relay:font-medium', isMobile ? 'relay:px-[4px] relay:py-[6px]' : 'relay:p-[4px]', isMobile ? 'relay:h-[26px]' : 'relay:h-[23px]', 'relay:min-h-0', 'relay:leading-none', 'relay:bg-[var(--relay-colors-widget-selector-background)]', 'relay:border-none', isMobile ? 'relay:rounded-[6px]' : 'relay:rounded-[12px]', isMobile ? 'relay:flex-1' : '', 'relay:justify-center', 'relay:hover:bg-[var(--relay-colors-widget-selector-hover-background)]');
+    const buttonFontSize = isMobile ? '14px' : '12px';
+    const buttonClassName = customButtonClassName || defaultButtonClassName;
     const handleMaxClick = async () => {
         if (!balance || !fromChain)
             return;
@@ -56,16 +43,12 @@ const PercentageButtons = ({ balance, onPercentageClick, getFeeBufferAmount, fro
             getFeeBufferAmount(fromChain.vmType, fromChain.id, 0n, null);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(index_js_1.Flex, { css: {
-            gap: '1',
-            width: isMobile ? '100%' : 'auto',
-            mb: isMobile ? '1' : '0'
-        }, children: [percentages.map((percent) => ((0, jsx_runtime_1.jsxs)(index_js_1.Button, { "aria-label": `${percent}%`, css: buttonStyles, color: "white", disabled: !balance || balance === 0n, onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)(index_js_1.Flex, { className: (0, cn_js_1.cn)('relay:gap-1', isMobile ? 'relay:w-full' : 'relay:w-auto', isMobile ? 'relay:mb-1' : 'relay:mb-0'), children: [percentages.map((percent) => ((0, jsx_runtime_1.jsxs)(index_js_1.Button, { "aria-label": `${percent}%`, className: buttonClassName, color: "white", size: "none", style: { fontSize: buttonFontSize }, disabled: !balance || balance === 0n, onClick: () => {
                     if (balance && balance > 0n) {
                         const percentageBuffer = (balance * BigInt(percent)) / 100n;
                         onPercentageClick(percentageBuffer, `${percent}%`);
                     }
-                }, children: [percent, "%"] }, percent))), (0, jsx_runtime_1.jsx)(index_js_1.Button, { "aria-label": "MAX", css: buttonStyles, color: "white", disabled: !balance || balance === 0n, onMouseEnter: handleMaxMouseEnter, onClick: handleMaxClick, children: "MAX" })] }));
+                }, children: [percent, "%"] }, percent))), (0, jsx_runtime_1.jsx)(index_js_1.Button, { "aria-label": "MAX", className: buttonClassName, color: "white", size: "none", style: { fontSize: buttonFontSize }, disabled: !balance || balance === 0n, onMouseEnter: handleMaxMouseEnter, onClick: handleMaxClick, children: "MAX" })] }));
 };
 exports.PercentageButtons = PercentageButtons;
 //# sourceMappingURL=PercentageButtons.js.map

package/_cjs/src/components/common/PercentageButtons.js.map

@@ -1 +1 @@
-{"version":3,"file":"PercentageButtons.js","sourceRoot":"","sources":["../../../../src/components/common/PercentageButtons.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PercentageButtons.js","sourceRoot":"","sources":["../../../../src/components/common/PercentageButtons.tsx"],"names":[],"mappings":"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"}

package/_cjs/src/components/common/SlippageToleranceConfig.js

@@ -6,114 +6,40 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Dropdown_js_1 = require("../primitives/Dropdown.js");
 const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
-const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
+const faGear_1 = require("@fortawesome/free-solid-svg-icons/faGear");
+const faInfoCircle_1 = require("@fortawesome/free-solid-svg-icons/faInfoCircle");
 const index_js_1 = require("../primitives/index.js");
 const Tooltip_js_1 = tslib_1.__importDefault(require("../primitives/Tooltip.js"));
 const Tabs_js_1 = require("../primitives/Tabs.js");
 const slippage_js_1 = require("../../utils/slippage.js");
+const tokenToColor = (token) => {
+    if (!token)
+        return undefined;
+    return `var(--relay-colors-${token})`;
+};
 const events_js_1 = require("../../constants/events.js");
 const usehooks_ts_1 = require("usehooks-ts");
 const useFallbackState_js_1 = tslib_1.__importDefault(require("../../hooks/useFallbackState.js"));
 const Modal_js_1 = require("./Modal.js");
 const numbers_js_1 = require("../../utils/numbers.js");
-const SlippageTabs = ({ mode, setMode, displayValue, setDisplayValue, handleInputChange, handleKeyDown, handleClose, slippageRating, slippageRatingColor, inputRef, widgetType }) => {
+const cn_js_1 = require("../../utils/cn.js");
+const SlippageTabs = ({ mode, setMode, displayValue, setDisplayValue, handleInputChange, handleKeyDown, handleClose, slippageRating, slippageRatingColor, inputRef }) => {
     const isMobile = (0, usehooks_ts_1.useMediaQuery)('(max-width: 520px)');
-    const isTokenWidget = widgetType === 'token';
     return ((0, jsx_runtime_1.jsxs)(Tabs_js_1.TabsRoot, { value: mode, onValueChange: (value) => {
             setMode(value);
             if (value === 'Auto') {
                 setDisplayValue(undefined);
             }
-        }, css: {
-            display: 'flex',
-            flexDirection: 'column',
-            width: '100%',
-            gap: isTokenWidget ? '4px' : '3',
-            sm: {
-                gap: isTokenWidget ? '4px' : '2'
-            }
-        }, children: [(0, jsx_runtime_1.jsxs)(Tabs_js_1.TabsList, { css: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(Tabs_js_1.TabsTrigger, { value: "Auto", css: { width: '50%' }, children: "Auto" }), (0, jsx_runtime_1.jsx)(Tabs_js_1.TabsTrigger, { value: "Custom", css: { width: '50%' }, children: "Custom" })] }), (0, jsx_runtime_1.jsx)(Tabs_js_1.TabsContent, { value: "Auto", css: { width: '100%' }, children: (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: isTokenWidget ? 'body3' : 'body2', color: "subtle", css: isTokenWidget
-                        ? { lineHeight: 'normal', fontSize: '12px' }
-                        : { lineHeight: '14px', sm: { fontSize: '12px' } }, children: "We'll set the slippage automatically to minimize the failure rate." }) }), (0, jsx_runtime_1.jsxs)(Tabs_js_1.TabsContent, { value: "Custom", css: {
-                    display: 'flex',
-                    width: '100%',
-                    overflow: 'hidden',
-                    flexDirection: 'column',
-                    gap: '1'
-                }, children: [(0, jsx_runtime_1.jsxs)(index_js_1.Flex, { css: {
-                            display: 'none',
-                            smDown: {
-                                display: 'flex',
-                                width: '100%',
-                                gap: '2',
-                                mb: '2'
-                            }
-                        }, children: [(0, jsx_runtime_1.jsx)(index_js_1.Button, { color: "ghost", size: "small", css: {
-                                    flex: 1,
-                                    minHeight: 32,
-                                    backgroundColor: 'gray3',
-                                    fontWeight: 500,
-                                    fontSize: 14,
-                                    py: 2,
-                                    borderRadius: '6px',
-                                    justifyContent: 'center',
-                                    '&:hover': {
-                                        backgroundColor: 'gray5'
-                                    }
-                                }, onClick: () => handleInputChange('1'), children: "1%" }), (0, jsx_runtime_1.jsx)(index_js_1.Button, { color: "ghost", size: "small", css: {
-                                    flex: 1,
-                                    minHeight: 32,
-                                    backgroundColor: 'gray3',
-                                    fontWeight: 500,
-                                    fontSize: 14,
-                                    py: 2,
-                                    borderRadius: '6px',
-                                    justifyContent: 'center',
-                                    '&:hover': {
-                                        backgroundColor: 'gray5'
-                                    }
-                                }, onClick: () => handleInputChange('2'), children: "2%" }), (0, jsx_runtime_1.jsx)(index_js_1.Button, { color: "ghost", size: "small", css: {
-                                    flex: 1,
-                                    minHeight: 32,
-                                    backgroundColor: 'gray3',
-                                    fontWeight: 500,
-                                    fontSize: 14,
-                                    py: 2,
-                                    borderRadius: '6px',
-                                    justifyContent: 'center',
-                                    '&:hover': {
-                                        backgroundColor: 'gray5'
-                                    }
-                                }, onClick: () => handleInputChange('5'), children: "5%" })] }), (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { css: { display: 'flex', width: '100%', position: 'relative' }, children: [(0, jsx_runtime_1.jsx)(index_js_1.Input, { ref: inputRef, value: displayValue || '', onChange: (e) => handleInputChange(e.target.value), onKeyDown: handleKeyDown, onBlur: handleClose, onFocus: (e) => {
+        }, className: "relay:flex relay:flex-col relay:w-full relay:gap-3 relay:sm:gap-2", children: [(0, jsx_runtime_1.jsxs)(Tabs_js_1.TabsList, { className: "relay:w-full", children: [(0, jsx_runtime_1.jsx)(Tabs_js_1.TabsTrigger, { value: "Auto", className: "relay:w-1/2", children: "Auto" }), (0, jsx_runtime_1.jsx)(Tabs_js_1.TabsTrigger, { value: "Custom", className: "relay:w-1/2", children: "Custom" })] }), (0, jsx_runtime_1.jsx)(Tabs_js_1.TabsContent, { value: "Auto", className: "relay:w-full", children: (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "body2", color: "subtle", className: "relay:leading-[14px] relay:sm:text-xs", children: "We'll set the slippage automatically to minimize the failure rate." }) }), (0, jsx_runtime_1.jsxs)(Tabs_js_1.TabsContent, { value: "Custom", className: "relay:flex relay:w-full relay:overflow-hidden relay:flex-col relay:gap-1", children: [(0, jsx_runtime_1.jsxs)(index_js_1.Flex, { className: "relay:hidden relay:max-[520px]:flex relay:max-[520px]:w-full relay:max-[520px]:gap-2 relay:max-[520px]:mb-2", children: [(0, jsx_runtime_1.jsx)(index_js_1.Button, { color: "grey", size: "none", className: "relay:flex-1 relay:min-h-0 relay:h-[28px] relay:font-medium relay:text-sm relay:rounded-[6px] relay:justify-center", onClick: () => handleInputChange('1'), children: "1%" }), (0, jsx_runtime_1.jsx)(index_js_1.Button, { color: "grey", size: "none", className: "relay:flex-1 relay:min-h-0 relay:h-[28px] relay:font-medium relay:text-sm relay:rounded-[6px] relay:justify-center", onClick: () => handleInputChange('2'), children: "2%" }), (0, jsx_runtime_1.jsx)(index_js_1.Button, { color: "grey", size: "none", className: "relay:flex-1 relay:min-h-0 relay:h-[28px] relay:font-medium relay:text-sm relay:rounded-[6px] relay:justify-center", onClick: () => handleInputChange('5'), children: "5%" })] }), (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { className: "relay:flex relay:w-full relay:relative", children: [(0, jsx_runtime_1.jsx)(index_js_1.Input, { ref: inputRef, value: displayValue || '', onChange: (e) => handleInputChange(e.target.value), onKeyDown: handleKeyDown, onBlur: handleClose, onFocus: (e) => {
                                     if (isMobile) {
                                         const input = e.target;
                                         setTimeout(() => {
                                             input.setSelectionRange(input.value.length, input.value.length);
                                         }, 0);
                                     }
-                                }, placeholder: "2", containerCss: {
-                                    width: '100%'
-                                }, css: {
-                                    height: '36px',
-                                    pr: '28px !important',
-                                    border: 'none',
-                                    textAlign: 'right',
-                                    width: '100%',
-                                    smDown: {
-                                        backgroundColor: 'transparent',
-                                        '--borderColor': 'colors.gray.5',
-                                        border: '1px solid var(--borderColor)'
-                                    },
-                                    color: slippageRatingColor
-                                } }), (0, jsx_runtime_1.jsx)(index_js_1.Box, { css: {
-                                    position: 'absolute',
-                                    right: 8,
-                                    top: '50%',
-                                    transform: 'translateY(-50%)',
-                                    color: slippageRatingColor
-                                }, children: "%" })] }), slippageRating === 'very-high' ? ((0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "body3", css: { color: 'red11' }, children: "Very high slippage" })) : null, slippageRating === 'high' ? ((0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "body3", css: { color: 'amber11' }, children: "High slippage" })) : null] })] }));
+                                }, placeholder: "2", containerClassName: "relay:w-full", className: (0, cn_js_1.cn)('relay:h-9 relay:!pr-7 relay:border-none relay:text-right relay:w-full', 'relay:max-[520px]:bg-transparent relay:max-[520px]:border relay:max-[520px]:border-solid relay:max-[520px]:border-[var(--relay-colors-gray-5)]'), inputStyle: { color: tokenToColor(slippageRatingColor) } }), (0, jsx_runtime_1.jsx)(index_js_1.Box, { className: "relay:absolute relay:right-2 relay:top-1/2 relay:-translate-y-1/2", children: (0, jsx_runtime_1.jsx)("span", { style: { color: tokenToColor(slippageRatingColor) }, children: "%" }) })] }), slippageRating === 'very-high' ? ((0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "body3", color: "red", children: "Very high slippage" })) : null, slippageRating === 'high' ? ((0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "body3", color: "warningSecondary", children: "High slippage" })) : null] })] }));
 };
-const SlippageToleranceConfig = ({ open: _open, setOpen: _setOpen, setSlippageTolerance: externalSetValue, onAnalyticEvent, currentSlippageTolerance, variant = 'dropdown', label = 'Slippage', onOpenSlippageConfig, showGearIcon = true, showLabel = false, widgetType }) => {
+const SlippageToleranceConfig = ({ open: _open, setOpen: _setOpen, setSlippageTolerance: externalSetValue, onAnalyticEvent, currentSlippageTolerance, variant = 'dropdown', label = 'Slippage', onOpenSlippageConfig, showGearIcon = true, showLabel = false }) => {
     const isMobile = (0, usehooks_ts_1.useMediaQuery)('(max-width: 520px)');
     const [displayValue, setDisplayValue] = (0, react_1.useState)(() => currentSlippageTolerance !== undefined
         ? (0, numbers_js_1.convertBpsToPercent)(currentSlippageTolerance)
@@ -194,27 +120,10 @@ const SlippageToleranceConfig = ({ open: _open, setOpen: _setOpen, setSlippageTo
             value: isAutoMode ? 'auto' : displayValue
         });
     };
-    const triggerButton = widgetType === 'token' ? ((0, jsx_runtime_1.jsxs)(index_js_1.Button, { "aria-label": "Slippage Tolerance Configuration", color: "ghost", size: "none", css: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            gap: '4px',
-            borderRadius: '8px',
-            padding: '4px 6px',
-            backgroundColor: 'gray3'
-        }, children: [(0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle3", color: "subtle", children: "Slippage" }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle3", children: displayValue ? `${displayValue}%` : 'Auto' })] })) : ((0, jsx_runtime_1.jsxs)(index_js_1.Button, { "aria-label": "Slippage Tolerance Configuration", color: "ghost", size: "none", css: {
-            alignItems: 'center',
-            justifyContent: 'center',
-            gap: '1',
-            bg: 'subtle-background-color',
-            color: slippageRatingColor ?? 'gray9',
-            p: '2',
-            borderRadius: 12,
-            border: '1px solid',
-            borderColor: 'gray5',
-            height: '36px',
-            px: '10px'
-        }, children: [open === false && displayValue && ((0, jsx_runtime_1.jsxs)(index_js_1.Text, { style: "subtitle2", css: { color: slippageRatingColor }, children: [displayValue, "%"] })), (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faGear })] }));
+    const triggerButton = ((0, jsx_runtime_1.jsxs)(index_js_1.Button, { "aria-label": "Slippage Tolerance Configuration", color: "ghost", size: "none", className: "relay:items-center relay:justify-center relay:gap-1 relay:p-2 relay:rounded-[12px] relay:border relay:border-solid relay:border-[var(--relay-colors-gray5)] relay:h-9 relay:px-[10px]", style: {
+            color: tokenToColor(slippageRatingColor) ?? 'var(--relay-colors-gray9)',
+            backgroundColor: 'var(--relay-colors-widget-card-background)'
+        }, children: [open === false && displayValue && ((0, jsx_runtime_1.jsxs)(index_js_1.Text, { style: "subtitle2", color: slippageRatingColor === 'red11' ? 'red' : slippageRatingColor === 'amber11' ? 'warningSecondary' : undefined, children: [displayValue, "%"] })), (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: faGear_1.faGear })] }));
     const slippageTabsProps = {
         mode,
         setMode,
@@ -225,19 +134,14 @@ const SlippageToleranceConfig = ({ open: _open, setOpen: _setOpen, setSlippageTo
         handleClose,
         slippageRating,
         slippageRatingColor,
-        inputRef,
-        widgetType
+        inputRef
     };
-    return ((0, jsx_runtime_1.jsx)("div", { className: "relay-kit-reset", children: isMobile ? ((0, jsx_runtime_1.jsx)(Modal_js_1.Modal, { open: open, onOpenChange: (isOpen) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "relay-kit-reset relay:inline-flex", children: isMobile ? ((0, jsx_runtime_1.jsx)(Modal_js_1.Modal, { open: open, onOpenChange: (isOpen) => {
                 setOpen(isOpen);
                 if (!isOpen) {
                     handleClose();
                 }
-            }, trigger: triggerButton, css: {
-                width: '100%',
-                minHeight: '262px',
-                maxHeight: '90vh'
-            }, children: (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", css: { width: '100%', gap: '4' }, children: [(0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "h6", children: "Max Slippage" }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "body3", color: "subtle", children: "If the price exceeds the maximum slippage percentage, the transaction will revert." }), (0, jsx_runtime_1.jsx)(SlippageTabs, { ...slippageTabsProps })] }) })) : ((0, jsx_runtime_1.jsx)(Dropdown_js_1.Dropdown, { open: open, onOpenChange: (isOpen) => {
+            }, trigger: triggerButton, className: "relay:w-full relay:min-h-[262px] relay:max-h-[90vh]", children: (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", className: "relay:w-full relay:gap-4", children: [(0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "h6", children: "Max Slippage" }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "body3", color: "subtle", children: "If the price exceeds the maximum slippage percentage, the transaction will revert." }), (0, jsx_runtime_1.jsx)(SlippageTabs, { ...slippageTabsProps })] }) })) : ((0, jsx_runtime_1.jsx)(Dropdown_js_1.Dropdown, { open: open, onOpenChange: (isOpen) => {
                 setOpen(isOpen);
                 if (!isOpen) {
                     handleClose();
@@ -245,12 +149,12 @@ const SlippageToleranceConfig = ({ open: _open, setOpen: _setOpen, setSlippageTo
             }, trigger: triggerButton, contentProps: {
                 align: 'end',
                 sideOffset: 5,
-                css: { maxWidth: 188, mx: 0 },
+                className: 'relay:max-w-[188px] relay:mx-0 relay:p-3',
                 avoidCollisions: false,
                 onCloseAutoFocus: (e) => {
                     e.preventDefault();
                 }
-            }, children: (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", css: { width: '100%', gap: '2', maxWidth: 188 }, children: [(0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "row", css: { gap: '1', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle3", children: "Max Slippage" }), (0, jsx_runtime_1.jsx)(Tooltip_js_1.default, { content: (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "tiny", css: { display: 'inline-block', maxWidth: 190 }, children: "If the price exceeds the maximum slippage percentage, the transaction will revert." }), children: (0, jsx_runtime_1.jsx)(index_js_1.Box, { css: { color: 'gray8' }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faInfoCircle, width: 14, height: 14 }) }) })] }), (0, jsx_runtime_1.jsx)(SlippageTabs, { ...slippageTabsProps })] }) })) }));
+            }, children: (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", className: "relay:w-full relay:gap-2 relay:max-w-[188px]", children: [(0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "row", className: "relay:gap-1 relay:items-center", children: [(0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle3", children: "Max Slippage" }), (0, jsx_runtime_1.jsx)(Tooltip_js_1.default, { content: (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "tiny", className: "relay:inline-block relay:max-w-[190px]", children: "If the price exceeds the maximum slippage percentage, the transaction will revert." }), children: (0, jsx_runtime_1.jsx)(index_js_1.Box, { className: "relay:text-[color:var(--relay-colors-gray8)]", children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: faInfoCircle_1.faInfoCircle, width: 14, height: 14 }) }) })] }), (0, jsx_runtime_1.jsx)(SlippageTabs, { ...slippageTabsProps })] }) })) }));
 };
 exports.SlippageToleranceConfig = SlippageToleranceConfig;
 //# sourceMappingURL=SlippageToleranceConfig.js.map

package/_cjs/src/components/common/SlippageToleranceConfig.js.map

@@ -1 +1 @@
-{"version":3,"file":"SlippageToleranceConfig.js","sourceRoot":"","sources":["../../../../src/components/common/SlippageToleranceConfig.tsx"],"names":[],"mappings":";;;;;AAOA,iCAAmD;AACnD,2DAAoD;AACpD,sEAAgE;AAChE,4EAAwE;AACxE,qDAAuE;AACvE,kFAA8C;AAC9C,mDAK8B;AAC9B,yDAIgC;AAChC,yDAAsD;AACtD,6CAA6D;AAC7D,kGAA8D;AAC9D,yCAAkC;AAClC,uDAA4D;AA8B5D,MAAM,YAAY,GAA0B,CAAC,EAC3C,IAAI,EACJ,OAAO,EACP,YAAY,EACZ,eAAe,EACf,iBAAiB,EACjB,aAAa,EACb,WAAW,EACX,cAAc,EACd,mBAAmB,EACnB,QAAQ,EACR,UAAU,EACX,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,IAAA,2BAAa,EAAC,oBAAoB,CAAC,CAAA;IACpD,MAAM,aAAa,GAAG,UAAU,KAAK,OAAO,CAAA;IAC5C,OAAO,CACL,wBAAC,kBAAQ,IACP,KAAK,EAAE,IAAI,EACX,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE;YACvB,OAAO,CAAC,KAA8B,CAAC,CAAA;YACvC,IAAI,KAAK,KAAK,MAAM,EAAE,CAAC;gBACrB,eAAe,CAAC,SAAS,CAAC,CAAA;YAC5B,CAAC;QACH,CAAC,EACD,GAAG,EAAE;YACH,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,QAAQ;YACvB,KAAK,EAAE,MAAM;YACb,GAAG,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG;YAChC,EAAE,EAAE;gBACF,GAAG,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG;aACjC;SACF,aAED,wBAAC,kBAAQ,IAAC,GAAG,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,aAC9B,uBAAC,qBAAW,IAAC,KAAK,EAAC,MAAM,EAAC,GAAG,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,qBAEjC,EACd,uBAAC,qBAAW,IAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,uBAEnC,IACL,EAEX,uBAAC,qBAAW,IAAC,KAAK,EAAC,MAAM,EAAC,GAAG,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,YAC9C,uBAAC,eAAI,IACH,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,EACxC,KAAK,EAAC,QAAQ,EACd,GAAG,EACD,aAAa;wBACX,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE;wBAC5C,CAAC,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,mFAIjD,GACK,EAEd,wBAAC,qBAAW,IACV,KAAK,EAAC,QAAQ,EACd,GAAG,EAAE;oBACH,OAAO,EAAE,MAAM;oBACf,KAAK,EAAE,MAAM;oBACb,QAAQ,EAAE,QAAQ;oBAClB,aAAa,EAAE,QAAQ;oBACvB,GAAG,EAAE,GAAG;iBACT,aAGD,wBAAC,eAAI,IACH,GAAG,EAAE;4BACH,OAAO,EAAE,MAAM;4BACf,MAAM,EAAE;gCACN,OAAO,EAAE,MAAM;gCACf,KAAK,EAAE,MAAM;gCACb,GAAG,EAAE,GAAG;gCACR,EAAE,EAAE,GAAG;6BACR;yBACF,aAED,uBAAC,iBAAM,IACL,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE;oCACH,IAAI,EAAE,CAAC;oCACP,SAAS,EAAE,EAAE;oCACb,eAAe,EAAE,OAAO;oCACxB,UAAU,EAAE,GAAG;oCACf,QAAQ,EAAE,EAAE;oCACZ,EAAE,EAAE,CAAC;oCACL,YAAY,EAAE,KAAK;oCACnB,cAAc,EAAE,QAAQ;oCACxB,SAAS,EAAE;wCACT,eAAe,EAAE,OAAO;qCACzB;iCACF,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,GAAG,CAAC,mBAG9B,EACT,uBAAC,iBAAM,IACL,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE;oCACH,IAAI,EAAE,CAAC;oCACP,SAAS,EAAE,EAAE;oCACb,eAAe,EAAE,OAAO;oCACxB,UAAU,EAAE,GAAG;oCACf,QAAQ,EAAE,EAAE;oCACZ,EAAE,EAAE,CAAC;oCACL,YAAY,EAAE,KAAK;oCACnB,cAAc,EAAE,QAAQ;oCACxB,SAAS,EAAE;wCACT,eAAe,EAAE,OAAO;qCACzB;iCACF,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,GAAG,CAAC,mBAG9B,EACT,uBAAC,iBAAM,IACL,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE;oCACH,IAAI,EAAE,CAAC;oCACP,SAAS,EAAE,EAAE;oCACb,eAAe,EAAE,OAAO;oCACxB,UAAU,EAAE,GAAG;oCACf,QAAQ,EAAE,EAAE;oCACZ,EAAE,EAAE,CAAC;oCACL,YAAY,EAAE,KAAK;oCACnB,cAAc,EAAE,QAAQ;oCACxB,SAAS,EAAE;wCACT,eAAe,EAAE,OAAO;qCACzB;iCACF,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,GAAG,CAAC,mBAG9B,IACJ,EAEP,wBAAC,eAAI,IAAC,GAAG,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,aACjE,uBAAC,gBAAK,IACJ,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,YAAY,IAAI,EAAE,EACzB,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE,CAC7C,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAEnC,SAAS,EAAE,aAAa,EACxB,MAAM,EAAE,WAAW,EACnB,OAAO,EAAE,CAAC,CAAqC,EAAE,EAAE;oCAEjD,IAAI,QAAQ,EAAE,CAAC;wCACb,MAAM,KAAK,GAAG,CAAC,CAAC,MAAM,CAAA;wCACtB,UAAU,CAAC,GAAG,EAAE;4CACd,KAAK,CAAC,iBAAiB,CACrB,KAAK,CAAC,KAAK,CAAC,MAAM,EAClB,KAAK,CAAC,KAAK,CAAC,MAAM,CACnB,CAAA;wCACH,CAAC,EAAE,CAAC,CAAC,CAAA;oCACP,CAAC;gCACH,CAAC,EACD,WAAW,EAAC,GAAG,EACf,YAAY,EAAE;oCACZ,KAAK,EAAE,MAAM;iCACd,EACD,GAAG,EAAE;oCACH,MAAM,EAAE,MAAM;oCACd,EAAE,EAAE,iBAAiB;oCACrB,MAAM,EAAE,MAAM;oCACd,SAAS,EAAE,OAAO;oCAClB,KAAK,EAAE,MAAM;oCACb,MAAM,EAAE;wCACN,eAAe,EAAE,aAAa;wCAC9B,eAAe,EAAE,eAAe;wCAChC,MAAM,EAAE,8BAA8B;qCACvC;oCACD,KAAK,EAAE,mBAAmB;iCAC3B,GACD,EACF,uBAAC,cAAG,IACF,GAAG,EAAE;oCACH,QAAQ,EAAE,UAAU;oCACpB,KAAK,EAAE,CAAC;oCACR,GAAG,EAAE,KAAK;oCACV,SAAS,EAAE,kBAAkB;oCAC7B,KAAK,EAAE,mBAAmB;iCAC3B,kBAGG,IACD,EAEN,cAAc,KAAK,WAAW,CAAC,CAAC,CAAC,CAChC,uBAAC,eAAI,IAAC,KAAK,EAAC,OAAO,EAAC,GAAG,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,mCAEpC,CACR,CAAC,CAAC,CAAC,IAAI,EACP,cAAc,KAAK,MAAM,CAAC,CAAC,CAAC,CAC3B,uBAAC,eAAI,IAAC,KAAK,EAAC,OAAO,EAAC,GAAG,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,8BAEtC,CACR,CAAC,CAAC,CAAC,IAAI,IACI,IACL,CACZ,CAAA;AACH,CAAC,CAAA;AAEM,MAAM,uBAAuB,GAAqC,CAAC,EACxE,IAAI,EAAE,KAAK,EACX,OAAO,EAAE,QAAQ,EACjB,oBAAoB,EAAE,gBAAgB,EACtC,eAAe,EACf,wBAAwB,EACxB,OAAO,GAAG,UAAU,EACpB,KAAK,GAAG,UAAU,EAClB,oBAAoB,EACpB,YAAY,GAAG,IAAI,EACnB,SAAS,GAAG,KAAK,EACjB,UAAU,EACX,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,IAAA,2BAAa,EAAC,oBAAoB,CAAC,CAAA;IACpD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAqB,GAAG,EAAE,CACxE,wBAAwB,KAAK,SAAS;QACpC,CAAC,CAAC,IAAA,gCAAmB,EAAC,wBAAwB,CAAC;QAC/C,CAAC,CAAC,SAAS,CACd,CAAA;IACD,MAAM,CAAC,qBAAqB,CAAC,GAAG,IAAA,8BAAgB,EAAC,YAAY,EAAE,GAAG,CAAC,CAAA;IAEnE,MAAM,QAAQ,GAAG,qBAAqB;QACpC,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,qBAAqB,CAAC,GAAG,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE;QACrE,CAAC,CAAC,SAAS,CAAA;IAEb,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,gBAAgB,CAAC,QAAQ,CAAC,CAAA;IAC5B,CAAC,EAAE,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAA;IAEhC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAC9B,wBAAwB,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAC3D,CAAA;IACD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,6BAAgB,EACtC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,EACnC,QAAQ;QACN,CAAC,CAAC,CAAC,KAAK,IAAI,KAAK,EAAE,QAA6C,CAAC;QACjE,CAAC,CAAC,SAAS,CACd,CAAA;IAED,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAmB,IAAI,CAAC,CAAA;IAE/C,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,IAAI,IAAI,IAAI,KAAK,QAAQ,EAAE,CAAC;YAC9B,UAAU,CAAC,GAAG,EAAE;gBACd,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAA;YAC3B,CAAC,EAAE,CAAC,CAAC,CAAA;QACP,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAA;IAEhB,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,IAAI,IAAI,wBAAwB,KAAK,SAAS,EAAE,CAAC;YACpD,eAAe,CAAC,IAAA,gCAAmB,EAAC,wBAAwB,CAAC,CAAC,CAAA;YAC9D,OAAO,CAAC,wBAAwB,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;QACrE,CAAC;IACH,CAAC,EAAE,CAAC,wBAAwB,EAAE,IAAI,CAAC,CAAC,CAAA;IAEpC,MAAM,cAAc,GAAG,YAAY;QACjC,CAAC,CAAC,IAAA,+BAAiB,EAAC,YAAY,CAAC;QACjC,CAAC,CAAC,SAAS,CAAA;IACb,MAAM,mBAAmB,GAAG,cAAc;QACxC,CAAC,CAAC,2BAAa,CAAC,cAAc,CAAC;QAC/B,CAAC,CAAC,SAAS,CAAA;IAEb,MAAM,iBAAiB,GAAG,CAAC,KAAa,EAAE,EAAE;QAC1C,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,CAAA;QAEpD,IAAI,cAAc,KAAK,EAAE,EAAE,CAAC;YAC1B,eAAe,CAAC,SAAS,CAAC,CAAA;YAC1B,OAAM;QACR,CAAC;QAED,IAAI,cAAc,KAAK,GAAG,EAAE,CAAC;YAC3B,eAAe,CAAC,IAAI,CAAC,CAAA;YACrB,OAAM;QACR,CAAC;QAED,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC;YAClD,OAAM;QACR,CAAC;QAED,IACE,cAAc,CAAC,UAAU,CAAC,GAAG,CAAC;YAC9B,cAAc,CAAC,MAAM,GAAG,CAAC;YACzB,cAAc,CAAC,CAAC,CAAC,KAAK,GAAG,EACzB,CAAC;YACD,OAAM;QACR,CAAC;QAED,MAAM,QAAQ,GAAG,UAAU,CAAC,cAAc,CAAC,CAAA;QAC3C,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC5B,IAAI,QAAQ,GAAG,GAAG,EAAE,CAAC;gBACnB,eAAe,CAAC,KAAK,CAAC,CAAA;gBACtB,OAAM;YACR,CAAC;QACH,CAAC;QAED,eAAe,CAAC,cAAc,CAAC,CAAA;IACjC,CAAC,CAAA;IAED,MAAM,aAAa,GAAG,CAAC,KAAsC,EAAE,EAAE;QAC/D,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YAC1B,KAAK,CAAC,cAAc,EAAE,CAAA;QACxB,CAAC;IACH,CAAC,CAAA;IAED,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,MAAM,KAAK,GAAG,UAAU,CAAC,YAAY,IAAI,GAAG,CAAC,CAAA;QAC7C,MAAM,UAAU,GACd,IAAI,KAAK,MAAM;YACf,YAAY,KAAK,SAAS;YAC1B,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC;YACnB,KAAK,GAAG,IAAI,CAAA;QAEd,IAAI,UAAU,EAAE,CAAC;YACf,eAAe,CAAC,SAAS,CAAC,CAAA;QAC5B,CAAC;QAED,eAAe,EAAE,CAAC,sBAAU,CAAC,2BAA2B,EAAE;YACxD,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,YAAY;SAC1C,CAAC,CAAA;IACJ,CAAC,CAAA;IAED,MAAM,aAAa,GACjB,UAAU,KAAK,OAAO,CAAC,CAAC,CAAC,CACvB,wBAAC,iBAAM,kBACM,kCAAkC,EAC7C,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,MAAM,EACX,GAAG,EAAE;YACH,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,GAAG,EAAE,KAAK;YACV,YAAY,EAAE,KAAK;YACnB,OAAO,EAAE,SAAS;YAClB,eAAe,EAAE,OAAO;SACzB,aAED,uBAAC,eAAI,IAAC,KAAK,EAAC,WAAW,EAAC,KAAK,EAAC,QAAQ,yBAE/B,EACP,uBAAC,eAAI,IAAC,KAAK,EAAC,WAAW,YACpB,YAAY,CAAC,CAAC,CAAC,GAAG,YAAY,GAAG,CAAC,CAAC,CAAC,MAAM,GACtC,IACA,CACV,CAAC,CAAC,CAAC,CACF,wBAAC,iBAAM,kBACM,kCAAkC,EAC7C,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,MAAM,EACX,GAAG,EAAE;YACH,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,GAAG,EAAE,GAAG;YACR,EAAE,EAAE,yBAAyB;YAC7B,KAAK,EAAE,mBAAmB,IAAI,OAAO;YACrC,CAAC,EAAE,GAAG;YACN,YAAY,EAAE,EAAE;YAChB,MAAM,EAAE,WAAW;YACnB,WAAW,EAAE,OAAO;YACpB,MAAM,EAAE,MAAM;YACd,EAAE,EAAE,MAAM;SACX,aAEA,IAAI,KAAK,KAAK,IAAI,YAAY,IAAI,CACjC,wBAAC,eAAI,IAAC,KAAK,EAAC,WAAW,EAAC,GAAG,EAAE,EAAE,KAAK,EAAE,mBAAmB,EAAE,aACxD,YAAY,SACR,CACR,EACD,uBAAC,mCAAe,IAAC,IAAI,EAAE,6BAAM,GAAI,IAC1B,CACV,CAAA;IAEH,MAAM,iBAAiB,GAAG;QACxB,IAAI;QACJ,OAAO;QACP,YAAY;QACZ,eAAe;QACf,iBAAiB;QACjB,aAAa;QACb,WAAW;QACX,cAAc;QACd,mBAAmB;QACnB,QAAQ;QACR,UAAU;KACX,CAAA;IAED,OAAO,CACL,gCAAK,SAAS,EAAC,iBAAiB,YAC7B,QAAQ,CAAC,CAAC,CAAC,CACV,uBAAC,gBAAK,IACJ,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,CAAC,MAAM,EAAE,EAAE;gBACvB,OAAO,CAAC,MAAM,CAAC,CAAA;gBACf,IAAI,CAAC,MAAM,EAAE,CAAC;oBACZ,WAAW,EAAE,CAAA;gBACf,CAAC;YACH,CAAC,EACD,OAAO,EAAE,aAAa,EACtB,GAAG,EAAE;gBACH,KAAK,EAAE,MAAM;gBACb,SAAS,EAAE,OAAO;gBAClB,SAAS,EAAE,MAAM;aAClB,YAED,wBAAC,eAAI,IAAC,SAAS,EAAC,QAAQ,EAAC,GAAG,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,aACvD,uBAAC,eAAI,IAAC,KAAK,EAAC,IAAI,6BAAoB,EAEpC,uBAAC,eAAI,IAAC,KAAK,EAAC,OAAO,EAAC,KAAK,EAAC,QAAQ,mGAG3B,EAEP,uBAAC,YAAY,OAAK,iBAAiB,GAAI,IAClC,GACD,CACT,CAAC,CAAC,CAAC,CACF,uBAAC,sBAAQ,IACP,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,CAAC,MAAM,EAAE,EAAE;gBACvB,OAAO,CAAC,MAAM,CAAC,CAAA;gBACf,IAAI,CAAC,MAAM,EAAE,CAAC;oBACZ,WAAW,EAAE,CAAA;gBACf,CAAC;YACH,CAAC,EACD,OAAO,EAAE,aAAa,EACtB,YAAY,EAAE;gBACZ,KAAK,EAAE,KAAK;gBACZ,UAAU,EAAE,CAAC;gBACb,GAAG,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,EAAE;gBAC7B,eAAe,EAAE,KAAK;gBACtB,gBAAgB,EAAE,CAAC,CAAC,EAAE,EAAE;oBACtB,CAAC,CAAC,cAAc,EAAE,CAAA;gBACpB,CAAC;aACF,YAED,wBAAC,eAAI,IACH,SAAS,EAAC,QAAQ,EAClB,GAAG,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,aAE/C,wBAAC,eAAI,IAAC,SAAS,EAAC,KAAK,EAAC,GAAG,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,UAAU,EAAE,QAAQ,EAAE,aAC3D,uBAAC,eAAI,IAAC,KAAK,EAAC,WAAW,6BAAoB,EAC3C,uBAAC,oBAAO,IACN,OAAO,EACL,uBAAC,eAAI,IACH,KAAK,EAAC,MAAM,EACZ,GAAG,EAAE,EAAE,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,GAAG,EAAE,mGAI1C,YAGT,uBAAC,cAAG,IAAC,GAAG,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,YAC1B,uBAAC,mCAAe,IAAC,IAAI,EAAE,mCAAY,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,GAC1D,GACE,IACL,EAEP,uBAAC,YAAY,OAAK,iBAAiB,GAAI,IAClC,GACE,CACZ,GACG,CACP,CAAA;AACH,CAAC,CAAA;AAzQY,QAAA,uBAAuB,2BAyQnC"}
+{"version":3,"file":"SlippageToleranceConfig.js","sourceRoot":"","sources":["../../../../src/components/common/SlippageToleranceConfig.tsx"],"names":[],"mappings":"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"}

package/_cjs/src/components/common/StepIcon.js

@@ -27,13 +27,7 @@ const StepIcon = ({ stepId, chainId }) => {
         }
         return (0, jsx_runtime_1.jsx)(index_js_1.ChainIcon, { chainId: chainId, square: false, width: 14, height: 16 });
     };
-    return ((0, jsx_runtime_1.jsx)(index_js_1.Flex, { css: {
-            borderRadius: '100px',
-            padding: '8px',
-            width: '32px',
-            height: '32px',
-            gap: '2'
-        }, children: getIconForStep() }));
+    return ((0, jsx_runtime_1.jsx)(index_js_1.Flex, { className: "relay:rounded-[100px] relay:p-2 relay:w-8 relay:h-8 relay:gap-2", children: getIconForStep() }));
 };
 exports.StepIcon = StepIcon;
 //# sourceMappingURL=StepIcon.js.map

package/_cjs/src/components/common/StepIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepIcon.js","sourceRoot":"","sources":["../../../../src/components/common/StepIcon.tsx"],"names":[],"mappings":";;;;AACA,qDAAwD;AACxD,mDAK6B;AAOtB,MAAM,QAAQ,GAAsB,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE;IACjE,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,IAAI,MAAM,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC;YAC/B,OAAO,uBAAC,wBAAa,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAC,cAAc,GAAG,CAAA;QACrE,CAAC;QACD,IACE,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC;YACvB,MAAM,CAAC,QAAQ,CAAC,SAAS,CAAC;YAC1B,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,EACvB,CAAC;YACD,IAAI,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC;gBAClC,OAAO,uBAAC,kBAAO,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAC,cAAc,GAAG,CAAA;YAC/D,CAAC;iBAAM,CAAC;gBACN,OAAO,uBAAC,6BAAkB,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAC,cAAc,GAAG,CAAA;YAC1E,CAAC;QACH,CAAC;QACD,IAAI,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC;YAC7B,OAAO,uBAAC,kBAAO,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAC,cAAc,GAAG,CAAA;QAC/D,CAAC;QACD,IAAI,MAAM,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC;YAC/B,OAAO,uBAAC,0BAAe,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAC,cAAc,GAAG,CAAA;QACvE,CAAC;QACD,OAAO,uBAAC,oBAAS,IAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,CAAA;IAC9E,CAAC,CAAA;IAED,OAAO,CACL,uBAAC,eAAI,IACH,GAAG,EAAE;YACH,YAAY,EAAE,OAAO;YACrB,OAAO,EAAE,KAAK;YACd,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,GAAG,EAAE,GAAG;SACT,YAEA,cAAc,EAAE,GACZ,CACR,CAAA;AACH,CAAC,CAAA;AAtCY,QAAA,QAAQ,YAsCpB"}
+{"version":3,"file":"StepIcon.js","sourceRoot":"","sources":["../../../../src/components/common/StepIcon.tsx"],"names":[],"mappings":";;;;AACA,qDAAwD;AACxD,mDAK6B;AAOtB,MAAM,QAAQ,GAAsB,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE;IACjE,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,IAAI,MAAM,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC;YAC/B,OAAO,uBAAC,wBAAa,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAC,cAAc,GAAG,CAAA;QACrE,CAAC;QACD,IACE,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC;YACvB,MAAM,CAAC,QAAQ,CAAC,SAAS,CAAC;YAC1B,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,EACvB,CAAC;YACD,IAAI,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC;gBAClC,OAAO,uBAAC,kBAAO,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAC,cAAc,GAAG,CAAA;YAC/D,CAAC;iBAAM,CAAC;gBACN,OAAO,uBAAC,6BAAkB,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAC,cAAc,GAAG,CAAA;YAC1E,CAAC;QACH,CAAC;QACD,IAAI,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC;YAC7B,OAAO,uBAAC,kBAAO,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAC,cAAc,GAAG,CAAA;QAC/D,CAAC;QACD,IAAI,MAAM,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC;YAC/B,OAAO,uBAAC,0BAAe,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAC,cAAc,GAAG,CAAA;QACvE,CAAC;QACD,OAAO,uBAAC,oBAAS,IAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,CAAA;IAC9E,CAAC,CAAA;IAED,OAAO,CACL,uBAAC,eAAI,IACH,SAAS,EAAC,iEAAiE,YAE1E,cAAc,EAAE,GACZ,CACR,CAAA;AACH,CAAC,CAAA;AAhCY,QAAA,QAAQ,YAgCpB"}

package/_cjs/src/components/common/TokenSelector/ChainFilter.js

@@ -7,7 +7,9 @@ const Dropdown_js_1 = require("../../primitives/Dropdown.js");
 const index_js_1 = require("../../primitives/index.js");
 const ChainIcon_js_1 = tslib_1.__importDefault(require("../../primitives/ChainIcon.js"));
 const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
-const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
+const faChevronDown_1 = require("@fortawesome/free-solid-svg-icons/faChevronDown");
+const faInfoCircle_1 = require("@fortawesome/free-solid-svg-icons/faInfoCircle");
+const faStar_1 = require("@fortawesome/free-solid-svg-icons/faStar");
 const AllChainsLogo_js_1 = tslib_1.__importDefault(require("../../../img/AllChainsLogo.js"));
 const TagPill_js_1 = require("./TagPill.js");
 const fuse_js_1 = tslib_1.__importDefault(require("fuse.js"));
@@ -16,6 +18,7 @@ const localStorage_js_1 = require("../../../utils/localStorage.js");
 const Tooltip_js_1 = tslib_1.__importDefault(require("../../../components/primitives/Tooltip.js"));
 const events_js_1 = require("../../../constants/events.js");
 const ChainFilterRow_js_1 = require("./ChainFilterRow.js");
+const cn_js_1 = require("../../../utils/cn.js");
 const fuseSearchOptions = {
     includeScore: true,
     includeMatches: true,
@@ -40,97 +43,39 @@ const ChainFilter = ({ options, value, onSelect, popularChainIds, onChainStarTog
         });
         return Array.from(uniqueChains.values());
     }, [chainSearchInput, chainFuse]);
-    return ((0, jsx_runtime_1.jsx)(Dropdown_js_1.Dropdown, { open: open, onOpenChange: (open) => setOpen(open), trigger: (0, jsx_runtime_1.jsxs)(index_js_1.Button, { "aria-label": `Chain filter`, color: "ghost", size: "none", css: {
-                gap: '2',
-                height: 40,
-                width: '100%',
-                px: '4 !important',
-                cursor: 'pointer',
-                display: 'flex',
-                alignContent: 'center',
-                lineHeight: '20px',
-                backgroundColor: 'dropdown-background',
-                borderRadius: 'dropdown-border-radius'
-            }, children: [(0, jsx_runtime_1.jsxs)(index_js_1.Flex, { align: "center", css: { gap: '2' }, children: [value.id ? ((0, jsx_runtime_1.jsx)(ChainIcon_js_1.default, { chainId: value.id, width: 20, height: 20, css: { borderRadius: 4, overflow: 'hidden' } })) : ((0, jsx_runtime_1.jsx)(AllChainsLogo_js_1.default, { style: { width: 20, height: 20 } })), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle1", children: ('displayName' in value && value.displayName) || value.name })] }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "body1", css: {
-                        color: 'gray9',
-                        marginLeft: 'auto',
-                        transform: open ? 'rotate(180deg)' : 'rotate(0)',
-                        width: 12
-                    }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faChevronDown }) })] }), contentProps: {
+    return ((0, jsx_runtime_1.jsx)(Dropdown_js_1.Dropdown, { open: open, onOpenChange: (open) => setOpen(open), trigger: (0, jsx_runtime_1.jsxs)(index_js_1.Button, { "aria-label": `Chain filter`, color: "ghost", size: "none", className: "relay:gap-2 relay:h-[40px] relay:w-full relay:!px-4 relay:cursor-pointer relay:flex relay:content-center relay:leading-[20px] relay:bg-[var(--relay-colors-dropdown-background)] relay:rounded-dropdown", children: [(0, jsx_runtime_1.jsxs)(index_js_1.Flex, { align: "center", className: "relay:gap-2", children: [value.id ? ((0, jsx_runtime_1.jsx)(ChainIcon_js_1.default, { chainId: value.id, width: 20, height: 20, className: "relay:rounded-[4px] relay:overflow-hidden" })) : ((0, jsx_runtime_1.jsx)(AllChainsLogo_js_1.default, { style: { width: 20, height: 20 } })), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle1", children: ('displayName' in value && value.displayName) || value.name })] }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "body1", className: (0, cn_js_1.cn)('relay:text-[color:var(--relay-colors-gray9)] relay:ml-auto relay:w-[12px]', open ? 'relay:rotate-180' : 'relay:rotate-0'), children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: faChevronDown_1.faChevronDown }) })] }), contentProps: {
             align: 'start',
             avoidCollisions: false,
-            css: {
-                p: 0,
-                width: 'var(--radix-dropdown-menu-trigger-width)',
-                minWidth: 'var(--radix-dropdown-menu-trigger-width)',
-                mx: '0'
-            },
+            className: 'relay:p-0 relay:mx-0',
             style: {
                 width: 'var(--radix-popper-anchor-width)',
                 minWidth: 'var(--radix-popper-anchor-width)'
             }
-        }, children: (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", css: { p: '2' }, children: [(0, jsx_runtime_1.jsx)(ChainFilterRow_js_1.ChainSearchInput, { value: chainSearchInput, onChange: setChainSearchInput, onKeyDown: (event) => event.stopPropagation() }), (0, jsx_runtime_1.jsx)(index_js_1.Flex, { direction: "column", css: {
-                        overflowY: 'auto',
-                        borderRadius: 8,
-                        maxHeight: 290,
-                        scrollbarColor: 'var(--relay-colors-gray5) transparent'
-                    }, children: filteredChains ? (filteredChains.length > 0 ? (filteredChains.map((chain) => {
+        }, children: (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", className: "relay:p-2", children: [(0, jsx_runtime_1.jsx)(ChainFilterRow_js_1.ChainSearchInput, { value: chainSearchInput, onChange: setChainSearchInput, onKeyDown: (event) => event.stopPropagation() }), (0, jsx_runtime_1.jsx)(index_js_1.Flex, { direction: "column", className: "relay:overflow-y-auto relay:rounded-[8px] relay:max-h-[290px]", style: { scrollbarColor: 'var(--relay-colors-gray5) transparent' }, children: filteredChains ? (filteredChains.length > 0 ? (filteredChains.map((chain) => {
                         const tag = 'tags' in chain ? chain.tags?.[0] : undefined;
                         return ((0, jsx_runtime_1.jsx)(index_js_1.Flex, { onClick: () => {
                                 setOpen(false);
                                 onSelect(chain);
                                 setChainSearchInput('');
-                            }, css: {
-                                padding: '8px',
-                                borderRadius: 4,
-                                cursor: 'pointer',
-                                backgroundColor: 'modal-background',
-                                _hover: {
-                                    backgroundColor: 'gray3'
-                                }
-                            }, children: (0, jsx_runtime_1.jsx)(ChainFilterRow, { chain: chain, tag: tag, onToggleStar: onChainStarToggle, onAnalyticEvent: onAnalyticEvent }) }, chain.id?.toString() ?? 'all-chains'));
-                    })) : ((0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "body1", css: { p: '2', textAlign: 'center' }, children: "No results." }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [allChainsOption && ((0, jsx_runtime_1.jsx)(index_js_1.Flex, { onClick: () => {
+                            }, className: "relay:p-[8px] relay:rounded-[4px] relay:cursor-pointer relay:bg-[var(--relay-colors-modal-background)] relay:hover:bg-[var(--relay-colors-gray3)]", children: (0, jsx_runtime_1.jsx)(ChainFilterRow, { chain: chain, tag: tag, onToggleStar: onChainStarToggle, onAnalyticEvent: onAnalyticEvent }) }, chain.id?.toString() ?? 'all-chains'));
+                    })) : ((0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "body1", className: "relay:p-2 relay:text-center", children: "No results." }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [allChainsOption && ((0, jsx_runtime_1.jsx)(index_js_1.Flex, { onClick: () => {
                                     setOpen(false);
                                     onSelect(allChainsOption);
                                     setChainSearchInput('');
-                                }, css: {
-                                    padding: '8px',
-                                    borderRadius: 4,
-                                    cursor: 'pointer',
-                                    backgroundColor: 'modal-background',
-                                    _hover: {
-                                        backgroundColor: 'gray3'
-                                    }
-                                }, children: (0, jsx_runtime_1.jsx)(ChainFilterRow, { chain: allChainsOption, onAnalyticEvent: onAnalyticEvent }) })), starredChains.length > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(index_js_1.Flex, { align: "center", css: { px: '2', py: '1', gap: '1' }, children: [(0, jsx_runtime_1.jsx)(index_js_1.Box, { css: { color: 'primary9' }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faStar, width: 12, height: 12 }) }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle2", color: "subtle", children: "Starred Chains" }), (0, jsx_runtime_1.jsx)(Tooltip_js_1.default, { content: (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "body3", children: "Long-press to star a chain" }), children: (0, jsx_runtime_1.jsx)(index_js_1.Box, { css: { color: 'gray9' }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faInfoCircle, width: 12, height: 12 }) }) })] }), starredChains.map((chain) => {
+                                }, className: "relay:p-[8px] relay:rounded-[4px] relay:cursor-pointer relay:bg-[var(--relay-colors-modal-background)] relay:hover:bg-[var(--relay-colors-gray3)]", children: (0, jsx_runtime_1.jsx)(ChainFilterRow, { chain: allChainsOption, onAnalyticEvent: onAnalyticEvent }) })), starredChains.length > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(index_js_1.Flex, { align: "center", className: "relay:px-2 relay:py-1 relay:gap-1", children: [(0, jsx_runtime_1.jsx)(index_js_1.Box, { className: "relay:text-[color:var(--relay-colors-primary9)]", children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: faStar_1.faStar, width: 12, height: 12 }) }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle2", color: "subtle", children: "Starred Chains" }), (0, jsx_runtime_1.jsx)(Tooltip_js_1.default, { content: (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "body3", children: "Long-press to star a chain" }), children: (0, jsx_runtime_1.jsx)(index_js_1.Box, { className: "relay:text-[color:var(--relay-colors-gray9)]", children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: faInfoCircle_1.faInfoCircle, width: 12, height: 12 }) }) })] }), starredChains.map((chain) => {
                                         const tag = 'tags' in chain ? chain.tags?.[0] : undefined;
                                         return ((0, jsx_runtime_1.jsx)(index_js_1.Flex, { onClick: () => {
                                                 setOpen(false);
                                                 onSelect(chain);
                                                 setChainSearchInput('');
-                                            }, css: {
-                                                padding: '8px',
-                                                borderRadius: 4,
-                                                cursor: 'pointer',
-                                                backgroundColor: 'modal-background',
-                                                _hover: {
-                                                    backgroundColor: 'gray3'
-                                                }
-                                            }, children: (0, jsx_runtime_1.jsx)(ChainFilterRow, { chain: chain, tag: tag, onToggleStar: onChainStarToggle, showStar: false, onAnalyticEvent: onAnalyticEvent }) }, chain.id?.toString() ?? 'all-chains'));
-                                    })] })), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle2", color: "subtle", css: { px: '2', py: '1' }, children: "Chains A-Z" }), alphabeticalChains.map((chain) => {
+                                            }, className: "relay:p-[8px] relay:rounded-[4px] relay:cursor-pointer relay:bg-[var(--relay-colors-modal-background)] relay:hover:bg-[var(--relay-colors-gray3)]", children: (0, jsx_runtime_1.jsx)(ChainFilterRow, { chain: chain, tag: tag, onToggleStar: onChainStarToggle, showStar: false, onAnalyticEvent: onAnalyticEvent }) }, chain.id?.toString() ?? 'all-chains'));
+                                    })] })), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle2", color: "subtle", className: "relay:px-2 relay:py-1", children: "Chains A-Z" }), alphabeticalChains.map((chain) => {
                                 const tag = 'tags' in chain ? chain.tags?.[0] : undefined;
                                 return ((0, jsx_runtime_1.jsx)(index_js_1.Flex, { onClick: () => {
                                         setOpen(false);
                                         onSelect(chain);
                                         setChainSearchInput('');
-                                    }, css: {
-                                        padding: '8px',
-                                        borderRadius: 4,
-                                        cursor: 'pointer',
-                                        backgroundColor: 'modal-background',
-                                        _hover: {
-                                            backgroundColor: 'gray3'
-                                        }
-                                    }, children: (0, jsx_runtime_1.jsx)(ChainFilterRow, { chain: chain, tag: tag, onToggleStar: onChainStarToggle, onAnalyticEvent: onAnalyticEvent }) }, chain.id?.toString() ?? 'all-chains'));
+                                    }, className: "relay:p-[8px] relay:rounded-[4px] relay:cursor-pointer relay:bg-[var(--relay-colors-modal-background)] relay:hover:bg-[var(--relay-colors-gray3)]", children: (0, jsx_runtime_1.jsx)(ChainFilterRow, { chain: chain, tag: tag, onToggleStar: onChainStarToggle, onAnalyticEvent: onAnalyticEvent }) }, chain.id?.toString() ?? 'all-chains'));
                             })] })) })] }) }));
 };
 const ChainFilterRow = ({ chain, tag, onToggleStar, showStar = true, onAnalyticEvent }) => {
@@ -205,15 +150,9 @@ const ChainFilterRow = ({ chain, tag, onToggleStar, showStar = true, onAnalyticE
         }
     };
     if (!chain.id) {
-        return ((0, jsx_runtime_1.jsxs)(index_js_1.Flex, { align: "center", css: {
-                gap: '2',
-                cursor: 'pointer',
-                flexShrink: 0,
-                alignContent: 'center',
-                width: '100%'
-            }, children: [(0, jsx_runtime_1.jsx)(AllChainsLogo_js_1.default, { style: { width: 24, height: 24 } }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle2", children: chain.name })] }));
+        return ((0, jsx_runtime_1.jsxs)(index_js_1.Flex, { align: "center", className: "relay:gap-2 relay:cursor-pointer relay:shrink-0 relay:content-center relay:w-full", children: [(0, jsx_runtime_1.jsx)(AllChainsLogo_js_1.default, { style: { width: 24, height: 24 } }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle2", children: chain.name })] }));
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative', width: '100%' }, children: [(0, jsx_runtime_1.jsxs)(index_js_1.Flex, { align: "center", onContextMenu: (e) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "relay:relative relay:w-full", children: [(0, jsx_runtime_1.jsxs)(index_js_1.Flex, { align: "center", onContextMenu: (e) => {
                     e.preventDefault();
                     setDropdownOpen(true);
                 }, onKeyDown: (e) => {
@@ -221,41 +160,12 @@ const ChainFilterRow = ({ chain, tag, onToggleStar, showStar = true, onAnalyticE
                         e.preventDefault();
                         setDropdownOpen(true);
                     }
-                }, onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd, onTouchMove: handleTouchMove, css: {
-                    gap: '2',
-                    cursor: 'pointer',
-                    flexShrink: 0,
-                    alignContent: 'center',
-                    width: '100%',
-                    position: 'relative',
-                    userSelect: 'none'
-                }, style: {
-                    WebkitUserSelect: 'none'
-                }, children: [(0, jsx_runtime_1.jsx)(ChainIcon_js_1.default, { chainId: chain.id, square: true, width: 24, height: 24 }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle2", children: ('displayName' in chain && chain.displayName) || chain.name }), showStar && isStarred && ((0, jsx_runtime_1.jsx)(index_js_1.Box, { css: { color: 'primary9' }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faStar, width: 12, height: 12 }) })), tag && (0, jsx_runtime_1.jsx)(TagPill_js_1.TagPill, { tag: tag })] }), dropdownOpen && ((0, jsx_runtime_1.jsx)("div", { ref: dropdownRef, style: {
-                    position: 'absolute',
-                    top: '100%',
-                    left: 0,
-                    marginTop: '4px',
-                    minWidth: 160,
-                    zIndex: 999999
-                }, onClick: (e) => {
+                }, onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd, onTouchMove: handleTouchMove, className: "relay:gap-2 relay:cursor-pointer relay:shrink-0 relay:content-center relay:w-full relay:relative relay:select-none", children: [(0, jsx_runtime_1.jsx)(ChainIcon_js_1.default, { chainId: chain.id, square: true, width: 24, height: 24 }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle2", children: ('displayName' in chain && chain.displayName) || chain.name }), showStar && isStarred && ((0, jsx_runtime_1.jsx)(index_js_1.Box, { className: "relay:text-[color:var(--relay-colors-primary9)]", children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: faStar_1.faStar, width: 12, height: 12 }) })), tag && (0, jsx_runtime_1.jsx)(TagPill_js_1.TagPill, { tag: tag })] }), dropdownOpen && ((0, jsx_runtime_1.jsx)("div", { ref: dropdownRef, className: "relay:absolute relay:top-full relay:left-0 relay:mt-1 relay:min-w-[160px] relay:z-[999999]", onClick: (e) => {
                     e.stopPropagation();
                     handleToggleStar();
-                }, onMouseDown: (e) => e.stopPropagation(), onTouchStart: (e) => e.stopPropagation(), children: (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { css: {
-                        alignItems: 'center',
-                        gap: '8px',
-                        padding: '8px',
-                        borderRadius: 12,
-                        cursor: 'pointer',
-                        backgroundColor: 'gray1',
-                        '--borderColor': 'colors.subtle-border-color',
-                        border: '1px solid var(--borderColor)',
-                        _hover: {
-                            backgroundColor: 'gray2'
-                        }
-                    }, children: [(0, jsx_runtime_1.jsx)(index_js_1.Box, { css: {
-                                color: isStarred ? 'gray8' : 'primary9'
-                            }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faStar, width: 16, height: 16 }) }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle1", css: { lineHeight: '20px' }, children: isStarred ? 'Unstar chain' : 'Star chain' })] }) }))] }));
+                }, onMouseDown: (e) => e.stopPropagation(), onTouchStart: (e) => e.stopPropagation(), children: (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { className: "relay:items-center relay:gap-[8px] relay:p-[8px] relay:rounded-[12px] relay:cursor-pointer relay:bg-[var(--relay-colors-gray1)] relay:border relay:border-solid relay:border-[var(--relay-colors-subtle-border-color)] relay:hover:bg-[var(--relay-colors-gray2)]", children: [(0, jsx_runtime_1.jsx)(index_js_1.Box, { className: (0, cn_js_1.cn)(isStarred
+                                ? 'relay:text-[color:var(--relay-colors-gray8)]'
+                                : 'relay:text-[color:var(--relay-colors-primary9)]'), children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: faStar_1.faStar, width: 16, height: 16 }) }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle1", className: "relay:leading-[20px]", children: isStarred ? 'Unstar chain' : 'Star chain' })] }) }))] }));
 };
 exports.default = ChainFilter;
 //# sourceMappingURL=ChainFilter.js.map