@0xsquid/ui 0.16.0 → 0.16.1

package/dist/cjs/index.js

@@ -6714,8 +6714,8 @@ function SettingsItem({ icon, label, control, link, transparent = false, helpToo
     const helpIcon = !!helpTooltip && (jsxRuntime.jsx(HelpIcon, { className: "tw-cursor-help tw-text-grey-600 hover:tw-text-grey-400" }));
     const showDetailsBorder = !!control && !link && !(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" })) : (!!control && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [control.type === 'amount' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SettingsButton, { onClick: () => control.onChange(control.resetValueControl.value), label: control.resetValueControl.label, isSelected: control.resetValueControl.value === control.value }), control.options.map(({ value }, index, _controls) => (jsxRuntime.jsx(SettingsButton, { label: '$' + value, isSelected: control.value === value, onClick: () => control.onChange(value) }, index))), jsxRuntime.jsx(SettingsSlider, { type: control.type, value: control.value, onChange: control.onChange, hasDecimals: false, max: 999 })] })), control.type === 'switch' &&
-                                (control.tooltip ? (jsxRuntime.jsx(Tooltip, Object.assign({}, control.tooltip, { children: jsxRuntime.jsx(Switch, { size: "large", checked: control.checked, onChange: control.onChange, disabled: control.disabled }) }))) : (jsxRuntime.jsx(Switch, { size: "large", checked: control.checked, onChange: control.onChange, disabled: control.disabled }))), control.type === 'percentage' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SettingsButton, { label: control.resetValueControl.label, isSelected: control.resetValueControl.value === control.value, onClick: control.resetValueControl.onSelect }), jsxRuntime.jsx(SettingsSlider, { onChange: control.onChange, value: control.value, type: "percentage", hasDecimals: control.hasDecimals, max: control.max, min: control.min })] }))] }))) })] })) }));
+                        '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" })) : (!!control && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [control.type === 'amount' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SettingsButton, { onClick: () => control.onChange(control.resetValueControl.value), label: control.resetValueControl.label, isSelected: control.resetValueControl.value === control.value }), control.options.map(({ value }, index, _controls) => (jsxRuntime.jsx(SettingsButton, { label: '$' + value, isSelected: control.value === value, onClick: () => control.onChange(value) }, index))), jsxRuntime.jsx(SettingsSlider, { type: control.type, value: control.value, isSelected: control.value !== control.resetValueControl.value, onChange: control.onChange, decimalsFormat: control.decimalsFormat, max: 999 })] })), control.type === 'switch' &&
+                                (control.tooltip ? (jsxRuntime.jsx(Tooltip, Object.assign({}, control.tooltip, { children: jsxRuntime.jsx(Switch, { size: "large", checked: control.checked, onChange: control.onChange, disabled: control.disabled }) }))) : (jsxRuntime.jsx(Switch, { size: "large", checked: control.checked, onChange: control.onChange, disabled: control.disabled }))), control.type === 'percentage' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SettingsButton, { label: control.resetValueControl.label, isSelected: control.resetValueControl.value === control.value, onClick: control.resetValueControl.onSelect }), jsxRuntime.jsx(SettingsSlider, { onChange: control.onChange, value: control.value, type: "percentage", isSelected: control.value !== control.resetValueControl.value, decimalsFormat: control.decimalsFormat, max: control.max, min: control.min })] }))] }))) })] })) }));
 }
 
 function SwapDetailListItem({ label, detail, icon, isLoading = false, }) {
@@ -7155,7 +7155,7 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
                                             : amountFormatted }), ' ', jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: token.symbol })] })), priceImpactPercentage && direction === 'to' ? (jsxRuntime.jsxs("span", { className: cn('tw-flex tw-items-center', priceImpactClass), children: [jsxRuntime.jsx(ArrowTriangle, {}), jsxRuntime.jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] })), jsxRuntime.jsxs(BalanceChipTag, { onClick: onBalanceButtonClick, className: cn(buttonClassName, isInteractive && interactiveChipClassName), children: [jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxRuntime.jsxs(CaptionText, { children: [balanceFormatted, " ", token.symbol] }), jsxRuntime.jsx(MaxIcon, {})] })] }))] }));
 }
 
-function SettingsSlider({ value, type, onChange, decimalsFormat, max, min, }) {
+function SettingsSlider({ value, type, onChange, decimalsFormat, max, min, isSelected, }) {
     const [isInputVisible, setIsInputVisible] = React.useState(false);
     const [inputValue, setInputValue] = React.useState(String(value !== null && value !== void 0 ? value : 0));
     React.useEffect(() => {
@@ -7197,9 +7197,9 @@ function SettingsSlider({ value, type, onChange, decimalsFormat, max, min, }) {
     const handleCloseInput = React.useCallback(() => {
         setIsInputVisible(false);
     }, []);
-    return (jsxRuntime.jsxs("div", { ref: sliderRef, className: "tw-relative tw-flex tw-h-full tw-items-center tw-justify-center tw-rounded-squid-xs", children: [jsxRuntime.jsxs("button", { className: cn('tw-relative tw-flex tw-h-[32px] tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-p-squid-xs tw-pr-[40px] tw-text-left tw-text-caption !tw-font-medium tw-leading-[10px] placeholder-shown:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin', value === 0 || value === undefined
+    return (jsxRuntime.jsxs("div", { ref: sliderRef, className: "tw-relative tw-flex tw-h-[30px] tw-items-center tw-justify-center tw-rounded-squid-xs", children: [jsxRuntime.jsxs("button", { className: cn('tw-relative tw-flex tw-h-full tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-p-squid-xs tw-pr-[40px] tw-text-left tw-text-caption !tw-font-medium tw-leading-[10px] placeholder-shown:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin', value === 0 || value === undefined
                     ? 'tw-text-grey-600'
-                    : 'tw-text-grey-300', isInputVisible ? 'tw-bg-material-light-thin' : 'tw-bg-transparent'), children: [value !== null && value !== void 0 ? value : 0, jsxRuntime.jsx(CaptionText, { className: "!tw-font-medium !tw-leading-[10px] tw-text-grey-300", children: type === 'percentage' ? '%' : '$' })] }), jsxRuntime.jsx("button", { onClick: handleOpenInput, className: "tw-absolute tw-right-squid-xs tw-flex tw-h-[26px] tw-w-[26px] tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-xxs !tw-font-medium tw-leading-[10px] hover:tw-bg-material-light-thin", children: jsxRuntime.jsx(Chip, { icon: jsxRuntime.jsx(ChevronGrabberVerticalIcon, { className: "tw-text-grey-900" }) }) }), isInputVisible && (jsxRuntime.jsx(Menu, { menuRef: menuRef, containerClassName: "tw-absolute tw-bottom-full tw-z-10 tw-pb-squid-m tw-w-[160px]", children: jsxRuntime.jsx("form", { onSubmit: (e) => {
+                    : 'tw-text-grey-300', isInputVisible ? 'tw-bg-material-light-thin' : 'tw-bg-transparent', isSelected && 'tw-outline tw-outline-2 tw-outline-royal-500'), children: [value !== null && value !== void 0 ? value : 0, jsxRuntime.jsx(CaptionText, { className: "!tw-font-medium !tw-leading-[10px] tw-text-grey-300", children: type === 'percentage' ? '%' : '$' })] }), jsxRuntime.jsx("button", { onClick: handleOpenInput, className: "tw-absolute tw-right-squid-xs tw-flex tw-h-[26px] tw-w-[26px] tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-xxs !tw-font-medium tw-leading-[10px] hover:tw-bg-material-light-thin", children: jsxRuntime.jsx(Chip, { icon: jsxRuntime.jsx(ChevronGrabberVerticalIcon, { className: "tw-text-grey-900" }) }) }), isInputVisible && (jsxRuntime.jsx(Menu, { menuRef: menuRef, containerClassName: "tw-absolute tw-bottom-full tw-z-10 tw-pb-squid-m tw-w-[160px]", children: jsxRuntime.jsx("form", { onSubmit: (e) => {
                         e.preventDefault();
                         handleSubmit(inputValue);
                     }, children: jsxRuntime.jsx(Input, { autoFocus: true, min: min, max: max, onKeyDown: handleKeyDown, step: decimalsFormat, placeholder: "0", type: "number", defaultValue: value, value: inputValue, onChange: (e) => {
@@ -7299,7 +7299,7 @@ function generateMarkerLines(count) {
 }
 
 function SettingsButton({ label, isSelected = false, onClick, }) {
-    return (jsxRuntime.jsx("button", { onClick: onClick, 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 }) }));
+    return (jsxRuntime.jsx("button", { onClick: onClick, className: cn('tw-flex tw-h-[30px] 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 tw-outline-2 tw-outline-royal-500'), children: jsxRuntime.jsx(CaptionText, { className: "!tw-font-medium", children: label }) }));
 }
 
 var v$5 = "5.10.0";

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

@@ -1,9 +1,10 @@
 export interface SettingsSliderProps {
-    value: number;
+    value: number | undefined;
     type: 'percentage' | 'amount';
     onChange?: (value: number | undefined) => void;
     decimalsFormat?: number;
     min?: number;
     max?: number;
+    isSelected?: boolean;
 }
-export declare function SettingsSlider({ value, type, onChange, decimalsFormat, max, min, }: SettingsSliderProps): import("react/jsx-runtime").JSX.Element;
+export declare function SettingsSlider({ value, type, onChange, decimalsFormat, max, min, isSelected, }: SettingsSliderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -2,26 +2,27 @@
 import { TooltipProps } from '../controls';
 export type SettingsControl = {
     type: 'percentage';
-    value: number;
-    onChange: (value: number) => void;
+    value: number | undefined;
+    onChange: (value: number | undefined) => void;
     min?: number;
     max?: number;
-    hasDecimals?: boolean;
+    decimalsFormat?: number;
     resetValueControl: {
         label: string;
         onSelect: () => void;
-        value: number;
+        value: number | undefined;
     };
 } | {
     type: 'amount';
-    value: number;
-    onChange: (value: number) => void;
+    value: number | undefined;
+    onChange: (value: number | undefined) => void;
     options: {
         value: number;
     }[];
+    decimalsFormat?: number;
     resetValueControl: {
         label: string;
-        value: number;
+        value: number | undefined;
     };
 } | {
     type: 'switch';

package/dist/esm/index.js

@@ -6694,8 +6694,8 @@ function SettingsItem({ icon, label, control, link, transparent = false, helpToo
     const helpIcon = !!helpTooltip && (jsx(HelpIcon, { className: "tw-cursor-help tw-text-grey-600 hover:tw-text-grey-400" }));
     const showDetailsBorder = !!control && !link && !(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" })) : (!!control && (jsxs(Fragment, { children: [control.type === 'amount' && (jsxs(Fragment, { children: [jsx(SettingsButton, { onClick: () => control.onChange(control.resetValueControl.value), label: control.resetValueControl.label, isSelected: control.resetValueControl.value === control.value }), control.options.map(({ value }, index, _controls) => (jsx(SettingsButton, { label: '$' + value, isSelected: control.value === value, onClick: () => control.onChange(value) }, index))), jsx(SettingsSlider, { type: control.type, value: control.value, onChange: control.onChange, hasDecimals: false, max: 999 })] })), control.type === 'switch' &&
-                                (control.tooltip ? (jsx(Tooltip, Object.assign({}, control.tooltip, { children: jsx(Switch, { size: "large", checked: control.checked, onChange: control.onChange, disabled: control.disabled }) }))) : (jsx(Switch, { size: "large", checked: control.checked, onChange: control.onChange, disabled: control.disabled }))), control.type === 'percentage' && (jsxs(Fragment, { children: [jsx(SettingsButton, { label: control.resetValueControl.label, isSelected: control.resetValueControl.value === control.value, onClick: control.resetValueControl.onSelect }), jsx(SettingsSlider, { onChange: control.onChange, value: control.value, type: "percentage", hasDecimals: control.hasDecimals, max: control.max, min: control.min })] }))] }))) })] })) }));
+                        '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" })) : (!!control && (jsxs(Fragment, { children: [control.type === 'amount' && (jsxs(Fragment, { children: [jsx(SettingsButton, { onClick: () => control.onChange(control.resetValueControl.value), label: control.resetValueControl.label, isSelected: control.resetValueControl.value === control.value }), control.options.map(({ value }, index, _controls) => (jsx(SettingsButton, { label: '$' + value, isSelected: control.value === value, onClick: () => control.onChange(value) }, index))), jsx(SettingsSlider, { type: control.type, value: control.value, isSelected: control.value !== control.resetValueControl.value, onChange: control.onChange, decimalsFormat: control.decimalsFormat, max: 999 })] })), control.type === 'switch' &&
+                                (control.tooltip ? (jsx(Tooltip, Object.assign({}, control.tooltip, { children: jsx(Switch, { size: "large", checked: control.checked, onChange: control.onChange, disabled: control.disabled }) }))) : (jsx(Switch, { size: "large", checked: control.checked, onChange: control.onChange, disabled: control.disabled }))), control.type === 'percentage' && (jsxs(Fragment, { children: [jsx(SettingsButton, { label: control.resetValueControl.label, isSelected: control.resetValueControl.value === control.value, onClick: control.resetValueControl.onSelect }), jsx(SettingsSlider, { onChange: control.onChange, value: control.value, type: "percentage", isSelected: control.value !== control.resetValueControl.value, decimalsFormat: control.decimalsFormat, max: control.max, min: control.min })] }))] }))) })] })) }));
 }
 
 function SwapDetailListItem({ label, detail, icon, isLoading = false, }) {
@@ -7135,7 +7135,7 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
                                             : amountFormatted }), ' ', jsx(CaptionText, { className: "tw-opacity-66", children: token.symbol })] })), priceImpactPercentage && direction === 'to' ? (jsxs("span", { className: cn('tw-flex tw-items-center', priceImpactClass), children: [jsx(ArrowTriangle, {}), jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] })), jsxs(BalanceChipTag, { onClick: onBalanceButtonClick, className: cn(buttonClassName, isInteractive && interactiveChipClassName), children: [jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxs(CaptionText, { children: [balanceFormatted, " ", token.symbol] }), jsx(MaxIcon, {})] })] }))] }));
 }
 
-function SettingsSlider({ value, type, onChange, decimalsFormat, max, min, }) {
+function SettingsSlider({ value, type, onChange, decimalsFormat, max, min, isSelected, }) {
     const [isInputVisible, setIsInputVisible] = useState(false);
     const [inputValue, setInputValue] = useState(String(value !== null && value !== void 0 ? value : 0));
     useEffect(() => {
@@ -7177,9 +7177,9 @@ function SettingsSlider({ value, type, onChange, decimalsFormat, max, min, }) {
     const handleCloseInput = useCallback(() => {
         setIsInputVisible(false);
     }, []);
-    return (jsxs("div", { ref: sliderRef, className: "tw-relative tw-flex tw-h-full tw-items-center tw-justify-center tw-rounded-squid-xs", children: [jsxs("button", { className: cn('tw-relative tw-flex tw-h-[32px] tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-p-squid-xs tw-pr-[40px] tw-text-left tw-text-caption !tw-font-medium tw-leading-[10px] placeholder-shown:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin', value === 0 || value === undefined
+    return (jsxs("div", { ref: sliderRef, className: "tw-relative tw-flex tw-h-[30px] tw-items-center tw-justify-center tw-rounded-squid-xs", children: [jsxs("button", { className: cn('tw-relative tw-flex tw-h-full tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-p-squid-xs tw-pr-[40px] tw-text-left tw-text-caption !tw-font-medium tw-leading-[10px] placeholder-shown:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin', value === 0 || value === undefined
                     ? 'tw-text-grey-600'
-                    : 'tw-text-grey-300', isInputVisible ? 'tw-bg-material-light-thin' : 'tw-bg-transparent'), children: [value !== null && value !== void 0 ? value : 0, jsx(CaptionText, { className: "!tw-font-medium !tw-leading-[10px] tw-text-grey-300", children: type === 'percentage' ? '%' : '$' })] }), jsx("button", { onClick: handleOpenInput, className: "tw-absolute tw-right-squid-xs tw-flex tw-h-[26px] tw-w-[26px] tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-xxs !tw-font-medium tw-leading-[10px] hover:tw-bg-material-light-thin", children: jsx(Chip, { icon: jsx(ChevronGrabberVerticalIcon, { className: "tw-text-grey-900" }) }) }), isInputVisible && (jsx(Menu, { menuRef: menuRef, containerClassName: "tw-absolute tw-bottom-full tw-z-10 tw-pb-squid-m tw-w-[160px]", children: jsx("form", { onSubmit: (e) => {
+                    : 'tw-text-grey-300', isInputVisible ? 'tw-bg-material-light-thin' : 'tw-bg-transparent', isSelected && 'tw-outline tw-outline-2 tw-outline-royal-500'), children: [value !== null && value !== void 0 ? value : 0, jsx(CaptionText, { className: "!tw-font-medium !tw-leading-[10px] tw-text-grey-300", children: type === 'percentage' ? '%' : '$' })] }), jsx("button", { onClick: handleOpenInput, className: "tw-absolute tw-right-squid-xs tw-flex tw-h-[26px] tw-w-[26px] tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-xxs !tw-font-medium tw-leading-[10px] hover:tw-bg-material-light-thin", children: jsx(Chip, { icon: jsx(ChevronGrabberVerticalIcon, { className: "tw-text-grey-900" }) }) }), isInputVisible && (jsx(Menu, { menuRef: menuRef, containerClassName: "tw-absolute tw-bottom-full tw-z-10 tw-pb-squid-m tw-w-[160px]", children: jsx("form", { onSubmit: (e) => {
                         e.preventDefault();
                         handleSubmit(inputValue);
                     }, children: jsx(Input, { autoFocus: true, min: min, max: max, onKeyDown: handleKeyDown, step: decimalsFormat, placeholder: "0", type: "number", defaultValue: value, value: inputValue, onChange: (e) => {
@@ -7279,7 +7279,7 @@ function generateMarkerLines(count) {
 }
 
 function SettingsButton({ label, isSelected = false, onClick, }) {
-    return (jsx("button", { onClick: onClick, 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 }) }));
+    return (jsx("button", { onClick: onClick, className: cn('tw-flex tw-h-[30px] 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 tw-outline-2 tw-outline-royal-500'), children: jsx(CaptionText, { className: "!tw-font-medium", children: label }) }));
 }
 
 var v$5 = "5.10.0";

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

@@ -1,9 +1,10 @@
 export interface SettingsSliderProps {
-    value: number;
+    value: number | undefined;
     type: 'percentage' | 'amount';
     onChange?: (value: number | undefined) => void;
     decimalsFormat?: number;
     min?: number;
     max?: number;
+    isSelected?: boolean;
 }
-export declare function SettingsSlider({ value, type, onChange, decimalsFormat, max, min, }: SettingsSliderProps): import("react/jsx-runtime").JSX.Element;
+export declare function SettingsSlider({ value, type, onChange, decimalsFormat, max, min, isSelected, }: SettingsSliderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -2,26 +2,27 @@
 import { TooltipProps } from '../controls';
 export type SettingsControl = {
     type: 'percentage';
-    value: number;
-    onChange: (value: number) => void;
+    value: number | undefined;
+    onChange: (value: number | undefined) => void;
     min?: number;
     max?: number;
-    hasDecimals?: boolean;
+    decimalsFormat?: number;
     resetValueControl: {
         label: string;
         onSelect: () => void;
-        value: number;
+        value: number | undefined;
     };
 } | {
     type: 'amount';
-    value: number;
-    onChange: (value: number) => void;
+    value: number | undefined;
+    onChange: (value: number | undefined) => void;
     options: {
         value: number;
     }[];
+    decimalsFormat?: number;
     resetValueControl: {
         label: string;
-        value: number;
+        value: number | undefined;
     };
 } | {
     type: 'switch';

package/dist/index.css

@@ -932,10 +932,6 @@ video {
   height: 30px;
 }
 
-.tw-h-\[32px\] {
-  height: 32px;
-}
-
 .tw-h-\[40px\] {
   height: 40px;
 }

package/dist/index.d.ts

@@ -167,14 +167,15 @@ interface NumericInputProps {
 declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxDecimals, formatIfVerySmall, showDetails, isLoading, direction, amountUsd, }: NumericInputProps): react_jsx_runtime.JSX.Element;
 
 interface SettingsSliderProps {
-    value: number;
+    value: number | undefined;
     type: 'percentage' | 'amount';
     onChange?: (value: number | undefined) => void;
     decimalsFormat?: number;
     min?: number;
     max?: number;
+    isSelected?: boolean;
 }
-declare function SettingsSlider({ value, type, onChange, decimalsFormat, max, min, }: SettingsSliderProps): react_jsx_runtime.JSX.Element;
+declare function SettingsSlider({ value, type, onChange, decimalsFormat, max, min, isSelected, }: SettingsSliderProps): react_jsx_runtime.JSX.Element;
 
 interface SwitchProps {
     checked?: boolean;
@@ -301,26 +302,27 @@ declare function SectionTitle({ title, icon, accessory, actionIcon, className, .
 
 type SettingsControl = {
     type: 'percentage';
-    value: number;
-    onChange: (value: number) => void;
+    value: number | undefined;
+    onChange: (value: number | undefined) => void;
     min?: number;
     max?: number;
-    hasDecimals?: boolean;
+    decimalsFormat?: number;
     resetValueControl: {
         label: string;
         onSelect: () => void;
-        value: number;
+        value: number | undefined;
     };
 } | {
     type: 'amount';
-    value: number;
-    onChange: (value: number) => void;
+    value: number | undefined;
+    onChange: (value: number | undefined) => void;
     options: {
         value: number;
     }[];
+    decimalsFormat?: number;
     resetValueControl: {
         label: string;
-        value: number;
+        value: number | undefined;
     };
 } | {
     type: 'switch';

package/package.json

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