@0xsquid/ui 0.11.1 → 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() {
@@ -3125,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 })] }));
@@ -3147,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, }) {
@@ -3204,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
@@ -3281,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-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(!!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 = {
@@ -3295,10 +3302,10 @@ function ListItem(_a) {
     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", 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-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();
@@ -3369,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, }) {
@@ -3550,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
@@ -3572,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/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() {
@@ -3123,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 })] }));
@@ -3145,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, }) {
@@ -3202,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
@@ -3279,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-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(!!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 = {
@@ -3293,10 +3300,10 @@ function ListItem(_a) {
     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", 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-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();
@@ -3367,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, }) {
@@ -3548,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
@@ -3570,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/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

@@ -832,10 +832,6 @@ video {
   margin-right: 1px;
 }
 
-.tw-mr-squid-xxs {
-  margin-right: 0.3125rem;
-}
-
 .tw-mt-1 {
   margin-top: 0.25rem;
 }
@@ -896,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;
 }
@@ -1000,10 +1004,6 @@ video {
   height: 2.5rem;
 }
 
-.tw-h-squid-xs {
-  height: 0.625rem;
-}
-
 .tw-h-squid-xxl {
   height: 3.75rem;
 }
@@ -1188,6 +1188,10 @@ video {
   width: 480px;
 }
 
+.tw-w-\[500px\] {
+  width: 500px;
+}
+
 .tw-w-\[52px\] {
   width: 52px;
 }
@@ -1921,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);
 }
@@ -2316,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;
 }
@@ -2352,10 +2360,6 @@ video {
   line-height: 13px;
 }
 
-.tw-leading-\[20px\] {
-  line-height: 20px;
-}
-
 .tw-leading-body-large {
   line-height: 39.34px;
 }
@@ -2465,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);
 }
@@ -2582,6 +2590,10 @@ video {
   transition-duration: 100ms;
 }
 
+.tw-duration-150 {
+  transition-duration: 150ms;
+}
+
 .tw-duration-200 {
   transition-duration: 200ms;
 }
@@ -2646,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);
 }
@@ -2757,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;
@@ -474,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.1",
+  "version": "0.12.0",
   "author": "",
   "license": "MIT",
   "scripts": {