@0xsquid/ui 0.9.1 → 0.9.3

package/dist/cjs/index.js

@@ -2662,6 +2662,9 @@ function ArrowLeftIcon({ className, size = '24', }) {
 function ChevronGrabberVerticalIcon({ size = '16', className, }) {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 16 16", fill: "none", className: className, children: jsxRuntime.jsx("path", { d: "M5.33301 6.00002L7.52827 3.80476C7.78862 3.54441 8.21073 3.54441 8.47108 3.80476L10.6663 6.00002M5.33301 10L7.52827 12.1953C7.78862 12.4556 8.21073 12.4556 8.47108 12.1953L10.6663 10", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }) }));
 }
+function SquareArrowTopRight2Icon({ className, size = '16', }) {
+    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 16 16", fill: "none", className: className, children: jsxRuntime.jsx("path", { d: "M6.00033 2.66663H4.80033C4.05359 2.66663 3.68022 2.66663 3.395 2.81195C3.14412 2.93978 2.94015 3.14376 2.81232 3.39464C2.66699 3.67985 2.66699 4.05322 2.66699 4.79996L2.66699 11.2C2.66699 11.9467 2.66699 12.3201 2.81232 12.6053C2.94015 12.8562 3.14412 13.0601 3.395 13.188C3.68022 13.3333 4.05359 13.3333 4.80033 13.3333L11.2003 13.3333C11.9471 13.3333 12.3204 13.3333 12.6056 13.188C12.8565 13.0601 13.0605 12.8562 13.1883 12.6053C13.3337 12.3201 13.3337 11.9467 13.3337 11.2V9.99996M9.33366 2.66663L13.3337 2.66663M13.3337 2.66663V6.66663M13.3337 2.66663L7.33366 8.66663", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }) }));
+}
 
 function ArrowButton(_a) {
     var { label, disabled } = _a, props = __rest(_a, ["label", "disabled"]);
@@ -2810,7 +2813,7 @@ function SearchIcon() {
 
 function Input(_a) {
     var { placeholder = 'Search', showIcon = true, showPasteButton = false, className, icon, isError = false, onPasteButtonClick } = _a, props = __rest(_a, ["placeholder", "showIcon", "showPasteButton", "className", "icon", "isError", "onPasteButtonClick"]);
-    return (jsxRuntime.jsxs("div", { className: "tw-relative tw-w-full tw-text-grey-600", children: [jsxRuntime.jsx("input", Object.assign({}, props, { className: cn('tw-relative tw-h-10 tw-w-full tw-rounded-full tw-border tw-border-material-light-thin tw-bg-grey-900 tw-text-body-small tw-font-medium tw-text-grey-300 tw-outline-none tw-outline-offset-0 placeholder:tw-text-grey-600 focus:tw-outline-2', showIcon ? 'tw-pl-[44px]' : 'tw-px-2.5', showPasteButton ? 'tw-px-[70px]' : 'tw-pr-2.5', isError ? 'tw-outline-status-negative' : 'focus:tw-outline-royal-500', className), placeholder: placeholder })), showIcon ? (jsxRuntime.jsx("div", { className: "tw-absolute tw-inset-y-0 tw-left-0 tw-flex tw-h-full tw-w-[44px] tw-items-center tw-justify-center tw-px-squid-xs", children: icon || jsxRuntime.jsx(SearchIcon, {}) })) : null, showPasteButton ? (jsxRuntime.jsx("div", { className: "tw-absolute tw-inset-y-0 tw-right-1.5 tw-flex tw-items-center tw-justify-center", children: jsxRuntime.jsx(PasteButton, { onClick: onPasteButtonClick }) })) : null] }));
+    return (jsxRuntime.jsxs("div", { className: "tw-relative tw-w-full tw-text-grey-600", children: [jsxRuntime.jsx("input", Object.assign({}, props, { "aria-invalid": isError, className: cn('tw-relative tw-h-10 tw-w-full tw-rounded-full tw-border tw-border-material-light-thin tw-bg-grey-900 tw-text-body-small tw-font-medium tw-text-grey-300 placeholder:tw-text-grey-600 invalid:tw-outline-status-negative', showIcon ? 'tw-pl-[44px]' : 'tw-px-2.5', showPasteButton ? 'tw-px-[70px]' : 'tw-pr-2.5', isError && '!tw-outline-status-negative', className), placeholder: placeholder })), showIcon ? (jsxRuntime.jsx("div", { className: "tw-absolute tw-inset-y-0 tw-left-0 tw-flex tw-h-full tw-w-[44px] tw-items-center tw-justify-center tw-px-squid-xs", children: icon || jsxRuntime.jsx(SearchIcon, {}) })) : null, showPasteButton ? (jsxRuntime.jsx("div", { className: "tw-absolute tw-inset-y-0 tw-right-1.5 tw-flex tw-items-center tw-justify-center", children: jsxRuntime.jsx(PasteButton, { onClick: onPasteButtonClick }) })) : null] }));
 }
 const PasteButton = ({ onClick }) => {
     return (jsxRuntime.jsx("button", { onClick: onClick, className: "tw-h-[30px] tw-rounded-full tw-border tw-border-grey-700 tw-bg-grey-800 tw-px-2 tw-text-grey-300", children: jsxRuntime.jsx(CaptionText, { children: "Paste" }) }));
@@ -2958,8 +2961,18 @@ function HeadingText({ children, bold, size }) {
     return (jsxRuntime.jsx("h6", { className: clsx(textClassMap[size], fontWeightClass), children: children }));
 }
 
-function SettingsSlider({ value, type }) {
-    return (jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-xs tw-border-royal-500 tw-p-squid-xs", children: [jsxRuntime.jsx("span", { className: "tw-flex tw-items-center tw-justify-center", children: type === 'percentage' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CaptionText, { className: "!tw-font-medium tw-text-grey-600", children: String(value) }), jsxRuntime.jsx(CaptionText, { className: "!tw-font-medium tw-text-grey-300", children: "%" })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CaptionText, { className: "!tw-font-medium tw-text-grey-300", children: "$" }), jsxRuntime.jsx(CaptionText, { className: "!tw-font-medium tw-text-grey-600", children: String(value) })] })) }), jsxRuntime.jsx(Chip, { icon: jsxRuntime.jsx(ChevronGrabberVerticalIcon, { className: "tw-text-grey-900" }) })] }));
+function SettingsSlider({ value, type, onChange }) {
+    return (jsxRuntime.jsxs("div", { className: "tw-relative tw-flex tw-h-full tw-items-center tw-justify-center tw-rounded-squid-xs", children: [jsxRuntime.jsx("input", { min: 0, max: 99, placeholder: "0", type: "number", onChange: (e) => {
+                    onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value);
+                }, className: cn('tw-relative tw-flex tw-h-full tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-bg-transparent tw-p-squid-xs tw-text-caption !tw-font-medium tw-leading-[10px] tw-text-grey-300 placeholder-shown:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin', type === 'percentage'
+                    ? 'tw-w-[80px] tw-pr-[52px] tw-text-right'
+                    : 'tw-w-[76px] tw-pl-[20px] tw-pr-[32px] tw-text-left'), value: value }), type === 'percentage' && jsxRuntime.jsx(PercentageDecorator, {}), type === 'amount' && jsxRuntime.jsx(AmountDecorator, {})] }));
+}
+function PercentageDecorator() {
+    return (jsxRuntime.jsxs("div", { className: "tw-absolute tw-right-squid-xs tw-flex tw-items-center tw-justify-center tw-gap-squid-xs !tw-font-medium tw-leading-[10px]", children: [jsxRuntime.jsx(CaptionText, { className: "tw-translate-y-[0.5px] !tw-font-medium !tw-leading-[10px] tw-text-grey-300", children: "%" }), jsxRuntime.jsx(Chip, { icon: jsxRuntime.jsx(ChevronGrabberVerticalIcon, { className: "tw-text-grey-900" }) })] }));
+}
+function AmountDecorator() {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CaptionText, { className: "tw-absolute tw-left-squid-xs tw-translate-y-[0.5px] !tw-font-medium !tw-leading-[10px] tw-text-grey-300", children: "$" }), jsxRuntime.jsx("div", { className: "tw-absolute tw-right-squid-xs tw-flex tw-items-center tw-justify-center tw-gap-squid-xs !tw-font-medium tw-leading-[10px]", children: jsxRuntime.jsx(Chip, { icon: jsxRuntime.jsx(ChevronGrabberVerticalIcon, { className: "tw-text-grey-900" }) }) })] }));
 }
 
 const switchSizeClassMap = {
@@ -3093,8 +3106,8 @@ function FeeButton(_a) {
     return (jsxRuntime.jsxs("button", Object.assign({}, props, { className: cn('tw-flex tw-h-squid-xl tw-w-full tw-items-center tw-gap-x-squid-xs tw-rounded-squid-m tw-px-squid-xs hover:tw-bg-material-light-thin', className), children: [jsxRuntime.jsx(Chip, { label: chipLabel }), jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsxRuntime.jsx(Chip, { icon: jsxRuntime.jsx(EthereumIcon, {}) }), jsxRuntime.jsx(UsdAmount, { usdAmount: feeInUsd })] })] })));
 }
 
-function SettingsButton({ label }) {
-    return (jsxRuntime.jsx("button", { className: "tw-flex tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-border-2 tw-border-transparent tw-p-squid-xs", children: jsxRuntime.jsx(CaptionText, { className: "!tw-font-medium", children: label }) }));
+function SettingsButton({ label, isSelected = false, }) {
+    return (jsxRuntime.jsx("button", { className: cn('tw-flex tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-border-2 tw-border-transparent tw-p-squid-xs hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin', isSelected && 'tw-outline-royal-500'), children: jsxRuntime.jsx(CaptionText, { className: "!tw-font-medium", children: label }) }));
 }
 
 function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessage, canToggleBoostMode = true, }) {
@@ -3262,7 +3275,7 @@ function HelpIcon({ size = '20', className, }) {
     return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: className, children: [jsxRuntime.jsx("g", { "clip-path": "url(#clip0_457_36778)", children: jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10ZM6 7C6 4.46214 8.03736 3 10 3C12.1193 3 14 4.66531 14 7C14 7.93746 13.7596 8.6603 13.368 9.2586C13.0353 9.76679 12.6034 10.1601 12.2697 10.4639L12.1757 10.5497C11.8041 10.8904 11.534 11.1593 11.337 11.504C11.1513 11.8288 11 12.2794 11 13C11 13.5523 10.5523 14 10 14C9.44772 14 9 13.5523 9 13C9 11.9706 9.22366 11.1712 9.60051 10.5117C9.96604 9.87199 10.4459 9.42214 10.8243 9.07535L10.8834 9.02116L10.8834 9.02116L10.8834 9.02115C11.2572 8.67885 11.5066 8.45039 11.6945 8.16328C11.8654 7.9022 12 7.56254 12 7C12 5.83469 11.0807 5 10 5C8.96264 5 8 5.73786 8 7C8 7.55228 7.55228 8 7 8C6.44772 8 6 7.55228 6 7ZM10 15C9.44771 15 9 15.4477 9 16C9 16.5523 9.44771 17 10 17C10.5523 17 11 16.5523 11 16C11 15.4477 10.5523 15 10 15Z", fill: "currentColor" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_457_36778", children: jsxRuntime.jsx("rect", { width: "20", height: "20", fill: "white" }) }) })] }));
 }
 
-function SettingsItem({ icon, label, controls, transparentControls = false, showHelpIcon = true, link, transparent = false, helpTooltip, }) {
+function SettingsItem({ icon, label, controls = [], link, transparent = false, helpTooltip, }) {
     const ContentTag = link ? 'a' : 'div';
     const contentTagProps = link
         ? {
@@ -3270,11 +3283,26 @@ function SettingsItem({ icon, label, controls, transparentControls = false, show
             target: '_blank',
         }
         : {};
-    const helpIcon = showHelpIcon && (jsxRuntime.jsx(HelpIcon, { className: cn('tw-text-grey-600', 
-        // only add hover styles if helpTooltip is provided
-        !!helpTooltip &&
-            'tw-cursor-help tw-transition-colors tw-duration-200 hover:tw-text-grey-400') }));
-    return (jsxRuntime.jsx("li", { className: cn('tw-h-[50px] tw-self-stretch tw-px-squid-xs', transparent ? 'tw-bg-transparent' : 'tw-bg-grey-900 '), children: jsxRuntime.jsxs(ContentTag, Object.assign({ className: cn('tw-flex tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xs tw-text-grey-300', link && 'hover:tw-bg-material-light-thin') }, contentTagProps, { children: [icon, jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-1 tw-items-center tw-gap-squid-xxs tw-self-stretch", children: [jsxRuntime.jsx(BodyText, { size: "small", children: label }), helpTooltip ? (jsxRuntime.jsx(Tooltip, Object.assign({}, helpTooltip, { children: helpIcon }))) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: helpIcon }))] }), jsxRuntime.jsx("div", { className: cn('tw-flex tw-h-squid-l tw-items-center tw-justify-center tw-rounded-squid-xs', transparentControls ? '' : 'tw-bg-grey-800'), children: controls })] })) }));
+    const helpIcon = !!helpTooltip && (jsxRuntime.jsx(HelpIcon, { className: cn('tw-text-grey-600', 'tw-cursor-help tw-transition-colors tw-duration-200 hover:tw-text-grey-400') }));
+    const showDetailsBorder = controls.length > 0 &&
+        !link &&
+        !controls.some((control) => control.type === 'switch');
+    return (jsxRuntime.jsx("li", { className: cn('tw-h-[50px] tw-self-stretch tw-px-squid-xs', transparent ? 'tw-bg-transparent' : 'tw-bg-grey-800'), children: jsxRuntime.jsxs(ContentTag, Object.assign({ className: cn('tw-flex tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xs tw-text-grey-300', link && 'hover:tw-bg-material-light-thin') }, contentTagProps, { children: [icon, jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-1 tw-items-center tw-gap-squid-xxs tw-self-stretch", children: [jsxRuntime.jsx(BodyText, { size: "small", children: label }), helpTooltip ? (jsxRuntime.jsx(Tooltip, Object.assign({}, helpTooltip, { children: helpIcon }))) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: helpIcon }))] }), jsxRuntime.jsx("div", { className: cn('tw-flex tw-h-squid-l tw-items-center tw-justify-center tw-rounded-squid-xs', showDetailsBorder &&
+                        'tw-rounded-squid-xs tw-border tw-border-solid tw-border-material-light-thin tw-bg-material-dark-thin'), children: !!link ? (jsxRuntime.jsx(SquareArrowTopRight2Icon, { className: "tw-text-material-light-average" })) : (controls.map((control, index) => {
+                        if (control.type === 'switch') {
+                            const switchControl = (jsxRuntime.jsx(Switch, { size: "large", checked: control.checked, onChange: control.onChange }, index));
+                            if (control.tooltip) {
+                                return jsxRuntime.jsx(Tooltip, Object.assign({}, control.tooltip, { children: switchControl }));
+                            }
+                            return switchControl;
+                        }
+                        if (control.type === 'percentage') {
+                            return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SettingsButton, { label: control.resetValueControl.label, isSelected: control.resetValueControl.isSelected }), jsxRuntime.jsx(SettingsSlider, { value: control.value, type: "percentage" })] }));
+                        }
+                        if (control.type === 'amount') {
+                            return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SettingsButton, { label: control.resetValueControl.label, isSelected: control.resetValueControl.isSelected }), control.options.map(({ value, isSelected }, index, _controls) => (jsxRuntime.jsx(SettingsButton, { label: '$' + value, isSelected: isSelected }, index))), jsxRuntime.jsx(SettingsSlider, { type: control.type, value: 0 })] }));
+                        }
+                    })) })] })) }));
 }
 
 function SwapDetailListItem({ label, detail, icon, isLoading = false, }) {
@@ -3350,6 +3378,17 @@ function Modal({ children, className, onBackdropClick, isOpen: _isOpen = true, m
             : undefined, className: cn('tw-absolute tw-inset-0 tw-z-40 tw-flex tw-items-start tw-justify-center tw-bg-material-dark-average tw-px-squid-xs tw-py-squid-xl tw-pb-squid-m tw-transition-all', _isOpen ? 'tw-animate-blur-in' : 'tw-animate-blur-out'), children: jsxRuntime.jsx("div", { className: cn('tw-relative tw-flex tw-max-h-[600px] tw-w-[400px] tw-flex-col tw-items-start tw-justify-end tw-gap-squid-xxs tw-self-end', className, _isOpen ? 'tw-animate-slide-to-top' : 'tw-animate-slide-to-bottom', maxHeight && 'tw-h-full'), children: children }) })));
 }
 
+const borderTypeClassMap = {
+    border: 'tw-border tw-border-material-light-thin',
+    outline: 'tw-outline tw-outline-1 -tw-outline-offset-[1px] tw-outline-material-light-thin',
+};
+function ModalContent({ children, addGap = false, paddingY = false, borderType = 'border', }) {
+    return (jsxRuntime.jsx("div", { className: cn('tw-flex tw-h-full tw-max-h-[535px] tw-w-full tw-flex-col tw-self-stretch tw-rounded-squid-l tw-bg-grey-800 tw-text-grey-300', addGap && 'tw-gap-squid-xxs tw-pt-squid-xxs', borderTypeClassMap[borderType], paddingY && 'tw-py-squid-xxs'), children: children }));
+}
+function ModalContentDivider() {
+    return (jsxRuntime.jsx("svg", { width: "100%", height: "11", viewBox: "0 0 400 11", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("rect", { x: "1", y: "5", width: "398", height: "1", fill: "currentColor" }) }));
+}
+
 function NavigationBar({ title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, onBackButtonClick, actions, }) {
     return (jsxRuntime.jsxs("nav", { className: cn('tw-flex tw-max-h-[120px] tw-min-w-96 tw-flex-col tw-text-grey-300', transparent ? 'tw-bg-transparent' : 'tw-bg-grey-900'), children: [jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-squid-xxl tw-items-center tw-justify-end tw-gap-x-squid-xs', displayBackButton ? 'tw-px-squid-m' : 'tw-pl-squid-l tw-pr-squid-m'), children: [displayBackButton ? (jsxRuntime.jsx(Button, { className: displayButtonShadows
                             ? 'group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2'
@@ -3543,6 +3582,8 @@ exports.LoadingSkeleton = LoadingSkeleton;
 exports.Menu = Menu;
 exports.MenuItem = MenuItem;
 exports.Modal = Modal;
+exports.ModalContent = ModalContent;
+exports.ModalContentDivider = ModalContentDivider;
 exports.NavigationBar = NavigationBar;
 exports.NumericInput = NumericInput;
 exports.ProductCard = ProductCard;

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

@@ -1,4 +1,5 @@
 export interface SettingsButtonProps {
     label: string;
+    isSelected?: boolean;
 }
-export declare function SettingsButton({ label }: SettingsButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function SettingsButton({ label, isSelected, }: SettingsButtonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,6 @@
 export interface SettingsSliderProps {
     value: number;
     type: 'percentage' | 'amount';
+    onChange?: (value: string) => void;
 }
-export declare function SettingsSlider({ value, type }: SettingsSliderProps): import("react/jsx-runtime").JSX.Element;
+export declare function SettingsSlider({ value, type, onChange }: SettingsSliderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -10,3 +10,7 @@ export declare const SettingsGearIcon: ({ size, className, }: {
     className?: string;
     size?: string;
 }) => import("react/jsx-runtime").JSX.Element;
+export declare const ExplosionIcon: ({ size, className, }: {
+    className?: string;
+    size?: string;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,8 +1,10 @@
 /// <reference types="react" />
 type ModalContentBorderType = 'border' | 'outline';
-export declare function ModalContent({ children, addGap, borderType, }: {
+export declare function ModalContent({ children, addGap, paddingY, borderType, }: {
     children?: React.ReactNode;
     addGap?: boolean;
+    paddingY?: boolean;
     borderType?: ModalContentBorderType;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function ModalContentDivider(): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -5,6 +5,7 @@ export * from './ErrorMessage';
 export * from './InfoBox';
 export * from './Menu';
 export * from './Modal';
+export * from './ModalContent';
 export * from './NavigationBar';
 export * from './ProductCard';
 export * from './ProfileHeaderBackground';

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

@@ -1,13 +1,38 @@
 /// <reference types="react" />
 import { TooltipProps } from '../controls';
+export type SettingsControl = {
+    type: 'percentage';
+    value: number;
+    onChange: (value: number) => void;
+    resetValueControl: {
+        label: string;
+        onSelect: () => void;
+        isSelected?: boolean;
+    };
+} | {
+    type: 'amount';
+    options: {
+        value: number;
+        isSelected?: boolean;
+        onSelect?: () => void;
+    }[];
+    resetValueControl: {
+        label: string;
+        onSelect: () => void;
+        isSelected?: boolean;
+    };
+} | {
+    type: 'switch';
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    tooltip?: Omit<TooltipProps, 'children'>;
+};
 export interface SettingsItemProps {
     icon: React.ReactNode;
     label: string;
-    controls?: React.ReactNode;
-    transparentControls?: boolean;
-    showHelpIcon?: boolean;
+    controls?: SettingsControl[];
     link?: string;
     transparent?: boolean;
     helpTooltip?: Omit<TooltipProps, 'children'>;
 }
-export declare function SettingsItem({ icon, label, controls, transparentControls, showHelpIcon, link, transparent, helpTooltip, }: SettingsItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function SettingsItem({ icon, label, controls, link, transparent, helpTooltip, }: SettingsItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/stories/buttons/SettingsButton.stories.d.ts

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof SettingsButton>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const Selected: Story;

package/dist/cjs/types/stories/layout/ModalContent.stories.d.ts

@@ -6,3 +6,4 @@ type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const WithBorder: Story;
 export declare const WithOutline: Story;
+export declare const VerticalPadding: Story;

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

@@ -5,8 +5,10 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const WithControls: Story;
-export declare const WithoutHelpIcon: Story;
-export declare const TransparentControls: Story;
 export declare const Link: Story;
 export declare const Transparent: Story;
 export declare const WithHelpTooltip: Story;
+export declare const SwitchControl: Story;
+export declare const SwitchControlWithTooltip: Story;
+export declare const AmountControls: Story;
+export declare const PercentageControls: Story;

package/dist/esm/index.js

@@ -2660,6 +2660,9 @@ function ArrowLeftIcon({ className, size = '24', }) {
 function ChevronGrabberVerticalIcon({ size = '16', className, }) {
     return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 16 16", fill: "none", className: className, children: jsx("path", { d: "M5.33301 6.00002L7.52827 3.80476C7.78862 3.54441 8.21073 3.54441 8.47108 3.80476L10.6663 6.00002M5.33301 10L7.52827 12.1953C7.78862 12.4556 8.21073 12.4556 8.47108 12.1953L10.6663 10", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }) }));
 }
+function SquareArrowTopRight2Icon({ className, size = '16', }) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 16 16", fill: "none", className: className, children: jsx("path", { d: "M6.00033 2.66663H4.80033C4.05359 2.66663 3.68022 2.66663 3.395 2.81195C3.14412 2.93978 2.94015 3.14376 2.81232 3.39464C2.66699 3.67985 2.66699 4.05322 2.66699 4.79996L2.66699 11.2C2.66699 11.9467 2.66699 12.3201 2.81232 12.6053C2.94015 12.8562 3.14412 13.0601 3.395 13.188C3.68022 13.3333 4.05359 13.3333 4.80033 13.3333L11.2003 13.3333C11.9471 13.3333 12.3204 13.3333 12.6056 13.188C12.8565 13.0601 13.0605 12.8562 13.1883 12.6053C13.3337 12.3201 13.3337 11.9467 13.3337 11.2V9.99996M9.33366 2.66663L13.3337 2.66663M13.3337 2.66663V6.66663M13.3337 2.66663L7.33366 8.66663", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }) }));
+}
 
 function ArrowButton(_a) {
     var { label, disabled } = _a, props = __rest(_a, ["label", "disabled"]);
@@ -2808,7 +2811,7 @@ function SearchIcon() {
 
 function Input(_a) {
     var { placeholder = 'Search', showIcon = true, showPasteButton = false, className, icon, isError = false, onPasteButtonClick } = _a, props = __rest(_a, ["placeholder", "showIcon", "showPasteButton", "className", "icon", "isError", "onPasteButtonClick"]);
-    return (jsxs("div", { className: "tw-relative tw-w-full tw-text-grey-600", children: [jsx("input", Object.assign({}, props, { className: cn('tw-relative tw-h-10 tw-w-full tw-rounded-full tw-border tw-border-material-light-thin tw-bg-grey-900 tw-text-body-small tw-font-medium tw-text-grey-300 tw-outline-none tw-outline-offset-0 placeholder:tw-text-grey-600 focus:tw-outline-2', showIcon ? 'tw-pl-[44px]' : 'tw-px-2.5', showPasteButton ? 'tw-px-[70px]' : 'tw-pr-2.5', isError ? 'tw-outline-status-negative' : 'focus:tw-outline-royal-500', className), placeholder: placeholder })), showIcon ? (jsx("div", { className: "tw-absolute tw-inset-y-0 tw-left-0 tw-flex tw-h-full tw-w-[44px] tw-items-center tw-justify-center tw-px-squid-xs", children: icon || jsx(SearchIcon, {}) })) : null, showPasteButton ? (jsx("div", { className: "tw-absolute tw-inset-y-0 tw-right-1.5 tw-flex tw-items-center tw-justify-center", children: jsx(PasteButton, { onClick: onPasteButtonClick }) })) : null] }));
+    return (jsxs("div", { className: "tw-relative tw-w-full tw-text-grey-600", children: [jsx("input", Object.assign({}, props, { "aria-invalid": isError, className: cn('tw-relative tw-h-10 tw-w-full tw-rounded-full tw-border tw-border-material-light-thin tw-bg-grey-900 tw-text-body-small tw-font-medium tw-text-grey-300 placeholder:tw-text-grey-600 invalid:tw-outline-status-negative', showIcon ? 'tw-pl-[44px]' : 'tw-px-2.5', showPasteButton ? 'tw-px-[70px]' : 'tw-pr-2.5', isError && '!tw-outline-status-negative', className), placeholder: placeholder })), showIcon ? (jsx("div", { className: "tw-absolute tw-inset-y-0 tw-left-0 tw-flex tw-h-full tw-w-[44px] tw-items-center tw-justify-center tw-px-squid-xs", children: icon || jsx(SearchIcon, {}) })) : null, showPasteButton ? (jsx("div", { className: "tw-absolute tw-inset-y-0 tw-right-1.5 tw-flex tw-items-center tw-justify-center", children: jsx(PasteButton, { onClick: onPasteButtonClick }) })) : null] }));
 }
 const PasteButton = ({ onClick }) => {
     return (jsx("button", { onClick: onClick, className: "tw-h-[30px] tw-rounded-full tw-border tw-border-grey-700 tw-bg-grey-800 tw-px-2 tw-text-grey-300", children: jsx(CaptionText, { children: "Paste" }) }));
@@ -2956,8 +2959,18 @@ function HeadingText({ children, bold, size }) {
     return (jsx("h6", { className: clsx(textClassMap[size], fontWeightClass), children: children }));
 }
 
-function SettingsSlider({ value, type }) {
-    return (jsxs("div", { className: "tw-flex tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-xs tw-border-royal-500 tw-p-squid-xs", children: [jsx("span", { className: "tw-flex tw-items-center tw-justify-center", children: type === 'percentage' ? (jsxs(Fragment, { children: [jsx(CaptionText, { className: "!tw-font-medium tw-text-grey-600", children: String(value) }), jsx(CaptionText, { className: "!tw-font-medium tw-text-grey-300", children: "%" })] })) : (jsxs(Fragment, { children: [jsx(CaptionText, { className: "!tw-font-medium tw-text-grey-300", children: "$" }), jsx(CaptionText, { className: "!tw-font-medium tw-text-grey-600", children: String(value) })] })) }), jsx(Chip, { icon: jsx(ChevronGrabberVerticalIcon, { className: "tw-text-grey-900" }) })] }));
+function SettingsSlider({ value, type, onChange }) {
+    return (jsxs("div", { className: "tw-relative tw-flex tw-h-full tw-items-center tw-justify-center tw-rounded-squid-xs", children: [jsx("input", { min: 0, max: 99, placeholder: "0", type: "number", onChange: (e) => {
+                    onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value);
+                }, className: cn('tw-relative tw-flex tw-h-full tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-bg-transparent tw-p-squid-xs tw-text-caption !tw-font-medium tw-leading-[10px] tw-text-grey-300 placeholder-shown:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin', type === 'percentage'
+                    ? 'tw-w-[80px] tw-pr-[52px] tw-text-right'
+                    : 'tw-w-[76px] tw-pl-[20px] tw-pr-[32px] tw-text-left'), value: value }), type === 'percentage' && jsx(PercentageDecorator, {}), type === 'amount' && jsx(AmountDecorator, {})] }));
+}
+function PercentageDecorator() {
+    return (jsxs("div", { className: "tw-absolute tw-right-squid-xs tw-flex tw-items-center tw-justify-center tw-gap-squid-xs !tw-font-medium tw-leading-[10px]", children: [jsx(CaptionText, { className: "tw-translate-y-[0.5px] !tw-font-medium !tw-leading-[10px] tw-text-grey-300", children: "%" }), jsx(Chip, { icon: jsx(ChevronGrabberVerticalIcon, { className: "tw-text-grey-900" }) })] }));
+}
+function AmountDecorator() {
+    return (jsxs(Fragment, { children: [jsx(CaptionText, { className: "tw-absolute tw-left-squid-xs tw-translate-y-[0.5px] !tw-font-medium !tw-leading-[10px] tw-text-grey-300", children: "$" }), jsx("div", { className: "tw-absolute tw-right-squid-xs tw-flex tw-items-center tw-justify-center tw-gap-squid-xs !tw-font-medium tw-leading-[10px]", children: jsx(Chip, { icon: jsx(ChevronGrabberVerticalIcon, { className: "tw-text-grey-900" }) }) })] }));
 }
 
 const switchSizeClassMap = {
@@ -3091,8 +3104,8 @@ function FeeButton(_a) {
     return (jsxs("button", Object.assign({}, props, { className: cn('tw-flex tw-h-squid-xl tw-w-full tw-items-center tw-gap-x-squid-xs tw-rounded-squid-m tw-px-squid-xs hover:tw-bg-material-light-thin', className), children: [jsx(Chip, { label: chipLabel }), jsxs("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsx(Chip, { icon: jsx(EthereumIcon, {}) }), jsx(UsdAmount, { usdAmount: feeInUsd })] })] })));
 }
 
-function SettingsButton({ label }) {
-    return (jsx("button", { className: "tw-flex tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-border-2 tw-border-transparent tw-p-squid-xs", children: jsx(CaptionText, { className: "!tw-font-medium", children: label }) }));
+function SettingsButton({ label, isSelected = false, }) {
+    return (jsx("button", { className: cn('tw-flex tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-border-2 tw-border-transparent tw-p-squid-xs hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin', isSelected && 'tw-outline-royal-500'), children: jsx(CaptionText, { className: "!tw-font-medium", children: label }) }));
 }
 
 function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessage, canToggleBoostMode = true, }) {
@@ -3260,7 +3273,7 @@ function HelpIcon({ size = '20', className, }) {
     return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: className, children: [jsx("g", { "clip-path": "url(#clip0_457_36778)", children: jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10ZM6 7C6 4.46214 8.03736 3 10 3C12.1193 3 14 4.66531 14 7C14 7.93746 13.7596 8.6603 13.368 9.2586C13.0353 9.76679 12.6034 10.1601 12.2697 10.4639L12.1757 10.5497C11.8041 10.8904 11.534 11.1593 11.337 11.504C11.1513 11.8288 11 12.2794 11 13C11 13.5523 10.5523 14 10 14C9.44772 14 9 13.5523 9 13C9 11.9706 9.22366 11.1712 9.60051 10.5117C9.96604 9.87199 10.4459 9.42214 10.8243 9.07535L10.8834 9.02116L10.8834 9.02116L10.8834 9.02115C11.2572 8.67885 11.5066 8.45039 11.6945 8.16328C11.8654 7.9022 12 7.56254 12 7C12 5.83469 11.0807 5 10 5C8.96264 5 8 5.73786 8 7C8 7.55228 7.55228 8 7 8C6.44772 8 6 7.55228 6 7ZM10 15C9.44771 15 9 15.4477 9 16C9 16.5523 9.44771 17 10 17C10.5523 17 11 16.5523 11 16C11 15.4477 10.5523 15 10 15Z", fill: "currentColor" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_457_36778", children: jsx("rect", { width: "20", height: "20", fill: "white" }) }) })] }));
 }
 
-function SettingsItem({ icon, label, controls, transparentControls = false, showHelpIcon = true, link, transparent = false, helpTooltip, }) {
+function SettingsItem({ icon, label, controls = [], link, transparent = false, helpTooltip, }) {
     const ContentTag = link ? 'a' : 'div';
     const contentTagProps = link
         ? {
@@ -3268,11 +3281,26 @@ function SettingsItem({ icon, label, controls, transparentControls = false, show
             target: '_blank',
         }
         : {};
-    const helpIcon = showHelpIcon && (jsx(HelpIcon, { className: cn('tw-text-grey-600', 
-        // only add hover styles if helpTooltip is provided
-        !!helpTooltip &&
-            'tw-cursor-help tw-transition-colors tw-duration-200 hover:tw-text-grey-400') }));
-    return (jsx("li", { className: cn('tw-h-[50px] tw-self-stretch tw-px-squid-xs', transparent ? 'tw-bg-transparent' : 'tw-bg-grey-900 '), children: jsxs(ContentTag, Object.assign({ className: cn('tw-flex tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xs tw-text-grey-300', link && 'hover:tw-bg-material-light-thin') }, contentTagProps, { children: [icon, jsxs("div", { className: "tw-flex tw-flex-1 tw-items-center tw-gap-squid-xxs tw-self-stretch", children: [jsx(BodyText, { size: "small", children: label }), helpTooltip ? (jsx(Tooltip, Object.assign({}, helpTooltip, { children: helpIcon }))) : (jsx(Fragment, { children: helpIcon }))] }), jsx("div", { className: cn('tw-flex tw-h-squid-l tw-items-center tw-justify-center tw-rounded-squid-xs', transparentControls ? '' : 'tw-bg-grey-800'), children: controls })] })) }));
+    const helpIcon = !!helpTooltip && (jsx(HelpIcon, { className: cn('tw-text-grey-600', 'tw-cursor-help tw-transition-colors tw-duration-200 hover:tw-text-grey-400') }));
+    const showDetailsBorder = controls.length > 0 &&
+        !link &&
+        !controls.some((control) => control.type === 'switch');
+    return (jsx("li", { className: cn('tw-h-[50px] tw-self-stretch tw-px-squid-xs', transparent ? 'tw-bg-transparent' : 'tw-bg-grey-800'), children: jsxs(ContentTag, Object.assign({ className: cn('tw-flex tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xs tw-text-grey-300', link && 'hover:tw-bg-material-light-thin') }, contentTagProps, { children: [icon, jsxs("div", { className: "tw-flex tw-flex-1 tw-items-center tw-gap-squid-xxs tw-self-stretch", children: [jsx(BodyText, { size: "small", children: label }), helpTooltip ? (jsx(Tooltip, Object.assign({}, helpTooltip, { children: helpIcon }))) : (jsx(Fragment, { children: helpIcon }))] }), jsx("div", { className: cn('tw-flex tw-h-squid-l tw-items-center tw-justify-center tw-rounded-squid-xs', showDetailsBorder &&
+                        'tw-rounded-squid-xs tw-border tw-border-solid tw-border-material-light-thin tw-bg-material-dark-thin'), children: !!link ? (jsx(SquareArrowTopRight2Icon, { className: "tw-text-material-light-average" })) : (controls.map((control, index) => {
+                        if (control.type === 'switch') {
+                            const switchControl = (jsx(Switch, { size: "large", checked: control.checked, onChange: control.onChange }, index));
+                            if (control.tooltip) {
+                                return jsx(Tooltip, Object.assign({}, control.tooltip, { children: switchControl }));
+                            }
+                            return switchControl;
+                        }
+                        if (control.type === 'percentage') {
+                            return (jsxs(Fragment, { children: [jsx(SettingsButton, { label: control.resetValueControl.label, isSelected: control.resetValueControl.isSelected }), jsx(SettingsSlider, { value: control.value, type: "percentage" })] }));
+                        }
+                        if (control.type === 'amount') {
+                            return (jsxs(Fragment, { children: [jsx(SettingsButton, { label: control.resetValueControl.label, isSelected: control.resetValueControl.isSelected }), control.options.map(({ value, isSelected }, index, _controls) => (jsx(SettingsButton, { label: '$' + value, isSelected: isSelected }, index))), jsx(SettingsSlider, { type: control.type, value: 0 })] }));
+                        }
+                    })) })] })) }));
 }
 
 function SwapDetailListItem({ label, detail, icon, isLoading = false, }) {
@@ -3348,6 +3376,17 @@ function Modal({ children, className, onBackdropClick, isOpen: _isOpen = true, m
             : undefined, className: cn('tw-absolute tw-inset-0 tw-z-40 tw-flex tw-items-start tw-justify-center tw-bg-material-dark-average tw-px-squid-xs tw-py-squid-xl tw-pb-squid-m tw-transition-all', _isOpen ? 'tw-animate-blur-in' : 'tw-animate-blur-out'), children: jsx("div", { className: cn('tw-relative tw-flex tw-max-h-[600px] tw-w-[400px] tw-flex-col tw-items-start tw-justify-end tw-gap-squid-xxs tw-self-end', className, _isOpen ? 'tw-animate-slide-to-top' : 'tw-animate-slide-to-bottom', maxHeight && 'tw-h-full'), children: children }) })));
 }
 
+const borderTypeClassMap = {
+    border: 'tw-border tw-border-material-light-thin',
+    outline: 'tw-outline tw-outline-1 -tw-outline-offset-[1px] tw-outline-material-light-thin',
+};
+function ModalContent({ children, addGap = false, paddingY = false, borderType = 'border', }) {
+    return (jsx("div", { className: cn('tw-flex tw-h-full tw-max-h-[535px] tw-w-full tw-flex-col tw-self-stretch tw-rounded-squid-l tw-bg-grey-800 tw-text-grey-300', addGap && 'tw-gap-squid-xxs tw-pt-squid-xxs', borderTypeClassMap[borderType], paddingY && 'tw-py-squid-xxs'), children: children }));
+}
+function ModalContentDivider() {
+    return (jsx("svg", { width: "100%", height: "11", viewBox: "0 0 400 11", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("rect", { x: "1", y: "5", width: "398", height: "1", fill: "currentColor" }) }));
+}
+
 function NavigationBar({ title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, onBackButtonClick, actions, }) {
     return (jsxs("nav", { className: cn('tw-flex tw-max-h-[120px] tw-min-w-96 tw-flex-col tw-text-grey-300', transparent ? 'tw-bg-transparent' : 'tw-bg-grey-900'), children: [jsxs("div", { className: cn('tw-flex tw-h-squid-xxl tw-items-center tw-justify-end tw-gap-x-squid-xs', displayBackButton ? 'tw-px-squid-m' : 'tw-pl-squid-l tw-pr-squid-m'), children: [displayBackButton ? (jsx(Button, { className: displayButtonShadows
                             ? 'group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2'
@@ -3517,4 +3556,4 @@ function SquidConfigProvider({ theme, children, themeType = 'light', }) {
     return (jsx("div", { style: parsedStyle, "data-squid-theme-type": themeType, className: "tw-group tw-relative tw-font-geist", children: children }));
 }
 
-export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, ErrorMessage, FeeButton, HeadingText, HistoryItem, InfoBox, Input, ListItem, LoadingSkeleton, Menu, MenuItem, Modal, NavigationBar, NumericInput, ProductCard, ProfileHeaderBackground, SectionTitle, SettingsButton, SettingsItem, SettingsSlider, SquidConfigProvider, SwapConfiguration, SwapDetailListItem, SwapProgressViewHeader, SwapStepItem, SwapStepsCollapsed, Switch, TokenPair, Tooltip, UsdAmount, useDropdownMenu };
+export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, ErrorMessage, FeeButton, HeadingText, HistoryItem, InfoBox, Input, ListItem, LoadingSkeleton, Menu, MenuItem, Modal, ModalContent, ModalContentDivider, NavigationBar, NumericInput, ProductCard, ProfileHeaderBackground, SectionTitle, SettingsButton, SettingsItem, SettingsSlider, SquidConfigProvider, SwapConfiguration, SwapDetailListItem, SwapProgressViewHeader, SwapStepItem, SwapStepsCollapsed, Switch, TokenPair, Tooltip, UsdAmount, useDropdownMenu };

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

@@ -1,4 +1,5 @@
 export interface SettingsButtonProps {
     label: string;
+    isSelected?: boolean;
 }
-export declare function SettingsButton({ label }: SettingsButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function SettingsButton({ label, isSelected, }: SettingsButtonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,6 @@
 export interface SettingsSliderProps {
     value: number;
     type: 'percentage' | 'amount';
+    onChange?: (value: string) => void;
 }
-export declare function SettingsSlider({ value, type }: SettingsSliderProps): import("react/jsx-runtime").JSX.Element;
+export declare function SettingsSlider({ value, type, onChange }: SettingsSliderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -10,3 +10,7 @@ export declare const SettingsGearIcon: ({ size, className, }: {
     className?: string;
     size?: string;
 }) => import("react/jsx-runtime").JSX.Element;
+export declare const ExplosionIcon: ({ size, className, }: {
+    className?: string;
+    size?: string;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,8 +1,10 @@
 /// <reference types="react" />
 type ModalContentBorderType = 'border' | 'outline';
-export declare function ModalContent({ children, addGap, borderType, }: {
+export declare function ModalContent({ children, addGap, paddingY, borderType, }: {
     children?: React.ReactNode;
     addGap?: boolean;
+    paddingY?: boolean;
     borderType?: ModalContentBorderType;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function ModalContentDivider(): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -5,6 +5,7 @@ export * from './ErrorMessage';
 export * from './InfoBox';
 export * from './Menu';
 export * from './Modal';
+export * from './ModalContent';
 export * from './NavigationBar';
 export * from './ProductCard';
 export * from './ProfileHeaderBackground';

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

@@ -1,13 +1,38 @@
 /// <reference types="react" />
 import { TooltipProps } from '../controls';
+export type SettingsControl = {
+    type: 'percentage';
+    value: number;
+    onChange: (value: number) => void;
+    resetValueControl: {
+        label: string;
+        onSelect: () => void;
+        isSelected?: boolean;
+    };
+} | {
+    type: 'amount';
+    options: {
+        value: number;
+        isSelected?: boolean;
+        onSelect?: () => void;
+    }[];
+    resetValueControl: {
+        label: string;
+        onSelect: () => void;
+        isSelected?: boolean;
+    };
+} | {
+    type: 'switch';
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    tooltip?: Omit<TooltipProps, 'children'>;
+};
 export interface SettingsItemProps {
     icon: React.ReactNode;
     label: string;
-    controls?: React.ReactNode;
-    transparentControls?: boolean;
-    showHelpIcon?: boolean;
+    controls?: SettingsControl[];
     link?: string;
     transparent?: boolean;
     helpTooltip?: Omit<TooltipProps, 'children'>;
 }
-export declare function SettingsItem({ icon, label, controls, transparentControls, showHelpIcon, link, transparent, helpTooltip, }: SettingsItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function SettingsItem({ icon, label, controls, link, transparent, helpTooltip, }: SettingsItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/stories/buttons/SettingsButton.stories.d.ts

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof SettingsButton>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const Selected: Story;

package/dist/esm/types/stories/layout/ModalContent.stories.d.ts

@@ -6,3 +6,4 @@ type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const WithBorder: Story;
 export declare const WithOutline: Story;
+export declare const VerticalPadding: Story;

package/dist/esm/types/stories/lists/SettingsItem.stories.d.ts

@@ -5,8 +5,10 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const WithControls: Story;
-export declare const WithoutHelpIcon: Story;
-export declare const TransparentControls: Story;
 export declare const Link: Story;
 export declare const Transparent: Story;
 export declare const WithHelpTooltip: Story;
+export declare const SwitchControl: Story;
+export declare const SwitchControlWithTooltip: Story;
+export declare const AmountControls: Story;
+export declare const PercentageControls: Story;

package/dist/index.css

@@ -685,6 +685,10 @@ video {
   left: calc(50% - 1.5px);
 }
 
+.tw-left-squid-xs {
+  left: 0.625rem;
+}
+
 .tw-right-0 {
   right: 0px;
 }
@@ -709,6 +713,10 @@ video {
   right: calc(100% - 10px);
 }
 
+.tw-right-squid-xs {
+  right: 0.625rem;
+}
+
 .tw-right-squid-xxs {
   right: 0.3125rem;
 }
@@ -1184,6 +1192,14 @@ video {
   width: 72px;
 }
 
+.tw-w-\[76px\] {
+  width: 76px;
+}
+
+.tw-w-\[80px\] {
+  width: 80px;
+}
+
 .tw-w-\[90px\] {
   width: 90px;
 }
@@ -1345,6 +1361,11 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.tw-translate-y-\[0\.5px\] {
+  --tw-translate-y: 0.5px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .tw-rotate-180 {
   --tw-rotate: 180deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1783,10 +1804,6 @@ video {
   border-color: var(--squid-theme-material-light-thin);
 }
 
-.tw-border-royal-500 {
-  border-color: var(--squid-theme-royal-500);
-}
-
 .tw-border-slate-800 {
   --tw-border-opacity: 1;
   border-color: rgb(30 41 59 / var(--tw-border-opacity));
@@ -1854,6 +1871,10 @@ video {
   background-color: var(--squid-theme-material-dark-thick);
 }
 
+.tw-bg-material-dark-thin {
+  background-color: var(--squid-theme-material-dark-thin);
+}
+
 .tw-bg-material-light-thick {
   background-color: var(--squid-theme-material-light-thick);
 }
@@ -2108,6 +2129,10 @@ video {
   padding-left: 0.25rem;
 }
 
+.tw-pl-\[20px\] {
+  padding-left: 20px;
+}
+
 .tw-pl-\[44px\] {
   padding-left: 44px;
 }
@@ -2140,6 +2165,14 @@ video {
   padding-right: 1rem;
 }
 
+.tw-pr-\[32px\] {
+  padding-right: 32px;
+}
+
+.tw-pr-\[52px\] {
+  padding-right: 52px;
+}
+
 .tw-pr-squid-m {
   padding-right: 1.25rem;
 }
@@ -2172,6 +2205,10 @@ video {
   padding-top: 0.3125rem;
 }
 
+.tw-text-left {
+  text-align: left;
+}
+
 .tw-text-center {
   text-align: center;
 }
@@ -2429,11 +2466,6 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.tw-outline-none {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
-
 .tw-outline {
   outline-style: solid;
 }
@@ -2450,16 +2482,16 @@ video {
   outline-offset: -1px;
 }
 
-.tw-outline-offset-0 {
-  outline-offset: 0px;
+.\!tw-outline-status-negative {
+  outline-color: var(--squid-theme-status-negative) !important;
 }
 
 .tw-outline-material-light-thin {
   outline-color: var(--squid-theme-material-light-thin);
 }
 
-.tw-outline-status-negative {
-  outline-color: var(--squid-theme-status-negative);
+.tw-outline-royal-500 {
+  outline-color: var(--squid-theme-royal-500);
 }
 
 .tw-backdrop-blur-2xl {
@@ -2570,6 +2602,32 @@ li {
   );
 }
 
+button,
+input {
+  outline: 2px solid transparent;
+  outline-offset: -1px;
+}
+
+button:focus,
+input:focus {
+  outline-width: 2px;
+  outline-color: var(--squid-theme-royal-500);
+}
+
+/* Chrome, Safari, Edge, Opera */
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+
+input[type='number'] {
+  -moz-appearance: textfield;
+}
+
 .placeholder\:tw-text-grey-600::-moz-placeholder {
   color: var(--squid-theme-grey-600);
 }
@@ -2578,6 +2636,18 @@ li {
   color: var(--squid-theme-grey-600);
 }
 
+.placeholder-shown\:tw-text-grey-600:-moz-placeholder-shown {
+  color: var(--squid-theme-grey-600);
+}
+
+.placeholder-shown\:tw-text-grey-600:placeholder-shown {
+  color: var(--squid-theme-grey-600);
+}
+
+.invalid\:tw-outline-status-negative:invalid {
+  outline-color: var(--squid-theme-status-negative);
+}
+
 .hover\:tw-block:hover {
   display: block;
 }
@@ -2607,14 +2677,6 @@ li {
   outline-offset: 2px;
 }
 
-.focus\:tw-outline-2:focus {
-  outline-width: 2px;
-}
-
-.focus\:tw-outline-royal-500:focus {
-  outline-color: var(--squid-theme-royal-500);
-}
-
 .disabled\:tw-bg-grey-800:disabled {
   background-color: var(--squid-theme-grey-800);
 }

package/dist/index.d.ts

@@ -98,8 +98,9 @@ declare function FeeButton({ feeInUsd, chipLabel, className, ...props }: FeeButt
 
 interface SettingsButtonProps {
     label: string;
+    isSelected?: boolean;
 }
-declare function SettingsButton({ label }: SettingsButtonProps): react_jsx_runtime.JSX.Element;
+declare function SettingsButton({ label, isSelected, }: SettingsButtonProps): react_jsx_runtime.JSX.Element;
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     placeholder?: string;
@@ -124,8 +125,9 @@ declare const NumericInput: ({ onParsedValueChanged, initialValue, forcedUpdateV
 interface SettingsSliderProps {
     value: number;
     type: 'percentage' | 'amount';
+    onChange?: (value: string) => void;
 }
-declare function SettingsSlider({ value, type }: SettingsSliderProps): react_jsx_runtime.JSX.Element;
+declare function SettingsSlider({ value, type, onChange }: SettingsSliderProps): react_jsx_runtime.JSX.Element;
 
 interface SwitchProps {
     checked?: boolean;
@@ -241,17 +243,42 @@ interface SectionTitleProps {
 }
 declare function SectionTitle({ title, icon, accessory, actionIcon, className, }: SectionTitleProps): react_jsx_runtime.JSX.Element;
 
+type SettingsControl = {
+    type: 'percentage';
+    value: number;
+    onChange: (value: number) => void;
+    resetValueControl: {
+        label: string;
+        onSelect: () => void;
+        isSelected?: boolean;
+    };
+} | {
+    type: 'amount';
+    options: {
+        value: number;
+        isSelected?: boolean;
+        onSelect?: () => void;
+    }[];
+    resetValueControl: {
+        label: string;
+        onSelect: () => void;
+        isSelected?: boolean;
+    };
+} | {
+    type: 'switch';
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    tooltip?: Omit<TooltipProps, 'children'>;
+};
 interface SettingsItemProps {
     icon: React.ReactNode;
     label: string;
-    controls?: React.ReactNode;
-    transparentControls?: boolean;
-    showHelpIcon?: boolean;
+    controls?: SettingsControl[];
     link?: string;
     transparent?: boolean;
     helpTooltip?: Omit<TooltipProps, 'children'>;
 }
-declare function SettingsItem({ icon, label, controls, transparentControls, showHelpIcon, link, transparent, helpTooltip, }: SettingsItemProps): react_jsx_runtime.JSX.Element;
+declare function SettingsItem({ icon, label, controls, link, transparent, helpTooltip, }: SettingsItemProps): react_jsx_runtime.JSX.Element;
 
 interface SwapDetailListItemProps {
     label: string;
@@ -313,6 +340,15 @@ interface ModalProps {
 }
 declare function Modal({ children, className, onBackdropClick, isOpen: _isOpen, maxHeight, }: ModalProps): false | react_jsx_runtime.JSX.Element;
 
+type ModalContentBorderType = 'border' | 'outline';
+declare function ModalContent({ children, addGap, paddingY, borderType, }: {
+    children?: React.ReactNode;
+    addGap?: boolean;
+    paddingY?: boolean;
+    borderType?: ModalContentBorderType;
+}): react_jsx_runtime.JSX.Element;
+declare function ModalContentDivider(): react_jsx_runtime.JSX.Element;
+
 type ActionButton = {
     labelOrIcon: string | React.ReactNode;
     onClick?: () => void;
@@ -457,4 +493,4 @@ declare function useDropdownMenu(props?: {
     openDropdownButtonRef: React.RefObject<HTMLButtonElement>;
 };
 
-export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, ErrorMessage, FeeButton, HeadingText, HistoryItem, InfoBox, Input, ListItem, LoadingSkeleton, Menu, MenuItem, Modal, NavigationBar, NumericInput, ProductCard, ProfileHeaderBackground, SectionTitle, SettingsButton, type SettingsButtonProps, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, SquidConfigProvider, type SquidTheme, SwapConfiguration, SwapDetailListItem, SwapProgressViewHeader, SwapStepItem, SwapStepsCollapsed, Switch, TokenPair, Tooltip, type TooltipProps, type TooltipThreshold, type TooltipWidth, UsdAmount, useDropdownMenu };
+export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, ErrorMessage, FeeButton, HeadingText, HistoryItem, InfoBox, Input, ListItem, LoadingSkeleton, Menu, MenuItem, Modal, ModalContent, ModalContentDivider, NavigationBar, NumericInput, ProductCard, ProfileHeaderBackground, SectionTitle, SettingsButton, type SettingsButtonProps, type SettingsControl, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, SquidConfigProvider, type SquidTheme, SwapConfiguration, SwapDetailListItem, SwapProgressViewHeader, SwapStepItem, SwapStepsCollapsed, Switch, TokenPair, Tooltip, type TooltipProps, type TooltipThreshold, type TooltipWidth, UsdAmount, useDropdownMenu };

package/package.json

@@ -5,7 +5,7 @@
     "url": "git+https://github.com/0xsquid/squid-ui.git"
   },
   "description": "Squid's UI components",
-  "version": "0.9.1",
+  "version": "0.9.3",
   "author": "",
   "license": "MIT",
   "scripts": {