@0xsquid/ui 0.20.3 → 0.21.1-beta.0

package/dist/cjs/index.js

@@ -2792,8 +2792,11 @@ function BlockSkeleton(_a) {
     return (jsxRuntime.jsx("div", Object.assign({ className: cn('loading-gradient tw-rounded-squid-s', className) }, props)));
 }
 
-function Checkmark1Icon() {
-    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.8809 2.82977C13.3432 3.13201 13.4729 3.75174 13.1706 4.21399L7.50398 12.8807C7.3318 13.144 7.04572 13.3109 6.73174 13.3313C6.41777 13.3517 6.11252 13.2231 5.90775 12.9842L2.90775 9.4842C2.54833 9.06487 2.59689 8.43357 3.01622 8.07415C3.43554 7.71473 4.06684 7.76329 4.42627 8.18262L6.55918 10.671L11.4967 3.11949C11.7989 2.65725 12.4187 2.52753 12.8809 2.82977Z", fill: "currentColor" }) }));
+function Checkmark1Icon({ 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", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.8809 2.82977C13.3432 3.13201 13.4729 3.75174 13.1706 4.21399L7.50398 12.8807C7.3318 13.144 7.04572 13.3109 6.73174 13.3313C6.41777 13.3517 6.11252 13.2231 5.90775 12.9842L2.90775 9.4842C2.54833 9.06487 2.59689 8.43357 3.01622 8.07415C3.43554 7.71473 4.06684 7.76329 4.42627 8.18262L6.55918 10.671L11.4967 3.11949C11.7989 2.65725 12.4187 2.52753 12.8809 2.82977Z", fill: "currentColor" }) }));
+}
+function Checkmark2Icon({ className, size = '16', style, }) {
+    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM15.774 10.1333C16.1237 9.70582 16.0607 9.0758 15.6332 8.72607C15.2058 8.37635 14.5758 8.43935 14.226 8.86679L10.4258 13.5116L9.20711 12.2929C8.81658 11.9024 8.18342 11.9024 7.79289 12.2929C7.40237 12.6834 7.40237 13.3166 7.79289 13.7071L9.79289 15.7071C9.99267 15.9069 10.2676 16.0129 10.5498 15.9988C10.832 15.9847 11.095 15.8519 11.274 15.6333L15.774 10.1333Z", fill: "none", className: className, style: style }) }));
 }
 
 function DotGrid1x3HorizontalIcon({ className, size = '16', }) {
@@ -2941,6 +2944,9 @@ function ArrowsSwapIcon({ size = '24', className, }) {
 function ArrowUpIcon() {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "14", fill: "none", viewBox: "0 0 10 14", children: jsxRuntime.jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M1 5.667l4-4 4 4M5 2.334v10" }) }));
 }
+function ArrowCornerDownRightIcon({ size = '24', className, }) {
+    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4 4C4.55228 4 5 4.44772 5 5V13C5 13.5523 5.44772 14 6 14H17.5858L15.2929 11.7071C14.9024 11.3166 14.9024 10.6834 15.2929 10.2929C15.6834 9.90237 16.3166 9.90237 16.7071 10.2929L20.7071 14.2929C21.0976 14.6834 21.0976 15.3166 20.7071 15.7071L16.7071 19.7071C16.3166 20.0976 15.6834 20.0976 15.2929 19.7071C14.9024 19.3166 14.9024 18.6834 15.2929 18.2929L17.5858 16H6C4.34315 16 3 14.6569 3 13V5C3 4.44772 3.44772 4 4 4Z", fill: "currentColor" }) }));
+}
 
 function Copy(_a) {
     var { size = '24', strokeWidth = '2' } = _a, props = __rest$1(_a, ["size", "strokeWidth"]);
@@ -2955,6 +2961,11 @@ function WalletLink({ imageURI, address }) {
     return (jsxRuntime.jsx(IconLabel, { src: imageURI, variant: "round", children: jsxRuntime.jsx(HashLink, { hash: address, showCopyButton: true, children: jsxRuntime.jsx(BodyText, { size: "small", children: truncateHash(address) }) }) }));
 }
 
+function Chip(_a) {
+    var { label, icon } = _a, props = __rest$1(_a, ["label", "icon"]);
+    return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn('tw-flex tw-h-squid-m tw-items-center tw-justify-center tw-rounded-squid-m tw-bg-grey-500 tw-text-grey-900', icon && 'tw-w-squid-m', props.className), children: label ? (jsxRuntime.jsx(CaptionText, { className: "tw-min-w-squid-xl tw-text-nowrap tw-px-squid-xxs tw-text-center", children: label })) : (icon) })));
+}
+
 const baseButtonClassName = 'tw-border tw-relative tw-overflow-hidden tw-group/base-button tw-flex tw-items-center tw-justify-center';
 const buttonSizeClassMap = {
     md: 'tw-px-squid-xs tw-py-squid-xxs tw-min-w-[60px] tw-h-squid-xl',
@@ -2974,7 +2985,8 @@ const buttonVariantClassMap = {
 const buttonDisabledClass = '!tw-bg-grey-800 !tw-text-grey-600 tw-cursor-not-allowed';
 const loadingClassname = 'tw-invisible tw-opacity-0';
 function Button$1(_a) {
-    var { label, disabled, size, variant, icon, link, isLoading = false } = _a, props = __rest$1(_a, ["label", "disabled", "size", "variant", "icon", "link", "isLoading"]);
+    var { label, disabled, size, variant, icon, link, isLoading = false, chip } = _a, props = __rest$1(_a, ["label", "disabled", "size", "variant", "icon", "link", "isLoading", "chip"]);
+    const chipElement = chip ? (jsxRuntime.jsx(Chip, Object.assign({}, chip, { className: cn('tw-absolute -tw-right-squid-xxs -tw-top-squid-xxs tw-z-10', chip.className) }))) : null;
     const children = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!disabled && !isLoading && (jsxRuntime.jsx(ButtonHoverOverlay, { className: roundedClassMap[size] })), jsxRuntime.jsx("div", { className: "tw-relative tw-z-[5] tw-flex tw-items-center tw-justify-center tw-gap-squid-xxs", children: !label && !icon ? (props.children) : size === 'lg' ? (jsxRuntime.jsx("span", { className: "tw-px-squid-m", children: jsxRuntime.jsx(BodyText, { className: isLoading ? loadingClassname : '', size: "medium", children: label }) })) : size === 'md' ? (label && !icon ? (
                 // label only
                 jsxRuntime.jsx(BodyText, { className: isLoading ? loadingClassname : '', size: "small", children: label })) : !label && icon ? (
@@ -2988,9 +3000,9 @@ function Button$1(_a) {
     // custom classes from props
     props.className);
     if (link) {
-        return (jsxRuntime.jsx("a", { "aria-disabled": disabled, href: disabled ? undefined : link, target: "_blank", className: className, children: children }));
+        return (jsxRuntime.jsxs("div", { className: "tw-relative tw-w-full", children: [jsxRuntime.jsx("a", { "aria-disabled": disabled, href: disabled ? undefined : link, target: "_blank", className: className, children: children }), chipElement] }));
     }
-    return (jsxRuntime.jsx("button", Object.assign({}, props, { "aria-disabled": disabled || isLoading, className: className, disabled: disabled || isLoading, children: children })));
+    return (jsxRuntime.jsxs("div", { className: "tw-relative tw-w-full", children: [jsxRuntime.jsx("button", Object.assign({}, props, { "aria-disabled": disabled || isLoading, className: className, disabled: disabled || isLoading, children: children })), chipElement] }));
 }
 const ButtonHoverOverlay = ({ className }) => {
     return (jsxRuntime.jsx("span", { className: cn('tw-absolute tw-inset-0 tw-z-0 tw-hidden tw-h-full tw-w-full tw-bg-material-light-thin group-hover/base-button:tw-block', className) }));
@@ -3086,9 +3098,10 @@ function SearchIcon() {
 }
 
 function Input(_a) {
-    var { placeholder = 'Search', showIcon = true, className, icon, isError = false, containerClassName, actionButtonProps, autoFocusTimeout } = _a, props = __rest$1(_a, ["placeholder", "showIcon", "className", "icon", "isError", "containerClassName", "actionButtonProps", "autoFocusTimeout"]);
+    var { placeholder = 'Search', showIcon = true, className, icon, isError = false, isWarning = false, containerClassName, actionButtonProps, autoFocusTimeout, inputRef: inputRefProp } = _a, props = __rest$1(_a, ["placeholder", "showIcon", "className", "icon", "isError", "isWarning", "containerClassName", "actionButtonProps", "autoFocusTimeout", "inputRef"]);
     const showActionButton = !!actionButtonProps;
-    const inputRef = React.useRef(null);
+    const localInputRef = React.useRef(null);
+    const inputRef = inputRefProp !== null && inputRefProp !== void 0 ? inputRefProp : localInputRef;
     React.useEffect(() => {
         if (!autoFocusTimeout)
             return;
@@ -3098,7 +3111,7 @@ function Input(_a) {
         }, autoFocusTimeout);
         return () => clearTimeout(timeoutId);
     }, [autoFocusTimeout]);
-    return (jsxRuntime.jsxs("div", { className: cn('tw-relative tw-w-full tw-text-grey-600', containerClassName), children: [jsxRuntime.jsx("input", Object.assign({}, props, { ref: inputRef, "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-typography-regular tw-text-grey-300 placeholder:tw-text-grey-600 invalid:tw-outline-status-negative', showIcon ? 'tw-pl-[40px]' : 'tw-px-2.5', showActionButton ? 'tw-pr-[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, showActionButton ? (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(InputActionButton, Object.assign({}, actionButtonProps)) })) : null] }));
+    return (jsxRuntime.jsxs("div", { className: cn('tw-relative tw-w-full tw-text-grey-600', containerClassName), children: [jsxRuntime.jsx("input", Object.assign({}, props, { ref: inputRef, "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-typography-regular tw-text-grey-300 placeholder:tw-text-grey-600 invalid:tw-outline-status-negative', showIcon ? 'tw-pl-[40px]' : 'tw-px-squid-s', showActionButton ? 'tw-pr-[70px]' : 'tw-pr-2.5', isError && '!tw-outline-status-negative', className, isWarning && 'focus-visible:tw-outline-status-partial'), 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, showActionButton ? (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(InputActionButton, Object.assign({}, actionButtonProps)) })) : null] }));
 }
 const InputActionButton = ({ onClick, variant = 'tertiary', label = 'Paste', }) => {
     return (jsxRuntime.jsx(Button$1, { size: "md", variant: variant, onClick: onClick, className: "!tw-h-[30px] !tw-w-fit !tw-min-w-0", children: jsxRuntime.jsx(CaptionText, { children: label }) }));
@@ -16702,11 +16715,6 @@ function generateMarkerLines(count) {
     return allShadows.join(', ');
 }
 
-function Chip(_a) {
-    var { label, icon } = _a, props = __rest$1(_a, ["label", "icon"]);
-    return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn('tw-flex tw-h-squid-m tw-items-center tw-justify-center tw-rounded-squid-m tw-bg-grey-500 tw-text-grey-900', icon && 'tw-w-squid-m', props.className), children: label ? (jsxRuntime.jsx(CaptionText, { className: "tw-min-w-squid-xl tw-text-nowrap tw-px-squid-xxs tw-text-center", children: label })) : (icon) })));
-}
-
 function Boost({ boostMode, onToggleBoostMode, estimatedTime, canToggleBoostMode = true, tooltip, }) {
     const boostIndicatorRef = React.useRef(null);
     function handleToggleBoostMode() {
@@ -17166,7 +17174,7 @@ function SettingsItem({ icon, label, control, link, transparent = false, helpToo
     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, 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 })] }))] }))) })] })) }));
+                                (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 })] })), control.type === 'options' && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: control.options.map(({ label, onSelect }, index) => (jsxRuntime.jsx(SettingsButton, { label: label, isSelected: control.selectedLabel === label, onClick: onSelect }, index))) }))] }))) })] })) }));
 }
 
 function SwapStepSeparator() {
@@ -17447,7 +17455,11 @@ function InfoBox({ title, description, icon }) {
     return (jsxRuntime.jsxs("div", { className: "tw-align-self-stretch tw-flex tw-flex-col tw-items-center tw-gap-squid-xs tw-px-squid-m tw-pb-squid-l tw-pt-squid-xs tw-text-royal-400", children: [icon, jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xxs tw-text-center", children: [jsxRuntime.jsx(BodyText, { size: "small", className: "!tw-leading-[9px]", children: title }), jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-500", children: description })] })] }));
 }
 
-function Modal({ children, className, onBackdropClick, isOpen: _isOpen = true, maxHeight = false, }) {
+const modalWidthClassMap = {
+    large: 'mobile-lg:tw-w-modal-large',
+    'extra-large': 'mobile-lg:tw-w-modal-extra-large',
+};
+function Modal({ children, className, onBackdropClick, isOpen: _isOpen = true, maxHeight = false, width = 'large', }) {
     const [isOpen, setIsOpen] = React.useState(_isOpen);
     React.useEffect(() => {
         if (_isOpen)
@@ -17473,7 +17485,7 @@ function Modal({ children, className, onBackdropClick, isOpen: _isOpen = true, m
         }, className: cn('tw-absolute tw-inset-0 tw-z-40 tw-flex tw-items-start tw-justify-center tw-px-squid-xs tw-py-squid-xl tw-pb-squid-m', _isOpen ? 'tw-animate-blur-in' : 'tw-animate-blur-out'), children: jsxRuntime.jsx("div", { style: {
                 [CSS_VARS.SLIDE_TO_TOP_DURATION]: `${ANIMATION_DURATIONS.SHOW_MODAL}ms`,
                 [CSS_VARS.SLIDE_TO_BOTTOM_DURATION]: `${ANIMATION_DURATIONS.HIDE_MODAL}ms`,
-            }, className: cn('mobile-lg:tw-w-modal-large mobile-lg:tw-max-h-modal-large tw-relative tw-flex tw-max-h-modal-compact tw-w-modal-compact 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 }) })));
+            }, className: cn('tw-relative tw-flex tw-max-h-modal-compact tw-w-modal-compact tw-flex-col tw-items-start tw-justify-end tw-gap-squid-xxs tw-self-end mobile-lg:tw-max-h-modal-large', className, _isOpen ? 'tw-animate-slide-to-top' : 'tw-animate-slide-to-bottom', maxHeight && 'tw-h-full', modalWidthClassMap[width]), children: children }) })));
 }
 
 const borderTypeClassMap = {
@@ -17497,7 +17509,7 @@ function NavigationBar({ title, displayBackButton = false, logoUrl, transparent
                                     ? action.labelOrIcon
                                     : undefined, className: "tw-text-grey-300", icon: typeof action.labelOrIcon === 'string'
                                     ? null
-                                    : action.labelOrIcon, onClick: action.onClick }) }), action.id))) })] }), title ? (jsxRuntime.jsx("div", { className: "tw-flex tw-h-squid-xxl tw-items-center tw-px-squid-m tw-py-squid-xxs mobile-lg:tw-px-squid-l", children: jsxRuntime.jsx(HeadingText, { size: "small", children: title }) })) : null] }));
+                                    : action.labelOrIcon, onClick: action.onClick, chip: action.chip }) }), action.id))) })] }), title ? (jsxRuntime.jsx("div", { className: "tw-flex tw-h-squid-xxl tw-items-center tw-px-squid-m tw-py-squid-xxs mobile-lg:tw-px-squid-l", children: jsxRuntime.jsx(HeadingText, { size: "small", children: title }) })) : null] }));
 }
 
 const createStoreImpl = (createState) => {
@@ -24566,7 +24578,7 @@ function SettingsSlider({ value, type, onChange, decimalsFormat, max, min, isSel
     const handleCloseInput = React.useCallback(() => {
         setIsInputVisible(false);
     }, []);
-    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
+    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] -tw-outline-offset-2 placeholder-shown:tw-text-grey-600 hover: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', 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();
@@ -24623,6 +24635,130 @@ function Switch({ checked = false, onChange, size, disabled = false, }) {
                     : 'tw-bg-grey-500') })] }));
 }
 
+function CompassRound({ size = '20', className, }) {
+    return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: className, children: [jsxRuntime.jsx("path", { d: "M17.7087 9.99996C17.7087 14.2572 14.2575 17.7083 10.0003 17.7083C5.74313 17.7083 2.29199 14.2572 2.29199 9.99996C2.29199 5.74276 5.74313 2.29163 10.0003 2.29163C14.2575 2.29163 17.7087 5.74276 17.7087 9.99996Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M12.2135 7.27515L8.79307 8.208C8.5084 8.28564 8.286 8.50803 8.20837 8.7927L7.27552 12.2132C7.19069 12.5242 7.47609 12.8096 7.78713 12.7248L11.2076 11.7919C11.4923 11.7143 11.7146 11.4919 11.7923 11.2072L12.7251 7.78677C12.81 7.47573 12.5246 7.19032 12.2135 7.27515Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" })] }));
+}
+function CircleX({ size = '20', className, }) {
+    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: className, children: jsxRuntime.jsx("path", { d: "M12.5003 7.49996L7.50033 12.5M12.5003 12.5L7.50033 7.49996M17.7087 9.99996C17.7087 14.2572 14.2575 17.7083 10.0003 17.7083C5.74313 17.7083 2.29199 14.2572 2.29199 9.99996C2.29199 5.74276 5.74313 2.29163 10.0003 2.29163C14.2575 2.29163 17.7087 5.74276 17.7087 9.99996Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }));
+}
+function CircleMinusIcon({ size = '24', className, }) {
+    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM16 12.9999C16.5523 12.9999 17 12.5522 17 11.9999C17 11.4476 16.5523 10.9999 16 10.9999L7.99997 11.0001C7.44769 11.0001 6.99998 11.4479 7 12.0001C7.00002 12.5524 7.44774 13.0001 8.00003 13.0001L16 12.9999Z", fill: "currentColor" }) }));
+}
+function CirclePlusIcon({ size = '24', className, }) {
+    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM16 12.9999C16.5523 12.9999 17 12.5522 17 11.9999C17 11.4476 16.5523 10.9999 16 10.9999L13 11V8.00012C13 7.44784 12.5523 7.00012 12 7.00012C11.4477 7.00012 11 7.44784 11 8.00012V11L7.99997 11.0001C7.44769 11.0001 6.99998 11.4479 7 12.0001C7.00002 12.5524 7.44774 13.0001 8.00003 13.0001L11 13V16C11 16.5523 11.4477 17 12 17C12.5523 17 13 16.5523 13 16V13L16 12.9999Z", fill: "currentColor" }) }));
+}
+
+function RangeInput({ label, initialValue, onChange, min = 0, max = 99, isWarning = false, }) {
+    const [pressedButton, setPressedButton] = React.useState(null);
+    const inputRef = React.useRef(null);
+    const mousePressedTimeoutRef = React.useRef(null);
+    const inputDecoratorRef = React.useRef(null);
+    // reset input value to initial value on mount
+    React.useEffect(() => {
+        if (!inputRef.current)
+            return;
+        inputRef.current.value = initialValue || '';
+    }, [initialValue]);
+    const handleDecrement = React.useCallback(() => {
+        var _a;
+        if (!inputRef.current || !inputDecoratorRef.current)
+            return;
+        const inputValue = new BigNumber(((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) || 0);
+        const newValue = inputValue.minus(0.1);
+        if (newValue.isLessThan(min))
+            return;
+        updateInputAndDecorator(newValue.toString());
+    }, [min]);
+    const handleIncrement = React.useCallback(() => {
+        var _a;
+        if (!inputRef.current || !inputDecoratorRef.current)
+            return;
+        const inputValue = new BigNumber(((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) || 0);
+        const newValue = inputValue.plus(0.1);
+        if (newValue.isGreaterThan(max))
+            return;
+        updateInputAndDecorator(newValue.toString());
+    }, [max]);
+    // updates input and decorator value
+    const updateInputAndDecorator = React.useCallback((value) => {
+        if (!inputRef.current || !inputDecoratorRef.current)
+            return;
+        inputDecoratorRef.current.textContent = String(value || 0);
+        inputRef.current.value = String(value || 0);
+    }, []);
+    // When a button is pressed, we set an interval to update the input and decorator value
+    React.useEffect(() => {
+        if (!pressedButton || !inputRef.current)
+            return;
+        const timer = setInterval(() => {
+            if (pressedButton === 'increment') {
+                handleIncrement();
+            }
+            if (pressedButton === 'decrement') {
+                handleDecrement();
+            }
+        }, 50);
+        return () => {
+            clearInterval(timer);
+        };
+    }, [pressedButton]);
+    const handleUpdateValue = React.useCallback(() => {
+        var _a, _b;
+        setPressedButton(null);
+        onChange === null || onChange === void 0 ? void 0 : onChange((_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '');
+        if (mousePressedTimeoutRef.current) {
+            clearTimeout(mousePressedTimeoutRef.current);
+            mousePressedTimeoutRef.current = null;
+        }
+    }, [onChange]);
+    // Returns event handler for mouse down event
+    const getMouseDownHandler = React.useCallback((pressed) => () => {
+        if (pressed === 'increment') {
+            handleIncrement();
+        }
+        if (pressed === 'decrement') {
+            handleDecrement();
+        }
+        mousePressedTimeoutRef.current = setTimeout(() => {
+            setPressedButton(pressed);
+        }, 180);
+    }, [handleDecrement, handleIncrement]);
+    return (jsxRuntime.jsx("li", { className: "tw-h-[50px] tw-self-stretch tw-bg-grey-800 tw-px-squid-xs", children: jsxRuntime.jsxs("div", { className: "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-500", children: [jsxRuntime.jsx(ArrowCornerDownRightIcon, {}), jsxRuntime.jsx("div", { className: "tw-flex tw-flex-1 tw-items-center tw-gap-squid-xxs tw-self-stretch", children: jsxRuntime.jsx(BodyText, { size: "small", className: "tw-leading-[0]", children: label }) }), jsxRuntime.jsxs("div", { className: cn('tw-relative tw-flex tw-h-squid-l tw-items-center tw-justify-center tw-gap-squid-xxs tw-rounded-squid-xs tw-text-grey-300'), children: [jsxRuntime.jsx("button", { onMouseDown: getMouseDownHandler('decrement'), onMouseUp: handleUpdateValue, onKeyDown: (event) => {
+                                if (event.key === 'Enter' || event.key === ' ') {
+                                    handleDecrement();
+                                }
+                            }, onKeyUp: (event) => {
+                                if (event.key === 'Enter' || event.key === ' ') {
+                                    handleUpdateValue();
+                                }
+                            }, onMouseLeave: handleUpdateValue, className: cn('tw-flex tw-h-full tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-p-squid-xxs tw-text-left tw-text-caption !tw-font-medium tw-leading-[10px] placeholder-shown:tw-text-grey-600 hover:tw-bg-material-light-thin'), children: jsxRuntime.jsx(CircleMinusIcon, {}) }), jsxRuntime.jsxs("div", { className: "tw-relative", children: [jsxRuntime.jsx(Input, { step: 0.1, min: min, max: max, isWarning: isWarning, defaultValue: initialValue || '0', placeholder: "0", showIcon: false, type: "number", inputRef: inputRef, onChange: (event) => {
+                                        var _a;
+                                        if (!inputDecoratorRef.current || !inputRef.current)
+                                            return;
+                                        const value = event.target.value;
+                                        const isWithinRange = Number(value) <= max && Number(value) >= min;
+                                        const [integer = '', decimal = ''] = value.split('.');
+                                        const isInvalid = integer.length > 2 || decimal.length > 1;
+                                        // prevent updating input value if the value is invalid
+                                        if (!isWithinRange || isInvalid) {
+                                            event.preventDefault();
+                                            inputRef.current.value =
+                                                (_a = inputDecoratorRef.current.textContent) !== null && _a !== void 0 ? _a : '';
+                                            return;
+                                        }
+                                        onChange === null || onChange === void 0 ? void 0 : onChange(event.target.value);
+                                        updateInputAndDecorator(event.target.value);
+                                    }, className: "tw-max-w-[80px] tw-select-none" }), jsxRuntime.jsxs("div", { className: "tw-pointer-events-none tw-absolute tw-bottom-0 tw-left-squid-s tw-top-0 tw-flex tw-items-center tw-justify-center tw-text-body-small", children: [jsxRuntime.jsx("span", { className: "tw-opacity-0", ref: inputDecoratorRef, children: initialValue || '0' }), jsxRuntime.jsx("span", { className: "tw-text-grey-500", children: "%" })] })] }), jsxRuntime.jsx("button", { onMouseDown: getMouseDownHandler('increment'), onMouseUp: handleUpdateValue, onKeyDown: (event) => {
+                                if (event.key === 'Enter' || event.key === ' ') {
+                                    handleIncrement();
+                                }
+                            }, onKeyUp: (event) => {
+                                if (event.key === 'Enter' || event.key === ' ') {
+                                    handleUpdateValue();
+                                }
+                            }, onMouseLeave: handleUpdateValue, 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-xxs tw-text-left tw-text-caption !tw-font-medium tw-leading-[10px] placeholder-shown:tw-text-grey-600 hover:tw-bg-material-light-thin'), children: jsxRuntime.jsx(CirclePlusIcon, {}) })] })] }) }));
+}
+
 function PlusIcon() {
     return (jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M12 17V12M12 12V7M12 12H17M12 12H7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
 }
@@ -24680,7 +24816,7 @@ function FilterButton({ selected, numApplied = 0, onClick, }) {
 }
 
 function SettingsButton({ label, isSelected = false, onClick, }) {
-    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 }) }));
+    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 -tw-outline-offset-2 hover: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 }) }));
 }
 
 function ArrowRotate() {
@@ -24695,13 +24831,6 @@ function BankIcon() {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.59645 1.2195C8.22108 1.03181 7.77925 1.03181 7.40388 1.2195L2.07054 3.88617C1.61883 4.11202 1.3335 4.57371 1.3335 5.07874V5.33338C1.3335 6.06976 1.93045 6.66671 2.66683 6.66671V10.7564C2.30367 10.8969 2.01131 11.1933 1.88298 11.5783L1.66075 12.245C1.37296 13.1084 2.01559 14 2.92566 14H13.0758C13.9858 14 14.6285 13.1084 14.3407 12.245L14.1185 11.5783C13.99 11.1929 13.6972 10.8963 13.3335 10.7559V6.66671C14.0699 6.66671 14.6668 6.06976 14.6668 5.33338V5.07874C14.6668 4.57371 14.3815 4.11202 13.9298 3.88617L8.59645 1.2195ZM12.0002 6.66671H10.6668V10.6666H12.0002V6.66671ZM9.3335 10.6666V6.66671H6.66683V10.6666H9.3335ZM5.3335 10.6666V6.66671H4.00016V10.6666H5.3335Z", fill: "currentColor" }) }));
 }
 
-function CompassRound({ size = '20', className, }) {
-    return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: className, children: [jsxRuntime.jsx("path", { d: "M17.7087 9.99996C17.7087 14.2572 14.2575 17.7083 10.0003 17.7083C5.74313 17.7083 2.29199 14.2572 2.29199 9.99996C2.29199 5.74276 5.74313 2.29163 10.0003 2.29163C14.2575 2.29163 17.7087 5.74276 17.7087 9.99996Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M12.2135 7.27515L8.79307 8.208C8.5084 8.28564 8.286 8.50803 8.20837 8.7927L7.27552 12.2132C7.19069 12.5242 7.47609 12.8096 7.78713 12.7248L11.2076 11.7919C11.4923 11.7143 11.7146 11.4919 11.7923 11.2072L12.7251 7.78677C12.81 7.47573 12.5246 7.19032 12.2135 7.27515Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" })] }));
-}
-function CircleX({ size = '20', className, }) {
-    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: className, children: jsxRuntime.jsx("path", { d: "M12.5003 7.49996L7.50033 12.5M12.5003 12.5L7.50033 7.49996M17.7087 9.99996C17.7087 14.2572 14.2575 17.7083 10.0003 17.7083C5.74313 17.7083 2.29199 14.2572 2.29199 9.99996C2.29199 5.74276 5.74313 2.29163 10.0003 2.29163C14.2575 2.29163 17.7087 5.74276 17.7087 9.99996Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }));
-}
-
 function DashboardFast({ size = '24', className, }) {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: jsxRuntime.jsx("path", { d: "M15 10L12.25 15.5M19.5 16H4.5M21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
@@ -60310,6 +60439,7 @@ exports.Approve = Approve;
 exports.ApproveAction = ApproveAction;
 exports.ArrowBottomTopIcon = ArrowBottomTopIcon;
 exports.ArrowButton = ArrowButton;
+exports.ArrowCornerDownRightIcon = ArrowCornerDownRightIcon;
 exports.ArrowLeftIcon = ArrowLeftIcon;
 exports.ArrowOutOfBoxIcon = ArrowOutOfBoxIcon;
 exports.ArrowRightDownCircleIcon = ArrowRightDownCircleIcon;
@@ -60347,6 +60477,7 @@ exports.Calendar = Calendar;
 exports.CaptionText = CaptionText;
 exports.ChainLink = ChainLink;
 exports.Checkmark1Icon = Checkmark1Icon;
+exports.Checkmark2Icon = Checkmark2Icon;
 exports.ChevronArrowIcon = ChevronArrowIcon;
 exports.ChevronGrabberVerticalIcon = ChevronGrabberVerticalIcon;
 exports.ChevronLargeDownIcon = ChevronLargeDownIcon;
@@ -60355,6 +60486,8 @@ exports.ChevronRightSmallIcon = ChevronRightSmallIcon;
 exports.ChevronTopIcon = ChevronTopIcon;
 exports.ChevronTopSmallIcon = ChevronTopSmallIcon;
 exports.Chip = Chip;
+exports.CircleMinusIcon = CircleMinusIcon;
+exports.CirclePlusIcon = CirclePlusIcon;
 exports.CircleX = CircleX;
 exports.ClockIcon = ClockIcon;
 exports.ClockOutlineIcon = ClockOutlineIcon;
@@ -60433,6 +60566,7 @@ exports.ProfileHeaderBackground = ProfileHeaderBackground;
 exports.PropertiesLayout = PropertiesLayout;
 exports.PropertyListItem = PropertyListItem;
 exports.PunkIcon = PunkIcon;
+exports.RangeInput = RangeInput;
 exports.ReceiptBillIcon = ReceiptBillIcon;
 exports.ReceiveNFTAction = ReceiveNFTAction;
 exports.ReceiveTokensAction = ReceiveTokensAction;

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { ButtonSize, ButtonVariant } from '../../types/components';
+import { ChipProps } from './Chip';
 interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     label?: string;
     icon?: React.ReactNode;
@@ -8,6 +9,7 @@ interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     disabled?: boolean;
     link?: string;
     isLoading?: boolean;
+    chip?: ChipProps;
 }
-export declare function Button({ label, disabled, size, variant, icon, link, isLoading, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Button({ label, disabled, size, variant, icon, link, isLoading, chip, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,7 +1,6 @@
 /// <reference types="react" />
-interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
     label?: string;
     icon?: React.ReactNode;
 }
 export declare function Chip({ label, icon, ...props }: ChipProps): import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -5,11 +5,13 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     showIcon?: boolean;
     icon?: React.ReactNode;
     isError?: boolean;
+    isWarning?: boolean;
     containerClassName?: string;
     actionButtonProps?: InputActionButtonProps;
     autoFocusTimeout?: number;
+    inputRef?: React.RefObject<HTMLInputElement>;
 }
-export declare function Input({ placeholder, showIcon, className, icon, isError, containerClassName, actionButtonProps, autoFocusTimeout, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+export declare function Input({ placeholder, showIcon, className, icon, isError, isWarning, containerClassName, actionButtonProps, autoFocusTimeout, inputRef: inputRefProp, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
 type InputActionButtonProps = {
     onClick?: () => void;
     variant?: ButtonVariant;

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

@@ -0,0 +1,10 @@
+interface RangeInputProps {
+    label: string;
+    initialValue?: string;
+    onChange?: (value: string) => void;
+    min?: number;
+    max?: number;
+    isWarning?: boolean;
+}
+export declare function RangeInput({ label, initialValue, onChange, min, max, isWarning, }: RangeInputProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -3,3 +3,4 @@ export * from './NumericInput';
 export * from './SettingsSlider';
 export * from './Switch';
 export * from './Tooltip';
+export * from './RangeInput';

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

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

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

@@ -1 +1,10 @@
-export declare function Checkmark1Icon(): import("react/jsx-runtime").JSX.Element;
+/// <reference types="react" />
+export declare function Checkmark1Icon({ className, size, }: {
+    className?: string;
+    size?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function Checkmark2Icon({ className, size, style, }: {
+    className?: string;
+    size?: string;
+    style?: React.CSSProperties;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -6,3 +6,11 @@ export declare function CircleX({ size, className, }: {
     size?: string;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function CircleMinusIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function CirclePlusIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -22,7 +22,6 @@ export * from './Heart';
 export * from './Help';
 export * from './HomeIcon';
 export * from './ImageSparkle';
-export * from './index';
 export * from './Infinity';
 export * from './Lightning';
 export * from './Link';

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

@@ -1,10 +1,12 @@
 /// <reference types="react" />
+type ModalWidth = 'large' | 'extra-large';
 interface ModalProps {
     children: React.ReactNode;
     className?: string;
     onBackdropClick?: () => void;
     isOpen?: boolean;
     maxHeight?: boolean;
+    width?: ModalWidth;
 }
-export declare function Modal({ children, className, onBackdropClick, isOpen: _isOpen, maxHeight, }: ModalProps): false | import("react/jsx-runtime").JSX.Element;
+export declare function Modal({ children, className, onBackdropClick, isOpen: _isOpen, maxHeight, width, }: ModalProps): false | import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,10 +1,12 @@
 /// <reference types="react" />
+import { ChipProps } from '../buttons';
 import { TooltipProps } from '../controls';
-type ActionButton = {
+export type ActionButton = {
     labelOrIcon: string | React.ReactNode;
     onClick?: () => void;
     id: React.Key;
     tooltip?: Omit<TooltipProps, 'children'>;
+    chip?: ChipProps;
 };
 interface NavigationBarProps {
     title?: string;

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

@@ -30,6 +30,13 @@ export type SettingsControl = {
     onChange: (checked: boolean) => void;
     tooltip?: Omit<TooltipProps, 'children'>;
     disabled?: boolean;
+} | {
+    type: 'options';
+    selectedLabel: string;
+    options: {
+        label: string;
+        onSelect: () => void;
+    }[];
 };
 export interface SettingsItemProps {
     icon: React.ReactNode;

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

@@ -28,3 +28,5 @@ export declare const MediumWithLabelLoading: Story;
 export declare const MediumWithLongLabelLoading: Story;
 export declare const LargeWithLabelLoading: Story;
 export declare const LargeWithLongLabelLoading: Story;
+export declare const MediumWithChip: Story;
+export declare const LargeWithChip: Story;

package/dist/cjs/types/stories/controls/Input.stories.d.ts

@@ -8,3 +8,4 @@ export declare const WithoutIcon: Story;
 export declare const WithActionButton: Story;
 export declare const Error: Story;
 export declare const FocusAfter3Seconds: Story;
+export declare const Warning: Story;

package/dist/cjs/types/stories/controls/RangeInput.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { RangeInput } from '../../components/controls/RangeInput';
+declare const meta: Meta<typeof RangeInput>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Warning10: Story;