@rango-dev/ui 0.15.1-next.7 → 0.15.1-next.8

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

@@ -1 +1 @@
-{"version":3,"file":"BestRoute.d.ts","sourceRoot":"","sources":["../../../../../../src/components/BestRoute/BestRoute.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD,OAAO,KAA4C,MAAM,OAAO,CAAC;AAuBjE,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,qBAqK9C"}
+{"version":3,"file":"BestRoute.d.ts","sourceRoot":"","sources":["../../../../../../src/components/BestRoute/BestRoute.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD,OAAO,KAA4C,MAAM,OAAO,CAAC;AAuBjE,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,qBA+I9C"}

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

@@ -1 +1 @@
-{"version":3,"file":"BestRoute.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/BestRoute/BestRoute.styles.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,WAAW,MAAM,6BAA6B,CAAC;AAK3D,eAAO,MAAM,qCAAqC,MAAM,CAAC;AAEzD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DA4BzB,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DA0C3B,CAAC;AAEH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAyCjB,CAAC;AAEH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAElB,CAAC;AAEH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAgBxB,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAKpB,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAK9B,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAMpB,CAAC"}
+{"version":3,"file":"BestRoute.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/BestRoute/BestRoute.styles.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,WAAW,MAAM,6BAA6B,CAAC;AAK3D,eAAO,MAAM,qCAAqC,MAAM,CAAC;AAEzD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAyBzB,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DA4C3B,CAAC;AAEH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAyCjB,CAAC;AAEH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAElB,CAAC;AAEH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAgBxB,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAKpB,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAK9B,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAMpB,CAAC"}

package/dist/widget/ui/src/components/BestRoute/RouteSummary.d.ts

@@ -0,0 +1,12 @@
+import type { Step } from './BestRoute.types';
+import type { PriceImpactWarningLevel } from '../PriceImpact';
+import React from 'react';
+type PropTypes = {
+    from: Step['from'];
+    to: Step['to'];
+    percentageChange?: string | null;
+    warningLevel: PriceImpactWarningLevel;
+};
+export declare function RouteSummary(props: PropTypes): React.JSX.Element;
+export {};
+//# sourceMappingURL=RouteSummary.d.ts.map

package/dist/widget/ui/src/components/BestRoute/RouteSummary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RouteSummary.d.ts","sourceRoot":"","sources":["../../../../../../src/components/BestRoute/RouteSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AAE9D,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IACnB,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IACf,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,YAAY,EAAE,uBAAuB,CAAC;CACvC,CAAC;AAEF,wBAAgB,YAAY,CAAC,KAAK,EAAE,SAAS,qBA+B5C"}

package/dist/widget/ui/src/components/BestRoute/RouteSummary.styles.d.ts

@@ -0,0 +1,149 @@
+export declare const Container: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
+    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;
+    };
+    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: {};
+    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=RouteSummary.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RouteSummary.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/BestRoute/RouteSummary.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAYpB,CAAC"}

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

@@ -1,4 +1,5 @@
 export { BestRoute } from './BestRoute';
 export type { Step } from './BestRoute.types';
 export { BestRouteSkeleton } from './BestRouteSkeleton';
+export { RouteSummary } from './RouteSummary';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/BestRoute/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/BestRoute/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAsC,MAAM,OAAO,CAAC;AAwB3D,wBAAgB,KAAK,CAAC,KAAK,EAAE,iBAAiB,CAAC,SAAS,CAAC,qBA2GxD"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAsC,MAAM,OAAO,CAAC;AAwB3D,wBAAgB,KAAK,CAAC,KAAK,EAAE,iBAAiB,CAAC,SAAS,CAAC,qBAyGxD"}

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

@@ -1,5 +1,5 @@
 import type { PropTypes } from './Tooltip.types';
 import type { PropsWithChildren } from 'react';
 import React from 'react';
-export declare function Tooltip({ children, content, side, color, }: PropsWithChildren<PropTypes>): React.JSX.Element;
+export declare function Tooltip(props: PropsWithChildren<PropTypes>): React.JSX.Element;
 //# sourceMappingURL=Tooltip.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG/C,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,OAAO,EACP,IAAY,EACZ,KAAK,GACN,EAAE,iBAAiB,CAAC,SAAS,CAAC,qBA4C9B"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,wBAAgB,OAAO,CAAC,KAAK,EAAE,iBAAiB,CAAC,SAAS,CAAC,qBAyB1D"}

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

@@ -1,7 +1,12 @@
-import type { ReactNode } from 'react';
+import type * as RadixTooltip from '@radix-ui/react-tooltip';
+import type { ComponentProps, ReactNode } from 'react';
+type RadixTooltipContentProps = ComponentProps<typeof RadixTooltip.Content>;
 export interface PropTypes {
     content: ReactNode;
-    side?: 'top' | 'right' | 'bottom' | 'left';
+    side?: RadixTooltipContentProps['side'];
     color?: 'primary' | 'error' | 'warning' | 'success';
+    sideOffset?: RadixTooltipContentProps['sideOffset'];
+    container?: HTMLElement;
 }
+export {};
 //# sourceMappingURL=Tooltip.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Tooltip/Tooltip.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,SAAS,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;CACrD"}
+{"version":3,"file":"Tooltip.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Tooltip/Tooltip.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,YAAY,MAAM,yBAAyB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,KAAK,wBAAwB,GAAG,cAAc,CAAC,OAAO,YAAY,CAAC,OAAO,CAAC,CAAC;AAE5E,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,SAAS,CAAC;IACnB,IAAI,CAAC,EAAE,wBAAwB,CAAC,MAAM,CAAC,CAAC;IACxC,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;IACpD,UAAU,CAAC,EAAE,wBAAwB,CAAC,YAAY,CAAC,CAAC;IACpD,SAAS,CAAC,EAAE,WAAW,CAAC;CACzB"}

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAqCpB,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAOtB,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAqCpB,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAUtB,CAAC;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAMpB,CAAC"}

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

package/dist/widget/ui/src/hooks/usePaddingRight.d.ts

@@ -1,5 +1,6 @@
+import type { MutableRefObject } from 'react';
 type Params = {
-    element: HTMLElement | null;
+    elementRef: MutableRefObject<HTMLElement | null>;
     paddingRight: string;
 };
 export declare function usePaddingRight(params: Params): void;

package/dist/widget/ui/src/hooks/usePaddingRight.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePaddingRight.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/usePaddingRight.ts"],"names":[],"mappings":"AAEA,KAAK,MAAM,GAAG;IACZ,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAMF,wBAAgB,eAAe,CAAC,MAAM,EAAE,MAAM,QA0B7C"}
+{"version":3,"file":"usePaddingRight.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/usePaddingRight.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAI9C,KAAK,MAAM,GAAG;IACZ,UAAU,EAAE,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACjD,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAMF,wBAAgB,eAAe,CAAC,MAAM,EAAE,MAAM,QA2B7C"}

package/package.json

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

package/src/components/BestRoute/BestRoute.styles.ts

@@ -7,9 +7,6 @@ export const EXPANDABLE_ROUTES_TRANSITION_DURATION = 300;
 
 export const RouteContainer = styled(Collapsible.Root, {
   display: 'flex',
-  position: 'absolute',
-  top: 'calc(100% - 36px)',
-  left: '$0',
   flexDirection: 'column',
   alignItems: 'start',
   overflowX: 'auto',
@@ -44,7 +41,6 @@ export const SummaryContainer = styled('div', {
   color: '$foreground',
   cursor: 'pointer',
   boxSizing: 'border-box',
-  padding: '$15 $15 $46  $15',
   position: 'relative',
   variants: {
     recommended: {
@@ -71,7 +67,10 @@ export const SummaryContainer = styled('div', {
     },
     basic: { true: { borderTopRightRadius: '0', borderTopLeftRadius: '0' } },
   },
-  '& .summary': { width: '100%' },
+  '& .summary': {
+    width: '100%',
+    padding: '$15 $15 $10 $15',
+  },
   '& .basic-info': {
     paddingTop: '$10',
     display: 'flex',

package/src/components/BestRoute/BestRoute.tsx

@@ -19,9 +19,9 @@ import {
   HorizontalSeparator,
   IconContainer,
   RouteContainer,
-  Separator,
   SummaryContainer,
 } from './BestRoute.styles';
+import { RouteSummary } from './RouteSummary';
 
 export function BestRoute(props: BestRouteProps) {
   const {
@@ -92,35 +92,9 @@ export function BestRoute(props: BestRouteProps) {
           )}
           {type === 'swap-preview' && (
             <>
-              <TokenAmount
-                direction="horizontal"
-                label="Swap input"
-                type="input"
-                price={{ value: input.value, usdValue: input.usdValue }}
-                token={{
-                  displayName: steps[0].from.token.displayName,
-                  image: steps[0].from.token.image,
-                }}
-                chain={{ image: steps[0].from.chain.image }}
-              />
-              <Separator
-                css={{
-                  height: '$32',
-                  marginLeft: '14px',
-                  position: 'absolute',
-                  top: '85px',
-                }}
-              />
-              <TokenAmount
-                direction="horizontal"
-                label="Estimated output"
-                type="output"
-                price={{ value: output.value, usdValue: output.usdValue }}
-                token={{
-                  displayName: steps[numberOfSteps - 1].to.token.displayName,
-                  image: steps[numberOfSteps - 1].to.token.image,
-                }}
-                chain={{ image: steps[numberOfSteps - 1].to.chain.image }}
+              <RouteSummary
+                from={steps[0].from}
+                to={steps[numberOfSteps - 1].to}
                 percentageChange={percentageChange}
                 warningLevel={warningLevel}
               />
@@ -141,7 +115,9 @@ export function BestRoute(props: BestRouteProps) {
                 const key = `item-${index}`;
                 return (
                   <React.Fragment key={key}>
-                    <Tooltip content={step.from.chain.displayName}>
+                    <Tooltip
+                      sideOffset={2}
+                      content={step.from.chain.displayName}>
                       <Image src={step.from.chain.image} size={16} />
                     </Tooltip>
                     {index === numberOfSteps - 1 && (
@@ -149,7 +125,9 @@ export function BestRoute(props: BestRouteProps) {
                         <IconContainer>
                           <ChevronRightIcon size={12} color="black" />
                         </IconContainer>
-                        <Tooltip content={step.to.chain.displayName}>
+                        <Tooltip
+                          sideOffset={2}
+                          content={step.to.chain.displayName}>
                           <Image src={step.to.chain.image} size={16} />
                         </Tooltip>
                       </>

package/src/components/BestRoute/BestRouteSkeleton.styles.ts

@@ -22,7 +22,7 @@ export const Container = styled('div', {
     display: 'flex',
   },
   '& .basic-summary': {
-    padding: '$15 $0',
+    padding: '$15 $0 14px $0',
   },
   '& .output': {
     padding: '$6 $0 $15 $0',

package/src/components/BestRoute/RouteSummary.styles.ts

@@ -0,0 +1,15 @@
+import { styled } from '../../theme';
+
+export const Container = styled('div', {
+  position: 'relative',
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%',
+  '& .separator': {
+    height: '14px',
+    marginLeft: '14px',
+    position: 'absolute',
+    borderLeft: '1px solid $foreground',
+    top: '42%',
+  },
+});

package/src/components/BestRoute/RouteSummary.tsx

@@ -0,0 +1,48 @@
+import type { Step } from './BestRoute.types';
+import type { PriceImpactWarningLevel } from '../PriceImpact';
+
+import React from 'react';
+
+import { TokenAmount } from '../TokenAmount';
+
+import { Container } from './RouteSummary.styles';
+
+type PropTypes = {
+  from: Step['from'];
+  to: Step['to'];
+  percentageChange?: string | null;
+  warningLevel: PriceImpactWarningLevel;
+};
+
+export function RouteSummary(props: PropTypes) {
+  const { from, to, percentageChange, warningLevel } = props;
+  return (
+    <Container>
+      <TokenAmount
+        direction="horizontal"
+        label="Swap input"
+        type="input"
+        price={{ value: from.price.value, usdValue: from.price.usdValue }}
+        token={{
+          displayName: from.token.displayName,
+          image: from.token.image,
+        }}
+        chain={{ image: from.chain.image }}
+      />
+      <div className="separator" />
+      <TokenAmount
+        direction="horizontal"
+        label="Estimated output"
+        type="output"
+        price={{ value: to.price.value, usdValue: to.price.usdValue }}
+        token={{
+          displayName: to.token.displayName,
+          image: to.token.image,
+        }}
+        chain={{ image: to.chain.image }}
+        percentageChange={percentageChange}
+        warningLevel={warningLevel}
+      />
+    </Container>
+  );
+}

package/src/components/BestRoute/index.ts

@@ -1,3 +1,4 @@
 export { BestRoute } from './BestRoute';
 export type { Step } from './BestRoute.types';
 export { BestRouteSkeleton } from './BestRouteSkeleton';
+export { RouteSummary } from './RouteSummary';

package/src/components/Modal/Modal.tsx

@@ -46,7 +46,7 @@ export function Modal(props: PropsWithChildren<PropTypes>) {
   const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const contentRef = useRef<HTMLDivElement | null>(null);
   usePaddingRight({
-    element: contentRef.current,
+    elementRef: contentRef,
     paddingRight: theme.sizes[DEFAULT_CONTENT_PADDING],
   });
 
@@ -112,9 +112,7 @@ export function Modal(props: PropsWithChildren<PropTypes>) {
                   </Flex>
                 </ModalHeader>
               )}
-              <Content ref={(ref) => (contentRef.current = ref)}>
-                {children}
-              </Content>
+              <Content ref={contentRef}>{children}</Content>
               {(hasLogo || footer) && (
                 <Footer>
                   <div className="footer__content">{footer}</div>

package/src/components/TokenAmount/TokenAmount.tsx

@@ -23,17 +23,17 @@ export function TokenAmount(props: PropTypes) {
               {props.label}
             </Typography>
           )}
-          <div>
+          <div title={`${props.price.value} ${props.token.displayName}`}>
             <Typography
               ml={4}
-              size="large"
+              size="medium"
               variant="title"
               style={{ fontWeight: 600 }}>
               {props.price.value}
             </Typography>
             <Typography
               ml={8}
-              size="large"
+              size="medium"
               variant="title"
               style={{ fontWeight: 400 }}>
               {props.token.displayName}

package/src/components/Tooltip/Tooltip.tsx

@@ -2,58 +2,33 @@ import type { PropTypes } from './Tooltip.types';
 import type { PropsWithChildren } from 'react';
 
 import * as RadixTooltip from '@radix-ui/react-tooltip';
-import React, { useState } from 'react';
+import React from 'react';
 
 import { TooltipTypography } from './Tooltip.styles';
-import useEventListener from './useEventListener';
 
-export function Tooltip({
-  children,
-  content,
-  side = 'top',
-  color,
-}: PropsWithChildren<PropTypes>) {
-  const [open, setOpen] = useState<boolean>(false);
-  const [{ clientX, clientY }, setPosition] = useState({
-    clientX: 0,
-    clientY: 0,
-  });
-  useEventListener('mousemove', ({ clientX, clientY }) =>
-    setPosition({ clientX, clientY })
-  );
+export function Tooltip(props: PropsWithChildren<PropTypes>) {
+  const {
+    children,
+    content,
+    color,
+    sideOffset,
+    container,
+    side = 'top',
+  } = props;
   return (
-    <>
-      <div
-        style={{ display: 'contents' }}
-        onMouseOver={() => setOpen(true)}
-        onMouseOut={() => setOpen(false)}>
-        {children}
-      </div>
-      <RadixTooltip.Provider>
-        <RadixTooltip.Root open={open}>
-          <RadixTooltip.Trigger asChild>
-            <div
-              style={{
-                position: 'fixed',
-                pointerEvents: 'none',
-                top: `${clientY}px`,
-                left: `${clientX}px`,
-              }}
-            />
-          </RadixTooltip.Trigger>
-          <RadixTooltip.Content
-            key={`${clientX}${clientY}`}
-            sideOffset={20}
-            style={{
-              zIndex: 9999999,
-            }}
-            side={side}>
+    <RadixTooltip.Provider>
+      <RadixTooltip.Root>
+        <RadixTooltip.Trigger asChild>
+          <div>{children}</div>
+        </RadixTooltip.Trigger>
+        <RadixTooltip.Portal container={container}>
+          <RadixTooltip.Content side={side} sideOffset={sideOffset}>
             <TooltipTypography variant="label" size="medium" color={color}>
               {content}
             </TooltipTypography>
           </RadixTooltip.Content>
-        </RadixTooltip.Root>
-      </RadixTooltip.Provider>
-    </>
+        </RadixTooltip.Portal>
+      </RadixTooltip.Root>
+    </RadixTooltip.Provider>
   );
 }

package/src/components/Tooltip/Tooltip.types.ts

@@ -1,7 +1,12 @@
-import type { ReactNode } from 'react';
+import type * as RadixTooltip from '@radix-ui/react-tooltip';
+import type { ComponentProps, ReactNode } from 'react';
+
+type RadixTooltipContentProps = ComponentProps<typeof RadixTooltip.Content>;
 
 export interface PropTypes {
   content: ReactNode;
-  side?: 'top' | 'right' | 'bottom' | 'left';
+  side?: RadixTooltipContentProps['side'];
   color?: 'primary' | 'error' | 'warning' | 'success';
+  sideOffset?: RadixTooltipContentProps['sideOffset'];
+  container?: HTMLElement;
 }

package/src/components/Wallet/ClickableWallet.tsx

@@ -36,7 +36,7 @@ function Wallet(props: WalletPropTypes) {
   }
 
   return (
-    <Tooltip content={info.tooltipText} side="bottom">
+    <Tooltip content={info.tooltipText} side="top">
       <WalletButton
         disabled={props.state == WalletState.CONNECTING}
         onClick={() => {

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

@@ -47,6 +47,9 @@ export const InputAmount = styled(TextField, {
   fontWeight: '$medium',
   textAlign: 'right',
   width: 140,
+  '&:disabled': {
+    cursor: 'unset',
+  },
 });
 export const MaxButton = styled(Button, {
   $$color: '$colors$info300',

package/src/containers/SwapInput/SwapInput.tsx

@@ -55,7 +55,7 @@ export function SwapInput(props: SwapInputProps) {
           {props.loading ? (
             <>
               <Skeleton variant="text" size="large" width={92} />
-              <Divider size={4} />
+              <Divider size={8} />
               <Skeleton variant="text" size="medium" width={92} />
             </>
           ) : (

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

@@ -39,4 +39,7 @@ export const TokenSectionContainer = styled('div', {
     alignItems: 'start',
     paddingLeft: '$10',
   },
+  '& .token-chain-name__skeleton': {
+    padding: '$5 $0',
+  },
 });