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

package/src/components/SwapListItem/SwapToken.tsx

@@ -1,14 +1,14 @@
-import type { PropTypes } from './SwapToken.types';
+import type { PropTypes } from './SwapToken.types.js';
 
 import { i18n } from '@lingui/core';
 import React from 'react';
 
-import { NextIcon } from '../../icons';
-import { ChainToken } from '../ChainToken';
-import { Divider } from '../Divider';
-import { Skeleton } from '../Skeleton';
-import { NumericTooltip } from '../Tooltip';
-import { Typography } from '../Typography';
+import { NextIcon } from '../../icons/index.js';
+import { ChainToken } from '../ChainToken/index.js';
+import { Divider } from '../Divider/index.js';
+import { Skeleton } from '../Skeleton/index.js';
+import { NumericTooltip } from '../Tooltip/index.js';
+import { Typography } from '../Typography/index.js';
 
 import {
   Icon,
@@ -19,7 +19,7 @@ import {
   TokenContainer,
   TokenInfo,
   TopSection,
-} from './SwapToken.styles';
+} from './SwapToken.styles.js';
 
 export function SwapToken(props: PropTypes) {
   if ('isLoading' in props) {

package/src/components/SwapListItem/SwapToken.types.ts

@@ -1,4 +1,8 @@
-import type { LoadingProps, Status, SwapTokenData } from './SwapListItem.types';
+import type {
+  LoadingProps,
+  Status,
+  SwapTokenData,
+} from './SwapListItem.types.js';
 
 export interface SwapTokenProps {
   data: SwapTokenData;

package/src/components/SwapListItem/index.ts

@@ -1,5 +1,5 @@
-export { SwapListItem } from './SwapListItem';
+export { SwapListItem } from './SwapListItem.js';
 export type {
   SwapTokenData,
   SwapListItemPropTypes,
-} from './SwapListItem.types';
+} from './SwapListItem.types.js';

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

@@ -1,6 +1,6 @@
 import * as RadixSwitch from '@radix-ui/react-switch';
 
-import { darkTheme, styled } from '../../theme';
+import { darkTheme, styled } from '../../theme.js';
 
 export const StyledSwitchRoot = styled(RadixSwitch.Root, {
   boxSizing: 'border-box',

package/src/components/Switch/Switch.tsx

@@ -1,8 +1,8 @@
-import type { SwitchPropTypes } from './Switch.types';
+import type { SwitchPropTypes } from './Switch.types.js';
 
 import React from 'react';
 
-import { StyledSwitchRoot, StyledSwitchThumb } from './Switch.styles';
+import { StyledSwitchRoot, StyledSwitchThumb } from './Switch.styles.js';
 
 export function Switch(props: SwitchPropTypes) {
   const { checked, onChange } = props;

package/src/components/Switch/index.ts

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

package/src/components/Tabs/Tabs.styles.tsx

@@ -1,5 +1,5 @@
-import { darkTheme, styled } from '../../theme';
-import { Button } from '../Button';
+import { darkTheme, styled } from '../../theme.js';
+import { Button } from '../Button/index.js';
 
 export const Tabs = styled('div', {
   display: 'flex',

package/src/components/Tabs/Tabs.tsx

@@ -1,11 +1,11 @@
-import type { TabsPropTypes } from './Tabs.types';
+import type { TabsPropTypes } from './Tabs.types.js';
 
 import React, { useEffect, useRef, useState } from 'react';
 
-import { Divider } from '../Divider';
-import { Tooltip } from '../Tooltip';
+import { Divider } from '../Divider/index.js';
+import { Tooltip } from '../Tooltip/index.js';
 
-import { BackdropTab, Tab, Tabs } from './Tabs.styles';
+import { BackdropTab, Tab, Tabs } from './Tabs.styles.js';
 
 const INITIAL_RENDER_DELAY = 100;
 export function TabsComponent(props: TabsPropTypes) {

package/src/components/Tabs/Tabs.types.tsx

@@ -1,4 +1,4 @@
-import type { Tabs } from './Tabs.styles';
+import type { Tabs } from './Tabs.styles.js';
 import type * as Stitches from '@stitches/react';
 
 type BaseItem = {

package/src/components/Tabs/index.ts

@@ -1,2 +1,2 @@
-export { TabsComponent as Tabs } from './Tabs';
-export type { TabsPropTypes } from './Tabs.types';
+export { TabsComponent as Tabs } from './Tabs.js';
+export type { TabsPropTypes } from './Tabs.types.js';

package/src/components/TextField/TextField.styles.ts

@@ -1,4 +1,4 @@
-import { darkTheme, styled } from '../../theme';
+import { darkTheme, styled } from '../../theme.js';
 
 export const InputContainer = styled('div', {
   borderRadius: '$xs',

package/src/components/TextField/TextField.tsx

@@ -1,12 +1,12 @@
-import type { Ref, TextFieldPropTypes } from './TextField.types';
+import type { Ref, TextFieldPropTypes } from './TextField.types.js';
 import type { PropsWithChildren } from 'react';
 
 import React from 'react';
 
-import { Divider } from '../Divider';
-import { Typography } from '../Typography';
+import { Divider } from '../Divider/index.js';
+import { Typography } from '../Typography/index.js';
 
-import { Input, InputContainer, Label } from './TextField.styles';
+import { Input, InputContainer, Label } from './TextField.styles.js';
 
 function TextFieldComponent(
   props: PropsWithChildren<TextFieldPropTypes>,

package/src/components/TextField/TextField.types.tsx

@@ -1,5 +1,5 @@
-import type { InputContainer } from './TextField.styles';
-import type { TypographyPropTypes } from '../Typography';
+import type { InputContainer } from './TextField.styles.js';
+import type { TypographyPropTypes } from '../Typography/index.js';
 import type * as Stitches from '@stitches/react';
 
 type BaseProps = Stitches.VariantProps<typeof InputContainer>;

package/src/components/TextField/index.ts

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

package/src/components/Toast/Toast.Provider.tsx

@@ -4,15 +4,15 @@ import type {
   ToastPosition,
   ToastPropTypes,
   ToastType,
-} from './Toast.types';
+} from './Toast.types.js';
 import type { PropsWithChildren } from 'react';
 
 import React, { createContext, useContext, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
 
-import { Toast } from './Toast';
-import { idGenerator } from './Toast.helpers';
-import { ToastContainer } from './Toast.styles';
+import { idGenerator } from './Toast.helpers.js';
+import { Toast } from './Toast.js';
+import { ToastContainer } from './Toast.styles.js';
 
 const ToastContext = createContext<ProviderContext | undefined>(undefined);
 

package/src/components/Toast/Toast.styles.ts

@@ -1,10 +1,10 @@
-import { css, darkTheme, lightTheme, styled } from '../../theme';
-import { Typography } from '../Typography';
+import { css, darkTheme, lightTheme, styled } from '../../theme.js';
+import { Typography } from '../Typography/index.js';
 
 import {
   HOVER_TRANSITION_DURATION,
   TOAST_TRANSITION_DURATION,
-} from './Toast.helpers';
+} from './Toast.helpers.js';
 
 export const toastContentStyles = css({
   transition: `transform ${HOVER_TRANSITION_DURATION}ms ease-in-out`,

package/src/components/Toast/Toast.tsx

@@ -1,23 +1,23 @@
-import type { ToastPropTypes } from './Toast.types';
+import type { ToastPropTypes } from './Toast.types.js';
 
 import React, { useEffect, useState } from 'react';
 
-import { CloseIcon } from '../../icons';
-import { Alert } from '../Alert';
-import AlertIcon from '../Alert/Alert.icon';
-import { IconHighlight } from '../Alert/Alert.styles';
-import { Divider } from '../Divider';
-import { IconButton } from '../IconButton';
+import { CloseIcon } from '../../icons/index.js';
+import AlertIcon from '../Alert/Alert.icon.js';
+import { IconHighlight } from '../Alert/Alert.styles.js';
+import { Alert } from '../Alert/index.js';
+import { Divider } from '../Divider/index.js';
+import { IconButton } from '../IconButton/index.js';
 
-import { TOAST_HIDE_DELAY, TOAST_UNMOUNT_DELAY } from './Toast.helpers';
-import { useToast } from './Toast.Provider';
+import { TOAST_HIDE_DELAY, TOAST_UNMOUNT_DELAY } from './Toast.helpers.js';
+import { useToast } from './Toast.Provider.js';
 import {
   AlertBox,
   AlertFlexContainer,
   StyledTypography,
   ToastContentContainer,
   toastContentStyles,
-} from './Toast.styles';
+} from './Toast.styles.js';
 
 export const Toast = (props: ToastPropTypes) => {
   const {

package/src/components/Toast/Toast.types.ts

@@ -1,5 +1,5 @@
-import type { ToastContainer } from './Toast.styles';
-import type { Type } from '../Alert/Alert.types';
+import type { ToastContainer } from './Toast.styles.js';
+import type { Type } from '../Alert/Alert.types.js';
 import type * as Stitches from '@stitches/react';
 import type { CSSProperties } from 'react';
 

package/src/components/Toast/index.ts

@@ -1,3 +1,3 @@
-export { Toast } from './Toast';
-export { ToastProvider, useToast } from './Toast.Provider';
-export type { ToastPropTypes } from './Toast.types';
+export { Toast } from './Toast.js';
+export { ToastProvider, useToast } from './Toast.Provider.js';
+export type { ToastPropTypes } from './Toast.types.js';

package/src/components/TokenAmount/TokenAmount.styles.ts

@@ -1,4 +1,4 @@
-import { css, styled } from '../../theme';
+import { css, styled } from '../../theme.js';
 
 export const Container = styled('div', {
   display: 'flex',

package/src/components/TokenAmount/TokenAmount.tsx

@@ -1,20 +1,20 @@
-import type { PropTypes } from './TokenAmount.types';
+import type { PropTypes } from './TokenAmount.types.js';
 
 import React from 'react';
 
-import { ChainToken } from '../ChainToken';
-import { Divider } from '../Divider';
-import { PriceImpact } from '../PriceImpact';
-import { ValueTypography } from '../PriceImpact/PriceImpact.styles';
-import { NumericTooltip } from '../Tooltip';
-import { Typography } from '../Typography';
+import { ChainToken } from '../ChainToken/index.js';
+import { Divider } from '../Divider/index.js';
+import { PriceImpact } from '../PriceImpact/index.js';
+import { ValueTypography } from '../PriceImpact/PriceImpact.styles.js';
+import { NumericTooltip } from '../Tooltip/index.js';
+import { Typography } from '../Typography/index.js';
 
 import {
   Container,
   tokenAmountStyles,
   tooltipRootStyle,
   usdValueStyles,
-} from './TokenAmount.styles';
+} from './TokenAmount.styles.js';
 
 export function TokenAmount(props: PropTypes) {
   return (

package/src/components/TokenAmount/TokenAmount.types.ts

@@ -1,5 +1,5 @@
-import type { SwapInputPropTypes } from '../../containers/SwapInput/SwapInput.types';
-import type { PriceImpactPropTypes } from '../PriceImpact/PriceImpact.types';
+import type { SwapInputPropTypes } from '../../containers/SwapInput/SwapInput.types.js';
+import type { PriceImpactPropTypes } from '../PriceImpact/PriceImpact.types.js';
 
 type BaseProps = Pick<SwapInputPropTypes, 'token' | 'price'> & {
   chain: Pick<SwapInputPropTypes['chain'], 'image'>;

package/src/components/TokenAmount/index.ts

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

package/src/components/Tooltip/NumericTooltip.tsx

@@ -1,9 +1,9 @@
-import type { NumericTooltipPropTypes } from './NumericTooltip.types';
+import type { NumericTooltipPropTypes } from './NumericTooltip.types.js';
 import type { PropsWithChildren } from 'react';
 
 import React from 'react';
 
-import { Tooltip } from './Tooltip';
+import { Tooltip } from './Tooltip.js';
 
 export function NumericTooltip(
   props: PropsWithChildren<NumericTooltipPropTypes>

package/src/components/Tooltip/NumericTooltip.types.tsx

@@ -1,4 +1,4 @@
-import type { TooltipPropTypes } from './Tooltip.types';
+import type { TooltipPropTypes } from './Tooltip.types.js';
 
 export interface NumericTooltipPropTypes extends TooltipPropTypes {
   content: string | number | null | undefined;

package/src/components/Tooltip/Tooltip.styles.ts

@@ -1,7 +1,7 @@
 import * as RadixTooltip from '@radix-ui/react-tooltip';
 
-import { darkTheme, styled } from '../../theme';
-import { Typography } from '../Typography';
+import { darkTheme, styled } from '../../theme.js';
+import { Typography } from '../Typography/index.js';
 
 export const TooltipContent = styled(RadixTooltip.Content, {
   zIndex: '999999',

package/src/components/Tooltip/Tooltip.tsx

@@ -1,4 +1,4 @@
-import type { TooltipPropTypes } from './Tooltip.types';
+import type { TooltipPropTypes } from './Tooltip.types.js';
 import type { PropsWithChildren } from 'react';
 
 import * as RadixTooltip from '@radix-ui/react-tooltip';
@@ -8,7 +8,7 @@ import {
   TooltipContent,
   TooltipTypography,
   TriggerContent,
-} from './Tooltip.styles';
+} from './Tooltip.styles.js';
 
 export function Tooltip(props: PropsWithChildren<TooltipPropTypes>) {
   const {

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

@@ -1,4 +1,4 @@
-import type { CSS } from '../../theme';
+import type { CSS } from '../../theme.js';
 import type * as RadixTooltip from '@radix-ui/react-tooltip';
 import type * as Stitches from '@stitches/react';
 import type { ComponentProps, ReactNode } from 'react';

package/src/components/Tooltip/index.ts

@@ -1,4 +1,4 @@
-export { Tooltip } from './Tooltip';
-export type { TooltipPropTypes } from './Tooltip.types';
-export { NumericTooltip } from './NumericTooltip';
-export type { NumericTooltipPropTypes } from './NumericTooltip.types';
+export { Tooltip } from './Tooltip.js';
+export type { TooltipPropTypes } from './Tooltip.types.js';
+export { NumericTooltip } from './NumericTooltip.js';
+export type { NumericTooltipPropTypes } from './NumericTooltip.types.js';

package/src/components/Typography/NotSelectableTypography.ts

@@ -1,6 +1,6 @@
-import { styled } from '../../theme';
+import { styled } from '../../theme.js';
 
-import { Typography } from './Typography';
+import { Typography } from './Typography.js';
 
 export const NotSelectableTypography = styled(Typography, {
   userSelect: 'none',

package/src/components/Typography/Typography.styles.tsx

@@ -1,4 +1,4 @@
-import { styled } from '../../theme';
+import { styled } from '../../theme.js';
 
 export const TypographyContainer = styled('span', {
   display: 'inline-block',

package/src/components/Typography/Typography.tsx

@@ -1,9 +1,9 @@
-import type { TypographyPropTypes } from './Typography.types';
+import type { TypographyPropTypes } from './Typography.types.js';
 import type { PropsWithChildren } from 'react';
 
 import React from 'react';
 
-import { TypographyContainer } from './Typography.styles';
+import { TypographyContainer } from './Typography.styles.js';
 
 export function Typography({
   children,

package/src/components/Typography/Typography.types.tsx

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

package/src/components/Typography/index.ts

@@ -1,3 +1,3 @@
-export { Typography } from './Typography';
-export { NotSelectableTypography } from './NotSelectableTypography';
-export type { TypographyPropTypes } from './Typography.types';
+export { Typography } from './Typography.js';
+export { NotSelectableTypography } from './NotSelectableTypography.js';
+export type { TypographyPropTypes } from './Typography.types.js';

package/src/components/VirtualizedList/index.ts

@@ -1 +1 @@
-export { VirtualizedList, GroupedVirtualizedList } from './VirtualizedList';
+export { VirtualizedList, GroupedVirtualizedList } from './VirtualizedList.js';

package/src/components/Wallet/ClickableWallet.tsx

@@ -1,23 +1,23 @@
-import type { WalletPropTypes } from './Wallet.types';
+import type { WalletPropTypes } from './Wallet.types.js';
 
 import { detectInstallLink } from '@rango-dev/wallets-shared';
 import React, { Fragment } from 'react';
 
-import { Image } from '../common';
-import { Divider } from '../Divider';
-import { Skeleton } from '../Skeleton';
-import { Tooltip } from '../Tooltip';
-import { Typography } from '../Typography';
+import { Image } from '../common/index.js';
+import { Divider } from '../Divider/index.js';
+import { Skeleton } from '../Skeleton/index.js';
+import { Tooltip } from '../Tooltip/index.js';
+import { Typography } from '../Typography/index.js';
 
-import { makeInfo } from './Wallet.helpers';
+import { makeInfo } from './Wallet.helpers.js';
 import {
   LoadingButton,
   Text,
   Title,
   WalletButton,
   WalletImageContainer,
-} from './Wallet.styles';
-import { WalletState } from './Wallet.types';
+} from './Wallet.styles.js';
+import { WalletState } from './Wallet.types.js';
 
 function Wallet(props: WalletPropTypes) {
   const { title, type, image, onClick, isLoading, disabled = false } = props;

package/src/components/Wallet/SelectableWallet.tsx

@@ -1,17 +1,17 @@
 import { detectInstallLink } from '@rango-dev/wallets-shared';
 import React from 'react';
 
-import { Image } from '../common';
-import { Typography } from '../Typography';
+import { Image } from '../common/index.js';
+import { Typography } from '../Typography/index.js';
 
-import { makeInfo } from './Wallet.helpers';
+import { makeInfo } from './Wallet.helpers.js';
 import {
   Text,
   Title,
   WalletButton,
   WalletImageContainer,
-} from './Wallet.styles';
-import { type SelectablePropTypes, WalletState } from './Wallet.types';
+} from './Wallet.styles.js';
+import { type SelectablePropTypes, WalletState } from './Wallet.types.js';
 
 export function SelectableWallet(props: SelectablePropTypes) {
   const {

package/src/components/Wallet/Wallet.helpers.ts

@@ -1,8 +1,8 @@
-import type { Info } from './Wallet.types';
+import type { Info } from './Wallet.types.js';
 
 import { i18n } from '@lingui/core';
 
-import { WalletState } from './Wallet.types';
+import { WalletState } from './Wallet.types.js';
 
 export function makeInfo(state: WalletState): Info {
   switch (state) {

package/src/components/Wallet/Wallet.styles.ts

@@ -1,5 +1,5 @@
-import { darkTheme, styled } from '../../theme';
-import { Typography } from '../Typography';
+import { darkTheme, styled } from '../../theme.js';
+import { Typography } from '../Typography/index.js';
 
 export const WalletImageContainer = styled('div', {
   '& img': {

package/src/components/Wallet/Wallet.tsx

@@ -1,2 +1,2 @@
-export { default as Wallet } from './ClickableWallet';
-export { SelectableWallet } from './SelectableWallet';
+export { default as Wallet } from './ClickableWallet.js';
+export { SelectableWallet } from './SelectableWallet.js';

package/src/components/Wallet/Wallet.types.ts

@@ -1,5 +1,5 @@
 import type { InstallObjects, WalletType } from '@rango-dev/wallets-shared';
-import type { TransactionType } from 'rango-sdk';
+import type { TransactionType } from 'rango-types';
 
 export enum WalletState {
   NOT_INSTALLED = 'not_installed',

package/src/components/Wallet/index.ts

@@ -1,3 +1,3 @@
-export * from './Wallet';
-export type { WalletInfo } from './Wallet.types';
-export { WalletState } from './Wallet.types';
+export * from './Wallet.js';
+export type { WalletInfo } from './Wallet.types.js';
+export { WalletState } from './Wallet.types.js';

package/src/components/common/Image.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { styled } from '../../theme';
+import { styled } from '../../theme.js';
 
 export const ImageContainer = styled('div', {
   display: 'flex',

package/src/components/common/index.ts

@@ -1 +1 @@
-export { Image, ImageContainer } from './Image';
+export { Image, ImageContainer } from './Image.js';

package/src/components/common/styles.ts

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