@0xsquid/ui 0.27.0 → 0.27.2-beta.0

package/dist/esm/index.js

@@ -2770,7 +2770,7 @@ const sizeClassMap = {
     large: "tw-w-squid-l tw-shadow-elevation-light-2",
     xlarge: "tw-w-squid-xl tw-shadow-elevation-light-2",
 };
-function ImageIcon({ src, variant = "proportional", size = "medium", className: propsClassName, }) {
+function Image$1({ src, variant = "proportional", size = "medium", className: propsClassName, }) {
     const className = cn("tw-bg-grey-300 tw-object-cover", variantClassMap$1[variant], sizeClassMap[size], propsClassName);
     if (src) {
         return jsx("img", { className: className, src: src });
@@ -2781,7 +2781,7 @@ function ImageIcon({ src, variant = "proportional", size = "medium", className:
 }
 
 function IconLabel({ src, children, variant }) {
-    return (jsxs("div", { className: "tw-inline-flex tw-items-center tw-gap-squid-xxs", children: [src && jsx(ImageIcon, { src: src, variant: variant }), typeof children === "string" ? (jsx(CaptionText, { children: children })) : (children)] }));
+    return (jsxs("div", { className: "tw-inline-flex tw-items-center tw-gap-squid-xxs", children: [src && jsx(Image$1, { src: src, variant: variant }), typeof children === "string" ? (jsx(CaptionText, { children: children })) : (children)] }));
 }
 
 const LoadingContext = createContext(false);
@@ -2927,8 +2927,8 @@ function ChevronTopIcon({ className }) {
 function ChevronLargeRightIcon({ size = "16", className, }) {
     return (jsx("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsx("path", { d: "M6.66675 14L9.64035 8.64754C9.86407 8.24484 9.86407 7.75519 9.64035 7.35249L6.66675 2", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
-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 ChevronRightSmallIcon({ className, size = "16", }) {
+    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: "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({ 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", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
@@ -3098,8 +3098,8 @@ const themeTypesKeys = Object.fromEntries(INTERNAL_SQUID_THEME_KEYS.map((key) =>
     },
 ]));
 
-function SearchIcon() {
-    return (jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M20 20L16.05 16.05M18 11C18 14.866 14.866 18 11 18C7.13401 18 4 14.866 4 11C4 7.13401 7.13401 4 11 4C14.866 4 18 7.13401 18 11Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
+function SearchIcon({ className, size = "24", }) {
+    return (jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsx("path", { d: "M20 20L16.05 16.05M18 11C18 14.866 14.866 18 11 18C7.13401 18 4 14.866 4 11C4 7.13401 7.13401 4 11 4C14.866 4 18 7.13401 18 11Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
 }
 
 function Input(_a) {
@@ -16841,7 +16841,7 @@ function DescriptionBlocks(_a) {
                         .split(" ")
                         .map((word, i) => (jsx(BodyText, { size: "small", tight: true, children: word }, i))));
                 case "image":
-                    return (jsx(ImageIcon, { src: block.value, variant: block.rounded ? "round" : "square" }, index));
+                    return (jsx(Image$1, { src: block.value, variant: block.rounded ? "round" : "square" }, index));
             }
         }) })));
 }
@@ -16902,7 +16902,7 @@ function ChainLink({ size = "16", strokeWidth = "2", }) {
     return (jsx("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M6.66667 3.66667L7.16763 3.17225C8.73063 1.60925 11.2648 1.60925 12.8278 3.17225C14.3907 4.73525 14.3907 7.26937 12.8278 8.83237L12.3333 9.33333M3.66667 6.66667L3.17225 7.16763C1.60925 8.73063 1.60925 11.2648 3.17225 12.8278C4.73525 14.3907 7.26937 14.3907 8.83237 12.8278L9.33333 12.3333M6.66667 9.33333L9.33333 6.66667", stroke: "currentColor", strokeWidth: strokeWidth, vectorEffect: "non-scaling-stroke", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
 
-function ClockIcon({ className, size = "16", }) {
+function ClockSolidIcon({ className, size = "16", }) {
     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", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.99967 14.6667C11.6816 14.6667 14.6663 11.6819 14.6663 8.00004C14.6663 4.31814 11.6816 1.33337 7.99967 1.33337C4.31778 1.33337 1.33301 4.31814 1.33301 8.00004C1.33301 11.6819 4.31778 14.6667 7.99967 14.6667ZM8.66634 5.33337C8.66634 4.96518 8.36786 4.66671 7.99967 4.66671C7.63148 4.66671 7.33301 4.96518 7.33301 5.33337V8.00004C7.33301 8.17685 7.40325 8.34642 7.52827 8.47145L9.19494 10.1381C9.45529 10.3985 9.8774 10.3985 10.1377 10.1381C10.3981 9.87776 10.3981 9.45565 10.1377 9.1953L8.66634 7.7239V5.33337Z", fill: "currentColor" }) }));
 }
 function ClockOutlineIcon({ className, size = "24", }) {
@@ -16924,12 +16924,15 @@ function CoinsIcon() {
 function CoinsAddIcon() {
     return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "30", viewBox: "0 0 30 30", fill: "none", children: [jsx("path", { d: "M7.5 17.5C7.5 11.7269 11.8485 6.96944 17.4488 6.32444C15.8644 4.73417 13.6722 3.75 11.25 3.75C6.41751 3.75 2.5 7.66751 2.5 12.5C2.5 16.1582 4.74492 19.2921 7.93227 20.5991C7.65076 19.6146 7.5 18.5749 7.5 17.5Z", fill: "currentColor" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M18.75 26.25C23.5825 26.25 27.5 22.3325 27.5 17.5C27.5 12.6675 23.5825 8.75 18.75 8.75C13.9175 8.75 10 12.6675 10 17.5C10 22.3325 13.9175 26.25 18.75 26.25ZM20 13.75H17.5V16.25H15V18.75H17.5V21.25H20V18.75H22.5L22.5 16.25H20V13.75Z", fill: "currentColor" })] }));
 }
-function Dollar({ className, size = "24", }) {
+function DollarOutlinedIcon({ 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: "M12 7.5V6.5M12 16.5V17.5M14.1655 9C13.7333 8.4022 12.9254 8 12 8H11.7222C10.4949 8 9.5 8.79594 9.5 9.77778V9.8541C9.5 10.5564 9.99598 11.1984 10.7812 11.5125L13.2188 12.4875C14.004 12.8016 14.5 13.4436 14.5 14.1459C14.5 15.1699 13.4624 16 12.1824 16H12C11.0746 16 10.2667 15.5978 9.83446 15M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
 function StocksIcon({ size = "24", className, }) {
     return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 25 24", fill: "none", className: className, children: jsx("path", { d: "M14.75 12C15.8546 12 16.75 11.1046 16.75 10C16.75 8.89543 15.8546 8 14.75 8M14.75 12C14.1977 12 13.6977 11.7761 13.3358 11.4142M14.75 12V20M14.75 8C13.6454 8 12.75 8.89543 12.75 10C12.75 10.5523 12.9739 11.0523 13.3358 11.4142M14.75 8V4M14.75 4H7.75C6.09315 4 4.75 5.34315 4.75 7V17C4.75 18.6569 6.09315 20 7.75 20H14.75M14.75 4H17.75C19.4069 4 20.75 5.34315 20.75 7V17C20.75 18.6569 19.4069 20 17.75 20H14.75M13.3358 11.4142L9.75 15L7.75 13L5.25 15.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
+function DollarSolidIcon({ size = "20", className, }) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: className, children: jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1.6665 10.0001C1.6665 5.39771 5.39746 1.66675 9.99984 1.66675C14.6022 1.66675 18.3332 5.39771 18.3332 10.0001C18.3332 14.6025 14.6022 18.3334 9.99984 18.3334C5.39746 18.3334 1.6665 14.6025 1.6665 10.0001ZM9.99984 4.58341C10.4601 4.58341 10.8332 4.95651 10.8332 5.41675V5.93647C11.5032 6.106 12.0944 6.47889 12.4797 7.01179C12.7494 7.38474 12.6657 7.90569 12.2928 8.17537C11.9198 8.44505 11.3988 8.36133 11.1292 7.98837C10.9481 7.73799 10.5444 7.50008 9.99984 7.50008H9.76836C9.02271 7.50008 8.74984 7.95418 8.74984 8.14823V8.21183C8.74984 8.37622 8.87411 8.65226 9.29362 8.82007L11.325 9.63263C12.2141 9.98828 12.9165 10.7822 12.9165 11.7883C12.9165 13.0159 11.9357 13.8454 10.8332 14.091V14.5834C10.8332 15.0437 10.4601 15.4167 9.99984 15.4167C9.5396 15.4167 9.1665 15.0437 9.1665 14.5834V14.0637C8.49646 13.8942 7.90526 13.5213 7.51993 12.9884C7.25025 12.6154 7.33397 12.0945 7.70693 11.8248C8.07988 11.5551 8.60083 11.6388 8.87051 12.0118C9.05156 12.2622 9.45532 12.5001 9.99984 12.5001H10.1518C10.9414 12.5001 11.2498 12.0175 11.2498 11.7883C11.2498 11.6239 11.1256 11.3479 10.7061 11.1801L8.67464 10.3675C7.78553 10.0119 7.08317 9.21792 7.08317 8.21183V8.14823C7.08317 6.92823 8.07431 6.11595 9.1665 5.89451V5.41675C9.1665 4.95651 9.5396 4.58341 9.99984 4.58341Z", fill: "currentColor" }) }));
+}
 
 function CollectionIcon() {
     return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24", children: jsx("path", { stroke: "currentColor", strokeLinecap: "square", strokeLinejoin: "round", strokeWidth: "2", d: "M7.9 12l-4.307 2.101a1 1 0 000 1.798l7.969 3.887a1 1 0 00.877 0l7.969-3.887a1 1 0 000-1.798L16.1 12m-8.2 0L3.593 9.899a1 1 0 010-1.798l7.969-3.887a1 1 0 01.877 0L20.408 8.1a1 1 0 010 1.798L16.1 12m-8.2 0l3.662 1.786a1 1 0 00.877 0L16.1 12" }) }));
@@ -17204,6 +17207,9 @@ function SunIcon({ size = "24", className, }) {
 function MoonIcon({ size = "20", className, }) {
     return (jsx("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsx("path", { d: "M10.0463 2.99972C10.2292 2.73432 10.2427 2.38723 10.0809 2.10846C9.91903 1.8297 9.61096 1.66925 9.28979 1.69647C5.02109 2.05816 1.66992 5.63639 1.66992 9.9982C1.66992 14.5997 5.40018 18.33 10.0017 18.33C14.3636 18.33 17.9419 14.9787 18.3035 10.7098C18.3307 10.3887 18.1702 10.0806 17.8914 9.91879C17.6127 9.75698 17.2656 9.77044 17.0002 9.95336C16.1951 10.5083 15.2201 10.8331 14.1667 10.8331C11.4052 10.8331 9.16667 8.59452 9.16667 5.8331C9.16667 4.77977 9.49145 3.80481 10.0463 2.99972Z", fill: "currentColor" }) }));
 }
+function SunOutlinedIcon({ size = "24", className, }) {
+    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: "M12 3V2M12 22V21M18.3598 5.64005L19.0698 4.93005M4.93016 19.07L5.64016 18.36M21 12H22M2 12H3M18.3598 18.36L19.0698 19.07M4.93016 4.93005L5.64016 5.64005M15.5355 8.46447C17.4882 10.4171 17.4882 13.5829 15.5355 15.5355C13.5829 17.4882 10.4171 17.4882 8.46447 15.5355C6.51185 13.5829 6.51185 10.4171 8.46447 8.46447C10.4171 6.51185 13.5829 6.51185 15.5355 8.46447Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
 
 const dockIconClassname = "tw-text-grey-900";
 const dockIconSelectedClassname = "group-data-[squid-theme-type=dark]:tw-text-royal-700 group-data-[squid-theme-type=light]:tw-text-volt-700";
@@ -17229,6 +17235,58 @@ function DockIconHelp({ isSelected = false }) {
     return (jsxs("svg", { className: getDockIconClassname({ isSelected }), xmlns: "http://www.w3.org/2000/svg", width: "80", height: "80", viewBox: "0 0 100 100", fill: "none", children: [jsxs("g", { filter: "url(#filter0_dd_1744_41485)", children: [jsx("path", { d: "M50 17C34.5359 17 22 29.5359 22 45C22 60.4641 34.5359 73 50 73C65.4641 73 78 60.4641 78 45C78 29.5359 65.4698 17 50 17ZM50 55.7516C44.0637 55.7516 39.2484 50.9363 39.2484 45C39.2484 39.0637 44.0637 34.2484 50 34.2484C55.9363 34.2484 60.7516 39.0637 60.7516 45C60.7516 50.9363 55.9363 55.7516 50 55.7516Z", className: "tw-fill-current" }), jsx("path", { d: "M50 15.5C33.7075 15.5 20.5 28.7075 20.5 45C20.5 61.2925 33.7075 74.5 50 74.5C66.2925 74.5 79.5 61.2925 79.5 45C79.5 28.7077 66.2984 15.5 50 15.5ZM50 54.2516C44.8922 54.2516 40.7484 50.1078 40.7484 45C40.7484 39.8922 44.8922 35.7484 50 35.7484C55.1078 35.7484 59.2516 39.8922 59.2516 45C59.2516 50.1078 55.1078 54.2516 50 54.2516Z", className: "tw-stroke-grey-900", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" })] }), jsxs("mask", { id: "path-3-outside-1_1744_41485", maskUnits: "userSpaceOnUse", x: "67.4766", y: "19.3555", width: "9", height: "9", fill: "black", children: [jsx("rect", { fill: "white", x: "67.4766", y: "19.3555", width: "9", height: "9" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M71.0508 21.5019C70.8556 21.3067 70.539 21.3067 70.3437 21.5019C70.1485 21.6972 70.1485 22.0138 70.3437 22.209L71.2167 23.082L69.623 24.6757C69.4277 24.8709 69.4277 25.1875 69.623 25.3828C69.8183 25.578 70.1349 25.578 70.3301 25.3828L71.9238 23.7891L72.7971 24.6625C72.9924 24.8577 73.309 24.8577 73.5043 24.6625C73.6995 24.4672 73.6995 24.1506 73.5043 23.9553L71.0508 21.5019Z" })] }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M71.0508 21.5019C70.8556 21.3067 70.539 21.3067 70.3437 21.5019C70.1485 21.6972 70.1485 22.0138 70.3437 22.209L71.2167 23.082L69.623 24.6757C69.4277 24.8709 69.4277 25.1875 69.623 25.3828C69.8183 25.578 70.1349 25.578 70.3301 25.3828L71.9238 23.7891L72.7971 24.6625C72.9924 24.8577 73.309 24.8577 73.5043 24.6625C73.6995 24.4672 73.6995 24.1506 73.5043 23.9553L71.0508 21.5019Z", className: "tw-fill-grey-300" }), jsx("path", { d: "M70.3437 21.5019L71.7579 22.9161L71.7579 22.9161L70.3437 21.5019ZM71.0508 21.5019L69.6366 22.9161L69.6366 22.9161L71.0508 21.5019ZM70.3437 22.209L71.7579 20.7948L71.7579 20.7948L70.3437 22.209ZM71.2167 23.082L72.6309 24.4962C73.4119 23.7151 73.4119 22.4488 72.6309 21.6678L71.2167 23.082ZM69.623 24.6757L68.2088 23.2614L68.2088 23.2614L69.623 24.6757ZM69.623 25.3828L68.2088 26.797L68.2088 26.797L69.623 25.3828ZM70.3301 25.3828L71.7443 26.797L71.7443 26.797L70.3301 25.3828ZM71.9238 23.7891L73.338 22.3749C72.9629 21.9998 72.4542 21.7891 71.9238 21.7891C71.3933 21.7891 70.8846 21.9998 70.5096 22.3749L71.9238 23.7891ZM72.7971 24.6625L71.3829 26.0767L71.3829 26.0767L72.7971 24.6625ZM73.5043 24.6625L74.9185 26.0767L74.9185 26.0767L73.5043 24.6625ZM73.5043 23.9553L74.9185 22.5411V22.5411L73.5043 23.9553ZM71.7579 22.9161C71.1721 23.5019 70.2224 23.5019 69.6366 22.9161L72.465 20.0877C71.4887 19.1114 69.9058 19.1114 68.9295 20.0877L71.7579 22.9161ZM71.7579 20.7948C72.3437 21.3806 72.3437 22.3303 71.7579 22.9161L68.9295 20.0877C67.9532 21.064 67.9532 22.6469 68.9295 23.6232L71.7579 20.7948ZM72.6309 21.6678L71.7579 20.7948L68.9295 23.6232L69.8025 24.4962L72.6309 21.6678ZM71.0372 26.0899L72.6309 24.4962L69.8025 21.6678L68.2088 23.2614L71.0372 26.0899ZM71.0372 23.9685C71.623 24.5543 71.623 25.5041 71.0372 26.0899L68.2088 23.2614C67.2325 24.2377 67.2325 25.8207 68.2088 26.797L71.0372 23.9685ZM68.9159 23.9685C69.5017 23.3828 70.4514 23.3828 71.0372 23.9685L68.2088 26.797C69.1851 27.7733 70.768 27.7733 71.7443 26.797L68.9159 23.9685ZM70.5096 22.3749L68.9159 23.9685L71.7443 26.797L73.338 25.2033L70.5096 22.3749ZM74.2114 23.2482L73.338 22.3749L70.5096 25.2033L71.3829 26.0767L74.2114 23.2482ZM72.09 23.2482C72.6758 22.6625 73.6256 22.6625 74.2114 23.2482L71.3829 26.0767C72.3592 27.053 73.9422 27.053 74.9185 26.0767L72.09 23.2482ZM72.09 25.3696C71.5043 24.7838 71.5043 23.834 72.09 23.2482L74.9185 26.0767C75.8948 25.1004 75.8948 23.5174 74.9185 22.5411L72.09 25.3696ZM69.6366 22.9161L72.09 25.3696L74.9185 22.5411L72.465 20.0877L69.6366 22.9161Z", className: "tw-fill-current", mask: "url(#path-3-outside-1_1744_41485)" }), jsx("path", { d: "M50 17C34.5359 17 22 29.5359 22 45C22 60.4641 34.5359 73 50 73C65.4641 73 78 60.4641 78 45C78 29.5359 65.4698 17 50 17ZM50 55.7516C44.0637 55.7516 39.2484 50.9363 39.2484 45C39.2484 39.0637 44.0637 34.2484 50 34.2484C55.9363 34.2484 60.7516 39.0637 60.7516 45C60.7516 50.9363 55.9363 55.7516 50 55.7516Z", className: "tw-fill-current tw-stroke-grey-300", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M42.5276 26.845L42.5242 26.8404C41.9548 26.087 40.8824 25.9378 40.129 26.5072L34.9231 30.4415C34.1697 31.0109 34.0205 32.0833 34.5899 32.8367L34.5933 32.8413C35.1627 33.5947 36.2351 33.7439 36.9885 33.1745L42.1944 29.2402C42.9478 28.6708 43.097 27.5984 42.5276 26.845Z", className: "tw-fill-current tw-stroke-grey-300", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M65.4441 57.1753L65.4407 57.1707C64.8713 56.4173 63.7989 56.2681 63.0455 56.8375L57.8396 60.7718C57.0862 61.3412 56.937 62.4136 57.5064 63.167L57.5098 63.1716C58.0792 63.925 59.1516 64.0742 59.905 63.5048L65.1109 59.5705C65.8643 59.0011 66.0135 57.9287 65.4441 57.1753Z", className: "tw-fill-current tw-stroke-grey-300", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M71.8123 23.1934L69.9766 25.0292", className: "tw-stroke-grey-300", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M73.1507 24.3089L70.6973 21.8555", className: "tw-stroke-grey-300", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M66.1677 36.1298C64.0574 37.3709 61.2894 37.0048 59.5852 35.1119C57.9438 33.2875 57.8066 30.6339 59.1048 28.678", className: "tw-fill-current" }), jsx("path", { d: "M66.1677 36.1298C64.0574 37.3709 61.2894 37.0048 59.5852 35.1119C57.9438 33.2875 57.8066 30.6339 59.1048 28.678", className: "tw-stroke-grey-300", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M69.6218 31.4405C69.0213 31.8122 68.2206 31.7264 67.7117 31.1889C67.2027 30.6513 67.1684 29.9078 67.5287 29.3302", className: "tw-fill-current" }), jsx("path", { d: "M69.6218 31.4405C69.0213 31.8122 68.2206 31.7264 67.7117 31.1889C67.2027 30.6513 67.1684 29.9078 67.5287 29.3302", className: "tw-stroke-grey-300", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M66.1047 27.7116C65.5042 28.0833 64.7036 27.9976 64.1946 27.46C63.6856 26.9224 63.6513 26.1789 64.0116 25.6013", className: "tw-fill-current" }), jsx("path", { d: "M66.1047 27.7116C65.5042 28.0833 64.7036 27.9976 64.1946 27.46C63.6856 26.9224 63.6513 26.1789 64.0116 25.6013", className: "tw-stroke-grey-300", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M58.4985 28.2037C58.9217 28.5468 59.4193 28.7984 59.9454 28.9357L58.4985 28.2037Z", className: "tw-fill-current" }), jsx("path", { d: "M58.4985 28.2037C58.9217 28.5468 59.4193 28.7984 59.9454 28.9357", className: "tw-stroke-grey-300", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("defs", { children: jsxs("filter", { id: "filter0_dd_1744_41485", x: "0", y: "0", width: "100", height: "100", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), jsx("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), jsx("feMorphology", { radius: "1", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_1744_41485" }), jsx("feOffset", { dy: "5" }), jsx("feGaussianBlur", { stdDeviation: "10" }), jsx("feComposite", { in2: "hardAlpha", operator: "out" }), jsx("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" }), jsx("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_1744_41485" }), jsx("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), jsx("feOffset", { dy: "1" }), jsx("feGaussianBlur", { stdDeviation: "2.5" }), jsx("feComposite", { in2: "hardAlpha", operator: "out" }), jsx("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" }), jsx("feBlend", { mode: "normal", in2: "effect1_dropShadow_1744_41485", result: "effect2_dropShadow_1744_41485" }), jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_1744_41485", result: "shape" })] }) })] }));
 }
 
+function GhostIcon({ size = "20", className, }) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: className, children: jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.0002 1.66675C6.31826 1.66675 3.3335 4.64254 3.3335 8.31336V16.6688C3.3335 18.0204 4.86578 18.8065 5.96889 18.021L6.80466 17.4258C7.04159 17.2571 7.34967 17.2239 7.61729 17.3382L9.34363 18.0758C9.76288 18.255 10.2374 18.255 10.6567 18.0758L12.383 17.3382C12.6507 17.2239 12.9587 17.2571 13.1957 17.4258L14.0314 18.021C15.1345 18.8065 16.6668 18.0204 16.6668 16.6688V8.31336C16.6668 4.64254 13.6821 1.66675 10.0002 1.66675ZM9.16683 8.75008C9.16683 9.44044 8.60719 10.0001 7.91683 10.0001C7.22647 10.0001 6.66683 9.44044 6.66683 8.75008C6.66683 8.05973 7.22647 7.50008 7.91683 7.50008C8.60719 7.50008 9.16683 8.05973 9.16683 8.75008ZM12.0835 10.0001C12.7739 10.0001 13.3335 9.44044 13.3335 8.75008C13.3335 8.05973 12.7739 7.50008 12.0835 7.50008C11.3931 7.50008 10.8335 8.05973 10.8335 8.75008C10.8335 9.44044 11.3931 10.0001 12.0835 10.0001Z", fill: "currentColor" }) }));
+}
+function SettingsSliderIcon({ size = "20", className, }) {
+    return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: className, children: [jsx("path", { d: "M14.1667 2.5C12.6129 2.5 11.3081 3.56202 10.9383 5H3.33333C2.8731 5 2.5 5.3731 2.5 5.83333C2.5 6.29357 2.8731 6.66667 3.33333 6.66667H10.9383C11.3081 8.10465 12.6129 9.16667 14.1667 9.16667C16.0082 9.16667 17.5 7.67482 17.5 5.83333C17.5 3.99185 16.0082 2.5 14.1667 2.5Z", fill: "currentColor" }), jsx("path", { d: "M7.5 10.8333C5.94628 10.8333 4.64147 11.8953 4.2716 13.3333H3.33333C2.8731 13.3333 2.5 13.7064 2.5 14.1667C2.5 14.6269 2.8731 15 3.33333 15H4.2716C4.64147 16.438 5.94628 17.5 7.5 17.5C9.05372 17.5 10.3585 16.438 10.7284 15H16.6667C17.1269 15 17.5 14.6269 17.5 14.1667C17.5 13.7064 17.1269 13.3333 16.6667 13.3333H10.7284C10.3585 11.8953 9.05372 10.8333 7.5 10.8333Z", fill: "currentColor" })] }));
+}
+function EyeOpenIcon({ size = "20", className, }) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: className, children: jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.0002 3.33325C13.2933 3.33323 16.4923 5.22686 18.6308 8.81919C19.0637 9.54645 19.0637 10.4533 18.6308 11.1806C16.4923 14.7729 13.2933 16.6666 10.0002 16.6666C6.70711 16.6666 3.50807 14.773 1.36961 11.1806C0.936691 10.4534 0.936692 9.54654 1.36961 8.81928C3.50806 5.22694 6.70711 3.33328 10.0002 3.33325ZM7.08354 9.99992C7.08354 8.38909 8.38937 7.08325 10.0002 7.08325C11.611 7.08325 12.9169 8.38909 12.9169 9.99992C12.9169 11.6107 11.611 12.9166 10.0002 12.9166C8.38937 12.9166 7.08354 11.6107 7.08354 9.99992Z", fill: "currentColor" }) }));
+}
+function BellAlarmIcon({ size = "20", className, }) {
+    return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: className, children: [jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.99988 1.66678C6.71988 1.66678 3.94653 4.09489 3.51303 7.34611L2.75878 13.003C2.55895 14.5017 3.72487 15.8334 5.23685 15.8334H6.1279C6.88136 17.29 8.30102 18.3334 9.99987 18.3334C11.6987 18.3334 13.1184 17.29 13.8718 15.8334H14.7629C16.2749 15.8334 17.4408 14.5017 17.241 13.003L16.4867 7.34612C16.0532 4.09489 13.2799 1.66678 9.99988 1.66678ZM11.8513 15.8334H8.1484C8.65585 16.3645 9.31385 16.6668 9.99987 16.6668C10.6859 16.6668 11.3439 16.3645 11.8513 15.8334Z", fill: "currentColor" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.83481 1.65221C4.18713 1.94834 4.23268 2.47401 3.93655 2.82633C3.12664 3.78991 2.54294 4.94811 2.26535 6.2198C2.16719 6.66945 1.72311 6.95439 1.27346 6.85624C0.823814 6.75809 0.53887 6.31401 0.637023 5.86436C0.973718 4.32192 1.68141 2.91906 2.6607 1.75395C2.95683 1.40164 3.48249 1.35609 3.83481 1.65221ZM16.165 1.65221C16.5173 1.35609 17.043 1.40164 17.3391 1.75395C18.3184 2.91906 19.0261 4.32192 19.3628 5.86436C19.4609 6.31401 19.176 6.75809 18.7263 6.85624C18.2767 6.95439 17.8326 6.66945 17.7344 6.2198C17.4568 4.94811 16.8731 3.78991 16.0632 2.82633C15.7671 2.47401 15.8127 1.94834 16.165 1.65221Z", fill: "currentColor" })] }));
+}
+function LimitIcon({ size = "20", className, }) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: className, children: jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14.7139 6.11929C12.1104 3.51579 7.88928 3.51579 5.28578 6.11929C2.77054 8.63453 2.68525 12.6602 5.03004 15.2772C5.33716 15.62 5.30825 16.1469 4.96547 16.454C4.62269 16.7611 4.09585 16.7322 3.78873 16.3894C0.856646 13.1169 0.962783 8.08527 4.10727 4.94078C7.36164 1.68641 12.638 1.68641 15.8924 4.94078C19.0369 8.08527 19.143 13.1169 16.2109 16.3894C15.9038 16.7322 15.377 16.7611 15.0342 16.454C14.6914 16.1469 14.6625 15.62 14.9696 15.2772C17.3144 12.6602 17.2291 8.63453 14.7139 6.11929ZM6.90944 7.74408C7.23488 7.41864 7.76251 7.41864 8.08795 7.74408L10.588 10.2441C10.9134 10.5695 10.9134 11.0972 10.588 11.4226C10.2625 11.748 9.73488 11.748 9.40944 11.4226L6.90944 8.92259C6.584 8.59715 6.584 8.06952 6.90944 7.74408Z", fill: "currentColor" }) }));
+}
+function PoopIcon({ size = "20", className, }) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: className, children: jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.99984 3.33348C9.99984 2.4904 10.7451 1.51067 11.8637 1.79543C13.666 2.25426 14.9998 3.88705 14.9998 5.83348C14.9998 6.51535 14.8357 7.15921 14.5453 7.72739C15.7869 8.21228 16.6665 9.42016 16.6665 10.8335C16.6665 11.1983 16.6077 11.5479 16.4996 11.8745C17.5741 12.3045 18.3332 13.3554 18.3332 14.5835C18.3332 16.1943 17.0273 17.5001 15.4165 17.5001H4.58317C2.97234 17.5001 1.6665 16.1943 1.6665 14.5835C1.6665 13.3554 2.42554 12.3045 3.50009 11.8745C3.39194 11.5479 3.33317 11.1983 3.33317 10.8335C3.33317 9.51455 4.09888 8.37491 5.21027 7.83436C5.07429 7.47085 4.99984 7.0773 4.99984 6.66681C4.99984 4.82586 6.49222 3.33348 8.33317 3.33348H9.99984ZM9.1665 7.50012C8.70627 7.50012 8.33317 7.87322 8.33317 8.33345C8.33317 8.79369 8.70627 9.16679 9.1665 9.16679H9.99984C10.4601 9.16679 10.8332 8.79369 10.8332 8.33345C10.8332 7.87322 10.4601 7.50012 9.99984 7.50012H9.1665ZM11.6665 11.6668C11.2063 11.6668 10.8332 12.0399 10.8332 12.5001C10.8332 12.9604 11.2063 13.3335 11.6665 13.3335H12.4998C12.9601 13.3335 13.3332 12.9604 13.3332 12.5001C13.3332 12.0399 12.9601 11.6668 12.4998 11.6668H11.6665Z", fill: "currentColor" }) }));
+}
+function CatSquareIcon({ size = "20", className, }) {
+    return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: className, children: [jsx("path", { d: "M11.0744 13.3379C11.5495 13.2106 11.8109 12.6451 11.6581 12.0749C11.5053 11.5047 10.9962 11.1457 10.5211 11.273C10.0459 11.4003 9.78453 11.9658 9.93732 12.536C10.0901 13.1062 10.5992 13.4653 11.0744 13.3379Z", fill: "currentColor" }), jsx("path", { d: "M15.057 13.7462C15.1589 14.1264 14.7792 14.5584 14.209 14.7112C13.6388 14.864 13.0939 14.6796 12.9921 14.2995C12.8902 13.9194 13.2699 13.4873 13.8401 13.3345C14.4103 13.1818 14.9552 13.3661 15.057 13.7462Z", fill: "currentColor" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.16667 2.5C3.24619 2.5 2.5 3.24619 2.5 4.16667V15.8333C2.5 16.7538 3.24619 17.5 4.16667 17.5H15.8333C16.7538 17.5 17.5 16.7538 17.5 15.8333V4.16667C17.5 3.24619 16.7538 2.5 15.8333 2.5H4.16667ZM12.3973 7.76567C11.6727 7.95982 11.0031 8.24294 10.4045 8.59391L7.48285 7.91551C7.19114 7.84777 6.92536 8.10071 6.97858 8.39542L7.59801 11.8256C7.32824 12.6125 7.2779 13.4391 7.49351 14.2437C7.61973 14.7148 7.82865 15.1468 8.10601 15.5337C8.24716 15.7306 8.48134 15.8333 8.72362 15.8333H15C15.4602 15.8333 15.8333 15.4602 15.8333 15V11.9521C15.5014 11.8617 15.2088 11.5615 15.0993 11.1528C14.9465 10.5825 15.2078 10.0171 15.683 9.88975C15.7329 9.87638 15.7832 9.86838 15.8333 9.86541V6.44469C15.8333 6.37139 15.7455 6.3338 15.6925 6.3844L14.5374 7.48655C13.8434 7.4819 13.1219 7.57151 12.3973 7.76567Z", fill: "currentColor" })] }));
+}
+function FilterAscendingIcon({ size = "20", className, }) {
+    return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: className, children: [jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.83333 2.5C6.29357 2.5 6.66667 2.8731 6.66667 3.33333V14.6548L7.74408 13.5774C8.06951 13.252 8.59715 13.252 8.92259 13.5774C9.24803 13.9028 9.24803 14.4305 8.92259 14.7559L6.42259 17.2559C6.09715 17.5814 5.56951 17.5814 5.24408 17.2559L2.74408 14.7559C2.41864 14.4305 2.41864 13.9028 2.74408 13.5774C3.06951 13.252 3.59715 13.252 3.92259 13.5774L5 14.6548V3.33333C5 2.8731 5.3731 2.5 5.83333 2.5Z", fill: "currentColor" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14.5833 2.5C15.2592 2.5 15.8558 2.94152 16.0533 3.58792L17.0439 6.82978L17.4572 8.06981C17.6028 8.50643 17.3668 8.97836 16.9302 9.1239C16.4936 9.26944 16.0216 9.03348 15.8761 8.59686L15.6494 7.91667H13.5173L13.2906 8.59686C13.145 9.03348 12.6731 9.26944 12.2365 9.1239C11.7999 8.97836 11.5639 8.50643 11.7094 8.06981L12.1228 6.82977L13.1133 3.58792C13.3109 2.94152 13.9074 2.5 14.5833 2.5ZM14.5833 4.48053L14.0427 6.25H15.124L14.5833 4.48053Z", fill: "currentColor" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.6667 11.6667C11.6667 11.2064 12.0398 10.8333 12.5 10.8333H16.6667C16.99 10.8333 17.2842 11.0204 17.4213 11.3132C17.5585 11.606 17.5139 11.9518 17.3069 12.2002L14.2792 15.8333H16.6667C17.1269 15.8333 17.5 16.2064 17.5 16.6667C17.5 17.1269 17.1269 17.5 16.6667 17.5H12.5C12.1767 17.5 11.8825 17.313 11.7453 17.0201C11.6082 16.7273 11.6528 16.3816 11.8598 16.1332L14.8875 12.5H12.5C12.0398 12.5 11.6667 12.1269 11.6667 11.6667Z", fill: "currentColor" })] }));
+}
+function ImageIcon({ size = "20", className, }) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 25", fill: "none", className: className, children: jsx("path", { d: "M4 14.7105L6.84488 12.5821C7.66137 12.0378 8.75215 12.1663 9.41987 12.8853C10.9123 14.4926 12.6426 15.9538 15 15.9538C17.1727 15.9538 18.6125 15.1485 20 13.761M6 20.5H18C19.1046 20.5 20 19.6046 20 18.5V6.5C20 5.39543 19.1046 4.5 18 4.5H6C4.89543 4.5 4 5.39543 4 6.5V18.5C4 19.6046 4.89543 20.5 6 20.5ZM17 9.5C17 10.6046 16.1046 11.5 15 11.5C13.8954 11.5 13 10.6046 13 9.5C13 8.39543 13.8954 7.5 15 7.5C16.1046 7.5 17 8.39543 17 9.5Z", stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round" }) }));
+}
+function FilterTimelineIcon({ size = "20", className, }) {
+    return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: className, children: [jsx("path", { d: "M5.00117 3.33325C5.46141 3.33325 5.8345 3.70635 5.8345 4.16659V13.8206L6.91042 12.7442C7.23577 12.4186 7.76341 12.4185 8.08894 12.7438C8.41446 13.0692 8.4146 13.5968 8.08925 13.9224L5.59058 16.4224C5.43434 16.5787 5.22241 16.6665 5.00139 16.6666C4.78038 16.6666 4.56839 16.5789 4.41207 16.4227L1.91074 13.9227C1.58521 13.5973 1.58507 13.0697 1.91042 12.7442C2.23577 12.4186 2.76341 12.4185 3.08894 12.7438L4.16784 13.8222V4.16659C4.16784 3.70635 4.54093 3.33325 5.00117 3.33325Z", fill: "currentColor" }), jsx("path", { d: "M9.99984 4.99992C9.5396 4.99992 9.1665 5.37301 9.1665 5.83325C9.1665 6.29349 9.5396 6.66659 9.99984 6.66659H16.6665C17.1267 6.66659 17.4998 6.29349 17.4998 5.83325C17.4998 5.37301 17.1267 4.99992 16.6665 4.99992H9.99984Z", fill: "currentColor" }), jsx("path", { d: "M13.3332 13.3333C12.8729 13.3333 12.4998 13.7063 12.4998 14.1666C12.4998 14.6268 12.8729 14.9999 13.3332 14.9999H16.6665C17.1267 14.9999 17.4998 14.6268 17.4998 14.1666C17.4998 13.7063 17.1267 13.3333 16.6665 13.3333H13.3332Z", fill: "currentColor" }), jsx("path", { d: "M10.8332 9.99992C10.8332 9.53968 11.2063 9.16659 11.6665 9.16659H16.6665C17.1267 9.16659 17.4998 9.53968 17.4998 9.99992C17.4998 10.4602 17.1267 10.8333 16.6665 10.8333H11.6665C11.2063 10.8333 10.8332 10.4602 10.8332 9.99992Z", fill: "currentColor" })] }));
+}
+function PhoneIcon({ size = "24", className, }) {
+    return (jsx("svg", { className: className, xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 25 24", fill: "none", children: jsx("path", { d: "M10.5 19H14.5M8.5 22H16.5C17.6046 22 18.5 21.1046 18.5 20V4C18.5 2.89543 17.6046 2 16.5 2H8.5C7.39543 2 6.5 2.89543 6.5 4V20C6.5 21.1046 7.39543 22 8.5 22Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
+}
+function LaptopIcon({ size = "24", className, }) {
+    return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 25 24", fill: "none", className: className, children: [jsx("path", { d: "M4.5 6C4.5 4.89543 5.39543 4 6.5 4H18.5C19.6046 4 20.5 4.89543 20.5 6V15C20.5 15.5523 20.0523 16 19.5 16H5.5C4.94772 16 4.5 15.5523 4.5 15V6Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "square", strokeLinejoin: "round" }), jsx("path", { d: "M2.5 16H22.5V18C22.5 19.1046 21.6046 20 20.5 20H4.5C3.39543 20 2.5 19.1046 2.5 18V16Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "square", strokeLinejoin: "round" })] }));
+}
+function CopyIcon({ size = "20", className, }) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 21 20", fill: "none", className: className, children: jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.16663 6.66666V3.54166C7.16663 2.50612 8.00609 1.66666 9.04163 1.66666H16.9583C17.9938 1.66666 18.8333 2.50612 18.8333 3.54166V11.4583C18.8333 12.4939 17.9938 13.3333 16.9583 13.3333H13.8333V16.4583C13.8333 17.4939 12.9938 18.3333 11.9583 18.3333H4.04163C3.00609 18.3333 2.16663 17.4939 2.16663 16.4583V8.54166C2.16663 7.50612 3.00609 6.66666 4.04163 6.66666H7.16663ZM9.04163 13.3333C8.00609 13.3333 7.16663 12.4939 7.16663 11.4583V8.33332H4.04163C3.92657 8.33332 3.83329 8.4266 3.83329 8.54166V16.4583C3.83329 16.5734 3.92657 16.6667 4.04163 16.6667H11.9583C12.0734 16.6667 12.1666 16.5734 12.1666 16.4583V13.3333H9.04163Z", fill: "currentColor" }) }));
+}
+function FileDownloadIcon({ size = "20", className, }) {
+    return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 21 20", fill: "none", children: [jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.33337 1.66666H10.5V5.83332C10.5 7.21404 11.6193 8.33332 13 8.33332H17.1667V15.8333C17.1667 17.214 16.0474 18.3333 14.6667 18.3333H6.33337C4.95266 18.3333 3.83337 17.214 3.83337 15.8333V4.16666C3.83337 2.78594 4.95266 1.66666 6.33337 1.66666ZM13.1726 14.3392L11.0893 16.4226C10.7639 16.748 10.2362 16.748 9.91079 16.4226L7.82745 14.3392C7.50201 14.0138 7.50201 13.4862 7.82745 13.1607C8.15289 12.8353 8.68053 12.8353 9.00596 13.1607L9.66671 13.8215V10.8333C9.66671 10.3731 10.0398 9.99999 10.5 9.99999C10.9603 9.99999 11.3334 10.3731 11.3334 10.8333V13.8215L11.9941 13.1607C12.3196 12.8353 12.8472 12.8353 13.1726 13.1607C13.4981 13.4862 13.4981 14.0138 13.1726 14.3392Z", fill: "currentColor" }), jsx("path", { d: "M12.1667 2.15481L16.6786 6.66666H13C12.5398 6.66666 12.1667 6.29356 12.1667 5.83332V2.15481Z", fill: "currentColor" })] }));
+}
+function CodeSolidSquareIcon({ size = "24", className, }) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 25 24", fill: "none", className: className, children: jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.5 6C3.5 4.34315 4.84315 3 6.5 3H18.5C20.1569 3 21.5 4.34315 21.5 6V18C21.5 19.6569 20.1569 21 18.5 21H6.5C4.84315 21 3.5 19.6569 3.5 18V6ZM11.2071 8.79289C11.5976 9.18342 11.5976 9.81658 11.2071 10.2071L9.41421 12L11.2071 13.7929C11.5976 14.1834 11.5976 14.8166 11.2071 15.2071C10.8166 15.5976 10.1834 15.5976 9.79289 15.2071L8 13.4142C7.21895 12.6332 7.21895 11.3668 8 10.5858L9.79289 8.79289C10.1834 8.40237 10.8166 8.40237 11.2071 8.79289ZM15.2071 8.79289C14.8166 8.40237 14.1834 8.40237 13.7929 8.79289C13.4024 9.18342 13.4024 9.81658 13.7929 10.2071L15.5858 12L13.7929 13.7929C13.4024 14.1834 13.4024 14.8166 13.7929 15.2071C14.1834 15.5976 14.8166 15.5976 15.2071 15.2071L17 13.4142C17.781 12.6332 17.781 11.3668 17 10.5858L15.2071 8.79289Z", fill: "currentColor" }) }));
+}
+function CodeBracketsIcon({ size = "20", className, }) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: className, children: jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.8688 2.5249C12.3153 2.63652 12.5867 3.08896 12.4751 3.53546L9.14178 16.8688C9.03015 17.3153 8.57771 17.5868 8.13121 17.4752C7.68472 17.3635 7.41325 16.9111 7.52487 16.4646L10.8582 3.13123C10.9698 2.68474 11.4223 2.41327 11.8688 2.5249ZM5.58925 6.07746C5.91469 6.4029 5.91469 6.93053 5.58925 7.25597L3.43443 9.41079C3.10899 9.73623 3.10899 10.2639 3.43443 10.5893L5.58925 12.7441C5.91469 13.0696 5.91469 13.5972 5.58925 13.9226C5.26381 14.2481 4.73617 14.2481 4.41074 13.9226L2.25591 11.7678C1.2796 10.7915 1.27961 9.20859 2.25592 8.23228L4.41074 6.07746C4.73617 5.75202 5.26381 5.75202 5.58925 6.07746ZM14.4107 6.07746C14.7362 5.75202 15.2638 5.75202 15.5892 6.07746L17.7441 8.23228C18.7204 9.20859 18.7204 10.7915 17.7441 11.7678L15.5892 13.9226C15.2638 14.2481 14.7362 14.2481 14.4107 13.9226C14.0853 13.5972 14.0853 13.0696 14.4107 12.7441L16.5656 10.5893C16.891 10.2639 16.891 9.73623 16.5656 9.41079L14.4107 7.25597C14.0853 6.93053 14.0853 6.4029 14.4107 6.07746Z", fill: "currentColor" }) }));
+}
+function CommandIcon({ size = "22", className, }) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 22 22", fill: "none", className: className, children: jsx("path", { d: "M8 17V17C8 16.0219 8.28951 15.0657 8.83205 14.2519L13.1679 7.74808C13.7105 6.93427 14 5.97808 14 5V5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+
 function FeeButton(_a) {
     var { feeInUsd = "0", chipLabel = "Fee", className, tooltip } = _a, props = __rest$1(_a, ["feeInUsd", "chipLabel", "className", "tooltip"]);
     return (jsx(Tooltip, Object.assign({}, tooltip, { tooltipWidth: "max", containerClassName: "tw-rounded-squid-m tw-w-full", childrenClassName: "tw-rounded-squid-m", children: jsxs("button", Object.assign({}, props, { className: cn("tw-flex tw-h-squid-xl tw-w-full tw-items-center tw-gap-x-squid-xs tw-rounded-squid-m tw-px-squid-xs hover:tw-bg-material-light-thin", className), children: [jsx(Chip, { label: chipLabel, className: "tw-hidden mobile-xs:tw-flex" }), jsxs("span", { className: "tw-flex tw-items-center", children: [jsx(UsdAmount, { usdAmount: feeInUsd }), jsx(ChevronDownSmallIcon, { className: "tw-text-grey-600" })] })] })) })));
@@ -17281,6 +17339,68 @@ const darkTheme = {
     "highlight-700": "#08A054",
 };
 
+var createPlugin$2 = {};
+
+var createPlugin$1 = {};
+
+(function (exports) {
+	Object.defineProperty(exports, "__esModule", {
+	    value: true
+	});
+	Object.defineProperty(exports, "default", {
+	    enumerable: true,
+	    get: function() {
+	        return _default;
+	    }
+	});
+	function createPlugin(plugin, config) {
+	    return {
+	        handler: plugin,
+	        config
+	    };
+	}
+	createPlugin.withOptions = function(pluginFunction, configFunction = ()=>({})) {
+	    const optionsFunction = function(options) {
+	        return {
+	            __options: options,
+	            handler: pluginFunction(options),
+	            config: configFunction(options)
+	        };
+	    };
+	    optionsFunction.__isOptionsFunction = true;
+	    // Expose plugin dependencies so that `object-hash` returns a different
+	    // value if anything here changes, to ensure a rebuild is triggered.
+	    optionsFunction.__pluginFunction = pluginFunction;
+	    optionsFunction.__configFunction = configFunction;
+	    return optionsFunction;
+	};
+	const _default = createPlugin; 
+} (createPlugin$1));
+
+(function (exports) {
+	Object.defineProperty(exports, "__esModule", {
+	    value: true
+	});
+	Object.defineProperty(exports, "default", {
+	    enumerable: true,
+	    get: function() {
+	        return _default;
+	    }
+	});
+	const _createPlugin = /*#__PURE__*/ _interop_require_default(createPlugin$1);
+	function _interop_require_default(obj) {
+	    return obj && obj.__esModule ? obj : {
+	        default: obj
+	    };
+	}
+	const _default = _createPlugin.default; 
+} (createPlugin$2));
+
+let createPlugin = createPlugin$2;
+var plugin = (createPlugin.__esModule ? createPlugin : { default: createPlugin }).default;
+
+var plugin$1 = /*@__PURE__*/getDefaultExportFromCjs(plugin);
+
 const spacing$1 = {
     "squid-xxs": "0.3125rem", // 5px
     "squid-xs": "0.625rem", // 10px
@@ -17595,7 +17715,27 @@ const baseTailwindConfig = {
             }, {})),
         },
     },
-    plugins: [],
+    plugins: [
+        // custom classes available for anyone extending this config
+        plugin$1(({ addUtilities }) => {
+            addUtilities({
+                ".focus-visible-within-outline:has(:focus-visible)": {
+                    "outline-style": "solid",
+                    "outline-width": "2px",
+                    "outline-color": `var(${themeTypesKeys["royal-500"].cssVariable})`,
+                },
+                ".scrollbar-hidden": {
+                    scrollbarWidth: "none",
+                },
+                ".highlight-adjacent:has(button:hover)>button:first-child": {
+                    backgroundColor: `var(${themeTypesKeys["material-light-thin"].cssVariable})`,
+                },
+                ".highlight-adjacent:has(*:hover) .hide-on-parent-hover": {
+                    opacity: "0",
+                },
+            });
+        }),
+    ],
 };
 
 function StopsButton(_a) {
@@ -17645,431 +17785,89 @@ function DetailsToolbar({ errorMessage, helpButton, isLoading, isEmpty, flipButt
                                     "group-hover/flip-button:tw-rotate-180") }) }) }))) }), jsx("div", { className: cn(detailClassName, "tw-justify-end"), children: !!stopsButton && jsx(StopsButton, Object.assign({}, stopsButton)) })] })) }));
 }
 
-function DropdownMenuItem({ label, imageUrl, icon, labelClassName, onClick, link, }) {
-    const ContentTag = link ? "a" : "button";
-    const contentTagProps = link
-        ? {
-            href: link,
-            target: "_blank",
-        }
-        : {};
-    return (jsx("li", { className: "tw-max-h-squid-xl tw-w-full tw-px-squid-xxs", children: jsxs(ContentTag, Object.assign({}, contentTagProps, { onClick: (event) => {
-                event.stopPropagation();
-                onClick === null || onClick === void 0 ? void 0 : onClick();
-            }, className: "tw-flex tw-h-squid-l tw-w-full tw-cursor-pointer tw-items-center tw-gap-squid-xxs tw-rounded-squid-xs tw-px-squid-xxs hover:tw-bg-material-light-thin", children: [jsx("div", { className: "tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-between tw-rounded-squid-xs", children: imageUrl ? (jsx("img", { src: imageUrl, className: "tw-h-full tw-w-full tw-rounded-squid-xxs" })) : (icon) }), jsx(CaptionText, { className: cn(labelClassName, "tw-max-w-full tw-truncate !tw-leading-[18px]"), children: label })] })) }));
-}
-
-function useDropdownMenu(props) {
-    const { initialIsModalOpen, itemsContainerRef } = props !== null && props !== void 0 ? props : {};
-    const [isDropdownOpen, setIsModalOpen] = useState(Boolean(initialIsModalOpen));
-    const dropdownRef = useRef(null);
-    const openDropdownButtonRef = useRef(null);
-    useEffect(() => {
-        const handleClickOutside = (event) => {
-            var _a;
-            // close modal if the user clicked outside of it
-            if (dropdownRef.current &&
-                !dropdownRef.current.contains(event.target) &&
-                !((_a = openDropdownButtonRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
-                setIsModalOpen(false);
-            }
-        };
-        document.addEventListener("click", handleClickOutside);
-        return () => {
-            document.removeEventListener("click", handleClickOutside);
-        };
-    }, [dropdownRef]);
-    const openDropdown = useCallback(() => {
-        setIsModalOpen((prev) => !prev);
-    }, []);
-    const closeDropdown = useCallback(() => {
-        setIsModalOpen(false);
-    }, []);
-    const [dropdownPosition, setDropdownPosition] = useState(null);
-    const itemRef = useRef(null);
-    const menuRef = useRef(null);
-    // Effect to find the best position for the dropdown menu, so it's always visible for the user
-    useEffect(() => {
-        var _a;
-        if (!isDropdownOpen) {
-            // when the dropdown is closed, we want to reset its position
-            // because user may scroll, and the old position may be out of view, so we'll need to recalculate it
-            setDropdownPosition(null);
-            return;
-        }
-        const item = itemRef.current;
-        const itemsContainer = (_a = itemsContainerRef === null || itemsContainerRef === void 0 ? void 0 : itemsContainerRef.current) !== null && _a !== void 0 ? _a : item === null || item === void 0 ? void 0 : item.parentElement;
-        const dropdownMenu = menuRef.current;
-        if (!item || !dropdownRef.current || !itemsContainer || !dropdownMenu) {
-            return;
-        }
-        // Get the bounding rectangle of the item
-        const itemRect = item.getBoundingClientRect();
-        // Get the bounding rectangle of the container element
-        const containerRect = itemsContainer.getBoundingClientRect();
-        // Calculate the bottom position of the visible area of the the items container
-        const containerVisibleBottom = containerRect.top + containerRect.height;
-        // Calculate the distance from the bottom of the item to the visible bottom of the items container
-        const distanceBetweenItemBottomAndContainerBottomEdge = containerVisibleBottom - itemRect.bottom;
-        // the same but for the top
-        const distanceBetweenItemTopAndContainerTopEdge = itemRect.top - containerRect.top;
-        const dropdownMenuHeight = dropdownMenu.clientHeight;
-        // check if the height of the dropdown is less than the longest distance, either top or bottom
-        // if so, means that the dropdown keeps visible when positioned at the top or bottom of the item
-        const isDropdownVisibleAtItemTopOrBottom = dropdownMenuHeight <=
-            Math.max(distanceBetweenItemBottomAndContainerBottomEdge, distanceBetweenItemTopAndContainerTopEdge);
-        // if the dropdown is not visible at top or bottom of the item
-        // we just center it
-        if (!isDropdownVisibleAtItemTopOrBottom) {
-            return setDropdownPosition("center");
-        }
-        // finally, if the dropdown fits, position it where it has more space
-        if (distanceBetweenItemBottomAndContainerBottomEdge >=
-            distanceBetweenItemTopAndContainerTopEdge) {
-            setDropdownPosition("bottom");
-        }
-        else {
-            setDropdownPosition("top");
-        }
-    }, [isDropdownOpen, menuRef, dropdownPosition, itemRef]);
-    return {
-        isDropdownOpen,
-        openDropdown,
-        closeDropdown,
-        dropdownRef,
-        openDropdownButtonRef,
-        dropdownPosition,
-        itemRef,
-        menuRef,
-    };
+const borderRadiusClassMap = {
+    sm: "tw-rounded-squid-s",
+    lg: "tw-rounded-squid-m",
+};
+function Menu(_a) {
+    var { children, containerClassName, contentClassName, rounded = "lg", menuRef, contentWrapperProps } = _a, props = __rest$1(_a, ["children", "containerClassName", "contentClassName", "rounded", "menuRef", "contentWrapperProps"]);
+    return (jsx("div", Object.assign({}, props, { className: cn("tw-max-w-[320px]", containerClassName), ref: menuRef, children: jsxs("div", { className: cn("tw-relative tw-inline-flex tw-max-w-full tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-m tw-bg-material-dark-thick tw-p-squid-xs tw-text-center tw-text-material-light-thick group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2", borderRadiusClassMap[rounded], contentClassName, 
+            // :before element to create a backdrop
+            // Not applied to the div itself because the backdrop-filter spec does not apply nested backdrop filters
+            "before:tw-absolute before:tw-inset-0 before:-tw-z-[1] before:tw-h-full before:tw-w-full before:tw-rounded-squid-m before:tw-backdrop-blur/20 before:tw-backdrop-saturate-150"), children: [typeof children === "string" ? (jsx(CaptionText, { className: "tw-z-20 tw-self-stretch !tw-leading-[10px]", children: children })) : (jsx("div", Object.assign({}, contentWrapperProps, { className: cn("tw-z-20 tw-max-w-full tw-text-caption", contentWrapperProps === null || contentWrapperProps === void 0 ? void 0 : contentWrapperProps.className), children: children }))), jsx("div", { className: cn("tw-absolute tw-inset-0 tw-z-10 tw-h-full tw-w-full tw-border tw-border-material-light-thin tw-bg-material-light-thin", borderRadiusClassMap[rounded]) })] }) })));
 }
 
-const IS_SERVER = typeof window === "undefined";
-const useIsomorphicLayoutEffect$1 = IS_SERVER ? useEffect : useLayoutEffect;
-/**
- * Custom hook that tracks the state of a media query using the [`Match Media API`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia).
- * @param {string} query - The media query to track.
- * @param {?UseMediaQueryOptions} [options] - The options for customizing the behavior of the hook (optional).
- * @returns {boolean} The current state of the media query (true if the query matches, false otherwise).
- * @public
- * @example
- * ```tsx
- * const isSmallScreen = useMediaQuery('(max-width: 600px)');
- * // Use `isSmallScreen` to conditionally apply styles or logic based on the screen size.
- * ```
- */
-function useMediaQuery(query, { defaultValue = false, initializeWithValue = true, } = {}) {
-    const getMatches = (query) => {
-        if (IS_SERVER) {
-            return defaultValue;
-        }
-        return window.matchMedia(query).matches;
-    };
-    const [matches, setMatches] = useState(() => {
-        if (initializeWithValue) {
-            return getMatches(query);
-        }
-        return defaultValue;
-    });
-    // Handles the change event of the media query.
-    function handleChange() {
-        setMatches(getMatches(query));
-    }
-    useIsomorphicLayoutEffect$1(() => {
-        const matchMedia = window.matchMedia(query);
-        // Triggered at the first client-side load and if query changes
-        handleChange();
-        // Use deprecated `addListener` and `removeListener` to support Safari < 14 (#135)
-        if (matchMedia.addListener) {
-            matchMedia.addListener(handleChange);
-        }
-        else {
-            matchMedia.addEventListener("change", handleChange);
-        }
-        return () => {
-            if (matchMedia.removeListener) {
-                matchMedia.removeListener(handleChange);
-            }
-            else {
-                matchMedia.removeEventListener("change", handleChange);
-            }
-        };
-    }, [query]);
-    return matches;
+function DropdownMenu({ dropdownRef, className, menuRef, isHidden = false, listClassName, containerClassName, children, contentWrapperProps, menuContentClassName, }) {
+    return (jsx("div", { ref: dropdownRef, className: cn("tw-relative", containerClassName), children: jsx(Menu, { menuRef: menuRef, rounded: "sm", containerClassName: cn("tw-absolute tw-right-0 tw-z-20", className), contentClassName: cn("!tw-p-0", menuContentClassName), contentWrapperProps: contentWrapperProps, children: !isHidden && (jsx("ul", { className: cn("tw-flex tw-max-w-full tw-flex-col tw-gap-squid-xxs tw-px-0 tw-py-squid-xxs", listClassName), children: children })) }) }));
 }
 
-function useCollapsibleMenu() {
-    const [isMenuOpen, setIsMenuOpen] = useState(false);
-    const menuRef = useRef(null);
-    const toggleMenu = () => {
-        setIsMenuOpen(!isMenuOpen);
-    };
-    useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (menuRef.current && !menuRef.current.contains(event.target)) {
-                setIsMenuOpen(false);
-            }
-        };
-        document.addEventListener("mousedown", handleClickOutside);
-        return () => document.removeEventListener("mousedown", handleClickOutside);
-    }, []);
-    return {
-        isMenuOpen,
-        toggleMenu,
-        menuRef,
-    };
+function InfoBox({ title, description, icon }) {
+    return (jsxs("div", { className: "tw-align-self-stretch tw-flex tw-flex-col tw-items-center tw-gap-squid-xs tw-px-squid-m tw-pb-squid-l tw-pt-squid-xs tw-text-royal-400", children: [icon, jsxs("div", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xxs tw-text-center", children: [jsx(BodyText, { size: "small", className: "!tw-leading-[9px]", children: title }), jsx(CaptionText, { className: "tw-text-grey-500", children: description })] })] }));
 }
 
-const useTimer = ({ immediateStart = true, }) => {
-    const [timer, setTimer] = useState("0s");
-    const intervalRef = useRef(null);
-    const startTimer = () => {
-        if (intervalRef.current !== null)
-            return; // Prevent multiple intervals
-        const startTime = Date.now();
-        intervalRef.current = window.setInterval(() => {
-            const elapsedTime = Date.now() - startTime;
-            setTimer(formatDuration(elapsedTime));
-        }, 1000);
-    };
-    const stopTimer = () => {
-        if (intervalRef.current !== null) {
-            clearInterval(intervalRef.current);
-            intervalRef.current = null;
-        }
-    };
+const modalWidthClassMap = {
+    large: "mobile-lg:tw-w-modal-large",
+    "extra-large": "mobile-lg:tw-w-modal-extra-large",
+};
+function Modal({ children, className, onBackdropClick, isOpen: _isOpen = true, maxHeight = false, width = "large", }) {
+    const [isOpen, setIsOpen] = useState(_isOpen);
     useEffect(() => {
-        if (immediateStart) {
-            startTimer();
-        }
+        if (_isOpen)
+            return setIsOpen(true);
+        const timeoutId = setTimeout(() => {
+            setIsOpen(false);
+        }, ANIMATION_DURATIONS.HIDE_MODAL);
         return () => {
-            stopTimer();
+            clearTimeout(timeoutId);
         };
-    }, [immediateStart]);
-    return { timer, stopTimer, startTimer };
-};
-
-const dropdownPositionClassMap$1 = {
-    top: "tw-right-[calc(100%-10px)] tw-bottom-7",
-    bottom: "tw-right-[calc(100%-10px)] tw-top-7",
-    center: "tw-right-[40px] -tw-top-[55px]",
-};
-const listItemSizeMap = {
-    small: "tw-h-list-item-small",
-    large: "tw-h-list-item-large",
-};
-const collapsedListItemClassMap = {
-    small: "tw-w-[70px]",
-    large: "tw-w-[80px]",
-};
-function ListItem(_a) {
-    var { itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, placeholderImageUrl, size = "large", mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded = false, detailButtonClassName, loading, containerProps, compactOnMobile, extraPadding = true, itemsContainerRef, dropdownMenuItems: _dropdownMenuItemsProp } = _a, props = __rest$1(_a, ["itemTitle", "mainImageUrl", "subtitle", "subtitleOnHover", "detail", "icon", "secondaryImageUrl", "placeholderImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading", "containerProps", "compactOnMobile", "extraPadding", "itemsContainerRef", "dropdownMenuItems"]);
-    const subtitleClassName = cn("tw-h-[14px] tw-max-w-full tw-truncate !tw-leading-[16px] tw-text-grey-500", compactOnMobile ? "tw-hidden mobile-lg:tw-block" : "tw-block");
-    // 'small' variant does not have detail
-    const showDetail = size === "large" && (!!detail || !!icon || showDetailOnHoverOnly);
-    const isDetailInteractive = !!onDetailClick;
-    const DetailTag = isDetailInteractive ? "button" : "div";
-    const detailProps = isDetailInteractive
-        ? {
-            onClick: (event) => {
-                // prevent click event from bubbling up to parent
-                event.stopPropagation();
-                onDetailClick === null || onDetailClick === void 0 ? void 0 : onDetailClick();
-            },
-        }
-        : {};
-    // There are two possible ways to handle loading state:
-    // Can be boolean or string
-    // If boolean and true, it will show a full loading skeleton
-    // If it's a non empty string, means that we want to display the skeleton + some text
-    const loadingComponent = () => {
-        if ((loading === null || loading === void 0 ? void 0 : loading.subtitle) === true) {
-            return jsx(TextSkeleton, { width: "50px", className: "tw-h-2.5", isLoading: true });
-        }
-        if (typeof (loading === null || loading === void 0 ? void 0 : loading.subtitle) === "string" && loading.subtitle.length > 0) {
-            return (jsxs("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsx(TextSkeleton, { width: "50px", className: "tw-h-2.5", isLoading: true }), jsx(CaptionText, { className: subtitleClassName, children: loading.subtitle })] }));
-        }
-        return null;
-    };
-    const isInteractive = !!props.onClick;
-    const ItemTag = isInteractive ? "button" : "div";
-    const itemProps = isInteractive ? props : {};
-    const { isDropdownOpen, dropdownRef, openDropdownButtonRef, openDropdown, closeDropdown, itemRef, menuRef, dropdownPosition, } = useDropdownMenu({
-        itemsContainerRef,
-    });
-    const dropdownMenuItems = _dropdownMenuItemsProp === null || _dropdownMenuItemsProp === void 0 ? void 0 : _dropdownMenuItemsProp.map((item) => (Object.assign(Object.assign({}, item), { onClick: () => {
-            var _a;
-            (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item);
-            closeDropdown();
-        } })));
-    return (jsx("li", Object.assign({}, containerProps, { ref: itemRef, className: cn("tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300", listItemSizeMap[size], extraPadding && "tw-px-squid-xs", compactOnMobile
-            ? `${collapsedListItemClassMap[size]} mobile-lg:tw-w-full`
-            : "tw-w-full", className), children: jsxs(ItemTag, Object.assign({}, itemProps, { className: cn("tw-group/list-item tw-relative tw-flex tw-w-full tw-max-w-full tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs", isSelected && "tw-bg-material-light-thin", isInteractive && "hover:tw-bg-material-light-thin"), children: [size === "large" ? (jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, placeholderImageUrl: placeholderImageUrl, size: "md", rounded: rounded })) })) : (jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon ? (mainIcon) : (jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxs("div", { className: cn("tw-flex tw-h-[40px] tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xxs", 
-                    // 'large' variant has extra padding
-                    size === "large" ? "tw-w-[56%] tw-pl-squid-xxs" : "tw-w-[67%]"), children: [typeof itemTitle === "string" ? (jsx(BodyText, { size: "small", className: cn("tw-max-w-full tw-truncate", subtitle && "tw-h-[17px] !tw-leading-[17px]", compactOnMobile ? "tw-hidden mobile-lg:tw-block" : "tw-block"), children: itemTitle })) : (itemTitle), size === "large" &&
-                            ((loading === null || loading === void 0 ? void 0 : loading.subtitle) ? (loadingComponent()) : subtitle ? (jsxs(CaptionText, { className: subtitleClassName, children: [subtitleOnHover && (jsx(CaptionText, { className: cn(subtitleClassName, "tw-hidden group-hover/list-item:tw-block"), children: subtitleOnHover })), subtitle] })) : null)] }), showDetail && (jsxs(DetailTag, Object.assign({}, detailProps, { className: cn("tw-flex tw-w-fit tw-items-center tw-justify-center tw-rounded-squid-xs", size === "large" ? "tw-h-squid-xl" : "tw-h-squid-l", showDetailOnHoverOnly
-                        ? "tw-opacity-0 hover:tw-opacity-100 focus:tw-opacity-100 group-hover/list-item:tw-opacity-100 group-focus/list-item:tw-opacity-100"
-                        : "tw-flex", isDetailInteractive && "hover:tw-bg-material-light-thin", detailButtonClassName), children: [!!detail && (jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })), icon ? (jsx("span", { className: "tw-flex tw-items-center tw-justify-center tw-px-[3px] tw-py-2", children: icon })) : null] }))), !!dropdownMenuItems && (jsx(ListItemActionsButton, { onClick: openDropdown, ref: openDropdownButtonRef, className: "tw-opacity-0 group-hover/list-item:tw-opacity-100" })), isDropdownOpen && !!dropdownMenuItems ? (jsx(DropdownMenu, { menuRef: menuRef, isHidden: !dropdownPosition, className: cn(!!dropdownPosition && dropdownPositionClassMap$1[dropdownPosition]), dropdownRef: dropdownRef, items: dropdownMenuItems })) : null] })) })));
-}
-const ListItemActionsButton = forwardRef((props) => {
-    return (jsx("button", Object.assign({}, props, { onClick: (event) => {
-            var _a;
-            event.stopPropagation();
-            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, event);
-        }, className: cn("tw-peer tw-absolute tw-right-squid-xxs tw-top-squid-xxs tw-flex tw-h-squid-xl tw-w-squid-xl tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-material-light-blend-grey-800 tw-p-2 tw-text-grey-300 tw-transition-opacity focus:tw-opacity-100", props.className), children: jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })));
-});
-
-const dropdownPositionClassMap = {
-    top: "tw-right-[calc(100%-10px)] tw-bottom-7",
-    bottom: "tw-right-[calc(100%-10px)] tw-top-7",
-    center: "tw-right-[40px] -tw-top-[55px]",
-};
-const statusBadge = {
-    completed: {},
-    pending: {
-        badge: (jsx(Loader, { size: "16", strokeWidth: "4", className: "group-data-[squid-theme-type=dark]:tw-text-grey-100 group-data-[squid-theme-type=light]:tw-text-grey-900" })),
-        containerClassName: "tw-bg-royal-400",
-    },
-    failed: {
-        badge: (jsx("span", { className: "tw-bg-grey-900", children: jsx(EmojiSadIcon, { className: "tw-text-status-negative" }) })),
-        containerClassName: "tw-bg-status-negative",
-    },
-    warning: {
-        badge: (jsx("span", { className: "tw-bg-grey-900", children: jsx(EmojiMeh, { className: "tw-text-status-partial" }) })),
-        containerClassName: "tw-bg-status-partial",
-    },
-};
-function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, dropdownMenuItems: _dropdownMenuItemsProp, itemsContainerRef, status, warningLabel, onClick, }) {
-    const { isDropdownOpen, dropdownRef, openDropdownButtonRef, openDropdown, closeDropdown, itemRef, menuRef, dropdownPosition, } = useDropdownMenu({
-        itemsContainerRef,
-    });
-    const dropdownMenuItems = _dropdownMenuItemsProp === null || _dropdownMenuItemsProp === void 0 ? void 0 : _dropdownMenuItemsProp.map((item) => (Object.assign(Object.assign({}, item), { onClick: () => {
-            var _a;
-            (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item);
-            closeDropdown();
-        } })));
-    const statusLabel = useMemo(() => {
-        switch (status) {
-            case "completed":
-                return jsx(CaptionText, { children: dateCompleted });
-            case "pending":
-                return jsx(CaptionText, { className: "tw-text-royal-400", children: "Pending" });
-            case "failed":
-                return (jsxs(Fragment, { children: [jsx(CaptionText, { className: "tw-text-status-negative", children: "Fail" }), jsx(CaptionText, { children: dateCompleted })] }));
-            case "warning":
-                return (jsx(CaptionText, { className: "tw-text-status-partial", children: warningLabel }));
-            default:
-                return null;
-        }
-    }, [status, dateCompleted]);
-    const isInteractive = !!onClick;
-    const ItemTag = isInteractive ? "button" : "div";
-    const itemTagProps = isInteractive
-        ? {
-            onClick,
-        }
-        : {};
-    return (jsx("li", { ref: itemRef, className: "tw-h-list-item-large tw-min-w-list-item-small tw-self-stretch tw-bg-grey-900 tw-px-squid-xs tw-text-grey-300", children: jsxs(ItemTag, Object.assign({}, itemTagProps, { className: cn("tw-group/history-item tw-relative tw-flex tw-w-full tw-flex-shrink-0 tw-items-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs", isInteractive && "hover:tw-bg-material-light-thin"), children: [jsxs("div", { className: "tw-relative tw-h-10 tw-w-[60px]", children: [!!statusBadge[status].badge && (jsx("span", { className: cn("tw-absolute -tw-left-[5px] tw-bottom-0 tw-z-10 tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-center tw-overflow-hidden tw-rounded-full tw-border tw-border-grey-900 tw-p-0.5", statusBadge[status].containerClassName), children: statusBadge[status].badge })), jsx("img", { src: firstImageUrl, className: "tw-absolute tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" }), jsx("img", { src: secondImageUrl, className: "tw-absolute tw-left-5 tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" })] }), jsxs("div", { className: "tw-flex tw-h-10 tw-flex-1 tw-flex-col tw-self-stretch", children: [jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-justify-between tw-text-grey-500", children: [jsxs("div", { className: "tw-flex tw-items-center", children: [jsx(CaptionText, { children: fromLabel }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronRightSmallIcon, {}) }), jsx(CaptionText, { children: toLabel })] }), !!dropdownMenuItems && (jsx(ListItemActionsButton, { onClick: openDropdown, ref: openDropdownButtonRef, className: "tw-opacity-0 group-hover/history-item:tw-opacity-100" })), jsx("div", { className: cn("tw-flex tw-items-center tw-justify-center tw-gap-squid-xxs", !!dropdownMenuItems &&
-                                        "tw-transition-opacity group-hover/history-item:tw-hidden group-hover/history-item:tw-opacity-0 peer-focus:tw-hidden peer-focus:tw-opacity-0"), children: statusLabel })] }), jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-gap-squid-xxs tw-text-grey-300", children: [jsx(BodyText, { size: "small", children: fromAmount }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronLargeRightIcon, {}) }), jsx(BodyText, { size: "small", children: toAmount })] })] }), isDropdownOpen && !!dropdownMenuItems ? (jsx(DropdownMenu, { menuRef: menuRef, isHidden: !dropdownPosition, className: cn(!!dropdownPosition && dropdownPositionClassMap[dropdownPosition]), dropdownRef: dropdownRef, items: dropdownMenuItems })) : null] })) }));
-}
-
-function MenuItem({ label, imageUrl, icon }) {
-    return (jsxs("li", { className: "tw-mx-squid-xxs tw-inline-flex tw-max-h-list-item-small tw-items-center tw-justify-start tw-gap-squid-xxs tw-rounded-squid-xs tw-bg-grey-900 tw-py-squid-xxs tw-pl-squid-xxs tw-pr-squid-xl tw-text-grey-300", children: [jsx("div", { className: "tw-h-squid-m tw-w-squid-m", children: imageUrl ? (jsx("img", { className: "tw-h-full tw-w-full tw-rounded-squid-xxs", src: imageUrl, alt: "" })) : icon ? (icon) : null }), jsx(CaptionText, { children: label })] }));
+    }, [_isOpen]);
+    return (
+    // modal container (backdrop)
+    isOpen && (jsx("div", { onClick: onBackdropClick
+            ? (event) => {
+                if (event.target === event.currentTarget) {
+                    onBackdropClick();
+                }
+            }
+            : undefined, style: {
+            [CSS_VARS.BLUR_IN_DURATION]: `${ANIMATION_DURATIONS.SHOW_MODAL}ms`,
+            [CSS_VARS.BLUR_OUT_DURATION]: `${ANIMATION_DURATIONS.HIDE_MODAL}ms`,
+        }, className: cn("tw-absolute tw-inset-0 tw-z-40 tw-flex tw-items-start tw-justify-center tw-px-squid-xs tw-py-squid-xl tw-pb-squid-m", _isOpen ? "tw-animate-blur-in" : "tw-animate-blur-out"), children: jsx("div", { style: {
+                [CSS_VARS.SLIDE_TO_TOP_DURATION]: `${ANIMATION_DURATIONS.SHOW_MODAL}ms`,
+                [CSS_VARS.SLIDE_TO_BOTTOM_DURATION]: `${ANIMATION_DURATIONS.HIDE_MODAL}ms`,
+            }, className: cn("tw-relative tw-flex tw-max-h-modal-compact tw-max-w-full tw-flex-col tw-items-start tw-justify-end tw-gap-squid-xxs tw-self-end mobile-xs:tw-w-modal-compact mobile-lg:tw-max-h-modal-large", className, _isOpen ? "tw-animate-slide-to-top" : "tw-animate-slide-to-bottom", maxHeight && "tw-h-full", modalWidthClassMap[width]), children: children }) })));
 }
 
-const containerVariantClassNameMap = {
-    small: "tw-px-squid-xs",
-    large: "tw-px-squid-0",
-};
-const childrenVariantClassNameMap = {
-    small: "tw-min-h-squid-l tw-px-squid-xs",
-    large: "tw-min-h-squid-xl tw-px-squid-m",
+const borderTypeClassMap = {
+    border: "tw-border tw-border-material-light-thin",
+    outline: "tw-outline tw-outline-1 -tw-outline-offset-[1px] tw-outline-material-light-thin",
 };
-function SmallBodyText(props) {
-    return jsx(BodyText, Object.assign({ size: "small" }, props));
-}
-function PropertyListItem(_a) {
-    var { isLoading = false, label, detail, icon, className, variant = "small", showGradientBg = true, labelClassName, iconClassName, detailClassName } = _a, props = __rest$1(_a, ["isLoading", "label", "detail", "icon", "className", "variant", "showGradientBg", "labelClassName", "iconClassName", "detailClassName"]);
-    const Text = variant === "small" ? CaptionText : SmallBodyText;
-    return (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 && "squid-property-row-bg", containerVariantClassNameMap[variant], className), children: jsxs("div", { className: cn("tw-flex tw-h-squid-l tw-w-full tw-items-center tw-justify-between tw-gap-squid-xs tw-rounded-squid-xs", childrenVariantClassNameMap[variant]), children: [jsx("div", { className: cn("tw-w-6 tw-text-grey-500", iconClassName), children: icon }), jsx(Text, { className: cn("tw-flex-1 tw-text-grey-400", labelClassName), children: jsx(TextSkeleton, { isLoading: isLoading, children: label }) }), jsx(Text, { className: cn("tw-flex tw-text-grey-300", detailClassName), children: jsx(TextSkeleton, { isLoading: isLoading, children: detail }) })] }) })));
-}
-
-function SectionTitle(_a) {
-    var { title, icon, accessory, actionIcon, className } = _a, props = __rest$1(_a, ["title", "icon", "accessory", "actionIcon", "className"]);
-    return (jsxs("header", Object.assign({}, props, { className: cn("tw-flex tw-h-[46px] tw-w-full tw-items-center tw-gap-squid-xxs tw-bg-grey-900 tw-px-squid-m tw-pb-squid-xs tw-pt-squid-m tw-text-royal-400", className), children: [icon, jsx(CaptionText, { children: title }), accessory ? (jsx(CaptionText, { className: "tw-flex-1 tw-text-right tw-text-grey-500", children: accessory })) : actionIcon ? (jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end", children: actionIcon })) : null] })));
+function ModalContent(_a) {
+    var { children, addGap = false, paddingY = false, borderType = "border", className } = _a, props = __rest$1(_a, ["children", "addGap", "paddingY", "borderType", "className"]);
+    return (jsx("div", Object.assign({}, props, { className: cn("tw-flex tw-h-full tw-max-h-[445px] tw-w-full tw-flex-col tw-self-stretch tw-rounded-squid-l tw-bg-grey-800 tw-text-grey-300 mobile-sm-height:tw-max-h-[535px]", addGap && "tw-gap-squid-xxs tw-pt-squid-xxs", borderTypeClassMap[borderType], paddingY && "tw-py-squid-xxs", className), children: children })));
 }
-
-function SettingsItem({ icon, label, control, link, transparent = false, helpTooltip, }) {
-    const ContentTag = link ? "a" : "div";
-    const contentTagProps = link
-        ? {
-            href: link,
-            target: "_blank",
-        }
-        : {};
-    const helpIcon = !!helpTooltip && (jsx(HelpIcon, { className: "tw-cursor-help tw-text-grey-600 hover:tw-text-grey-400" }));
-    const showDetailsBorder = !!control && !link && !(control.type === "switch");
-    return (jsx("li", { className: cn("tw-h-[50px] tw-self-stretch tw-px-squid-xs", transparent ? "tw-bg-transparent" : "tw-bg-grey-800"), children: jsxs(ContentTag, Object.assign({ className: cn("tw-flex tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xs tw-text-grey-300", link && "hover:tw-bg-material-light-thin") }, contentTagProps, { children: [icon, jsxs("div", { className: "tw-flex tw-flex-1 tw-items-center tw-gap-squid-xxs tw-self-stretch", children: [jsx(BodyText, { size: "small", children: label }), helpTooltip ? (jsx(Tooltip, Object.assign({}, helpTooltip, { children: helpIcon }))) : (jsx(Fragment, { children: helpIcon }))] }), jsx("div", { className: cn("tw-flex tw-h-squid-l tw-items-center tw-justify-center tw-rounded-squid-xs", showDetailsBorder &&
-                        "tw-rounded-squid-xs tw-border tw-border-solid tw-border-material-light-thin tw-bg-material-dark-thin"), children: !!link ? (jsx(SquareArrowTopRight2Icon, { className: "tw-text-material-light-average" })) : (!!control && (jsxs(Fragment, { children: [control.type === "amount" && (jsxs(Fragment, { children: [jsx(SettingsButton, { onClick: () => control.onChange(control.resetValueControl.value), label: control.resetValueControl.label, isSelected: control.resetValueControl.value === control.value }), control.options.map(({ value }, index, _controls) => (jsx(SettingsButton, { label: "$" + value, isSelected: control.value === value, onClick: () => control.onChange(value) }, index))), jsx(SettingsSlider, { type: control.type, value: control.value, isSelected: control.value !== control.resetValueControl.value, onChange: control.onChange, decimalsFormat: control.decimalsFormat, max: 999 })] })), control.type === "switch" &&
-                                (control.tooltip ? (jsx(Tooltip, Object.assign({}, control.tooltip, { children: jsx(Switch, { size: "large", checked: control.checked, onChange: control.onChange, disabled: control.disabled }) }))) : (jsx(Switch, { size: "large", checked: control.checked, onChange: control.onChange, disabled: control.disabled }))), control.type === "percentage" && (jsxs(Fragment, { children: [jsx(SettingsButton, { label: control.resetValueControl.label, isSelected: control.resetValueControl.value === control.value, onClick: control.resetValueControl.onSelect }), jsx(SettingsSlider, { onChange: control.onChange, value: control.value, type: "percentage", isSelected: control.value !== control.resetValueControl.value, decimalsFormat: control.decimalsFormat, max: control.max, min: control.min })] })), control.type === "options" && (jsx(Fragment, { children: control.options.map(({ label, onSelect }, index) => (jsx(SettingsButton, { label: label, isSelected: control.selectedLabel === label, onClick: onSelect }, index))) }))] }))) })] })) }));
+function ModalContentDivider() {
+    return (jsx("svg", { width: "100%", height: "11", viewBox: "0 0 400 11", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("rect", { x: "1", y: "5", width: "398", height: "1", fill: "currentColor" }) }));
 }
 
-const STEP_ITEM_HEIGHT = 52;
-const statusBgClassMap = {
-    executed: "!tw-bg-grey-300",
-    ongoing: "!tw-bg-grey-300",
-    pending: "!tw-bg-grey-600",
-    waiting: "!tw-bg-grey-300",
-    error: "!tw-bg-status-negative",
-    success: "!tw-bg-status-positive",
-    warning: "!tw-bg-status-partial",
-};
-const separatorClassMap = {
-    executed: "tw-text-grey-300",
-    ongoing: "tw-text-grey-300",
-    pending: "tw-text-grey-600",
-    waiting: "tw-text-grey-300",
-    error: "tw-text-status-negative",
-    success: "tw-text-status-positive",
-    warning: "tw-text-status-partial",
-};
-function SwapStepItem({ descriptionBlocks, showStepSeparator = false, link, status = "pending", }) {
-    // these styles are located here instead of outside the component
-    // so they are updated whenever the animation duration changes
-    const transitionStyle = {
-        transition: `background-color ${ANIMATION_DURATIONS.CHANGE_SWAP_STEP}ms, color ${ANIMATION_DURATIONS.CHANGE_SWAP_STEP}ms`,
-    };
-    const chipContent = useMemo(() => {
-        switch (status) {
-            case "success":
-            case "executed":
-                return jsx(Checkmark1Icon, {});
-            case "error":
-                return jsx(EmojiSadIcon, { size: "16" });
-            case "warning":
-                return jsx(EmojiMeh, { size: "16" });
-            case "waiting":
-                return jsx(DotGrid1x3HorizontalIcon, {});
-            case "pending":
-                return null;
-            case "ongoing":
-                return jsx(Loader, { size: "16", strokeWidth: "4" });
-            default:
-                return null;
-        }
-    }, [status]);
-    const statusTextClass = useMemo(() => {
-        switch (status) {
-            case "pending":
-                return "tw-text-grey-600";
-            default:
-                return "tw-text-grey-300";
-        }
-    }, [status]);
-    return (jsx("li", { style: {
-            maxHeight: `${STEP_ITEM_HEIGHT}px`,
-            minHeight: `${STEP_ITEM_HEIGHT}px`,
-        }, className: "tw-relative tw-flex tw-w-full tw-flex-col tw-items-start tw-justify-center tw-text-grey-300 tw-transition-colors tw-duration-1000", children: jsxs("a", { href: link, target: "_blank", style: Object.assign(Object.assign({}, transitionStyle), { maxHeight: `${STEP_ITEM_HEIGHT}px` }), className: cn("tw-group/swap-step-item tw-flex tw-w-full tw-items-center tw-rounded-squid-xs tw-py-squid-xxs", !!link && "hover:tw-bg-material-light-thin", statusTextClass), children: [jsxs("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, { style: transitionStyle, className: cn("tw-w-squid-xl", statusBgClassMap[status]), icon: chipContent }), showStepSeparator && (jsx("span", { className: cn(separatorClassMap[status], "tw-absolute tw-left-0 tw-top-full tw-mt-0.5"), style: transitionStyle, children: jsx(SwapStepSeparator, {}) }))] }), jsx(DescriptionBlocks, { className: "tw-min-h-squid-l tw-py-squid-xxs tw-pr-squid-xs", blocks: descriptionBlocks })] }) }));
+function NavigationBar(_a) {
+    var { title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, onBackButtonClick, actions, isLoading = false } = _a, props = __rest$1(_a, ["title", "displayBackButton", "logoUrl", "transparent", "displayButtonShadows", "onBackButtonClick", "actions", "isLoading"]);
+    return (jsxs("nav", Object.assign({}, props, { className: cn("tw-flex tw-max-h-[120px] tw-flex-row-reverse tw-text-grey-300 mobile-xs-height:tw-flex-col", transparent ? "tw-bg-transparent" : "tw-bg-grey-900", props.className), children: [jsxs("div", { className: cn("tw-flex tw-h-squid-xxl tw-items-center tw-justify-end tw-gap-x-squid-xs tw-pl-squid-m", displayBackButton
+                    ? "tw-w-full tw-pr-squid-xs mobile-xs-height:tw-pr-squid-m"
+                    : "tw-pr-squid-m mobile-lg:tw-pl-squid-l", !title && "tw-w-full mobile-xs-height:tw-w-[unset]"), children: [displayBackButton ? (jsx(Button$1, { className: displayButtonShadows
+                            ? "group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2"
+                            : undefined, variant: "tertiary", size: "md", isLoading: isLoading, icon: jsx(ArrowLeftIcon, {}), onClick: onBackButtonClick })) : null, logoUrl ? (jsx("img", { src: logoUrl, className: "tw-h-squid-xl tw-min-w-squid-xl" })) : null, jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end tw-gap-squid-xxs", children: actions === null || actions === void 0 ? void 0 : actions.map((action) => {
+                            var _a;
+                            return (jsx(Tooltip, Object.assign({}, action.tooltip, { tooltipContent: isLoading ? undefined : (_a = action.tooltip) === null || _a === void 0 ? void 0 : _a.tooltipContent, childrenClassName: "tw-rounded-squid-m", containerClassName: "tw-rounded-squid-m", tooltipWidth: "max", children: jsx(Button$1, { size: "md", variant: "tertiary", isLoading: isLoading, label: typeof action.labelOrIcon === "string"
+                                        ? action.labelOrIcon
+                                        : undefined, className: "tw-text-grey-300", icon: typeof action.labelOrIcon === "string"
+                                        ? null
+                                        : action.labelOrIcon, onClick: action.onClick, chip: action.chip }) }), action.id));
+                        }) })] }), title ? (jsx("div", { className: cn("tw-h-squid-xxl tw-w-full tw-items-center tw-px-squid-m tw-py-squid-xxs mobile-lg:tw-px-squid-l", 
+                // hide the title on small screens when back button is displayed, so it's positioned on the left
+                displayBackButton
+                    ? "tw-hidden mobile-xs-height:tw-flex"
+                    : "tw-flex"), children: jsx(HeadingText, { size: "small", children: title }) })) : null] })));
 }
 
 function PipeSeparator(_a) {
@@ -18077,275 +17875,18 @@ function PipeSeparator(_a) {
     return (jsx("div", Object.assign({}, props, { className: cn("tw-h-[0.8em] tw-w-[2px] tw-rounded-full tw-bg-[currentColor]", className) })));
 }
 
-function ActionLayout({ lineCap = jsx(Timeline.CapTop, {}), status = "executed", showTimeline = true, showBody = true, nextStatus, statusIcon, description, title, icon, children, }) {
-    return (jsxs(ActionWrapper, { status: status, children: [jsx(ActionLineOutRow, { status: nextStatus }), jsx(ActionStatusRow, { status: status, icon: statusIcon, children: description }), title && (jsxs(Fragment, { children: [jsx(ActionRow, { children: jsxs(Timeline, { className: cn("tw-h-squid-xs", statusTextClassMap[status]), children: [jsx(Timeline.CapTop, {}), jsx(Timeline.Straight, {}), jsx(Timeline.CapBottom, {})] }) }), jsxs(ActionRow, { children: [jsx("div", { className: "tw-flex tw-items-center tw-justify-center", children: icon }), 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 })] })] })), jsxs(ActionRow, { children: [jsxs(Timeline, { className: showTimeline ? statusTextClassMap[status] : "!tw-text-[transparent]", children: [lineCap, jsx(Timeline.Straight, {})] }), 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 })] })] }));
-}
-function ActionProperties({ timestamp, hash, url, }) {
-    return (jsxs(CaptionText, { className: "tw-flex tw-items-center tw-gap-squid-xs", children: [timestamp && jsx(Timestamp, { time: timestamp }), timestamp && hash && jsx(PipeSeparator, { className: "tw-text-grey-700" }), hash && jsx(HashLink, { hash: hash, url: url, showTx: true })] }));
-}
-function renderStatusIcon(status, defaultIcon) {
-    switch (status) {
-        case "success":
-            return jsx(TransactionState, { status: "success", variant: "compact" });
-        case "executed":
-            return (jsx(TransactionState, { status: "executed", variant: "compact", icon: defaultIcon }));
-        case "error":
-            return jsx(EmojiSadIcon, { className: "tw-text-status-negative" });
-        case "ongoing":
-            return (jsx(Loader, { className: statusTextClassMap.ongoing, strokeWidth: "4", size: "20" }));
-        case "waiting":
-            return jsx(TransactionState, { status: "waiting", variant: "compact" });
-        case "warning":
-            return jsx(TransactionState, { status: "warning", variant: "compact" });
-    }
-}
-const ActionLineOutRow = ({ status }) => (jsx(ActionRow, { children: jsxs(Timeline, { className: cn("tw-h-squid-xs", status ? statusTextClassMap[status] : "!tw-text-[transparent]"), children: [jsx(Timeline.Straight, {}), jsx(Timeline.CapBottom, {})] }) }));
-const ActionStatusRow = ({ children, status, icon, }) => (jsxs(ActionRow, { children: [jsx("div", { className: "tw-flex tw-items-center tw-justify-center", children: renderStatusIcon(status, icon) }), jsx("div", { className: "tw-flex tw-items-center", children: jsx(BodyText, { size: "small", tight: true, className: "tw-block tw-w-full tw-text-grey-300", children: children }) })] }));
-function ActionRow(_a) {
-    var { className } = _a, props = __rest$1(_a, ["className"]);
-    return (jsx("div", Object.assign({}, props, { className: cn("tw-grid tw-grid-cols-[40px,1fr,60px] tw-gap-squid-xs tw-pl-squid-m", className) })));
-}
-function ActionWrapper({ children, status, className, }) {
-    return (jsx("div", { className: cn("tw-relative tw-flex tw-flex-col tw-gap-squid-xxs", status === "waiting" && "tw-bg-grey-800", className), children: children }));
-}
-function Timestamp({ time }) {
-    return (jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xxs tw-text-grey-500", children: [formatRelativeDate(time), jsx("span", { className: "tw-text-grey-700", children: "\u2022" }), formatTime(time)] }));
-}
-
-function ApproveAction({ status, nextStatus, showTimeline, showBody, profile, chain, wallet, timestamp, hash, url, }) {
-    return (jsxs(ActionLayout, { status: status, nextStatus: nextStatus, statusIcon: jsx(ThumbsUp, { fill: true }), description: "Approve contract", title: profile.label, icon: jsx(ImageIcon, { src: profile.imageURI, variant: "round", size: "xlarge" }), lineCap: jsx(Timeline.ArrowUp, {}), showTimeline: showTimeline, showBody: showBody, children: [jsx("div", { className: "tw-flex tw-flex-col tw-gap-squid-xs", children: jsxs(BodyText, { className: "tw-flex tw-items-center tw-gap-squid-xs", size: "small", children: [jsx(IconLabel, { src: chain.logoURI, children: chain.name }), jsx(PipeSeparator, { className: "tw-text-grey-300" }), jsx(WalletLink, Object.assign({}, wallet))] }) }), (timestamp || hash) && (jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url }))] }));
-}
-
-function BridgeAction({ status, nextStatus, showTimeline, showBody, token, chain, provider, timestamp, hash, url, }) {
-    return (jsx(ActionLayout, { status: status, nextStatus: nextStatus, statusIcon: jsx(SquareArrowTopLeftIcon, {}), description: jsxs(Inline, { children: ["Bridge", jsx(IconLabel, { src: token.logoURI, variant: "round", children: jsx(BodyText, { size: "small", children: token.symbol }) }), "to", jsx(IconLabel, { src: chain.logoURI, children: jsx(BodyText, { size: "small", children: chain.name }) }), "via", jsx(IconLabel, { src: provider.logoURI, variant: "round", children: jsx(BodyText, { size: "small", children: provider.name }) })] }), showTimeline: showTimeline, showBody: showBody, children: (timestamp || hash) && (jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url })) }));
-}
-
-function FeesAction({ status, nextStatus, showTimeline = false, total, lines, }) {
-    return (jsxs(Fragment, { children: [jsx(FeesTotal, { status: status, nextStatus: nextStatus, total: total, showTimeline: lines !== undefined || showTimeline }), lines && (jsx(FeesLines, { status: status, lines: lines, showTimeline: showTimeline }))] }));
-}
-function FeesTotal({ status, nextStatus, total, showTimeline, collapsed, }) {
-    return (jsxs(ActionWrapper, { status: status, children: [jsx(ActionLineOutRow, { status: nextStatus }), jsx(ActionStatusRow, { status: status, icon: jsx(TagIconFilled, {}), children: jsx(FeesRow, Object.assign({ collapsed: collapsed }, total)) }), jsx(ActionRow, { children: jsxs(Timeline, { className: cn("tw-h-squid-xs", showTimeline ? statusTextClassMap[status] : "tw-text-transparent"), children: [jsx(Timeline.CapTop, {}), jsx(Timeline.Straight, {})] }) })] }));
-}
-function FeesLines({ status, lines, showTimeline = false, }) {
-    return (jsxs(ActionWrapper, { status: status, children: [lines && (jsx("div", { children: lines.map((line, index) => (jsxs(Fragment, { children: [index > 0 && (jsx(ActionRow, { children: jsxs(Timeline, { className: cn("tw-h-squid-xs", statusTextClassMap[status]), children: [jsx(Timeline.CapTop, {}), jsx(Timeline.Straight, {})] }) })), jsxs(ActionRow, { children: [jsxs(Timeline, { className: statusTextClassMap[status], children: [jsx(Timeline.Straight, {}), jsx(Timeline.ArrowRight, {})] }), jsx("div", { className: "tw-relative tw-top-[2px] tw-flex tw-items-end", children: jsx(FeesRow, Object.assign({}, line)) })] })] }, index))) })), jsx(ActionRow, { children: jsxs(Timeline, { className: cn("tw-h-squid-xs", showTimeline
-                        ? statusTextClassMap[status]
-                        : "!tw-text-[transparent]"), children: [jsx(Timeline.CapTop, {}), jsx(Timeline.Straight, {})] }) })] }));
-}
-function FeesRow({ label, usd, amount, symbol, collapsed = false, }) {
-    return (jsxs("div", { className: "tw-flex tw-w-full tw-gap-squid-xs", children: [jsx(SizeTransition, { children: jsx(BodyText, { size: "small", tight: true, className: cn("tw-block tw-truncate tw-text-grey-300", !collapsed && "tw-w-[100px]"), children: label }) }), jsx("div", { className: "tw-flex tw-items-center", children: jsx(PipeSeparator, { className: "tw-text-grey-700" }) }), jsxs(BodyText, { size: "small", tight: true, className: "tw-flex-grow tw-text-grey-300", children: ["$", usd] }), jsxs(CaptionText, { className: "tw-text-right tw-text-grey-500", children: [amount, " ", symbol] })] }));
-}
-
-function IncompleteAction({ status, nextStatus, message, buttons, }) {
-    return (jsxs(ActionWrapper, { status: status, children: [jsx(ActionLineOutRow, { status: nextStatus }), jsxs(ActionRow, { children: [jsxs(Timeline, { children: [jsx(Timeline.ArrowReverse, {}), jsx(Timeline.Straight, {})] }), jsxs("div", { className: "tw-flex tw-flex-col tw-gap-squid-m tw-pb-squid-m", children: [jsx(BodyText, { size: "small", tight: true, className: "tw-text-grey-300", children: "Transaction incomplete" }), jsx(BodyText, { size: "small", className: "tw-text-grey-500", children: message }), jsx("div", { className: "tw-flex tw-gap-squid-xs", children: buttons })] })] })] }));
-}
-
-function linkActionTimelineProps(actions, collapsed) {
-    return actions.map((action, index) => {
-        var _a;
-        const nextStatus = (_a = actions[index - 1]) === null || _a === void 0 ? void 0 : _a.props.status;
-        return Object.assign(Object.assign({}, action), { props: Object.assign(Object.assign({}, action.props), { showTimeline: index !== actions.length - 1, showBody: !(collapsed && index === 0), nextStatus }) });
-    });
-}
-
-function ReceiveNFTAction({ status, nextStatus, showTimeline, showBody, nft, chain, wallet, timestamp, hash, url, }) {
-    return (jsxs(ActionLayout, { status: status, statusIcon: jsx(ArrowRightDownIcon, {}), nextStatus: nextStatus, description: "Receive NFT", title: nft.name, icon: jsx(ImageIcon, { src: nft.imageURI, variant: "square", size: "xlarge" }), lineCap: jsx(Timeline.ArrowUp, {}), showTimeline: showTimeline, showBody: showBody, children: [jsx("div", { className: "tw-flex tw-flex-col tw-gap-squid-xs", children: jsxs(BodyText, { className: "tw-flex tw-items-center tw-gap-squid-xs", size: "small", children: [jsx(IconLabel, { src: chain.logoURI, children: jsx(BodyText, { size: "small", children: chain.name }) }), jsx(PipeSeparator, { className: "tw-text-grey-700" }), jsx(WalletLink, Object.assign({}, wallet))] }) }), jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url })] }));
-}
-
-function ReceiveTokensAction({ status, nextStatus, showTimeline, showBody, token, amount, chain, wallet, timestamp, hash, url, }) {
-    return (jsxs(ActionLayout, { status: status, statusIcon: jsx(ArrowRightDownIcon, {}), nextStatus: nextStatus, description: "Receive tokens", title: `${amount} ${token.symbol}`, icon: jsx(ImageIcon, { src: token.logoURI, variant: "round", size: "xlarge" }), lineCap: jsx(Timeline.ArrowUp, {}), showTimeline: showTimeline, showBody: showBody, children: [jsx("div", { className: "tw-flex tw-flex-col tw-gap-squid-xs", children: jsxs(BodyText, { size: "small", className: "tw-flex tw-items-center tw-gap-squid-xs", children: [jsx(IconLabel, { src: chain.logoURI, children: jsx(BodyText, { size: "small", children: chain.name }) }), jsx(PipeSeparator, { className: "tw-text-body-small tw-text-grey-700" }), " ", jsx(WalletLink, Object.assign({}, wallet))] }) }), jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url })] }));
-}
-
-function SendTokensAction({ status, nextStatus, showTimeline, showBody, token, amount, chain, wallet, timestamp, hash, url, }) {
-    return (jsxs(ActionLayout, { status: status, statusIcon: jsx(ArrowRightUpIcon, {}), nextStatus: nextStatus, description: "Send tokens", title: `${amount} ${token.symbol}`, icon: jsx(ImageIcon, { src: token.logoURI, variant: "round", size: "xlarge" }), lineCap: jsx(Timeline.ArrowUp, {}), showTimeline: showTimeline, showBody: showBody, children: [jsx("div", { className: "tw-flex tw-flex-col tw-gap-squid-xs", children: jsxs(BodyText, { size: "small", className: "tw-flex tw-items-center tw-gap-squid-xs", children: [jsx(IconLabel, { src: chain.logoURI, children: chain.name }), jsx(PipeSeparator, { className: "tw-text-body-small tw-text-grey-700" }), " ", jsx(WalletLink, Object.assign({}, wallet))] }) }), jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url })] }));
-}
-
-function StakeAction({ status, nextStatus, showTimeline, showBody, token, provider, timestamp, hash, url, }) {
-    return (jsx(ActionLayout, { status: status, nextStatus: nextStatus, statusIcon: jsx(PieChartIcon, {}), description: jsx(Inline, { children: [
-                "Stake",
-                jsx(IconLabel, { src: token.logoURI, variant: "round", children: jsx(BodyText, { size: "small", children: token.symbol }) }),
-                "on",
-                jsx(IconLabel, { src: provider.logoURI, variant: "round", children: jsx(BodyText, { size: "small", children: provider.name }) }),
-            ] }), showTimeline: showTimeline, showBody: showBody, children: jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url }) }));
-}
-
-function StartAction({ status, nextStatus, showTimeline = false, showBody = false, timestamp, hash, url, }) {
-    const getDescription = () => {
-        switch (status) {
-            case "error":
-            case "waiting":
-                return "Transaction not started";
-            default:
-                return "Transaction started";
-        }
-    };
-    return (jsx(ActionLayout, { status: status, nextStatus: nextStatus, statusIcon: jsx(ArrowUpIcon, {}), description: getDescription(), lineCap: jsx(Timeline.CapTop, {}), showTimeline: showTimeline, showBody: showBody, children: status === "waiting" ? (jsx(CaptionText, { children: "Waiting to confirm..." })) : (jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url })) }));
-}
-
-function SuccessAction({ nextStatus, status, description = status === "error"
-    ? "Transaction failed"
-    : "Transaction successful", showTimeline, showBody, timestamp, hash, url, }) {
-    return (jsx(ActionLayout, { description: description, status: status, nextStatus: nextStatus, showTimeline: showTimeline, showBody: showBody, children: (timestamp || hash) && (jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url })) }));
-}
-
-function SwapAction({ status, nextStatus, showTimeline, showBody, fromToken, toToken, provider, timestamp, hash, url, }) {
-    return (jsx(ActionLayout, { status: status, nextStatus: nextStatus, statusIcon: jsx(ArrowBottomTopIcon, { size: "16" }), description: jsxs(Inline, { children: ["Swap", jsx(IconLabel, { src: fromToken.logoURI, variant: "round", children: jsx(BodyText, { size: "small", children: fromToken.symbol }) }), "to", jsx(IconLabel, { src: toToken.logoURI, variant: "round", children: jsx(BodyText, { size: "small", children: toToken.symbol }) }), "via", jsx(IconLabel, { src: provider.logoURI, variant: "round", children: jsx(BodyText, { size: "small", children: provider.name }) })] }), showTimeline: showTimeline, showBody: showBody, children: jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url }) }));
-}
-
-function WrapAction({ status, nextStatus, showTimeline, showBody, fromToken, toToken, provider, timestamp, hash, url, }) {
-    return (jsx(ActionLayout, { status: status, nextStatus: nextStatus, statusIcon: jsx(ArrowBottomTopIcon, { size: "16" }), description: jsxs(Inline, { children: ["Wrap", jsx(IconLabel, { src: fromToken.logoURI, variant: "round", children: jsx(BodyText, { size: "small", children: fromToken.symbol }) }), "to", jsx(IconLabel, { src: toToken.logoURI, variant: "round", children: jsx(BodyText, { size: "small", children: toToken.symbol }) }), "via", jsx(IconLabel, { src: provider.logoURI, variant: "round", children: jsx(BodyText, { size: "small", children: provider.name }) })] }), showTimeline: showTimeline, showBody: showBody, children: jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url }) }));
-}
-
-const actionComponentMap = {
-    success: SuccessAction,
-    receive_tokens: ReceiveTokensAction,
-    receive_nft: ReceiveNFTAction,
-    approve: ApproveAction,
-    send_tokens: SendTokensAction,
-    swap: SwapAction,
-    bridge: BridgeAction,
-    wrap: WrapAction,
-    stake: StakeAction,
-    start: StartAction,
-    fees: FeesAction,
-    incomplete: IncompleteAction,
-};
-function TransactionAction({ type, props }) {
-    const Component = actionComponentMap[type];
-    return jsx(Component, Object.assign({}, props));
-}
-
-function Transfer({ isLoading, from, to, className }) {
-    return (jsx("div", { className: cn("tw-flex tw-items-center tw-gap-squid-xxs", className), children: jsxs(Join, { glue: () => jsx(ChevronLargeRightIcon, { className: "tw-text-grey-500" }), children: [isLoading ? jsx(TextSkeleton, {}) : from, isLoading ? jsx(TextSkeleton, {}) : to] }) }));
-}
-
-function TransactionItem({ className, isLoading = false, status, image, type, hash, fromChain, toChain, fromAmount, toAmount, timestamp, variant = "full", }) {
-    return (jsxs("div", { className: cn("tw-flex tw-items-stretch tw-gap-squid-xs tw-bg-grey-900 tw-p-squid-xs", className), children: [variant === "full" && (jsxs("div", { className: "tw-timeline-gradient-mask tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xxs", children: [jsxs(Timeline, { className: "tw-flex-grow tw-text-grey-700", children: [jsx(Timeline.Straight, {}), jsx(Timeline.CapBottom, {})] }), jsx(TransactionState, { status: !status || isLoading ? "pending" : status, variant: "compact" }), jsxs(Timeline, { className: "tw-flex-grow tw-text-grey-700", children: [jsx(Timeline.CapTop, {}), jsx(Timeline.Straight, {})] })] })), jsx("div", { className: "tw-flex tw-w-[50px] tw-items-center tw-justify-center", children: image }), jsxs("div", { className: "tw-flex tw-flex-grow tw-flex-col tw-gap-squid-xxs", children: [jsx(CaptionText, { className: "tw-flex tw-items-center tw-gap-squid-xxs tw-text-grey-300", children: jsx(TransactionItemHeader, { hash: hash, status: status, type: type, isLoading: isLoading, variant: variant }) }), (isLoading || fromChain || toChain) && (jsx(CaptionText, { className: "tw-block tw-h-squid-m", children: jsx(Transfer, { className: "tw-text-grey-400", isLoading: isLoading, from: fromChain && (jsx(IconLabel, { src: fromChain.logoURI, children: fromChain.name })), to: toChain && (jsx(IconLabel, { src: toChain.logoURI, children: toChain.name })) }) })), (isLoading || fromAmount || toAmount) && (jsx(Transfer, { className: "tw-text-grey-300", isLoading: isLoading, from: fromAmount ? (jsx(BodyText, { size: "small", children: fromAmount })) : undefined, to: toAmount ? (jsx(BodyText, { size: "small", children: toAmount })) : undefined }))] }), timestamp && variant === "full" && (jsx(CaptionText, { className: "tw-text-grey-500", children: formatRelativeTime(timestamp) }))] }));
-}
-const TransactionItemHeaderWrapper = ({ children, }) => {
-    return (jsx(Join, { glue: () => jsx(PipeSeparator, { className: "tw-text-grey-600" }), children: children }));
-};
-const TransactionItemHeader = ({ isLoading, variant, type, hash, status, }) => {
-    if (isLoading) {
-        return (jsxs(TransactionItemHeaderWrapper, { children: [jsx(TextSkeleton, {}), jsx(TextSkeleton, {})] }));
-    }
-    if (variant === "full") {
-        if (!type || !hash)
-            return null;
-        return (jsxs(TransactionItemHeaderWrapper, { children: [jsx(TxTypeLabel, { type: type }), jsx("span", { className: "tw-text-grey-500", children: truncateHash(hash) })] }));
-    }
-    if (status && type) {
-        return (jsxs(TransactionItemHeaderWrapper, { children: [jsx(TransactionState, { status: status, variant: "small" }), jsx(TxTypeLabel, { type: type })] }));
-    }
-    return null;
-};
-const TxTypeLabel = ({ type }) => {
-    return (jsxs("span", { className: "tw-inline-flex tw-items-center tw-gap-[2px] tw-text-royal-500", children: [type === null || type === void 0 ? void 0 : type.icon, " ", type === null || type === void 0 ? void 0 : type.name] }));
-};
-
-function RouteStep({ imageUrl, descriptionBlocks, subtitle, showStepSeparator = false, }) {
-    return (jsxs("li", { className: "tw-flex tw-flex-col tw-self-stretch", children: [jsxs("div", { className: "tw-flex tw-items-center tw-self-stretch", children: [jsx(Track, { imageUrl: imageUrl }), jsx(Label, { subtitle: subtitle, descriptionBlocks: descriptionBlocks })] }), showStepSeparator && (jsx("div", { className: "tw-flex tw-h-squid-m tw-w-squid-xxl tw-justify-center", children: jsx("div", { className: "tw-h-squid-m tw-w-1 tw-rounded-full tw-bg-gradient-to-t tw-from-grey-500 tw-to-grey-800" }) }))] }));
-}
-function Track({ imageUrl }) {
-    return (jsx("div", { className: "tw-relative tw-flex tw-w-squid-xxl tw-min-w-squid-xxl tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-px-squid-xs", children: jsx("img", { src: imageUrl, alt: "", className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs" }) }));
-}
-function Label({ subtitle, descriptionBlocks, }) {
-    return (jsxs("div", { className: "tw-flex tw-flex-col tw-items-start", children: [jsx("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs tw-self-stretch tw-py-squid-xxs tw-pr-squid-m tw-text-grey-500", children: jsx(CaptionText, { children: subtitle }) }), jsx(DescriptionBlocks, { blocks: descriptionBlocks, className: "tw-py-squid-xxs tw-pr-squid-m tw-text-grey-300" })] }));
-}
-
-const borderRadiusClassMap = {
-    sm: "tw-rounded-squid-s",
-    lg: "tw-rounded-squid-m",
-};
-function Menu(_a) {
-    var { children, containerClassName, contentClassName, rounded = "lg", menuRef, contentWrapperClassName } = _a, props = __rest$1(_a, ["children", "containerClassName", "contentClassName", "rounded", "menuRef", "contentWrapperClassName"]);
-    return (jsx("div", Object.assign({}, props, { className: cn("tw-max-w-[320px]", containerClassName), ref: menuRef, children: jsxs("div", { className: cn("tw-relative tw-inline-flex tw-max-w-full tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-m tw-bg-material-dark-thick tw-p-squid-xs tw-text-center tw-text-material-light-thick tw-backdrop-blur/20 tw-backdrop-saturate-150 group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2", borderRadiusClassMap[rounded], contentClassName), children: [typeof children === "string" ? (jsx(CaptionText, { className: "tw-z-20 tw-self-stretch !tw-leading-[10px]", children: children })) : (jsx("div", { className: cn("tw-z-20 tw-max-w-full tw-text-caption", contentWrapperClassName), children: children })), jsx("div", { className: cn("tw-absolute tw-inset-0 tw-z-10 tw-h-full tw-w-full tw-border tw-border-material-light-thin tw-bg-material-light-thin", borderRadiusClassMap[rounded]) })] }) })));
-}
-
-function DropdownMenu({ dropdownRef, items, className, menuRef, isHidden = false, listClassName, }) {
-    return (jsx("div", { ref: dropdownRef, className: "tw-relative", children: jsx(Menu, { menuRef: menuRef, rounded: "sm", containerClassName: cn("tw-absolute tw-right-0 tw-z-20", className), contentClassName: "!tw-p-0", children: !isHidden && (jsx("ul", { className: cn("tw-flex tw-max-w-full tw-flex-col tw-gap-squid-xxs tw-overflow-auto tw-px-0 tw-py-squid-xxs", listClassName), children: items.map((item) => (jsx(DropdownMenuItem, Object.assign({}, item), item.label))) })) }) }));
-}
-
-function InfoBox({ title, description, icon }) {
-    return (jsxs("div", { className: "tw-align-self-stretch tw-flex tw-flex-col tw-items-center tw-gap-squid-xs tw-px-squid-m tw-pb-squid-l tw-pt-squid-xs tw-text-royal-400", children: [icon, jsxs("div", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xxs tw-text-center", children: [jsx(BodyText, { size: "small", className: "!tw-leading-[9px]", children: title }), jsx(CaptionText, { className: "tw-text-grey-500", children: description })] })] }));
-}
-
-const modalWidthClassMap = {
-    large: "mobile-lg:tw-w-modal-large",
-    "extra-large": "mobile-lg:tw-w-modal-extra-large",
-};
-function Modal({ children, className, onBackdropClick, isOpen: _isOpen = true, maxHeight = false, width = "large", }) {
-    const [isOpen, setIsOpen] = useState(_isOpen);
-    useEffect(() => {
-        if (_isOpen)
-            return setIsOpen(true);
-        const timeoutId = setTimeout(() => {
-            setIsOpen(false);
-        }, ANIMATION_DURATIONS.HIDE_MODAL);
-        return () => {
-            clearTimeout(timeoutId);
-        };
-    }, [_isOpen]);
-    return (
-    // modal container (backdrop)
-    isOpen && (jsx("div", { onClick: onBackdropClick
-            ? (event) => {
-                if (event.target === event.currentTarget) {
-                    onBackdropClick();
-                }
-            }
-            : undefined, style: {
-            [CSS_VARS.BLUR_IN_DURATION]: `${ANIMATION_DURATIONS.SHOW_MODAL}ms`,
-            [CSS_VARS.BLUR_OUT_DURATION]: `${ANIMATION_DURATIONS.HIDE_MODAL}ms`,
-        }, className: cn("tw-absolute tw-inset-0 tw-z-40 tw-flex tw-items-start tw-justify-center tw-px-squid-xs tw-py-squid-xl tw-pb-squid-m", _isOpen ? "tw-animate-blur-in" : "tw-animate-blur-out"), children: jsx("div", { style: {
-                [CSS_VARS.SLIDE_TO_TOP_DURATION]: `${ANIMATION_DURATIONS.SHOW_MODAL}ms`,
-                [CSS_VARS.SLIDE_TO_BOTTOM_DURATION]: `${ANIMATION_DURATIONS.HIDE_MODAL}ms`,
-            }, className: cn("tw-relative tw-flex tw-max-h-modal-compact tw-max-w-full tw-flex-col tw-items-start tw-justify-end tw-gap-squid-xxs tw-self-end mobile-xs:tw-w-modal-compact mobile-lg:tw-max-h-modal-large", className, _isOpen ? "tw-animate-slide-to-top" : "tw-animate-slide-to-bottom", maxHeight && "tw-h-full", modalWidthClassMap[width]), children: children }) })));
-}
-
-const borderTypeClassMap = {
-    border: "tw-border tw-border-material-light-thin",
-    outline: "tw-outline tw-outline-1 -tw-outline-offset-[1px] tw-outline-material-light-thin",
-};
-function ModalContent(_a) {
-    var { children, addGap = false, paddingY = false, borderType = "border", className } = _a, props = __rest$1(_a, ["children", "addGap", "paddingY", "borderType", "className"]);
-    return (jsx("div", Object.assign({}, props, { className: cn("tw-flex tw-h-full tw-max-h-[445px] tw-w-full tw-flex-col tw-self-stretch tw-rounded-squid-l tw-bg-grey-800 tw-text-grey-300 mobile-sm-height:tw-max-h-[535px]", addGap && "tw-gap-squid-xxs tw-pt-squid-xxs", borderTypeClassMap[borderType], paddingY && "tw-py-squid-xxs", className), children: children })));
-}
-function ModalContentDivider() {
-    return (jsx("svg", { width: "100%", height: "11", viewBox: "0 0 400 11", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("rect", { x: "1", y: "5", width: "398", height: "1", fill: "currentColor" }) }));
-}
-
-function NavigationBar(_a) {
-    var { title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, onBackButtonClick, actions, isLoading = false } = _a, props = __rest$1(_a, ["title", "displayBackButton", "logoUrl", "transparent", "displayButtonShadows", "onBackButtonClick", "actions", "isLoading"]);
-    return (jsxs("nav", Object.assign({}, props, { className: cn("tw-flex tw-max-h-[120px] tw-flex-row-reverse tw-text-grey-300 mobile-xs-height:tw-flex-col", transparent ? "tw-bg-transparent" : "tw-bg-grey-900", props.className), children: [jsxs("div", { className: cn("tw-flex tw-h-squid-xxl tw-items-center tw-justify-end tw-gap-x-squid-xs tw-pl-squid-m", displayBackButton
-                    ? "tw-w-full tw-pr-squid-xs mobile-xs-height:tw-pr-squid-m"
-                    : "tw-pr-squid-m mobile-lg:tw-pl-squid-l", !title && "tw-w-full mobile-xs-height:tw-w-[unset]"), children: [displayBackButton ? (jsx(Button$1, { className: displayButtonShadows
-                            ? "group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2"
-                            : undefined, variant: "tertiary", size: "md", isLoading: isLoading, icon: jsx(ArrowLeftIcon, {}), onClick: onBackButtonClick })) : null, logoUrl ? (jsx("img", { src: logoUrl, className: "tw-h-squid-xl tw-min-w-squid-xl" })) : null, jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end tw-gap-squid-xxs", children: actions === null || actions === void 0 ? void 0 : actions.map((action) => {
-                            var _a;
-                            return (jsx(Tooltip, Object.assign({}, action.tooltip, { tooltipContent: isLoading ? undefined : (_a = action.tooltip) === null || _a === void 0 ? void 0 : _a.tooltipContent, childrenClassName: "tw-rounded-squid-m", containerClassName: "tw-rounded-squid-m", tooltipWidth: "max", children: jsx(Button$1, { size: "md", variant: "tertiary", isLoading: isLoading, label: typeof action.labelOrIcon === "string"
-                                        ? action.labelOrIcon
-                                        : undefined, className: "tw-text-grey-300", icon: typeof action.labelOrIcon === "string"
-                                        ? null
-                                        : action.labelOrIcon, onClick: action.onClick, chip: action.chip }) }), action.id));
-                        }) })] }), title ? (jsx("div", { className: cn("tw-h-squid-xxl tw-w-full tw-items-center tw-px-squid-m tw-py-squid-xxs mobile-lg:tw-px-squid-l", 
-                // hide the title on small screens when back button is displayed, so it's positioned on the left
-                displayBackButton
-                    ? "tw-hidden mobile-xs-height:tw-flex"
-                    : "tw-flex"), children: jsx(HeadingText, { size: "small", children: title }) })) : null] })));
-}
-
-function CollapsibleMenu({ children, menuRef, isOpen, transitionDuration, size, className, }) {
-    return (jsx("aside", { style: Object.assign({ transitionDuration, transitionTimingFunction: isOpen
-                ? "cubic-bezier(0.4, 1.3, 0.4, 1)"
-                : undefined, [CSS_VARS.COLLAPSIBLE_MENU_OPEN_WIDTH]: size.open.width, [CSS_VARS.COLLAPSIBLE_MENU_OPEN_HEIGHT]: size.open.height, [CSS_VARS.COLLAPSIBLE_MENU_CLOSED_WIDTH]: size.closed.width, [CSS_VARS.COLLAPSIBLE_MENU_CLOSED_HEIGHT]: size.closed.height }, (isOpen
-            ? {
-                width: `var(${CSS_VARS.COLLAPSIBLE_MENU_OPEN_WIDTH})`,
-                height: `var(${CSS_VARS.COLLAPSIBLE_MENU_OPEN_HEIGHT})`,
-            }
-            : {
-                width: `var(${CSS_VARS.COLLAPSIBLE_MENU_CLOSED_WIDTH})`,
-                height: `var(${CSS_VARS.COLLAPSIBLE_MENU_CLOSED_HEIGHT})`,
-            })), className: cn("tw-fixed tw-z-40 tw-flex tw-flex-col tw-overflow-hidden tw-bg-grey-900 tw-text-grey-200 tw-shadow-elevation-light-3 tw-outline-material-light-thin", className), ref: menuRef, children: children }));
+function CollapsibleMenu({ children, menuRef, isOpen, transitionDuration, size, className, }) {
+    return (jsx("aside", { style: Object.assign({ transitionDuration, transitionTimingFunction: isOpen
+                ? "cubic-bezier(0.4, 1.3, 0.4, 1)"
+                : undefined, [CSS_VARS.COLLAPSIBLE_MENU_OPEN_WIDTH]: size.open.width, [CSS_VARS.COLLAPSIBLE_MENU_OPEN_HEIGHT]: size.open.height, [CSS_VARS.COLLAPSIBLE_MENU_CLOSED_WIDTH]: size.closed.width, [CSS_VARS.COLLAPSIBLE_MENU_CLOSED_HEIGHT]: size.closed.height }, (isOpen
+            ? {
+                width: `var(${CSS_VARS.COLLAPSIBLE_MENU_OPEN_WIDTH})`,
+                height: `var(${CSS_VARS.COLLAPSIBLE_MENU_OPEN_HEIGHT})`,
+            }
+            : {
+                width: `var(${CSS_VARS.COLLAPSIBLE_MENU_CLOSED_WIDTH})`,
+                height: `var(${CSS_VARS.COLLAPSIBLE_MENU_CLOSED_HEIGHT})`,
+            })), className: cn("tw-fixed tw-z-40 tw-flex tw-flex-col tw-overflow-hidden tw-bg-grey-900 tw-text-grey-200 tw-shadow-elevation-light-3 tw-outline-material-light-thin", className), ref: menuRef, children: children }));
 }
 
 const createStoreImpl = (createState) => {
@@ -18653,310 +18194,1012 @@ function requireUseSyncExternalStoreShim_development () {
 	return useSyncExternalStoreShim_development;
 }
 
-var hasRequiredShim;
-
-function requireShim () {
-	if (hasRequiredShim) return shim.exports;
-	hasRequiredShim = 1;
-
-	if (process.env.NODE_ENV === 'production') {
-	  shim.exports = requireUseSyncExternalStoreShim_production_min();
-	} else {
-	  shim.exports = requireUseSyncExternalStoreShim_development();
-	}
-	return shim.exports;
+var hasRequiredShim;
+
+function requireShim () {
+	if (hasRequiredShim) return shim.exports;
+	hasRequiredShim = 1;
+
+	if (process.env.NODE_ENV === 'production') {
+	  shim.exports = requireUseSyncExternalStoreShim_production_min();
+	} else {
+	  shim.exports = requireUseSyncExternalStoreShim_development();
+	}
+	return shim.exports;
+}
+
+/**
+ * @license React
+ * use-sync-external-store-shim/with-selector.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredWithSelector_production_min;
+
+function requireWithSelector_production_min () {
+	if (hasRequiredWithSelector_production_min) return withSelector_production_min;
+	hasRequiredWithSelector_production_min = 1;
+var h=React__default$1,n=requireShim();function p(a,b){return a===b&&(0!==a||1/a===1/b)||a!==a&&b!==b}var q="function"===typeof Object.is?Object.is:p,r=n.useSyncExternalStore,t=h.useRef,u=h.useEffect,v=h.useMemo,w=h.useDebugValue;
+	withSelector_production_min.useSyncExternalStoreWithSelector=function(a,b,e,l,g){var c=t(null);if(null===c.current){var f={hasValue:!1,value:null};c.current=f;}else f=c.current;c=v(function(){function a(a){if(!c){c=!0;d=a;a=l(a);if(void 0!==g&&f.hasValue){var b=f.value;if(g(b,a))return k=b}return k=a}b=k;if(q(d,a))return b;var e=l(a);if(void 0!==g&&g(b,e))return b;d=a;return k=e}var c=!1,d,k,m=void 0===e?null:e;return [function(){return a(b())},null===m?void 0:function(){return a(m())}]},[b,e,l,g]);var d=r(a,c[0],c[1]);
+	u(function(){f.hasValue=!0;f.value=d;},[d]);w(d);return d};
+	return withSelector_production_min;
+}
+
+var withSelector_development = {};
+
+/**
+ * @license React
+ * use-sync-external-store-shim/with-selector.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredWithSelector_development;
+
+function requireWithSelector_development () {
+	if (hasRequiredWithSelector_development) return withSelector_development;
+	hasRequiredWithSelector_development = 1;
+
+	if (process.env.NODE_ENV !== "production") {
+	  (function() {
+
+	/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+	if (
+	  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
+	  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart ===
+	    'function'
+	) {
+	  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
+	}
+	          var React = React__default$1;
+	var shim = requireShim();
+
+	/**
+	 * inlined Object.is polyfill to avoid requiring consumers ship their own
+	 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
+	 */
+	function is(x, y) {
+	  return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y // eslint-disable-line no-self-compare
+	  ;
+	}
+
+	var objectIs = typeof Object.is === 'function' ? Object.is : is;
+
+	var useSyncExternalStore = shim.useSyncExternalStore;
+
+	// for CommonJS interop.
+
+	var useRef = React.useRef,
+	    useEffect = React.useEffect,
+	    useMemo = React.useMemo,
+	    useDebugValue = React.useDebugValue; // Same as useSyncExternalStore, but supports selector and isEqual arguments.
+
+	function useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
+	  // Use this to track the rendered snapshot.
+	  var instRef = useRef(null);
+	  var inst;
+
+	  if (instRef.current === null) {
+	    inst = {
+	      hasValue: false,
+	      value: null
+	    };
+	    instRef.current = inst;
+	  } else {
+	    inst = instRef.current;
+	  }
+
+	  var _useMemo = useMemo(function () {
+	    // Track the memoized state using closure variables that are local to this
+	    // memoized instance of a getSnapshot function. Intentionally not using a
+	    // useRef hook, because that state would be shared across all concurrent
+	    // copies of the hook/component.
+	    var hasMemo = false;
+	    var memoizedSnapshot;
+	    var memoizedSelection;
+
+	    var memoizedSelector = function (nextSnapshot) {
+	      if (!hasMemo) {
+	        // The first time the hook is called, there is no memoized result.
+	        hasMemo = true;
+	        memoizedSnapshot = nextSnapshot;
+
+	        var _nextSelection = selector(nextSnapshot);
+
+	        if (isEqual !== undefined) {
+	          // Even if the selector has changed, the currently rendered selection
+	          // may be equal to the new selection. We should attempt to reuse the
+	          // current value if possible, to preserve downstream memoizations.
+	          if (inst.hasValue) {
+	            var currentSelection = inst.value;
+
+	            if (isEqual(currentSelection, _nextSelection)) {
+	              memoizedSelection = currentSelection;
+	              return currentSelection;
+	            }
+	          }
+	        }
+
+	        memoizedSelection = _nextSelection;
+	        return _nextSelection;
+	      } // We may be able to reuse the previous invocation's result.
+
+
+	      // We may be able to reuse the previous invocation's result.
+	      var prevSnapshot = memoizedSnapshot;
+	      var prevSelection = memoizedSelection;
+
+	      if (objectIs(prevSnapshot, nextSnapshot)) {
+	        // The snapshot is the same as last time. Reuse the previous selection.
+	        return prevSelection;
+	      } // The snapshot has changed, so we need to compute a new selection.
+
+
+	      // The snapshot has changed, so we need to compute a new selection.
+	      var nextSelection = selector(nextSnapshot); // If a custom isEqual function is provided, use that to check if the data
+	      // has changed. If it hasn't, return the previous selection. That signals
+	      // to React that the selections are conceptually equal, and we can bail
+	      // out of rendering.
+
+	      // If a custom isEqual function is provided, use that to check if the data
+	      // has changed. If it hasn't, return the previous selection. That signals
+	      // to React that the selections are conceptually equal, and we can bail
+	      // out of rendering.
+	      if (isEqual !== undefined && isEqual(prevSelection, nextSelection)) {
+	        return prevSelection;
+	      }
+
+	      memoizedSnapshot = nextSnapshot;
+	      memoizedSelection = nextSelection;
+	      return nextSelection;
+	    }; // Assigning this to a constant so that Flow knows it can't change.
+
+
+	    // Assigning this to a constant so that Flow knows it can't change.
+	    var maybeGetServerSnapshot = getServerSnapshot === undefined ? null : getServerSnapshot;
+
+	    var getSnapshotWithSelector = function () {
+	      return memoizedSelector(getSnapshot());
+	    };
+
+	    var getServerSnapshotWithSelector = maybeGetServerSnapshot === null ? undefined : function () {
+	      return memoizedSelector(maybeGetServerSnapshot());
+	    };
+	    return [getSnapshotWithSelector, getServerSnapshotWithSelector];
+	  }, [getSnapshot, getServerSnapshot, selector, isEqual]),
+	      getSelection = _useMemo[0],
+	      getServerSelection = _useMemo[1];
+
+	  var value = useSyncExternalStore(subscribe, getSelection, getServerSelection);
+	  useEffect(function () {
+	    inst.hasValue = true;
+	    inst.value = value;
+	  }, [value]);
+	  useDebugValue(value);
+	  return value;
+	}
+
+	withSelector_development.useSyncExternalStoreWithSelector = useSyncExternalStoreWithSelector;
+	          /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+	if (
+	  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
+	  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop ===
+	    'function'
+	) {
+	  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
+	}
+	        
+	  })();
+	}
+	return withSelector_development;
+}
+
+if (process.env.NODE_ENV === 'production') {
+  withSelector.exports = requireWithSelector_production_min();
+} else {
+  withSelector.exports = requireWithSelector_development();
+}
+
+var withSelectorExports = withSelector.exports;
+var useSyncExternalStoreExports = /*@__PURE__*/getDefaultExportFromCjs(withSelectorExports);
+
+const { useDebugValue } = React__default$1;
+const { useSyncExternalStoreWithSelector } = useSyncExternalStoreExports;
+let didWarnAboutEqualityFn = false;
+const identity = (arg) => arg;
+function useStore(api, selector = identity, equalityFn) {
+  if ((import.meta.env ? import.meta.env.MODE : void 0) !== "production" && equalityFn && !didWarnAboutEqualityFn) {
+    console.warn(
+      "[DEPRECATED] Use `createWithEqualityFn` instead of `create` or use `useStoreWithEqualityFn` instead of `useStore`. They can be imported from 'zustand/traditional'. https://github.com/pmndrs/zustand/discussions/1937"
+    );
+    didWarnAboutEqualityFn = true;
+  }
+  const slice = useSyncExternalStoreWithSelector(
+    api.subscribe,
+    api.getState,
+    api.getServerState || api.getInitialState,
+    selector,
+    equalityFn
+  );
+  useDebugValue(slice);
+  return slice;
+}
+const createImpl = (createState) => {
+  if ((import.meta.env ? import.meta.env.MODE : void 0) !== "production" && typeof createState !== "function") {
+    console.warn(
+      "[DEPRECATED] Passing a vanilla store will be unsupported in a future version. Instead use `import { useStore } from 'zustand'`."
+    );
+  }
+  const api = typeof createState === "function" ? createStore(createState) : createState;
+  const useBoundStore = (selector, equalityFn) => useStore(api, selector, equalityFn);
+  Object.assign(useBoundStore, api);
+  return useBoundStore;
+};
+const create = (createState) => createState ? createImpl(createState) : createImpl;
+
+const useContainerStore = create(() => ({
+    containerRef: undefined,
+}));
+
+function ProductCard({ children }) {
+    const containerRef = useRef(null);
+    useEffect(() => {
+        useContainerStore.setState({ containerRef });
+    }, [containerRef]);
+    return (jsx("div", { style: {
+            width: `min(100vw, ${MEDIA_QUERIES.MOBILE_LG.value}px)`,
+        }, className: "tw-flex tw-min-h-full tw-max-w-[100vw] tw-flex-col tw-justify-center tw-overflow-hidden tw-bg-grey-900 tw-text-grey-300 tw-outline tw-outline-1 tw-outline-material-light-thin group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-3 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-3 mobile-lg:tw-max-w-card-large mobile-lg:tw-rounded-squid-l", children: jsx("div", { ref: containerRef, className: "tw-relative tw-flex tw-h-card-small tw-w-full tw-flex-col tw-justify-end mobile-lg:tw-w-card-large mobile-xs-height:tw-h-card-compact mobile-sm-height:tw-h-card-large", children: children }) }));
+}
+function BorderedContainer({ children, className, }) {
+    return (jsx("section", { className: cn("tw-border-t tw-border-t-material-light-thin", className), children: children }));
+}
+
+function ProfileHeaderBackground() {
+    return (jsxs("div", { className: "tw-relative tw-flex tw-min-h-[195px] tw-flex-1 tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-overflow-hidden tw-rounded-bl-squid-l  tw-rounded-br-squid-l tw-rounded-tl-[25px] tw-rounded-tr-[25px] tw-pb-squid-s group-data-[squid-theme-type='dark']:tw-bg-royal-dark group-data-[squid-theme-type='light']:tw-bg-royal-light", children: [jsx("div", { className: "tw-h-[240px]", children: [...Array(4)].map((_, i) => (jsx(HeaderBackgroundDecorationRow, { index: i }, i))) }), jsx("div", { className: "z-10 tw-absolute tw-inset-0 tw-h-[195px] tw-shadow-inset-royal" })] }));
+}
+function HeaderBackgroundDecorationRow({ index }) {
+    const logoWithImage = (jsx(LogoContainer, { children: jsx(SquidLogo, {}) }));
+    const emptyLogo = jsx(LogoContainer, {});
+    return (jsxs("div", { className: "tw-flex tw-h-[60px] tw-w-[470px] tw-items-center tw-justify-center tw-self-stretch tw-overflow-hidden tw-text-royal-500", children: [index % 2 === 0 ? emptyLogo : logoWithImage, index % 2 === 0 ? logoWithImage : emptyLogo, index % 2 === 0 ? emptyLogo : logoWithImage, index % 2 === 0 ? logoWithImage : emptyLogo, index % 2 === 0 ? emptyLogo : logoWithImage, index % 2 === 0 ? logoWithImage : emptyLogo, index % 2 === 0 ? emptyLogo : logoWithImage] }));
+}
+function LogoContainer({ children }) {
+    return (jsx("div", { className: "tw-flex tw-h-[60px] tw-w-[60px] tw-items-center tw-justify-center", children: children }));
+}
+
+function SwapConfiguration({ amount, tokenPrice = 0, isFetching: isFetchingProp = false, chain, token, direction = "from", onAmountChange, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, maxUsdDecimals, isInputInteractive = true, isLoading = false, inputModeButton, balanceButton, assetsButton, walletButton, }) {
+    var _a, _b, _c;
+    const isWalletButtonInteractive = !isLoading && !!(walletButton === null || walletButton === void 0 ? void 0 : walletButton.onClick);
+    const WalletButtonTag = isWalletButtonInteractive ? "button" : "div";
+    const isFetching = isFetchingProp || isLoading;
+    return (jsxs("section", { className: "tw-relative tw-flex tw-h-[195px] tw-w-full tw-flex-col tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-pb-squid-m mobile-lg:tw-w-card-large mobile-sm-height:tw-h-[205px]", children: [jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-m tw-py-squid-xs tw-leading-5 tw-text-grey-300 mobile-lg:tw-px-squid-l", children: jsx(Tooltip, Object.assign({}, walletButton === null || walletButton === void 0 ? void 0 : walletButton.tooltip, { tooltipWidth: "max", childrenClassName: "tw-rounded-squid-s", containerClassName: "tw-rounded-squid-s", children: jsxs(WalletButtonTag, { onClick: isWalletButtonInteractive ? walletButton === null || walletButton === void 0 ? void 0 : walletButton.onClick : undefined, className: cn("-tw-ml-squid-xs tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs tw-text-grey-600", isWalletButtonInteractive && "hover:tw-bg-material-light-thin", isLoading && "tw-opacity-50"), children: [jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === "from" ? "Pay" : "Receive" }), !isLoading && !(walletButton === null || walletButton === void 0 ? void 0 : walletButton.disabled) && !!token && (jsxs(Fragment, { children: [jsx(BodyText, { size: "small", children: ":" }), jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsx(BodyText, { size: "small", className: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
+                                                    ? "tw-text-grey-300"
+                                                    : "tw-text-royal-400", children: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
+                                                    ? walletButton === null || walletButton === void 0 ? void 0 : walletButton.address
+                                                    : (_a = walletButton === null || walletButton === void 0 ? void 0 : walletButton.emptyAddressLabel) !== null && _a !== void 0 ? _a : "Connect wallet" }), jsx(ChevronArrowIcon, { className: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
+                                                    ? "tw-text-grey-600"
+                                                    : "tw-text-royal-400" })] })] }))] }) })) }), jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: jsx(AssetsButton, Object.assign({}, assetsButton, { chain: chain, token: token, isLoading: isLoading })) }), isFetching && (jsx("div", { className: "tw-absolute tw-bottom-2 tw-left-squid-m tw-z-10 tw-overflow-hidden mobile-lg:tw-left-squid-l", children: jsx("div", { className: "tw-h-[94px] tw-w-[1260px] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), jsx(NumericInput, { inputMode: "decimal", pattern: "[0-9.,]*", token: {
+                    decimals: (_b = token === null || token === void 0 ? void 0 : token.decimals) !== null && _b !== void 0 ? _b : 18,
+                    symbol: (_c = token === null || token === void 0 ? void 0 : token.symbol) !== null && _c !== void 0 ? _c : "",
+                    price: tokenPrice,
+                }, onAmountChange: (value) => {
+                    onAmountChange === null || onAmountChange === void 0 ? void 0 : onAmountChange(value);
+                }, balance: balance, criticalPriceImpactPercentage: criticalPriceImpactPercentage, error: error, formatIfVerySmall: {
+                    token: "0.001",
+                    usd: "0.01",
+                }, maxUsdDecimals: maxUsdDecimals, isLoading: isFetching, priceImpactPercentage: priceImpactPercentage, showDetails: !!token, direction: direction, forcedAmount: amount, inputModeButton: inputModeButton, balanceButton: balanceButton, isInteractive: isInputInteractive && !isLoading })] }));
+}
+
+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 })] }));
+}
+
+const SPACING = 10;
+function useDropdownMenu(props) {
+    const { initialIsModalOpen, itemsContainerRef } = props !== null && props !== void 0 ? props : {};
+    const [isDropdownOpen, setIsModalOpen] = useState(Boolean(initialIsModalOpen));
+    const dropdownRef = useRef(null);
+    const openDropdownButtonRef = useRef(null);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            // close modal if the user clicked outside of it
+            var _a;
+            if (dropdownRef.current &&
+                event.target !== openDropdownButtonRef.current &&
+                !dropdownRef.current.contains(event.target) &&
+                !((_a = openDropdownButtonRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
+                setIsModalOpen(false);
+            }
+        };
+        if (isDropdownOpen) {
+            document.addEventListener("click", handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener("click", handleClickOutside);
+        };
+    }, [dropdownRef, isDropdownOpen]);
+    const openDropdown = useCallback(() => {
+        setIsModalOpen((prev) => !prev);
+    }, []);
+    const closeDropdown = useCallback(() => {
+        setIsModalOpen(false);
+    }, []);
+    const [dropdownStyles, setDropdownStyles] = useState(null);
+    const itemRef = useRef(null);
+    const menuRef = useRef(null);
+    // Effect to find the best position for the dropdown menu, so it's always visible for the user
+    useEffect(() => {
+        var _a;
+        if (!isDropdownOpen) {
+            // when the dropdown is closed, we want to reset its position
+            // because user may scroll, and the old position may be out of view, so we'll need to recalculate it
+            setDropdownStyles(null);
+            return;
+        }
+        const item = itemRef.current;
+        const itemsContainer = (_a = itemsContainerRef === null || itemsContainerRef === void 0 ? void 0 : itemsContainerRef.current) !== null && _a !== void 0 ? _a : item === null || item === void 0 ? void 0 : item.parentElement;
+        const dropdownMenu = menuRef.current;
+        if (!item || !dropdownRef.current || !itemsContainer || !dropdownMenu) {
+            return;
+        }
+        // Get the bounding rectangle of the item
+        const itemRect = item.getBoundingClientRect();
+        // Get the bounding rectangle of the container element
+        const containerRect = itemsContainer.getBoundingClientRect();
+        const dropdownMenuRect = dropdownMenu.getBoundingClientRect();
+        // Calculate the bottom position of the visible area of the the items container
+        const containerVisibleBottom = containerRect.top + containerRect.height;
+        // Calculate the distance from the bottom of the item to the visible bottom of the items container
+        const distanceBetweenItemBottomAndContainerBottomEdge = containerVisibleBottom - itemRect.bottom;
+        // the same but for the top
+        const distanceBetweenItemTopAndContainerTopEdge = itemRect.top - containerRect.top;
+        const dropdownMenuHeight = dropdownMenu.clientHeight;
+        const maxHeight = containerRect.bottom - dropdownMenuRect.top - SPACING;
+        // check if the height of the dropdown is less than the longest distance, either top or bottom
+        // if so, means that the dropdown keeps visible when positioned at the top or bottom of the item
+        const isDropdownVisibleAtItemTopOrBottom = dropdownMenuHeight <=
+            Math.max(distanceBetweenItemBottomAndContainerBottomEdge, distanceBetweenItemTopAndContainerTopEdge);
+        // if the dropdown is not visible at top or bottom of the item
+        // we just center it
+        if (!isDropdownVisibleAtItemTopOrBottom) {
+            return setDropdownStyles({
+                position: "center",
+                maxHeight,
+            });
+        }
+        // finally, if the dropdown fits, position it where it has more space
+        if (distanceBetweenItemBottomAndContainerBottomEdge >=
+            distanceBetweenItemTopAndContainerTopEdge) {
+            setDropdownStyles({
+                position: "bottom",
+                maxHeight,
+            });
+        }
+        else {
+            setDropdownStyles({
+                position: "top",
+                maxHeight,
+            });
+        }
+    }, [isDropdownOpen, menuRef, itemRef]);
+    return {
+        isDropdownOpen,
+        openDropdown,
+        closeDropdown,
+        dropdownRef,
+        openDropdownButtonRef,
+        dropdownStyles,
+        itemRef,
+        menuRef,
+    };
+}
+
+const IS_SERVER = typeof window === "undefined";
+const useIsomorphicLayoutEffect$1 = IS_SERVER ? useEffect : useLayoutEffect;
+/**
+ * Custom hook that tracks the state of a media query using the [`Match Media API`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia).
+ * @param {string} query - The media query to track.
+ * @param {?UseMediaQueryOptions} [options] - The options for customizing the behavior of the hook (optional).
+ * @returns {boolean} The current state of the media query (true if the query matches, false otherwise).
+ * @public
+ * @example
+ * ```tsx
+ * const isSmallScreen = useMediaQuery('(max-width: 600px)');
+ * // Use `isSmallScreen` to conditionally apply styles or logic based on the screen size.
+ * ```
+ */
+function useMediaQuery(query, { defaultValue = false, initializeWithValue = true, } = {}) {
+    const getMatches = (query) => {
+        if (IS_SERVER) {
+            return defaultValue;
+        }
+        return window.matchMedia(query).matches;
+    };
+    const [matches, setMatches] = useState(() => {
+        if (initializeWithValue) {
+            return getMatches(query);
+        }
+        return defaultValue;
+    });
+    // Handles the change event of the media query.
+    function handleChange() {
+        setMatches(getMatches(query));
+    }
+    useIsomorphicLayoutEffect$1(() => {
+        const matchMedia = window.matchMedia(query);
+        // Triggered at the first client-side load and if query changes
+        handleChange();
+        // Use deprecated `addListener` and `removeListener` to support Safari < 14 (#135)
+        if (matchMedia.addListener) {
+            matchMedia.addListener(handleChange);
+        }
+        else {
+            matchMedia.addEventListener("change", handleChange);
+        }
+        return () => {
+            if (matchMedia.removeListener) {
+                matchMedia.removeListener(handleChange);
+            }
+            else {
+                matchMedia.removeEventListener("change", handleChange);
+            }
+        };
+    }, [query]);
+    return matches;
+}
+
+function useCollapsibleMenu() {
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const menuRef = useRef(null);
+    const toggleMenu = () => {
+        setIsMenuOpen(!isMenuOpen);
+    };
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (menuRef.current && !menuRef.current.contains(event.target)) {
+                setIsMenuOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+    return {
+        isMenuOpen,
+        toggleMenu,
+        menuRef,
+    };
+}
+
+const useTimer = ({ immediateStart = true, }) => {
+    const [timer, setTimer] = useState("0s");
+    const intervalRef = useRef(null);
+    const startTimer = () => {
+        if (intervalRef.current !== null)
+            return; // Prevent multiple intervals
+        const startTime = Date.now();
+        intervalRef.current = window.setInterval(() => {
+            const elapsedTime = Date.now() - startTime;
+            setTimer(formatDuration(elapsedTime));
+        }, 1000);
+    };
+    const stopTimer = () => {
+        if (intervalRef.current !== null) {
+            clearInterval(intervalRef.current);
+            intervalRef.current = null;
+        }
+    };
+    useEffect(() => {
+        if (immediateStart) {
+            startTimer();
+        }
+        return () => {
+            stopTimer();
+        };
+    }, [immediateStart]);
+    return { timer, stopTimer, startTimer };
+};
+
+var ThemePreference;
+(function (ThemePreference) {
+    ThemePreference["LIGHT"] = "light";
+    ThemePreference["DARK"] = "dark";
+    ThemePreference["SYSTEM"] = "system";
+})(ThemePreference || (ThemePreference = {}));
+const THEME_STORAGE_KEY = "__squid-app-theme-type__";
+const THEME_CHANGE_EVENT = "squid-app-theme-change";
+const THEME_MEDIA_QUERY = "(prefers-color-scheme: light)";
+function useUserTheme() {
+    const [themePreference, setThemePreference] = useState(getInitialTheme);
+    const [themeType, setThemeType] = useState(getEffectiveTheme(themePreference));
+    useEffect(() => {
+        const handleThemeChange = (e) => {
+            setThemePreference(e.detail);
+        };
+        window.addEventListener(THEME_CHANGE_EVENT, handleThemeChange);
+        return () => {
+            window.removeEventListener(THEME_CHANGE_EVENT, handleThemeChange);
+        };
+    }, []);
+    useEffect(() => {
+        const mediaQuery = window.matchMedia(THEME_MEDIA_QUERY);
+        const handleChange = () => {
+            if (themePreference === ThemePreference.SYSTEM) {
+                setThemeType(mediaQuery.matches ? "light" : "dark");
+            }
+        };
+        mediaQuery.addEventListener("change", handleChange);
+        handleChange();
+        return () => {
+            mediaQuery.removeEventListener("change", handleChange);
+        };
+    }, [themePreference]);
+    useEffect(() => {
+        setThemeType(getEffectiveTheme(themePreference));
+    }, [themePreference]);
+    const setThemeManually = (theme) => {
+        setThemePreference(theme);
+        localStorage.setItem(THEME_STORAGE_KEY, theme);
+        window.dispatchEvent(new CustomEvent(THEME_CHANGE_EVENT, { detail: theme }));
+    };
+    const isDarkMode = useMemo(() => themeType === "dark", [themeType]);
+    return {
+        themePreference,
+        themeType,
+        theme: isDarkMode ? darkTheme : lightTheme,
+        setThemeManually,
+        isDarkMode,
+    };
+}
+function getInitialTheme() {
+    var _a;
+    if (typeof window === "undefined")
+        return ThemePreference.SYSTEM;
+    return ((_a = localStorage.getItem(THEME_STORAGE_KEY)) !== null && _a !== void 0 ? _a : ThemePreference.SYSTEM);
+}
+function getEffectiveTheme(themeType) {
+    if (themeType !== ThemePreference.SYSTEM)
+        return themeType;
+    return window.matchMedia(THEME_MEDIA_QUERY).matches ? "light" : "dark";
+}
+
+function BaseDropdownMenuItem({ label, imageUrl, icon, labelClassName, onClick, link, control, detail, isSelected, itemRef, children, contentRef, }) {
+    const ContentTag = link
+        ? "a"
+        : (control === null || control === void 0 ? void 0 : control.type) === "switch"
+            ? "label"
+            : "button";
+    const contentTagProps = link
+        ? {
+            href: link,
+            target: "_blank",
+            ref: contentRef,
+        }
+        : {
+            ref: contentRef,
+        };
+    return (jsxs("li", { ref: itemRef, className: "tw-max-h-squid-xl tw-w-full tw-min-w-[160px] tw-px-squid-xxs", children: [jsxs(ContentTag, Object.assign({}, contentTagProps, { onClick: onClick, className: cn("tw-flex tw-h-squid-l tw-w-full tw-cursor-pointer tw-items-center tw-gap-squid-xxs tw-rounded-squid-xs tw-px-squid-xxs hover:tw-bg-material-light-thin", isSelected && "tw-bg-material-light-thin"), children: [jsx("div", { className: "tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-between tw-rounded-squid-xs", children: imageUrl ? (jsx("img", { src: imageUrl, className: "tw-h-full tw-w-full tw-rounded-squid-xxs" })) : (icon) }), jsx(CaptionText, { className: cn(labelClassName, "tw-max-w-full tw-flex-1 tw-truncate tw-text-left !tw-leading-[18px]"), children: label }), (control === null || control === void 0 ? void 0 : control.type) === "switch" ? (jsx("span", { className: "tw-flex tw-items-center tw-pl-squid-l", children: jsx(Switch, Object.assign({ size: "small" }, control)) })) : detail ? (jsx("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: detail })) : null] })), children] }));
+}
+function DropdownMenuItem(props) {
+    if (props.submenu) {
+        return (jsx(DropdownMenuItemWithSubmenu, Object.assign({}, props, { submenu: props.submenu, containerRef: props.containerRef })));
+    }
+    return jsx(BaseDropdownMenuItem, Object.assign({}, props));
+}
+function DropdownMenuItemWithSubmenu(_a) {
+    var _b;
+    var { submenu } = _a, props = __rest$1(_a, ["submenu"]);
+    const { isDropdownOpen, dropdownRef, openDropdown, itemRef, menuRef, openDropdownButtonRef, dropdownStyles, } = useDropdownMenu({
+        itemsContainerRef: props.containerRef,
+    });
+    return (jsx("div", { className: "tw-relative tw-flex", children: jsx(DropdownMenuItem, Object.assign({ detail: jsx(ChevronRightSmallIcon, { size: "20" }) }, props, { containerRef: undefined, itemRef: itemRef, contentRef: openDropdownButtonRef, onClick: (event) => {
+                var _a;
+                openDropdown();
+                (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, event);
+            }, children: isDropdownOpen && (jsx(DropdownMenu, { className: "tw-absolute !tw-right-[calc(100%+3px)] -tw-top-squid-xxs", containerClassName: "!tw-static", dropdownRef: dropdownRef, menuContentClassName: "tw-overflow-hidden", menuRef: menuRef, contentWrapperProps: {
+                    style: {
+                        maxHeight: (_b = dropdownStyles === null || dropdownStyles === void 0 ? void 0 : dropdownStyles.maxHeight) !== null && _b !== void 0 ? _b : 0,
+                        overflow: "auto",
+                        scrollbarWidth: "none",
+                    },
+                }, children: submenu })) })) }));
+}
+
+const dropdownPositionClassMap$1 = {
+    top: "tw-right-full tw-bottom-[50px]",
+    bottom: "tw-right-full tw-top-[50px]",
+    center: "tw-right-[50px] -tw-top-[35px]",
+};
+const listItemSizeMap = {
+    small: "tw-h-list-item-small",
+    large: "tw-h-list-item-large",
+};
+const collapsedListItemClassMap = {
+    small: "tw-w-[70px]",
+    large: "tw-w-[80px]",
+};
+function ListItem(_a) {
+    var { itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, placeholderImageUrl, size = "large", mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded = false, detailButtonClassName, loading, containerProps, compactOnMobile, extraPadding = true, itemsContainerRef, dropdownMenuContent } = _a, props = __rest$1(_a, ["itemTitle", "mainImageUrl", "subtitle", "subtitleOnHover", "detail", "icon", "secondaryImageUrl", "placeholderImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading", "containerProps", "compactOnMobile", "extraPadding", "itemsContainerRef", "dropdownMenuContent"]);
+    const subtitleClassName = cn("tw-h-[14px] tw-max-w-full tw-truncate !tw-leading-[16px] tw-text-grey-500", compactOnMobile ? "tw-hidden mobile-lg:tw-block" : "tw-block");
+    // 'small' variant does not have detail
+    const showDetail = size === "large" && (!!detail || !!icon || showDetailOnHoverOnly);
+    const isDetailInteractive = !!onDetailClick;
+    const DetailTag = isDetailInteractive ? "button" : "div";
+    const detailProps = isDetailInteractive
+        ? {
+            onClick: (event) => {
+                // prevent click event from bubbling up to parent
+                event.stopPropagation();
+                onDetailClick === null || onDetailClick === void 0 ? void 0 : onDetailClick();
+            },
+        }
+        : {};
+    // There are two possible ways to handle loading state:
+    // Can be boolean or string
+    // If boolean and true, it will show a full loading skeleton
+    // If it's a non empty string, means that we want to display the skeleton + some text
+    const loadingComponent = () => {
+        if ((loading === null || loading === void 0 ? void 0 : loading.subtitle) === true) {
+            return jsx(TextSkeleton, { width: "50px", className: "tw-h-2.5", isLoading: true });
+        }
+        if (typeof (loading === null || loading === void 0 ? void 0 : loading.subtitle) === "string" && loading.subtitle.length > 0) {
+            return (jsxs("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsx(TextSkeleton, { width: "50px", className: "tw-h-2.5", isLoading: true }), jsx(CaptionText, { className: subtitleClassName, children: loading.subtitle })] }));
+        }
+        return null;
+    };
+    const isInteractive = !!props.onClick;
+    const ItemTag = isInteractive ? "button" : "div";
+    const itemProps = isInteractive ? props : {};
+    const { isDropdownOpen, dropdownRef, openDropdown, openDropdownButtonRef, itemRef, menuRef, dropdownStyles, } = useDropdownMenu({
+        itemsContainerRef,
+    });
+    return (jsxs("li", Object.assign({}, containerProps, { ref: itemRef, className: cn("tw-relative tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300 tw-highlight-adjacent", listItemSizeMap[size], extraPadding && "tw-px-squid-xs", compactOnMobile
+            ? `${collapsedListItemClassMap[size]} mobile-lg:tw-w-full`
+            : "tw-w-full", className), children: [jsxs(ItemTag, Object.assign({}, itemProps, { className: cn("tw-group/list-item tw-peer/list-item tw-relative tw-flex tw-w-full tw-max-w-full tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs", (isSelected || isDropdownOpen) && "tw-bg-material-light-thin", isInteractive && "hover:tw-bg-material-light-thin"), children: [size === "large" ? (jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, placeholderImageUrl: placeholderImageUrl, size: "md", rounded: rounded })) })) : (jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon ? (mainIcon) : (jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxs("div", { className: cn("tw-flex tw-h-[40px] tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xxs", 
+                        // 'large' variant has extra padding
+                        size === "large" ? "tw-w-[56%] tw-pl-squid-xxs" : "tw-w-[67%]"), children: [typeof itemTitle === "string" ? (jsx(BodyText, { size: "small", className: cn("tw-max-w-full tw-truncate", subtitle && "tw-h-[17px] !tw-leading-[17px]", compactOnMobile ? "tw-hidden mobile-lg:tw-block" : "tw-block"), children: itemTitle })) : (itemTitle), size === "large" &&
+                                ((loading === null || loading === void 0 ? void 0 : loading.subtitle) ? (loadingComponent()) : subtitle ? (jsxs(CaptionText, { className: subtitleClassName, children: [subtitleOnHover && (jsx(CaptionText, { className: cn(subtitleClassName, "tw-hidden group-hover/list-item:tw-block"), children: subtitleOnHover })), subtitle] })) : null)] }), showDetail && (jsxs(DetailTag, Object.assign({}, detailProps, { className: cn("tw-flex tw-w-fit tw-items-center tw-justify-center tw-rounded-squid-xs", size === "large" ? "tw-h-squid-xl" : "tw-h-squid-l", showDetailOnHoverOnly
+                            ? "tw-opacity-0 hover:tw-opacity-100 focus:tw-opacity-100 group-hover/list-item:tw-opacity-100 group-focus/list-item:tw-opacity-100"
+                            : "tw-flex", isDetailInteractive && "hover:tw-bg-material-light-thin", detailButtonClassName), children: [!!detail && (jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })), icon ? (jsx("span", { className: "tw-flex tw-items-center tw-justify-center tw-px-[3px] tw-py-2", children: icon })) : null] })))] })), !!dropdownMenuContent && (jsx(ListItemActionsButton, { ref: openDropdownButtonRef, onClick: openDropdown, isActive: isDropdownOpen, className: "peer-hover/list-item:tw-opacity-100" })), isDropdownOpen && !!dropdownMenuContent ? (jsx(DropdownMenu, { menuRef: menuRef, isHidden: !dropdownStyles, className: cn(!!dropdownStyles &&
+                    dropdownPositionClassMap$1[dropdownStyles.position]), dropdownRef: dropdownRef, children: dropdownMenuContent })) : null] })));
+}
+const ListItemActionsButton = forwardRef((props, ref) => {
+    return (jsx("button", Object.assign({}, props, { ref: ref, className: cn("tw-peer tw-absolute tw-right-squid-s tw-top-squid-xxs tw-flex tw-h-squid-xl tw-w-squid-xl tw-items-center tw-justify-center tw-rounded-squid-xs tw-p-2 tw-text-grey-300 hover:tw-bg-material-light-thin hover:tw-opacity-100 focus-visible:tw-opacity-100", props.isActive
+            ? "tw-bg-material-light-thin tw-opacity-100"
+            : "tw-opacity-0", props.className), children: jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })));
+});
+
+const dropdownPositionClassMap = {
+    top: "tw-right-squid-xxs tw-bottom-[50px]",
+    bottom: "tw-right-squid-xxs tw-top-[50px]",
+    center: "tw-right-[50px] tw-translate-y-[calc(-50%+20px)]",
+};
+const statusBadge = {
+    completed: {},
+    pending: {
+        badge: (jsx(Loader, { size: "16", strokeWidth: "4", className: "group-data-[squid-theme-type=dark]:tw-text-grey-100 group-data-[squid-theme-type=light]:tw-text-grey-900" })),
+        containerClassName: "tw-bg-royal-400",
+    },
+    failed: {
+        badge: (jsx("span", { className: "tw-bg-grey-900", children: jsx(EmojiSadIcon, { className: "tw-text-status-negative" }) })),
+        containerClassName: "tw-bg-status-negative",
+    },
+    warning: {
+        badge: (jsx("span", { className: "tw-bg-grey-900", children: jsx(EmojiMeh, { className: "tw-text-status-partial" }) })),
+        containerClassName: "tw-bg-status-partial",
+    },
+};
+function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, dropdownMenuContent, itemsContainerRef, status, warningLabel, onClick, }) {
+    const { isDropdownOpen, dropdownRef, openDropdown, openDropdownButtonRef, itemRef, menuRef, dropdownStyles, } = useDropdownMenu({
+        itemsContainerRef,
+    });
+    const statusLabel = useMemo(() => {
+        switch (status) {
+            case "completed":
+                return jsx(CaptionText, { children: dateCompleted });
+            case "pending":
+                return jsx(CaptionText, { className: "tw-text-royal-400", children: "Pending" });
+            case "failed":
+                return (jsxs(Fragment, { children: [jsx(CaptionText, { className: "tw-text-status-negative", children: "Fail" }), jsx(CaptionText, { children: dateCompleted })] }));
+            case "warning":
+                return (jsx(CaptionText, { className: "tw-text-status-partial", children: warningLabel }));
+            default:
+                return null;
+        }
+    }, [status, dateCompleted]);
+    const isInteractive = !!onClick;
+    const ItemTag = isInteractive ? "button" : "div";
+    const itemTagProps = isInteractive
+        ? {
+            onClick,
+        }
+        : {};
+    return (jsxs("li", { ref: itemRef, className: cn("tw-relative tw-flex tw-h-list-item-large tw-min-w-list-item-small tw-self-stretch tw-bg-grey-900 tw-px-squid-xs tw-text-grey-300", !!dropdownMenuContent && "tw-highlight-adjacent"), children: [jsxs(ItemTag, Object.assign({}, itemTagProps, { className: cn("tw-group/history-item tw-peer/history-item tw-relative tw-flex tw-w-full tw-flex-shrink-0 tw-items-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs", isInteractive && "hover:tw-bg-material-light-thin"), children: [jsxs("div", { className: "tw-relative tw-h-10 tw-w-[60px]", children: [!!statusBadge[status].badge && (jsx("span", { className: cn("tw-absolute -tw-left-[5px] tw-bottom-0 tw-z-10 tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-center tw-overflow-hidden tw-rounded-full tw-border tw-border-grey-900 tw-p-0.5", statusBadge[status].containerClassName), children: statusBadge[status].badge })), jsx("img", { src: firstImageUrl, className: "tw-absolute tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" }), jsx("img", { src: secondImageUrl, className: "tw-absolute tw-left-5 tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" })] }), jsxs("div", { className: "tw-flex tw-h-10 tw-flex-1 tw-flex-col tw-self-stretch", children: [jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-justify-between tw-text-grey-500", children: [jsxs("div", { className: "tw-flex tw-items-center", children: [jsx(CaptionText, { children: fromLabel }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronRightSmallIcon, {}) }), jsx(CaptionText, { children: toLabel })] }), jsx("div", { className: cn("tw-flex tw-items-center tw-justify-center tw-gap-squid-xxs tw-hide-on-parent-hover", !!dropdownMenuContent &&
+                                            "tw-transition-opacity group-hover/history-item:tw-hidden group-hover/history-item:tw-opacity-0 peer-focus:tw-hidden peer-focus:tw-opacity-0", isDropdownOpen && "tw-opacity-0"), children: statusLabel })] }), jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-gap-squid-xxs tw-text-grey-300", children: [jsx(BodyText, { size: "small", children: fromAmount }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronLargeRightIcon, {}) }), jsx(BodyText, { size: "small", children: toAmount })] })] })] })), !!dropdownMenuContent && (jsx(ListItemActionsButton, { ref: openDropdownButtonRef, onClick: openDropdown, isActive: isDropdownOpen, className: "peer-hover/history-item:tw-opacity-100" })), isDropdownOpen && !!dropdownMenuContent ? (jsx(DropdownMenu, { menuRef: menuRef, isHidden: !dropdownStyles, className: cn(!!dropdownStyles &&
+                    dropdownPositionClassMap[dropdownStyles.position]), dropdownRef: dropdownRef, children: dropdownMenuContent })) : null] }));
+}
+
+function MenuItem({ label, imageUrl, icon }) {
+    return (jsxs("li", { className: "tw-mx-squid-xxs tw-inline-flex tw-max-h-list-item-small tw-items-center tw-justify-start tw-gap-squid-xxs tw-rounded-squid-xs tw-bg-grey-900 tw-py-squid-xxs tw-pl-squid-xxs tw-pr-squid-xl tw-text-grey-300", children: [jsx("div", { className: "tw-h-squid-m tw-w-squid-m", children: imageUrl ? (jsx("img", { className: "tw-h-full tw-w-full tw-rounded-squid-xxs", src: imageUrl, alt: "" })) : icon ? (icon) : null }), jsx(CaptionText, { children: label })] }));
 }
 
-/**
- * @license React
- * use-sync-external-store-shim/with-selector.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var hasRequiredWithSelector_production_min;
-
-function requireWithSelector_production_min () {
-	if (hasRequiredWithSelector_production_min) return withSelector_production_min;
-	hasRequiredWithSelector_production_min = 1;
-var h=React__default$1,n=requireShim();function p(a,b){return a===b&&(0!==a||1/a===1/b)||a!==a&&b!==b}var q="function"===typeof Object.is?Object.is:p,r=n.useSyncExternalStore,t=h.useRef,u=h.useEffect,v=h.useMemo,w=h.useDebugValue;
-	withSelector_production_min.useSyncExternalStoreWithSelector=function(a,b,e,l,g){var c=t(null);if(null===c.current){var f={hasValue:!1,value:null};c.current=f;}else f=c.current;c=v(function(){function a(a){if(!c){c=!0;d=a;a=l(a);if(void 0!==g&&f.hasValue){var b=f.value;if(g(b,a))return k=b}return k=a}b=k;if(q(d,a))return b;var e=l(a);if(void 0!==g&&g(b,e))return b;d=a;return k=e}var c=!1,d,k,m=void 0===e?null:e;return [function(){return a(b())},null===m?void 0:function(){return a(m())}]},[b,e,l,g]);var d=r(a,c[0],c[1]);
-	u(function(){f.hasValue=!0;f.value=d;},[d]);w(d);return d};
-	return withSelector_production_min;
+const containerVariantClassNameMap = {
+    small: "tw-px-squid-xs",
+    large: "tw-px-squid-0",
+};
+const childrenVariantClassNameMap = {
+    small: "tw-min-h-squid-l tw-px-squid-xs",
+    large: "tw-min-h-squid-xl tw-px-squid-m",
+};
+function SmallBodyText(props) {
+    return jsx(BodyText, Object.assign({ size: "small" }, props));
+}
+function PropertyListItem(_a) {
+    var { isLoading = false, label, detail, icon, className, variant = "small", showGradientBg = true, labelClassName, iconClassName, detailClassName } = _a, props = __rest$1(_a, ["isLoading", "label", "detail", "icon", "className", "variant", "showGradientBg", "labelClassName", "iconClassName", "detailClassName"]);
+    const Text = variant === "small" ? CaptionText : SmallBodyText;
+    return (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 && "squid-property-row-bg", containerVariantClassNameMap[variant], className), children: jsxs("div", { className: cn("tw-flex tw-h-squid-l tw-w-full tw-items-center tw-justify-between tw-gap-squid-xs tw-rounded-squid-xs", childrenVariantClassNameMap[variant]), children: [jsx("div", { className: cn("tw-w-6 tw-text-grey-500", iconClassName), children: icon }), jsx(Text, { className: cn("tw-flex-1 tw-text-grey-400", labelClassName), children: jsx(TextSkeleton, { isLoading: isLoading, children: label }) }), jsx(Text, { className: cn("tw-flex tw-text-grey-300", detailClassName), children: jsx(TextSkeleton, { isLoading: isLoading, children: detail }) })] }) })));
 }
 
-var withSelector_development = {};
-
-/**
- * @license React
- * use-sync-external-store-shim/with-selector.development.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var hasRequiredWithSelector_development;
-
-function requireWithSelector_development () {
-	if (hasRequiredWithSelector_development) return withSelector_development;
-	hasRequiredWithSelector_development = 1;
-
-	if (process.env.NODE_ENV !== "production") {
-	  (function() {
-
-	/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
-	if (
-	  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
-	  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart ===
-	    'function'
-	) {
-	  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
-	}
-	          var React = React__default$1;
-	var shim = requireShim();
-
-	/**
-	 * inlined Object.is polyfill to avoid requiring consumers ship their own
-	 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
-	 */
-	function is(x, y) {
-	  return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y // eslint-disable-line no-self-compare
-	  ;
-	}
-
-	var objectIs = typeof Object.is === 'function' ? Object.is : is;
-
-	var useSyncExternalStore = shim.useSyncExternalStore;
-
-	// for CommonJS interop.
-
-	var useRef = React.useRef,
-	    useEffect = React.useEffect,
-	    useMemo = React.useMemo,
-	    useDebugValue = React.useDebugValue; // Same as useSyncExternalStore, but supports selector and isEqual arguments.
-
-	function useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
-	  // Use this to track the rendered snapshot.
-	  var instRef = useRef(null);
-	  var inst;
-
-	  if (instRef.current === null) {
-	    inst = {
-	      hasValue: false,
-	      value: null
-	    };
-	    instRef.current = inst;
-	  } else {
-	    inst = instRef.current;
-	  }
-
-	  var _useMemo = useMemo(function () {
-	    // Track the memoized state using closure variables that are local to this
-	    // memoized instance of a getSnapshot function. Intentionally not using a
-	    // useRef hook, because that state would be shared across all concurrent
-	    // copies of the hook/component.
-	    var hasMemo = false;
-	    var memoizedSnapshot;
-	    var memoizedSelection;
-
-	    var memoizedSelector = function (nextSnapshot) {
-	      if (!hasMemo) {
-	        // The first time the hook is called, there is no memoized result.
-	        hasMemo = true;
-	        memoizedSnapshot = nextSnapshot;
-
-	        var _nextSelection = selector(nextSnapshot);
-
-	        if (isEqual !== undefined) {
-	          // Even if the selector has changed, the currently rendered selection
-	          // may be equal to the new selection. We should attempt to reuse the
-	          // current value if possible, to preserve downstream memoizations.
-	          if (inst.hasValue) {
-	            var currentSelection = inst.value;
-
-	            if (isEqual(currentSelection, _nextSelection)) {
-	              memoizedSelection = currentSelection;
-	              return currentSelection;
-	            }
-	          }
-	        }
-
-	        memoizedSelection = _nextSelection;
-	        return _nextSelection;
-	      } // We may be able to reuse the previous invocation's result.
-
+function SectionTitle(_a) {
+    var { title, icon, accessory, actionIcon, className } = _a, props = __rest$1(_a, ["title", "icon", "accessory", "actionIcon", "className"]);
+    return (jsxs("header", Object.assign({}, props, { className: cn("tw-flex tw-h-[46px] tw-w-full tw-items-center tw-gap-squid-xxs tw-bg-grey-900 tw-px-squid-m tw-pb-squid-xs tw-pt-squid-m tw-text-royal-400", className), children: [icon, jsx(CaptionText, { children: title }), accessory ? (jsx(CaptionText, { className: "tw-flex-1 tw-text-right tw-text-grey-500", children: accessory })) : actionIcon ? (jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end", children: actionIcon })) : null] })));
+}
 
-	      // We may be able to reuse the previous invocation's result.
-	      var prevSnapshot = memoizedSnapshot;
-	      var prevSelection = memoizedSelection;
+function SettingsItem({ icon, label, control, link, transparent = false, helpTooltip, }) {
+    const ContentTag = link ? "a" : "div";
+    const contentTagProps = link
+        ? {
+            href: link,
+            target: "_blank",
+        }
+        : {};
+    const helpIcon = !!helpTooltip && (jsx(HelpIcon, { className: "tw-cursor-help tw-text-grey-600 hover:tw-text-grey-400" }));
+    const showDetailsBorder = !!control && !link && !(control.type === "switch");
+    return (jsx("li", { className: cn("tw-h-[50px] tw-self-stretch tw-px-squid-xs", transparent ? "tw-bg-transparent" : "tw-bg-grey-800"), children: jsxs(ContentTag, Object.assign({ className: cn("tw-flex tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xs tw-text-grey-300", link && "hover:tw-bg-material-light-thin") }, contentTagProps, { children: [icon, jsxs("div", { className: "tw-flex tw-flex-1 tw-items-center tw-gap-squid-xxs tw-self-stretch", children: [jsx(BodyText, { size: "small", children: label }), helpTooltip ? (jsx(Tooltip, Object.assign({}, helpTooltip, { children: helpIcon }))) : (jsx(Fragment, { children: helpIcon }))] }), jsx("div", { className: cn("tw-flex tw-h-squid-l tw-items-center tw-justify-center tw-rounded-squid-xs", showDetailsBorder &&
+                        "tw-rounded-squid-xs tw-border tw-border-solid tw-border-material-light-thin tw-bg-material-dark-thin"), children: !!link ? (jsx(SquareArrowTopRight2Icon, { className: "tw-text-material-light-average" })) : (!!control && (jsxs(Fragment, { children: [control.type === "amount" && (jsxs(Fragment, { children: [jsx(SettingsButton, { onClick: () => control.onChange(control.resetValueControl.value), label: control.resetValueControl.label, isSelected: control.resetValueControl.value === control.value }), control.options.map(({ value }, index, _controls) => (jsx(SettingsButton, { label: "$" + value, isSelected: control.value === value, onClick: () => control.onChange(value) }, index))), jsx(SettingsSlider, { type: control.type, value: control.value, isSelected: control.value !== control.resetValueControl.value, onChange: control.onChange, decimalsFormat: control.decimalsFormat, max: 999 })] })), control.type === "switch" &&
+                                (control.tooltip ? (jsx(Tooltip, Object.assign({}, control.tooltip, { children: jsx(Switch, { size: "large", checked: control.checked, onChange: control.onChange, disabled: control.disabled }) }))) : (jsx(Switch, { size: "large", checked: control.checked, onChange: control.onChange, disabled: control.disabled }))), control.type === "percentage" && (jsxs(Fragment, { children: [jsx(SettingsButton, { label: control.resetValueControl.label, isSelected: control.resetValueControl.value === control.value, onClick: control.resetValueControl.onSelect }), jsx(SettingsSlider, { onChange: control.onChange, value: control.value, type: "percentage", isSelected: control.value !== control.resetValueControl.value, decimalsFormat: control.decimalsFormat, max: control.max, min: control.min })] })), control.type === "options" && (jsx(Fragment, { children: control.options.map(({ label, onSelect }, index) => (jsx(SettingsButton, { label: label, isSelected: control.selectedLabel === label, onClick: onSelect }, index))) }))] }))) })] })) }));
+}
 
-	      if (objectIs(prevSnapshot, nextSnapshot)) {
-	        // The snapshot is the same as last time. Reuse the previous selection.
-	        return prevSelection;
-	      } // The snapshot has changed, so we need to compute a new selection.
+const STEP_ITEM_HEIGHT = 52;
+const statusBgClassMap = {
+    executed: "!tw-bg-grey-300",
+    ongoing: "!tw-bg-grey-300",
+    pending: "!tw-bg-grey-600",
+    waiting: "!tw-bg-grey-300",
+    error: "!tw-bg-status-negative",
+    success: "!tw-bg-status-positive",
+    warning: "!tw-bg-status-partial",
+};
+const separatorClassMap = {
+    executed: "tw-text-grey-300",
+    ongoing: "tw-text-grey-300",
+    pending: "tw-text-grey-600",
+    waiting: "tw-text-grey-300",
+    error: "tw-text-status-negative",
+    success: "tw-text-status-positive",
+    warning: "tw-text-status-partial",
+};
+function SwapStepItem({ descriptionBlocks, showStepSeparator = false, link, status = "pending", }) {
+    // these styles are located here instead of outside the component
+    // so they are updated whenever the animation duration changes
+    const transitionStyle = {
+        transition: `background-color ${ANIMATION_DURATIONS.CHANGE_SWAP_STEP}ms, color ${ANIMATION_DURATIONS.CHANGE_SWAP_STEP}ms`,
+    };
+    const chipContent = useMemo(() => {
+        switch (status) {
+            case "success":
+            case "executed":
+                return jsx(Checkmark1Icon, {});
+            case "error":
+                return jsx(EmojiSadIcon, { size: "16" });
+            case "warning":
+                return jsx(EmojiMeh, { size: "16" });
+            case "waiting":
+                return jsx(DotGrid1x3HorizontalIcon, {});
+            case "pending":
+                return null;
+            case "ongoing":
+                return jsx(Loader, { size: "16", strokeWidth: "4" });
+            default:
+                return null;
+        }
+    }, [status]);
+    const statusTextClass = useMemo(() => {
+        switch (status) {
+            case "pending":
+                return "tw-text-grey-600";
+            default:
+                return "tw-text-grey-300";
+        }
+    }, [status]);
+    return (jsx("li", { style: {
+            maxHeight: `${STEP_ITEM_HEIGHT}px`,
+            minHeight: `${STEP_ITEM_HEIGHT}px`,
+        }, className: "tw-relative tw-flex tw-w-full tw-flex-col tw-items-start tw-justify-center tw-text-grey-300 tw-transition-colors tw-duration-1000", children: jsxs("a", { href: link, target: "_blank", style: Object.assign(Object.assign({}, transitionStyle), { maxHeight: `${STEP_ITEM_HEIGHT}px` }), className: cn("tw-group/swap-step-item tw-flex tw-w-full tw-items-center tw-rounded-squid-xs tw-py-squid-xxs", !!link && "hover:tw-bg-material-light-thin", statusTextClass), children: [jsxs("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, { style: transitionStyle, className: cn("tw-w-squid-xl", statusBgClassMap[status]), icon: chipContent }), showStepSeparator && (jsx("span", { className: cn(separatorClassMap[status], "tw-absolute tw-left-0 tw-top-full tw-mt-0.5"), style: transitionStyle, children: jsx(SwapStepSeparator, {}) }))] }), jsx(DescriptionBlocks, { className: "tw-min-h-squid-l tw-py-squid-xxs tw-pr-squid-xs", blocks: descriptionBlocks })] }) }));
+}
 
+function ActionLayout({ lineCap = jsx(Timeline.CapTop, {}), status = "executed", showTimeline = true, showBody = true, nextStatus, statusIcon, description, title, icon, children, }) {
+    return (jsxs(ActionWrapper, { status: status, children: [jsx(ActionLineOutRow, { status: nextStatus }), jsx(ActionStatusRow, { status: status, icon: statusIcon, children: description }), title && (jsxs(Fragment, { children: [jsx(ActionRow, { children: jsxs(Timeline, { className: cn("tw-h-squid-xs", statusTextClassMap[status]), children: [jsx(Timeline.CapTop, {}), jsx(Timeline.Straight, {}), jsx(Timeline.CapBottom, {})] }) }), jsxs(ActionRow, { children: [jsx("div", { className: "tw-flex tw-items-center tw-justify-center", children: icon }), 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 })] })] })), jsxs(ActionRow, { children: [jsxs(Timeline, { className: showTimeline ? statusTextClassMap[status] : "!tw-text-[transparent]", children: [lineCap, jsx(Timeline.Straight, {})] }), 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 })] })] }));
+}
+function ActionProperties({ timestamp, hash, url, }) {
+    return (jsxs(CaptionText, { className: "tw-flex tw-items-center tw-gap-squid-xs", children: [timestamp && jsx(Timestamp, { time: timestamp }), timestamp && hash && jsx(PipeSeparator, { className: "tw-text-grey-700" }), hash && jsx(HashLink, { hash: hash, url: url, showTx: true })] }));
+}
+function renderStatusIcon(status, defaultIcon) {
+    switch (status) {
+        case "success":
+            return jsx(TransactionState, { status: "success", variant: "compact" });
+        case "executed":
+            return (jsx(TransactionState, { status: "executed", variant: "compact", icon: defaultIcon }));
+        case "error":
+            return jsx(EmojiSadIcon, { className: "tw-text-status-negative" });
+        case "ongoing":
+            return (jsx(Loader, { className: statusTextClassMap.ongoing, strokeWidth: "4", size: "20" }));
+        case "waiting":
+            return jsx(TransactionState, { status: "waiting", variant: "compact" });
+        case "warning":
+            return jsx(TransactionState, { status: "warning", variant: "compact" });
+    }
+}
+const ActionLineOutRow = ({ status }) => (jsx(ActionRow, { children: jsxs(Timeline, { className: cn("tw-h-squid-xs", status ? statusTextClassMap[status] : "!tw-text-[transparent]"), children: [jsx(Timeline.Straight, {}), jsx(Timeline.CapBottom, {})] }) }));
+const ActionStatusRow = ({ children, status, icon, }) => (jsxs(ActionRow, { children: [jsx("div", { className: "tw-flex tw-items-center tw-justify-center", children: renderStatusIcon(status, icon) }), jsx("div", { className: "tw-flex tw-items-center", children: jsx(BodyText, { size: "small", tight: true, className: "tw-block tw-w-full tw-text-grey-300", children: children }) })] }));
+function ActionRow(_a) {
+    var { className } = _a, props = __rest$1(_a, ["className"]);
+    return (jsx("div", Object.assign({}, props, { className: cn("tw-grid tw-grid-cols-[40px,1fr,60px] tw-gap-squid-xs tw-pl-squid-m", className) })));
+}
+function ActionWrapper({ children, status, className, }) {
+    return (jsx("div", { className: cn("tw-relative tw-flex tw-flex-col tw-gap-squid-xxs", status === "waiting" && "tw-bg-grey-800", className), children: children }));
+}
+function Timestamp({ time }) {
+    return (jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xxs tw-text-grey-500", children: [formatRelativeDate(time), jsx("span", { className: "tw-text-grey-700", children: "\u2022" }), formatTime(time)] }));
+}
 
-	      // The snapshot has changed, so we need to compute a new selection.
-	      var nextSelection = selector(nextSnapshot); // If a custom isEqual function is provided, use that to check if the data
-	      // has changed. If it hasn't, return the previous selection. That signals
-	      // to React that the selections are conceptually equal, and we can bail
-	      // out of rendering.
+function ApproveAction({ status, nextStatus, showTimeline, showBody, profile, chain, wallet, timestamp, hash, url, }) {
+    return (jsxs(ActionLayout, { status: status, nextStatus: nextStatus, statusIcon: jsx(ThumbsUp, { fill: true }), description: "Approve contract", title: profile.label, icon: jsx(Image$1, { src: profile.imageURI, variant: "round", size: "xlarge" }), lineCap: jsx(Timeline.ArrowUp, {}), showTimeline: showTimeline, showBody: showBody, children: [jsx("div", { className: "tw-flex tw-flex-col tw-gap-squid-xs", children: jsxs(BodyText, { className: "tw-flex tw-items-center tw-gap-squid-xs", size: "small", children: [jsx(IconLabel, { src: chain.logoURI, children: chain.name }), jsx(PipeSeparator, { className: "tw-text-grey-300" }), jsx(WalletLink, Object.assign({}, wallet))] }) }), (timestamp || hash) && (jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url }))] }));
+}
 
-	      // If a custom isEqual function is provided, use that to check if the data
-	      // has changed. If it hasn't, return the previous selection. That signals
-	      // to React that the selections are conceptually equal, and we can bail
-	      // out of rendering.
-	      if (isEqual !== undefined && isEqual(prevSelection, nextSelection)) {
-	        return prevSelection;
-	      }
+function BridgeAction({ status, nextStatus, showTimeline, showBody, token, chain, provider, timestamp, hash, url, }) {
+    return (jsx(ActionLayout, { status: status, nextStatus: nextStatus, statusIcon: jsx(SquareArrowTopLeftIcon, {}), description: jsxs(Inline, { children: ["Bridge", jsx(IconLabel, { src: token.logoURI, variant: "round", children: jsx(BodyText, { size: "small", children: token.symbol }) }), "to", jsx(IconLabel, { src: chain.logoURI, children: jsx(BodyText, { size: "small", children: chain.name }) }), "via", jsx(IconLabel, { src: provider.logoURI, variant: "round", children: jsx(BodyText, { size: "small", children: provider.name }) })] }), showTimeline: showTimeline, showBody: showBody, children: (timestamp || hash) && (jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url })) }));
+}
 
-	      memoizedSnapshot = nextSnapshot;
-	      memoizedSelection = nextSelection;
-	      return nextSelection;
-	    }; // Assigning this to a constant so that Flow knows it can't change.
+function FeesAction({ status, nextStatus, showTimeline = false, total, lines, }) {
+    return (jsxs(Fragment, { children: [jsx(FeesTotal, { status: status, nextStatus: nextStatus, total: total, showTimeline: lines !== undefined || showTimeline }), lines && (jsx(FeesLines, { status: status, lines: lines, showTimeline: showTimeline }))] }));
+}
+function FeesTotal({ status, nextStatus, total, showTimeline, collapsed, }) {
+    return (jsxs(ActionWrapper, { status: status, children: [jsx(ActionLineOutRow, { status: nextStatus }), jsx(ActionStatusRow, { status: status, icon: jsx(TagIconFilled, {}), children: jsx(FeesRow, Object.assign({ collapsed: collapsed }, total)) }), jsx(ActionRow, { children: jsxs(Timeline, { className: cn("tw-h-squid-xs", showTimeline ? statusTextClassMap[status] : "tw-text-transparent"), children: [jsx(Timeline.CapTop, {}), jsx(Timeline.Straight, {})] }) })] }));
+}
+function FeesLines({ status, lines, showTimeline = false, }) {
+    return (jsxs(ActionWrapper, { status: status, children: [lines && (jsx("div", { children: lines.map((line, index) => (jsxs(Fragment, { children: [index > 0 && (jsx(ActionRow, { children: jsxs(Timeline, { className: cn("tw-h-squid-xs", statusTextClassMap[status]), children: [jsx(Timeline.CapTop, {}), jsx(Timeline.Straight, {})] }) })), jsxs(ActionRow, { children: [jsxs(Timeline, { className: statusTextClassMap[status], children: [jsx(Timeline.Straight, {}), jsx(Timeline.ArrowRight, {})] }), jsx("div", { className: "tw-relative tw-top-[2px] tw-flex tw-items-end", children: jsx(FeesRow, Object.assign({}, line)) })] })] }, index))) })), jsx(ActionRow, { children: jsxs(Timeline, { className: cn("tw-h-squid-xs", showTimeline
+                        ? statusTextClassMap[status]
+                        : "!tw-text-[transparent]"), children: [jsx(Timeline.CapTop, {}), jsx(Timeline.Straight, {})] }) })] }));
+}
+function FeesRow({ label, usd, amount, symbol, collapsed = false, }) {
+    return (jsxs("div", { className: "tw-flex tw-w-full tw-gap-squid-xs", children: [jsx(SizeTransition, { children: jsx(BodyText, { size: "small", tight: true, className: cn("tw-block tw-truncate tw-text-grey-300", !collapsed && "tw-w-[100px]"), children: label }) }), jsx("div", { className: "tw-flex tw-items-center", children: jsx(PipeSeparator, { className: "tw-text-grey-700" }) }), jsxs(BodyText, { size: "small", tight: true, className: "tw-flex-grow tw-text-grey-300", children: ["$", usd] }), jsxs(CaptionText, { className: "tw-text-right tw-text-grey-500", children: [amount, " ", symbol] })] }));
+}
 
+function IncompleteAction({ status, nextStatus, message, buttons, }) {
+    return (jsxs(ActionWrapper, { status: status, children: [jsx(ActionLineOutRow, { status: nextStatus }), jsxs(ActionRow, { children: [jsxs(Timeline, { children: [jsx(Timeline.ArrowReverse, {}), jsx(Timeline.Straight, {})] }), jsxs("div", { className: "tw-flex tw-flex-col tw-gap-squid-m tw-pb-squid-m", children: [jsx(BodyText, { size: "small", tight: true, className: "tw-text-grey-300", children: "Transaction incomplete" }), jsx(BodyText, { size: "small", className: "tw-text-grey-500", children: message }), jsx("div", { className: "tw-flex tw-gap-squid-xs", children: buttons })] })] })] }));
+}
 
-	    // Assigning this to a constant so that Flow knows it can't change.
-	    var maybeGetServerSnapshot = getServerSnapshot === undefined ? null : getServerSnapshot;
+function linkActionTimelineProps(actions, collapsed) {
+    return actions.map((action, index) => {
+        var _a;
+        const nextStatus = (_a = actions[index - 1]) === null || _a === void 0 ? void 0 : _a.props.status;
+        return Object.assign(Object.assign({}, action), { props: Object.assign(Object.assign({}, action.props), { showTimeline: index !== actions.length - 1, showBody: !(collapsed && index === 0), nextStatus }) });
+    });
+}
 
-	    var getSnapshotWithSelector = function () {
-	      return memoizedSelector(getSnapshot());
-	    };
+function ReceiveNFTAction({ status, nextStatus, showTimeline, showBody, nft, chain, wallet, timestamp, hash, url, }) {
+    return (jsxs(ActionLayout, { status: status, statusIcon: jsx(ArrowRightDownIcon, {}), nextStatus: nextStatus, description: "Receive NFT", title: nft.name, icon: jsx(Image$1, { src: nft.imageURI, variant: "square", size: "xlarge" }), lineCap: jsx(Timeline.ArrowUp, {}), showTimeline: showTimeline, showBody: showBody, children: [jsx("div", { className: "tw-flex tw-flex-col tw-gap-squid-xs", children: jsxs(BodyText, { className: "tw-flex tw-items-center tw-gap-squid-xs", size: "small", children: [jsx(IconLabel, { src: chain.logoURI, children: jsx(BodyText, { size: "small", children: chain.name }) }), jsx(PipeSeparator, { className: "tw-text-grey-700" }), jsx(WalletLink, Object.assign({}, wallet))] }) }), jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url })] }));
+}
 
-	    var getServerSnapshotWithSelector = maybeGetServerSnapshot === null ? undefined : function () {
-	      return memoizedSelector(maybeGetServerSnapshot());
-	    };
-	    return [getSnapshotWithSelector, getServerSnapshotWithSelector];
-	  }, [getSnapshot, getServerSnapshot, selector, isEqual]),
-	      getSelection = _useMemo[0],
-	      getServerSelection = _useMemo[1];
+function ReceiveTokensAction({ status, nextStatus, showTimeline, showBody, token, amount, chain, wallet, timestamp, hash, url, }) {
+    return (jsxs(ActionLayout, { status: status, statusIcon: jsx(ArrowRightDownIcon, {}), nextStatus: nextStatus, description: "Receive tokens", title: `${amount} ${token.symbol}`, icon: jsx(Image$1, { src: token.logoURI, variant: "round", size: "xlarge" }), lineCap: jsx(Timeline.ArrowUp, {}), showTimeline: showTimeline, showBody: showBody, children: [jsx("div", { className: "tw-flex tw-flex-col tw-gap-squid-xs", children: jsxs(BodyText, { size: "small", className: "tw-flex tw-items-center tw-gap-squid-xs", children: [jsx(IconLabel, { src: chain.logoURI, children: jsx(BodyText, { size: "small", children: chain.name }) }), jsx(PipeSeparator, { className: "tw-text-body-small tw-text-grey-700" }), " ", jsx(WalletLink, Object.assign({}, wallet))] }) }), jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url })] }));
+}
 
-	  var value = useSyncExternalStore(subscribe, getSelection, getServerSelection);
-	  useEffect(function () {
-	    inst.hasValue = true;
-	    inst.value = value;
-	  }, [value]);
-	  useDebugValue(value);
-	  return value;
-	}
+function SendTokensAction({ status, nextStatus, showTimeline, showBody, token, amount, chain, wallet, timestamp, hash, url, }) {
+    return (jsxs(ActionLayout, { status: status, statusIcon: jsx(ArrowRightUpIcon, {}), nextStatus: nextStatus, description: "Send tokens", title: `${amount} ${token.symbol}`, icon: jsx(Image$1, { src: token.logoURI, variant: "round", size: "xlarge" }), lineCap: jsx(Timeline.ArrowUp, {}), showTimeline: showTimeline, showBody: showBody, children: [jsx("div", { className: "tw-flex tw-flex-col tw-gap-squid-xs", children: jsxs(BodyText, { size: "small", className: "tw-flex tw-items-center tw-gap-squid-xs", children: [jsx(IconLabel, { src: chain.logoURI, children: chain.name }), jsx(PipeSeparator, { className: "tw-text-body-small tw-text-grey-700" }), " ", jsx(WalletLink, Object.assign({}, wallet))] }) }), jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url })] }));
+}
 
-	withSelector_development.useSyncExternalStoreWithSelector = useSyncExternalStoreWithSelector;
-	          /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
-	if (
-	  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
-	  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop ===
-	    'function'
-	) {
-	  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
-	}
-	        
-	  })();
-	}
-	return withSelector_development;
+function StakeAction({ status, nextStatus, showTimeline, showBody, token, provider, timestamp, hash, url, }) {
+    return (jsx(ActionLayout, { status: status, nextStatus: nextStatus, statusIcon: jsx(PieChartIcon, {}), description: jsx(Inline, { children: [
+                "Stake",
+                jsx(IconLabel, { src: token.logoURI, variant: "round", children: jsx(BodyText, { size: "small", children: token.symbol }) }),
+                "on",
+                jsx(IconLabel, { src: provider.logoURI, variant: "round", children: jsx(BodyText, { size: "small", children: provider.name }) }),
+            ] }), showTimeline: showTimeline, showBody: showBody, children: jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url }) }));
 }
 
-if (process.env.NODE_ENV === 'production') {
-  withSelector.exports = requireWithSelector_production_min();
-} else {
-  withSelector.exports = requireWithSelector_development();
+function StartAction({ status, nextStatus, showTimeline = false, showBody = false, timestamp, hash, url, }) {
+    const getDescription = () => {
+        switch (status) {
+            case "error":
+            case "waiting":
+                return "Transaction not started";
+            default:
+                return "Transaction started";
+        }
+    };
+    return (jsx(ActionLayout, { status: status, nextStatus: nextStatus, statusIcon: jsx(ArrowUpIcon, {}), description: getDescription(), lineCap: jsx(Timeline.CapTop, {}), showTimeline: showTimeline, showBody: showBody, children: status === "waiting" ? (jsx(CaptionText, { children: "Waiting to confirm..." })) : (jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url })) }));
 }
 
-var withSelectorExports = withSelector.exports;
-var useSyncExternalStoreExports = /*@__PURE__*/getDefaultExportFromCjs(withSelectorExports);
+function SuccessAction({ nextStatus, status, description = status === "error"
+    ? "Transaction failed"
+    : "Transaction successful", showTimeline, showBody, timestamp, hash, url, }) {
+    return (jsx(ActionLayout, { description: description, status: status, nextStatus: nextStatus, showTimeline: showTimeline, showBody: showBody, children: (timestamp || hash) && (jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url })) }));
+}
 
-const { useDebugValue } = React__default$1;
-const { useSyncExternalStoreWithSelector } = useSyncExternalStoreExports;
-let didWarnAboutEqualityFn = false;
-const identity = (arg) => arg;
-function useStore(api, selector = identity, equalityFn) {
-  if ((import.meta.env ? import.meta.env.MODE : void 0) !== "production" && equalityFn && !didWarnAboutEqualityFn) {
-    console.warn(
-      "[DEPRECATED] Use `createWithEqualityFn` instead of `create` or use `useStoreWithEqualityFn` instead of `useStore`. They can be imported from 'zustand/traditional'. https://github.com/pmndrs/zustand/discussions/1937"
-    );
-    didWarnAboutEqualityFn = true;
-  }
-  const slice = useSyncExternalStoreWithSelector(
-    api.subscribe,
-    api.getState,
-    api.getServerState || api.getInitialState,
-    selector,
-    equalityFn
-  );
-  useDebugValue(slice);
-  return slice;
+function SwapAction({ status, nextStatus, showTimeline, showBody, fromToken, toToken, provider, timestamp, hash, url, }) {
+    return (jsx(ActionLayout, { status: status, nextStatus: nextStatus, statusIcon: jsx(ArrowBottomTopIcon, { size: "16" }), description: jsxs(Inline, { children: ["Swap", jsx(IconLabel, { src: fromToken.logoURI, variant: "round", children: jsx(BodyText, { size: "small", children: fromToken.symbol }) }), "to", jsx(IconLabel, { src: toToken.logoURI, variant: "round", children: jsx(BodyText, { size: "small", children: toToken.symbol }) }), "via", jsx(IconLabel, { src: provider.logoURI, variant: "round", children: jsx(BodyText, { size: "small", children: provider.name }) })] }), showTimeline: showTimeline, showBody: showBody, children: jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url }) }));
 }
-const createImpl = (createState) => {
-  if ((import.meta.env ? import.meta.env.MODE : void 0) !== "production" && typeof createState !== "function") {
-    console.warn(
-      "[DEPRECATED] Passing a vanilla store will be unsupported in a future version. Instead use `import { useStore } from 'zustand'`."
-    );
-  }
-  const api = typeof createState === "function" ? createStore(createState) : createState;
-  const useBoundStore = (selector, equalityFn) => useStore(api, selector, equalityFn);
-  Object.assign(useBoundStore, api);
-  return useBoundStore;
-};
-const create = (createState) => createState ? createImpl(createState) : createImpl;
 
-const useContainerStore = create(() => ({
-    containerRef: undefined,
-}));
+function WrapAction({ status, nextStatus, showTimeline, showBody, fromToken, toToken, provider, timestamp, hash, url, }) {
+    return (jsx(ActionLayout, { status: status, nextStatus: nextStatus, statusIcon: jsx(ArrowBottomTopIcon, { size: "16" }), description: jsxs(Inline, { children: ["Wrap", jsx(IconLabel, { src: fromToken.logoURI, variant: "round", children: jsx(BodyText, { size: "small", children: fromToken.symbol }) }), "to", jsx(IconLabel, { src: toToken.logoURI, variant: "round", children: jsx(BodyText, { size: "small", children: toToken.symbol }) }), "via", jsx(IconLabel, { src: provider.logoURI, variant: "round", children: jsx(BodyText, { size: "small", children: provider.name }) })] }), showTimeline: showTimeline, showBody: showBody, children: jsx(ActionProperties, { timestamp: timestamp, hash: hash, url: url }) }));
+}
 
-function ProductCard({ children }) {
-    const containerRef = useRef(null);
-    useEffect(() => {
-        useContainerStore.setState({ containerRef });
-    }, [containerRef]);
-    return (jsx("div", { style: {
-            width: `min(100vw, ${MEDIA_QUERIES.MOBILE_LG.value}px)`,
-        }, className: "tw-flex tw-min-h-full tw-max-w-[100vw] tw-flex-col tw-justify-center tw-overflow-hidden tw-bg-grey-900 tw-text-grey-300 tw-outline tw-outline-1 tw-outline-material-light-thin group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-3 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-3 mobile-lg:tw-max-w-card-large mobile-lg:tw-rounded-squid-l", children: jsx("div", { ref: containerRef, className: "tw-relative tw-flex tw-h-card-small tw-w-full tw-flex-col tw-justify-end mobile-lg:tw-w-card-large mobile-xs-height:tw-h-card-compact mobile-sm-height:tw-h-card-large", children: children }) }));
+const actionComponentMap = {
+    success: SuccessAction,
+    receive_tokens: ReceiveTokensAction,
+    receive_nft: ReceiveNFTAction,
+    approve: ApproveAction,
+    send_tokens: SendTokensAction,
+    swap: SwapAction,
+    bridge: BridgeAction,
+    wrap: WrapAction,
+    stake: StakeAction,
+    start: StartAction,
+    fees: FeesAction,
+    incomplete: IncompleteAction,
+};
+function TransactionAction({ type, props }) {
+    const Component = actionComponentMap[type];
+    return jsx(Component, Object.assign({}, props));
 }
-function BorderedContainer({ children, className, }) {
-    return (jsx("section", { className: cn("tw-border-t tw-border-t-material-light-thin", className), children: children }));
+
+function Transfer({ isLoading, from, to, className }) {
+    return (jsx("div", { className: cn("tw-flex tw-items-center tw-gap-squid-xxs", className), children: jsxs(Join, { glue: () => jsx(ChevronLargeRightIcon, { className: "tw-text-grey-500" }), children: [isLoading ? jsx(TextSkeleton, {}) : from, isLoading ? jsx(TextSkeleton, {}) : to] }) }));
 }
 
-function ProfileHeaderBackground() {
-    return (jsxs("div", { className: "tw-relative tw-flex tw-min-h-[195px] tw-flex-1 tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-overflow-hidden tw-rounded-bl-squid-l  tw-rounded-br-squid-l tw-rounded-tl-[25px] tw-rounded-tr-[25px] tw-pb-squid-s group-data-[squid-theme-type='dark']:tw-bg-royal-dark group-data-[squid-theme-type='light']:tw-bg-royal-light", children: [jsx("div", { className: "tw-h-[240px]", children: [...Array(4)].map((_, i) => (jsx(HeaderBackgroundDecorationRow, { index: i }, i))) }), jsx("div", { className: "z-10 tw-absolute tw-inset-0 tw-h-[195px] tw-shadow-inset-royal" })] }));
+function TransactionItem({ className, isLoading = false, status, image, type, hash, fromChain, toChain, fromAmount, toAmount, timestamp, variant = "full", }) {
+    return (jsxs("div", { className: cn("tw-flex tw-items-stretch tw-gap-squid-xs tw-bg-grey-900 tw-p-squid-xs", className), children: [variant === "full" && (jsxs("div", { className: "tw-timeline-gradient-mask tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xxs", children: [jsxs(Timeline, { className: "tw-flex-grow tw-text-grey-700", children: [jsx(Timeline.Straight, {}), jsx(Timeline.CapBottom, {})] }), jsx(TransactionState, { status: !status || isLoading ? "pending" : status, variant: "compact" }), jsxs(Timeline, { className: "tw-flex-grow tw-text-grey-700", children: [jsx(Timeline.CapTop, {}), jsx(Timeline.Straight, {})] })] })), jsx("div", { className: "tw-flex tw-w-[50px] tw-items-center tw-justify-center", children: image }), jsxs("div", { className: "tw-flex tw-flex-grow tw-flex-col tw-gap-squid-xxs", children: [jsx(CaptionText, { className: "tw-flex tw-items-center tw-gap-squid-xxs tw-text-grey-300", children: jsx(TransactionItemHeader, { hash: hash, status: status, type: type, isLoading: isLoading, variant: variant }) }), (isLoading || fromChain || toChain) && (jsx(CaptionText, { className: "tw-block tw-h-squid-m", children: jsx(Transfer, { className: "tw-text-grey-400", isLoading: isLoading, from: fromChain && (jsx(IconLabel, { src: fromChain.logoURI, children: fromChain.name })), to: toChain && (jsx(IconLabel, { src: toChain.logoURI, children: toChain.name })) }) })), (isLoading || fromAmount || toAmount) && (jsx(Transfer, { className: "tw-text-grey-300", isLoading: isLoading, from: fromAmount ? (jsx(BodyText, { size: "small", children: fromAmount })) : undefined, to: toAmount ? (jsx(BodyText, { size: "small", children: toAmount })) : undefined }))] }), timestamp && variant === "full" && (jsx(CaptionText, { className: "tw-text-grey-500", children: formatRelativeTime(timestamp) }))] }));
 }
-function HeaderBackgroundDecorationRow({ index }) {
-    const logoWithImage = (jsx(LogoContainer, { children: jsx(SquidLogo, {}) }));
-    const emptyLogo = jsx(LogoContainer, {});
-    return (jsxs("div", { className: "tw-flex tw-h-[60px] tw-w-[470px] tw-items-center tw-justify-center tw-self-stretch tw-overflow-hidden tw-text-royal-500", children: [index % 2 === 0 ? emptyLogo : logoWithImage, index % 2 === 0 ? logoWithImage : emptyLogo, index % 2 === 0 ? emptyLogo : logoWithImage, index % 2 === 0 ? logoWithImage : emptyLogo, index % 2 === 0 ? emptyLogo : logoWithImage, index % 2 === 0 ? logoWithImage : emptyLogo, index % 2 === 0 ? emptyLogo : logoWithImage] }));
+const TransactionItemHeaderWrapper = ({ children, }) => {
+    return (jsx(Join, { glue: () => jsx(PipeSeparator, { className: "tw-text-grey-600" }), children: children }));
+};
+const TransactionItemHeader = ({ isLoading, variant, type, hash, status, }) => {
+    if (isLoading) {
+        return (jsxs(TransactionItemHeaderWrapper, { children: [jsx(TextSkeleton, {}), jsx(TextSkeleton, {})] }));
+    }
+    if (variant === "full") {
+        if (!type || !hash)
+            return null;
+        return (jsxs(TransactionItemHeaderWrapper, { children: [jsx(TxTypeLabel, { type: type }), jsx("span", { className: "tw-text-grey-500", children: truncateHash(hash) })] }));
+    }
+    if (status && type) {
+        return (jsxs(TransactionItemHeaderWrapper, { children: [jsx(TransactionState, { status: status, variant: "small" }), jsx(TxTypeLabel, { type: type })] }));
+    }
+    return null;
+};
+const TxTypeLabel = ({ type }) => {
+    return (jsxs("span", { className: "tw-inline-flex tw-items-center tw-gap-[2px] tw-text-royal-500", children: [type === null || type === void 0 ? void 0 : type.icon, " ", type === null || type === void 0 ? void 0 : type.name] }));
+};
+
+function RouteStep({ imageUrl, descriptionBlocks, subtitle, showStepSeparator = false, }) {
+    return (jsxs("li", { className: "tw-flex tw-flex-col tw-self-stretch", children: [jsxs("div", { className: "tw-flex tw-items-center tw-self-stretch", children: [jsx(Track, { imageUrl: imageUrl }), jsx(Label, { subtitle: subtitle, descriptionBlocks: descriptionBlocks })] }), showStepSeparator && (jsx("div", { className: "tw-flex tw-h-squid-m tw-w-squid-xxl tw-justify-center", children: jsx("div", { className: "tw-h-squid-m tw-w-1 tw-rounded-full tw-bg-gradient-to-t tw-from-grey-500 tw-to-grey-800" }) }))] }));
 }
-function LogoContainer({ children }) {
-    return (jsx("div", { className: "tw-flex tw-h-[60px] tw-w-[60px] tw-items-center tw-justify-center", children: children }));
+function Track({ imageUrl }) {
+    return (jsx("div", { className: "tw-relative tw-flex tw-w-squid-xxl tw-min-w-squid-xxl tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-px-squid-xs", children: jsx("img", { src: imageUrl, alt: "", className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs" }) }));
 }
-
-function SwapConfiguration({ amount, tokenPrice = 0, isFetching: isFetchingProp = false, chain, token, direction = "from", onAmountChange, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, maxUsdDecimals, isInputInteractive = true, isLoading = false, inputModeButton, balanceButton, assetsButton, walletButton, }) {
-    var _a, _b, _c;
-    const isWalletButtonInteractive = !isLoading && !!(walletButton === null || walletButton === void 0 ? void 0 : walletButton.onClick);
-    const WalletButtonTag = isWalletButtonInteractive ? "button" : "div";
-    const isFetching = isFetchingProp || isLoading;
-    return (jsxs("section", { className: "tw-relative tw-flex tw-h-[195px] tw-w-full tw-flex-col tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-pb-squid-m mobile-lg:tw-w-card-large mobile-sm-height:tw-h-[205px]", children: [jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-m tw-py-squid-xs tw-leading-5 tw-text-grey-300 mobile-lg:tw-px-squid-l", children: jsx(Tooltip, Object.assign({}, walletButton === null || walletButton === void 0 ? void 0 : walletButton.tooltip, { tooltipWidth: "max", childrenClassName: "tw-rounded-squid-s", containerClassName: "tw-rounded-squid-s", children: jsxs(WalletButtonTag, { onClick: isWalletButtonInteractive ? walletButton === null || walletButton === void 0 ? void 0 : walletButton.onClick : undefined, className: cn("-tw-ml-squid-xs tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs tw-text-grey-600", isWalletButtonInteractive && "hover:tw-bg-material-light-thin", isLoading && "tw-opacity-50"), children: [jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === "from" ? "Pay" : "Receive" }), !isLoading && !(walletButton === null || walletButton === void 0 ? void 0 : walletButton.disabled) && !!token && (jsxs(Fragment, { children: [jsx(BodyText, { size: "small", children: ":" }), jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsx(BodyText, { size: "small", className: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
-                                                    ? "tw-text-grey-300"
-                                                    : "tw-text-royal-400", children: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
-                                                    ? walletButton === null || walletButton === void 0 ? void 0 : walletButton.address
-                                                    : (_a = walletButton === null || walletButton === void 0 ? void 0 : walletButton.emptyAddressLabel) !== null && _a !== void 0 ? _a : "Connect wallet" }), jsx(ChevronArrowIcon, { className: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
-                                                    ? "tw-text-grey-600"
-                                                    : "tw-text-royal-400" })] })] }))] }) })) }), jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: jsx(AssetsButton, Object.assign({}, assetsButton, { chain: chain, token: token, isLoading: isLoading })) }), isFetching && (jsx("div", { className: "tw-absolute tw-bottom-2 tw-left-squid-m tw-z-10 tw-overflow-hidden mobile-lg:tw-left-squid-l", children: jsx("div", { className: "tw-h-[94px] tw-w-[1260px] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), jsx(NumericInput, { inputMode: "decimal", pattern: "[0-9.,]*", token: {
-                    decimals: (_b = token === null || token === void 0 ? void 0 : token.decimals) !== null && _b !== void 0 ? _b : 18,
-                    symbol: (_c = token === null || token === void 0 ? void 0 : token.symbol) !== null && _c !== void 0 ? _c : "",
-                    price: tokenPrice,
-                }, onAmountChange: (value) => {
-                    onAmountChange === null || onAmountChange === void 0 ? void 0 : onAmountChange(value);
-                }, balance: balance, criticalPriceImpactPercentage: criticalPriceImpactPercentage, error: error, formatIfVerySmall: {
-                    token: "0.001",
-                    usd: "0.01",
-                }, maxUsdDecimals: maxUsdDecimals, isLoading: isFetching, priceImpactPercentage: priceImpactPercentage, showDetails: !!token, direction: direction, forcedAmount: amount, inputModeButton: inputModeButton, balanceButton: balanceButton, isInteractive: isInputInteractive && !isLoading })] }));
+function Label({ subtitle, descriptionBlocks, }) {
+    return (jsxs("div", { className: "tw-flex tw-flex-col tw-items-start", children: [jsx("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs tw-self-stretch tw-py-squid-xxs tw-pr-squid-m tw-text-grey-500", children: jsx(CaptionText, { children: subtitle }) }), jsx(DescriptionBlocks, { blocks: descriptionBlocks, className: "tw-py-squid-xxs tw-pr-squid-m tw-text-grey-300" })] }));
 }
 
-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 DropdownMenuTitle({ title }) {
+    return (jsx("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-self-stretch tw-p-squid-xs tw-pb-squid-xxs tw-text-material-light-average", children: jsx(CaptionText, { children: title }) }));
 }
 
 const STEPS_LIST_HEIGHT = 400;
@@ -24896,11 +25139,11 @@ function TransactionHeaderLayout({ isLoading, status, title, image = jsx("span",
 }
 
 function BridgeHeader({ tokenLogoURI, chainLogoURI, title = "Bridge", hash, url, status, }) {
-    return (jsx(TransactionHeaderLayout, { title: title, status: status, image: jsxs("div", { className: "tw-relative", children: [jsx(ImageIcon, { src: tokenLogoURI, size: "xlarge", variant: "round" }), jsx(ImageIcon, { src: chainLogoURI, className: "tw-absolute -tw-right-squid-xxs tw-bottom-0" })] }), children: jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsx(Chip, { label: "TX" }), jsx(HashLink, { hash: hash, url: url, showCopyButton: true }), " "] }) }));
+    return (jsx(TransactionHeaderLayout, { title: title, status: status, image: jsxs("div", { className: "tw-relative", children: [jsx(Image$1, { src: tokenLogoURI, size: "xlarge", variant: "round" }), jsx(Image$1, { src: chainLogoURI, className: "tw-absolute -tw-right-squid-xxs tw-bottom-0" })] }), children: jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsx(Chip, { label: "TX" }), jsx(HashLink, { hash: hash, url: url, showCopyButton: true }), " "] }) }));
 }
 
 function BuyNFTHeader({ imageUrl, title = "Buy NFT", hash, url, status, }) {
-    return (jsx(TransactionHeaderLayout, { title: title, status: status, image: jsx(ImageIcon, { src: imageUrl, size: "xlarge" }), children: jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsx(Chip, { label: "TX" }), jsx(HashLink, { hash: hash, url: url, showCopyButton: true }), " "] }) }));
+    return (jsx(TransactionHeaderLayout, { title: title, status: status, image: jsx(Image$1, { src: imageUrl, size: "xlarge" }), children: jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsx(Chip, { label: "TX" }), jsx(HashLink, { hash: hash, url: url, showCopyButton: true }), " "] }) }));
 }
 
 function InteractionHeader({ title = "Interaction", image = jsx(Approve, {}), hash, url, status, }) {
@@ -24908,7 +25151,7 @@ function InteractionHeader({ title = "Interaction", image = jsx(Approve, {}), ha
 }
 
 function ProfileHeader({ imageUrl, title, wallet, amount, }) {
-    return (jsx(TransactionHeaderLayout, { title: title, image: jsx(ProfilePicture, { src: imageUrl }), children: jsxs(BodyText, { size: "small", className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsx(WalletLink, Object.assign({}, wallet)), jsx(PipeSeparator, {}), jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsx(Dollar, {}), amount] })] }) }));
+    return (jsx(TransactionHeaderLayout, { title: title, image: jsx(ProfilePicture, { src: imageUrl }), children: jsxs(BodyText, { size: "small", className: "tw-flex tw-items-center tw-gap-squid-xs tw-text-grey-500", children: [jsx(WalletLink, Object.assign({}, wallet)), jsx(PipeSeparator, {}), jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsx(DollarOutlinedIcon, {}), amount] })] }) }));
 }
 function ProfilePicture({ src }) {
     return (jsxs("div", { className: "tw-relative tw-h-[110px] tw-w-[110px] tw-overflow-hidden tw-rounded-full", children: [jsx("img", { className: "tw-absolute tw-left-0 tw-top-0 tw-h-full tw-w-full tw-rounded-full", src: src }), jsx("div", { className: "tw-absolute tw-h-full tw-w-full tw-rounded-full tw-backdrop-blur-lg" }), jsx("div", { className: "tw-absolute tw-inset-squid-xxs tw-block", children: jsx("img", { className: "tw-h-full tw-w-full tw-rounded-full tw-border tw-border-material-light-thin", src: src }) })] }));
@@ -26529,7 +26772,7 @@ const switchKnobCheckedClassMap = {
         unchecked: "tw-left-[1px]",
     },
 };
-function Switch({ checked = false, onChange, size, disabled = false, }) {
+function Switch({ checked = false, onChange, size, disabled = false, inputProps, }) {
     return (
     // Switch container
     jsxs("label", { className: clsx("tw-relative tw-inline-flex tw-items-center tw-justify-end tw-overflow-hidden tw-rounded-squid-m tw-border tw-border-material-light-thin tw-transition-colors", 
@@ -26538,7 +26781,9 @@ function Switch({ checked = false, onChange, size, disabled = false, }) {
         // checked styles
         checked ? "tw-bg-status-positive" : "tw-bg-grey-800", 
         // disabled styles
-        disabled ? "tw-cursor-not-allowed" : "tw-cursor-pointer"), children: [jsx("input", { disabled: disabled, checked: checked, onChange: disabled ? undefined : (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked), type: "checkbox", className: "tw-peer tw-sr-only" }), jsx("span", { style: {
+        disabled ? "tw-cursor-not-allowed" : "tw-cursor-pointer", 
+        // Focus visible styles
+        "tw-focus-visible-within-outline"), children: [jsx("input", Object.assign({}, inputProps, { disabled: disabled, checked: checked, onChange: disabled ? undefined : (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked), type: "checkbox", className: "tw-peer tw-sr-only" })), jsx("span", { style: {
                     filter: "drop-shadow(0px 5px 20px rgba(0, 0, 0, 0.33)) drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.20))",
                 }, className: clsx("tw-absolute tw-rounded-full tw-border tw-border-material-light-thin tw-transition-all", 
                 // size styles
@@ -26727,10 +26972,10 @@ function SettingsButton({ label, isSelected = false, onClick, }) {
     return (jsx("button", { onClick: onClick, className: cn("tw-flex tw-h-[30px] tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-border-2 tw-border-transparent tw-p-squid-xs -tw-outline-offset-2 hover:tw-bg-material-light-thin", isSelected && "tw-outline tw-outline-2 tw-outline-royal-500"), children: jsx(CaptionText, { className: "!tw-font-medium", children: label }) }));
 }
 
-const IconButton = (_a) => {
+const IconButton = forwardRef((_a, ref) => {
     var { icon } = _a, props = __rest$1(_a, ["icon"]);
-    return (jsx("button", Object.assign({}, props, { className: cn("tw-flex tw-h-8 tw-w-8 tw-min-w-8 tw-items-center tw-justify-center tw-rounded-squid-xs hover:tw-bg-material-light-thin", props.disabled ? "tw-text-grey-600" : "tw-text-grey-300", props.className), children: icon })));
-};
+    return (jsx("button", Object.assign({}, props, { ref: ref, className: cn("tw-flex tw-h-8 tw-w-8 tw-min-w-8 tw-items-center tw-justify-center tw-rounded-squid-xs hover:tw-bg-material-light-thin", props.disabled ? "tw-text-grey-600" : "tw-text-grey-300", props.className), children: icon })));
+});
 
 function AssetsView({ chains, favoriteTokens, popularTokens, userTokens, }) {
     const matchesMobileLg = useMediaQuery(MEDIA_QUERIES.MOBILE_LG.media);
@@ -26742,7 +26987,7 @@ function AssetsView({ chains, favoriteTokens, popularTokens, userTokens, }) {
                                 ? "tw-w-[180px] tw-max-w-[180px] tw-pt-0"
                                 : "tw-w-[70px] tw-max-w-[70px] tw-pt-squid-xs"), children: [jsx(SectionTitle, { title: "Chains", icon: jsx(ChainLink, {}), className: cn(matchesMobileLg ? "tw-flex" : "tw-hidden") }), jsxs(List, { children: [jsx(ListItem, { size: "small", mainIcon: jsx("span", { className: "tw-flex tw-h-squid-l tw-w-squid-l tw-flex-1 tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-royal-500 tw-text-[#FBFBFD]", children: jsx(ChainLink, { size: "24" }) }), itemTitle: "All Chains", compactOnMobile: true, onClick: () => { } }), chains.map((item) => (jsx(ListItem, { size: "small", mainImageUrl: item.iconUrl, itemTitle: item.name, detail: item.name, compactOnMobile: true, onClick: () => { } }, item.name)))] })] }), jsxs("div", { style: {
                                 scrollbarWidth: "none",
-                            }, className: cn("tw-flex tw-max-h-[540px] tw-flex-col tw-gap-squid-xxs tw-overflow-y-auto tw-overflow-x-hidden", matchesMobileLg ? "tw-w-[299px] tw-max-w-[299px]" : "tw-w-full"), children: [jsx(SectionTitle, { title: "Favorite tokens", icon: jsx(HeartSmallIcon, {}) }), jsx(List, { children: favoriteTokens.map((favToken) => (jsx(ListItem, { size: "large", mainImageUrl: favToken.iconUrl, secondaryImageUrl: favToken.iconUrl, itemTitle: favToken.name, subtitle: favToken.symbol, icon: jsx(BrokenHeartIcon, { className: "tw-text-status-negative" }), showDetailOnHoverOnly: true, rounded: true, onClick: () => { } }, favToken.name))) }), jsx(SectionTitle, { title: "Your tokens loading", icon: jsx(CoinsIcon, {}) }), jsx(List, { children: userTokens.map((userToken) => (jsx(ListItem, { size: "large", mainImageUrl: userToken.iconUrl, secondaryImageUrl: userToken.iconUrl, itemTitle: userToken.name, subtitle: `${userToken.balance} ${userToken.symbol}`, icon: jsx(EmptyHeartIcon, { className: "tw-text-status-negative" }), showDetailOnHoverOnly: true, rounded: true, onClick: () => { }, loading: { subtitle: userToken.symbol } }, userToken.name))) }), jsx(SectionTitle, { title: "Your tokens & balance", icon: jsx(CoinsIcon, {}) }), jsx(List, { children: userTokens.map((userToken) => (jsx(ListItem, { size: "large", mainImageUrl: userToken.iconUrl, secondaryImageUrl: userToken.iconUrl, itemTitle: userToken.name, subtitle: `${userToken.balance} ${userToken.symbol}`, icon: jsx(EmptyHeartIcon, { className: "tw-text-status-negative" }), showDetailOnHoverOnly: true, rounded: true, onClick: () => { } }, userToken.name))) }), jsx(SectionTitle, { title: "Popular tokens", icon: jsx(SparkleIcon, {}) }), jsx(List, { children: popularTokens.map((popToken) => (jsx(ListItem, { size: "large", mainImageUrl: popToken.iconUrl, secondaryImageUrl: popToken.iconUrl, itemTitle: popToken.name, subtitle: popToken.symbol, icon: jsx(EmptyHeartIcon, { className: "tw-text-status-negative" }), showDetailOnHoverOnly: true, rounded: true, onClick: () => { } }, popToken.name))) })] })] }) })] }));
+                            }, className: cn("tw-flex tw-max-h-[540px] tw-flex-col tw-gap-squid-xxs tw-overflow-y-auto tw-overflow-x-hidden", matchesMobileLg ? "tw-w-[299px] tw-max-w-[299px]" : "tw-w-full"), children: [jsx(SectionTitle, { title: "Favorite tokens", icon: jsx(HeartSmallIcon, {}) }), jsx(List, { children: favoriteTokens.map((favToken) => (jsx(ListItem, { size: "large", mainImageUrl: favToken.iconUrl, secondaryImageUrl: favToken.iconUrl, itemTitle: favToken.name, subtitle: favToken.symbol, rounded: true, onClick: () => { }, dropdownMenuContent: jsx(Fragment, { children: jsx(DropdownMenuItem, { label: "Add to favorites", icon: jsx(FilledHeartIcon, {}) }) }) }, favToken.name))) }), jsx(SectionTitle, { title: "Your tokens loading", icon: jsx(CoinsIcon, {}) }), jsx(List, { children: userTokens.map((userToken) => (jsx(ListItem, { size: "large", mainImageUrl: userToken.iconUrl, secondaryImageUrl: userToken.iconUrl, itemTitle: userToken.name, subtitle: `${userToken.balance} ${userToken.symbol}`, icon: jsx(EmptyHeartIcon, { className: "tw-text-status-negative" }), rounded: true, onClick: () => { }, loading: { subtitle: userToken.symbol } }, userToken.name))) }), jsx(SectionTitle, { title: "Your tokens & balance", icon: jsx(CoinsIcon, {}) }), jsx(List, { children: userTokens.map((userToken) => (jsx(ListItem, { size: "large", mainImageUrl: userToken.iconUrl, secondaryImageUrl: userToken.iconUrl, itemTitle: userToken.name, subtitle: `${userToken.balance} ${userToken.symbol}`, icon: jsx(EmptyHeartIcon, { className: "tw-text-status-negative" }), rounded: true, onClick: () => { } }, userToken.name))) }), jsx(SectionTitle, { title: "Popular tokens", icon: jsx(SparkleIcon, {}) }), jsx(List, { children: popularTokens.map((popToken) => (jsx(ListItem, { size: "large", mainImageUrl: popToken.iconUrl, secondaryImageUrl: popToken.iconUrl, itemTitle: popToken.name, subtitle: popToken.symbol, icon: jsx(EmptyHeartIcon, { className: "tw-text-status-negative" }), rounded: true, onClick: () => { } }, popToken.name))) })] })] }) })] }));
 }
 const List = ({ children }) => {
     return (jsx("ul", { className: "tw-flex tw-flex-col tw-gap-squid-xxs tw-pb-squid-xs", children: children }));
@@ -62200,9 +62445,10 @@ function blendColors(foreground, background) {
     return rgbToHex(r, g, b);
 }
 
-function SquidConfigProvider({ theme = lightTheme, children, themeType = "light", }) {
+function ThemeProvider(_a) {
+    var { theme = lightTheme, children, themeType = "light" } = _a, props = __rest$1(_a, ["theme", "children", "themeType"]);
     const parsedStyle = parseSquidTheme(theme);
-    return (jsx("div", { style: parsedStyle, "data-squid-theme-type": themeType, className: "tw-group tw-relative tw-h-screen tw-font-geist mobile-lg:tw-h-auto", children: children }));
+    return (jsx("div", Object.assign({}, props, { style: Object.assign(Object.assign({}, props.style), parsedStyle), "data-squid-theme-type": themeType, className: cn("tw-group tw-relative tw-h-screen tw-font-geist mobile-lg:tw-h-auto", props.className), children: children })));
 }
 
-export { ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, ActionStatusRow, ActionWrapper, AddressButton, AnimationWrapper, AppContainer, Approve, ApproveAction, ArrowBottomTopIcon, ArrowButton, ArrowCornerDownRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowSplit, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, AssetsView, BackpackIcon, BadgeImage, BankIcon, BlockSkeleton, BodyText, Boost, BoostBadge, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, BrokenHeartIcon, BubblesIcon, Button$1 as Button, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CSS_VARS, Calendar, CaptionText, ChainLink, Checkmark1Icon, Checkmark2Icon, ChevronArrowIcon, ChevronDownSmallIcon, ChevronGrabberVerticalIcon, ChevronLargeDownIcon, ChevronLargeRightIcon, ChevronRightSmallIcon, ChevronTopIcon, ChevronTopSmallIcon, Chip, CircleMinusIcon, CirclePlusIcon, CircleX, CircleXFilledIcon, ClockIcon, ClockOutlineIcon, CoinsAddIcon, CoinsIcon, Collapse, CollapsibleMenu, CollectionIcon, ColorPaletteIcon, CompassRoundOutlinedIcon, CompassRoundSolidIcon, ConsoleIcon, Copy, CrossAnimatedIcon, DashboardFast, DescriptionBlocks, DetailsToolbar, DiscordIcon, DockIconAnalytics, DockIconCheckout, DockIconHelp, DockIconProfile, DockIconScan, DockIconSwap, DockSwapIcon, Dollar, DotGrid1x3HorizontalIcon, DropdownMenu, DropdownMenuItem, EmojiMeh, EmojiSadIcon, EmptyHeartIcon, ErrorMessage, EthereumIcon, ExplosionIcon, FeeButton, FeesAction, FeesLines, FeesTotal, FilledHeartIcon, FilterButton, FilterIcon, GasIcon, GithubIcon, HashLink, HeadingText, HeartSmallIcon, HelpIcon, HistoryItem, HomeIcon, IconButton, IconLabel, ImageIcon, ImageSparkle, IncompleteAction, InfinityIcon, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, LightningIcon, LinkIcon, List, ListItem, ListItemActionsButton, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MainView, MaxIcon, Menu, MenuItem, MenuSwapIcon, MirrorIcon, Modal, ModalContent, ModalContentDivider, MoonIcon, NavigationBar, NotAllowedIcon, NumericInput, PathSquareIcon, PercentIcon, PieChartIcon, PipeSeparator, PlusIcon, PowerIcon, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, PunkIcon, RangeInput, ReceiptBillIcon, ReceiveNFTAction, ReceiveTokensAction, RecipientView, RefreshIcon, ReorderIcon, RouteStep, STEP_ITEM_HEIGHT, SearchIcon, SectionTitle, SendTokensAction, SettingsButton, SettingsGearIcon, SettingsItem, SettingsSlider, ShoppingBagIcon, SizeTransition, SmileIcon, SnapIcon, SortIcon, SparkleIcon, SparklesIcon, SquareArrowCenter, SquareArrowTopLeftIcon, SquareArrowTopRight2Icon, SquidConfigProvider, SquidLogo, StakeAction, StartAction, StocksIcon, SuccessAction, SunIcon, SunriseIcon, SwapAction, SwapConfiguration, SwapDetailsView, SwapErrorIcon, SwapHeader, SwapIcon, SwapInputsIcon, SwapProgressView, SwapProgressViewHeader, SwapProperties, SwapStepItem, SwapStepSeparator, SwapStepsCollapsed, SwapSuccessIcon, SwapTransactionView, SwapWarningIcon, Switch, TagIcon, TagIconFilled, TextSkeleton, ThumbsUp, Tick, TimeFliesIcon, Timeline, Timestamp, Toast, TokenPair, Tooltip, TradingViewStepsIcon, TransactionAction, TransactionFilters, TransactionHeader, TransactionHeaderLayout, TransactionItem, TransactionProperties, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, Transfer, TranslateIcon, TriangleExclamation, UsdAmount, WalletFilledIcon, WalletIcon, WalletLink, WalletsView, WrapAction, XSocial, baseTailwindConfig, cn, darkTheme, lightTheme, linkActionTimelineProps, statusTextClassMap, useCollapsibleMenu, useDropdownMenu, useMediaQuery, useOnResize, useRect, useTimer, useVersion };
+export { ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, ActionStatusRow, ActionWrapper, AddressButton, AnimationWrapper, AppContainer, Approve, ApproveAction, ArrowBottomTopIcon, ArrowButton, ArrowCornerDownRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowSplit, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, AssetsView, BackpackIcon, BadgeImage, BankIcon, BellAlarmIcon, BlockSkeleton, BodyText, Boost, BoostBadge, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, BrokenHeartIcon, BubblesIcon, Button$1 as Button, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CSS_VARS, Calendar, CaptionText, CatSquareIcon, ChainLink, Checkmark1Icon, Checkmark2Icon, ChevronArrowIcon, ChevronDownSmallIcon, ChevronGrabberVerticalIcon, ChevronLargeDownIcon, ChevronLargeRightIcon, ChevronRightSmallIcon, ChevronTopIcon, ChevronTopSmallIcon, Chip, CircleMinusIcon, CirclePlusIcon, CircleX, CircleXFilledIcon, ClockOutlineIcon, ClockSolidIcon, CodeBracketsIcon, CodeSolidSquareIcon, CoinsAddIcon, CoinsIcon, Collapse, CollapsibleMenu, CollectionIcon, ColorPaletteIcon, CommandIcon, CompassRoundOutlinedIcon, CompassRoundSolidIcon, ConsoleIcon, Copy, CopyIcon, CrossAnimatedIcon, DashboardFast, DescriptionBlocks, DetailsToolbar, DiscordIcon, DockIconAnalytics, DockIconCheckout, DockIconHelp, DockIconProfile, DockIconScan, DockIconSwap, DockSwapIcon, DollarOutlinedIcon, DollarSolidIcon, DotGrid1x3HorizontalIcon, DropdownMenu, DropdownMenuItem, DropdownMenuTitle, EmojiMeh, EmojiSadIcon, EmptyHeartIcon, ErrorMessage, EthereumIcon, ExplosionIcon, EyeOpenIcon, FeeButton, FeesAction, FeesLines, FeesTotal, FileDownloadIcon, FilledHeartIcon, FilterAscendingIcon, FilterButton, FilterIcon, FilterTimelineIcon, GasIcon, GhostIcon, GithubIcon, HashLink, HeadingText, HeartSmallIcon, HelpIcon, HistoryItem, HomeIcon, IconButton, IconLabel, Image$1 as Image, ImageIcon, ImageSparkle, IncompleteAction, InfinityIcon, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, LaptopIcon, LightningIcon, LimitIcon, LinkIcon, List, ListItem, ListItemActionsButton, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MainView, MaxIcon, Menu, MenuItem, MenuSwapIcon, MirrorIcon, Modal, ModalContent, ModalContentDivider, MoonIcon, NavigationBar, NotAllowedIcon, NumericInput, PathSquareIcon, PercentIcon, PhoneIcon, PieChartIcon, PipeSeparator, PlusIcon, PoopIcon, PowerIcon, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, PunkIcon, RangeInput, ReceiptBillIcon, ReceiveNFTAction, ReceiveTokensAction, RecipientView, RefreshIcon, ReorderIcon, RouteStep, STEP_ITEM_HEIGHT, SearchIcon, SectionTitle, SendTokensAction, SettingsButton, SettingsGearIcon, SettingsItem, SettingsSlider, SettingsSliderIcon, ShoppingBagIcon, SizeTransition, SmileIcon, SnapIcon, SortIcon, SparkleIcon, SparklesIcon, SquareArrowCenter, SquareArrowTopLeftIcon, SquareArrowTopRight2Icon, SquidLogo, StakeAction, StartAction, StocksIcon, SuccessAction, SunIcon, SunOutlinedIcon, SunriseIcon, SwapAction, SwapConfiguration, SwapDetailsView, SwapErrorIcon, SwapHeader, SwapIcon, SwapInputsIcon, SwapProgressView, SwapProgressViewHeader, SwapProperties, SwapStepItem, SwapStepSeparator, SwapStepsCollapsed, SwapSuccessIcon, SwapTransactionView, SwapWarningIcon, Switch, TagIcon, TagIconFilled, TextSkeleton, ThemePreference, ThemeProvider, ThumbsUp, Tick, TimeFliesIcon, Timeline, Timestamp, Toast, TokenPair, Tooltip, TradingViewStepsIcon, TransactionAction, TransactionFilters, TransactionHeader, TransactionHeaderLayout, TransactionItem, TransactionProperties, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, Transfer, TranslateIcon, TriangleExclamation, UsdAmount, WalletFilledIcon, WalletIcon, WalletLink, WalletsView, WrapAction, XSocial, baseTailwindConfig, cn, darkTheme, lightTheme, linkActionTimelineProps, statusTextClassMap, useCollapsibleMenu, useDropdownMenu, useMediaQuery, useOnResize, useRect, useTimer, useUserTheme, useVersion };