@rango-dev/ui 0.26.1-next.1 → 0.26.1-next.10

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

@@ -129,12 +129,14 @@ export declare const theme: {
         4: string;
         6: string;
         8: string;
+        10: string;
         12: string;
         16: string;
         18: string;
         20: string;
         24: string;
         28: string;
+        30: string;
         32: string;
         36: string;
         40: string;
@@ -172,6 +174,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<{
+    xs: string;
     sm: string;
     md: string;
     lg: string;
@@ -304,12 +307,14 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
         4: string;
         6: string;
         8: string;
+        10: string;
         12: string;
         16: string;
         18: string;
         20: string;
         24: string;
         28: string;
+        30: string;
         32: string;
         36: string;
         40: string;
@@ -335,10 +340,12 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
     })[] | 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>, {
+    xs: string;
     sm: string;
     md: string;
     lg: string;
 }, import("@stitches/react/types/css-util").CSS<{
+    xs: string;
     sm: string;
     md: string;
     lg: string;
@@ -471,12 +478,14 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
         4: string;
         6: string;
         8: string;
+        10: string;
         12: string;
         16: string;
         18: string;
         20: string;
         24: string;
         28: string;
+        30: string;
         32: string;
         36: string;
         40: string;
@@ -493,6 +502,7 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
 }, 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<{
+    xs: string;
     sm: string;
     md: string;
     lg: string;
@@ -625,12 +635,14 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
         4: string;
         6: string;
         8: string;
+        10: string;
         12: string;
         16: string;
         18: string;
         20: string;
         24: string;
         28: string;
+        30: string;
         32: string;
         36: string;
         40: string;
@@ -656,6 +668,7 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
     })[] | 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>, {
+    xs: string;
     sm: string;
     md: string;
     lg: string;
@@ -788,12 +801,14 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
         4?: string | number | boolean | undefined;
         6?: string | number | boolean | undefined;
         8?: string | number | boolean | undefined;
+        10?: string | number | boolean | undefined;
         12?: string | number | boolean | undefined;
         16?: string | number | boolean | undefined;
         18?: string | number | boolean | undefined;
         20?: string | number | boolean | undefined;
         24?: string | number | boolean | undefined;
         28?: string | number | boolean | undefined;
+        30?: string | number | boolean | undefined;
         32?: string | number | boolean | undefined;
         36?: string | number | boolean | undefined;
         40?: string | number | boolean | undefined;
@@ -941,12 +956,14 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
         4?: string | number | boolean | undefined;
         6?: string | number | boolean | undefined;
         8?: string | number | boolean | undefined;
+        10?: string | number | boolean | undefined;
         12?: string | number | boolean | undefined;
         16?: string | number | boolean | undefined;
         18?: string | number | boolean | undefined;
         20?: string | number | boolean | undefined;
         24?: string | number | boolean | undefined;
         28?: string | number | boolean | undefined;
+        30?: string | number | boolean | undefined;
         32?: string | number | boolean | undefined;
         36?: string | number | boolean | undefined;
         40?: string | number | boolean | undefined;
@@ -970,6 +987,7 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
     selector: string;
 } & (Argument0 extends string ? import("@stitches/react/types/stitches").ThemeTokens<Argument1, ""> : import("@stitches/react/types/stitches").ThemeTokens<Argument0, "">), keyframes: (style: {
     [offset: string]: import("@stitches/react/types/css-util").CSS<{
+        xs: string;
         sm: string;
         md: string;
         lg: string;
@@ -1102,12 +1120,14 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
             4: string;
             6: string;
             8: string;
+            10: string;
             12: string;
             16: string;
             18: string;
             20: string;
             24: string;
             28: string;
+            30: string;
             32: string;
             36: string;
             40: string;
@@ -1132,6 +1152,7 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
     '@font-face'?: unknown;
 } & { [K in keyof Styles]: K extends "@import" ? string | string[] : K extends "@font-face" ? import("@stitches/react/types/css").AtRule.FontFace | import("@stitches/react/types/css").AtRule.FontFace[] : K extends `@keyframes ${string}` ? {
     [x: string]: import("@stitches/react/types/css-util").CSS<{
+        xs: string;
         sm: string;
         md: string;
         lg: string;
@@ -1264,12 +1285,14 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
             4: string;
             6: string;
             8: string;
+            10: string;
             12: string;
             16: string;
             18: string;
             20: string;
             24: string;
             28: string;
+            30: string;
             32: string;
             36: string;
             40: string;
@@ -1285,6 +1308,7 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
         transitions: {};
     }, DefaultThemeMap, {}>;
 } : K extends `@property ${string}` ? import("@stitches/react/types/css").AtRule.Property : import("@stitches/react/types/css-util").CSS<{
+    xs: string;
     sm: string;
     md: string;
     lg: string;
@@ -1417,12 +1441,14 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
         4: string;
         6: string;
         8: string;
+        10: string;
         12: string;
         16: string;
         18: string;
         20: string;
         24: string;
         28: string;
+        30: string;
         32: string;
         36: string;
         40: string;
@@ -1439,6 +1465,7 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
 }, DefaultThemeMap, {}>; })[]) => () => string, config: {
     prefix: "";
     media: {
+        xs: string;
         sm: string;
         md: string;
         lg: string;
@@ -1572,12 +1599,14 @@ export declare const styled: <Type extends import("react").ComponentType<any> |
             4: string;
             6: string;
             8: string;
+            10: string;
             12: string;
             16: string;
             18: string;
             20: string;
             24: string;
             28: string;
+            30: string;
             32: string;
             36: string;
             40: 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+JjB,CAAC;AAYF,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":";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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.26.1-next.1",
+  "version": "0.26.1-next.10",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -65,7 +65,7 @@
     "@radix-ui/react-radio-group": "^1.1.1",
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-tooltip": "^1.0.2",
-    "@rango-dev/wallets-shared": "^0.25.1-next.0",
+    "@rango-dev/wallets-shared": "^0.25.1-next.1",
     "@stitches/react": "^1.2.8",
     "rango-sdk": "^0.1.44",
     "rango-types": "^0.1.57",

package/src/components/Button/Button.tsx

@@ -16,9 +16,12 @@ function ButtonComponent(props: PropsWithChildren<PropTypes>, ref?: Ref) {
     prefix,
     suffix,
     onClick,
+    disableRipple,
     ...otherProps
   } = props;
 
+  const shouldShowRipple = !disabled && !loading && !disableRipple;
+
   return (
     <ButtonBase
       disabled={!loading && disabled}
@@ -38,7 +41,7 @@ function ButtonComponent(props: PropsWithChildren<PropTypes>, ref?: Ref) {
           {suffix}
         </>
       )}
-      {!disabled && !loading && <Ripple />}
+      {shouldShowRipple && <Ripple />}
     </ButtonBase>
   );
 }

package/src/components/Button/Button.types.tsx

@@ -24,4 +24,5 @@ export type PropTypes = ButtonElement & {
   prefix?: React.ReactNode;
   suffix?: React.ReactNode;
   fullWidth?: boolean;
+  disableRipple?: boolean;
 };

package/src/components/Divider/Divider.styles.ts

@@ -0,0 +1,165 @@
+import { styled } from '../../theme';
+
+export const DividerContainer = styled('div', {
+  flexShrink: 0,
+  variants: {
+    size: {
+      4: {},
+      8: {},
+      10: {},
+      12: {},
+      16: {},
+      18: {},
+      20: {},
+      24: {},
+      30: {},
+      32: {},
+    },
+    direction: {
+      vertical: {},
+      horizontal: {},
+    },
+  },
+  compoundVariants: [
+    {
+      size: 4,
+      direction: 'horizontal',
+      css: {
+        width: '$4',
+      },
+    },
+    {
+      size: 4,
+      direction: 'vertical',
+      css: {
+        height: '$4',
+      },
+    },
+    {
+      size: 8,
+      direction: 'horizontal',
+      css: {
+        width: '$8',
+      },
+    },
+    {
+      size: 8,
+      direction: 'vertical',
+      css: {
+        height: '$8',
+      },
+    },
+    {
+      size: 10,
+      direction: 'horizontal',
+      css: {
+        width: '$10',
+      },
+    },
+    {
+      size: 10,
+      direction: 'vertical',
+      css: {
+        height: '$10',
+      },
+    },
+    {
+      size: 12,
+      direction: 'horizontal',
+      css: {
+        width: '$12',
+      },
+    },
+    {
+      size: 12,
+      direction: 'vertical',
+      css: {
+        height: '$12',
+      },
+    },
+    {
+      size: 16,
+      direction: 'horizontal',
+      css: {
+        width: '$16',
+      },
+    },
+    {
+      size: 16,
+      direction: 'vertical',
+      css: {
+        height: '$16',
+      },
+    },
+    {
+      size: 18,
+      direction: 'horizontal',
+      css: {
+        width: '$18',
+      },
+    },
+    {
+      size: 18,
+      direction: 'vertical',
+      css: {
+        height: '$18',
+      },
+    },
+    {
+      size: 20,
+      direction: 'horizontal',
+      css: {
+        width: '$20',
+      },
+    },
+    {
+      size: 20,
+      direction: 'vertical',
+      css: {
+        height: '$20',
+      },
+    },
+    {
+      size: 24,
+      direction: 'horizontal',
+      css: {
+        width: '$24',
+      },
+    },
+    {
+      size: 24,
+      direction: 'vertical',
+      css: {
+        height: '$24',
+      },
+    },
+    {
+      size: 30,
+      direction: 'horizontal',
+      css: {
+        width: '$30',
+      },
+    },
+    {
+      size: 30,
+      direction: 'vertical',
+      css: {
+        height: '$30',
+      },
+    },
+    {
+      size: 32,
+      direction: 'horizontal',
+      css: {
+        width: '$32',
+      },
+    },
+    {
+      size: 32,
+      direction: 'vertical',
+      css: {
+        height: '$32',
+      },
+    },
+  ],
+});

package/src/components/Divider/Divider.tsx

@@ -1,146 +1,14 @@
-/* eslint-disable @typescript-eslint/no-magic-numbers */
+import type { PropTypes } from './Divider.types';
+
 import React from 'react';
 
-import { styled } from '../../theme';
+import { DividerContainer } from './Divider.styles';
 
-const DividerContainer = styled('div', {
-  flexShrink: 0,
-  variants: {
-    size: {
-      4: {},
-      8: {},
-      12: {},
-      16: {},
-      18: {},
-      20: {},
-      24: {},
-      32: {},
-    },
-    direction: {
-      vertical: {},
-      horizontal: {},
-    },
-  },
-  compoundVariants: [
-    {
-      size: 4,
-      direction: 'horizontal',
-      css: {
-        width: '$4',
-      },
-    },
-    {
-      size: 4,
-      direction: 'vertical',
-      css: {
-        height: '$4',
-      },
-    },
-    {
-      size: 8,
-      direction: 'horizontal',
-      css: {
-        width: '$8',
-      },
-    },
-    {
-      size: 8,
-      direction: 'vertical',
-      css: {
-        height: '$8',
-      },
-    },
-    {
-      size: 12,
-      direction: 'horizontal',
-      css: {
-        width: '$12',
-      },
-    },
-    {
-      size: 12,
-      direction: 'vertical',
-      css: {
-        height: '$12',
-      },
-    },
-    {
-      size: 16,
-      direction: 'horizontal',
-      css: {
-        width: '$16',
-      },
-    },
-    {
-      size: 16,
-      direction: 'vertical',
-      css: {
-        height: '$16',
-      },
-    },
-    {
-      size: 18,
-      direction: 'horizontal',
-      css: {
-        width: '$18',
-      },
-    },
-    {
-      size: 18,
-      direction: 'vertical',
-      css: {
-        height: '$18',
-      },
-    },
-    {
-      size: 20,
-      direction: 'horizontal',
-      css: {
-        width: '$20',
-      },
-    },
-    {
-      size: 20,
-      direction: 'vertical',
-      css: {
-        height: '$20',
-      },
-    },
-    {
-      size: 24,
-      direction: 'horizontal',
-      css: {
-        width: '$24',
-      },
-    },
-    {
-      size: 24,
-      direction: 'vertical',
-      css: {
-        height: '$24',
-      },
-    },
-    {
-      size: 32,
-      direction: 'horizontal',
-      css: {
-        width: '$32',
-      },
-    },
-    {
-      size: 32,
-      direction: 'vertical',
-      css: {
-        height: '$32',
-      },
-    },
-  ],
-});
-export interface PropTypes {
-  size?: 4 | 8 | 12 | 16 | 18 | 20 | 24 | 32;
-  direction?: 'vertical' | 'horizontal';
-}
+const Default_Size = 12;
 
-export function Divider({ size = 12, direction = 'vertical' }: PropTypes) {
+export function Divider({
+  size = Default_Size,
+  direction = 'vertical',
+}: PropTypes) {
   return <DividerContainer size={size} direction={direction} />;
 }

package/src/components/Divider/Divider.types.ts

@@ -0,0 +1,10 @@
+import type { DividerContainer } from './Divider.styles';
+import type * as Stitches from '@stitches/react';
+
+type BaseProps = Stitches.VariantProps<typeof DividerContainer>;
+type BaseSizes = Exclude<BaseProps['size'], object>;
+
+export interface PropTypes {
+  size?: BaseSizes;
+  direction?: 'vertical' | 'horizontal';
+}

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

@@ -1,4 +1,4 @@
-import { css, styled } from '../../theme';
+import { css, keyframes, styled } from '../../theme';
 
 export const Container = styled('div', {
   borderRadius: '$xs',
@@ -23,7 +23,34 @@ export const iconStyles = css({
   alignItems: 'center',
 });
 
+const blinker = keyframes({
+  '50%': {
+    opacity: 0.2,
+  },
+});
+
 export const itemStyles = css({
   display: 'flex',
   alignItems: 'center',
+  '&.feeSection': {
+    cursor: 'pointer',
+    '&:hover': {
+      svg: {
+        color: '$secondary',
+      },
+      '._typography': {
+        color: '$secondary',
+      },
+    },
+  },
+  '&.warning': {
+    animation: `${blinker} 2s linear infinite`,
+
+    svg: {
+      color: '$warning500',
+    },
+    '._typography': {
+      color: '$warning500',
+    },
+  },
 });

package/src/components/QuoteCost/QuoteCost.tsx

@@ -3,6 +3,7 @@ import type { PropTypes } from './QuoteCost.types';
 import React from 'react';
 
 import { GasIcon, NumberIcon, TimeIcon } from '../../icons';
+import { Tooltip } from '../Tooltip';
 import { Typography } from '../Typography';
 
 import {
@@ -13,17 +14,36 @@ import {
 } from './QuoteCost.styles';
 
 export function QuoteCost(props: PropTypes) {
-  const { fee, time, steps } = props;
+  const {
+    fee,
+    time,
+    steps,
+    onClickFee,
+    tooltipGas,
+    feeWarning,
+    tooltipContainer,
+  } = props;
   return (
     <Container>
-      <div className={itemStyles()}>
-        <div className={iconStyles()}>
-          <GasIcon size={12} color={'gray'} />
+      <Tooltip
+        container={tooltipContainer}
+        content={tooltipGas}
+        open={!onClickFee && !tooltipGas ? false : undefined}
+        side="bottom">
+        <div
+          className={`${itemStyles()} ${onClickFee ? 'feeSection' : ''} ${
+            feeWarning ? 'warning' : ''
+          }`}
+          onClick={onClickFee}>
+          <div className={iconStyles()}>
+            <GasIcon size={12} color={'gray'} />
+          </div>
+          <Typography ml={2} align="center" variant="body" size="small">
+            ${fee}
+          </Typography>
         </div>
-        <Typography ml={2} align="center" variant="body" size="small">
-          ${fee}
-        </Typography>
-      </div>
+      </Tooltip>
+
       <Separator />
       <div className={itemStyles()}>
         <div className={iconStyles()}>