@rango-dev/ui 0.15.1-next.17 → 0.15.1-next.19

package/dist/widget/ui/src/components/Tooltip/Tooltip.styles.d.ts

@@ -1,4 +1,312 @@
+/// <reference types="react" />
+import * as RadixTooltip from '@radix-ui/react-tooltip';
 import { Typography } from '../Typography';
+export declare const TooltipContent: import("@stitches/react/types/styled-component").StyledComponent<import("react").ForwardRefExoticComponent<RadixTooltip.TooltipContentProps & import("react").RefAttributes<HTMLDivElement>>, {}, {
+    sm: string;
+    md: string;
+    lg: string;
+}, import("@stitches/react/types/css-util").CSS<{
+    sm: string;
+    md: string;
+    lg: string;
+}, {
+    colors: {
+        primary500: string;
+        primary600: string;
+        secondary100: string;
+        secondary200: string;
+        secondary300: string;
+        secondary400: string;
+        secondary500: string;
+        secondary600: string;
+        secondary700: string;
+        secondary800: string;
+        secondary900: string;
+        neutral100: string;
+        neutral200: string;
+        neutral300: string;
+        neutral400: string;
+        neutral500: string;
+        neutral600: string;
+        neutral700: string;
+        neutral800: string;
+        neutral900: string;
+        error100: string;
+        error300: string;
+        error500: string;
+        error600: string;
+        error700: string;
+        warning100: string;
+        warning300: string;
+        warning500: string;
+        warning600: string;
+        warning700: string;
+        info100: string;
+        info300: string;
+        info500: string;
+        info600: string;
+        info700: string;
+        success100: string;
+        success300: string;
+        success500: string;
+        success600: string;
+        success700: string;
+        background: string;
+        foreground: string;
+    };
+    space: {
+        0: string;
+        5: string;
+        10: string;
+        15: string;
+        20: string;
+        25: string;
+        30: string;
+        40: string;
+        46: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        100: string;
+        2: string;
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+        24: string;
+        28: string;
+        32: string;
+    };
+    radii: {
+        xs: string;
+        sm: string;
+        xm: string;
+        md: string;
+        xl: string;
+        lg: string;
+        primary: string;
+        secondary: string;
+    };
+    fontSizes: {
+        10: string;
+        12: string;
+        14: string;
+        16: string;
+        18: string;
+        20: string;
+        22: string;
+        24: string;
+        28: string;
+        32: string;
+        36: string;
+        40: string;
+        48: string;
+    };
+    fonts: {
+        primary: string;
+        widget: string;
+    };
+    fontWeights: {
+        regular: number;
+        medium: number;
+        semiBold: number;
+        bold: number;
+    };
+    lineHeights: {
+        12: string;
+        16: string;
+        20: string;
+        24: string;
+        26: string;
+        28: string;
+        30: string;
+        36: string;
+        40: string;
+        44: string;
+        52: string;
+        64: string;
+    };
+    letterSpacings: {};
+    sizes: {
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+        18: string;
+        20: string;
+        24: string;
+        28: string;
+        32: string;
+        36: string;
+        40: string;
+        45: string;
+        48: string;
+    };
+    borderWidths: {};
+    borderStyles: {};
+    shadows: {
+        s: string;
+    };
+    zIndices: {};
+    transitions: {};
+}, import("@stitches/react/types/config").DefaultThemeMap, {}>>;
+export declare const TooltipArrow: import("@stitches/react/types/styled-component").StyledComponent<import("react").ForwardRefExoticComponent<RadixTooltip.TooltipArrowProps & import("react").RefAttributes<SVGSVGElement>>, {}, {
+    sm: string;
+    md: string;
+    lg: string;
+}, import("@stitches/react/types/css-util").CSS<{
+    sm: string;
+    md: string;
+    lg: string;
+}, {
+    colors: {
+        primary500: string;
+        primary600: string;
+        secondary100: string;
+        secondary200: string;
+        secondary300: string;
+        secondary400: string;
+        secondary500: string;
+        secondary600: string;
+        secondary700: string;
+        secondary800: string;
+        secondary900: string;
+        neutral100: string;
+        neutral200: string;
+        neutral300: string;
+        neutral400: string;
+        neutral500: string;
+        neutral600: string;
+        neutral700: string;
+        neutral800: string;
+        neutral900: string;
+        error100: string;
+        error300: string;
+        error500: string;
+        error600: string;
+        error700: string;
+        warning100: string;
+        warning300: string;
+        warning500: string;
+        warning600: string;
+        warning700: string;
+        info100: string;
+        info300: string;
+        info500: string;
+        info600: string;
+        info700: string;
+        success100: string;
+        success300: string;
+        success500: string;
+        success600: string;
+        success700: string;
+        background: string;
+        foreground: string;
+    };
+    space: {
+        0: string;
+        5: string;
+        10: string;
+        15: string;
+        20: string;
+        25: string;
+        30: string;
+        40: string;
+        46: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        100: string;
+        2: string;
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+        24: string;
+        28: string;
+        32: string;
+    };
+    radii: {
+        xs: string;
+        sm: string;
+        xm: string;
+        md: string;
+        xl: string;
+        lg: string;
+        primary: string;
+        secondary: string;
+    };
+    fontSizes: {
+        10: string;
+        12: string;
+        14: string;
+        16: string;
+        18: string;
+        20: string;
+        22: string;
+        24: string;
+        28: string;
+        32: string;
+        36: string;
+        40: string;
+        48: string;
+    };
+    fonts: {
+        primary: string;
+        widget: string;
+    };
+    fontWeights: {
+        regular: number;
+        medium: number;
+        semiBold: number;
+        bold: number;
+    };
+    lineHeights: {
+        12: string;
+        16: string;
+        20: string;
+        24: string;
+        26: string;
+        28: string;
+        30: string;
+        36: string;
+        40: string;
+        44: string;
+        52: string;
+        64: string;
+    };
+    letterSpacings: {};
+    sizes: {
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+        18: string;
+        20: string;
+        24: string;
+        28: string;
+        32: string;
+        36: string;
+        40: string;
+        45: string;
+        48: string;
+    };
+    borderWidths: {};
+    borderStyles: {};
+    shadows: {
+        s: string;
+    };
+    zIndices: {};
+    transitions: {};
+}, import("@stitches/react/types/config").DefaultThemeMap, {}>>;
 export declare const TooltipTypography: import("@stitches/react/types/styled-component").StyledComponent<typeof Typography, {}, {
     sm: string;
     md: string;

package/dist/widget/ui/src/components/Tooltip/Tooltip.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Tooltip/Tooltip.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAK5B,CAAC"}
+{"version":3,"file":"Tooltip.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Tooltip/Tooltip.styles.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,YAAY,MAAM,yBAAyB,CAAC;AAGxD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAEzB,CAAC;AAEH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAEvB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAK5B,CAAC"}

package/dist/widget/ui/src/components/index.d.ts

@@ -1,6 +1,7 @@
 export * from './I18nManager';
 export * from './Alert';
 export * from './BestRoute';
+export * from './BlockchainsChip';
 export * from './BottomLogo';
 export * from './Button';
 export * from './IconButton';
@@ -21,6 +22,7 @@ export * from './RoutesOverview';
 export * from './SecondaryPage';
 export * from './SelectableWalletList';
 export * from './Wallet';
+export * from './SelectableCategoryList';
 export * from './Spinner';
 export * from './StepDetail';
 export * from './SwapContainer';

package/dist/widget/ui/src/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC;AACvC,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,0BAA0B,CAAC;AACzC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC;AACvC,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,UAAU,CAAC;AACzB,cAAc,0BAA0B,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,0BAA0B,CAAC;AACzC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC"}

package/dist/widget/ui/src/containers/SwapInput/SwapInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SwapInput.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/SwapInput/SwapInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAGxD,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,qBAgG9C"}
+{"version":3,"file":"SwapInput.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/SwapInput/SwapInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAGxD,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,qBAkG9C"}

package/dist/widget/ui/src/containers/SwapInput/SwapInput.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SwapInput.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/SwapInput/SwapInput.styles.ts"],"names":[],"mappings":";;;AAGA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAyCpB,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAUtB,CAAC;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAapB,CAAC"}
+{"version":3,"file":"SwapInput.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/SwapInput/SwapInput.styles.ts"],"names":[],"mappings":";;;AAGA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAyCpB,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAUtB,CAAC;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAMpB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.15.1-next.17",
+  "version": "0.15.1-next.19",
   "license": "MIT",
   "type": "module",
   "module": "./dist/index.js",

package/src/components/BestRoute/BestRoute.tsx

@@ -120,7 +120,8 @@ export function BestRoute(props: BestRouteProps) {
                   <React.Fragment key={key}>
                     <Tooltip
                       container={props.tooltipContainer}
-                      sideOffset={2}
+                      side="bottom"
+                      sideOffset={4}
                       content={step.from.chain.displayName}>
                       <Image src={step.from.chain.image} size={16} />
                     </Tooltip>
@@ -131,7 +132,8 @@ export function BestRoute(props: BestRouteProps) {
                         </IconContainer>
                         <Tooltip
                           container={props.tooltipContainer}
-                          sideOffset={2}
+                          side="bottom"
+                          sideOffset={4}
                           content={step.to.chain.displayName}>
                           <Image src={step.to.chain.image} size={16} />
                         </Tooltip>

package/src/components/BlockchainsChip/BlockchainsChip.styles.ts

@@ -0,0 +1,42 @@
+import { darkTheme, styled } from '../../theme';
+
+export const Chip = styled('button', {
+  padding: '$10',
+  borderRadius: '$sm',
+  $$color: '$colors$neutral100',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral300',
+  },
+  backgroundColor: '$$color',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  cursor: 'pointer',
+  border: 0,
+  '.image-container': {
+    borderRadius: '$xm',
+    overflow: 'hidden',
+  },
+  '&:hover': {
+    $$color: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral100',
+    },
+    backgroundColor: '$$color',
+  },
+  '&:focus-visible': {
+    outline: 0,
+    $$color: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$info700',
+    },
+    backgroundColor: '$$color',
+  },
+  variants: {
+    selected: {
+      true: { outline: '1px solid $secondary500' },
+      false: { outline: 0 },
+    },
+  },
+});

package/src/components/BlockchainsChip/BlockchainsChip.tsx

@@ -0,0 +1,15 @@
+import type { PropTypes } from './BlockchainsChip.types';
+import type { PropsWithChildren } from 'react';
+
+import React from 'react';
+
+import { Chip } from './BlockchainsChip.styles';
+
+export function BlockchainsChip(props: PropsWithChildren<PropTypes>) {
+  const { children, selected, onClick } = props;
+  return (
+    <Chip selected={selected} onClick={onClick}>
+      {children}
+    </Chip>
+  );
+}

package/src/components/BlockchainsChip/BlockchainsChip.types.ts

@@ -0,0 +1,4 @@
+export interface PropTypes {
+  selected?: boolean;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}

package/src/components/BlockchainsChip/index.ts

@@ -0,0 +1 @@
+export { BlockchainsChip } from './BlockchainsChip';

package/src/components/Button/Button.styles.tsx

@@ -63,15 +63,7 @@ export const ButtonBase = styled('button', {
           },
           backgroundColor: '$neutral800',
           color: '$$color',
-        },
-        '&:disabled:hover': {
-          $$color: '$colors$background',
-          [`.${darkTheme} &`]: {
-            $$color: '$colors$foreground',
-          },
-          backgroundColor: '$neutral800',
-          color: '$$color',
-          transform: 'unset',
+          pointerEvents: 'none',
         },
       },
       outlined: {
@@ -90,10 +82,7 @@ export const ButtonBase = styled('button', {
         '&:disabled': {
           borderColor: '$neutral800',
           color: '$neutral800',
-        },
-        '&:disabled:hover': {
-          borderColor: '$neutral800',
-          transform: 'unset',
+          pointerEvents: 'none',
         },
       },
       ghost: {
@@ -101,6 +90,7 @@ export const ButtonBase = styled('button', {
         color: '$neutral900',
         '&:disabled': {
           color: '$neutral800',
+          pointerEvents: 'none',
         },
         '&:focus-visible': {
           backgroundColor: '$neutral500',
@@ -152,6 +142,7 @@ export const ButtonBase = styled('button', {
           },
           background: '$neutral800',
           color: '$$color',
+          pointerEvents: 'none',
         },
         '&:visited': {
           background: '$primary500',

package/src/components/Checkbox/Checkbox.types.ts

@@ -7,7 +7,7 @@ type RadixCheckboxProps = Pick<
 
 interface WithLabelProps {
   id: string;
-  label: string;
+  label: React.ReactNode;
 }
 interface ComponentProps {
   id?: never;

package/src/components/IconButton/IconButton.tsx

@@ -1,16 +1,20 @@
 import type { PropTypes } from './IconButton.types';
-import type { PropsWithChildren } from 'react';
+import type { PropsWithChildren, Ref } from 'react';
 
 import React from 'react';
 
 import { Button } from '../Button';
 
 // border-radius: 100% + overflow: hidden
-function IconButton(props: PropsWithChildren<PropTypes>) {
+function IconButtonComponent(
+  props: PropsWithChildren<PropTypes>,
+  ref: Ref<HTMLButtonElement>
+) {
   const { style, ...otherProps } = props;
   return (
     <Button
       className="_icon-button"
+      ref={ref}
       {...otherProps}
       style={{
         borderRadius: '100%',
@@ -22,6 +26,8 @@ function IconButton(props: PropsWithChildren<PropTypes>) {
   );
 }
 
+const IconButton = React.forwardRef(IconButtonComponent);
+IconButton.displayName = 'IconButton';
 IconButton.toString = () => '._icon-button';
 
 export { IconButton };

package/src/components/Modal/Modal.tsx

@@ -87,7 +87,7 @@ export function Modal(props: PropsWithChildren<PropTypes>) {
               css={containerStyle}
               anchor={anchor}>
               {header ?? (
-                <ModalHeader noTitle={!title}>
+                <ModalHeader noTitle={!title && dismissible && !prefix}>
                   {prefix}
                   {title && (
                     <Typography variant="title" size="small">

package/src/components/RouteCost/RouteCost.tsx

@@ -28,8 +28,8 @@ export function RouteCost(props: PropTypes) {
         </div>
         <Typography ml={2} align="center" variant="body" size="small">
           {i18n.t({
-            id: 'timeMin',
-            message: '{time} min',
+            id: 'timeSec',
+            message: '{time} sec',
             values: { time },
           })}
         </Typography>

package/src/components/SelectableCategoryList/SelectableCategoryList.helpers.ts

@@ -0,0 +1,35 @@
+import { type BlockchainMeta, TransactionType } from 'rango-sdk';
+
+import { BlockchainCategories } from './SelectableCategoryList.types';
+
+const filterByType = (blockchain: BlockchainMeta, type: string): boolean => {
+  switch (type) {
+    case BlockchainCategories.ALL:
+      return true;
+    case BlockchainCategories.UTXO:
+      return blockchain.type === TransactionType.TRANSFER;
+    case BlockchainCategories.OTHER:
+      return (
+        blockchain.type !== TransactionType.TRANSFER &&
+        blockchain.type !== TransactionType.COSMOS &&
+        blockchain.type !== TransactionType.EVM
+      );
+    default:
+      return blockchain.type === type;
+  }
+};
+
+const blockchainslogo = {
+  [BlockchainCategories.EVM]: ['ETH', 'BSC', 'POLYGON'],
+  [BlockchainCategories.COSMOS]: ['COSMOS', 'OSMOSIS', 'JUNO'],
+  [BlockchainCategories.UTXO]: ['BTC', 'LTC', 'BCH'],
+  [BlockchainCategories.OTHER]: ['STARKNET', 'TRON', 'SOLANA'],
+};
+
+export const generateBlockchainsLogo = (
+  list: BlockchainMeta[],
+  type: Exclude<BlockchainCategories, 'ALL'>
+) =>
+  list
+    .filter((item) => filterByType(item, type))
+    .filter((item) => blockchainslogo[type].includes(item.name));

package/src/components/SelectableCategoryList/SelectableCategoryList.styles.ts

@@ -0,0 +1,21 @@
+import { styled } from '../../theme';
+
+export const Container = styled('div', {
+  display: 'grid',
+  gap: '$10',
+  gridTemplateColumns: 'auto 1fr 1fr 1fr 1fr',
+});
+
+export const ImageContent = styled('div', {
+  display: 'flex',
+  position: 'relative',
+  alignItems: 'center',
+  justifyContent: 'center',
+  paddingTop: '$10',
+});
+export const FirstImage = styled('img', {
+  position: 'absolute',
+  top: -2,
+  width: 15,
+  height: 15,
+});