@0xsquid/ui 0.11.0 → 0.12.0

package/dist/cjs/index.js

@@ -2668,8 +2668,8 @@ function ChevronArrowIcon({ size = '16', className, }) {
 function ArrowTriangle() {
     return (jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M2.87921 5.55701C2.21562 4.22933 3.18052 2.6665 4.66531 2.6665H11.3348C12.8196 2.6665 13.7845 4.22933 13.1209 5.55701L9.78615 12.229C9.05029 13.7012 6.94983 13.7012 6.21397 12.229L2.87921 5.55701Z", fill: "currentColor" }) }));
 }
-function ChevronLargeDownIcon({ size = '24' }) {
-    return (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M3 10.5L11.0287 14.9604C11.6328 15.296 12.3672 15.296 12.9713 14.9604L21 10.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+function ChevronLargeDownIcon({ size = '24', className, }) {
+    return (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsxRuntime.jsx("path", { d: "M3 10.5L11.0287 14.9604C11.6328 15.296 12.3672 15.296 12.9713 14.9604L21 10.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
 function ChevronLargeRightIcon({ size = '16', className, }) {
     return (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsxRuntime.jsx("path", { d: "M6.66675 14L9.64035 8.64754C9.86407 8.24484 9.86407 7.75519 9.64035 7.35249L6.66675 2", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
@@ -2758,6 +2758,9 @@ const themeTypesKeys = {
     'status-positive': {
         cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-positive`,
     },
+    'status-partial': {
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-partial`,
+    },
 };
 
 function PlusIcon() {
@@ -2963,10 +2966,20 @@ const switchSizeClassMap = {
     small: 'tw-w-[36px] tw-h-squid-m tw-p-0.5',
     large: 'tw-w-[54px] tw-h-squid-l tw-p-[3px]',
 };
-const switchCircleSizeClassMap = {
+const switchKnobSizeClassMap = {
     small: 'tw-w-4 tw-h-4',
     large: 'tw-w-6 tw-h-6',
 };
+const switchKnobCheckedClassMap = {
+    large: {
+        checked: 'tw-left-[26px]',
+        unchecked: 'tw-left-[2px]',
+    },
+    small: {
+        checked: 'tw-left-[17px]',
+        unchecked: 'tw-left-[1px]',
+    },
+};
 function Switch({ checked = false, onChange, size, disabled = false, }) {
     return (
     // Switch container
@@ -2980,11 +2993,11 @@ function Switch({ checked = false, onChange, size, disabled = false, }) {
                     filter: 'drop-shadow(0px 5px 20px rgba(0, 0, 0, 0.33)) drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.20))',
                 }, className: clsx('tw-absolute tw-rounded-full tw-border tw-border-material-light-thin tw-transition-all', 
                 // size styles
-                switchCircleSizeClassMap[size], 
-                // disabled and checked styles
-                checked
-                    ? 'tw-translate-x-0 group-data-[squid-theme-type=dark]:tw-bg-grey-100 group-data-[squid-theme-type=light]:tw-bg-grey-900'
-                    : '-tw-translate-x-full tw-bg-grey-500') })] }));
+                switchKnobSizeClassMap[size], 
+                // checked styles
+                switchKnobCheckedClassMap[size][checked ? 'checked' : 'unchecked'], checked
+                    ? 'group-data-[squid-theme-type=dark]:tw-bg-grey-100 group-data-[squid-theme-type=light]:tw-bg-grey-900'
+                    : 'tw-bg-grey-500') })] }));
 }
 
 const borderRadiusClassMap = {
@@ -3115,6 +3128,9 @@ function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessa
 function EmojiSadIcon({ className }) {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", className: className, children: jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20ZM13.5341 12.4645C11.5815 10.5118 8.41568 10.5118 6.46306 12.4645C6.07254 12.855 6.07254 13.4882 6.46306 13.8787C6.85358 14.2692 7.48675 14.2692 7.87727 13.8787C9.04885 12.7071 10.9483 12.7071 12.1199 13.8787C12.5104 14.2692 13.1436 14.2692 13.5341 13.8787C13.9247 13.4882 13.9247 12.855 13.5341 12.4645ZM8.5 7.5C8.5 8.32843 7.94036 9 7.25 9C6.55964 9 6 8.32843 6 7.5C6 6.67157 6.55964 6 7.25 6C7.94036 6 8.5 6.67157 8.5 7.5ZM12.75 9C13.4404 9 14 8.32843 14 7.5C14 6.67157 13.4404 6 12.75 6C12.0596 6 11.5 6.67157 11.5 7.5C11.5 8.32843 12.0596 9 12.75 9Z", fill: "currentColor" }) }));
 }
+function EmojiMeh({ className, size = '20', }) {
+    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", { "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 10ZM7.25 9C7.94036 9 8.5 8.32843 8.5 7.5C8.5 6.67157 7.94036 6 7.25 6C6.55964 6 6 6.67157 6 7.5C6 8.32843 6.55964 9 7.25 9ZM14 7.5C14 8.32843 13.4404 9 12.75 9C12.0596 9 11.5 8.32843 11.5 7.5C11.5 6.67157 12.0596 6 12.75 6C13.4404 6 14 6.67157 14 7.5ZM7 12C6.44772 12 6 12.4477 6 13C6 13.5523 6.44772 14 7 14H13C13.5523 14 14 13.5523 14 13C14 12.4477 13.5523 12 13 12H7Z", fill: "currentColor" }) }));
+}
 
 function ErrorMessage({ message, showIcon = true }) {
     return (jsxRuntime.jsxs("div", { className: "tw-flex tw-h-squid-xl tw-flex-1 tw-items-center tw-gap-squid-xxs tw-text-status-negative", children: [showIcon ? jsxRuntime.jsx(EmojiSadIcon, {}) : null, jsxRuntime.jsx(CaptionText, { children: message })] }));
@@ -3137,7 +3153,7 @@ function DetailsToolbar({ errorMessage, boostMode = 'normal', onToggleBoostMode,
         return 'full';
     }, [errorMessage, isLoading, isEmpty]);
     const detailClassName = cn('tw-w-[190px]', detailStateClassMap[state]);
-    return (jsxRuntime.jsx("aside", { className: cn('tw-flex tw-h-[50px] tw-w-[480px] tw-items-center tw-justify-around tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-py-squid-xxs tw-text-grey-500', state === 'error' ? 'tw-px-squid-l' : 'tw-px-squid-m'), children: state === 'error' && errorMessage ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ErrorMessage, { message: errorMessage }), helpButton ? (jsxRuntime.jsx(Button, { onClick: helpButton.onClick, size: "md", variant: "tertiary", label: helpButton.label })) : null] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: detailClassName, children: jsxRuntime.jsx(FeeButton, { feeInUsd: feeInUsd, onClick: onFeeButtonClick }) }), jsxRuntime.jsx("div", { className: "tw-flex tw-h-squid-xl tw-w-squid-xxl tw-items-center tw-justify-center", children: state === 'loading' ? (jsxRuntime.jsx(Loader, { size: "32" })) : (jsxRuntime.jsx(Button, { variant: "tertiary", size: "md", onClick: onInvertSwapButtonClick, className: "tw-border-transparent tw-bg-transparent hover:tw-bg-material-light-thin", icon: jsxRuntime.jsx(ChevronLargeDownIcon, {}) })) }), jsxRuntime.jsx("div", { className: detailClassName, children: jsxRuntime.jsx(Boost, { estimatedTime: estimatedTime !== null && estimatedTime !== void 0 ? estimatedTime : '0s', boostMode: boostMode, onToggleBoostMode: onToggleBoostMode, canToggleBoostMode: state === 'loading' ? false : canToggleBoostMode, boostDisabledMessage: boostDisabledMessage, boostTooltipDisplayDelayMs: boostTooltipDisplayDelayMs }) })] })) }));
+    return (jsxRuntime.jsx("aside", { className: cn('tw-flex tw-h-[50px] tw-w-[480px] tw-items-center tw-justify-around tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-py-squid-xxs tw-text-grey-500', state === 'error' ? 'tw-px-squid-l' : 'tw-px-squid-m'), children: state === 'error' && errorMessage ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ErrorMessage, { message: errorMessage }), helpButton ? (jsxRuntime.jsx(Button, { onClick: helpButton.onClick, size: "md", variant: "tertiary", label: helpButton.label })) : null] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: detailClassName, children: jsxRuntime.jsx(FeeButton, { feeInUsd: feeInUsd, onClick: onFeeButtonClick }) }), jsxRuntime.jsx("div", { className: "tw-flex tw-h-squid-xl tw-w-squid-xxl tw-items-center tw-justify-center", children: state === 'loading' ? (jsxRuntime.jsx(Loader, { size: "32" })) : (jsxRuntime.jsx(Button, { variant: "tertiary", size: "md", onClick: onInvertSwapButtonClick, className: "tw-group/arrow-button tw-border-transparent tw-bg-transparent hover:tw-bg-material-light-thin", icon: jsxRuntime.jsx(ChevronLargeDownIcon, { className: "tw-transition-transform tw-duration-150 group-hover/arrow-button:tw-rotate-180" }) })) }), jsxRuntime.jsx("div", { className: detailClassName, children: jsxRuntime.jsx(Boost, { estimatedTime: estimatedTime !== null && estimatedTime !== void 0 ? estimatedTime : '0s', boostMode: boostMode, onToggleBoostMode: onToggleBoostMode, canToggleBoostMode: state === 'loading' ? false : canToggleBoostMode, boostDisabledMessage: boostDisabledMessage, boostTooltipDisplayDelayMs: boostTooltipDisplayDelayMs }) })] })) }));
 }
 
 function DropdownMenuItem({ label, imageUrl, icon, labelClassName, onClick, }) {
@@ -3194,37 +3210,31 @@ const statusBadge = {
         containerClassName: 'tw-bg-royal-400',
     },
     failed: {
-        badge: (jsxRuntime.jsx("span", { className: "group-data-[squid-theme-type=dark]:tw-bg-grey-100 group-data-[squid-theme-type=light]:tw-bg-grey-900", children: jsxRuntime.jsx(EmojiSadIcon, { className: "tw-text-status-negative" }) })),
+        badge: (jsxRuntime.jsx("span", { className: "tw-bg-grey-900", children: jsxRuntime.jsx(EmojiSadIcon, { className: "tw-text-status-negative" }) })),
         containerClassName: 'tw-bg-status-negative',
     },
+    warning: {
+        badge: (jsxRuntime.jsx("span", { className: "tw-bg-grey-900", children: jsxRuntime.jsx(EmojiMeh, { className: "tw-text-status-partial" }) })),
+        containerClassName: 'tw-bg-status-partial',
+    },
 };
-function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, dropdownMenuItems, itemsContainerRef, status, }) {
+function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, dropdownMenuItems, itemsContainerRef, status, warningLabel, onClick, }) {
     const { isDropdownOpen, dropdownRef, openDropdownButtonRef, openDropdown } = useDropdownMenu();
     const [dropdownPosition, setDropdownPosition] = react.useState(null);
     const itemRef = react.useRef(null);
     const menuRef = react.useRef(null);
-    const statusInfo = react.useMemo(() => {
+    const statusLabel = react.useMemo(() => {
         switch (status) {
             case 'completed':
-                return {
-                    label: dateCompleted,
-                    className: '',
-                };
+                return jsxRuntime.jsx(CaptionText, { children: dateCompleted });
             case 'pending':
-                return {
-                    label: 'Pending',
-                    className: 'tw-text-royal-400',
-                };
+                return jsxRuntime.jsx(CaptionText, { className: "tw-text-royal-400", children: "Pending" });
             case 'failed':
-                return {
-                    label: 'Failed',
-                    className: 'tw-text-status-negative',
-                };
+                return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CaptionText, { className: "tw-text-status-negative", children: "Fail" }), jsxRuntime.jsx(CaptionText, { children: dateCompleted })] }));
+            case 'warning':
+                return (jsxRuntime.jsx(CaptionText, { className: "tw-text-status-partial", children: warningLabel }));
             default:
-                return {
-                    label: '',
-                    className: '',
-                };
+                return null;
         }
     }, [status, dateCompleted]);
     // Effect to find the best position for the dropdown menu, so it's always visible for the user
@@ -3271,10 +3281,17 @@ function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount,
             setDropdownPosition('top');
         }
     }, [isDropdownOpen, menuRef, dropdownPosition, itemRef]);
-    return (jsxRuntime.jsx("li", { ref: itemRef, className: "tw-h-list-item-large tw-min-w-list-item-small tw-self-stretch tw-bg-grey-900 tw-px-squid-xs tw-text-grey-300", children: jsxRuntime.jsxs("div", { className: "tw-group/history-item tw-relative tw-flex tw-flex-shrink-0 tw-cursor-pointer tw-items-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin", children: [jsxRuntime.jsxs("div", { className: "tw-relative tw-h-10 tw-w-[60px]", children: [!!statusBadge[status].badge && (jsxRuntime.jsx("span", { className: cn('tw-absolute -tw-left-[5px] tw-bottom-0 tw-z-30 tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-center tw-overflow-hidden tw-rounded-full tw-border tw-border-grey-900 tw-p-0.5', statusBadge[status].containerClassName), children: statusBadge[status].badge })), jsxRuntime.jsx("img", { src: firstImageUrl, className: "tw-absolute tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" }), jsxRuntime.jsx("img", { src: secondImageUrl, className: "tw-absolute tw-left-5 tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" })] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-h-10 tw-flex-1 tw-flex-col tw-self-stretch", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-justify-between tw-text-grey-500", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center", children: [jsxRuntime.jsx(CaptionText, { children: fromLabel }), jsxRuntime.jsx("span", { className: "tw-text-grey-600", children: jsxRuntime.jsx(ChevronRightSmallIcon, {}) }), jsxRuntime.jsx(CaptionText, { children: toLabel })] }), !!dropdownMenuItems && (jsxRuntime.jsx("button", { className: "tw-peer tw-absolute tw-right-squid-xxs tw-top-squid-xxs tw-flex tw-h-squid-xl tw-w-squid-xl tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-material-light-thin tw-p-2 tw-text-grey-300 tw-opacity-0 tw-transition-opacity focus:tw-opacity-100 group-hover/history-item:tw-opacity-100", onClick: openDropdown, ref: openDropdownButtonRef, children: jsxRuntime.jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })), jsxRuntime.jsx("div", { className: cn(!!dropdownMenuItems &&
-                                        'tw-transition-opacity group-hover/history-item:tw-hidden group-hover/history-item:tw-opacity-0 peer-focus:tw-hidden peer-focus:tw-opacity-0'), children: statusInfo.label && (jsxRuntime.jsx(CaptionText, { className: statusInfo.className, children: statusInfo.label })) })] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-gap-squid-xxs tw-text-grey-300", children: [jsxRuntime.jsx(BodyText, { size: "small", children: fromAmount }), jsxRuntime.jsx("span", { className: "tw-text-grey-600", children: jsxRuntime.jsx(ChevronLargeRightIcon, {}) }), jsxRuntime.jsx(BodyText, { size: "small", children: toAmount })] })] }), isDropdownOpen && !!dropdownMenuItems ? (jsxRuntime.jsx(DropdownMenu, { menuRef: menuRef, 
+    const isInteractive = !!onClick;
+    const ItemTag = isInteractive ? 'button' : 'div';
+    const itemTagProps = isInteractive
+        ? {
+            onClick,
+        }
+        : {};
+    return (jsxRuntime.jsx("li", { ref: itemRef, className: "tw-h-list-item-large tw-min-w-list-item-small tw-self-stretch tw-bg-grey-900 tw-px-squid-xs tw-text-grey-300", children: jsxRuntime.jsxs(ItemTag, Object.assign({}, itemTagProps, { className: cn('tw-group/history-item tw-relative tw-flex tw-w-full tw-flex-shrink-0 tw-items-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs', isInteractive && 'hover:tw-bg-material-light-thin'), children: [jsxRuntime.jsxs("div", { className: "tw-relative tw-h-10 tw-w-[60px]", children: [!!statusBadge[status].badge && (jsxRuntime.jsx("span", { className: cn('tw-absolute -tw-left-[5px] tw-bottom-0 tw-z-10 tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-center tw-overflow-hidden tw-rounded-full tw-border tw-border-grey-900 tw-p-0.5', statusBadge[status].containerClassName), children: statusBadge[status].badge })), jsxRuntime.jsx("img", { src: firstImageUrl, className: "tw-absolute tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" }), jsxRuntime.jsx("img", { src: secondImageUrl, className: "tw-absolute tw-left-5 tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" })] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-h-10 tw-flex-1 tw-flex-col tw-self-stretch", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-justify-between tw-text-grey-500", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center", children: [jsxRuntime.jsx(CaptionText, { children: fromLabel }), jsxRuntime.jsx("span", { className: "tw-text-grey-600", children: jsxRuntime.jsx(ChevronRightSmallIcon, {}) }), jsxRuntime.jsx(CaptionText, { children: toLabel })] }), !!dropdownMenuItems && (jsxRuntime.jsx("button", { className: "tw-peer tw-absolute tw-right-squid-xxs tw-top-squid-xxs tw-flex tw-h-squid-xl tw-w-squid-xl tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-material-light-thin tw-p-2 tw-text-grey-300 tw-opacity-0 tw-transition-opacity focus:tw-opacity-100 group-hover/history-item:tw-opacity-100", onClick: openDropdown, ref: openDropdownButtonRef, children: jsxRuntime.jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })), jsxRuntime.jsx("div", { className: cn('tw-flex tw-items-center tw-justify-center tw-gap-squid-xxs', !!dropdownMenuItems &&
+                                        'tw-transition-opacity group-hover/history-item:tw-hidden group-hover/history-item:tw-opacity-0 peer-focus:tw-hidden peer-focus:tw-opacity-0'), children: statusLabel })] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-gap-squid-xxs tw-text-grey-300", children: [jsxRuntime.jsx(BodyText, { size: "small", children: fromAmount }), jsxRuntime.jsx("span", { className: "tw-text-grey-600", children: jsxRuntime.jsx(ChevronLargeRightIcon, {}) }), jsxRuntime.jsx(BodyText, { size: "small", children: toAmount })] })] }), isDropdownOpen && !!dropdownMenuItems ? (jsxRuntime.jsx(DropdownMenu, { menuRef: menuRef, 
                     // only show dropdown menu if there is a position defined for it
-                    isHidden: !dropdownPosition, className: cn(!!dropdownPosition && dropdownPositionClassMap[dropdownPosition]), dropdownRef: dropdownRef, items: dropdownMenuItems })) : null] }) }));
+                    isHidden: !dropdownPosition, className: cn(!!dropdownPosition && dropdownPositionClassMap[dropdownPosition]), dropdownRef: dropdownRef, items: dropdownMenuItems })) : null] })) }));
 }
 
 const listItemSizeMap = {
@@ -3282,27 +3299,28 @@ const listItemSizeMap = {
     large: 'tw-max-w-list-item-large tw-h-list-item-large tw-px-squid-xs',
 };
 function ListItem(_a) {
-    var { itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size = 'large', mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded = false, detailButtonClassName, loading } = _a, props = __rest(_a, ["itemTitle", "mainImageUrl", "subtitle", "detail", "icon", "secondaryImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading"]);
+    var { itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size = 'large', mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded = false, detailButtonClassName, loading, containerProps } = _a, props = __rest(_a, ["itemTitle", "mainImageUrl", "subtitle", "detail", "icon", "secondaryImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading", "containerProps"]);
     // 'small' variant does not have detail
     const showDetail = size === 'large' && (!!detail || !!icon || showDetailOnHoverOnly);
-    return (jsxRuntime.jsx("li", { className: cn('tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300', listItemSizeMap[size], className), children: jsxRuntime.jsxs("button", Object.assign({}, props, { className: cn('tw-group/list-item tw-flex tw-w-full tw-max-w-full tw-cursor-pointer tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin', isSelected && 'tw-bg-material-light-thin'), children: [size === 'large' ? (jsxRuntime.jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, size: "md", rounded: rounded })) })) : (jsxRuntime.jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-[40px] tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xs', 
+    return (jsxRuntime.jsx("li", Object.assign({}, containerProps, { className: cn('tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300', listItemSizeMap[size], className), children: jsxRuntime.jsxs("button", Object.assign({}, props, { className: cn('tw-group/list-item tw-flex tw-w-full tw-max-w-full tw-cursor-pointer tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin', isSelected && 'tw-bg-material-light-thin'), children: [size === 'large' ? (jsxRuntime.jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, size: "md", rounded: rounded })) })) : (jsxRuntime.jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-[40px] tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xxs', 
                     // 'large' variant has extra padding
-                    size === 'large' ? 'tw-w-[56%] tw-pl-squid-xxs' : 'tw-w-[67%]'), children: [typeof itemTitle === 'string' ? (jsxRuntime.jsx(BodyText, { size: "small", className: "tw-max-w-full tw-truncate !tw-leading-[17px]", children: itemTitle })) : (itemTitle), size === 'large' &&
-                            ((loading === null || loading === void 0 ? void 0 : loading.subtitle) ? (jsxRuntime.jsx(LoadingSkeleton, { className: "-tw-translate-x-6 tw-text-grey-500", height: "10" })) : subtitle ? (jsxRuntime.jsx(CaptionText, { className: "tw-h-squid-xs tw-max-w-full tw-truncate !tw-leading-[11px] tw-text-grey-500", children: subtitle })) : null)] }), showDetail && (jsxRuntime.jsxs("button", { onClick: (event) => {
+                    size === 'large' ? 'tw-w-[56%] tw-pl-squid-xxs' : 'tw-w-[67%]'), children: [typeof itemTitle === 'string' ? (jsxRuntime.jsx(BodyText, { size: "small", className: cn('tw-max-w-full tw-truncate', subtitle && 'tw-h-[17px] !tw-leading-[17px]'), children: itemTitle })) : (itemTitle), size === 'large' &&
+                            ((loading === null || loading === void 0 ? void 0 : loading.subtitle) ? (jsxRuntime.jsx(LoadingSkeleton, { className: "-tw-translate-x-6 tw-text-grey-500", height: "10" })) : subtitle ? (jsxRuntime.jsx(CaptionText, { className: "tw-h-[14px] tw-max-w-full tw-truncate !tw-leading-[16px] tw-text-grey-500", children: subtitle })) : null)] }), showDetail && (jsxRuntime.jsxs("button", { onClick: (event) => {
                         // prevent click event from bubbling up to parent
                         event.stopPropagation();
                         onDetailClick === null || onDetailClick === void 0 ? void 0 : onDetailClick();
                     }, className: cn('tw-flex tw-w-fit tw-cursor-pointer tw-items-center tw-justify-center tw-rounded-squid-xs hover:tw-bg-material-light-thin', size === 'large' ? 'tw-h-squid-xl' : 'tw-h-squid-l', showDetailOnHoverOnly
                         ? 'tw-opacity-0 hover:tw-opacity-100 focus:tw-opacity-100 group-hover/list-item:tw-opacity-100 group-focus/list-item:tw-opacity-100'
-                        : 'tw-flex', detailButtonClassName), children: [!!detail && (jsxRuntime.jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })), icon ? (jsxRuntime.jsx("span", { className: "tw-flex tw-items-center tw-justify-center tw-px-[3px] tw-py-2", children: icon })) : null] }))] })) }));
+                        : 'tw-flex', detailButtonClassName), children: [!!detail && (jsxRuntime.jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })), icon ? (jsxRuntime.jsx("span", { className: "tw-flex tw-items-center tw-justify-center tw-px-[3px] tw-py-2", children: icon })) : null] }))] })) })));
 }
 
 function MenuItem({ label, imageUrl, icon }) {
     return (jsxRuntime.jsxs("li", { className: "tw-mx-squid-xxs tw-inline-flex tw-max-h-list-item-small tw-items-center tw-justify-start tw-gap-squid-xxs tw-rounded-squid-xs tw-bg-grey-900 tw-py-squid-xxs tw-pl-squid-xxs tw-pr-squid-xl tw-text-grey-300", children: [jsxRuntime.jsx("div", { className: "tw-h-squid-m tw-w-squid-m", children: imageUrl ? (jsxRuntime.jsx("img", { className: "tw-h-full tw-w-full tw-rounded-squid-xxs", src: imageUrl, alt: "" })) : icon ? (icon) : null }), jsxRuntime.jsx(CaptionText, { children: label })] }));
 }
 
-function SectionTitle({ title, icon, accessory, actionIcon, className, }) {
-    return (jsxRuntime.jsxs("header", { className: cn('tw-flex tw-h-[46px] tw-w-full tw-items-center tw-gap-squid-xxs tw-bg-grey-900 tw-px-squid-m tw-pb-squid-xs tw-pt-squid-m tw-text-royal-400', className), children: [icon, jsxRuntime.jsx(CaptionText, { children: title }), accessory ? (jsxRuntime.jsx(CaptionText, { className: "tw-flex-1 tw-text-right tw-text-grey-500", children: accessory })) : actionIcon ? (jsxRuntime.jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end", children: actionIcon })) : null] }));
+function SectionTitle(_a) {
+    var { title, icon, accessory, actionIcon, className } = _a, props = __rest(_a, ["title", "icon", "accessory", "actionIcon", "className"]);
+    return (jsxRuntime.jsxs("header", Object.assign({}, props, { className: cn('tw-flex tw-h-[46px] tw-w-full tw-items-center tw-gap-squid-xxs tw-bg-grey-900 tw-px-squid-m tw-pb-squid-xs tw-pt-squid-m tw-text-royal-400', className), children: [icon, jsxRuntime.jsx(CaptionText, { children: title }), accessory ? (jsxRuntime.jsx(CaptionText, { className: "tw-flex-1 tw-text-right tw-text-grey-500", children: accessory })) : actionIcon ? (jsxRuntime.jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end", children: actionIcon })) : null] })));
 }
 
 function HelpIcon({ size = '20', className, }) {
@@ -3358,13 +3376,13 @@ function SwapStepItem({ descriptionBlocks, chipContent, showStepSeparator = fals
                                 value
                                     .trim()
                                     .split(' ')
-                                    .map((word, i) => (jsxRuntime.jsx(BodyText, { size: "small", className: "tw-leading-[20px]", children: word }, i))));
+                                    .map((word, i) => (jsxRuntime.jsx(BodyText, { size: "small", className: "!tw-leading-[13px]", children: word }, i))));
                             }
                             else if (type === 'image') {
                                 return (jsxRuntime.jsx("img", { src: value, className: "tw-h-squid-m tw-w-squid-m tw-rounded-full" }, index));
                             }
                             return null;
-                        }) }), !!link && (jsxRuntime.jsx(ChevronLargeRightIcon, { className: "tw-mr-squid-xxs tw-hidden tw-text-material-light-average group-hover/swap-step-item:tw-block" }))] })] }));
+                        }) })] })] }));
 }
 
 function DropdownMenu({ dropdownRef, items, className, menuRef, isHidden = false, listClassName, }) {
@@ -3539,6 +3557,7 @@ const lightTheme = {
     // status
     'status-positive': '#11D421',
     'status-negative': '#FF5B4D',
+    'status-warning': '#EC9213',
     // transparent
     'transparent-light-thin': '#17191C1A', // 10% opacity
     'transparent-light-average': '#17191C54', // 33% opacity
@@ -3561,6 +3580,10 @@ const themeKeysToReplace = [
         userKey: 'transparent',
         internalKey: 'material',
     },
+    {
+        userKey: 'status-warning',
+        internalKey: 'status-partial',
+    },
 ];
 /**
  * Parsing the user readable config to css variables

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

@@ -5,8 +5,9 @@ export declare function ChevronArrowIcon({ size, className, }: {
 }): import("react/jsx-runtime").JSX.Element;
 export declare function ArrowTriangle(): import("react/jsx-runtime").JSX.Element;
 export declare function ChevronTopSmallIcon(): import("react/jsx-runtime").JSX.Element;
-export declare function ChevronLargeDownIcon({ size }: {
+export declare function ChevronLargeDownIcon({ size, className, }: {
     size?: string;
+    className?: string;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function ChevronTopIcon(): import("react/jsx-runtime").JSX.Element;
 export declare function ChevronLargeRightIcon({ size, className, }: {

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

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

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { DropdownMenuItemProps } from './DropdownMenuItem';
-type HistoryItemStatus = 'completed' | 'pending' | 'failed';
+type HistoryItemStatus = 'completed' | 'pending' | 'failed' | 'warning';
 interface HistoryItemProps {
     firstImageUrl: string;
     secondImageUrl: string;
@@ -12,6 +12,8 @@ interface HistoryItemProps {
     toAmount: string;
     dropdownMenuItems?: DropdownMenuItemProps[];
     itemsContainerRef?: React.RefObject<HTMLElement>;
+    onClick?: () => void;
+    warningLabel?: string;
 }
-export declare function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, dropdownMenuItems, itemsContainerRef, status, }: HistoryItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, dropdownMenuItems, itemsContainerRef, status, warningLabel, onClick, }: HistoryItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -17,7 +17,8 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     loading?: {
         subtitle?: boolean;
     };
+    containerProps?: React.HTMLAttributes<HTMLLIElement>;
 }
 type ListItemSize = 'small' | 'large';
-export declare function ListItem({ itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function ListItem({ itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, containerProps, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-interface SectionTitleProps {
+interface SectionTitleProps extends React.HTMLAttributes<HTMLDivElement> {
     title: string;
     icon?: React.ReactNode;
     accessory?: string | null;
     actionIcon?: React.ReactNode;
     className?: string;
 }
-export declare function SectionTitle({ title, icon, accessory, actionIcon, className, }: SectionTitleProps): import("react/jsx-runtime").JSX.Element;
+export declare function SectionTitle({ title, icon, accessory, actionIcon, className, ...props }: SectionTitleProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -6,4 +6,6 @@ type Story = StoryObj<typeof meta>;
 export declare const Completed: Story;
 export declare const Pending: Story;
 export declare const Failed: Story;
+export declare const Warning: Story;
 export declare const WithActions: Story;
+export declare const IsClickable: Story;

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

@@ -8,6 +8,7 @@ export declare const Pending: Story;
 export declare const Progress: Story;
 export declare const CustomDescription: Story;
 export declare const ShowSeparator: Story;
+export declare const Link: Story;
 export declare const LongDescription: Story;
 export declare const LongDescriptionWithSeparator: Story;
-export declare const Link: Story;
+export declare const LongDescriptionWithSeparatorAndLink: Story;

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

@@ -16,6 +16,7 @@ export interface InternalSquidTheme {
     'royal-500': string;
     'status-positive': string;
     'status-negative': string;
+    'status-partial': string;
     'material-light-thin': string;
     'material-light-average': string;
     'material-light-thick': string;
@@ -37,6 +38,7 @@ export type SquidTheme = {
     'accent-500': string;
     'status-positive': string;
     'status-negative': string;
+    'status-warning': string;
     'transparent-light-thin': string;
     'transparent-light-average': string;
     'transparent-light-thick': string;

package/dist/esm/index.js

@@ -2666,8 +2666,8 @@ function ChevronArrowIcon({ size = '16', className, }) {
 function ArrowTriangle() {
     return (jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M2.87921 5.55701C2.21562 4.22933 3.18052 2.6665 4.66531 2.6665H11.3348C12.8196 2.6665 13.7845 4.22933 13.1209 5.55701L9.78615 12.229C9.05029 13.7012 6.94983 13.7012 6.21397 12.229L2.87921 5.55701Z", fill: "currentColor" }) }));
 }
-function ChevronLargeDownIcon({ size = '24' }) {
-    return (jsx("svg", { width: size, height: size, viewBox: "0 0 24 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M3 10.5L11.0287 14.9604C11.6328 15.296 12.3672 15.296 12.9713 14.9604L21 10.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+function ChevronLargeDownIcon({ size = '24', className, }) {
+    return (jsx("svg", { width: size, height: size, viewBox: "0 0 24 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsx("path", { d: "M3 10.5L11.0287 14.9604C11.6328 15.296 12.3672 15.296 12.9713 14.9604L21 10.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
 function ChevronLargeRightIcon({ size = '16', className, }) {
     return (jsx("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsx("path", { d: "M6.66675 14L9.64035 8.64754C9.86407 8.24484 9.86407 7.75519 9.64035 7.35249L6.66675 2", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
@@ -2756,6 +2756,9 @@ const themeTypesKeys = {
     'status-positive': {
         cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-positive`,
     },
+    'status-partial': {
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-partial`,
+    },
 };
 
 function PlusIcon() {
@@ -2961,10 +2964,20 @@ const switchSizeClassMap = {
     small: 'tw-w-[36px] tw-h-squid-m tw-p-0.5',
     large: 'tw-w-[54px] tw-h-squid-l tw-p-[3px]',
 };
-const switchCircleSizeClassMap = {
+const switchKnobSizeClassMap = {
     small: 'tw-w-4 tw-h-4',
     large: 'tw-w-6 tw-h-6',
 };
+const switchKnobCheckedClassMap = {
+    large: {
+        checked: 'tw-left-[26px]',
+        unchecked: 'tw-left-[2px]',
+    },
+    small: {
+        checked: 'tw-left-[17px]',
+        unchecked: 'tw-left-[1px]',
+    },
+};
 function Switch({ checked = false, onChange, size, disabled = false, }) {
     return (
     // Switch container
@@ -2978,11 +2991,11 @@ function Switch({ checked = false, onChange, size, disabled = false, }) {
                     filter: 'drop-shadow(0px 5px 20px rgba(0, 0, 0, 0.33)) drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.20))',
                 }, className: clsx('tw-absolute tw-rounded-full tw-border tw-border-material-light-thin tw-transition-all', 
                 // size styles
-                switchCircleSizeClassMap[size], 
-                // disabled and checked styles
-                checked
-                    ? 'tw-translate-x-0 group-data-[squid-theme-type=dark]:tw-bg-grey-100 group-data-[squid-theme-type=light]:tw-bg-grey-900'
-                    : '-tw-translate-x-full tw-bg-grey-500') })] }));
+                switchKnobSizeClassMap[size], 
+                // checked styles
+                switchKnobCheckedClassMap[size][checked ? 'checked' : 'unchecked'], checked
+                    ? 'group-data-[squid-theme-type=dark]:tw-bg-grey-100 group-data-[squid-theme-type=light]:tw-bg-grey-900'
+                    : 'tw-bg-grey-500') })] }));
 }
 
 const borderRadiusClassMap = {
@@ -3113,6 +3126,9 @@ function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessa
 function EmojiSadIcon({ className }) {
     return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", className: className, children: jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20ZM13.5341 12.4645C11.5815 10.5118 8.41568 10.5118 6.46306 12.4645C6.07254 12.855 6.07254 13.4882 6.46306 13.8787C6.85358 14.2692 7.48675 14.2692 7.87727 13.8787C9.04885 12.7071 10.9483 12.7071 12.1199 13.8787C12.5104 14.2692 13.1436 14.2692 13.5341 13.8787C13.9247 13.4882 13.9247 12.855 13.5341 12.4645ZM8.5 7.5C8.5 8.32843 7.94036 9 7.25 9C6.55964 9 6 8.32843 6 7.5C6 6.67157 6.55964 6 7.25 6C7.94036 6 8.5 6.67157 8.5 7.5ZM12.75 9C13.4404 9 14 8.32843 14 7.5C14 6.67157 13.4404 6 12.75 6C12.0596 6 11.5 6.67157 11.5 7.5C11.5 8.32843 12.0596 9 12.75 9Z", fill: "currentColor" }) }));
 }
+function EmojiMeh({ className, size = '20', }) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: className, 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 10ZM7.25 9C7.94036 9 8.5 8.32843 8.5 7.5C8.5 6.67157 7.94036 6 7.25 6C6.55964 6 6 6.67157 6 7.5C6 8.32843 6.55964 9 7.25 9ZM14 7.5C14 8.32843 13.4404 9 12.75 9C12.0596 9 11.5 8.32843 11.5 7.5C11.5 6.67157 12.0596 6 12.75 6C13.4404 6 14 6.67157 14 7.5ZM7 12C6.44772 12 6 12.4477 6 13C6 13.5523 6.44772 14 7 14H13C13.5523 14 14 13.5523 14 13C14 12.4477 13.5523 12 13 12H7Z", fill: "currentColor" }) }));
+}
 
 function ErrorMessage({ message, showIcon = true }) {
     return (jsxs("div", { className: "tw-flex tw-h-squid-xl tw-flex-1 tw-items-center tw-gap-squid-xxs tw-text-status-negative", children: [showIcon ? jsx(EmojiSadIcon, {}) : null, jsx(CaptionText, { children: message })] }));
@@ -3135,7 +3151,7 @@ function DetailsToolbar({ errorMessage, boostMode = 'normal', onToggleBoostMode,
         return 'full';
     }, [errorMessage, isLoading, isEmpty]);
     const detailClassName = cn('tw-w-[190px]', detailStateClassMap[state]);
-    return (jsx("aside", { className: cn('tw-flex tw-h-[50px] tw-w-[480px] tw-items-center tw-justify-around tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-py-squid-xxs tw-text-grey-500', state === 'error' ? 'tw-px-squid-l' : 'tw-px-squid-m'), children: state === 'error' && errorMessage ? (jsxs(Fragment, { children: [jsx(ErrorMessage, { message: errorMessage }), helpButton ? (jsx(Button, { onClick: helpButton.onClick, size: "md", variant: "tertiary", label: helpButton.label })) : null] })) : (jsxs(Fragment, { children: [jsx("div", { className: detailClassName, children: jsx(FeeButton, { feeInUsd: feeInUsd, onClick: onFeeButtonClick }) }), jsx("div", { className: "tw-flex tw-h-squid-xl tw-w-squid-xxl tw-items-center tw-justify-center", children: state === 'loading' ? (jsx(Loader, { size: "32" })) : (jsx(Button, { variant: "tertiary", size: "md", onClick: onInvertSwapButtonClick, className: "tw-border-transparent tw-bg-transparent hover:tw-bg-material-light-thin", icon: jsx(ChevronLargeDownIcon, {}) })) }), jsx("div", { className: detailClassName, children: jsx(Boost, { estimatedTime: estimatedTime !== null && estimatedTime !== void 0 ? estimatedTime : '0s', boostMode: boostMode, onToggleBoostMode: onToggleBoostMode, canToggleBoostMode: state === 'loading' ? false : canToggleBoostMode, boostDisabledMessage: boostDisabledMessage, boostTooltipDisplayDelayMs: boostTooltipDisplayDelayMs }) })] })) }));
+    return (jsx("aside", { className: cn('tw-flex tw-h-[50px] tw-w-[480px] tw-items-center tw-justify-around tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-py-squid-xxs tw-text-grey-500', state === 'error' ? 'tw-px-squid-l' : 'tw-px-squid-m'), children: state === 'error' && errorMessage ? (jsxs(Fragment, { children: [jsx(ErrorMessage, { message: errorMessage }), helpButton ? (jsx(Button, { onClick: helpButton.onClick, size: "md", variant: "tertiary", label: helpButton.label })) : null] })) : (jsxs(Fragment, { children: [jsx("div", { className: detailClassName, children: jsx(FeeButton, { feeInUsd: feeInUsd, onClick: onFeeButtonClick }) }), jsx("div", { className: "tw-flex tw-h-squid-xl tw-w-squid-xxl tw-items-center tw-justify-center", children: state === 'loading' ? (jsx(Loader, { size: "32" })) : (jsx(Button, { variant: "tertiary", size: "md", onClick: onInvertSwapButtonClick, className: "tw-group/arrow-button tw-border-transparent tw-bg-transparent hover:tw-bg-material-light-thin", icon: jsx(ChevronLargeDownIcon, { className: "tw-transition-transform tw-duration-150 group-hover/arrow-button:tw-rotate-180" }) })) }), jsx("div", { className: detailClassName, children: jsx(Boost, { estimatedTime: estimatedTime !== null && estimatedTime !== void 0 ? estimatedTime : '0s', boostMode: boostMode, onToggleBoostMode: onToggleBoostMode, canToggleBoostMode: state === 'loading' ? false : canToggleBoostMode, boostDisabledMessage: boostDisabledMessage, boostTooltipDisplayDelayMs: boostTooltipDisplayDelayMs }) })] })) }));
 }
 
 function DropdownMenuItem({ label, imageUrl, icon, labelClassName, onClick, }) {
@@ -3192,37 +3208,31 @@ const statusBadge = {
         containerClassName: 'tw-bg-royal-400',
     },
     failed: {
-        badge: (jsx("span", { className: "group-data-[squid-theme-type=dark]:tw-bg-grey-100 group-data-[squid-theme-type=light]:tw-bg-grey-900", children: jsx(EmojiSadIcon, { className: "tw-text-status-negative" }) })),
+        badge: (jsx("span", { className: "tw-bg-grey-900", children: jsx(EmojiSadIcon, { className: "tw-text-status-negative" }) })),
         containerClassName: 'tw-bg-status-negative',
     },
+    warning: {
+        badge: (jsx("span", { className: "tw-bg-grey-900", children: jsx(EmojiMeh, { className: "tw-text-status-partial" }) })),
+        containerClassName: 'tw-bg-status-partial',
+    },
 };
-function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, dropdownMenuItems, itemsContainerRef, status, }) {
+function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, dropdownMenuItems, itemsContainerRef, status, warningLabel, onClick, }) {
     const { isDropdownOpen, dropdownRef, openDropdownButtonRef, openDropdown } = useDropdownMenu();
     const [dropdownPosition, setDropdownPosition] = useState(null);
     const itemRef = useRef(null);
     const menuRef = useRef(null);
-    const statusInfo = useMemo(() => {
+    const statusLabel = useMemo(() => {
         switch (status) {
             case 'completed':
-                return {
-                    label: dateCompleted,
-                    className: '',
-                };
+                return jsx(CaptionText, { children: dateCompleted });
             case 'pending':
-                return {
-                    label: 'Pending',
-                    className: 'tw-text-royal-400',
-                };
+                return jsx(CaptionText, { className: "tw-text-royal-400", children: "Pending" });
             case 'failed':
-                return {
-                    label: 'Failed',
-                    className: 'tw-text-status-negative',
-                };
+                return (jsxs(Fragment, { children: [jsx(CaptionText, { className: "tw-text-status-negative", children: "Fail" }), jsx(CaptionText, { children: dateCompleted })] }));
+            case 'warning':
+                return (jsx(CaptionText, { className: "tw-text-status-partial", children: warningLabel }));
             default:
-                return {
-                    label: '',
-                    className: '',
-                };
+                return null;
         }
     }, [status, dateCompleted]);
     // Effect to find the best position for the dropdown menu, so it's always visible for the user
@@ -3269,10 +3279,17 @@ function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount,
             setDropdownPosition('top');
         }
     }, [isDropdownOpen, menuRef, dropdownPosition, itemRef]);
-    return (jsx("li", { ref: itemRef, className: "tw-h-list-item-large tw-min-w-list-item-small tw-self-stretch tw-bg-grey-900 tw-px-squid-xs tw-text-grey-300", children: jsxs("div", { className: "tw-group/history-item tw-relative tw-flex tw-flex-shrink-0 tw-cursor-pointer tw-items-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin", children: [jsxs("div", { className: "tw-relative tw-h-10 tw-w-[60px]", children: [!!statusBadge[status].badge && (jsx("span", { className: cn('tw-absolute -tw-left-[5px] tw-bottom-0 tw-z-30 tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-center tw-overflow-hidden tw-rounded-full tw-border tw-border-grey-900 tw-p-0.5', statusBadge[status].containerClassName), children: statusBadge[status].badge })), jsx("img", { src: firstImageUrl, className: "tw-absolute tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" }), jsx("img", { src: secondImageUrl, className: "tw-absolute tw-left-5 tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" })] }), jsxs("div", { className: "tw-flex tw-h-10 tw-flex-1 tw-flex-col tw-self-stretch", children: [jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-justify-between tw-text-grey-500", children: [jsxs("div", { className: "tw-flex tw-items-center", children: [jsx(CaptionText, { children: fromLabel }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronRightSmallIcon, {}) }), jsx(CaptionText, { children: toLabel })] }), !!dropdownMenuItems && (jsx("button", { className: "tw-peer tw-absolute tw-right-squid-xxs tw-top-squid-xxs tw-flex tw-h-squid-xl tw-w-squid-xl tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-material-light-thin tw-p-2 tw-text-grey-300 tw-opacity-0 tw-transition-opacity focus:tw-opacity-100 group-hover/history-item:tw-opacity-100", onClick: openDropdown, ref: openDropdownButtonRef, children: jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })), jsx("div", { className: cn(!!dropdownMenuItems &&
-                                        'tw-transition-opacity group-hover/history-item:tw-hidden group-hover/history-item:tw-opacity-0 peer-focus:tw-hidden peer-focus:tw-opacity-0'), children: statusInfo.label && (jsx(CaptionText, { className: statusInfo.className, children: statusInfo.label })) })] }), jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-gap-squid-xxs tw-text-grey-300", children: [jsx(BodyText, { size: "small", children: fromAmount }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronLargeRightIcon, {}) }), jsx(BodyText, { size: "small", children: toAmount })] })] }), isDropdownOpen && !!dropdownMenuItems ? (jsx(DropdownMenu, { menuRef: menuRef, 
+    const isInteractive = !!onClick;
+    const ItemTag = isInteractive ? 'button' : 'div';
+    const itemTagProps = isInteractive
+        ? {
+            onClick,
+        }
+        : {};
+    return (jsx("li", { ref: itemRef, className: "tw-h-list-item-large tw-min-w-list-item-small tw-self-stretch tw-bg-grey-900 tw-px-squid-xs tw-text-grey-300", children: jsxs(ItemTag, Object.assign({}, itemTagProps, { className: cn('tw-group/history-item tw-relative tw-flex tw-w-full tw-flex-shrink-0 tw-items-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs', isInteractive && 'hover:tw-bg-material-light-thin'), children: [jsxs("div", { className: "tw-relative tw-h-10 tw-w-[60px]", children: [!!statusBadge[status].badge && (jsx("span", { className: cn('tw-absolute -tw-left-[5px] tw-bottom-0 tw-z-10 tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-center tw-overflow-hidden tw-rounded-full tw-border tw-border-grey-900 tw-p-0.5', statusBadge[status].containerClassName), children: statusBadge[status].badge })), jsx("img", { src: firstImageUrl, className: "tw-absolute tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" }), jsx("img", { src: secondImageUrl, className: "tw-absolute tw-left-5 tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" })] }), jsxs("div", { className: "tw-flex tw-h-10 tw-flex-1 tw-flex-col tw-self-stretch", children: [jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-justify-between tw-text-grey-500", children: [jsxs("div", { className: "tw-flex tw-items-center", children: [jsx(CaptionText, { children: fromLabel }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronRightSmallIcon, {}) }), jsx(CaptionText, { children: toLabel })] }), !!dropdownMenuItems && (jsx("button", { className: "tw-peer tw-absolute tw-right-squid-xxs tw-top-squid-xxs tw-flex tw-h-squid-xl tw-w-squid-xl tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-material-light-thin tw-p-2 tw-text-grey-300 tw-opacity-0 tw-transition-opacity focus:tw-opacity-100 group-hover/history-item:tw-opacity-100", onClick: openDropdown, ref: openDropdownButtonRef, children: jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })), jsx("div", { className: cn('tw-flex tw-items-center tw-justify-center tw-gap-squid-xxs', !!dropdownMenuItems &&
+                                        'tw-transition-opacity group-hover/history-item:tw-hidden group-hover/history-item:tw-opacity-0 peer-focus:tw-hidden peer-focus:tw-opacity-0'), children: statusLabel })] }), jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-gap-squid-xxs tw-text-grey-300", children: [jsx(BodyText, { size: "small", children: fromAmount }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronLargeRightIcon, {}) }), jsx(BodyText, { size: "small", children: toAmount })] })] }), isDropdownOpen && !!dropdownMenuItems ? (jsx(DropdownMenu, { menuRef: menuRef, 
                     // only show dropdown menu if there is a position defined for it
-                    isHidden: !dropdownPosition, className: cn(!!dropdownPosition && dropdownPositionClassMap[dropdownPosition]), dropdownRef: dropdownRef, items: dropdownMenuItems })) : null] }) }));
+                    isHidden: !dropdownPosition, className: cn(!!dropdownPosition && dropdownPositionClassMap[dropdownPosition]), dropdownRef: dropdownRef, items: dropdownMenuItems })) : null] })) }));
 }
 
 const listItemSizeMap = {
@@ -3280,27 +3297,28 @@ const listItemSizeMap = {
     large: 'tw-max-w-list-item-large tw-h-list-item-large tw-px-squid-xs',
 };
 function ListItem(_a) {
-    var { itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size = 'large', mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded = false, detailButtonClassName, loading } = _a, props = __rest(_a, ["itemTitle", "mainImageUrl", "subtitle", "detail", "icon", "secondaryImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading"]);
+    var { itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size = 'large', mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded = false, detailButtonClassName, loading, containerProps } = _a, props = __rest(_a, ["itemTitle", "mainImageUrl", "subtitle", "detail", "icon", "secondaryImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading", "containerProps"]);
     // 'small' variant does not have detail
     const showDetail = size === 'large' && (!!detail || !!icon || showDetailOnHoverOnly);
-    return (jsx("li", { className: cn('tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300', listItemSizeMap[size], className), children: jsxs("button", Object.assign({}, props, { className: cn('tw-group/list-item tw-flex tw-w-full tw-max-w-full tw-cursor-pointer tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin', isSelected && 'tw-bg-material-light-thin'), children: [size === 'large' ? (jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, size: "md", rounded: rounded })) })) : (jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon ? (mainIcon) : (jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxs("div", { className: cn('tw-flex tw-h-[40px] tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xs', 
+    return (jsx("li", Object.assign({}, containerProps, { className: cn('tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300', listItemSizeMap[size], className), children: jsxs("button", Object.assign({}, props, { className: cn('tw-group/list-item tw-flex tw-w-full tw-max-w-full tw-cursor-pointer tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin', isSelected && 'tw-bg-material-light-thin'), children: [size === 'large' ? (jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, size: "md", rounded: rounded })) })) : (jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon ? (mainIcon) : (jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxs("div", { className: cn('tw-flex tw-h-[40px] tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xxs', 
                     // 'large' variant has extra padding
-                    size === 'large' ? 'tw-w-[56%] tw-pl-squid-xxs' : 'tw-w-[67%]'), children: [typeof itemTitle === 'string' ? (jsx(BodyText, { size: "small", className: "tw-max-w-full tw-truncate !tw-leading-[17px]", children: itemTitle })) : (itemTitle), size === 'large' &&
-                            ((loading === null || loading === void 0 ? void 0 : loading.subtitle) ? (jsx(LoadingSkeleton, { className: "-tw-translate-x-6 tw-text-grey-500", height: "10" })) : subtitle ? (jsx(CaptionText, { className: "tw-h-squid-xs tw-max-w-full tw-truncate !tw-leading-[11px] tw-text-grey-500", children: subtitle })) : null)] }), showDetail && (jsxs("button", { onClick: (event) => {
+                    size === 'large' ? 'tw-w-[56%] tw-pl-squid-xxs' : 'tw-w-[67%]'), children: [typeof itemTitle === 'string' ? (jsx(BodyText, { size: "small", className: cn('tw-max-w-full tw-truncate', subtitle && 'tw-h-[17px] !tw-leading-[17px]'), children: itemTitle })) : (itemTitle), size === 'large' &&
+                            ((loading === null || loading === void 0 ? void 0 : loading.subtitle) ? (jsx(LoadingSkeleton, { className: "-tw-translate-x-6 tw-text-grey-500", height: "10" })) : subtitle ? (jsx(CaptionText, { className: "tw-h-[14px] tw-max-w-full tw-truncate !tw-leading-[16px] tw-text-grey-500", children: subtitle })) : null)] }), showDetail && (jsxs("button", { onClick: (event) => {
                         // prevent click event from bubbling up to parent
                         event.stopPropagation();
                         onDetailClick === null || onDetailClick === void 0 ? void 0 : onDetailClick();
                     }, className: cn('tw-flex tw-w-fit tw-cursor-pointer tw-items-center tw-justify-center tw-rounded-squid-xs hover:tw-bg-material-light-thin', size === 'large' ? 'tw-h-squid-xl' : 'tw-h-squid-l', showDetailOnHoverOnly
                         ? 'tw-opacity-0 hover:tw-opacity-100 focus:tw-opacity-100 group-hover/list-item:tw-opacity-100 group-focus/list-item:tw-opacity-100'
-                        : 'tw-flex', detailButtonClassName), children: [!!detail && (jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })), icon ? (jsx("span", { className: "tw-flex tw-items-center tw-justify-center tw-px-[3px] tw-py-2", children: icon })) : null] }))] })) }));
+                        : 'tw-flex', detailButtonClassName), children: [!!detail && (jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })), icon ? (jsx("span", { className: "tw-flex tw-items-center tw-justify-center tw-px-[3px] tw-py-2", children: icon })) : null] }))] })) })));
 }
 
 function MenuItem({ label, imageUrl, icon }) {
     return (jsxs("li", { className: "tw-mx-squid-xxs tw-inline-flex tw-max-h-list-item-small tw-items-center tw-justify-start tw-gap-squid-xxs tw-rounded-squid-xs tw-bg-grey-900 tw-py-squid-xxs tw-pl-squid-xxs tw-pr-squid-xl tw-text-grey-300", children: [jsx("div", { className: "tw-h-squid-m tw-w-squid-m", children: imageUrl ? (jsx("img", { className: "tw-h-full tw-w-full tw-rounded-squid-xxs", src: imageUrl, alt: "" })) : icon ? (icon) : null }), jsx(CaptionText, { children: label })] }));
 }
 
-function SectionTitle({ title, icon, accessory, actionIcon, className, }) {
-    return (jsxs("header", { className: cn('tw-flex tw-h-[46px] tw-w-full tw-items-center tw-gap-squid-xxs tw-bg-grey-900 tw-px-squid-m tw-pb-squid-xs tw-pt-squid-m tw-text-royal-400', className), children: [icon, jsx(CaptionText, { children: title }), accessory ? (jsx(CaptionText, { className: "tw-flex-1 tw-text-right tw-text-grey-500", children: accessory })) : actionIcon ? (jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end", children: actionIcon })) : null] }));
+function SectionTitle(_a) {
+    var { title, icon, accessory, actionIcon, className } = _a, props = __rest(_a, ["title", "icon", "accessory", "actionIcon", "className"]);
+    return (jsxs("header", Object.assign({}, props, { className: cn('tw-flex tw-h-[46px] tw-w-full tw-items-center tw-gap-squid-xxs tw-bg-grey-900 tw-px-squid-m tw-pb-squid-xs tw-pt-squid-m tw-text-royal-400', className), children: [icon, jsx(CaptionText, { children: title }), accessory ? (jsx(CaptionText, { className: "tw-flex-1 tw-text-right tw-text-grey-500", children: accessory })) : actionIcon ? (jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end", children: actionIcon })) : null] })));
 }
 
 function HelpIcon({ size = '20', className, }) {
@@ -3356,13 +3374,13 @@ function SwapStepItem({ descriptionBlocks, chipContent, showStepSeparator = fals
                                 value
                                     .trim()
                                     .split(' ')
-                                    .map((word, i) => (jsx(BodyText, { size: "small", className: "tw-leading-[20px]", children: word }, i))));
+                                    .map((word, i) => (jsx(BodyText, { size: "small", className: "!tw-leading-[13px]", children: word }, i))));
                             }
                             else if (type === 'image') {
                                 return (jsx("img", { src: value, className: "tw-h-squid-m tw-w-squid-m tw-rounded-full" }, index));
                             }
                             return null;
-                        }) }), !!link && (jsx(ChevronLargeRightIcon, { className: "tw-mr-squid-xxs tw-hidden tw-text-material-light-average group-hover/swap-step-item:tw-block" }))] })] }));
+                        }) })] })] }));
 }
 
 function DropdownMenu({ dropdownRef, items, className, menuRef, isHidden = false, listClassName, }) {
@@ -3537,6 +3555,7 @@ const lightTheme = {
     // status
     'status-positive': '#11D421',
     'status-negative': '#FF5B4D',
+    'status-warning': '#EC9213',
     // transparent
     'transparent-light-thin': '#17191C1A', // 10% opacity
     'transparent-light-average': '#17191C54', // 33% opacity
@@ -3559,6 +3578,10 @@ const themeKeysToReplace = [
         userKey: 'transparent',
         internalKey: 'material',
     },
+    {
+        userKey: 'status-warning',
+        internalKey: 'status-partial',
+    },
 ];
 /**
  * Parsing the user readable config to css variables

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

@@ -5,8 +5,9 @@ export declare function ChevronArrowIcon({ size, className, }: {
 }): import("react/jsx-runtime").JSX.Element;
 export declare function ArrowTriangle(): import("react/jsx-runtime").JSX.Element;
 export declare function ChevronTopSmallIcon(): import("react/jsx-runtime").JSX.Element;
-export declare function ChevronLargeDownIcon({ size }: {
+export declare function ChevronLargeDownIcon({ size, className, }: {
     size?: string;
+    className?: string;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function ChevronTopIcon(): import("react/jsx-runtime").JSX.Element;
 export declare function ChevronLargeRightIcon({ size, className, }: {

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

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

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { DropdownMenuItemProps } from './DropdownMenuItem';
-type HistoryItemStatus = 'completed' | 'pending' | 'failed';
+type HistoryItemStatus = 'completed' | 'pending' | 'failed' | 'warning';
 interface HistoryItemProps {
     firstImageUrl: string;
     secondImageUrl: string;
@@ -12,6 +12,8 @@ interface HistoryItemProps {
     toAmount: string;
     dropdownMenuItems?: DropdownMenuItemProps[];
     itemsContainerRef?: React.RefObject<HTMLElement>;
+    onClick?: () => void;
+    warningLabel?: string;
 }
-export declare function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, dropdownMenuItems, itemsContainerRef, status, }: HistoryItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, dropdownMenuItems, itemsContainerRef, status, warningLabel, onClick, }: HistoryItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -17,7 +17,8 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     loading?: {
         subtitle?: boolean;
     };
+    containerProps?: React.HTMLAttributes<HTMLLIElement>;
 }
 type ListItemSize = 'small' | 'large';
-export declare function ListItem({ itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function ListItem({ itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, containerProps, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-interface SectionTitleProps {
+interface SectionTitleProps extends React.HTMLAttributes<HTMLDivElement> {
     title: string;
     icon?: React.ReactNode;
     accessory?: string | null;
     actionIcon?: React.ReactNode;
     className?: string;
 }
-export declare function SectionTitle({ title, icon, accessory, actionIcon, className, }: SectionTitleProps): import("react/jsx-runtime").JSX.Element;
+export declare function SectionTitle({ title, icon, accessory, actionIcon, className, ...props }: SectionTitleProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -6,4 +6,6 @@ type Story = StoryObj<typeof meta>;
 export declare const Completed: Story;
 export declare const Pending: Story;
 export declare const Failed: Story;
+export declare const Warning: Story;
 export declare const WithActions: Story;
+export declare const IsClickable: Story;

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

@@ -8,6 +8,7 @@ export declare const Pending: Story;
 export declare const Progress: Story;
 export declare const CustomDescription: Story;
 export declare const ShowSeparator: Story;
+export declare const Link: Story;
 export declare const LongDescription: Story;
 export declare const LongDescriptionWithSeparator: Story;
-export declare const Link: Story;
+export declare const LongDescriptionWithSeparatorAndLink: Story;

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

@@ -16,6 +16,7 @@ export interface InternalSquidTheme {
     'royal-500': string;
     'status-positive': string;
     'status-negative': string;
+    'status-partial': string;
     'material-light-thin': string;
     'material-light-average': string;
     'material-light-thick': string;
@@ -37,6 +38,7 @@ export type SquidTheme = {
     'accent-500': string;
     'status-positive': string;
     'status-negative': string;
+    'status-warning': string;
     'transparent-light-thin': string;
     'transparent-light-average': string;
     'transparent-light-thick': string;

package/dist/index.css

@@ -681,6 +681,22 @@ video {
   left: 15px;
 }
 
+.tw-left-\[17px\] {
+  left: 17px;
+}
+
+.tw-left-\[1px\] {
+  left: 1px;
+}
+
+.tw-left-\[26px\] {
+  left: 26px;
+}
+
+.tw-left-\[2px\] {
+  left: 2px;
+}
+
 .tw-left-\[54px\] {
   left: 54px;
 }
@@ -757,10 +773,6 @@ video {
   z-index: 20;
 }
 
-.tw-z-30 {
-  z-index: 30;
-}
-
 .tw-z-40 {
   z-index: 40;
 }
@@ -820,10 +832,6 @@ video {
   margin-right: 1px;
 }
 
-.tw-mr-squid-xxs {
-  margin-right: 0.3125rem;
-}
-
 .tw-mt-1 {
   margin-top: 0.25rem;
 }
@@ -884,10 +892,18 @@ video {
   height: 10px;
 }
 
+.tw-h-\[14px\] {
+  height: 14px;
+}
+
 .tw-h-\[160px\] {
   height: 160px;
 }
 
+.tw-h-\[17px\] {
+  height: 17px;
+}
+
 .tw-h-\[195px\] {
   height: 195px;
 }
@@ -988,10 +1004,6 @@ video {
   height: 2.5rem;
 }
 
-.tw-h-squid-xs {
-  height: 0.625rem;
-}
-
 .tw-h-squid-xxl {
   height: 3.75rem;
 }
@@ -1176,6 +1188,10 @@ video {
   width: 480px;
 }
 
+.tw-w-\[500px\] {
+  width: 500px;
+}
+
 .tw-w-\[52px\] {
   width: 52px;
 }
@@ -1349,16 +1365,6 @@ 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-x-full {
-  --tw-translate-x: -100%;
-  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-x-0 {
-  --tw-translate-x: 0px;
-  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-x-1\/4 {
   --tw-translate-x: 25%;
   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));
@@ -1919,6 +1925,10 @@ video {
   background-color: var(--squid-theme-status-negative);
 }
 
+.tw-bg-status-partial {
+  background-color: var(--squid-theme-status-partial);
+}
+
 .tw-bg-status-positive {
   background-color: var(--squid-theme-status-positive);
 }
@@ -2314,14 +2324,14 @@ video {
   line-height: 10px !important;
 }
 
-.\!tw-leading-\[11px\] {
-  line-height: 11px !important;
-}
-
 .\!tw-leading-\[13px\] {
   line-height: 13px !important;
 }
 
+.\!tw-leading-\[16px\] {
+  line-height: 16px !important;
+}
+
 .\!tw-leading-\[17px\] {
   line-height: 17px !important;
 }
@@ -2350,10 +2360,6 @@ video {
   line-height: 13px;
 }
 
-.tw-leading-\[20px\] {
-  line-height: 20px;
-}
-
 .tw-leading-body-large {
   line-height: 39.34px;
 }
@@ -2463,6 +2469,10 @@ video {
   color: var(--squid-theme-status-negative);
 }
 
+.tw-text-status-partial {
+  color: var(--squid-theme-status-partial);
+}
+
 .tw-text-status-positive {
   color: var(--squid-theme-status-positive);
 }
@@ -2580,6 +2590,10 @@ video {
   transition-duration: 100ms;
 }
 
+.tw-duration-150 {
+  transition-duration: 150ms;
+}
+
 .tw-duration-200 {
   transition-duration: 200ms;
 }
@@ -2644,16 +2658,8 @@ li {
   );
 }
 
-button,
-input,
-a {
-  outline: 2px solid transparent;
-  outline-offset: -1px;
-}
-
-button:focus,
-input:focus,
-a:focus {
+:focus-visible {
+  outline-style: solid;
   outline-width: 2px;
   outline-color: var(--squid-theme-royal-500);
 }
@@ -2755,14 +2761,15 @@ input[type='number'] {
   opacity: 0.6;
 }
 
-.tw-group\/swap-step-item:hover .group-hover\/swap-step-item\:tw-block {
-  display: block;
-}
-
 .tw-group\/history-item:hover .group-hover\/history-item\:tw-hidden {
   display: none;
 }
 
+.tw-group\/arrow-button:hover .group-hover\/arrow-button\: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));
+}
+
 .tw-group\/swap-step-item-button:hover .group-hover\/swap-step-item-button\:tw-from-grey-700 {
   --tw-gradient-from: var(--squid-theme-grey-700) var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);

package/dist/index.d.ts

@@ -200,7 +200,7 @@ interface DropdownMenuItemProps {
 }
 declare function DropdownMenuItem({ label, imageUrl, icon, labelClassName, onClick, }: DropdownMenuItemProps): react_jsx_runtime.JSX.Element;
 
-type HistoryItemStatus = 'completed' | 'pending' | 'failed';
+type HistoryItemStatus = 'completed' | 'pending' | 'failed' | 'warning';
 interface HistoryItemProps {
     firstImageUrl: string;
     secondImageUrl: string;
@@ -212,8 +212,10 @@ interface HistoryItemProps {
     toAmount: string;
     dropdownMenuItems?: DropdownMenuItemProps[];
     itemsContainerRef?: React.RefObject<HTMLElement>;
+    onClick?: () => void;
+    warningLabel?: string;
 }
-declare function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, dropdownMenuItems, itemsContainerRef, status, }: HistoryItemProps): react_jsx_runtime.JSX.Element;
+declare function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, dropdownMenuItems, itemsContainerRef, status, warningLabel, onClick, }: HistoryItemProps): react_jsx_runtime.JSX.Element;
 
 interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     itemTitle: string | React.ReactNode;
@@ -233,9 +235,10 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     loading?: {
         subtitle?: boolean;
     };
+    containerProps?: React.HTMLAttributes<HTMLLIElement>;
 }
 type ListItemSize = 'small' | 'large';
-declare function ListItem({ itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, ...props }: ListItemProps): react_jsx_runtime.JSX.Element;
+declare function ListItem({ itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, containerProps, ...props }: ListItemProps): react_jsx_runtime.JSX.Element;
 
 interface MenuItemProps {
     label: string;
@@ -244,14 +247,14 @@ interface MenuItemProps {
 }
 declare function MenuItem({ label, imageUrl, icon }: MenuItemProps): react_jsx_runtime.JSX.Element;
 
-interface SectionTitleProps {
+interface SectionTitleProps extends React.HTMLAttributes<HTMLDivElement> {
     title: string;
     icon?: React.ReactNode;
     accessory?: string | null;
     actionIcon?: React.ReactNode;
     className?: string;
 }
-declare function SectionTitle({ title, icon, accessory, actionIcon, className, }: SectionTitleProps): react_jsx_runtime.JSX.Element;
+declare function SectionTitle({ title, icon, accessory, actionIcon, className, ...props }: SectionTitleProps): react_jsx_runtime.JSX.Element;
 
 type SettingsControl = {
     type: 'percentage';
@@ -473,6 +476,7 @@ type SquidTheme = {
     'accent-500': string;
     'status-positive': string;
     'status-negative': string;
+    'status-warning': string;
     'transparent-light-thin': string;
     'transparent-light-average': string;
     'transparent-light-thick': string;

package/package.json

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