@rango-dev/ui 0.28.2-next.4 → 0.28.2-next.6

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

@@ -426,6 +426,7 @@ export declare const Container: import("@stitches/react/types/styled-component")
         18: string;
         20: string;
         24: string;
+        26: string;
         28: string;
         30: string;
         32: string;
@@ -587,6 +588,7 @@ export declare const chainNameStyles: import("@stitches/react/types/styled-compo
         18: string;
         20: string;
         24: string;
+        26: string;
         28: string;
         30: string;
         32: string;
@@ -748,6 +750,7 @@ export declare const TokenSectionContainer: import("@stitches/react/types/styled
         18: string;
         20: string;
         24: string;
+        26: string;
         28: string;
         30: string;
         32: string;
@@ -909,6 +912,7 @@ export declare const tokenChainStyles: import("@stitches/react/types/styled-comp
         18: string;
         20: string;
         24: string;
+        26: string;
         28: string;
         30: string;
         32: string;
@@ -1070,6 +1074,7 @@ export declare const skeletonStyles: import("@stitches/react/types/styled-compon
         18: string;
         20: string;
         24: string;
+        26: string;
         28: string;
         30: string;
         32: string;

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

@@ -1 +1 @@
-{"version":3,"file":"TokenSection.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/SwapInput/TokenSection.styles.ts"],"names":[],"mappings":";;;AAGA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DA2BpB,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAAQ,CAAC;AAErC,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAehC,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAQ3B,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAGzB,CAAC"}
+{"version":3,"file":"TokenSection.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/SwapInput/TokenSection.styles.ts"],"names":[],"mappings":";;;AAGA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DA2BpB,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAAQ,CAAC;AAErC,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAehC,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAQ3B,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAGzB,CAAC"}

package/dist/widget/ui/src/containers/TokenSelector/TokenSelector.d.ts

@@ -146,6 +146,7 @@ export declare const LoaderContainer: import("@stitches/react/types/styled-compo
         18: string;
         20: string;
         24: string;
+        26: string;
         28: string;
         30: string;
         32: string;

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

@@ -1 +1 @@
-{"version":3,"file":"TokenSelector.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/TokenSelector/TokenSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AAC5E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAM1B,CAAC;AACH,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,IAAI,CAAC,EAAE,QAAQ,GAAG,aAAa,CAAC;IAChC,QAAQ,EAAE,eAAe,GAAG,IAAI,CAAC;IACjC,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAC3C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,EAAE,aAAa,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAUD,wBAAgB,aAAa,CAAC,KAAK,EAAE,SAAS,qBAiC7C"}
+{"version":3,"file":"TokenSelector.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/TokenSelector/TokenSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AAC5E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAM1B,CAAC;AACH,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,IAAI,CAAC,EAAE,QAAQ,GAAG,aAAa,CAAC;IAChC,QAAQ,EAAE,eAAe,GAAG,IAAI,CAAC;IACjC,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAC3C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,EAAE,aAAa,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAUD,wBAAgB,aAAa,CAAC,KAAK,EAAE,SAAS,qBAiC7C"}

package/dist/widget/ui/src/theme.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import type { CSS as StitchesCSS } from '@stitches/react';
 import type { DefaultThemeMap } from '@stitches/react/types/config';
 export declare const theme: {
     colors: {
@@ -135,6 +136,7 @@ export declare const theme: {
         18: string;
         20: string;
         24: string;
+        26: string;
         28: string;
         30: string;
         32: string;
@@ -173,7 +175,7 @@ export declare const darkColors: {
 };
 export declare const styled: <Type extends import("react").ComponentType<any> | import("@stitches/react/types/util").Function | keyof JSX.IntrinsicElements, Composers extends (string | import("react").ComponentType<any> | import("@stitches/react/types/util").Function | {
     [name: string]: unknown;
-})[], CSS = import("@stitches/react/types/css-util").CSS<{
+})[], CSS_1 = import("@stitches/react/types/css-util").CSS<{
     xs: string;
     sm: string;
     md: string;
@@ -313,6 +315,7 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
         18: string;
         20: string;
         24: string;
+        26: string;
         28: string;
         30: string;
         32: string;
@@ -328,18 +331,18 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
     };
     zIndices: {};
     transitions: {};
-}, DefaultThemeMap, {}>>(type: Type, ...composers: { [K in keyof Composers]: string extends Composers[K] ? Composers[K] : Composers[K] extends string | import("react").ComponentType<any> | import("@stitches/react/types/util").Function ? Composers[K] : import("@stitches/react/types/stitches").RemoveIndex<CSS> & {
+}, DefaultThemeMap, {}>>(type: Type, ...composers: { [K in keyof Composers]: string extends Composers[K] ? Composers[K] : Composers[K] extends string | import("react").ComponentType<any> | import("@stitches/react/types/util").Function ? Composers[K] : import("@stitches/react/types/stitches").RemoveIndex<CSS_1> & {
     variants?: {
         [x: string]: {
-            [x: string]: CSS;
-            [x: number]: CSS;
+            [x: string]: CSS_1;
+            [x: number]: CSS_1;
         };
     } | undefined;
     compoundVariants?: (("variants" extends keyof Composers[K] ? Composers[K][keyof Composers[K] & "variants"] extends infer T ? { [Name in keyof T]?: import("@stitches/react/types/util").String | import("@stitches/react/types/util").Widen<keyof Composers[K][keyof Composers[K] & "variants"][Name]> | undefined; } : never : import("@stitches/react/types/util").WideObject) & {
-        css: CSS;
+        css: CSS_1;
     })[] | undefined;
     defaultVariants?: ("variants" extends keyof Composers[K] ? Composers[K][keyof Composers[K] & "variants"] extends infer T_1 ? { [Name_1 in keyof T_1]?: import("@stitches/react/types/util").String | import("@stitches/react/types/util").Widen<keyof Composers[K][keyof Composers[K] & "variants"][Name_1]> | undefined; } : never : import("@stitches/react/types/util").WideObject) | undefined;
-} & CSS & (Composers[K] extends infer T_2 ? { [K2 in keyof T_2]: K2 extends "compoundVariants" | "defaultVariants" | "variants" ? unknown : K2 extends keyof CSS ? CSS[K2] : unknown; } : never); }) => import("@stitches/react/types/styled-component").StyledComponent<Type, import("@stitches/react/types/styled-component").StyledComponentProps<Composers>, {
+} & CSS_1 & (Composers[K] extends infer T_2 ? { [K2 in keyof T_2]: K2 extends "compoundVariants" | "defaultVariants" | "variants" ? unknown : K2 extends keyof CSS_1 ? CSS_1[K2] : unknown; } : never); }) => import("@stitches/react/types/styled-component").StyledComponent<Type, import("@stitches/react/types/styled-component").StyledComponentProps<Composers>, {
     xs: string;
     sm: string;
     md: string;
@@ -484,6 +487,7 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
         18: string;
         20: string;
         24: string;
+        26: string;
         28: string;
         30: string;
         32: string;
@@ -501,7 +505,7 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
     transitions: {};
 }, DefaultThemeMap, {}>>, css: <Composers extends (string | import("react").JSXElementConstructor<any> | import("react").ExoticComponent<any> | import("@stitches/react/types/util").Function | {
     [name: string]: unknown;
-})[], CSS = import("@stitches/react/types/css-util").CSS<{
+})[], CSS_1 = import("@stitches/react/types/css-util").CSS<{
     xs: string;
     sm: string;
     md: string;
@@ -641,6 +645,7 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
         18: string;
         20: string;
         24: string;
+        26: string;
         28: string;
         30: string;
         32: string;
@@ -656,23 +661,23 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
     };
     zIndices: {};
     transitions: {};
-}, DefaultThemeMap, {}>>(...composers: { [K in keyof Composers]: string extends Composers[K] ? Composers[K] : Composers[K] extends string | import("react").JSXElementConstructor<any> | import("react").ExoticComponent<any> | import("@stitches/react/types/util").Function ? Composers[K] : import("@stitches/react/types/stitches").RemoveIndex<CSS> & {
+}, DefaultThemeMap, {}>>(...composers: { [K in keyof Composers]: string extends Composers[K] ? Composers[K] : Composers[K] extends string | import("react").JSXElementConstructor<any> | import("react").ExoticComponent<any> | import("@stitches/react/types/util").Function ? Composers[K] : import("@stitches/react/types/stitches").RemoveIndex<CSS_1> & {
     variants?: {
         [x: string]: {
-            [x: string]: CSS;
-            [x: number]: CSS;
+            [x: string]: CSS_1;
+            [x: number]: CSS_1;
         };
     } | undefined;
     compoundVariants?: (("variants" extends keyof Composers[K] ? Composers[K][keyof Composers[K] & "variants"] extends infer T ? { [Name in keyof T]?: import("@stitches/react/types/util").String | import("@stitches/react/types/util").Widen<keyof Composers[K][keyof Composers[K] & "variants"][Name]> | undefined; } : never : import("@stitches/react/types/util").WideObject) & {
-        css: CSS;
+        css: CSS_1;
     })[] | undefined;
     defaultVariants?: ("variants" extends keyof Composers[K] ? Composers[K][keyof Composers[K] & "variants"] extends infer T_1 ? { [Name_1 in keyof T_1]?: import("@stitches/react/types/util").String | import("@stitches/react/types/util").Widen<keyof Composers[K][keyof Composers[K] & "variants"][Name_1]> | undefined; } : never : import("@stitches/react/types/util").WideObject) | undefined;
-} & CSS & (Composers[K] extends infer T_2 ? { [K2 in keyof T_2]: K2 extends "compoundVariants" | "defaultVariants" | "variants" ? unknown : K2 extends keyof CSS ? CSS[K2] : unknown; } : never); }) => import("@stitches/react/types/styled-component").CssComponent<import("@stitches/react/types/styled-component").StyledComponentType<Composers>, import("@stitches/react/types/styled-component").StyledComponentProps<Composers>, {
+} & CSS_1 & (Composers[K] extends infer T_2 ? { [K2 in keyof T_2]: K2 extends "compoundVariants" | "defaultVariants" | "variants" ? unknown : K2 extends keyof CSS_1 ? CSS_1[K2] : unknown; } : never); }) => import("@stitches/react/types/styled-component").CssComponent<import("@stitches/react/types/styled-component").StyledComponentType<Composers>, import("@stitches/react/types/styled-component").StyledComponentProps<Composers>, {
     xs: string;
     sm: string;
     md: string;
     lg: string;
-}, CSS>, createTheme: <Argument0 extends string | ({
+}, CSS_1>, createTheme: <Argument0 extends string | ({
     colors?: {
         primary?: string | number | boolean | undefined;
         primary500?: string | number | boolean | undefined;
@@ -807,6 +812,7 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
         18?: string | number | boolean | undefined;
         20?: string | number | boolean | undefined;
         24?: string | number | boolean | undefined;
+        26?: string | number | boolean | undefined;
         28?: string | number | boolean | undefined;
         30?: string | number | boolean | undefined;
         32?: string | number | boolean | undefined;
@@ -962,6 +968,7 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
         18?: string | number | boolean | undefined;
         20?: string | number | boolean | undefined;
         24?: string | number | boolean | undefined;
+        26?: string | number | boolean | undefined;
         28?: string | number | boolean | undefined;
         30?: string | number | boolean | undefined;
         32?: string | number | boolean | undefined;
@@ -1126,6 +1133,7 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
             18: string;
             20: string;
             24: string;
+            26: string;
             28: string;
             30: string;
             32: string;
@@ -1291,6 +1299,7 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
             18: string;
             20: string;
             24: string;
+            26: string;
             28: string;
             30: string;
             32: string;
@@ -1447,6 +1456,7 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
         18: string;
         20: string;
         24: string;
+        26: string;
         28: string;
         30: string;
         32: string;
@@ -1605,6 +1615,7 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
             18: string;
             20: string;
             24: string;
+            26: string;
             28: string;
             30: string;
             32: string;
@@ -1624,6 +1635,7 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
     themeMap: DefaultThemeMap;
     utils: {};
 };
+export type CSS = StitchesCSS<typeof config>;
 export declare const lightTheme: string & {
     className: string;
     selector: string;

package/dist/widget/ui/src/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../src/theme.ts"],"names":[],"mappings":";AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAMpE,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiKjB,CAAC;AAaF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;CAuBtB,CAAC;AAMF,eAAO,MAAQ,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAAE,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAAE,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4KAAE,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAAE,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gDAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKjE,CAAC;AAEL,eAAO,MAAM,UAAU;;;gEAAoC,CAAC;AAE5D,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;MAKpB,CAAC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../src/theme.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.28.2-next.4",
+  "version": "0.28.2-next.6",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -60,6 +60,7 @@
     "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-popover": "^1.0.6",
     "@radix-ui/react-radio-group": "^1.1.1",
+    "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-tooltip": "^1.0.2",
     "@rango-dev/wallets-shared": "^0.27.1-next.1",
@@ -72,4 +73,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/Alert/Alert.helpers.ts

@@ -1,6 +1,6 @@
-import type { Type } from './Alert.types';
+import type { PropTypes, Type } from './Alert.types';
 
-export const getColor = (type: Type, variant: 'alarm' | 'regular') => {
+export const getColor = (type: Type, variant: PropTypes['variant']) => {
   if (variant === 'regular') {
     return undefined;
   }
@@ -15,3 +15,14 @@ export const getColor = (type: Type, variant: 'alarm' | 'regular') => {
       return undefined;
   }
 };
+
+export const mapVariantToSize = (variant: PropTypes['variant']) => {
+  switch (variant) {
+    case 'alarm':
+      return 'small';
+    case 'regular':
+      return 'xsmall';
+    default:
+      return 'xsmall';
+  }
+};

package/src/components/Alert/Alert.styles.ts

@@ -1,4 +1,4 @@
-import { css, darkTheme, styled } from '../../theme';
+import { darkTheme, styled } from '../../theme';
 
 export const Container = styled('div', {
   display: 'flex',
@@ -34,7 +34,6 @@ export const Container = styled('div', {
       },
       alarm: {
         padding: '$5 $10',
-        alignItems: 'center',
         '.title_typography': {
           fontWeight: '$medium',
         },
@@ -106,6 +105,12 @@ export const Main = styled('div', {
   },
 });
 
+export const TitleContainer = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  flex: '1 0 0',
+});
+
 export const IconHighlight = styled('div', {
   borderRadius: '$lg',
   width: '$20',
@@ -160,9 +165,3 @@ export const IconHighlight = styled('div', {
     },
   },
 });
-
-export const titleStyles = css({
-  display: 'flex',
-  alignItems: 'center',
-  flex: '1 0 0',
-});

package/src/components/Alert/Alert.tsx

@@ -6,8 +6,8 @@ import React from 'react';
 import { Divider } from '../Divider';
 import { Typography } from '../Typography';
 
-import { getColor } from './Alert.helpers';
-import { Container, IconHighlight, Main, titleStyles } from './Alert.styles';
+import { getColor, mapVariantToSize } from './Alert.helpers';
+import { Container, IconHighlight, Main, TitleContainer } from './Alert.styles';
 import AlertIcon from './AlertIcon';
 
 export function Alert(props: PropsWithChildren<PropTypes>) {
@@ -25,11 +25,11 @@ export function Alert(props: PropsWithChildren<PropTypes>) {
   return (
     <Container
       className="_alert"
-      style={containerStyles}
+      css={containerStyles}
       type={type}
       variant={variant}>
       <Main variant={variant}>
-        <div className={titleStyles()}>
+        <TitleContainer>
           <IconHighlight type={type}>
             <AlertIcon type={type} />
           </IconHighlight>
@@ -40,11 +40,11 @@ export function Alert(props: PropsWithChildren<PropTypes>) {
               align={titleAlign}
               variant="body"
               className="title_typography"
-              size={variant === 'regular' ? 'xsmall' : 'small'}>
+              size={mapVariantToSize(variant)}>
               {title}
             </Typography>
           )}
-        </div>
+        </TitleContainer>
         {action ? <div>{action}</div> : null}
       </Main>
       {footer ? (

package/src/components/Alert/Alert.types.ts

@@ -1,5 +1,6 @@
 import type { BaseAlign } from '../Typography/Typography.types';
-import type { CSSProperties, ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import type { CSS } from 'src/theme';
 
 export type Type = 'success' | 'warning' | 'error' | 'info' | 'loading';
 
@@ -9,6 +10,6 @@ export interface PropTypes {
   footer?: ReactNode;
   action?: ReactNode;
   variant?: 'alarm' | 'regular';
-  containerStyles?: CSSProperties;
+  containerStyles?: CSS;
   titleAlign?: BaseAlign;
 }

package/src/components/Modal/Modal.tsx

@@ -46,6 +46,8 @@ export function Modal(props: PropsWithChildren<PropTypes>) {
   const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const handleBackDropClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    event.stopPropagation();
+
     if (event.target === event.currentTarget && dismissible) {
       onClose();
     }

package/src/components/QuoteCost/QuoteCost.styles.ts

@@ -5,7 +5,6 @@ export const Container = styled('div', {
   display: 'flex',
   justifyContent: 'start',
   alignItems: 'center',
-  paddingBottom: '$10',
 });
 
 export const Separator = styled('div', {

package/src/components/QuoteCost/QuoteCost.types.ts

@@ -2,7 +2,7 @@ export type PropTypes = {
   fee: string;
   time: string | number;
   steps: number;
-  onClickFee?: () => void;
+  onClickFee?: React.MouseEventHandler<HTMLDivElement>;
   tooltipGas?: string;
   feeWarning?: boolean;
   tooltipContainer?: HTMLElement;

package/src/components/Select/Select.tsx

@@ -0,0 +1,85 @@
+import type { PropTypes } from './Select.types';
+
+import * as Select from '@radix-ui/react-select';
+import React, { useEffect, useRef, useState } from 'react';
+
+import { ChevronDownIcon, ChevronUpIcon } from '../../icons';
+import { Typography } from '../Typography';
+
+import { SelectContent, SelectItem, SelectTrigger } from './select.styles';
+
+export function SelectComponent(props: PropTypes) {
+  const [open, setOpen] = useState(false);
+  const selectRef = useRef<HTMLDivElement>(null);
+  const { options, value, container, handleItemClick } = props;
+  const handleToggle = () => {
+    setOpen((prev) => !prev);
+  };
+
+  const handleClickOutside = (e: MouseEvent) => {
+    if (selectRef.current && !selectRef.current.contains(e.target as Node)) {
+      setOpen(false);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('click', handleClickOutside);
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <div ref={selectRef}>
+      <Select.Root value={value.value} open={open}>
+        <SelectTrigger
+          onKeyDown={(event) => event.key === 'Enter' && handleToggle()}
+          onClick={handleToggle}
+          open={open}
+          aria-label={value.label}>
+          <Select.Value>
+            <Typography variant="body" size="small">
+              {value.label}
+            </Typography>
+          </Select.Value>
+
+          <Select.Icon className="SelectIcon">
+            <ChevronDownIcon size={12} />
+          </Select.Icon>
+        </SelectTrigger>
+        <Select.Portal container={container}>
+          <SelectContent>
+            <Select.ScrollUpButton className="SelectScrollButton">
+              <ChevronUpIcon />
+            </Select.ScrollUpButton>
+            <Select.Viewport className="SelectViewport">
+              <Select.Group>
+                {options.map(
+                  (option) =>
+                    option.value !== value?.value && (
+                      <SelectItem
+                        onClick={() => {
+                          handleItemClick && handleItemClick(option);
+                          handleToggle();
+                        }}
+                        key={option.value}
+                        value={option.value}>
+                        <Select.ItemText>
+                          <Typography variant="body" size="small">
+                            {option.label}
+                          </Typography>
+                        </Select.ItemText>
+                      </SelectItem>
+                    )
+                )}
+              </Select.Group>
+            </Select.Viewport>
+            <Select.ScrollDownButton className="SelectScrollButton">
+              <ChevronDownIcon />
+            </Select.ScrollDownButton>
+          </SelectContent>
+        </Select.Portal>
+      </Select.Root>
+    </div>
+  );
+}

package/src/components/Select/Select.types.ts

@@ -0,0 +1,10 @@
+type Item = {
+  value: string;
+  label: string;
+};
+export type PropTypes = {
+  options: Item[];
+  handleItemClick?: (item: Item) => void;
+  value: Item;
+  container?: HTMLElement;
+};

package/src/components/Select/index.ts

@@ -0,0 +1 @@
+export { SelectComponent as Select } from './Select';

package/src/components/Select/select.styles.ts

@@ -0,0 +1,100 @@
+import * as Select from '@radix-ui/react-select';
+
+import { darkTheme, styled } from '../../theme';
+
+export const EXPANDABLE_QUOTE_TRANSITION_DURATION = 300;
+
+export const SelectTrigger = styled(Select.Trigger, {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  cursor: 'pointer',
+  backgroundColor: '$secondary',
+  padding: '$5 $10',
+  border: 0,
+  whiteSpace: 'nowrap',
+
+  '& svg': {
+    transition: `all ${EXPANDABLE_QUOTE_TRANSITION_DURATION}ms ease`,
+  },
+
+  variants: {
+    open: {
+      true: {
+        borderTopLeftRadius: '$sm',
+        borderTopRightRadius: '$sm',
+        '& ._typography, & svg': {
+          color: '$secondary',
+        },
+
+        '& svg': {
+          transform: 'rotate(180deg)',
+        },
+        backgroundColor: '$neutral100',
+        [`.${darkTheme} &`]: {
+          backgroundColor: '$neutral300',
+        },
+      },
+      false: {
+        borderRadius: '$md',
+        '& ._typography, & svg': {
+          color: '$background',
+          [`.${darkTheme} &`]: {
+            color: '$foreground',
+          },
+        },
+        '& svg': {
+          transform: 'rotate(0)',
+        },
+      },
+    },
+  },
+  width: '100%',
+  '& ._typography': {
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    width: '52px',
+    '@xs': {
+      width: 'auto',
+    },
+  },
+});
+
+export const SelectContent = styled(Select.Content, {
+  padding: '$5 $10',
+  width: '100%',
+  position: 'absolute',
+  top: '38px',
+  maxHeight: '146px',
+  overflowY: 'auto',
+  borderBottomLeftRadius: '$sm',
+  borderBottomRightRadius: '$sm',
+  boxShadow: '-5px 5px 10px 0px rgba(86, 86, 86, 0.10)',
+  backgroundColor: '$neutral100',
+  [`.${darkTheme} &`]: {
+    backgroundColor: '$neutral300',
+  },
+});
+
+export const SelectItem = styled(Select.Item, {
+  padding: '$10 0',
+  borderTop: '1px solid',
+  borderColor: '$neutral300',
+  [`.${darkTheme} &`]: {
+    borderColor: '$neutral400',
+  },
+  listStyleType: 'none',
+  cursor: 'pointer',
+  '&:hover': {
+    '& ._typography': {
+      color: '$colors$secondary',
+    },
+  },
+  '&:focus': {
+    outline: 'none',
+    '& ._typography': {
+      color: '$colors$secondary',
+    },
+  },
+});

package/src/components/index.ts

@@ -51,3 +51,4 @@ export * from './TokenAmount';
 export * from './StepDetails';
 export * from './Popover';
 export * from './Flags';
+export * from './Select';

package/src/theme.ts

@@ -1,6 +1,6 @@
 // TSDX + stiches doesn't work with import statement and has a bug.
 
-import type { PropertyValue } from '@stitches/react';
+import type { PropertyValue, CSS as StitchesCSS } from '@stitches/react';
 import type { DefaultThemeMap } from '@stitches/react/types/config';
 
 import { createStitches } from '@stitches/react';
@@ -153,6 +153,7 @@ export const theme = {
     18: '18px',
     20: '20px',
     24: '24px',
+    26: '26px',
     28: '28px',
     30: '30px',
     32: '32px',
@@ -217,6 +218,8 @@ export const { styled, css, createTheme, keyframes, globalCss, config } =
     utils,
   });
 
+export type CSS = StitchesCSS<typeof config>;
+
 export const lightTheme = createTheme('light-theme-ui', {});
 
 export const darkTheme = createTheme('dark-theme-ui', {