@rango-dev/ui 0.22.1-next.0 → 0.22.1-next.2

package/dist/translations/en.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../../translations/en.ts"],"names":[],"mappings":"AAAkB,eAAO,MAAM,QAAQ,KAAwgW,CAAC"}
+{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../../translations/en.ts"],"names":[],"mappings":"AAAkB,eAAO,MAAM,QAAQ,KAA0kX,CAAC"}

package/dist/translations/es.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"es.d.ts","sourceRoot":"","sources":["../../../../translations/es.ts"],"names":[],"mappings":"AAAkB,eAAO,MAAM,QAAQ,KAAuyX,CAAC"}
+{"version":3,"file":"es.d.ts","sourceRoot":"","sources":["../../../../translations/es.ts"],"names":[],"mappings":"AAAkB,eAAO,MAAM,QAAQ,KAAy2Y,CAAC"}

package/dist/translations/fr.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fr.d.ts","sourceRoot":"","sources":["../../../../translations/fr.ts"],"names":[],"mappings":"AAAkB,eAAO,MAAM,QAAQ,KAAm9X,CAAC"}
+{"version":3,"file":"fr.d.ts","sourceRoot":"","sources":["../../../../translations/fr.ts"],"names":[],"mappings":"AAAkB,eAAO,MAAM,QAAQ,KAAqhZ,CAAC"}

package/dist/translations/ja.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ja.d.ts","sourceRoot":"","sources":["../../../../translations/ja.ts"],"names":[],"mappings":"AAAkB,eAAO,MAAM,QAAQ,KAAyxS,CAAC"}
+{"version":3,"file":"ja.d.ts","sourceRoot":"","sources":["../../../../translations/ja.ts"],"names":[],"mappings":"AAAkB,eAAO,MAAM,QAAQ,KAA21T,CAAC"}

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

@@ -0,0 +1,4 @@
+import type { PropTypes } from './QuoteCost.types';
+import React from 'react';
+export declare function QuoteCost(props: PropTypes): React.JSX.Element;
+//# sourceMappingURL=QuoteCost.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QuoteCost.d.ts","sourceRoot":"","sources":["../../../../../../src/components/QuoteCost/QuoteCost.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,qBAgCzC"}

package/dist/widget/ui/src/components/{BestRoute/BestRouteSkeleton.styles.d.ts → QuoteCost/QuoteCost.styles.d.ts}

@@ -1,6 +1,4 @@
-export declare const Container: import("@stitches/react/types/styled-component").StyledComponent<"div", {
-    rounded?: boolean | "true" | undefined;
-}, {
+export declare const Container: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
     sm: string;
     md: string;
     lg: string;
@@ -157,9 +155,7 @@ export declare const Container: import("@stitches/react/types/styled-component")
     zIndices: {};
     transitions: {};
 }, import("@stitches/react/types/config").DefaultThemeMap, {}>>;
-export declare const StepSeparator: import("@stitches/react/types/styled-component").StyledComponent<"div", {
-    hideSeparator?: boolean | "true" | undefined;
-}, {
+export declare const Separator: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
     sm: string;
     md: string;
     lg: string;
@@ -316,4 +312,4 @@ export declare const StepSeparator: import("@stitches/react/types/styled-compone
     zIndices: {};
     transitions: {};
 }, import("@stitches/react/types/config").DefaultThemeMap, {}>>;
-//# sourceMappingURL=BestRouteSkeleton.styles.d.ts.map
+//# sourceMappingURL=QuoteCost.styles.d.ts.map

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

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

package/dist/widget/ui/src/components/{RouteCost/RouteCost.types.d.ts → QuoteCost/QuoteCost.types.d.ts}

@@ -3,4 +3,4 @@ export type PropTypes = {
     time: string | number;
     steps: number;
 };
-//# sourceMappingURL=RouteCost.types.d.ts.map
+//# sourceMappingURL=QuoteCost.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QuoteCost.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/QuoteCost/QuoteCost.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG;IACtB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC"}

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

@@ -0,0 +1,2 @@
+export { QuoteCost } from './QuoteCost';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/QuoteCost/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}

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

@@ -1,5 +1,5 @@
 export declare const Container: import("@stitches/react/types/styled-component").StyledComponent<"div", {
-    type?: "route-details" | "route-progress" | undefined;
+    type?: "quote-details" | "swap-progress" | undefined;
     state?: "warning" | "error" | "default" | "in-progress" | "completed" | undefined;
 }, {
     sm: string;

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

@@ -1,10 +1,24 @@
-import type { Step } from '../BestRoute/BestRoute.types';
+import type { ReactNode } from 'react';
+import type { SwapInputProps } from 'src/containers/SwapInput/SwapInput.types';
+type BaseStep = Pick<SwapInputProps, 'chain' | 'token' | 'price'>;
+export type Step = {
+    swapper: SwapInputProps['chain'];
+    from: BaseStep;
+    to: BaseStep;
+    error?: {
+        title?: string;
+        description?: string;
+    };
+    alerts?: ReactNode;
+    state?: 'error' | 'warning';
+};
 export type StepDetailsProps = {
     step: Step;
     hasSeparator: boolean;
-    type: 'route-details' | 'route-progress';
+    type: 'quote-details' | 'swap-progress';
     state?: 'default' | 'in-progress' | 'completed' | 'warning' | 'error';
     isFocused?: boolean;
     tabIndex?: number;
 };
+export {};
 //# sourceMappingURL=StepDetails.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"StepDetails.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/StepDetails/StepDetails.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAC;AAEzD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,IAAI,CAAC;IACX,YAAY,EAAE,OAAO,CAAC;IACtB,IAAI,EAAE,eAAe,GAAG,gBAAgB,CAAC;IACzC,KAAK,CAAC,EAAE,SAAS,GAAG,aAAa,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,CAAC;IACtE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC"}
+{"version":3,"file":"StepDetails.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/StepDetails/StepDetails.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAE/E,KAAK,QAAQ,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC,CAAC;AAElE,MAAM,MAAM,IAAI,GAAG;IACjB,OAAO,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IACjC,IAAI,EAAE,QAAQ,CAAC;IACf,EAAE,EAAE,QAAQ,CAAC;IACb,KAAK,CAAC,EAAE;QACN,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;IACF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,IAAI,CAAC;IACX,YAAY,EAAE,OAAO,CAAC;IACtB,IAAI,EAAE,eAAe,GAAG,eAAe,CAAC;IACxC,KAAK,CAAC,EAAE,SAAS,GAAG,aAAa,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,CAAC;IACtE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC"}

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

@@ -1,3 +1,3 @@
 export { StepDetails } from './StepDetails';
-export type { StepDetailsProps } from './StepDetails.types';
+export type { StepDetailsProps, Step } from './StepDetails.types';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/StepDetails/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/StepDetails/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/widget/ui/src/components/StepDetails/mock.d.ts

@@ -1,3 +1,3 @@
-import type { Step } from '../BestRoute/BestRoute.types';
+import type { Step } from './StepDetails.types';
 export declare const step1: Step;
 //# sourceMappingURL=mock.d.ts.map

package/dist/widget/ui/src/components/StepDetails/mock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mock.d.ts","sourceRoot":"","sources":["../../../../../../src/components/StepDetails/mock.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAC;AAEzD,eAAO,MAAM,KAAK,EAAE,IAgCnB,CAAC"}
+{"version":3,"file":"mock.d.ts","sourceRoot":"","sources":["../../../../../../src/components/StepDetails/mock.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAEhD,eAAO,MAAM,KAAK,EAAE,IAgCnB,CAAC"}

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

@@ -1,6 +1,5 @@
 export * from './I18nManager';
 export * from './Alert';
-export * from './BestRoute';
 export * from './BlockchainsChip';
 export * from './BottomLogo';
 export * from './Button';
@@ -45,7 +44,7 @@ export * from './ListItem';
 export * from './NotFound';
 export * from './MessageBox';
 export * from './IconButton';
-export * from './RouteCost';
+export * from './QuoteCost';
 export * from './TokenAmount';
 export * from './StepDetails';
 export * from './Popover';

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.22.1-next.0",
+  "version": "0.22.1-next.2",
   "license": "MIT",
   "type": "module",
   "module": "./dist/index.js",
@@ -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.21.1-next.0",
+    "@rango-dev/wallets-shared": "^0.21.1-next.1",
     "@stitches/react": "^1.2.8",
     "rango-sdk": "^0.1.35",
     "react-virtualized-auto-sizer": "^1.0.7",

package/src/components/PriceImpact/PriceImpact.tsx

@@ -9,7 +9,7 @@ import { Container } from './PriceImpact.styles';
 export function PriceImpact(props: PriceImpactProps) {
   const { size, outputUsdValue, percentageChange, warningLevel, error } = props;
 
-  let percentageChangeColor = '$neutral700';
+  let percentageChangeColor = '$neutral600';
   if (!outputUsdValue || warningLevel === 'low') {
     percentageChangeColor = '$warning500';
   } else if (warningLevel === 'high') {
@@ -22,7 +22,7 @@ export function PriceImpact(props: PriceImpactProps) {
         <Typography
           size={size === 'small' ? 'small' : 'medium'}
           variant="body"
-          color={size !== 'small' ? '$neutral600' : '$neutral700'}>
+          color="$neutral600">
           {`~$${outputUsdValue}`}
         </Typography>
       )}

package/src/components/{RouteCost/RouteCost.styles.ts → QuoteCost/QuoteCost.styles.ts}

@@ -18,3 +18,10 @@ export const Container = styled('div', {
     alignItems: 'center',
   },
 });
+
+export const Separator = styled('div', {
+  height: '$12',
+  marginLeft: '$10',
+  marginRight: '$10',
+  borderLeft: '1px solid $foreground',
+});

package/src/components/{RouteCost/RouteCost.tsx → QuoteCost/QuoteCost.tsx}

@@ -1,14 +1,13 @@
-import type { PropTypes } from './RouteCost.types';
+import type { PropTypes } from './QuoteCost.types';
 
 import React from 'react';
 
 import { GasIcon, NumberIcon, TimeIcon } from '../../icons';
-import { Separator } from '../BestRoute/BestRoute.styles';
 import { Typography } from '../Typography';
 
-import { Container } from './RouteCost.styles';
+import { Container, Separator } from './QuoteCost.styles';
 
-export function RouteCost(props: PropTypes) {
+export function QuoteCost(props: PropTypes) {
   const { fee, time, steps } = props;
   return (
     <Container>

package/src/components/QuoteCost/index.ts

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

package/src/components/StepDetails/StepDetails.stories.tsx

@@ -17,7 +17,7 @@ type Story = StoryObj<typeof StepDetails>;
 export const Main: Story = {
   args: {
     step: { ...step1, alerts: <Alert title="test alert" type="warning" /> },
-    type: 'route-progress',
+    type: 'swap-progress',
     state: 'completed',
   },
 };

package/src/components/StepDetails/StepDetails.styles.ts

@@ -8,8 +8,8 @@ export const Container = styled('div', {
   border: '1px solid transparent',
   variants: {
     type: {
-      'route-details': { border: 'none' },
-      'route-progress': {
+      'quote-details': { border: 'none' },
+      'swap-progress': {
         $$color: '$colors$neutral100',
         [`.${darkTheme} &`]: {
           $$color: '$colors$neutral300',

package/src/components/StepDetails/StepDetails.tsx

@@ -40,7 +40,7 @@ const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
         ref={containerRef}
         tabIndex={tabIndex}>
         <div className="swapper">
-          {type === 'route-progress' && hasSeparator && (
+          {type === 'swap-progress' && hasSeparator && (
             <StepSeparator state={state} />
           )}
           <SwapperImage state={state}>
@@ -61,7 +61,7 @@ const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
           </Typography>
         </div>
         <div className="step-info">
-          <DashedLine invisible={!hasSeparator || type === 'route-progress'} />
+          <DashedLine invisible={!hasSeparator || type === 'swap-progress'} />
           <div className="tokens-container">
             <div className="tokens">
               <ChainToken
@@ -90,7 +90,7 @@ const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
                 step.to.price.value
               } ${step.to.token.displayName}`}</Typography>
             </div>
-            <Alerts pb={hasSeparator && type === 'route-details'}>
+            <Alerts pb={hasSeparator && type === 'quote-details'}>
               {step.alerts}
             </Alerts>
           </div>

package/src/components/StepDetails/StepDetails.types.ts

@@ -1,9 +1,24 @@
-import type { Step } from '../BestRoute/BestRoute.types';
+import type { ReactNode } from 'react';
+import type { SwapInputProps } from 'src/containers/SwapInput/SwapInput.types';
+
+type BaseStep = Pick<SwapInputProps, 'chain' | 'token' | 'price'>;
+
+export type Step = {
+  swapper: SwapInputProps['chain'];
+  from: BaseStep;
+  to: BaseStep;
+  error?: {
+    title?: string;
+    description?: string;
+  };
+  alerts?: ReactNode;
+  state?: 'error' | 'warning';
+};
 
 export type StepDetailsProps = {
   step: Step;
   hasSeparator: boolean;
-  type: 'route-details' | 'route-progress';
+  type: 'quote-details' | 'swap-progress';
   state?: 'default' | 'in-progress' | 'completed' | 'warning' | 'error';
   isFocused?: boolean;
   tabIndex?: number;

package/src/components/StepDetails/index.ts

@@ -1,2 +1,2 @@
 export { StepDetails } from './StepDetails';
-export type { StepDetailsProps } from './StepDetails.types';
+export type { StepDetailsProps, Step } from './StepDetails.types';

package/src/components/StepDetails/mock.ts

@@ -1,4 +1,4 @@
-import type { Step } from '../BestRoute/BestRoute.types';
+import type { Step } from './StepDetails.types';
 
 export const step1: Step = {
   swapper: {

package/src/components/index.ts

@@ -1,6 +1,5 @@
 export * from './I18nManager';
 export * from './Alert';
-export * from './BestRoute';
 export * from './BlockchainsChip';
 export * from './BottomLogo';
 export * from './Button';
@@ -45,7 +44,7 @@ export * from './ListItem';
 export * from './NotFound';
 export * from './MessageBox';
 export * from './IconButton';
-export * from './RouteCost';
+export * from './QuoteCost';
 export * from './TokenAmount';
 export * from './StepDetails';
 export * from './Popover';

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

@@ -1,4 +0,0 @@
-import type { BestRouteProps } from './BestRoute.types';
-import React from 'react';
-export declare function BestRoute(props: BestRouteProps): React.JSX.Element;
-//# sourceMappingURL=BestRoute.d.ts.map

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

@@ -1 +0,0 @@
-{"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,qBAsJ9C"}

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

@@ -1,7 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { BestRoute } from './BestRoute';
-declare const meta: Meta<typeof BestRoute>;
-export default meta;
-type Story = StoryObj<typeof BestRoute>;
-export declare const Main: Story;
-//# sourceMappingURL=BestRoute.stories.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"BestRoute.stories.d.ts","sourceRoot":"","sources":["../../../../../../src/components/BestRoute/BestRoute.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAEhC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AAExC,eAAO,MAAM,IAAI,EAAE,KAIlB,CAAC"}