@rango-dev/ui 0.22.1-next.6 → 0.22.1-next.7

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Alert/Alert.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAkGpB,CAAC;AAEH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAcf,CAAC;AAEH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DA+CxB,CAAC"}
+{"version":3,"file":"Alert.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Alert/Alert.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DA8FpB,CAAC;AAEH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAcf,CAAC;AAEH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DA+CxB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Checkbox/Checkbox.styles.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,aAAa,MAAM,0BAA0B,CAAC;AAI1D,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAG5B,CAAC;AAEH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAiBvB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAI5B,CAAC;AAEH,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAIhB,CAAC"}
+{"version":3,"file":"Checkbox.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Checkbox/Checkbox.styles.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,aAAa,MAAM,0BAA0B,CAAC;AAI1D,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAG5B,CAAC;AAEH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAqBvB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAI5B,CAAC;AAEH,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAIhB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ListItem/ListItem.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAiDvB,CAAC"}
+{"version":3,"file":"ListItem.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ListItem/ListItem.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAwDvB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Radio/Radio.styles.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,6BAA6B,CAAC;AAIrD,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAiBrB,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAe1B,CAAC"}
+{"version":3,"file":"Radio.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Radio/Radio.styles.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,6BAA6B,CAAC;AAIrD,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAoBrB,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAe1B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"RoutesOverview.d.ts","sourceRoot":"","sources":["../../../../../../src/components/RoutesOverview/RoutesOverview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAEnD,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAkBpB,CAAC;AAEH,UAAU,SAAS;IACjB,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AACD,wBAAgB,cAAc,CAAC,KAAK,EAAE,SAAS,4BA6B9C"}
+{"version":3,"file":"RoutesOverview.d.ts","sourceRoot":"","sources":["../../../../../../src/components/RoutesOverview/RoutesOverview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAEnD,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAsBpB,CAAC;AAEH,UAAU,SAAS;IACjB,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AACD,wBAAgB,cAAc,CAAC,KAAK,EAAE,SAAS,4BA6B9C"}

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Switch/Switch.styles.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,WAAW,MAAM,wBAAwB,CAAC;AAItD,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAuB3B,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAgB5B,CAAC"}
+{"version":3,"file":"Switch.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Switch/Switch.styles.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,WAAW,MAAM,wBAAwB,CAAC;AAItD,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DA2B3B,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAgB5B,CAAC"}

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

@@ -1,7 +1,7 @@
+import type { LoadingStatus } from '../../types/meta';
+import type { CSSProperties } from '@stitches/react';
+import type { BlockchainMeta } from 'rango-sdk';
 import React from 'react';
-import { BlockchainMeta } from 'rango-sdk';
-import { CSSProperties } from '@stitches/react';
-import { LoadingStatus } from '../../types/meta';
 export interface PropTypes {
     type?: 'Source' | 'Destination';
     list: BlockchainMeta[];

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

@@ -1 +1 @@
-{"version":3,"file":"BlockchainSelector.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/BlockchainSelector/BlockchainSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAK3C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAiBjD,MAAM,WAAW,SAAS;IACxB,IAAI,CAAC,EAAE,QAAQ,GAAG,aAAa,CAAC;IAChC,IAAI,EAAE,cAAc,EAAE,CAAC;IACvB,QAAQ,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IACjC,QAAQ,EAAE,CAAC,UAAU,EAAE,cAAc,KAAK,IAAI,CAAC;IAC/C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,EAAE,aAAa,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB,CAAC,EAAE,aAAa,CAAC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;CACzC;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,SAAS,qBAyDlD"}
+{"version":3,"file":"BlockchainSelector.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/BlockchainSelector/BlockchainSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAEhD,OAAO,KAAK,MAAM,OAAO,CAAC;AAuB1B,MAAM,WAAW,SAAS;IACxB,IAAI,CAAC,EAAE,QAAQ,GAAG,aAAa,CAAC;IAChC,IAAI,EAAE,cAAc,EAAE,CAAC;IACvB,QAAQ,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IACjC,QAAQ,EAAE,CAAC,UAAU,EAAE,cAAc,KAAK,IAAI,CAAC;IAC/C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,EAAE,aAAa,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB,CAAC,EAAE,aAAa,CAAC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;CACzC;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,SAAS,qBAwDlD"}

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,qBAkG9C"}
+{"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;AAY1B,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,qBA0F9C"}

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

@@ -762,4 +762,163 @@ export declare const MaxButton: import("@stitches/react/types/styled-component")
     zIndices: {};
     transitions: {};
 }, import("@stitches/react/types/config").DefaultThemeMap, {}>>;
+export declare const ValueTypography: import("@stitches/react/types/styled-component").StyledComponent<"div", {
+    hasWarning?: boolean | "true" | "false" | undefined;
+}, {
+    sm: string;
+    md: string;
+    lg: string;
+}, import("@stitches/react/types/css-util").CSS<{
+    sm: string;
+    md: string;
+    lg: string;
+}, {
+    colors: {
+        primary: string;
+        primary500: string;
+        primary600: string;
+        secondary: string;
+        secondary100: string;
+        secondary200: string;
+        secondary300: string;
+        secondary400: string;
+        secondary500: string;
+        secondary600: string;
+        secondary700: string;
+        secondary800: string;
+        secondary900: string;
+        neutral: 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;
+        info: 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, {}>>;
 //# sourceMappingURL=SwapInput.styles.d.ts.map

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAMpB,CAAC"}
+{"version":3,"file":"SwapInput.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/SwapInput/SwapInput.styles.ts"],"names":[],"mappings":";;;AAGA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAgDpB,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAUtB,CAAC;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAMpB,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAwB1B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"TokenSection.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/SwapInput/TokenSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAG9D,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBA2CpD"}
+{"version":3,"file":"TokenSection.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/SwapInput/TokenSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAG9D,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBA8CpD"}

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAwBpB,CAAC;AAEH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAmBhC,CAAC"}
+{"version":3,"file":"TokenSection.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/SwapInput/TokenSection.styles.ts"],"names":[],"mappings":";;;AAGA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAwBpB,CAAC;AAEH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DA0BhC,CAAC"}

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

@@ -1,6 +1,6 @@
+import type { TokenWithAmount } from '../../components/TokenList/TokenList';
+import type { LoadingStatus } from '../../types/meta';
 import React from 'react';
-import { LoadingStatus } from '../../types/meta';
-import { TokenWithAmount } from '../../components/TokenList/TokenList';
 export declare const LoaderContainer: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
     sm: string;
     md: 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,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAIjD,OAAO,EAEL,eAAe,EAChB,MAAM,sCAAsC,CAAC;AAE9C,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,qBAkC7C"}
+{"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/index.d.ts

@@ -4,5 +4,4 @@ export * from './theme';
 export * from './types';
 export * from './hooks';
 export * from './icons';
-export { generateRangeColors } from './helper';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/dist/widget/ui/src/{helper → utils}/index.d.ts

@@ -1,6 +1,3 @@
 export declare function containsText(text: string, searchText: string): boolean;
 export declare function getConciseAddress(address: string | null, maxChars?: number, ellipsisLength?: number): string | null;
-export declare const generateRangeColors: (name: string, mode: 'light' | 'dark', color?: string) => {
-    [x: string]: string | undefined;
-};
 //# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/utils/index.ts"],"names":[],"mappings":"AAEA,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,OAAO,CAEtE;AAED,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,MAAM,GAAG,IAAI,EACtB,QAAQ,SAAI,EACZ,cAAc,SAAI,GACjB,MAAM,GAAG,IAAI,CAYf"}

package/package.json

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

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

@@ -20,11 +20,7 @@ export const Container = styled('div', {
     paddingLeft: '$24',
   },
   '.description': {
-    $$color: '$colors$neutral700',
-    [`.${darkTheme} &`]: {
-      $$color: '$colors$neutral600',
-    },
-    color: '$$color',
+    color: '$neutral700',
     fontSize: '$10',
     lineHeight: '$12',
   },

package/src/components/Checkbox/Checkbox.styles.ts

@@ -13,7 +13,11 @@ export const CheckboxRoot = styled(RadixCheckbox.Root, {
   width: '1rem',
   height: '1rem',
   padding: 0,
-  border: '1px solid $neutral600',
+  $$borderColor: '$colors$neutral600',
+  [`.${darkTheme} &`]: {
+    $$borderColor: '$colors$neutral700',
+  },
+  border: '1px solid $$borderColor',
   backgroundColor: 'transparent',
   cursor: 'pointer',
   '&[data-state="checked"]': {

package/src/components/ListItem/ListItem.styles.ts

@@ -22,6 +22,13 @@ export const BaseListItem = styled('li', {
     flexShrink: 1,
     flexBasis: 'auto',
     textAlign: 'left',
+    '._description': {
+      $$color: '$colors$neutral600',
+      [`.${darkTheme} &`]: {
+        $$color: '$colors$neutral700',
+      },
+      color: '$$color',
+    },
 
     '.item-text-title': {
       fontWeight: 'bold',

package/src/components/ListItem/ListItem.tsx

@@ -16,7 +16,7 @@ function ListItem(props: ListItemProps) {
       <div className="item-text-container">
         {title && <div className="item-text-title">{title}</div>}
         {description && (
-          <Typography variant="body" size="small" color="neutral600">
+          <Typography variant="body" className="_description" size="small">
             {description}
           </Typography>
         )}

package/src/components/Radio/Radio.styles.tsx

@@ -9,8 +9,11 @@ export const StyledItem = styled(Radio.Item, {
   borderRadius: '100%',
   cursor: 'pointer',
   backgroundColor: 'transparent',
-  border: '1px solid $neutral600',
-
+  $$borderColor: '$colors$neutral600',
+  [`.${darkTheme} &`]: {
+    $$borderColor: '$colors$neutral700',
+  },
+  border: '1px solid $$borderColor',
   '&[data-state="checked"]': {
     $$color: '$colors$secondary500',
     [`.${darkTheme} &`]: {

package/src/components/RoutesOverview/RoutesOverview.tsx

@@ -2,7 +2,7 @@ import type { BestRouteResponse } from 'rango-sdk';
 
 import React from 'react';
 
-import { styled } from '../../theme';
+import { darkTheme, styled } from '../../theme';
 import { Divider } from '../Divider';
 import { AngleRightIcon, GasIcon } from '../Icon';
 
@@ -13,7 +13,11 @@ export const Container = styled('div', {
   padding: '$8',
   borderRadius: '$xs',
   backgroundColor: '$background',
-  color: '$neutral600',
+  $$color: '$colors$neutral600',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral700',
+  },
+  color: '$$color',
   fontSize: '$12',
 
   '.routes': {

package/src/components/SelectableWalletList/SelectableWalletList.tsx

@@ -2,8 +2,8 @@ import type { PropsWithChildren } from 'react';
 
 import React, { useEffect, useState } from 'react';
 
-import { getConciseAddress } from '../../helper';
 import { styled } from '../../theme';
+import { getConciseAddress } from '../../utils';
 import { Image } from '../common';
 import { Typography } from '../Typography';
 

package/src/components/SvgIcon/SvgIcon.style.ts

@@ -28,7 +28,7 @@ export const SvgWithColor = styled('svg', {
         color: '$info500',
       },
       gray: {
-        color: '$neutral600',
+        color: '$neutral700',
       },
     },
   },

package/src/components/Switch/Switch.styles.tsx

@@ -8,8 +8,12 @@ export const StyledSwitchRoot = styled(RadixSwitch.Root, {
   borderStyle: 'solid',
   width: '24px',
   height: '16px',
-  backgroundColor: '$neutral600',
-  borderColor: '$neutral600',
+  $$color: '$colors$neutral600',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral700',
+  },
+  backgroundColor: '$$color',
+  borderColor: '$$color',
   borderRadius: '99999px',
   position: 'relative',
   padding: '0',

package/src/containers/BlockchainSelector/BlockchainSelector.tsx

@@ -1,14 +1,16 @@
+import type { LoadingStatus } from '../../types/meta';
+import type { CSSProperties } from '@stitches/react';
+import type { BlockchainMeta } from 'rango-sdk';
+
 import React from 'react';
-import { BlockchainMeta } from 'rango-sdk';
+
+import { LoadingFailedAlert } from '../../components/Alert/LoadingFailedAlert';
+import { NotFoundAlert } from '../../components/Alert/NotFoundAlert';
 import { BlockchainsList } from '../../components/BlockchainsList';
 import { SecondaryPage } from '../../components/SecondaryPage/SecondaryPage';
 import { Spinner } from '../../components/Spinner';
 import { styled } from '../../theme';
-import { CSSProperties } from '@stitches/react';
-import { containsText } from '../../helper';
-import { LoadingStatus } from '../../types/meta';
-import { LoadingFailedAlert } from '../../components/Alert/LoadingFailedAlert';
-import { NotFoundAlert } from '../../components/Alert/NotFoundAlert';
+import { containsText } from '../../utils';
 import { LoaderContainer } from '../TokenSelector/TokenSelector';
 
 const ListContainer = styled('div', {
@@ -56,8 +58,7 @@ export function BlockchainSelector(props: PropTypes) {
       hasHeader={hasHeader}
       textFieldPlaceholder="Search blockchains by name"
       title={`Select ${type} Blockchain`}
-      onBack={onBack}
-    >
+      onBack={onBack}>
       {(searchedFor) => {
         const filteredBlockchains = filterBlockchains(list, searchedFor);
         return (

package/src/containers/SwapInput/SwapInput.styles.ts

@@ -17,6 +17,13 @@ export const Container = styled('div', {
       },
     },
   },
+  '& .gray-text': {
+    $$color: '$colors$neutral600',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral700',
+    },
+    color: '$$color',
+  },
   '& .label__container': {
     paddingBottom: '$5',
   },
@@ -62,3 +69,29 @@ export const MaxButton = styled(Button, {
   },
   backgroundColor: '$$color',
 });
+
+export const ValueTypography = styled('div', {
+  width: 140,
+  textAlign: 'right',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  variants: {
+    hasWarning: {
+      true: {
+        '& ._typography': {
+          color: '$warning500',
+        },
+      },
+      false: {
+        '& ._typography': {
+          $$color: '$colors$neutral600',
+          [`.${darkTheme} &`]: {
+            $$color: '$colors$neutral700',
+          },
+          color: '$$color',
+        },
+      },
+    },
+  },
+});

package/src/containers/SwapInput/SwapInput.tsx

@@ -5,7 +5,12 @@ import React from 'react';
 
 import { Divider, PriceImpact, Skeleton, Typography } from '../../components';
 
-import { Container, InputAmount, MaxButton } from './SwapInput.styles';
+import {
+  Container,
+  InputAmount,
+  MaxButton,
+  ValueTypography,
+} from './SwapInput.styles';
 import { TokenSection } from './TokenSection';
 
 export function SwapInput(props: SwapInputProps) {
@@ -13,13 +18,13 @@ export function SwapInput(props: SwapInputProps) {
     <Container sharpBottomStyle={props.sharpBottomStyle}>
       <div className="label__container">
         <div className="label">
-          <Typography variant="body" size="small" color="$neutral600">
+          <Typography variant="body" size="small" className="gray-text">
             {props.label}
           </Typography>
           {'balance' in props && !props.loading && (
             <div className="balance">
               <Typography
-                color="$neutral600"
+                className="gray-text"
                 mr={4}
                 variant="body"
                 size="xsmall">
@@ -84,21 +89,13 @@ export function SwapInput(props: SwapInputProps) {
                   warningLevel={props.warningLevel}
                 />
               ) : (
-                <Typography
-                  variant="body"
-                  size="medium"
-                  color={!props.price.error ? '$neutral600' : '$warning500'}
-                  style={{
-                    width: 140,
-                    textAlign: 'right',
-                    whiteSpace: 'nowrap',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                  }}>
-                  {props.price.usdValue
-                    ? `~$${props.price.usdValue}`
-                    : props.price.error}
-                </Typography>
+                <ValueTypography hasWarning={!!props.price.error}>
+                  <Typography variant="body" size="medium">
+                    {props.price.usdValue
+                      ? `~$${props.price.usdValue}`
+                      : props.price.error}
+                  </Typography>
+                </ValueTypography>
               )}
             </>
           )}

package/src/containers/SwapInput/TokenSection.styles.ts

@@ -36,6 +36,13 @@ export const TokenSectionContainer = styled('div', {
   boxSizing: 'border-box',
   alignItems: 'center',
 
+  '& .blockchain-name': {
+    $$color: '$colors$neutral600',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral700',
+    },
+    color: '$$color',
+  },
   '& .token-chain-name': {
     display: 'flex',
     flexDirection: 'column',

package/src/containers/SwapInput/TokenSection.tsx

@@ -41,7 +41,10 @@ export function TokenSection(props: TokenSectionProps) {
                   ? i18n.t('Token')
                   : tokenSymbol}
               </Typography>
-              <Typography variant="body" size="medium" color="$neutral600">
+              <Typography
+                variant="body"
+                size="medium"
+                className="blockchain-name">
                 {error || (!loading && !chain) ? i18n.t('Chain') : chain}
               </Typography>
             </>

package/src/containers/TokenSelector/TokenSelector.tsx

@@ -1,14 +1,13 @@
+import type { TokenWithAmount } from '../../components/TokenList/TokenList';
+import type { LoadingStatus } from '../../types/meta';
+
 import React from 'react';
-import { containsText } from '../../helper';
 
-import { LoadingStatus } from '../../types/meta';
-import { styled } from '../../theme';
-import { NotFoundAlert } from '../../components/Alert/NotFoundAlert';
 import { LoadingFailedAlert, SecondaryPage, Spinner } from '../../components';
-import {
-  TokenList,
-  TokenWithAmount,
-} from '../../components/TokenList/TokenList';
+import { NotFoundAlert } from '../../components/Alert/NotFoundAlert';
+import { TokenList } from '../../components/TokenList/TokenList';
+import { styled } from '../../theme';
+import { containsText } from '../../utils';
 
 export const LoaderContainer = styled('div', {
   display: 'flex',
@@ -45,8 +44,7 @@ export function TokenSelector(props: PropTypes) {
       hasHeader={hasHeader}
       title={`Select ${type} token`}
       onBack={onBack}
-      textFieldPlaceholder="Search tokens by name"
-    >
+      textFieldPlaceholder="Search tokens by name">
       {(searchedFor) => {
         const filteredTokens = filterTokens(list, searchedFor);
 

package/src/index.ts

@@ -4,4 +4,3 @@ export * from './theme';
 export * from './types';
 export * from './hooks';
 export * from './icons';
-export { generateRangeColors } from './helper';