@0xsquid/ui 3.1.0 → 3.2.0

package/dist/cjs/index.js

@@ -3738,7 +3738,7 @@ exports.ImageState = void 0;
     ImageState[ImageState["LOADED"] = 1] = "LOADED";
     ImageState[ImageState["ERROR"] = 2] = "ERROR";
 })(exports.ImageState || (exports.ImageState = {}));
-const sizeClassMap$1 = {
+const sizeClassMap$2 = {
     small: "tw-w-squid-s",
     medium: "tw-w-squid-m",
     large: "tw-w-squid-l",
@@ -3770,7 +3770,7 @@ const borderClassMap = {
 };
 function Image$1(_a) {
     var { src, size = "medium", className: propsClassName, placeholderImageUrl, border = "none", rounded = "xxs", shadow = false, children, containerProps } = _a, props = __rest$1(_a, ["src", "size", "className", "placeholderImageUrl", "border", "rounded", "shadow", "children", "containerProps"]);
-    const className = cn("tw-object-cover tw-aspect-square tw-relative tw-duration-300 tw-transition-[width,height] tw-max-w-full tw-bg-grey-500", sizeClassMap$1[size], propsClassName, roundedClassMap[rounded], shadow && boxShadowClassMap[size], borderClassMap[border]);
+    const className = cn("tw-object-cover tw-aspect-square tw-relative tw-duration-300 tw-transition-[width,height] tw-max-w-full tw-bg-grey-500", sizeClassMap$2[size], propsClassName, roundedClassMap[rounded], shadow && boxShadowClassMap[size], borderClassMap[border]);
     const [imageState, setImageState] = require$$0.useState(exports.ImageState.LOADED);
     return (jsxRuntime.jsxs("div", Object.assign({}, containerProps, { className: cn("tw-relative", containerProps === null || containerProps === void 0 ? void 0 : containerProps.className), children: [children != null ? (jsxRuntime.jsx("div", Object.assign({ className: cn(className, "tw-flex tw-items-center tw-justify-center") }, props, { children: children }))) : ((imageState !== exports.ImageState.LOADED || !src) &&
                 (placeholderImageUrl ? (jsxRuntime.jsx("img", Object.assign({ src: placeholderImageUrl, className: className }, props))) : (jsxRuntime.jsx("div", Object.assign({ className: className }, props))))), children == null && src && (jsxRuntime.jsx("img", Object.assign({}, props, { src: src, onError: () => {
@@ -3890,7 +3890,7 @@ function IconLabel({ src, children, rounded }) {
     return (jsxRuntime.jsxs("div", { className: "tw-inline-flex tw-items-center tw-gap-squid-xxs", children: [src && jsxRuntime.jsx(Image$1, { src: src, rounded: rounded, size: "medium" }), typeof children === "string" ? (jsxRuntime.jsx(CaptionText, { children: children })) : (children)] }));
 }
 
-const sizeClassMap = {
+const sizeClassMap$1 = {
     large: "tw-h-squid-xxl tw-w-squid-xxl tw-rounded-squid-s",
     small: "tw-h-squid-xl tw-w-squid-xl tw-rounded-squid-xs",
 };
@@ -3907,7 +3907,7 @@ const customImageStylesMap = {
     },
 };
 function ImageGroup({ imageUrls, badge, size = "large", }) {
-    return (jsxRuntime.jsxs("div", { className: cn("tw-relative tw-flex tw-flex-shrink-0 tw-flex-wrap tw-content-center tw-items-center tw-justify-center tw-gap-0.5 tw-border tw-border-solid tw-border-material-light-thin tw-bg-grey-700", sizeClassMap[size]), children: [imageUrls.map((url) => (jsxRuntime.jsx(Image$1, { src: url, size: "medium", rounded: "xxs", style: customImageStylesMap[size] }, url))), badge != null && size !== "small" && (jsxRuntime.jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px]", children: jsxRuntime.jsx(Image$1, Object.assign({}, badge, { border: "outline-lg", size: "medium" })) }))] }));
+    return (jsxRuntime.jsxs("div", { className: cn("tw-relative tw-flex tw-flex-shrink-0 tw-flex-wrap tw-content-center tw-items-center tw-justify-center tw-gap-0.5 tw-border tw-border-solid tw-border-material-light-thin tw-bg-grey-700", sizeClassMap$1[size]), children: [imageUrls.map((url) => (jsxRuntime.jsx(Image$1, { src: url, size: "medium", rounded: "xxs", style: customImageStylesMap[size] }, url))), badge != null && size !== "small" && (jsxRuntime.jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px]", children: jsxRuntime.jsx(Image$1, Object.assign({}, badge, { border: "outline-lg", size: "medium" })) }))] }));
 }
 
 function Approve() {
@@ -3965,6 +3965,9 @@ function ArrowOutOfBoxIcon() {
 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", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
+function SquareArrowTopRightIcon({ className, size = "24", strokeWidth = "2", }) {
+    return (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M9 6H8.8C7.11984 6 6.27976 6 5.63803 6.32698C5.07354 6.6146 4.6146 7.07354 4.32698 7.63803C4 8.27976 4 9.11984 4 10.8V15.2C4 16.8802 4 17.7202 4.32698 18.362C4.6146 18.9265 5.07354 19.3854 5.63803 19.673C6.27976 20 7.11984 20 8.8 20H13.2C14.8802 20 15.7202 20 16.362 19.673C16.9265 19.3854 17.3854 18.9265 17.673 18.362C18 17.7202 18 16.8802 18 15.2V15M14 4H20M20 4V10M20 4L11 13", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
 function SquareArrowTopRight2Icon({ className, size = "16", strokeWidth = "2", }) {
     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: "M6.00033 2.66663H4.80033C4.05359 2.66663 3.68022 2.66663 3.395 2.81195C3.14412 2.93978 2.94015 3.14376 2.81232 3.39464C2.66699 3.67985 2.66699 4.05322 2.66699 4.79996L2.66699 11.2C2.66699 11.9467 2.66699 12.3201 2.81232 12.6053C2.94015 12.8562 3.14412 13.0601 3.395 13.188C3.68022 13.3333 4.05359 13.3333 4.80033 13.3333L11.2003 13.3333C11.9471 13.3333 12.3204 13.3333 12.6056 13.188C12.8565 13.0601 13.0605 12.8562 13.1883 12.6053C13.3337 12.3201 13.3337 11.9467 13.3337 11.2V9.99996M9.33366 2.66663L13.3337 2.66663M13.3337 2.66663V6.66663M13.3337 2.66663L7.33366 8.66663", stroke: "currentColor", strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", vectorEffect: "non-scaling-stroke" }) }));
 }
@@ -4613,10 +4616,21 @@ function UsdAmount({ usdAmount }) {
     return (jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-text-grey-500", children: [jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "$" }), jsxRuntime.jsx(CaptionText, { children: usdAmount.toString() })] }));
 }
 
-function HashLink({ showTx = false, hash, showCopyButton = false, url, children, className, formattedHash, copyIconSize = "16", }) {
-    return (jsxRuntime.jsxs("div", { className: cn("tw-flex tw-items-center", className), children: [showTx && jsxRuntime.jsx("span", { className: "tw-mr-squid-xs tw-text-grey-700", children: "TX" }), children !== null && children !== void 0 ? children : formattedHash, url && (jsxRuntime.jsx("a", { href: url, target: "_blank", className: "tw-rounded-squid-s tw-px-squid-xxs hover:tw-bg-material-light-thin", rel: "noreferrer", children: jsxRuntime.jsx(SquareArrowTopRight2Icon, { strokeWidth: "1.5", className: "tw-h-[1.2em] tw-w-[1.2em] tw-text-royal-500" }) })), showCopyButton && (jsxRuntime.jsx("span", { onClick: () => {
-                    navigator.clipboard.writeText(hash).catch(() => { });
-                }, className: "tw-cursor-pointer tw-rounded-squid-s tw-px-squid-xxs hover:tw-bg-material-light-thin", children: jsxRuntime.jsx(CopyOutlinedIcon, { size: copyIconSize, strokeWidth: "2.5", className: "tw-text-royal-500" }) }))] }));
+const CopyButton = (_a) => {
+    var { copyText, className, size } = _a, props = __rest$1(_a, ["copyText", "className", "size"]);
+    const [copied, setCopied] = require$$0.useState(false);
+    const handleCopy = () => {
+        navigator.clipboard.writeText(copyText).catch(() => { });
+        setCopied(true);
+        setTimeout(() => {
+            setCopied(false);
+        }, 1500);
+    };
+    return (jsxRuntime.jsxs("button", Object.assign({ type: "button", onClick: handleCopy, className: cn("tw-relative tw-cursor-pointer tw-rounded-squid-xs tw-p-0.5 tw-text-royal-500 hover:tw-bg-material-light-thin", className) }, props, { children: [jsxRuntime.jsx(CopyOutlinedIcon, { strokeWidth: "2", size: size === "small" ? "1rem" : "1.5rem", className: cn("tw-text-royal-500", copied ? "tw-invisible" : "tw-visible") }), jsxRuntime.jsx("span", { className: cn("tw-absolute tw-left-1/2 tw-top-1/2 -tw-translate-x-1/2 -tw-translate-y-1/2", copied ? "tw-visible" : "tw-invisible"), children: jsxRuntime.jsx(Checkmark1Icon, { size: size === "small" ? "0.75rem" : "1.35rem" }) })] })));
+};
+
+function HashLink({ showTx = false, hash, showCopyButton = false, url, children, className, formattedHash, size, }) {
+    return (jsxRuntime.jsxs("div", { className: cn("tw-flex tw-items-center tw-gap-1", className), children: [showTx && jsxRuntime.jsx("span", { className: "tw-mr-1 tw-text-grey-700", children: "TX" }), children !== null && children !== void 0 ? children : formattedHash, url && (jsxRuntime.jsx("a", { href: url, target: "_blank", className: "tw-ml-0.5 tw-rounded-squid-xs tw-p-0.5 tw-text-royal-500 hover:tw-bg-material-light-thin", rel: "noreferrer", children: jsxRuntime.jsx(SquareArrowTopRightIcon, { size: size === "small" ? "16" : "24" }) })), showCopyButton && jsxRuntime.jsx(CopyButton, { copyText: hash, size: size })] }));
 }
 
 function WalletLink({ imageURI, address }) {
@@ -38233,8 +38247,14 @@ function NavigationBar(_a) {
                     : "tw-flex"), children: jsxRuntime.jsx(HeadingText, { size: "small", children: title }) })) : null] })));
 }
 
-function PipeSeparator(props) {
-    return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn("tw-h-[0.8em] tw-w-[2px] tw-rounded-full tw-bg-[currentColor]", props.className) })));
+const sizeClassMap = {
+    default: "tw-h-[0.8em]",
+    small: "tw-h-2.5",
+    large: "tw-h-5",
+};
+function PipeSeparator(_a) {
+    var { className, size = "default" } = _a, props = __rest$1(_a, ["className", "size"]);
+    return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn("tw-w-[2px] tw-rounded-full tw-bg-[currentColor]", sizeClassMap[size], className) })));
 }
 
 function ProductCard({ children }) {
@@ -39007,7 +39027,7 @@ function PropertyListItem(_a) {
     const Text = variant === "small" ? CaptionText : SmallBodyText;
     const isCollapsible = !!collapsibleContent;
     const ContentWrapperTag = isCollapsible ? "button" : "div";
-    return (jsxRuntime.jsx("li", Object.assign({}, props, { className: cn("tw-flex tw-w-full tw-gap-squid-xs tw-rounded-squid-xs tw-text-grey-300", showGradientBg && "tw-bg-gradient-to-r tw-from-grey-800", addExtraPadding && containerPaddingClassNameMap[variant], className), children: jsxRuntime.jsxs(ContentWrapperTag, { onClick: isCollapsible ? handleToggleCollapsed : undefined, className: "tw-w-full tw-rounded-squid-xs", children: [jsxRuntime.jsxs("div", { className: cn("tw-flex tw-h-squid-l tw-w-full tw-items-center tw-justify-between tw-gap-squid-xs", childrenVariantClassNameMap[variant]), children: [jsxRuntime.jsx("div", { className: cn("tw-w-6 tw-text-grey-500", iconClassName), children: icon }), jsxRuntime.jsxs(Text, { className: cn("tw-flex tw-min-w-fit tw-flex-1 tw-gap-squid-xxs tw-text-grey-500", labelClassName), children: [jsxRuntime.jsx(TextSkeleton, { isLoading: isLoading, showGradient: false, children: label }), !!tooltip && (jsxRuntime.jsx(Tooltip, Object.assign({}, tooltip, { children: jsxRuntime.jsx(HelpIcon, { className: "tw-cursor-help tw-text-grey-600 hover:tw-text-grey-500" }) })))] }), jsxRuntime.jsx(Text, { truncate: variant === "small" || undefined, className: cn("tw-flex tw-text-grey-300", detailClassName), children: jsxRuntime.jsx(TextSkeleton, { isLoading: isLoading, showGradient: false, children: detail }) }), isCollapsible && (jsxRuntime.jsx(ChevronLargeRightIcon, { className: cn("tw-text-grey-600 tw-duration-generic", !isCollapsed && "tw-rotate-90"), size: "16" }))] }), isCollapsible && (jsxRuntime.jsx(Collapse, { collapsed: isCollapsed, children: collapsibleContent }))] }) })));
+    return (jsxRuntime.jsx("li", Object.assign({}, props, { className: cn("tw-flex tw-w-full tw-gap-squid-xs tw-rounded-squid-xs tw-text-grey-300", showGradientBg && "tw-squid-property-row-bg", addExtraPadding && containerPaddingClassNameMap[variant], className), children: jsxRuntime.jsxs(ContentWrapperTag, { onClick: isCollapsible ? handleToggleCollapsed : undefined, className: "tw-w-full tw-rounded-squid-xs", children: [jsxRuntime.jsxs("div", { className: cn("tw-flex tw-h-squid-l tw-w-full tw-items-center tw-justify-between tw-gap-squid-xs", childrenVariantClassNameMap[variant]), children: [jsxRuntime.jsx("div", { className: cn("tw-w-6 tw-text-grey-500", iconClassName), children: icon }), jsxRuntime.jsxs(Text, { className: cn("tw-flex tw-min-w-fit tw-flex-1 tw-gap-squid-xxs tw-text-grey-500", labelClassName), children: [jsxRuntime.jsx(TextSkeleton, { isLoading: isLoading, showGradient: false, children: label }), !!tooltip && (jsxRuntime.jsx(Tooltip, Object.assign({}, tooltip, { children: jsxRuntime.jsx(HelpIcon, { className: "tw-cursor-help tw-text-grey-600 hover:tw-text-grey-500" }) })))] }), jsxRuntime.jsx(Text, { truncate: variant === "small" || undefined, className: cn("tw-flex tw-text-grey-300", detailClassName), children: jsxRuntime.jsx(TextSkeleton, { isLoading: isLoading, showGradient: false, children: detail }) }), isCollapsible && (jsxRuntime.jsx(ChevronLargeRightIcon, { className: cn("tw-text-grey-600 tw-duration-generic", !isCollapsed && "tw-rotate-90"), size: "16" }))] }), isCollapsible && (jsxRuntime.jsx(Collapse, { collapsed: isCollapsed, children: collapsibleContent }))] }) })));
 }
 
 function RouteStep({ imageUrl, descriptionBlocks, subtitle, showStepSeparator = false, }) {
@@ -39192,10 +39212,10 @@ function TokenGroups({ groups, className, onGroupChildClick, variant = "large",
 }
 
 function ActionLayout({ lineCap = jsxRuntime.jsx(Timeline.CapTop, {}), status = "executed", showTimeline = true, showBody = true, nextStatus, statusIcon, description, title, icon, children, }) {
-    return (jsxRuntime.jsxs(ActionWrapper, { status: status, children: [jsxRuntime.jsx(ActionLineOutRow, { status: nextStatus }), jsxRuntime.jsx(ActionStatusRow, { status: status, icon: statusIcon, children: description }), title && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ActionRow, { children: jsxRuntime.jsxs(Timeline, { className: cn("tw-h-squid-xs", statusTextClassMap[status]), children: [jsxRuntime.jsx(Timeline.CapTop, {}), jsxRuntime.jsx(Timeline.Straight, {}), jsxRuntime.jsx(Timeline.CapBottom, {})] }) }), jsxRuntime.jsxs(ActionRow, { children: [jsxRuntime.jsx("div", { className: "tw-flex tw-items-center tw-justify-center", children: icon }), jsxRuntime.jsx(BodyText, { size: "large", className: cn("tw-flex tw-min-h-squid-l tw-items-center !tw-leading-[1] tw-text-grey-300 tw-transition-opacity tw-duration-200", !showBody && "tw-opacity-0"), children: title })] })] })), jsxRuntime.jsxs(ActionRow, { children: [jsxRuntime.jsxs(Timeline, { className: showTimeline ? statusTextClassMap[status] : "!tw-text-[transparent]", children: [lineCap, jsxRuntime.jsx(Timeline.Straight, {})] }), jsxRuntime.jsx("div", { className: cn("tw-flex tw-flex-col tw-gap-squid-xs tw-pb-squid-xs tw-text-grey-500 tw-transition-opacity tw-duration-200", !showBody && "tw-opacity-0", title && "tw-pt-squid-xxs"), children: children })] })] }));
+    return (jsxRuntime.jsxs(ActionWrapper, { status: status, children: [jsxRuntime.jsx(ActionLineOutRow, { status: nextStatus }), jsxRuntime.jsx(ActionStatusRow, { status: status, icon: statusIcon, children: jsxRuntime.jsx(BodyText, { size: "small", tight: true, className: "tw-block tw-w-full tw-font-medium tw-text-grey-300", children: description }) }), title && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ActionRow, { children: jsxRuntime.jsxs(Timeline, { className: cn("tw-h-squid-xs", statusTextClassMap[status]), children: [jsxRuntime.jsx(Timeline.CapTop, {}), jsxRuntime.jsx(Timeline.Straight, {}), jsxRuntime.jsx(Timeline.CapBottom, {})] }) }), jsxRuntime.jsxs(ActionRow, { children: [jsxRuntime.jsx("div", { className: "tw-flex tw-items-center tw-justify-center", children: icon }), jsxRuntime.jsx(BodyText, { size: "large", className: cn("tw-flex tw-min-h-squid-l tw-items-center !tw-leading-[1] tw-text-grey-300 tw-transition-opacity tw-duration-200", !showBody && "tw-opacity-0"), children: title })] })] })), jsxRuntime.jsxs(ActionRow, { children: [jsxRuntime.jsxs(Timeline, { className: showTimeline ? statusTextClassMap[status] : "!tw-text-[transparent]", children: [lineCap, jsxRuntime.jsx(Timeline.Straight, {})] }), jsxRuntime.jsx("div", { className: cn("tw-flex tw-flex-col tw-gap-squid-xs tw-overflow-hidden tw-pb-squid-xs tw-text-grey-500 tw-transition-all tw-duration-200", !showBody ? "tw-max-h-0 !tw-pt-0 tw-opacity-0" : "tw-max-h-20", title && "tw-pt-squid-xxs"), children: children })] })] }));
 }
 function ActionProperties({ timestamp, hash, url, }) {
-    return (jsxRuntime.jsxs(CaptionText, { className: "tw-flex tw-items-center tw-gap-squid-xs", children: [timestamp && jsxRuntime.jsx(Timestamp, { time: timestamp }), timestamp && hash && jsxRuntime.jsx(PipeSeparator, { className: "tw-text-grey-700" }), hash && jsxRuntime.jsx(HashLink, { hash: hash, url: url, showTx: true })] }));
+    return (jsxRuntime.jsxs(CaptionText, { className: "tw-flex tw-items-center tw-gap-squid-xs", children: [timestamp && jsxRuntime.jsx(Timestamp, { time: timestamp }), timestamp && hash && (jsxRuntime.jsx(PipeSeparator, { size: "small", className: "tw-text-grey-700" })), hash && (jsxRuntime.jsx(HashLink, { size: "small", hash: hash, url: url, formattedHash: formatHash(hash), showTx: true, showCopyButton: true }))] }));
 }
 function renderStatusIcon(status, defaultIcon) {
     switch (status) {
@@ -39214,7 +39234,7 @@ function renderStatusIcon(status, defaultIcon) {
     }
 }
 const ActionLineOutRow = ({ status }) => (jsxRuntime.jsx(ActionRow, { children: jsxRuntime.jsxs(Timeline, { className: cn("tw-h-squid-xs", status ? statusTextClassMap[status] : "!tw-text-[transparent]"), children: [jsxRuntime.jsx(Timeline.Straight, {}), jsxRuntime.jsx(Timeline.CapBottom, {})] }) }));
-const ActionStatusRow = ({ children, status, icon, }) => (jsxRuntime.jsxs(ActionRow, { children: [jsxRuntime.jsx("div", { className: "tw-flex tw-items-center tw-justify-center", children: renderStatusIcon(status, icon) }), jsxRuntime.jsx("div", { className: "tw-flex tw-items-center", children: jsxRuntime.jsx(BodyText, { size: "small", tight: true, className: "tw-block tw-w-full tw-text-grey-300", children: children }) })] }));
+const ActionStatusRow = ({ children, status, icon, }) => (jsxRuntime.jsxs(ActionRow, { children: [jsxRuntime.jsx("div", { className: "tw-flex tw-items-center tw-justify-center", children: renderStatusIcon(status, icon) }), jsxRuntime.jsx("div", { className: "tw-flex tw-items-center", children: jsxRuntime.jsx("span", { className: "tw-block tw-w-full tw-text-grey-300", children: children }) })] }));
 function ActionRow(_a) {
     var { className } = _a, props = __rest$1(_a, ["className"]);
     return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn("tw-grid tw-grid-cols-[40px,1fr,60px] tw-gap-squid-xs tw-pl-squid-m", className) })));
@@ -39238,15 +39258,13 @@ function FeesAction({ status, nextStatus, showTimeline = false, total, lines, })
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FeesTotal, { status: status, nextStatus: nextStatus, total: total, showTimeline: lines !== undefined || showTimeline }), lines && (jsxRuntime.jsx(FeesLines, { status: status, lines: lines, showTimeline: showTimeline }))] }));
 }
 function FeesTotal({ status, nextStatus, total, showTimeline, collapsed, }) {
-    return (jsxRuntime.jsxs(ActionWrapper, { status: status, children: [jsxRuntime.jsx(ActionLineOutRow, { status: nextStatus }), jsxRuntime.jsx(ActionStatusRow, { status: status, icon: jsxRuntime.jsx(TagIconFilled, {}), children: jsxRuntime.jsx(FeesRow, Object.assign({ collapsed: collapsed }, total)) }), jsxRuntime.jsx(ActionRow, { children: jsxRuntime.jsxs(Timeline, { className: cn("tw-h-squid-xs", showTimeline ? statusTextClassMap[status] : "tw-text-transparent"), children: [jsxRuntime.jsx(Timeline.CapTop, {}), jsxRuntime.jsx(Timeline.Straight, {})] }) })] }));
+    return (jsxRuntime.jsxs(ActionWrapper, { status: status, children: [jsxRuntime.jsx(ActionLineOutRow, { status: nextStatus }), jsxRuntime.jsx(ActionStatusRow, { status: status, icon: jsxRuntime.jsx(TagIconFilled, {}), children: jsxRuntime.jsx(FeesRow, Object.assign({ className: "tw-text-grey-300", collapsed: collapsed }, total)) }), jsxRuntime.jsx(ActionRow, { children: jsxRuntime.jsxs(Timeline, { className: cn("tw-h-squid-xs", showTimeline ? statusTextClassMap[status] : "tw-text-transparent"), children: [jsxRuntime.jsx(Timeline.CapTop, {}), jsxRuntime.jsx(Timeline.Straight, {})] }) })] }));
 }
-function FeesLines({ status, lines, showTimeline = false, }) {
-    return (jsxRuntime.jsxs(ActionWrapper, { status: status, children: [lines && (jsxRuntime.jsx("div", { children: lines.map((line, index) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [index > 0 && (jsxRuntime.jsx(ActionRow, { children: jsxRuntime.jsxs(Timeline, { className: cn("tw-h-squid-xs", statusTextClassMap[status]), children: [jsxRuntime.jsx(Timeline.CapTop, {}), jsxRuntime.jsx(Timeline.Straight, {})] }) })), jsxRuntime.jsxs(ActionRow, { children: [jsxRuntime.jsxs(Timeline, { className: statusTextClassMap[status], children: [jsxRuntime.jsx(Timeline.Straight, {}), jsxRuntime.jsx(Timeline.ArrowRight, {})] }), jsxRuntime.jsx("div", { className: "tw-relative tw-top-[2px] tw-flex tw-items-end", children: jsxRuntime.jsx(FeesRow, Object.assign({}, line)) })] })] }, index))) })), jsxRuntime.jsx(ActionRow, { children: jsxRuntime.jsxs(Timeline, { className: cn("tw-h-squid-xs", showTimeline
-                        ? statusTextClassMap[status]
-                        : "!tw-text-[transparent]"), children: [jsxRuntime.jsx(Timeline.CapTop, {}), jsxRuntime.jsx(Timeline.Straight, {})] }) })] }));
+function FeesLines({ status, lines }) {
+    return (jsxRuntime.jsx(ActionWrapper, { status: status, children: lines && (jsxRuntime.jsx("div", { children: lines.map((line, index) => (jsxRuntime.jsxs(ActionRow, { children: [jsxRuntime.jsx("div", { className: "tw-flex tw-h-10", children: jsxRuntime.jsxs(Timeline, { className: statusTextClassMap[status], children: [jsxRuntime.jsx(Timeline.Straight, {}), jsxRuntime.jsx(Timeline.ArrowRight, {}), jsxRuntime.jsx(Timeline.Straight, { className: index < lines.length - 1 ? "visible" : "tw-invisible" })] }) }), jsxRuntime.jsx("div", { className: "tw-flex tw-items-center", children: jsxRuntime.jsx(FeesRow, Object.assign({ className: "tw-text-grey-400" }, line)) })] }, index))) })) }));
 }
-function FeesRow({ label, usd, amount, symbol, collapsed = false, }) {
-    return (jsxRuntime.jsxs("div", { className: "tw-flex tw-w-full tw-gap-squid-xs", children: [jsxRuntime.jsx(SizeTransition, { disableInitialAnimation: true, children: jsxRuntime.jsx(BodyText, { size: "small", tight: true, className: cn("tw-block tw-truncate tw-text-grey-300", !collapsed && "tw-w-[100px]"), children: label }) }), jsxRuntime.jsx("div", { className: "tw-flex tw-items-center", children: jsxRuntime.jsx(PipeSeparator, { className: "tw-text-grey-700" }) }), jsxRuntime.jsxs(BodyText, { size: "small", tight: true, className: "tw-flex-grow tw-text-grey-300", children: ["$", usd] }), jsxRuntime.jsxs(CaptionText, { className: "tw-text-right tw-text-grey-500", children: [amount, " ", symbol] })] }));
+function FeesRow({ label, usd, amount, symbol, collapsed = false, className, }) {
+    return (jsxRuntime.jsxs("div", { className: cn("tw-flex tw-h-5 tw-w-full tw-items-center tw-gap-squid-xs", className), children: [jsxRuntime.jsx(SizeTransition, { disableInitialAnimation: true, children: jsxRuntime.jsx(BodyText, { size: "small", tight: true, className: cn("tw-block tw-truncate", !collapsed && "tw-w-[100px]"), children: label }) }), jsxRuntime.jsx("div", { className: "tw-flex tw-items-center", children: jsxRuntime.jsx(PipeSeparator, { size: "large", className: "tw-text-grey-700" }) }), jsxRuntime.jsxs(BodyText, { size: "small", tight: true, className: "tw-flex-grow tw-text-grey-300", children: ["$", usd] }), jsxRuntime.jsxs(CaptionText, { className: "tw-text-right tw-text-grey-500", children: [amount, " ", symbol] })] }));
 }
 
 function IncompleteAction({ status, nextStatus, message, buttons, }) {
@@ -39298,7 +39316,7 @@ function StartAction({ status, nextStatus, showTimeline = false, showBody = fals
 function SuccessAction({ nextStatus, status, description = status === "error"
     ? "Transaction failed"
     : "Transaction successful", showTimeline, showBody, timestamp, hash, url, }) {
-    return (jsxRuntime.jsx(ActionLayout, { description: description, status: status, nextStatus: nextStatus, showTimeline: showTimeline, showBody: showBody, children: (timestamp || hash) && (jsxRuntime.jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url })) }));
+    return (jsxRuntime.jsx(ActionLayout, { description: description, status: status, nextStatus: nextStatus, showTimeline: showTimeline, showBody: showBody, children: (timestamp !== null && timestamp !== void 0 ? timestamp : hash) && (jsxRuntime.jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url })) }));
 }
 
 function SwapAction({ status, nextStatus, showTimeline, showBody, fromToken, toToken, provider, timestamp, hash, url, }) {
@@ -87250,27 +87268,39 @@ const swapProgressAnimations = {
     [SwapState.CONFIRMATION_REJECTED]: transactionRejectedAnimation,
     [SwapState.NEEDS_GAS]: transactionErrorPauseAnimation,
 };
-const getSwapProgressTitle = ({ fromToken, toToken, swapState, isSendTransaction, }) => {
+const getSwapProgressTitle = ({ fromToken, toToken, swapState, isSendTransaction, isBridgeTransaction, }) => {
     switch (swapState) {
         case SwapState.CONFIRM:
             if (isSendTransaction) {
                 return "Confirm transaction";
             }
+            if (isBridgeTransaction) {
+                return "Confirm bridge";
+            }
             return "Confirm swap";
         case SwapState.PROGRESS:
             if (isSendTransaction) {
                 return `Send ${fromToken.symbol}`;
             }
+            if (isBridgeTransaction) {
+                return `Bridge ${fromToken.symbol}`;
+            }
             return `Swap ${fromToken.symbol} to ${toToken.symbol}`;
         case SwapState.COMPLETED:
             if (isSendTransaction) {
                 return "Tokens received";
             }
+            if (isBridgeTransaction) {
+                return "Bridge complete";
+            }
             return "Swap complete";
         case SwapState.ERROR:
             if (isSendTransaction) {
                 return "Transaction failed";
             }
+            if (isBridgeTransaction) {
+                return "Bridge failed";
+            }
             return "Swap failed";
         case SwapState.CONFIRMATION_TOO_LONG:
             return "Confirmation taking too long";
@@ -87278,14 +87308,23 @@ const getSwapProgressTitle = ({ fromToken, toToken, swapState, isSendTransaction
             if (isSendTransaction) {
                 return "Transaction rejected";
             }
+            if (isBridgeTransaction) {
+                return "Bridge rejected";
+            }
             return "Swap rejected";
         case SwapState.PARTIAL_SUCCESS:
+            if (isSendTransaction) {
+                return "Transaction failed to complete";
+            }
+            if (isBridgeTransaction) {
+                return "Bridge failed to complete";
+            }
             return "Swap failed to complete";
         case SwapState.NEEDS_GAS:
             return "Needs gas on destination";
     }
 };
-const getSwapProgressDescriptions = ({ swapState, toAmount, toChain, toToken, toAddressFormatted, refundTokenSymbol, isSendTransaction, }) => {
+const getSwapProgressDescriptions = ({ swapState, toAmount, toChain, toToken, toAddressFormatted, refundTokenSymbol, isSendTransaction, isBridgeTransaction, }) => {
     switch (swapState) {
         case SwapState.CONFIRM: {
             return "Authenticate the transaction in your wallet.";
@@ -87294,6 +87333,9 @@ const getSwapProgressDescriptions = ({ swapState, toAmount, toChain, toToken, to
             if (isSendTransaction) {
                 return "Feel free to dismiss this dialog, we’ll notify you when the recipient receives your tokens.";
             }
+            if (isBridgeTransaction) {
+                return "Feel free to dismiss this dialog, we’ll notify you when the bridge is complete.";
+            }
             return "Feel free to dismiss this dialog, we’ll notify you when the swap is complete.";
         }
         case SwapState.COMPLETED: {
@@ -87329,7 +87371,7 @@ const swapProgressButtonTexts = {
     [SwapState.PARTIAL_SUCCESS]: "Cancel",
     [SwapState.NEEDS_GAS]: "Go to Axelarscan",
 };
-function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, refundTokenSymbol, addGasLink, shareSwapDropdownContent, isSendTransaction = false, }) {
+function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, refundTokenSymbol, addGasLink, shareSwapDropdownContent, isSendTransaction = false, isBridgeTransaction = false, }) {
     const [showSwapInfoSection, setShowSwapInfoSection] = require$$0.useState(true);
     const isFirstRenderRef = require$$0.useRef(true);
     const { timer, stopTimer, startTimer } = useTimer({
@@ -87353,6 +87395,7 @@ function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, s
             fromToken,
             toToken,
             isSendTransaction,
+            isBridgeTransaction,
         });
         const headerDescription = getSwapProgressDescriptions({
             swapState,
@@ -87362,12 +87405,13 @@ function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, s
             toAddressFormatted,
             refundTokenSymbol,
             isSendTransaction,
+            isBridgeTransaction,
         });
         return {
             headerTitle,
             headerDescription,
         };
-    }, [swapState, fromToken, toToken, toAmount, toChain]);
+    }, [swapState, fromToken, toToken, toAmount, toChain, isBridgeTransaction]);
     const trackTransactionViewRef = require$$0.useRef(null);
     const handleCollapseRouteSteps = () => { var _a; return (_a = trackTransactionViewRef.current) === null || _a === void 0 ? void 0 : _a.handleToggleRouteSteps(); };
     return (jsxRuntime.jsxs(Modal, { isOpen: isOpen, onBackdropClick: 
@@ -87387,13 +87431,18 @@ function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, s
                                 height: "100%",
                                 maxHeight: "100%",
                                 width: "auto",
-                            }, autoplay: true, loop: true, src: swapProgressAnimations[swapState] }) }), jsxRuntime.jsx("div", { className: "tw-relative tw-flex tw-h-squid-m tw-w-full tw-items-end tw-justify-between tw-self-stretch tw-px-squid-m", children: swapState === SwapState.COMPLETED ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "-tw-mb-1 -tw-ml-1", children: jsxRuntime.jsx(SwapSuccessIcon, {}) }), shareSwapDropdownContent ? (jsxRuntime.jsx(ShareSwapButton, { dropdownContent: shareSwapDropdownContent })) : null] })) : swapState === SwapState.ERROR ? (jsxRuntime.jsx(SwapErrorTopMenu, { supportLink: supportLink, type: "error" })) : swapState === SwapState.PARTIAL_SUCCESS ? (jsxRuntime.jsx(SwapErrorTopMenu, { supportLink: supportLink, type: "warning" })) : isSendTransaction ? (jsxRuntime.jsx(Image$1, { src: fromToken.logoUrl, rounded: "full", size: "xlarge", shadow: true })) : (jsxRuntime.jsx(TokenPair, { firstToken: {
+                            }, autoplay: true, loop: true, src: swapProgressAnimations[swapState] }) }), jsxRuntime.jsx("div", { className: "tw-relative tw-flex tw-h-squid-m tw-w-full tw-items-end tw-justify-between tw-self-stretch tw-px-squid-m", children: swapState === SwapState.COMPLETED ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "-tw-mb-1 -tw-ml-1", children: jsxRuntime.jsx(SwapSuccessIcon, {}) }), shareSwapDropdownContent ? (jsxRuntime.jsx(ShareSwapButton, { dropdownContent: shareSwapDropdownContent })) : null] })) : swapState === SwapState.ERROR ? (jsxRuntime.jsx(SwapErrorTopMenu, { supportLink: supportLink, type: "error" })) : swapState === SwapState.PARTIAL_SUCCESS ? (jsxRuntime.jsx(SwapErrorTopMenu, { supportLink: supportLink, type: "warning" })) : isSendTransaction || isBridgeTransaction ? (jsxRuntime.jsx(Image$1, { src: fromToken.logoUrl, rounded: "full", size: "xlarge", shadow: true })) : (jsxRuntime.jsx(TokenPair, { firstToken: {
                                 bgColor: fromToken.bgColor,
                                 logoURI: fromToken.logoUrl,
                             }, secondToken: {
                                 bgColor: toToken.bgColor,
                                 logoURI: toToken.logoUrl,
-                            } })) }), jsxRuntime.jsx(TxProgressViewHeader, { title: headerTitle, description: headerDescription }), jsxRuntime.jsxs("ul", { className: "tw-squid-property-gradient-bg-odd-container tw-flex tw-w-full tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xxs tw-rounded-squid-l tw-pb-squid-s tw-pt-squid-xs mobile-xs-height:tw-h-[195px] mobile-sm-height:tw-py-squid-s", children: [jsxRuntime.jsx(PropertyListItem, { icon: isSendTransaction ? (jsxRuntime.jsx(ArrowRightUpCircleIcon, {})) : (jsxRuntime.jsx(ArrowsSwapIcon, {})), label: isSendTransaction ? "Send" : "Swap", detail: isSendTransaction ? (jsxRuntime.jsx(IconLabel, { src: fromToken.logoUrl, rounded: "full", children: fromAmount })) : (jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsx(IconLabel, { src: fromToken.logoUrl, rounded: "full", children: fromAmount }), to: jsxRuntime.jsx(IconLabel, { src: toToken.logoUrl, rounded: "full", children: toAmount }) })) }), jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(ChainLink, { size: "24", strokeWidth: "2" }), label: "Chain", detail: isSendTransaction ? (jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsxRuntime.jsx(Image$1, { size: "medium", rounded: "xxs", src: fromChain.logoUrl }), jsxRuntime.jsx(CaptionText, { children: fromChain.networkName })] })) : (jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Image$1, { size: "medium", rounded: "xxs", src: fromChain.logoUrl }), jsxRuntime.jsx(CaptionText, { children: fromChain.networkName })] }), to: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Image$1, { size: "medium", rounded: "xxs", src: toChain.logoUrl }), jsxRuntime.jsx(CaptionText, { children: toChain.networkName })] }) })) }), jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(WalletFilledIcon, { size: "24" }), label: "Wallet", detail: jsxRuntime.jsx(Transfer, { from: fromAddressFormatted, to: toAddressFormatted }) }), jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(TimeFliesIcon, {}), label: "Time to complete", detail: swapState === SwapState.PROGRESS ? (jsxRuntime.jsx(Transfer, { from: timer, to: estimatedTimeToComplete })) : swapState === SwapState.COMPLETED ? (jsxRuntime.jsx(CaptionText, { children: timer })) : (jsxRuntime.jsx(CaptionText, { children: estimatedTimeToComplete })) })] })] }), jsxRuntime.jsx(TrackTransactionView, { ref: trackTransactionViewRef, onTxEnd: () => {
+                            } })) }), jsxRuntime.jsx(TxProgressViewHeader, { title: headerTitle, description: headerDescription }), jsxRuntime.jsxs("ul", { className: "tw-flex tw-w-full tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xxs tw-rounded-squid-l tw-pb-squid-s tw-pt-squid-xs tw-squid-property-gradient-bg-odd-container mobile-xs-height:tw-h-[195px] mobile-sm-height:tw-py-squid-s", children: [jsxRuntime.jsx(PropertyListItem, { icon: isSendTransaction ? (jsxRuntime.jsx(ArrowRightUpCircleIcon, {})) : (jsxRuntime.jsx(ArrowsSwapIcon, {})), label: isSendTransaction
+                                    ? "Send"
+                                    : isBridgeTransaction
+                                        ? "Bridge"
+                                        : "Swap", detail: isSendTransaction ? (jsxRuntime.jsx(IconLabel, { src: fromToken.logoUrl, rounded: "full", children: fromAmount })) : (jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsx(IconLabel, { src: fromToken.logoUrl, rounded: "full", children: fromAmount }), to: jsxRuntime.jsx(IconLabel, { src: toToken.logoUrl, rounded: "full", children: toAmount }) })) }), jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(ChainLink, { size: "24", strokeWidth: "2" }), label: "Chain", detail: isSendTransaction ||
+                                    fromChain.networkName === toChain.networkName ? (jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsxRuntime.jsx(Image$1, { size: "medium", rounded: "xxs", src: fromChain.logoUrl }), jsxRuntime.jsx(CaptionText, { children: fromChain.networkName })] })) : (jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Image$1, { size: "medium", rounded: "xxs", src: fromChain.logoUrl }), jsxRuntime.jsx(CaptionText, { children: fromChain.networkName })] }), to: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Image$1, { size: "medium", rounded: "xxs", src: toChain.logoUrl }), jsxRuntime.jsx(CaptionText, { children: toChain.networkName })] }) })) }), jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(WalletFilledIcon, { size: "24" }), label: "Wallet", detail: jsxRuntime.jsx(Transfer, { from: fromAddressFormatted, to: toAddressFormatted }) }), jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(TimeFliesIcon, {}), label: "Time to complete", detail: swapState === SwapState.PROGRESS ? (jsxRuntime.jsx(Transfer, { from: timer, to: estimatedTimeToComplete })) : swapState === SwapState.COMPLETED ? (jsxRuntime.jsx(CaptionText, { children: timer })) : (jsxRuntime.jsx(CaptionText, { children: estimatedTimeToComplete })) })] })] }), jsxRuntime.jsx(TrackTransactionView, { ref: trackTransactionViewRef, onTxEnd: () => {
                     stopTimer();
                 }, onTxStart: () => {
                     startTimer();
@@ -87495,20 +87544,27 @@ function TransactionViewLayout(_a) {
     var { isLoading, header, properties, actions, fees } = _a, props = __rest$1(_a, ["isLoading", "header", "properties", "actions", "fees"]);
     const [actionsCollapsed, setActionsCollapsed] = require$$0.useState(true);
     const [feesCollapsed, setFeesCollapsed] = require$$0.useState(true);
-    return (jsxRuntime.jsx("div", Object.assign({ className: "tw-relative tw-divide-y tw-divide-material-light-thin" }, props, { children: isLoading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "tw-absolute tw-left-0 tw-top-0 tw-z-10 tw-h-full tw-w-full tw-animate-shimmer tw-bg-shimmer tw-text-transparent", style: {
+    const items = require$$0.useMemo(() => {
+        if (actions)
+            return linkActionTimelineProps(actions, actionsCollapsed);
+        return [];
+    }, [actions, actionsCollapsed]);
+    return (jsxRuntime.jsx("div", Object.assign({ className: "tw-relative tw-divide-y tw-divide-material-light-thin tw-squid-property-gradient-bg-even-container" }, props, { children: isLoading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "tw-absolute tw-left-0 tw-top-0 tw-z-10 tw-h-full tw-w-full tw-animate-shimmer tw-bg-shimmer tw-text-transparent", style: {
                         backgroundSize: "200% 100%",
-                    } }), jsxRuntime.jsx(TransactionHeaderLayout, { isLoading: true }), jsxRuntime.jsx(PropertiesSkeleton, {})] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [header, properties, " ", actions && (jsxRuntime.jsx(CollapsibleSection, { collapsed: actionsCollapsed, setCollapsed: setActionsCollapsed, children: linkActionTimelineProps(actions, actionsCollapsed).map((props, i) => (jsxRuntime.jsx("div", { className: cn(i > 0 && "tw-border-t tw-border-t-material-light-thin"), children: jsxRuntime.jsx(TransactionAction, Object.assign({}, props)) }, i))) })), fees && (jsxRuntime.jsxs(CollapsibleSection, { collapsed: feesCollapsed, setCollapsed: setFeesCollapsed, children: [jsxRuntime.jsx(FeesTotal, Object.assign({ collapsed: feesCollapsed, showTimeline: true }, fees)), jsxRuntime.jsx(FeesLines, Object.assign({}, fees))] }))] })) })));
-}
-function CollapsibleSection({ children, collapsed, setCollapsed, collapsedHeight = 50, }) {
-    return (jsxRuntime.jsx("div", { className: cn("tw-group/Collapsible-section tw-relative tw-bg-grey-900", collapsed ? "tw-cursor-pointer" : ""), onClick: () => {
-            if (collapsed)
-                setCollapsed(false);
-        }, children: jsxRuntime.jsxs("div", { className: cn("tw-relative tw-border-material-light-thin tw-transition-[border-width] tw-duration-200", !collapsed && "tw-border-t-[4px]"), children: [jsxRuntime.jsx("div", { className: "cursor-pointer tw-absolute tw-right-0 tw-top-0 tw-z-10 tw-flex tw-h-full tw-cursor-pointer tw-items-center tw-pr-squid-m", style: { height: `${collapsedHeight}px` }, onClick: () => {
-                        if (!collapsed)
-                            setCollapsed(true);
-                    }, children: jsxRuntime.jsx(ChevronLargeDownIcon, { className: cn("tw-origin-center tw-text-grey-300 tw-transition-transform tw-duration-200", collapsed && "-tw-rotate-90") }) }), jsxRuntime.jsx("div", { 
-                    // hover highlight
-                    className: "tw-pointer-events-none tw-absolute tw-left-0 tw-top-0 tw-h-[50px] tw-w-full", children: jsxRuntime.jsx("div", { className: cn("tw-absolute tw-bottom-squid-xxs tw-left-squid-xs tw-right-squid-xs tw-top-squid-xxs tw-rounded-squid-xs tw-bg-material-light-thin tw-opacity-0 tw-transition-opacity tw-duration-200", collapsed && "group-hover/Collapsible-section:tw-opacity-100") }) }), jsxRuntime.jsx(Collapse, { collapsed: collapsed, collapsedHeight: collapsedHeight, children: children })] }) }));
+                    } }), jsxRuntime.jsx(TransactionHeaderLayout, { isLoading: true }), jsxRuntime.jsx(PropertiesSkeleton, {})] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [header, properties, actions && (jsxRuntime.jsx(CollapsibleSection, { header: jsxRuntime.jsx("div", { className: "tw-w-full", children: items[0] && jsxRuntime.jsx(TransactionAction, Object.assign({}, items[0])) }), collapsed: actionsCollapsed, setCollapsed: setActionsCollapsed, children: linkActionTimelineProps(actions, actionsCollapsed)
+                        .slice(1, linkActionTimelineProps.length)
+                        .map((props, i) => (jsxRuntime.jsx("div", { className: cn(i > 0 && "tw-border-t tw-border-t-material-light-thin"), children: jsxRuntime.jsx(TransactionAction, Object.assign({}, props)) }, i))) })), fees && (jsxRuntime.jsx(CollapsibleSection, { header: jsxRuntime.jsx(FeesTotal, Object.assign({ collapsed: feesCollapsed, showTimeline: true }, fees)), collapsed: feesCollapsed, setCollapsed: setFeesCollapsed, children: jsxRuntime.jsx(FeesLines, Object.assign({}, fees)) }))] })) })));
+}
+function CollapsibleSection({ header, children, collapsed, setCollapsed, collapsedHeight = 0, }) {
+    return (jsxRuntime.jsx("div", { className: cn("tw-group/collapsible-section tw-relative tw-bg-grey-900", collapsed ? "tw-cursor-pointer" : ""), children: jsxRuntime.jsx("div", { className: cn("tw-relative tw-border-material-light-thin tw-transition-[border-width] tw-duration-200", !collapsed && "tw-border-t-[4px]"), children: jsxRuntime.jsxs("div", { className: "tw-border-t tw-border-t-material-light-thin", children: [jsxRuntime.jsxs("span", { className: "tw-relative tw-z-10 tw-flex tw-flex tw-w-full tw-cursor-pointer tw-items-center tw-justify-between tw-text-left hover:tw-bg-grey-800", onClick: (e) => {
+                            const target = e.target;
+                            if (target.tagName === "BUTTON" ||
+                                target.tagName === "A" ||
+                                target.closest("button, a, input, select, textarea")) {
+                                return;
+                            }
+                            setCollapsed((prev) => !prev);
+                        }, children: [jsxRuntime.jsx("div", { className: "tw-w-full", children: header }), jsxRuntime.jsx(ChevronLargeDownIcon, { className: cn("tw-absolute tw-right-squid-m tw-top-1/2 tw-origin-center -tw-translate-y-1/2 tw-text-grey-300 tw-transition-transform tw-duration-200", collapsed && "-tw-rotate-90") })] }), jsxRuntime.jsx(Collapse, { collapsed: collapsed, collapsedHeight: collapsedHeight, children: children })] }) }) }));
 }
 function PropertiesSkeleton() {
     return (jsxRuntime.jsx(PropertiesLayout, { children: Array.from({ length: 5 }, (_, i) => (jsxRuntime.jsx(PropertyListItem, { variant: "large", isLoading: true, showGradientBg: false }, i))) }));
@@ -87529,16 +87585,20 @@ function InteractionTransactionView({ title = "Interaction", hash, status, url,
     return (jsxRuntime.jsx(TransactionViewLayout, { isLoading: isLoading, header: jsxRuntime.jsx(TransactionHeaderLayout, { title: title, status: status, media: jsxRuntime.jsx("div", { className: "tw-flex tw-h-10 tw-w-10 tw-items-center tw-justify-center tw-rounded-md tw-bg-royal-400 tw-text-grey-900", children: jsxRuntime.jsx(ThumbsUp, { size: "24" }) }), children: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsxRuntime.jsx(Chip, { label: "TX" }), jsxRuntime.jsx(HashLink, { hash: hash, url: url, showCopyButton: true }), " "] }) }), properties: jsxRuntime.jsxs(PropertiesLayout, { children: [jsxRuntime.jsx(PropertyListItem, { variant: "large", icon: jsxRuntime.jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsxRuntime.jsx(IconLabel, { src: chain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: chain.name }) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsxRuntime.jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsxRuntime.jsx(BodyText, { size: "small", children: jsxRuntime.jsx(HashLink, { hash: address, showCopyButton: true }) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", icon: jsxRuntime.jsx(TimeFliesIcon, {}), label: "Time to complete", detail: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center", children: [boosted && jsxRuntime.jsx(BoostBadge, {}), jsxRuntime.jsx(BodyText, { size: "small", children: timeToComplete })] }) })] }), actions: actions, fees: fees }));
 }
 
-function SwapTransactionView({ title = "Swap", hash, status, url, fromAmount, fromToken, toAmount, toToken, fromChain, toChain, fromAddress, toAddress, exchangeRate, boosted, timeToComplete, actions, fees, isLoading, }) {
+function LinkButton({ href }) {
+    return (jsxRuntime.jsx("a", { href: href, target: "_blank", className: "tw-ml-0.5 tw-rounded-squid-xs tw-p-0.5 tw-text-royal-500 hover:tw-bg-material-light-thin", rel: "noreferrer", children: jsxRuntime.jsx(SquareArrowTopRightIcon, {}) }));
+}
+
+function SwapTransactionView({ title = "Swap", hash, toLink, fromLink, status, url, fromAmount, fromToken, toAmount, toToken, fromChain, toChain, fromAddress, toAddress, exchangeRate, boosted, timeToComplete, actions, fees, isLoading, }) {
     if (isLoading)
         return jsxRuntime.jsx(TransactionViewLayout, { isLoading: isLoading });
-    return (jsxRuntime.jsx(TransactionViewLayout, { header: jsxRuntime.jsx(TransactionHeaderLayout, { title: title, status: status, media: jsxRuntime.jsx(Drip, { direction: "horizontal", from: fromToken, to: toToken }), children: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsxRuntime.jsx(Chip, { label: "TX" }), jsxRuntime.jsx(HashLink, { hash: hash, url: url, showCopyButton: true, formattedHash: formatHash(hash) })] }) }), properties: jsxRuntime.jsxs(PropertiesLayout, { children: [jsxRuntime.jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsxRuntime.jsx(ArrowRightUpCircleIcon, {}), label: jsxRuntime.jsxs(BodyText, { size: "small", children: ["Swap ", fromToken.symbol] }), detail: jsxRuntime.jsx(IconLabel, { src: fromToken.logoURI, rounded: "full", children: jsxRuntime.jsx(BodyText, { size: "small", children: fromAmount }) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", icon: jsxRuntime.jsx(ArrowRightDownCircleIcon, {}), label: jsxRuntime.jsxs(BodyText, { size: "small", children: ["Receive ", toToken.symbol] }), detail: jsxRuntime.jsx(IconLabel, { src: toToken.logoURI, rounded: "full", children: jsxRuntime.jsx(BodyText, { size: "small", children: toAmount }) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsxRuntime.jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsx(IconLabel, { src: fromChain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: fromChain.name }) }), to: jsxRuntime.jsx(IconLabel, { src: toChain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: toChain.name }) }) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", icon: jsxRuntime.jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsx(BodyText, { size: "small", children: jsxRuntime.jsx(HashLink, { hash: fromAddress, showCopyButton: true, formattedHash: formatHash(fromAddress) }) }), to: jsxRuntime.jsx(BodyText, { size: "small", children: jsxRuntime.jsx(HashLink, { hash: toAddress, showCopyButton: true, formattedHash: formatHash(toAddress) }) }) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsxRuntime.jsx(ArrowsSwapIcon, {}), label: "Exchange rate", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsxs(BodyText, { size: "small", children: ["1 ", fromToken.symbol] }), to: jsxRuntime.jsxs(BodyText, { size: "small", children: [exchangeRate, " ", toToken.symbol] }) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", icon: jsxRuntime.jsx(TimeFliesIcon, {}), label: "Time to complete", detail: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center", children: [boosted && jsxRuntime.jsx(BoostBadge, {}), jsxRuntime.jsx(BodyText, { size: "small", children: timeToComplete })] }) })] }), actions: actions, fees: fees }));
+    return (jsxRuntime.jsx(TransactionViewLayout, { header: jsxRuntime.jsx(TransactionHeaderLayout, { title: title, status: status, media: jsxRuntime.jsx(Drip, { direction: "horizontal", from: fromToken, to: toToken }), children: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsxRuntime.jsx(Chip, { label: "TX" }), jsxRuntime.jsx(HashLink, { hash: hash, url: url, showCopyButton: true, formattedHash: formatHash(hash) })] }) }), properties: jsxRuntime.jsxs(PropertiesLayout, { children: [jsxRuntime.jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsxRuntime.jsx(ArrowRightUpCircleIcon, {}), label: jsxRuntime.jsxs(BodyText, { size: "small", children: ["Swap ", fromToken.symbol] }), detail: jsxRuntime.jsxs("span", { className: "tw-inline-flex tw-inline-flex tw-gap-0.5", children: [jsxRuntime.jsx(IconLabel, { src: fromToken.logoURI, rounded: "full", children: jsxRuntime.jsx(BodyText, { size: "small", children: fromAmount }) }), fromLink && jsxRuntime.jsx(LinkButton, { href: fromLink })] }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", icon: jsxRuntime.jsx(ArrowRightDownCircleIcon, {}), label: jsxRuntime.jsxs(BodyText, { size: "small", children: ["Receive ", toToken.symbol] }), detail: jsxRuntime.jsxs("span", { className: "tw-inline-flex tw-items-center tw-gap-0.5", children: [jsxRuntime.jsx(IconLabel, { src: toToken.logoURI, rounded: "full", children: jsxRuntime.jsx(BodyText, { size: "small", children: toAmount }) }), toLink && jsxRuntime.jsx(LinkButton, { href: toLink })] }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsxRuntime.jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsx(IconLabel, { src: fromChain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: fromChain.name }) }), to: jsxRuntime.jsx(IconLabel, { src: toChain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: toChain.name }) }) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", icon: jsxRuntime.jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsx(BodyText, { size: "small", children: jsxRuntime.jsx(HashLink, { hash: fromAddress, showCopyButton: true, formattedHash: formatHash(fromAddress) }) }), to: jsxRuntime.jsx(BodyText, { size: "small", children: jsxRuntime.jsx(HashLink, { hash: toAddress, showCopyButton: true, formattedHash: formatHash(toAddress) }) }) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsxRuntime.jsx(ArrowsSwapIcon, {}), label: "Exchange rate", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsxs(BodyText, { size: "small", children: ["1 ", fromToken.symbol] }), to: jsxRuntime.jsxs(BodyText, { size: "small", children: [exchangeRate, " ", toToken.symbol] }) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", icon: jsxRuntime.jsx(TimeFliesIcon, {}), label: "Time to complete", detail: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center", children: [boosted && jsxRuntime.jsx(BoostBadge, {}), jsxRuntime.jsx(BodyText, { size: "small", children: timeToComplete })] }) })] }), actions: actions, fees: fees }));
 }
 
-function BridgeTransactionView({ title = "Bridge", hash, status, url, amount, token, fromChain, toChain, address, actions, fees, boosted, timeToComplete, isLoading, }) {
+function BridgeTransactionView({ title = "Bridge", hash, fromLink, toLink, status, url, fromAmount, toAmount, fromToken, toToken, fromChain, toChain, address, actions, fees, boosted, timeToComplete, isLoading, }) {
     if (isLoading)
         return jsxRuntime.jsx(TransactionViewLayout, { isLoading: isLoading });
-    return (jsxRuntime.jsx(TransactionViewLayout, { isLoading: isLoading, header: jsxRuntime.jsx(TransactionHeaderLayout, { title: title, status: status, media: jsxRuntime.jsxs("div", { className: "tw-relative", children: [jsxRuntime.jsx(Image$1, { src: fromChain.logoURI, size: "xlarge", rounded: "full" }), jsxRuntime.jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px] tw-rounded-md tw-border tw-border-white", children: jsxRuntime.jsx(Image$1, { src: toChain.logoURI, size: "medium" }) })] }), children: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsxRuntime.jsx(Chip, { label: "TX" }), jsxRuntime.jsx(HashLink, { hash: hash, url: url, showCopyButton: true, formattedHash: formatHash(hash) }), " "] }) }), properties: jsxRuntime.jsxs(PropertiesLayout, { children: [jsxRuntime.jsx(PropertyListItem, { variant: "large", icon: jsxRuntime.jsx(SquareArrowTopLeftIcon, { size: "20" }), label: jsxRuntime.jsxs(BodyText, { size: "small", children: ["Bridge ", token.symbol] }), detail: jsxRuntime.jsx(IconLabel, { src: token.logoURI, rounded: "full", children: jsxRuntime.jsx(BodyText, { size: "small", children: amount }) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsxRuntime.jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsx(IconLabel, { src: fromChain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: fromChain.name }) }), to: jsxRuntime.jsx(IconLabel, { src: toChain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: toChain.name }) }) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", icon: jsxRuntime.jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsxRuntime.jsx(BodyText, { size: "small", children: jsxRuntime.jsx(HashLink, { hash: address, showCopyButton: true, formattedHash: address }) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsxRuntime.jsx(TimeFliesIcon, {}), label: "Time to complete", detail: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center", children: [boosted && jsxRuntime.jsx(BoostBadge, {}), jsxRuntime.jsx(BodyText, { size: "small", children: timeToComplete })] }) })] }), actions: actions, fees: fees }));
+    return (jsxRuntime.jsx(TransactionViewLayout, { isLoading: isLoading, header: jsxRuntime.jsx(TransactionHeaderLayout, { title: title, status: status, media: jsxRuntime.jsxs("div", { className: "tw-relative", children: [jsxRuntime.jsx(Image$1, { src: fromChain.logoURI, size: "xlarge", rounded: "full" }), jsxRuntime.jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px] tw-rounded-md tw-border tw-border-white", children: jsxRuntime.jsx(Image$1, { src: toChain.logoURI, size: "medium" }) })] }), children: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsxRuntime.jsx(Chip, { label: "TX" }), jsxRuntime.jsx(HashLink, { hash: hash, url: url, showCopyButton: true, formattedHash: formatHash(hash) })] }) }), properties: jsxRuntime.jsxs(PropertiesLayout, { children: [jsxRuntime.jsx(PropertyListItem, { variant: "large", icon: jsxRuntime.jsx(ArrowRightUpCircleIcon, {}), label: jsxRuntime.jsxs(BodyText, { size: "small", children: ["Bridge ", fromToken.symbol] }), detail: jsxRuntime.jsxs("span", { className: "tw-inline-flex tw-inline-flex tw-gap-0.5", children: [jsxRuntime.jsx(IconLabel, { src: fromToken.logoURI, rounded: "full", children: jsxRuntime.jsx(BodyText, { size: "small", children: fromAmount }) }), fromLink && jsxRuntime.jsx(LinkButton, { href: fromLink })] }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", icon: jsxRuntime.jsx(ArrowRightDownCircleIcon, {}), label: jsxRuntime.jsxs(BodyText, { size: "small", children: ["Receive ", toToken.symbol] }), detail: jsxRuntime.jsxs("span", { className: "tw-inline-flex tw-items-center tw-gap-0.5", children: [jsxRuntime.jsx(IconLabel, { src: toToken.logoURI, rounded: "full", children: jsxRuntime.jsx(BodyText, { size: "small", children: toAmount }) }), toLink && jsxRuntime.jsx(LinkButton, { href: toLink })] }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsxRuntime.jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsx(IconLabel, { src: fromChain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: fromChain.name }) }), to: jsxRuntime.jsx(IconLabel, { src: toChain.logoURI, children: jsxRuntime.jsx(BodyText, { size: "small", children: toChain.name }) }) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", icon: jsxRuntime.jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsxRuntime.jsx(BodyText, { size: "small", children: jsxRuntime.jsx(HashLink, { hash: address, showCopyButton: true, formattedHash: address }) }) }), jsxRuntime.jsx(PropertyListItem, { variant: "large", showGradientBg: false, icon: jsxRuntime.jsx(TimeFliesIcon, {}), label: "Time to complete", detail: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center", children: [boosted && jsxRuntime.jsx(BoostBadge, {}), jsxRuntime.jsx(BodyText, { size: "small", children: timeToComplete })] }) })] }), actions: actions, fees: fees }));
 }
 
 function TransactionView({ type, isLoading, data, }) {
@@ -88117,6 +88177,7 @@ exports.SparklesIcon = SparklesIcon;
 exports.SquareArrowCenter = SquareArrowCenter;
 exports.SquareArrowTopLeftIcon = SquareArrowTopLeftIcon;
 exports.SquareArrowTopRight2Icon = SquareArrowTopRight2Icon;
+exports.SquareArrowTopRightIcon = SquareArrowTopRightIcon;
 exports.SquidLogo = SquidLogo;
 exports.StakeAction = StakeAction;
 exports.StarLinesIcon = StarLinesIcon;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface Props extends React.HTMLAttributes<HTMLButtonElement> {
+    copyText: string;
+    size?: "default" | "small";
+}
+export declare const CopyButton: ({ copyText, className, size, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,5 @@
+interface Props {
+    href: string;
+}
+export default function LinkButton({ href }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -49,6 +49,11 @@ export declare function ChevronGrabberVerticalIcon({ size, className, }: {
     size?: string;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function SquareArrowTopRightIcon({ className, size, strokeWidth, }: {
+    className?: string;
+    size?: string;
+    strokeWidth?: string;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function SquareArrowTopRight2Icon({ className, size, strokeWidth, }: {
     className?: string;
     size?: string;

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

@@ -1,4 +1,4 @@
-import { ComponentProps } from "react";
+import { type ComponentProps } from "react";
 export declare function Timeline({ className, ...props }: ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 export declare namespace Timeline {
     var ArrowDown: (props: import("react").SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type LottieComponentProps } from "lottie-react";
-interface Props extends Omit<LottieComponentProps, "src"> {
+interface Props extends Omit<LottieComponentProps, "src" | "animationData"> {
     style?: React.CSSProperties;
     autoplay?: boolean;
     loop?: boolean;

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

@@ -7,7 +7,7 @@ interface HashLinkProps {
     url?: string;
     className?: string;
     formattedHash?: string;
-    copyIconSize?: string;
+    size?: "default" | "small";
 }
-export declare function HashLink({ showTx, hash, showCopyButton, url, children, className, formattedHash, copyIconSize, }: HashLinkProps): import("react/jsx-runtime").JSX.Element;
+export declare function HashLink({ showTx, hash, showCopyButton, url, children, className, formattedHash, size, }: HashLinkProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,2 +1,6 @@
-import { ComponentProps } from "react";
-export declare function PipeSeparator(props: ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+import { type ComponentProps } from "react";
+interface Props extends ComponentProps<"div"> {
+    size?: "default" | "small" | "large";
+}
+export declare function PipeSeparator({ className, size, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/types/components/lists/TransactionAction/FeesAction.d.ts

@@ -18,12 +18,13 @@ interface FeesLinesProps {
     lines?: FeesRowProps[];
     showTimeline?: boolean;
 }
-export declare function FeesLines({ status, lines, showTimeline, }: FeesLinesProps): import("react/jsx-runtime").JSX.Element;
+export declare function FeesLines({ status, lines }: FeesLinesProps): import("react/jsx-runtime").JSX.Element;
 interface FeesRowProps {
     label: string;
     amount: number | string;
     symbol: string;
     usd: number | string;
     collapsed?: boolean;
+    className?: string;
 }
 export {};

package/dist/cjs/types/components/lists/TransactionAction/SuccessAction.d.ts

@@ -1,4 +1,4 @@
-import { BaseActionProps } from "./BaseActionProps";
+import { type BaseActionProps } from "./BaseActionProps";
 interface SuccessActionProps extends BaseActionProps {
     description?: string;
     timestamp?: number;

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

@@ -1,4 +1,4 @@
-import { ComponentProps } from "react";
+import { type ComponentProps } from "react";
 import { ApproveAction } from "./ApproveAction";
 import { BridgeAction } from "./BridgeAction";
 import { FeesAction } from "./FeesAction";

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

@@ -10,7 +10,7 @@ interface Token {
     logoUrl: string;
     bgColor: string;
 }
-export declare function SwapProgressView({ steps, isOpen, handleClose, handleComplete, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, refundTokenSymbol, addGasLink, shareSwapDropdownContent, isSendTransaction, }: {
+export declare function SwapProgressView({ steps, isOpen, handleClose, handleComplete, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, refundTokenSymbol, addGasLink, shareSwapDropdownContent, isSendTransaction, isBridgeTransaction, }: {
     steps: SwapStep[];
     handleClose?: (swapState: SwapState) => void;
     handleComplete?: () => void;
@@ -31,5 +31,6 @@ export declare function SwapProgressView({ steps, isOpen, handleClose, handleCom
     refundTokenSymbol?: string;
     addGasLink?: string;
     isSendTransaction?: boolean;
+    isBridgeTransaction?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/components/views/TransactionView/BridgeTransactionView.d.ts

@@ -1,7 +1,11 @@
 import { type BaseTransactionViewProps } from "./BaseTransactionViewProps";
 interface BaseBridgeTransactionViewProps extends BaseTransactionViewProps {
-    amount: string;
-    token: {
+    fromToken: {
+        logoURI: string;
+        bgColor: string;
+        symbol: string;
+    };
+    toToken: {
         logoURI: string;
         bgColor: string;
         symbol: string;
@@ -19,11 +23,15 @@ interface BaseBridgeTransactionViewProps extends BaseTransactionViewProps {
     address: string;
     boosted?: boolean;
     timeToComplete: string;
+    fromLink?: string;
+    toLink?: string;
+    fromAmount: string;
+    toAmount: string;
 }
 type BridgeTransactionViewProps = (BaseBridgeTransactionViewProps & {
     isLoading?: false;
-}) | (Partial<BaseBridgeTransactionViewProps> & BaseTransactionViewProps & {
+}) | (Partial<Omit<BaseBridgeTransactionViewProps, keyof BaseTransactionViewProps>> & BaseTransactionViewProps & {
     isLoading: true;
 });
-export declare function BridgeTransactionView({ title, hash, status, url, amount, token, fromChain, toChain, address, actions, fees, boosted, timeToComplete, isLoading, }: BridgeTransactionViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function BridgeTransactionView({ title, hash, fromLink, toLink, status, url, fromAmount, toAmount, fromToken, toToken, fromChain, toChain, address, actions, fees, boosted, timeToComplete, isLoading, }: BridgeTransactionViewProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/components/views/TransactionView/SwapTransactionView.d.ts

@@ -20,16 +20,18 @@ interface BaseSwapTransactionViewProps extends BaseTransactionViewProps {
         logoURI: string;
         name: string;
     };
+    fromLink?: string;
+    toLink?: string;
     fromAddress: string;
     toAddress: string;
     exchangeRate: string;
     boosted?: boolean;
     timeToComplete: string;
 }
-export type SwapTransactionViewProps = (BaseSwapTransactionViewProps & {
+type SwapTransactionViewProps = (BaseSwapTransactionViewProps & {
     isLoading?: false;
 }) | (Partial<Omit<BaseSwapTransactionViewProps, keyof BaseTransactionViewProps>> & BaseTransactionViewProps & {
     isLoading: true;
 });
-export declare function SwapTransactionView({ title, hash, status, url, fromAmount, fromToken, toAmount, toToken, fromChain, toChain, fromAddress, toAddress, exchangeRate, boosted, timeToComplete, actions, fees, isLoading, }: SwapTransactionViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function SwapTransactionView({ title, hash, toLink, fromLink, status, url, fromAmount, fromToken, toAmount, toToken, fromChain, toChain, fromAddress, toAddress, exchangeRate, boosted, timeToComplete, actions, fees, isLoading, }: SwapTransactionViewProps): import("react/jsx-runtime").JSX.Element;
 export {};