@0xsquid/ui 0.7.6 → 0.8.1

package/dist/cjs/index.js

@@ -2652,8 +2652,8 @@ function ChevronLargeRightIcon({ size = '16', className, }) {
 function ChevronRightSmallIcon() {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: jsxRuntime.jsx("path", { d: "M6.66675 10.6667L8.86201 8.47141C9.12236 8.21106 9.12236 7.78896 8.86201 7.52861L6.66675 5.33334", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
-function ArrowLeftIcon() {
-    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: jsxRuntime.jsx("path", { d: "M10 6L4 12L10 18M5 12H20", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }) }));
+function ArrowLeftIcon({ className, size = '24', }) {
+    return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: jsxRuntime.jsx("path", { d: "M10 6L4 12L10 18M5 12H20", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }) }));
 }
 function ChevronGrabberVerticalIcon({ size = '16', className, }) {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 16 16", fill: "none", className: className, children: jsxRuntime.jsx("path", { d: "M5.33301 6.00002L7.52827 3.80476C7.78862 3.54441 8.21073 3.54441 8.47108 3.80476L10.6663 6.00002M5.33301 10L7.52827 12.1953C7.78862 12.4556 8.21073 12.4556 8.47108 12.1953L10.6663 10", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }) }));
@@ -3245,8 +3245,23 @@ function SwapStepSeparator() {
     return (jsxRuntime.jsx("span", { className: "tw-flex tw-h-squid-m tw-w-squid-xxl tw-items-center tw-justify-center tw-self-stretch tw-py-0.5", children: jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "4", height: "21", viewBox: "0 0 4 21", fill: "none", children: jsxRuntime.jsx("path", { d: "M2 2.5V18.5", stroke: "currentColor", "stroke-width": "4", "stroke-linecap": "round" }) }) }));
 }
 
-function SwapStepItem({ descriptionBlocks, chipContent, showStepSeparator = false, }) {
-    return (jsxRuntime.jsxs("li", { className: "tw-flex tw-w-list-item-large tw-flex-col tw-items-start tw-bg-grey-800 tw-text-grey-300", children: [showStepSeparator && jsxRuntime.jsx(SwapStepSeparator, {}), jsxRuntime.jsxs("div", { className: "tw-flex tw-w-full tw-items-center tw-text-royal-400", children: [jsxRuntime.jsx("span", { className: "tw-relative tw-flex tw-min-h-squid-l tw-items-center tw-justify-center tw-gap-squid-xxs tw-px-squid-xs", children: jsxRuntime.jsx(Chip, { className: "tw-w-squid-xl tw-bg-royal-400 tw-text-grey-900", icon: typeof chipContent === 'string' ? (jsxRuntime.jsx(CaptionText, { children: chipContent })) : (chipContent) }) }), jsxRuntime.jsx("div", { className: "tw-flex tw-min-h-squid-l tw-flex-1 tw-flex-wrap tw-items-center tw-justify-start tw-gap-squid-xxs tw-py-squid-xxs", children: descriptionBlocks.map(({ type, value }, index) => {
+const statusTextClassMap = {
+    executed: 'tw-text-grey-300',
+    progress: 'tw-text-royal-400',
+    pending: 'tw-text-grey-600',
+};
+const statusBgClassMap = {
+    executed: '!tw-bg-grey-300',
+    progress: '!tw-bg-royal-400',
+    pending: '!tw-bg-grey-600',
+};
+const separatorClassMap = {
+    executed: 'tw-text-grey-300',
+    progress: 'tw-text-grey-600',
+    pending: 'tw-text-grey-600',
+};
+function SwapStepItem({ descriptionBlocks, chipContent, showStepSeparator = false, link, status = 'pending', }) {
+    return (jsxRuntime.jsxs("li", { className: "tw-flex tw-w-list-item-large tw-flex-col tw-items-start tw-bg-grey-800 tw-text-grey-300", children: [showStepSeparator && (jsxRuntime.jsx("span", { className: separatorClassMap[status], children: jsxRuntime.jsx(SwapStepSeparator, {}) })), jsxRuntime.jsxs("a", { href: link, target: "_blank", className: cn('tw-group/swap-step-item tw-flex tw-w-full tw-items-center tw-rounded-squid-xs', !!link && 'hover:tw-bg-material-light-thin', statusTextClassMap[status]), children: [jsxRuntime.jsx("span", { className: "tw-relative tw-flex tw-min-h-squid-l tw-items-center tw-justify-center tw-gap-squid-xxs tw-px-squid-xs", children: jsxRuntime.jsx(Chip, { className: cn('tw-w-squid-xl', statusBgClassMap[status]), icon: typeof chipContent === 'string' ? (jsxRuntime.jsx(CaptionText, { children: chipContent })) : (chipContent) }) }), jsxRuntime.jsx("div", { className: "tw-flex tw-min-h-squid-l tw-flex-1 tw-flex-wrap tw-items-center tw-justify-start tw-gap-squid-xxs tw-py-squid-xxs", children: descriptionBlocks.map(({ type, value }, index) => {
                             if (type === 'string') {
                                 return (
                                 // Instead of displaying the string into a single <BodyText />
@@ -3261,23 +3276,34 @@ function SwapStepItem({ descriptionBlocks, chipContent, showStepSeparator = fals
                                 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, }) {
     return (jsxRuntime.jsx("div", { ref: dropdownRef, className: "tw-relative", children: jsxRuntime.jsx(Menu, { rounded: "sm", containerClassName: cn('tw-absolute tw-right-0 tw-z-20', className), contentClassName: "!tw-p-0", children: jsxRuntime.jsx("ul", { className: "tw-flex tw-w-[144px] tw-flex-col tw-gap-squid-xxs tw-overflow-auto tw-px-0 tw-py-squid-xxs", children: items.map((item) => (jsxRuntime.jsx(DropdownMenuItem, Object.assign({}, item), item.label))) }) }) }));
 }
 
-function Modal({ children, className, onBackdropClick }) {
+function Modal({ children, className, onBackdropClick, isOpen: _isOpen = true, }) {
+    const [isOpen, setIsOpen] = react.useState(_isOpen);
+    react.useEffect(() => {
+        if (_isOpen)
+            return setIsOpen(true);
+        const timeoutId = setTimeout(() => {
+            setIsOpen(false);
+        }, 300);
+        return () => {
+            clearTimeout(timeoutId);
+        };
+    }, [_isOpen]);
     return (
     // modal container (backdrop)
-    jsxRuntime.jsx("div", { onClick: onBackdropClick
+    isOpen && (jsxRuntime.jsx("div", { onClick: onBackdropClick
             ? (event) => {
                 if (event.target === event.currentTarget) {
                     onBackdropClick();
                 }
             }
-            : undefined, className: "tw-absolute tw-inset-0 tw-flex tw-items-start tw-justify-center tw-bg-material-dark-average tw-px-squid-xs tw-py-squid-xl tw-pb-squid-m tw-backdrop-blur/20 tw-backdrop-saturate-150", children: jsxRuntime.jsx("div", { className: cn('tw-relative tw-flex tw-h-[600px] tw-w-[400px] tw-flex-col tw-items-start tw-justify-end tw-gap-squid-xxs tw-self-end', className), children: children }) }));
+            : undefined, className: cn('tw-absolute tw-inset-0 tw-flex tw-items-start tw-justify-center tw-bg-material-dark-average tw-px-squid-xs tw-py-squid-xl tw-pb-squid-m tw-transition-all', _isOpen ? 'tw-animate-blur-in' : 'tw-animate-blur-out'), children: jsxRuntime.jsx("div", { className: cn('tw-relative tw-flex tw-max-h-[600px] tw-w-[400px] tw-flex-col tw-items-start tw-justify-end tw-gap-squid-xxs tw-self-end', className, _isOpen ? 'tw-animate-slide-to-top' : 'tw-animate-slide-to-bottom'), children: children }) })));
 }
 
 function NavigationBar({ title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, onBackButtonClick, label = '', onAddressButtonClick, isLoading, }) {
@@ -3317,11 +3343,20 @@ function SwapProgressViewHeader({ title, description, }) {
     return (jsxRuntime.jsxs("header", { className: "tw-flex tw-h-[95px] tw-w-full tw-flex-col tw-gap-squid-s tw-bg-grey-800 tw-px-squid-m tw-py-squid-s", children: [jsxRuntime.jsx(BodyText, { size: "large", className: "tw-h-squid-m !tw-leading-[20px] tw-text-grey-300", children: title }), jsxRuntime.jsx(CaptionText, { className: "tw-h-squid-l tw-text-grey-500", children: description })] }));
 }
 
-function SwapStepsCollapsed({ steps, currentStepIndex: _currentStepIndex, }) {
-    // handles if route component is mounted
+function SwapStepsCollapsed({ steps, currentStepIndex: _newStepIndex, }) {
+    const newStepIndex = Math.round(_newStepIndex);
+    const [currentStepIndex, setCurrentStepIndex] = react.useState(newStepIndex);
+    react.useEffect(() => {
+        const timeoutId = setTimeout(() => {
+            setCurrentStepIndex(Math.round(newStepIndex));
+        }, 400);
+        return () => {
+            clearTimeout(timeoutId);
+        };
+    }, [newStepIndex]);
+    // handles whether route component is mounted
     const [isRouteVisible, setIsRouteVisible] = react.useState(false);
-    const currentStepIndex = Math.round(_currentStepIndex);
-    // handles if route component is animating to show
+    // handles whether route component is animating to show
     const [isShowRouteAnimationRunning, setIsShowRouteAnimationRunning] = react.useState(false);
     const currentStep = steps[currentStepIndex];
     const isLastStep = currentStepIndex === steps.length - 1;
@@ -3339,16 +3374,24 @@ function SwapStepsCollapsed({ steps, currentStepIndex: _currentStepIndex, }) {
         };
     }, [isShowRouteAnimationRunning]);
     const collapseRouteSteps = () => setIsShowRouteAnimationRunning(false);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip, { tooltipContent: "View route", tooltipWidth: "max", containerClassName: "tw-w-full tw-rounded-full", childrenClassName: "tw-w-full tw-rounded-full", children: jsxRuntime.jsxs("button", { onClick: () => {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip, { tooltipContent: "View route", tooltipWidth: "max", containerClassName: "tw-w-full", childrenClassName: "tw-w-full tw-rounded-full", children: jsxRuntime.jsxs("button", { className: "tw-relative tw-max-h-button tw-overflow-hidden tw-rounded-full tw-border tw-border-material-light-thin tw-bg-grey-800", onClick: () => {
                         // mount route component and start animation
                         setIsRouteVisible(true);
                         setIsShowRouteAnimationRunning(true);
-                    }, className: "tw-relative tw-flex tw-min-h-button tw-w-full tw-items-center tw-overflow-hidden tw-rounded-squid-xxl tw-border tw-border-material-light-thin tw-bg-grey-800 tw-px-squid-xs tw-text-grey-300", children: [!isLastStep && (jsxRuntime.jsxs("span", { className: "tw-absolute -tw-top-1.5", children: [jsxRuntime.jsx("span", { className: "tw-absolute tw-top-1 tw-h-full tw-w-full -tw-translate-x-1/2 tw-bg-gradient-to-b tw-from-grey-800 tw-to-transparent" }), jsxRuntime.jsx(SwapStepSeparator, {})] })), currentStep && (jsxRuntime.jsx(SwapStepItem, { descriptionBlocks: currentStep.descriptionBlocks, chipContent: currentStep.chipContent })), !isFirstStep && (jsxRuntime.jsxs("span", { className: "tw-absolute -tw-bottom-1.5", children: [jsxRuntime.jsx("span", { className: "tw-absolute tw-bottom-1 tw-h-full tw-w-full -tw-translate-x-1/2 tw-bg-gradient-to-b tw-from-transparent tw-to-grey-800" }), jsxRuntime.jsx(SwapStepSeparator, {})] }))] }) }), isRouteVisible && (jsxRuntime.jsxs("div", { className: "tw-absolute tw-top-0 tw-z-20 tw-flex tw-h-[536px] tw-w-full tw-flex-col tw-justify-end tw-gap-squid-xxs", children: [jsxRuntime.jsx("div", { className: cn('tw-absolute tw-top-0 tw-h-[536px] tw-w-full tw-rounded-squid-l tw-bg-material-dark-thick tw-opacity-0 tw-backdrop-blur/10', isShowRouteAnimationRunning
+                    }, children: [newStepIndex > currentStepIndex && (jsxRuntime.jsx("div", { className: "tw-animate-translate-to-bottom tw-absolute -tw-top-full tw-left-0 tw-w-full", children: jsxRuntime.jsx(CurrentStep, { currentStep: steps[newStepIndex], isFirstStep: newStepIndex === 0, isLastStep: newStepIndex === steps.length - 1 }) })), jsxRuntime.jsx(CurrentStep, { className: cn(newStepIndex > currentStepIndex &&
+                                'tw-animate-translate-to-bottom', newStepIndex < currentStepIndex && 'tw-animate-translate-to-top'), currentStep: currentStep, isFirstStep: isFirstStep, isLastStep: isLastStep }), newStepIndex < currentStepIndex && (jsxRuntime.jsx("div", { className: "tw-animate-translate-to-top tw-absolute tw-left-0 tw-top-full tw-w-full", children: jsxRuntime.jsx(CurrentStep, { currentStep: steps[newStepIndex], isFirstStep: newStepIndex === 0, isLastStep: newStepIndex === steps.length - 1 }) })), jsxRuntime.jsx("span", { className: "tw-absolute tw-left-0 tw-top-0 tw-z-20 tw-h-[21px] tw-w-full tw-bg-gradient-to-b tw-from-grey-800" }), jsxRuntime.jsx("span", { className: "tw-absolute tw-bottom-0 tw-left-0 tw-z-20 tw-h-[21px] tw-w-full tw-bg-gradient-to-t tw-from-grey-800" })] }) }), isRouteVisible && (jsxRuntime.jsxs("div", { className: "tw-absolute tw-top-0 tw-z-20 tw-flex tw-h-[536px] tw-w-full tw-flex-col tw-justify-end tw-gap-squid-xxs", children: [jsxRuntime.jsx("div", { className: cn('tw-absolute tw-top-0 tw-h-[536px] tw-w-full tw-rounded-squid-l tw-bg-material-dark-thick tw-opacity-0 tw-backdrop-blur/10', isShowRouteAnimationRunning
                             ? 'tw-animate-fade-in'
                             : 'tw-animate-fade-out'), onClick: collapseRouteSteps }), jsxRuntime.jsxs("div", { className: cn('tw-flex tw-max-h-[536px] tw-w-full tw-flex-col tw-gap-squid-xxs tw-overflow-hidden tw-rounded-squid-l tw-border tw-border-material-light-thin tw-bg-grey-800 tw-backdrop-blur-2xl', isShowRouteAnimationRunning
                             ? 'tw-animate-slide-to-top'
-                            : 'tw-animate-slide-to-bottom'), children: [jsxRuntime.jsx("div", { className: "tw-flex tw-h-[52px] tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-xs", children: jsxRuntime.jsx("button", { onClick: collapseRouteSteps, className: "tw-flex tw-h-squid-xl tw-w-40 tw-items-center tw-justify-center tw-rounded-squid-xs tw-px-10 hover:tw-bg-material-light-thin", children: jsxRuntime.jsx("span", { className: "tw-flex tw-h-8 tw-w-8 tw-items-center tw-justify-center tw-text-grey-300", children: jsxRuntime.jsx(ChevronLargeDownIcon, { size: "32" }) }) }) }), jsxRuntime.jsx("ul", { className: "tw-flex tw-w-[400px] tw-flex-1 tw-flex-col-reverse tw-items-center tw-self-stretch tw-overflow-y-auto tw-overflow-x-hidden tw-px-squid-xs", children: steps.map((step, index) => (jsxRuntime.jsx(SwapStepItem, { descriptionBlocks: step.descriptionBlocks, chipContent: step.chipContent, showStepSeparator: !(index === steps.length - 1) }, index))) }), jsxRuntime.jsx("footer", { className: "tw-flex tw-items-end tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-s", children: jsxRuntime.jsx(Button, { size: "md", variant: "secondary", label: "View on Squidscan", className: "tw-w-full" }) })] })] }))] }));
-}
+                            : 'tw-animate-slide-to-bottom'), children: [jsxRuntime.jsx("div", { className: "tw-flex tw-h-[52px] tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-xs", children: jsxRuntime.jsx("button", { onClick: collapseRouteSteps, className: "tw-flex tw-h-squid-xl tw-w-40 tw-items-center tw-justify-center tw-rounded-squid-xs tw-px-10 hover:tw-bg-material-light-thin", children: jsxRuntime.jsx("span", { className: "tw-flex tw-h-8 tw-w-8 tw-items-center tw-justify-center tw-text-grey-300", children: jsxRuntime.jsx(ChevronLargeDownIcon, { size: "32" }) }) }) }), jsxRuntime.jsx("ul", { className: "tw-flex tw-w-[400px] tw-flex-1 tw-flex-col-reverse tw-items-center tw-self-stretch tw-overflow-y-auto tw-overflow-x-hidden tw-px-squid-xs", children: steps.map((step, index) => (jsxRuntime.jsx(SwapStepItem, { descriptionBlocks: step.descriptionBlocks, chipContent: step.chipContent, showStepSeparator: !(index === steps.length - 1), link: step.link, status: currentStepIndex < index
+                                        ? 'pending'
+                                        : currentStepIndex > index
+                                            ? 'executed'
+                                            : 'progress' }, index))) }), jsxRuntime.jsx("footer", { className: "tw-flex tw-items-end tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-s", children: jsxRuntime.jsx(Button, { size: "md", variant: "secondary", label: "View on Squidscan", className: "tw-w-full" }) })] })] }))] }));
+}
+const CurrentStep = ({ currentStep, isFirstStep, isLastStep, className, }) => {
+    return (jsxRuntime.jsxs("div", { className: cn('tw-relative tw-z-10 tw-flex tw-min-h-button tw-w-full tw-items-center tw-overflow-hidden tw-rounded-squid-xxl tw-px-squid-xs tw-text-grey-300', className), children: [!isLastStep && (jsxRuntime.jsx("span", { className: "tw-absolute -tw-top-1.5 tw-z-0", children: jsxRuntime.jsx(SwapStepSeparator, {}) })), currentStep && (jsxRuntime.jsx(SwapStepItem, { descriptionBlocks: currentStep.descriptionBlocks, chipContent: currentStep.chipContent, status: "progress" })), !isFirstStep && (jsxRuntime.jsx("span", { className: "tw-absolute -tw-bottom-1.5 tw-z-0", children: jsxRuntime.jsx(SwapStepSeparator, {}) }))] }));
+};
 
 function TokenPair({ firstToken, secondToken }) {
     return (jsxRuntime.jsxs("div", { className: "tw-relative tw-h-[42px] tw-w-[94px]", children: [jsxRuntime.jsxs("svg", { width: "94", height: "42", viewBox: "0 0 94 42", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "tw-absolute tw-z-10 tw-text-material-light-average", children: [jsxRuntime.jsx("g", { filter: "url(#filter0_b_457_51391)", children: jsxRuntime.jsx("path", { d: "M58.5042 35.4956L58.5043 35.4957C62.5071 39.4985 67.7544 41.5 73.0001 41.5C84.3219 41.5 93.5 32.3218 93.5 21C93.5 9.67822 84.3219 0.5 73.0001 0.5C67.7544 0.499977 62.5071 2.50151 58.5043 6.50431C57.9743 7.03437 57.4538 7.57007 56.9412 8.09756L56.9403 8.09852C55.2889 9.79812 53.7279 11.4027 52.097 12.5879C50.4734 13.7678 48.8225 14.5 47 14.5C45.1775 14.5 43.5266 13.7678 41.903 12.5879C40.2721 11.4027 38.7111 9.79812 37.0597 8.09852L37.0589 8.09766C36.5463 7.57013 36.0258 7.03441 35.4957 6.50431C31.4929 2.50151 26.2456 0.499977 20.9999 0.5C15.7543 0.500023 10.5071 2.50156 6.50431 6.50431C2.50153 10.5071 0.5 15.7544 0.5 21C0.5 26.2456 2.50153 31.4929 6.50431 35.4957C10.5071 39.4984 15.7543 41.5 20.9999 41.5C26.2456 41.5 31.4929 39.4985 35.4957 35.4957L35.4958 35.4956C36.023 34.968 36.5408 34.4349 37.0508 33.9099L37.0521 33.9086C38.7042 32.2077 40.2665 30.6013 41.8988 29.4147C43.5238 28.2333 45.1763 27.5 47 27.5C48.8237 27.5 50.4762 28.2333 52.1012 29.4147C53.7335 30.6013 55.2958 32.2077 56.9479 33.9086L56.9492 33.9099C57.4592 34.4349 57.977 34.968 58.5042 35.4956Z", stroke: "currentColor" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsxs("filter", { id: "filter0_b_457_51391", x: "-20", y: "-20", width: "134", height: "82", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB", children: [jsxRuntime.jsx("feFlood", { "flood-opacity": "0", result: "BackgroundImageFix" }), jsxRuntime.jsx("feGaussianBlur", { in: "BackgroundImageFix", stdDeviation: "10" }), jsxRuntime.jsx("feComposite", { in2: "SourceAlpha", operator: "in", result: "effect1_backgroundBlur_457_51391" }), jsxRuntime.jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_backgroundBlur_457_51391", result: "shape" })] }) })] }), jsxRuntime.jsxs("div", { className: "tw-token-pair-mask tw-z-10 tw-flex tw-h-full tw-w-full tw-items-center tw-justify-between", style: {

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

@@ -14,7 +14,10 @@ export declare function ChevronLargeRightIcon({ size, className, }: {
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function ChevronRightSmallIcon(): import("react/jsx-runtime").JSX.Element;
-export declare function ArrowLeftIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function ArrowLeftIcon({ className, size, }: {
+    className?: string;
+    size?: string;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function ArrowRightUpCircleIcon(): import("react/jsx-runtime").JSX.Element;
 export declare function ArrowOutOfBoxIcon(): import("react/jsx-runtime").JSX.Element;
 export declare function ChevronGrabberVerticalIcon({ size, className, }: {

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

@@ -3,6 +3,7 @@ interface ModalProps {
     children: React.ReactNode;
     className?: string;
     onBackdropClick?: () => void;
+    isOpen?: boolean;
 }
-export declare function Modal({ children, className, onBackdropClick }: ModalProps): import("react/jsx-runtime").JSX.Element;
+export declare function Modal({ children, className, onBackdropClick, isOpen: _isOpen, }: ModalProps): false | import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,5 +1,5 @@
 import { SwapStep } from '../../types/components';
-export declare function SwapStepsCollapsed({ steps, currentStepIndex: _currentStepIndex, }: {
+export declare function SwapStepsCollapsed({ steps, currentStepIndex: _newStepIndex, }: {
     steps: SwapStep[];
     currentStepIndex: number;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -1,9 +1,11 @@
 /// <reference types="react" />
-import { SwapStepDescriptionBlock } from '../../types/components';
+import { SwapStepDescriptionBlock, SwapStepItemStatus } from '../../types/components';
 interface SwapStepItemProps {
     descriptionBlocks: SwapStepDescriptionBlock[];
     chipContent: React.ReactNode;
     showStepSeparator?: boolean;
+    link?: string;
+    status?: SwapStepItemStatus;
 }
-export declare function SwapStepItem({ descriptionBlocks, chipContent, showStepSeparator, }: SwapStepItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function SwapStepItem({ descriptionBlocks, chipContent, showStepSeparator, link, status, }: SwapStepItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -3,8 +3,11 @@ import { SwapStepItem } from '../../components/lists/SwapStepItem';
 declare const meta: Meta<typeof SwapStepItem>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const TextOnlyDescription: Story;
+export declare const Executed: Story;
+export declare const Pending: Story;
+export declare const Progress: Story;
 export declare const CustomDescription: Story;
 export declare const ShowSeparator: Story;
 export declare const LongDescription: Story;
 export declare const LongDescriptionWithSeparator: Story;
+export declare const Link: Story;

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

@@ -12,6 +12,8 @@ export type SwapStepDescriptionBlock = {
 export type SwapStep = {
     descriptionBlocks: SwapStepDescriptionBlock[];
     chipContent: React.ReactNode;
+    link?: string;
 };
 export type DetailsToolbarState = 'full' | 'loading' | 'empty' | 'error';
 export type ThemeType = 'light' | 'dark';
+export type SwapStepItemStatus = 'executed' | 'progress' | 'pending';

package/dist/esm/index.js

@@ -2650,8 +2650,8 @@ function ChevronLargeRightIcon({ size = '16', className, }) {
 function ChevronRightSmallIcon() {
     return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: jsx("path", { d: "M6.66675 10.6667L8.86201 8.47141C9.12236 8.21106 9.12236 7.78896 8.86201 7.52861L6.66675 5.33334", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
-function ArrowLeftIcon() {
-    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: jsx("path", { d: "M10 6L4 12L10 18M5 12H20", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }) }));
+function ArrowLeftIcon({ className, size = '24', }) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: jsx("path", { d: "M10 6L4 12L10 18M5 12H20", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }) }));
 }
 function ChevronGrabberVerticalIcon({ size = '16', className, }) {
     return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 16 16", fill: "none", className: className, children: jsx("path", { d: "M5.33301 6.00002L7.52827 3.80476C7.78862 3.54441 8.21073 3.54441 8.47108 3.80476L10.6663 6.00002M5.33301 10L7.52827 12.1953C7.78862 12.4556 8.21073 12.4556 8.47108 12.1953L10.6663 10", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }) }));
@@ -3243,8 +3243,23 @@ function SwapStepSeparator() {
     return (jsx("span", { className: "tw-flex tw-h-squid-m tw-w-squid-xxl tw-items-center tw-justify-center tw-self-stretch tw-py-0.5", children: jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "4", height: "21", viewBox: "0 0 4 21", fill: "none", children: jsx("path", { d: "M2 2.5V18.5", stroke: "currentColor", "stroke-width": "4", "stroke-linecap": "round" }) }) }));
 }
 
-function SwapStepItem({ descriptionBlocks, chipContent, showStepSeparator = false, }) {
-    return (jsxs("li", { className: "tw-flex tw-w-list-item-large tw-flex-col tw-items-start tw-bg-grey-800 tw-text-grey-300", children: [showStepSeparator && jsx(SwapStepSeparator, {}), jsxs("div", { className: "tw-flex tw-w-full tw-items-center tw-text-royal-400", children: [jsx("span", { className: "tw-relative tw-flex tw-min-h-squid-l tw-items-center tw-justify-center tw-gap-squid-xxs tw-px-squid-xs", children: jsx(Chip, { className: "tw-w-squid-xl tw-bg-royal-400 tw-text-grey-900", icon: typeof chipContent === 'string' ? (jsx(CaptionText, { children: chipContent })) : (chipContent) }) }), jsx("div", { className: "tw-flex tw-min-h-squid-l tw-flex-1 tw-flex-wrap tw-items-center tw-justify-start tw-gap-squid-xxs tw-py-squid-xxs", children: descriptionBlocks.map(({ type, value }, index) => {
+const statusTextClassMap = {
+    executed: 'tw-text-grey-300',
+    progress: 'tw-text-royal-400',
+    pending: 'tw-text-grey-600',
+};
+const statusBgClassMap = {
+    executed: '!tw-bg-grey-300',
+    progress: '!tw-bg-royal-400',
+    pending: '!tw-bg-grey-600',
+};
+const separatorClassMap = {
+    executed: 'tw-text-grey-300',
+    progress: 'tw-text-grey-600',
+    pending: 'tw-text-grey-600',
+};
+function SwapStepItem({ descriptionBlocks, chipContent, showStepSeparator = false, link, status = 'pending', }) {
+    return (jsxs("li", { className: "tw-flex tw-w-list-item-large tw-flex-col tw-items-start tw-bg-grey-800 tw-text-grey-300", children: [showStepSeparator && (jsx("span", { className: separatorClassMap[status], children: jsx(SwapStepSeparator, {}) })), jsxs("a", { href: link, target: "_blank", className: cn('tw-group/swap-step-item tw-flex tw-w-full tw-items-center tw-rounded-squid-xs', !!link && 'hover:tw-bg-material-light-thin', statusTextClassMap[status]), children: [jsx("span", { className: "tw-relative tw-flex tw-min-h-squid-l tw-items-center tw-justify-center tw-gap-squid-xxs tw-px-squid-xs", children: jsx(Chip, { className: cn('tw-w-squid-xl', statusBgClassMap[status]), icon: typeof chipContent === 'string' ? (jsx(CaptionText, { children: chipContent })) : (chipContent) }) }), jsx("div", { className: "tw-flex tw-min-h-squid-l tw-flex-1 tw-flex-wrap tw-items-center tw-justify-start tw-gap-squid-xxs tw-py-squid-xxs", children: descriptionBlocks.map(({ type, value }, index) => {
                             if (type === 'string') {
                                 return (
                                 // Instead of displaying the string into a single <BodyText />
@@ -3259,23 +3274,34 @@ function SwapStepItem({ descriptionBlocks, chipContent, showStepSeparator = fals
                                 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, }) {
     return (jsx("div", { ref: dropdownRef, className: "tw-relative", children: jsx(Menu, { rounded: "sm", containerClassName: cn('tw-absolute tw-right-0 tw-z-20', className), contentClassName: "!tw-p-0", children: jsx("ul", { className: "tw-flex tw-w-[144px] tw-flex-col tw-gap-squid-xxs tw-overflow-auto tw-px-0 tw-py-squid-xxs", children: items.map((item) => (jsx(DropdownMenuItem, Object.assign({}, item), item.label))) }) }) }));
 }
 
-function Modal({ children, className, onBackdropClick }) {
+function Modal({ children, className, onBackdropClick, isOpen: _isOpen = true, }) {
+    const [isOpen, setIsOpen] = useState(_isOpen);
+    useEffect(() => {
+        if (_isOpen)
+            return setIsOpen(true);
+        const timeoutId = setTimeout(() => {
+            setIsOpen(false);
+        }, 300);
+        return () => {
+            clearTimeout(timeoutId);
+        };
+    }, [_isOpen]);
     return (
     // modal container (backdrop)
-    jsx("div", { onClick: onBackdropClick
+    isOpen && (jsx("div", { onClick: onBackdropClick
             ? (event) => {
                 if (event.target === event.currentTarget) {
                     onBackdropClick();
                 }
             }
-            : undefined, className: "tw-absolute tw-inset-0 tw-flex tw-items-start tw-justify-center tw-bg-material-dark-average tw-px-squid-xs tw-py-squid-xl tw-pb-squid-m tw-backdrop-blur/20 tw-backdrop-saturate-150", children: jsx("div", { className: cn('tw-relative tw-flex tw-h-[600px] tw-w-[400px] tw-flex-col tw-items-start tw-justify-end tw-gap-squid-xxs tw-self-end', className), children: children }) }));
+            : undefined, className: cn('tw-absolute tw-inset-0 tw-flex tw-items-start tw-justify-center tw-bg-material-dark-average tw-px-squid-xs tw-py-squid-xl tw-pb-squid-m tw-transition-all', _isOpen ? 'tw-animate-blur-in' : 'tw-animate-blur-out'), children: jsx("div", { className: cn('tw-relative tw-flex tw-max-h-[600px] tw-w-[400px] tw-flex-col tw-items-start tw-justify-end tw-gap-squid-xxs tw-self-end', className, _isOpen ? 'tw-animate-slide-to-top' : 'tw-animate-slide-to-bottom'), children: children }) })));
 }
 
 function NavigationBar({ title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, onBackButtonClick, label = '', onAddressButtonClick, isLoading, }) {
@@ -3315,11 +3341,20 @@ function SwapProgressViewHeader({ title, description, }) {
     return (jsxs("header", { className: "tw-flex tw-h-[95px] tw-w-full tw-flex-col tw-gap-squid-s tw-bg-grey-800 tw-px-squid-m tw-py-squid-s", children: [jsx(BodyText, { size: "large", className: "tw-h-squid-m !tw-leading-[20px] tw-text-grey-300", children: title }), jsx(CaptionText, { className: "tw-h-squid-l tw-text-grey-500", children: description })] }));
 }
 
-function SwapStepsCollapsed({ steps, currentStepIndex: _currentStepIndex, }) {
-    // handles if route component is mounted
+function SwapStepsCollapsed({ steps, currentStepIndex: _newStepIndex, }) {
+    const newStepIndex = Math.round(_newStepIndex);
+    const [currentStepIndex, setCurrentStepIndex] = useState(newStepIndex);
+    useEffect(() => {
+        const timeoutId = setTimeout(() => {
+            setCurrentStepIndex(Math.round(newStepIndex));
+        }, 400);
+        return () => {
+            clearTimeout(timeoutId);
+        };
+    }, [newStepIndex]);
+    // handles whether route component is mounted
     const [isRouteVisible, setIsRouteVisible] = useState(false);
-    const currentStepIndex = Math.round(_currentStepIndex);
-    // handles if route component is animating to show
+    // handles whether route component is animating to show
     const [isShowRouteAnimationRunning, setIsShowRouteAnimationRunning] = useState(false);
     const currentStep = steps[currentStepIndex];
     const isLastStep = currentStepIndex === steps.length - 1;
@@ -3337,16 +3372,24 @@ function SwapStepsCollapsed({ steps, currentStepIndex: _currentStepIndex, }) {
         };
     }, [isShowRouteAnimationRunning]);
     const collapseRouteSteps = () => setIsShowRouteAnimationRunning(false);
-    return (jsxs(Fragment, { children: [jsx(Tooltip, { tooltipContent: "View route", tooltipWidth: "max", containerClassName: "tw-w-full tw-rounded-full", childrenClassName: "tw-w-full tw-rounded-full", children: jsxs("button", { onClick: () => {
+    return (jsxs(Fragment, { children: [jsx(Tooltip, { tooltipContent: "View route", tooltipWidth: "max", containerClassName: "tw-w-full", childrenClassName: "tw-w-full tw-rounded-full", children: jsxs("button", { className: "tw-relative tw-max-h-button tw-overflow-hidden tw-rounded-full tw-border tw-border-material-light-thin tw-bg-grey-800", onClick: () => {
                         // mount route component and start animation
                         setIsRouteVisible(true);
                         setIsShowRouteAnimationRunning(true);
-                    }, className: "tw-relative tw-flex tw-min-h-button tw-w-full tw-items-center tw-overflow-hidden tw-rounded-squid-xxl tw-border tw-border-material-light-thin tw-bg-grey-800 tw-px-squid-xs tw-text-grey-300", children: [!isLastStep && (jsxs("span", { className: "tw-absolute -tw-top-1.5", children: [jsx("span", { className: "tw-absolute tw-top-1 tw-h-full tw-w-full -tw-translate-x-1/2 tw-bg-gradient-to-b tw-from-grey-800 tw-to-transparent" }), jsx(SwapStepSeparator, {})] })), currentStep && (jsx(SwapStepItem, { descriptionBlocks: currentStep.descriptionBlocks, chipContent: currentStep.chipContent })), !isFirstStep && (jsxs("span", { className: "tw-absolute -tw-bottom-1.5", children: [jsx("span", { className: "tw-absolute tw-bottom-1 tw-h-full tw-w-full -tw-translate-x-1/2 tw-bg-gradient-to-b tw-from-transparent tw-to-grey-800" }), jsx(SwapStepSeparator, {})] }))] }) }), isRouteVisible && (jsxs("div", { className: "tw-absolute tw-top-0 tw-z-20 tw-flex tw-h-[536px] tw-w-full tw-flex-col tw-justify-end tw-gap-squid-xxs", children: [jsx("div", { className: cn('tw-absolute tw-top-0 tw-h-[536px] tw-w-full tw-rounded-squid-l tw-bg-material-dark-thick tw-opacity-0 tw-backdrop-blur/10', isShowRouteAnimationRunning
+                    }, children: [newStepIndex > currentStepIndex && (jsx("div", { className: "tw-animate-translate-to-bottom tw-absolute -tw-top-full tw-left-0 tw-w-full", children: jsx(CurrentStep, { currentStep: steps[newStepIndex], isFirstStep: newStepIndex === 0, isLastStep: newStepIndex === steps.length - 1 }) })), jsx(CurrentStep, { className: cn(newStepIndex > currentStepIndex &&
+                                'tw-animate-translate-to-bottom', newStepIndex < currentStepIndex && 'tw-animate-translate-to-top'), currentStep: currentStep, isFirstStep: isFirstStep, isLastStep: isLastStep }), newStepIndex < currentStepIndex && (jsx("div", { className: "tw-animate-translate-to-top tw-absolute tw-left-0 tw-top-full tw-w-full", children: jsx(CurrentStep, { currentStep: steps[newStepIndex], isFirstStep: newStepIndex === 0, isLastStep: newStepIndex === steps.length - 1 }) })), jsx("span", { className: "tw-absolute tw-left-0 tw-top-0 tw-z-20 tw-h-[21px] tw-w-full tw-bg-gradient-to-b tw-from-grey-800" }), jsx("span", { className: "tw-absolute tw-bottom-0 tw-left-0 tw-z-20 tw-h-[21px] tw-w-full tw-bg-gradient-to-t tw-from-grey-800" })] }) }), isRouteVisible && (jsxs("div", { className: "tw-absolute tw-top-0 tw-z-20 tw-flex tw-h-[536px] tw-w-full tw-flex-col tw-justify-end tw-gap-squid-xxs", children: [jsx("div", { className: cn('tw-absolute tw-top-0 tw-h-[536px] tw-w-full tw-rounded-squid-l tw-bg-material-dark-thick tw-opacity-0 tw-backdrop-blur/10', isShowRouteAnimationRunning
                             ? 'tw-animate-fade-in'
                             : 'tw-animate-fade-out'), onClick: collapseRouteSteps }), jsxs("div", { className: cn('tw-flex tw-max-h-[536px] tw-w-full tw-flex-col tw-gap-squid-xxs tw-overflow-hidden tw-rounded-squid-l tw-border tw-border-material-light-thin tw-bg-grey-800 tw-backdrop-blur-2xl', isShowRouteAnimationRunning
                             ? 'tw-animate-slide-to-top'
-                            : 'tw-animate-slide-to-bottom'), children: [jsx("div", { className: "tw-flex tw-h-[52px] tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-xs", children: jsx("button", { onClick: collapseRouteSteps, className: "tw-flex tw-h-squid-xl tw-w-40 tw-items-center tw-justify-center tw-rounded-squid-xs tw-px-10 hover:tw-bg-material-light-thin", children: jsx("span", { className: "tw-flex tw-h-8 tw-w-8 tw-items-center tw-justify-center tw-text-grey-300", children: jsx(ChevronLargeDownIcon, { size: "32" }) }) }) }), jsx("ul", { className: "tw-flex tw-w-[400px] tw-flex-1 tw-flex-col-reverse tw-items-center tw-self-stretch tw-overflow-y-auto tw-overflow-x-hidden tw-px-squid-xs", children: steps.map((step, index) => (jsx(SwapStepItem, { descriptionBlocks: step.descriptionBlocks, chipContent: step.chipContent, showStepSeparator: !(index === steps.length - 1) }, index))) }), jsx("footer", { className: "tw-flex tw-items-end tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-s", children: jsx(Button, { size: "md", variant: "secondary", label: "View on Squidscan", className: "tw-w-full" }) })] })] }))] }));
-}
+                            : 'tw-animate-slide-to-bottom'), children: [jsx("div", { className: "tw-flex tw-h-[52px] tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-xs", children: jsx("button", { onClick: collapseRouteSteps, className: "tw-flex tw-h-squid-xl tw-w-40 tw-items-center tw-justify-center tw-rounded-squid-xs tw-px-10 hover:tw-bg-material-light-thin", children: jsx("span", { className: "tw-flex tw-h-8 tw-w-8 tw-items-center tw-justify-center tw-text-grey-300", children: jsx(ChevronLargeDownIcon, { size: "32" }) }) }) }), jsx("ul", { className: "tw-flex tw-w-[400px] tw-flex-1 tw-flex-col-reverse tw-items-center tw-self-stretch tw-overflow-y-auto tw-overflow-x-hidden tw-px-squid-xs", children: steps.map((step, index) => (jsx(SwapStepItem, { descriptionBlocks: step.descriptionBlocks, chipContent: step.chipContent, showStepSeparator: !(index === steps.length - 1), link: step.link, status: currentStepIndex < index
+                                        ? 'pending'
+                                        : currentStepIndex > index
+                                            ? 'executed'
+                                            : 'progress' }, index))) }), jsx("footer", { className: "tw-flex tw-items-end tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-s", children: jsx(Button, { size: "md", variant: "secondary", label: "View on Squidscan", className: "tw-w-full" }) })] })] }))] }));
+}
+const CurrentStep = ({ currentStep, isFirstStep, isLastStep, className, }) => {
+    return (jsxs("div", { className: cn('tw-relative tw-z-10 tw-flex tw-min-h-button tw-w-full tw-items-center tw-overflow-hidden tw-rounded-squid-xxl tw-px-squid-xs tw-text-grey-300', className), children: [!isLastStep && (jsx("span", { className: "tw-absolute -tw-top-1.5 tw-z-0", children: jsx(SwapStepSeparator, {}) })), currentStep && (jsx(SwapStepItem, { descriptionBlocks: currentStep.descriptionBlocks, chipContent: currentStep.chipContent, status: "progress" })), !isFirstStep && (jsx("span", { className: "tw-absolute -tw-bottom-1.5 tw-z-0", children: jsx(SwapStepSeparator, {}) }))] }));
+};
 
 function TokenPair({ firstToken, secondToken }) {
     return (jsxs("div", { className: "tw-relative tw-h-[42px] tw-w-[94px]", children: [jsxs("svg", { width: "94", height: "42", viewBox: "0 0 94 42", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "tw-absolute tw-z-10 tw-text-material-light-average", children: [jsx("g", { filter: "url(#filter0_b_457_51391)", children: jsx("path", { d: "M58.5042 35.4956L58.5043 35.4957C62.5071 39.4985 67.7544 41.5 73.0001 41.5C84.3219 41.5 93.5 32.3218 93.5 21C93.5 9.67822 84.3219 0.5 73.0001 0.5C67.7544 0.499977 62.5071 2.50151 58.5043 6.50431C57.9743 7.03437 57.4538 7.57007 56.9412 8.09756L56.9403 8.09852C55.2889 9.79812 53.7279 11.4027 52.097 12.5879C50.4734 13.7678 48.8225 14.5 47 14.5C45.1775 14.5 43.5266 13.7678 41.903 12.5879C40.2721 11.4027 38.7111 9.79812 37.0597 8.09852L37.0589 8.09766C36.5463 7.57013 36.0258 7.03441 35.4957 6.50431C31.4929 2.50151 26.2456 0.499977 20.9999 0.5C15.7543 0.500023 10.5071 2.50156 6.50431 6.50431C2.50153 10.5071 0.5 15.7544 0.5 21C0.5 26.2456 2.50153 31.4929 6.50431 35.4957C10.5071 39.4984 15.7543 41.5 20.9999 41.5C26.2456 41.5 31.4929 39.4985 35.4957 35.4957L35.4958 35.4956C36.023 34.968 36.5408 34.4349 37.0508 33.9099L37.0521 33.9086C38.7042 32.2077 40.2665 30.6013 41.8988 29.4147C43.5238 28.2333 45.1763 27.5 47 27.5C48.8237 27.5 50.4762 28.2333 52.1012 29.4147C53.7335 30.6013 55.2958 32.2077 56.9479 33.9086L56.9492 33.9099C57.4592 34.4349 57.977 34.968 58.5042 35.4956Z", stroke: "currentColor" }) }), jsx("defs", { children: jsxs("filter", { id: "filter0_b_457_51391", x: "-20", y: "-20", width: "134", height: "82", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB", children: [jsx("feFlood", { "flood-opacity": "0", result: "BackgroundImageFix" }), jsx("feGaussianBlur", { in: "BackgroundImageFix", stdDeviation: "10" }), jsx("feComposite", { in2: "SourceAlpha", operator: "in", result: "effect1_backgroundBlur_457_51391" }), jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_backgroundBlur_457_51391", result: "shape" })] }) })] }), jsxs("div", { className: "tw-token-pair-mask tw-z-10 tw-flex tw-h-full tw-w-full tw-items-center tw-justify-between", style: {

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

@@ -14,7 +14,10 @@ export declare function ChevronLargeRightIcon({ size, className, }: {
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function ChevronRightSmallIcon(): import("react/jsx-runtime").JSX.Element;
-export declare function ArrowLeftIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function ArrowLeftIcon({ className, size, }: {
+    className?: string;
+    size?: string;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function ArrowRightUpCircleIcon(): import("react/jsx-runtime").JSX.Element;
 export declare function ArrowOutOfBoxIcon(): import("react/jsx-runtime").JSX.Element;
 export declare function ChevronGrabberVerticalIcon({ size, className, }: {

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

@@ -3,6 +3,7 @@ interface ModalProps {
     children: React.ReactNode;
     className?: string;
     onBackdropClick?: () => void;
+    isOpen?: boolean;
 }
-export declare function Modal({ children, className, onBackdropClick }: ModalProps): import("react/jsx-runtime").JSX.Element;
+export declare function Modal({ children, className, onBackdropClick, isOpen: _isOpen, }: ModalProps): false | import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,5 +1,5 @@
 import { SwapStep } from '../../types/components';
-export declare function SwapStepsCollapsed({ steps, currentStepIndex: _currentStepIndex, }: {
+export declare function SwapStepsCollapsed({ steps, currentStepIndex: _newStepIndex, }: {
     steps: SwapStep[];
     currentStepIndex: number;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -1,9 +1,11 @@
 /// <reference types="react" />
-import { SwapStepDescriptionBlock } from '../../types/components';
+import { SwapStepDescriptionBlock, SwapStepItemStatus } from '../../types/components';
 interface SwapStepItemProps {
     descriptionBlocks: SwapStepDescriptionBlock[];
     chipContent: React.ReactNode;
     showStepSeparator?: boolean;
+    link?: string;
+    status?: SwapStepItemStatus;
 }
-export declare function SwapStepItem({ descriptionBlocks, chipContent, showStepSeparator, }: SwapStepItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function SwapStepItem({ descriptionBlocks, chipContent, showStepSeparator, link, status, }: SwapStepItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -3,8 +3,11 @@ import { SwapStepItem } from '../../components/lists/SwapStepItem';
 declare const meta: Meta<typeof SwapStepItem>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const TextOnlyDescription: Story;
+export declare const Executed: Story;
+export declare const Pending: Story;
+export declare const Progress: Story;
 export declare const CustomDescription: Story;
 export declare const ShowSeparator: Story;
 export declare const LongDescription: Story;
 export declare const LongDescriptionWithSeparator: Story;
+export declare const Link: Story;

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

@@ -12,6 +12,8 @@ export type SwapStepDescriptionBlock = {
 export type SwapStep = {
     descriptionBlocks: SwapStepDescriptionBlock[];
     chipContent: React.ReactNode;
+    link?: string;
 };
 export type DetailsToolbarState = 'full' | 'loading' | 'empty' | 'error';
 export type ThemeType = 'light' | 'dark';
+export type SwapStepItemStatus = 'executed' | 'progress' | 'pending';

package/dist/index.css

@@ -589,6 +589,10 @@ video {
   bottom: -0.375rem;
 }
 
+.-tw-bottom-20 {
+  bottom: -5rem;
+}
+
 .-tw-left-\[2px\] {
   left: -2px;
 }
@@ -629,6 +633,10 @@ video {
   top: -4px;
 }
 
+.-tw-top-full {
+  top: -100%;
+}
+
 .tw-bottom-0 {
   bottom: 0px;
 }
@@ -637,10 +645,6 @@ video {
   bottom: 0.125rem;
 }
 
-.tw-bottom-1 {
-  bottom: 0.25rem;
-}
-
 .tw-bottom-2 {
   bottom: 0.5rem;
 }
@@ -701,18 +705,22 @@ video {
   top: 0px;
 }
 
-.tw-top-1 {
-  top: 0.25rem;
-}
-
 .tw-top-7 {
   top: 1.75rem;
 }
 
+.tw-top-full {
+  top: 100%;
+}
+
 .tw-top-squid-xxs {
   top: 0.3125rem;
 }
 
+.tw-z-0 {
+  z-index: 0;
+}
+
 .tw-z-10 {
   z-index: 10;
 }
@@ -747,6 +755,11 @@ video {
   margin-right: 0.3125rem;
 }
 
+.tw-my-4 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
 .-tw-mb-1 {
   margin-bottom: -0.25rem;
 }
@@ -783,6 +796,10 @@ video {
   margin-right: 1px;
 }
 
+.tw-mr-squid-xxs {
+  margin-right: 0.3125rem;
+}
+
 .tw-mt-1 {
   margin-top: 0.25rem;
 }
@@ -859,6 +876,10 @@ video {
   height: 205px;
 }
 
+.tw-h-\[21px\] {
+  height: 21px;
+}
+
 .tw-h-\[22px\] {
   height: 22px;
 }
@@ -907,10 +928,6 @@ video {
   height: 55px;
 }
 
-.tw-h-\[600px\] {
-  height: 600px;
-}
-
 .tw-h-\[60px\] {
   height: 60px;
 }
@@ -987,6 +1004,10 @@ video {
   max-height: 570px;
 }
 
+.tw-max-h-\[600px\] {
+  max-height: 600px;
+}
+
 .tw-max-h-\[60px\] {
   max-height: 60px;
 }
@@ -999,6 +1020,10 @@ video {
   max-height: 80px;
 }
 
+.tw-max-h-button {
+  max-height: 3.75rem;
+}
+
 .tw-max-h-list-item-small {
   max-height: 2.5rem;
 }
@@ -1316,11 +1341,52 @@ 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-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-rotate-90 {
   --tw-rotate: 90deg;
   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));
 }
 
+@keyframes tw-blur-in {
+  0% {
+    -webkit-backdrop-filter: blur(0px) saturate(0%);
+            backdrop-filter: blur(0px) saturate(0%);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-backdrop-filter: blur(20px) saturate(150%);
+            backdrop-filter: blur(20px) saturate(150%);
+    opacity: 1;
+  }
+}
+
+.tw-animate-blur-in {
+  animation: tw-blur-in 0.2s ease-out both;
+}
+
+@keyframes tw-blur-out {
+  0% {
+    -webkit-backdrop-filter: blur(20px) saturate(150%);
+            backdrop-filter: blur(20px) saturate(150%);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-backdrop-filter: blur(0px) saturate(0%);
+            backdrop-filter: blur(0px) saturate(0%);
+    opacity: 0;
+  }
+}
+
+.tw-animate-blur-out {
+  animation: tw-blur-out 0.2s ease-out both;
+}
+
 @keyframes tw-fade-in {
   0% {
     opacity: 0;
@@ -1401,6 +1467,34 @@ video {
   animation: tw-slide-to-top 0.35s ease-out both;
 }
 
+@keyframes tw-translate-to-bottom {
+  0% {
+    transform: translateY(0);
+  }
+
+  100% {
+    transform: translateY(58.5px);
+  }
+}
+
+.tw-animate-translate-to-bottom {
+  animation: tw-translate-to-bottom 0.4s ease-in-out both;
+}
+
+@keyframes tw-translate-to-top {
+  0% {
+    transform: translateY(0);
+  }
+
+  100% {
+    transform: translateY(-58.5px);
+  }
+}
+
+.tw-animate-translate-to-top {
+  animation: tw-translate-to-top 0.4s ease-in-out both;
+}
+
 .tw-cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -1707,6 +1801,23 @@ video {
   border-top-color: var(--squid-theme-material-light-thin);
 }
 
+.\!tw-bg-grey-300 {
+  background-color: var(--squid-theme-grey-300) !important;
+}
+
+.\!tw-bg-grey-600 {
+  background-color: var(--squid-theme-grey-600) !important;
+}
+
+.\!tw-bg-royal-400 {
+  background-color: var(--squid-theme-royal-400) !important;
+}
+
+.tw-bg-blue-950 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(23 37 84 / var(--tw-bg-opacity));
+}
+
 .tw-bg-grey-100 {
   background-color: var(--squid-theme-grey-100);
 }
@@ -1785,6 +1896,10 @@ video {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
 
+.tw-bg-gradient-to-t {
+  background-image: linear-gradient(to top, var(--tw-gradient-stops));
+}
+
 .tw-bg-royal-dark {
   background-image: linear-gradient(180deg, #BF91F2 0%, #A577D8 100%);
 }
@@ -1805,16 +1920,6 @@ video {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.tw-from-transparent {
-  --tw-gradient-from: transparent var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
-.tw-to-grey-800 {
-  --tw-gradient-to: var(--squid-theme-grey-800) var(--tw-gradient-to-position);
-}
-
 .tw-to-transparent {
   --tw-gradient-to: transparent var(--tw-gradient-to-position);
 }
@@ -1839,6 +1944,10 @@ video {
   padding: 0.5rem;
 }
 
+.tw-p-4 {
+  padding: 1rem;
+}
+
 .tw-p-8 {
   padding: 2rem;
 }
@@ -2495,6 +2604,14 @@ li {
   color: var(--squid-theme-grey-600);
 }
 
+.disabled\:tw-opacity-60:disabled {
+  opacity: 0.6;
+}
+
+.tw-group\/swap-step-item:hover .group-hover\/swap-step-item\:tw-block {
+  display: block;
+}
+
 .tw-group\/list-item:hover .group-hover\/list-item\:tw-flex {
   display: flex;
 }

package/dist/index.d.ts

@@ -55,8 +55,10 @@ type SwapStepDescriptionBlock = {
 type SwapStep = {
     descriptionBlocks: SwapStepDescriptionBlock[];
     chipContent: React.ReactNode;
+    link?: string;
 };
 type ThemeType = 'light' | 'dark';
+type SwapStepItemStatus = 'executed' | 'progress' | 'pending';
 
 interface BoostButtonProps {
     boostMode: BoostMode;
@@ -251,8 +253,10 @@ interface SwapStepItemProps {
     descriptionBlocks: SwapStepDescriptionBlock[];
     chipContent: React.ReactNode;
     showStepSeparator?: boolean;
+    link?: string;
+    status?: SwapStepItemStatus;
 }
-declare function SwapStepItem({ descriptionBlocks, chipContent, showStepSeparator, }: SwapStepItemProps): react_jsx_runtime.JSX.Element;
+declare function SwapStepItem({ descriptionBlocks, chipContent, showStepSeparator, link, status, }: SwapStepItemProps): react_jsx_runtime.JSX.Element;
 
 interface DropdownMenuProps {
     dropdownRef?: React.RefObject<HTMLDivElement>;
@@ -279,8 +283,9 @@ interface ModalProps {
     children: React.ReactNode;
     className?: string;
     onBackdropClick?: () => void;
+    isOpen?: boolean;
 }
-declare function Modal({ children, className, onBackdropClick }: ModalProps): react_jsx_runtime.JSX.Element;
+declare function Modal({ children, className, onBackdropClick, isOpen: _isOpen, }: ModalProps): false | react_jsx_runtime.JSX.Element;
 
 interface NavigationBarProps {
     title?: string;
@@ -333,7 +338,7 @@ interface SwapProgressViewHeaderProps {
 }
 declare function SwapProgressViewHeader({ title, description, }: SwapProgressViewHeaderProps): react_jsx_runtime.JSX.Element;
 
-declare function SwapStepsCollapsed({ steps, currentStepIndex: _currentStepIndex, }: {
+declare function SwapStepsCollapsed({ steps, currentStepIndex: _newStepIndex, }: {
     steps: SwapStep[];
     currentStepIndex: number;
 }): react_jsx_runtime.JSX.Element;

package/package.json

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