@rango-dev/ui 0.37.0 → 0.37.1-next.0

package/src/components/ChainToken/ChainToken.tsx

@@ -1,16 +1,16 @@
-import type { ChainTokenPropTypes } from './ChainToken.types';
+import type { ChainTokenPropTypes } from './ChainToken.types.js';
 
 import React from 'react';
 
-import { Image } from '../common';
-import { Skeleton } from '../Skeleton';
+import { Image } from '../common/index.js';
+import { Skeleton } from '../Skeleton/index.js';
 
-import { tokenChainSizeMap } from './ChainToken.constants';
+import { tokenChainSizeMap } from './ChainToken.constants.js';
 import {
   ChainImageContainer,
   Container,
   TokenImageContainer,
-} from './ChainToken.styles';
+} from './ChainToken.styles.js';
 
 export const ChainToken: React.FC<ChainTokenPropTypes> = (props) => {
   const {

package/src/components/ChainToken/ChainToken.types.ts

@@ -1,4 +1,4 @@
-import type { ChainImageContainer } from './ChainToken.styles';
+import type { ChainImageContainer } from './ChainToken.styles.js';
 import type * as Stitches from '@stitches/react';
 
 type BaseProps = Stitches.VariantProps<typeof ChainImageContainer>;

package/src/components/ChainToken/index.ts

@@ -1,2 +1,2 @@
-export { ChainToken } from './ChainToken';
-export type { ChainTokenPropTypes } from './ChainToken.types';
+export { ChainToken } from './ChainToken.js';
+export type { ChainTokenPropTypes } from './ChainToken.types.js';

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

@@ -1,6 +1,6 @@
 import * as RadixCheckbox from '@radix-ui/react-checkbox';
 
-import { darkTheme, styled } from '../../theme';
+import { darkTheme, styled } from '../../theme.js';
 
 export const CheckboxContainer = styled('div', {
   display: 'flex',

package/src/components/Checkbox/Checkbox.tsx

@@ -1,17 +1,17 @@
-import type { CheckboxPropTypes } from './Checkbox.types';
+import type { CheckboxPropTypes } from './Checkbox.types.js';
 import type { PropsWithChildren } from 'react';
 
 import React from 'react';
 
-import { DoneIcon } from '../../icons';
-import { Divider } from '../Divider';
+import { DoneIcon } from '../../icons/index.js';
+import { Divider } from '../Divider/index.js';
 
 import {
   CheckboxContainer,
   CheckboxIndicator,
   CheckboxRoot,
   Label,
-} from './Checkbox.styles';
+} from './Checkbox.styles.js';
 
 export function Checkbox(props: PropsWithChildren<CheckboxPropTypes>) {
   const { id, label, ...otherProps } = props;

package/src/components/Checkbox/index.ts

@@ -1,2 +1,2 @@
-export { Checkbox } from './Checkbox';
-export type { CheckboxPropTypes } from './Checkbox.types';
+export { Checkbox } from './Checkbox.js';
+export type { CheckboxPropTypes } from './Checkbox.types.js';

package/src/components/Chip/Chip.styles.ts

@@ -1,4 +1,4 @@
-import { darkTheme, styled } from '../../theme';
+import { darkTheme, styled } from '../../theme.js';
 
 export const ChipContainer = styled('button', {
   display: 'inline-flex',

package/src/components/Chip/Chip.tsx

@@ -1,10 +1,10 @@
-import type { ChipPropTypes } from './Chip.types';
+import type { ChipPropTypes } from './Chip.types.js';
 
 import React from 'react';
 
-import { Typography } from '../Typography';
+import { Typography } from '../Typography/index.js';
 
-import { ChipContainer } from './Chip.styles';
+import { ChipContainer } from './Chip.styles.js';
 
 export function Chip(props: ChipPropTypes) {
   const { label, selected, prefix, suffix, ...otherProps } = props;

package/src/components/Chip/index.ts

@@ -1,2 +1,2 @@
-export { Chip } from './Chip';
-export type { ChipPropTypes } from './Chip.types';
+export { Chip } from './Chip.js';
+export type { ChipPropTypes } from './Chip.types.js';

package/src/components/Collapsible/Collapsible.styles.ts

@@ -1,6 +1,6 @@
 import * as Collapsible from '@radix-ui/react-collapsible';
 
-import { styled } from '../../theme';
+import { styled } from '../../theme.js';
 
 export const Trigger = styled(Collapsible.Trigger, {
   border: 'none',

package/src/components/Collapsible/Collapsible.tsx

@@ -1,12 +1,12 @@
-import type { CollapsiblePropTypes } from './Collapsible.types';
+import type { CollapsiblePropTypes } from './Collapsible.types.js';
 import type { PropsWithChildren } from 'react';
 
 import * as Collapsible from '@radix-ui/react-collapsible';
 import React from 'react';
 
-import { CollapsibleContent } from '../common/styles';
+import { CollapsibleContent } from '../common/styles.js';
 
-import { Trigger } from './Collapsible.styles';
+import { Trigger } from './Collapsible.styles.js';
 
 export function CollapsibleComponent(
   props: PropsWithChildren<CollapsiblePropTypes>

package/src/components/Collapsible/index.ts

@@ -1,2 +1,2 @@
-export { CollapsibleComponent as Collapsible } from './Collapsible';
-export type { CollapsiblePropTypes } from './Collapsible.types';
+export { CollapsibleComponent as Collapsible } from './Collapsible.js';
+export type { CollapsiblePropTypes } from './Collapsible.types.js';

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

@@ -1,4 +1,4 @@
-import { styled } from '../../theme';
+import { styled } from '../../theme.js';
 
 export const DividerContainer = styled('div', {
   flexShrink: 0,

package/src/components/Divider/Divider.tsx

@@ -1,8 +1,8 @@
-import type { PropTypes } from './Divider.types';
+import type { PropTypes } from './Divider.types.js';
 
 import React from 'react';
 
-import { DividerContainer } from './Divider.styles';
+import { DividerContainer } from './Divider.styles.js';
 
 const DEFAULT_SIZE = 12;
 

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

@@ -1,4 +1,4 @@
-import type { DividerContainer } from './Divider.styles';
+import type { DividerContainer } from './Divider.styles.js';
 import type * as Stitches from '@stitches/react';
 
 type BaseProps = Stitches.VariantProps<typeof DividerContainer>;

package/src/components/Divider/index.ts

@@ -1 +1 @@
-export { Divider } from './Divider';
+export { Divider } from './Divider.js';

package/src/components/Flags/Bengali.tsx

@@ -1,8 +1,8 @@
-import type { FlagPropTypes } from './Flags.types';
+import type { FlagPropTypes } from './Flags.types.js';
 
 import React from 'react';
 
-import { DEFAULT_SIZE } from './Flags.constants';
+import { DEFAULT_SIZE } from './Flags.constants.js';
 
 export default function Bengali(props: FlagPropTypes) {
   const { size = DEFAULT_SIZE } = props;

package/src/components/Flags/Chinese.tsx

@@ -1,8 +1,8 @@
-import type { FlagPropTypes } from './Flags.types';
+import type { FlagPropTypes } from './Flags.types.js';
 
 import React from 'react';
 
-import { DEFAULT_SIZE } from './Flags.constants';
+import { DEFAULT_SIZE } from './Flags.constants.js';
 
 export default function Chinese(props: FlagPropTypes) {
   const { size = DEFAULT_SIZE } = props;

package/src/components/Flags/English.tsx

@@ -1,8 +1,8 @@
-import type { FlagPropTypes } from './Flags.types';
+import type { FlagPropTypes } from './Flags.types.js';
 
 import React from 'react';
 
-import { DEFAULT_SIZE } from './Flags.constants';
+import { DEFAULT_SIZE } from './Flags.constants.js';
 
 export default function English(props: FlagPropTypes) {
   const { size = DEFAULT_SIZE } = props;

package/src/components/Flags/Finland.tsx

@@ -1,8 +1,8 @@
-import type { FlagPropTypes } from './Flags.types';
+import type { FlagPropTypes } from './Flags.types.js';
 
 import React from 'react';
 
-import { DEFAULT_SIZE } from './Flags.constants';
+import { DEFAULT_SIZE } from './Flags.constants.js';
 
 export default function Finland(props: FlagPropTypes) {
   const { size = DEFAULT_SIZE } = props;

package/src/components/Flags/French.tsx

@@ -1,8 +1,8 @@
-import type { FlagPropTypes } from './Flags.types';
+import type { FlagPropTypes } from './Flags.types.js';
 
 import React from 'react';
 
-import { DEFAULT_SIZE } from './Flags.constants';
+import { DEFAULT_SIZE } from './Flags.constants.js';
 
 export default function French(props: FlagPropTypes) {
   const { size = DEFAULT_SIZE } = props;

package/src/components/Flags/German.tsx

@@ -1,8 +1,8 @@
-import type { FlagPropTypes } from './Flags.types';
+import type { FlagPropTypes } from './Flags.types.js';
 
 import React from 'react';
 
-import { DEFAULT_SIZE } from './Flags.constants';
+import { DEFAULT_SIZE } from './Flags.constants.js';
 
 export default function German(props: FlagPropTypes) {
   const { size = DEFAULT_SIZE } = props;

package/src/components/Flags/Greece.tsx

@@ -1,8 +1,8 @@
-import type { FlagPropTypes } from './Flags.types';
+import type { FlagPropTypes } from './Flags.types.js';
 
 import React from 'react';
 
-import { DEFAULT_SIZE } from './Flags.constants';
+import { DEFAULT_SIZE } from './Flags.constants.js';
 
 export default function Greece(props: FlagPropTypes) {
   const { size = DEFAULT_SIZE } = props;

package/src/components/Flags/Hindi.tsx

@@ -1,8 +1,8 @@
-import type { FlagPropTypes } from './Flags.types';
+import type { FlagPropTypes } from './Flags.types.js';
 
 import React from 'react';
 
-import { DEFAULT_SIZE } from './Flags.constants';
+import { DEFAULT_SIZE } from './Flags.constants.js';
 
 export default function Hindi(props: FlagPropTypes) {
   const { size = DEFAULT_SIZE } = props;

package/src/components/Flags/Indonesian.tsx

@@ -1,8 +1,8 @@
-import type { FlagPropTypes } from './Flags.types';
+import type { FlagPropTypes } from './Flags.types.js';
 
 import React from 'react';
 
-import { DEFAULT_SIZE } from './Flags.constants';
+import { DEFAULT_SIZE } from './Flags.constants.js';
 
 export default function Indonesian(props: FlagPropTypes) {
   const { size = DEFAULT_SIZE } = props;

package/src/components/Flags/Italian.tsx

@@ -1,8 +1,8 @@
-import type { FlagPropTypes } from './Flags.types';
+import type { FlagPropTypes } from './Flags.types.js';
 
 import React from 'react';
 
-import { DEFAULT_SIZE } from './Flags.constants';
+import { DEFAULT_SIZE } from './Flags.constants.js';
 
 export default function Italian(props: FlagPropTypes) {
   const { size = DEFAULT_SIZE } = props;

package/src/components/Flags/Japanese.tsx

@@ -1,8 +1,8 @@
-import type { FlagPropTypes } from './Flags.types';
+import type { FlagPropTypes } from './Flags.types.js';
 
 import React from 'react';
 
-import { DEFAULT_SIZE } from './Flags.constants';
+import { DEFAULT_SIZE } from './Flags.constants.js';
 
 export default function Japanese(props: FlagPropTypes) {
   const { size = DEFAULT_SIZE } = props;

package/src/components/Flags/Malay.tsx

@@ -1,8 +1,8 @@
-import type { FlagPropTypes } from './Flags.types';
+import type { FlagPropTypes } from './Flags.types.js';
 
 import React from 'react';
 
-import { DEFAULT_SIZE } from './Flags.constants';
+import { DEFAULT_SIZE } from './Flags.constants.js';
 
 export default function Malay(props: FlagPropTypes) {
   const { size = DEFAULT_SIZE } = props;

package/src/components/Flags/Netherlands.tsx

@@ -1,8 +1,8 @@
-import type { FlagPropTypes } from './Flags.types';
+import type { FlagPropTypes } from './Flags.types.js';
 
 import React from 'react';
 
-import { DEFAULT_SIZE } from './Flags.constants';
+import { DEFAULT_SIZE } from './Flags.constants.js';
 
 export default function Netherlands(props: FlagPropTypes) {
   const { size = DEFAULT_SIZE } = props;

package/src/components/Flags/Poland.tsx

@@ -1,8 +1,8 @@
-import type { FlagPropTypes } from './Flags.types';
+import type { FlagPropTypes } from './Flags.types.js';
 
 import React from 'react';
 
-import { DEFAULT_SIZE } from './Flags.constants';
+import { DEFAULT_SIZE } from './Flags.constants.js';
 
 export default function Poland(props: FlagPropTypes) {
   const { size = DEFAULT_SIZE } = props;

package/src/components/Flags/Portuguese.tsx

@@ -1,8 +1,8 @@
-import type { FlagPropTypes } from './Flags.types';
+import type { FlagPropTypes } from './Flags.types.js';
 
 import React from 'react';
 
-import { DEFAULT_SIZE } from './Flags.constants';
+import { DEFAULT_SIZE } from './Flags.constants.js';
 
 export default function Portuguese(props: FlagPropTypes) {
   const { size = DEFAULT_SIZE } = props;

package/src/components/Flags/Russian.tsx

@@ -1,8 +1,8 @@
-import type { FlagPropTypes } from './Flags.types';
+import type { FlagPropTypes } from './Flags.types.js';
 
 import React from 'react';
 
-import { DEFAULT_SIZE } from './Flags.constants';
+import { DEFAULT_SIZE } from './Flags.constants.js';
 
 export default function Russian(props: FlagPropTypes) {
   const { size = DEFAULT_SIZE } = props;

package/src/components/Flags/Spanish.tsx

@@ -1,8 +1,8 @@
-import type { FlagPropTypes } from './Flags.types';
+import type { FlagPropTypes } from './Flags.types.js';
 
 import React from 'react';
 
-import { DEFAULT_SIZE } from './Flags.constants';
+import { DEFAULT_SIZE } from './Flags.constants.js';
 
 export default function Spanish(props: FlagPropTypes) {
   const { size = DEFAULT_SIZE } = props;

package/src/components/Flags/Swedish.tsx

@@ -1,8 +1,8 @@
-import type { FlagPropTypes } from './Flags.types';
+import type { FlagPropTypes } from './Flags.types.js';
 
 import React from 'react';
 
-import { DEFAULT_SIZE } from './Flags.constants';
+import { DEFAULT_SIZE } from './Flags.constants.js';
 
 export default function Swedish(props: FlagPropTypes) {
   const { size = DEFAULT_SIZE } = props;

package/src/components/Flags/Thai.tsx

@@ -1,8 +1,8 @@
-import type { FlagPropTypes } from './Flags.types';
+import type { FlagPropTypes } from './Flags.types.js';
 
 import React from 'react';
 
-import { DEFAULT_SIZE } from './Flags.constants';
+import { DEFAULT_SIZE } from './Flags.constants.js';
 
 export default function Thai(props: FlagPropTypes) {
   const { size = DEFAULT_SIZE } = props;

package/src/components/Flags/Turkish.tsx

@@ -1,8 +1,8 @@
-import type { FlagPropTypes } from './Flags.types';
+import type { FlagPropTypes } from './Flags.types.js';
 
 import React from 'react';
 
-import { DEFAULT_SIZE } from './Flags.constants';
+import { DEFAULT_SIZE } from './Flags.constants.js';
 
 export default function Turkish(props: FlagPropTypes) {
   const { size = DEFAULT_SIZE } = props;

package/src/components/Flags/Ukrainian.tsx

@@ -1,8 +1,8 @@
-import type { FlagPropTypes } from './Flags.types';
+import type { FlagPropTypes } from './Flags.types.js';
 
 import React from 'react';
 
-import { DEFAULT_SIZE } from './Flags.constants';
+import { DEFAULT_SIZE } from './Flags.constants.js';
 
 export default function Ukrainian(props: FlagPropTypes) {
   const { size = DEFAULT_SIZE } = props;

package/src/components/Flags/Vietnamese.tsx

@@ -1,8 +1,8 @@
-import type { FlagPropTypes } from './Flags.types';
+import type { FlagPropTypes } from './Flags.types.js';
 
 import React from 'react';
 
-import { DEFAULT_SIZE } from './Flags.constants';
+import { DEFAULT_SIZE } from './Flags.constants.js';
 
 export default function Vietnamese(props: FlagPropTypes) {
   const { size = DEFAULT_SIZE } = props;

package/src/components/Flags/index.ts

@@ -1,27 +1,27 @@
-import Bengali from './Bengali';
-import Chinese from './Chinese';
-import English from './English';
-import Finland from './Finland';
-import French from './French';
-import German from './German';
-import Greece from './Greece';
-import Hindi from './Hindi';
-import Indonesian from './Indonesian';
-import Italian from './Italian';
-import Japanese from './Japanese';
-import Malay from './Malay';
-import Netherlands from './Netherlands';
-import Poland from './Poland';
-import Portuguese from './Portuguese';
-import Russian from './Russian';
-import Spanish from './Spanish';
-import Swedish from './Swedish';
-import Thai from './Thai';
-import Turkish from './Turkish';
-import Ukrainian from './Ukrainian';
-import Vietnamese from './Vietnamese';
+import Bengali from './Bengali.js';
+import Chinese from './Chinese.js';
+import English from './English.js';
+import Finland from './Finland.js';
+import French from './French.js';
+import German from './German.js';
+import Greece from './Greece.js';
+import Hindi from './Hindi.js';
+import Indonesian from './Indonesian.js';
+import Italian from './Italian.js';
+import Japanese from './Japanese.js';
+import Malay from './Malay.js';
+import Netherlands from './Netherlands.js';
+import Poland from './Poland.js';
+import Portuguese from './Portuguese.js';
+import Russian from './Russian.js';
+import Spanish from './Spanish.js';
+import Swedish from './Swedish.js';
+import Thai from './Thai.js';
+import Turkish from './Turkish.js';
+import Ukrainian from './Ukrainian.js';
+import Vietnamese from './Vietnamese.js';
 
-export type { FlagPropTypes } from './Flags.types';
+export type { FlagPropTypes } from './Flags.types.js';
 
 export {
   English,

package/src/components/FullExpandedQuote/FullExpandedQuote.Skeletons.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { ChainToken } from '../ChainToken';
-import { Skeleton } from '../Skeleton';
+import { ChainToken } from '../ChainToken/index.js';
+import { Skeleton } from '../Skeleton/index.js';
 
 import {
   FlexCenter,
@@ -9,7 +9,7 @@ import {
   Separator,
   SkeletonItemLeftContainer,
   VerticalLine,
-} from './FullExpandedQuote.styles';
+} from './FullExpandedQuote.styles.js';
 
 export function SkeletonHeader() {
   return (

package/src/components/FullExpandedQuote/FullExpandedQuote.TokenSection.tsx

@@ -1,16 +1,16 @@
-import type { TokenSectionPropTypes } from './FullExpandedQuote.types';
+import type { TokenSectionPropTypes } from './FullExpandedQuote.types.js';
 
 import React from 'react';
 
-import { ChainToken } from '../ChainToken';
-import { NumericTooltip } from '../Tooltip';
-import { Typography } from '../Typography';
+import { ChainToken } from '../ChainToken/index.js';
+import { NumericTooltip } from '../Tooltip/index.js';
+import { Typography } from '../Typography/index.js';
 
 import {
   TokenInfo,
   tokenLabelStyles,
   TokenSectionContainer,
-} from './FullExpandedQuote.styles';
+} from './FullExpandedQuote.styles.js';
 
 export function TokenSection(props: TokenSectionPropTypes) {
   const {

package/src/components/FullExpandedQuote/FullExpandedQuote.Tooltip.tsx

@@ -1,13 +1,13 @@
-import type { TooltipContentProps } from './FullExpandedQuote.types';
+import type { TooltipContentProps } from './FullExpandedQuote.types.js';
 
 import { i18n } from '@lingui/core';
 import React from 'react';
 
-import { ChevronRightIcon } from '../../icons';
-import { Image } from '../common';
-import { Divider } from '../Divider';
-import { QuoteCost } from '../QuoteCost';
-import { Typography } from '../Typography';
+import { ChevronRightIcon } from '../../icons/index.js';
+import { Image } from '../common/index.js';
+import { Divider } from '../Divider/index.js';
+import { QuoteCost } from '../QuoteCost/index.js';
+import { Typography } from '../Typography/index.js';
 
 import {
   FlexCenter,
@@ -17,8 +17,8 @@ import {
   TooltipContainer,
   TooltipFooter,
   TooltipHeader,
-} from './FullExpandedQuote.styles';
-import { TokenSection } from './FullExpandedQuote.TokenSection';
+} from './FullExpandedQuote.styles.js';
+import { TokenSection } from './FullExpandedQuote.TokenSection.js';
 
 export function TooltipContent(props: TooltipContentProps) {
   const { internalSwaps, time, fee, alerts } = props;

package/src/components/FullExpandedQuote/FullExpandedQuote.helpers.ts

@@ -1,5 +1,5 @@
 import type { I18n } from '@lingui/core';
-import type { Tag } from 'rango-sdk';
+import type { Tag } from 'rango-types/lib/api/main';
 
 export const ITEM_SKELETON_COUNT = 3;
 export const TOOLTIP_SIDE_OFFSET = 10;

package/src/components/FullExpandedQuote/FullExpandedQuote.styles.ts

@@ -1,5 +1,5 @@
-import { css, darkTheme, styled } from '../../theme';
-import { PriceImpact } from '../PriceImpact';
+import { css, darkTheme, styled } from '../../theme.js';
+import { PriceImpact } from '../PriceImpact/index.js';
 
 export const tokenLabelStyles = css({});
 

package/src/components/FullExpandedQuote/FullExpandedQuote.tsx

@@ -1,17 +1,17 @@
-import type { DataLoadedProps, PropTypes } from './FullExpandedQuote.types';
-import type { Tag } from 'rango-sdk';
+import type { DataLoadedProps, PropTypes } from './FullExpandedQuote.types.js';
+import type { Tag } from 'rango-types/lib/api/main';
 
 import { i18n } from '@lingui/core';
 import React, { useState } from 'react';
 
-import { ErrorIcon, WarningIcon } from '../../icons';
-import { ChainToken } from '../ChainToken';
-import { Image } from '../common';
-import { Divider } from '../Divider';
-import { QuoteCost } from '../QuoteCost';
-import { QuoteTag } from '../QuoteTag';
-import { NumericTooltip, Tooltip } from '../Tooltip';
-import { Typography } from '../Typography';
+import { ErrorIcon, WarningIcon } from '../../icons/index.js';
+import { ChainToken } from '../ChainToken/index.js';
+import { Image } from '../common/index.js';
+import { Divider } from '../Divider/index.js';
+import { QuoteCost } from '../QuoteCost/index.js';
+import { QuoteTag } from '../QuoteTag/index.js';
+import { NumericTooltip, Tooltip } from '../Tooltip/index.js';
+import { Typography } from '../Typography/index.js';
 
 import {
   getTagLabel,
@@ -19,13 +19,13 @@ import {
   shortenAmount,
   shortenDisplayName,
   TOOLTIP_SIDE_OFFSET,
-} from './FullExpandedQuote.helpers';
+} from './FullExpandedQuote.helpers.js';
 import {
   SkeletonHeader,
   SkeletonItemLeft,
   SkeletonItemRight,
   SkeletonOutput,
-} from './FullExpandedQuote.Skeletons';
+} from './FullExpandedQuote.Skeletons.js';
 import {
   IconHighlight,
   lastStepStyle,
@@ -43,9 +43,9 @@ import {
   SwapperSection,
   TagsContainer,
   VerticalLine,
-} from './FullExpandedQuote.styles';
-import { TokenSection } from './FullExpandedQuote.TokenSection';
-import { TooltipContent } from './FullExpandedQuote.Tooltip';
+} from './FullExpandedQuote.styles.js';
+import { TokenSection } from './FullExpandedQuote.TokenSection.js';
+import { TooltipContent } from './FullExpandedQuote.Tooltip.js';
 
 export function FullExpandedQuote(props: PropTypes) {
   const {