@0xsquid/ui 0.13.5 → 0.13.6

package/dist/cjs/index.js

@@ -2682,10 +2682,11 @@ const roundedClassMap = {
     md: 'tw-rounded-squid-m',
     lg: 'tw-rounded-squid-xxl',
 };
+const buttonBorderClassName = 'tw-border-material-light-thin hover:tw-border-material-light-average';
 const buttonVariantClassMap = {
-    primary: 'tw-bg-royal-500 group-data-[squid-theme-type=light]:tw-text-grey-900 group-data-[squid-theme-type=dark]:tw-text-grey-100 tw-border-material-light-thin',
-    secondary: 'tw-bg-grey-100 tw-text-grey-800 tw-border-material-light-thin',
-    tertiary: 'tw-bg-grey-800 tw-text-grey-300 tw-border-material-light-thin',
+    primary: 'tw-bg-royal-500 group-data-[squid-theme-type=light]:tw-text-grey-900 group-data-[squid-theme-type=dark]:tw-text-grey-100',
+    secondary: 'tw-bg-grey-100 tw-text-grey-800',
+    tertiary: 'tw-bg-grey-800 tw-text-grey-300',
 };
 // right now all variants have the same disabled styles
 // in the future, we can add more disabled styles for different variants
@@ -2699,7 +2700,7 @@ function Button(_a) {
                 icon) : (
                 // icon and label
                 jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon, jsxRuntime.jsx(BodyText, { className: "tw-pr-1", size: "small", children: label })] }))) : null })] }));
-    const className = cn(baseButtonClassName, buttonSizeClassMap[size], buttonVariantClassMap[variant], roundedClassMap[size], 
+    const className = cn(baseButtonClassName, buttonSizeClassMap[size], buttonVariantClassMap[variant], buttonBorderClassName, roundedClassMap[size], 
     // disabled styles
     disabled && buttonDisabledClass, 
     // custom classes from props
@@ -3592,15 +3593,18 @@ function SwapStepsCollapsed({ steps, currentStepIndex: _newStepIndex, onOpen, on
             onOpen === null || onOpen === void 0 ? void 0 : onOpen();
         }
     };
-    return (jsxRuntime.jsx("div", { className: "tw-relative tw-h-[60px] tw-w-[400px]", children: jsxRuntime.jsxs("div", { className: cn('tw-absolute tw-bottom-0 tw-z-20 tw-flex tw-w-full tw-max-w-[400px] tw-flex-col tw-justify-end tw-gap-squid-xxs tw-overflow-hidden tw-rounded-squid-l', isRouteVisible ? 'tw-h-[536px]' : 'tw-h-[60px]'), children: [jsxRuntime.jsx("div", { style: {
+    return (jsxRuntime.jsx("div", { className: "tw-relative tw-h-[60px] tw-min-w-[400px] tw-rounded-squid-l", children: jsxRuntime.jsxs("div", { className: cn('tw-absolute tw-bottom-0 tw-z-10 tw-flex tw-w-full tw-max-w-[400px] tw-flex-col tw-justify-end tw-gap-squid-xxs tw-overflow-hidden tw-rounded-squid-l', isRouteVisible ? 'tw-h-[535px]' : 'tw-h-[60px]'), children: [!isRouteVisible && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "tw-absolute tw-left-0 tw-top-0 tw-z-10 tw-h-[21px] tw-w-full tw-bg-gradient-to-b tw-from-grey-800 tw-transition-colors group-hover/swap-step-item-button:tw-from-grey-700" }), jsxRuntime.jsx("span", { className: "tw-absolute tw-bottom-0 tw-left-0 tw-z-10 tw-h-[21px] tw-w-full tw-bg-gradient-to-t tw-from-grey-800 tw-transition-colors group-hover/swap-step-item-button:tw-from-grey-700" })] })), jsxRuntime.jsx("div", { style: {
                         [CSS_VARS.FADE_OUT_DURATION]: `${ANIMATION_DURATIONS.HIDE_ROUTE}ms`,
                         [CSS_VARS.FADE_IN_DURATION]: `${ANIMATION_DURATIONS.SHOW_ROUTE}ms`,
-                    }, className: cn('tw-absolute tw-top-0 tw-h-[536px] tw-w-full tw-rounded-squid-l tw-bg-material-dark-thick tw-opacity-0 tw-backdrop-blur/10') }), jsxRuntime.jsx("div", { onClick: isShowRouteAnimationRunning ? undefined : handleToggleRouteSteps, style: {
+                    }, className: cn('tw-absolute tw-top-0 tw-h-[535px] tw-w-full tw-rounded-squid-l tw-bg-material-dark-thick tw-opacity-0 tw-backdrop-blur/10') }), jsxRuntime.jsx("div", { style: {
+                        zIndex: 20,
+                        display: isRouteVisible ? 'none' : 'block',
+                    }, onClick: handleToggleRouteSteps, className: "tw-absolute tw-inset-0 tw-h-[60px] tw-cursor-pointer tw-rounded-squid-l tw-border tw-border-material-light-thin" }), jsxRuntime.jsx("div", { onClick: isShowRouteAnimationRunning ? undefined : handleToggleRouteSteps, style: {
                         [CSS_VARS.COLLAPSE_ROUTE_DURATION]: `${ANIMATION_DURATIONS.HIDE_ROUTE}ms`,
                         [CSS_VARS.EXPAND_ROUTE_DURATION]: `${ANIMATION_DURATIONS.SHOW_ROUTE}ms`,
-                    }, className: cn('tw-h-[60px] tw-max-h-[536px] tw-w-full tw-overflow-hidden tw-rounded-squid-l tw-border tw-border-material-light-thin tw-bg-grey-800 tw-backdrop-blur-2xl', isShowRouteAnimationRunning
+                    }, className: cn('tw-relative tw-h-[60px] tw-max-h-[535px] tw-w-full tw-overflow-hidden tw-rounded-squid-l tw-border tw-border-material-light-thin tw-bg-grey-800 tw-backdrop-blur-2xl', isShowRouteAnimationRunning
                         ? 'tw-animate-expand-route'
-                        : 'tw-animate-collapse-route'), children: jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col tw-gap-squid-xxs", style: {
+                        : 'tw-animate-collapse-route'), children: jsxRuntime.jsxs("div", { className: "tw-flex tw-h-[535px] tw-flex-col tw-gap-squid-xxs", style: {
                             transition: isShowRouteAnimationRunning
                                 ? `transform ${ANIMATION_DURATIONS.SHOW_ROUTE}ms ${ANIMATION_TIMINGS.CHANGE_SWAP_STEP}`
                                 : isRouteVisible
@@ -3608,12 +3612,15 @@ function SwapStepsCollapsed({ steps, currentStepIndex: _newStepIndex, onOpen, on
                                     : `transform ${ANIMATION_DURATIONS.CHANGE_SWAP_STEP}ms ${ANIMATION_TIMINGS.CHANGE_SWAP_STEP}`,
                             transform: isShowRouteAnimationRunning
                                 ? 'translateY(0)'
-                                : `translateY(-${536 - 50 - (newStepIndex + 1) * 50 - 20}px)`,
-                        }, children: [jsxRuntime.jsx("div", { className: cn('tw-bg-red- tw-absolute tw-z-10 tw-flex tw-h-[52px] tw-w-full tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-bg-transparent tw-p-squid-xs'), children: jsxRuntime.jsx("button", { onClick: handleToggleRouteSteps, className: "tw-flex tw-h-squid-xl tw-w-40 tw-items-center tw-justify-center tw-rounded-squid-xs tw-px-10 hover:tw-bg-material-light-thin", children: jsxRuntime.jsx("span", { className: "tw-flex tw-h-8 tw-w-8 tw-items-center tw-justify-center tw-text-grey-300", children: jsxRuntime.jsx(ChevronLargeDownIcon, { size: "32" }) }) }) }), jsxRuntime.jsx("ul", { className: "tw-relative tw-flex tw-min-h-[460px] tw-w-[400px] tw-flex-1 tw-flex-col-reverse tw-items-center tw-self-stretch tw-overflow-y-auto tw-overflow-x-hidden tw-px-squid-xs", children: steps.map((step, index) => (jsxRuntime.jsx(SwapStepItem, { descriptionBlocks: step.descriptionBlocks, chipContent: step.chipContent, showStepSeparator: !(index === steps.length - 1), link: step.link, status: newStepIndex < index
+                                : `translateY(-${535 - 50 - (newStepIndex + 1) * 50 - 30}px)`,
+                        }, children: [jsxRuntime.jsx("div", { className: cn('tw-absolute tw-z-10 tw-flex tw-h-[52px] tw-w-full tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-bg-transparent tw-p-squid-xs'), children: jsxRuntime.jsx("button", { onClick: handleToggleRouteSteps, className: "tw-flex tw-h-squid-xl tw-w-40 tw-items-center tw-justify-center tw-rounded-squid-xs tw-px-10 hover:tw-bg-material-light-thin", children: jsxRuntime.jsx("span", { className: "tw-flex tw-h-8 tw-w-8 tw-items-center tw-justify-center tw-text-grey-300", children: jsxRuntime.jsx(ChevronLargeDownIcon, { size: "32" }) }) }) }), jsxRuntime.jsx("ul", { style: {
+                                    zIndex: isRouteVisible ? 0 : -10,
+                                    scrollbarWidth: 'none',
+                                }, className: "tw-relative tw-top-[52px] tw-flex tw-max-h-[413px] tw-w-[400px] tw-flex-1 tw-flex-col-reverse tw-items-center tw-self-stretch tw-overflow-y-auto tw-overflow-x-hidden tw-px-squid-xs tw-py-[15px]", children: steps.map((step, index) => (jsxRuntime.jsx(SwapStepItem, { descriptionBlocks: step.descriptionBlocks, chipContent: step.chipContent, showStepSeparator: !(index === steps.length - 1), link: step.link, status: newStepIndex < index
                                         ? 'pending'
                                         : newStepIndex > index
                                             ? 'executed'
-                                            : 'progress' }, index))) }), jsxRuntime.jsx("footer", { className: "tw-flex tw-items-end tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-s", children: jsxRuntime.jsx(Button, { size: "md", variant: "secondary", label: "View on Squidscan", className: "tw-w-full" }) })] }) })] }) }));
+                                            : 'progress' }, index))) }), jsxRuntime.jsx("footer", { className: "tw-absolute tw-bottom-0 tw-flex tw-w-full tw-items-end tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-s", children: jsxRuntime.jsx(Button, { size: "md", variant: "secondary", label: "View on Squidscan", className: "tw-w-full" }) })] }) })] }) }));
 }
 
 function TokenPair({ firstToken, secondToken }) {

package/dist/esm/index.js

@@ -2662,10 +2662,11 @@ const roundedClassMap = {
     md: 'tw-rounded-squid-m',
     lg: 'tw-rounded-squid-xxl',
 };
+const buttonBorderClassName = 'tw-border-material-light-thin hover:tw-border-material-light-average';
 const buttonVariantClassMap = {
-    primary: 'tw-bg-royal-500 group-data-[squid-theme-type=light]:tw-text-grey-900 group-data-[squid-theme-type=dark]:tw-text-grey-100 tw-border-material-light-thin',
-    secondary: 'tw-bg-grey-100 tw-text-grey-800 tw-border-material-light-thin',
-    tertiary: 'tw-bg-grey-800 tw-text-grey-300 tw-border-material-light-thin',
+    primary: 'tw-bg-royal-500 group-data-[squid-theme-type=light]:tw-text-grey-900 group-data-[squid-theme-type=dark]:tw-text-grey-100',
+    secondary: 'tw-bg-grey-100 tw-text-grey-800',
+    tertiary: 'tw-bg-grey-800 tw-text-grey-300',
 };
 // right now all variants have the same disabled styles
 // in the future, we can add more disabled styles for different variants
@@ -2679,7 +2680,7 @@ function Button(_a) {
                 icon) : (
                 // icon and label
                 jsxs(Fragment, { children: [icon, jsx(BodyText, { className: "tw-pr-1", size: "small", children: label })] }))) : null })] }));
-    const className = cn(baseButtonClassName, buttonSizeClassMap[size], buttonVariantClassMap[variant], roundedClassMap[size], 
+    const className = cn(baseButtonClassName, buttonSizeClassMap[size], buttonVariantClassMap[variant], buttonBorderClassName, roundedClassMap[size], 
     // disabled styles
     disabled && buttonDisabledClass, 
     // custom classes from props
@@ -3572,15 +3573,18 @@ function SwapStepsCollapsed({ steps, currentStepIndex: _newStepIndex, onOpen, on
             onOpen === null || onOpen === void 0 ? void 0 : onOpen();
         }
     };
-    return (jsx("div", { className: "tw-relative tw-h-[60px] tw-w-[400px]", children: jsxs("div", { className: cn('tw-absolute tw-bottom-0 tw-z-20 tw-flex tw-w-full tw-max-w-[400px] tw-flex-col tw-justify-end tw-gap-squid-xxs tw-overflow-hidden tw-rounded-squid-l', isRouteVisible ? 'tw-h-[536px]' : 'tw-h-[60px]'), children: [jsx("div", { style: {
+    return (jsx("div", { className: "tw-relative tw-h-[60px] tw-min-w-[400px] tw-rounded-squid-l", children: jsxs("div", { className: cn('tw-absolute tw-bottom-0 tw-z-10 tw-flex tw-w-full tw-max-w-[400px] tw-flex-col tw-justify-end tw-gap-squid-xxs tw-overflow-hidden tw-rounded-squid-l', isRouteVisible ? 'tw-h-[535px]' : 'tw-h-[60px]'), children: [!isRouteVisible && (jsxs(Fragment, { children: [jsx("span", { className: "tw-absolute tw-left-0 tw-top-0 tw-z-10 tw-h-[21px] tw-w-full tw-bg-gradient-to-b tw-from-grey-800 tw-transition-colors group-hover/swap-step-item-button:tw-from-grey-700" }), jsx("span", { className: "tw-absolute tw-bottom-0 tw-left-0 tw-z-10 tw-h-[21px] tw-w-full tw-bg-gradient-to-t tw-from-grey-800 tw-transition-colors group-hover/swap-step-item-button:tw-from-grey-700" })] })), jsx("div", { style: {
                         [CSS_VARS.FADE_OUT_DURATION]: `${ANIMATION_DURATIONS.HIDE_ROUTE}ms`,
                         [CSS_VARS.FADE_IN_DURATION]: `${ANIMATION_DURATIONS.SHOW_ROUTE}ms`,
-                    }, className: cn('tw-absolute tw-top-0 tw-h-[536px] tw-w-full tw-rounded-squid-l tw-bg-material-dark-thick tw-opacity-0 tw-backdrop-blur/10') }), jsx("div", { onClick: isShowRouteAnimationRunning ? undefined : handleToggleRouteSteps, style: {
+                    }, className: cn('tw-absolute tw-top-0 tw-h-[535px] tw-w-full tw-rounded-squid-l tw-bg-material-dark-thick tw-opacity-0 tw-backdrop-blur/10') }), jsx("div", { style: {
+                        zIndex: 20,
+                        display: isRouteVisible ? 'none' : 'block',
+                    }, onClick: handleToggleRouteSteps, className: "tw-absolute tw-inset-0 tw-h-[60px] tw-cursor-pointer tw-rounded-squid-l tw-border tw-border-material-light-thin" }), jsx("div", { onClick: isShowRouteAnimationRunning ? undefined : handleToggleRouteSteps, style: {
                         [CSS_VARS.COLLAPSE_ROUTE_DURATION]: `${ANIMATION_DURATIONS.HIDE_ROUTE}ms`,
                         [CSS_VARS.EXPAND_ROUTE_DURATION]: `${ANIMATION_DURATIONS.SHOW_ROUTE}ms`,
-                    }, className: cn('tw-h-[60px] tw-max-h-[536px] tw-w-full tw-overflow-hidden tw-rounded-squid-l tw-border tw-border-material-light-thin tw-bg-grey-800 tw-backdrop-blur-2xl', isShowRouteAnimationRunning
+                    }, className: cn('tw-relative tw-h-[60px] tw-max-h-[535px] tw-w-full tw-overflow-hidden tw-rounded-squid-l tw-border tw-border-material-light-thin tw-bg-grey-800 tw-backdrop-blur-2xl', isShowRouteAnimationRunning
                         ? 'tw-animate-expand-route'
-                        : 'tw-animate-collapse-route'), children: jsxs("div", { className: "tw-flex tw-flex-col tw-gap-squid-xxs", style: {
+                        : 'tw-animate-collapse-route'), children: jsxs("div", { className: "tw-flex tw-h-[535px] tw-flex-col tw-gap-squid-xxs", style: {
                             transition: isShowRouteAnimationRunning
                                 ? `transform ${ANIMATION_DURATIONS.SHOW_ROUTE}ms ${ANIMATION_TIMINGS.CHANGE_SWAP_STEP}`
                                 : isRouteVisible
@@ -3588,12 +3592,15 @@ function SwapStepsCollapsed({ steps, currentStepIndex: _newStepIndex, onOpen, on
                                     : `transform ${ANIMATION_DURATIONS.CHANGE_SWAP_STEP}ms ${ANIMATION_TIMINGS.CHANGE_SWAP_STEP}`,
                             transform: isShowRouteAnimationRunning
                                 ? 'translateY(0)'
-                                : `translateY(-${536 - 50 - (newStepIndex + 1) * 50 - 20}px)`,
-                        }, children: [jsx("div", { className: cn('tw-bg-red- tw-absolute tw-z-10 tw-flex tw-h-[52px] tw-w-full tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-bg-transparent tw-p-squid-xs'), children: jsx("button", { onClick: handleToggleRouteSteps, className: "tw-flex tw-h-squid-xl tw-w-40 tw-items-center tw-justify-center tw-rounded-squid-xs tw-px-10 hover:tw-bg-material-light-thin", children: jsx("span", { className: "tw-flex tw-h-8 tw-w-8 tw-items-center tw-justify-center tw-text-grey-300", children: jsx(ChevronLargeDownIcon, { size: "32" }) }) }) }), jsx("ul", { className: "tw-relative tw-flex tw-min-h-[460px] tw-w-[400px] tw-flex-1 tw-flex-col-reverse tw-items-center tw-self-stretch tw-overflow-y-auto tw-overflow-x-hidden tw-px-squid-xs", children: steps.map((step, index) => (jsx(SwapStepItem, { descriptionBlocks: step.descriptionBlocks, chipContent: step.chipContent, showStepSeparator: !(index === steps.length - 1), link: step.link, status: newStepIndex < index
+                                : `translateY(-${535 - 50 - (newStepIndex + 1) * 50 - 30}px)`,
+                        }, children: [jsx("div", { className: cn('tw-absolute tw-z-10 tw-flex tw-h-[52px] tw-w-full tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-bg-transparent tw-p-squid-xs'), children: jsx("button", { onClick: handleToggleRouteSteps, className: "tw-flex tw-h-squid-xl tw-w-40 tw-items-center tw-justify-center tw-rounded-squid-xs tw-px-10 hover:tw-bg-material-light-thin", children: jsx("span", { className: "tw-flex tw-h-8 tw-w-8 tw-items-center tw-justify-center tw-text-grey-300", children: jsx(ChevronLargeDownIcon, { size: "32" }) }) }) }), jsx("ul", { style: {
+                                    zIndex: isRouteVisible ? 0 : -10,
+                                    scrollbarWidth: 'none',
+                                }, className: "tw-relative tw-top-[52px] tw-flex tw-max-h-[413px] tw-w-[400px] tw-flex-1 tw-flex-col-reverse tw-items-center tw-self-stretch tw-overflow-y-auto tw-overflow-x-hidden tw-px-squid-xs tw-py-[15px]", children: steps.map((step, index) => (jsx(SwapStepItem, { descriptionBlocks: step.descriptionBlocks, chipContent: step.chipContent, showStepSeparator: !(index === steps.length - 1), link: step.link, status: newStepIndex < index
                                         ? 'pending'
                                         : newStepIndex > index
                                             ? 'executed'
-                                            : 'progress' }, index))) }), jsx("footer", { className: "tw-flex tw-items-end tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-s", children: jsx(Button, { size: "md", variant: "secondary", label: "View on Squidscan", className: "tw-w-full" }) })] }) })] }) }));
+                                            : 'progress' }, index))) }), jsx("footer", { className: "tw-absolute tw-bottom-0 tw-flex tw-w-full tw-items-end tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-s", children: jsx(Button, { size: "md", variant: "secondary", label: "View on Squidscan", className: "tw-w-full" }) })] }) })] }) }));
 }
 
 function TokenPair({ firstToken, secondToken }) {

package/dist/index.css

@@ -633,10 +633,6 @@ video {
   top: -55px;
 }
 
-.-tw-top-full {
-  top: -100%;
-}
-
 .tw-bottom-0 {
   bottom: 0px;
 }
@@ -753,8 +749,8 @@ video {
   top: 1.75rem;
 }
 
-.tw-top-full {
-  top: 100%;
+.tw-top-\[52px\] {
+  top: 52px;
 }
 
 .tw-top-squid-xxs {
@@ -952,6 +948,10 @@ video {
   height: 52px;
 }
 
+.tw-h-\[535px\] {
+  height: 535px;
+}
+
 .tw-h-\[536px\] {
   height: 536px;
 }
@@ -1024,12 +1024,12 @@ video {
   max-height: 205px;
 }
 
-.tw-max-h-\[535px\] {
-  max-height: 535px;
+.tw-max-h-\[413px\] {
+  max-height: 413px;
 }
 
-.tw-max-h-\[536px\] {
-  max-height: 536px;
+.tw-max-h-\[535px\] {
+  max-height: 535px;
 }
 
 .tw-max-h-\[540px\] {
@@ -1068,10 +1068,6 @@ video {
   min-height: 30px;
 }
 
-.tw-min-h-\[460px\] {
-  min-height: 460px;
-}
-
 .tw-min-h-button {
   min-height: 3.75rem;
 }
@@ -1299,6 +1295,10 @@ video {
   min-width: 30px;
 }
 
+.tw-min-w-\[400px\] {
+  min-width: 400px;
+}
+
 .tw-min-w-\[60px\] {
   min-width: 60px;
 }
@@ -1566,34 +1566,6 @@ video {
   animation: tw-slide-to-top 0.35s ease-out both;
 }
 
-@keyframes tw-translate-to-bottom {
-  0% {
-    transform: translateY(0);
-  }
-
-  100% {
-    transform: translateY(100%);
-  }
-}
-
-.tw-animate-translate-to-bottom {
-  animation: tw-translate-to-bottom var(--squid-animation-translate-top-or-bottom, 0s) linear both;
-}
-
-@keyframes tw-translate-to-top {
-  0% {
-    transform: translateY(0);
-  }
-
-  100% {
-    transform: translateY(-100%);
-  }
-}
-
-.tw-animate-translate-to-top {
-  animation: tw-translate-to-top var(--squid-animation-translate-top-or-bottom, 0s) linear both;
-}
-
 .tw-cursor-help {
   cursor: help;
 }
@@ -2139,6 +2111,11 @@ video {
   padding-bottom: 0.5rem;
 }
 
+.tw-py-\[15px\] {
+  padding-top: 15px;
+  padding-bottom: 15px;
+}
+
 .tw-py-squid-s {
   padding-top: 0.9375rem;
   padding-bottom: 0.9375rem;
@@ -2764,8 +2741,8 @@ input[type='number'] {
   animation: tw-display 0s var(--squid-animation-display-delayed-duration, 0s) ease-out both;
 }
 
-.hover\:tw-bg-grey-700:hover {
-  background-color: var(--squid-theme-grey-700);
+.hover\:tw-border-material-light-average:hover {
+  border-color: var(--squid-theme-material-light-average);
 }
 
 .hover\:tw-bg-material-light-thin:hover {

package/package.json

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