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

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: {

package/src/components/index.ts

@@ -1,46 +1,49 @@
-export * from './I18nManager';
-export * from './Alert';
-export * from './BlockchainsChip';
-export * from './BottomLogo';
-export * from './Button';
-export * from './IconButton';
-export * from './Collapsible';
-export * from './Checkbox';
-export * from './Chip';
-export * from './common';
-export * from './Divider';
-export * from './FullExpandedQuote';
-export * from './Header';
-export * from './Modal';
-export * from './MessageBox';
-export * from './RadioGroup';
-export * from './RefreshProgressButton';
-export * from './SelectableCategoryList';
-export * from './Spinner';
-export * from './SwapListItem';
-export * from './Switch';
-export * from './TextField';
-export * from './Toast';
-export * from './Tooltip';
-export * from './Typography';
-export * from './Wallet';
-export * from './Radio';
-export * from './PriceImpact';
-export * from './ChainToken';
-export * from './Skeleton';
-export * from './VirtualizedList';
-export * from './ListItemButton';
-export * from './List';
-export * from './ListItem';
-export * from './NotFound';
-export * from './MessageBox';
-export * from './IconButton';
-export * from './QuoteCost';
-export * from './TokenAmount';
-export * from './StepDetails';
-export * from './Popover';
-export * from './Flags';
-export * from './Select';
-export * from './QuoteTag';
-export * from './Tabs';
-export type { SvgIconProps, SvgIconPropsWithChildren } from './SvgIcon';
+export * from './I18nManager/index.js';
+export * from './Alert/index.js';
+export * from './BlockchainsChip/index.js';
+export * from './BottomLogo/index.js';
+export * from './Button/index.js';
+export * from './IconButton/index.js';
+export * from './Collapsible/index.js';
+export * from './Checkbox/index.js';
+export * from './Chip/index.js';
+export * from './common/index.js';
+export * from './Divider/index.js';
+export * from './FullExpandedQuote/index.js';
+export * from './Header/index.js';
+export * from './Modal/index.js';
+export * from './MessageBox/index.js';
+export * from './RadioGroup/index.js';
+export * from './RefreshProgressButton/index.js';
+export * from './SelectableCategoryList/index.js';
+export * from './Spinner/index.js';
+export * from './SwapListItem/index.js';
+export * from './Switch/index.js';
+export * from './TextField/index.js';
+export * from './Toast/index.js';
+export * from './Tooltip/index.js';
+export * from './Typography/index.js';
+export * from './Wallet/index.js';
+export * from './Radio/index.js';
+export * from './PriceImpact/index.js';
+export * from './ChainToken/index.js';
+export * from './Skeleton/index.js';
+export * from './VirtualizedList/index.js';
+export * from './ListItemButton/index.js';
+export * from './List/index.js';
+export * from './ListItem/index.js';
+export * from './NotFound/index.js';
+export * from './MessageBox/index.js';
+export * from './IconButton/index.js';
+export * from './QuoteCost/index.js';
+export * from './TokenAmount/index.js';
+export * from './StepDetails/index.js';
+export * from './Popover/index.js';
+export * from './Flags/index.js';
+export * from './Select/index.js';
+export * from './QuoteTag/index.js';
+export * from './Tabs/index.js';
+export type {
+  SvgIconProps,
+  SvgIconPropsWithChildren,
+} from './SvgIcon/index.js';

package/src/containers/ConnectWalletsModal/ConnectWalletsModal.styles.ts

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

package/src/containers/ConnectWalletsModal/ConnectWalletsModal.tsx

@@ -1,11 +1,11 @@
-import type { ConnectWalletsModalPropTypes } from './ConnectWalletsModal.types';
+import type { ConnectWalletsModalPropTypes } from './ConnectWalletsModal.types.js';
 
 import { i18n } from '@lingui/core';
 import React from 'react';
 
-import { Modal, Wallet } from '../../components';
+import { Modal, Wallet } from '../../components/index.js';
 
-import { ModalContent } from './ConnectWalletsModal.styles';
+import { ModalContent } from './ConnectWalletsModal.styles.js';
 
 export function ConnectWalletsModal(props: ConnectWalletsModalPropTypes) {
   const { open, list, onSelect, onClose } = props;

package/src/containers/ConnectWalletsModal/ConnectWalletsModal.types.ts

@@ -1,4 +1,4 @@
-import type { WalletInfo } from '../../components';
+import type { WalletInfo } from '../../components/index.js';
 import type { WalletType } from '@rango-dev/wallets-shared';
 
 export interface ConnectWalletsModalPropTypes {

package/src/containers/ConnectWalletsModal/index.ts

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

package/src/containers/Notifications/NotificationNotFound.tsx

@@ -1,10 +1,10 @@
 import { i18n } from '@lingui/core';
 import React from 'react';
 
-import { Divider, Typography } from '../../components';
-import { NoNotificationIcon } from '../../icons';
+import { Divider, Typography } from '../../components/index.js';
+import { NoNotificationIcon } from '../../icons/index.js';
 
-import { NotFoundContainer } from './Notifications.styles';
+import { NotFoundContainer } from './Notifications.styles.js';
 
 export function NotificationNotFound() {
   return (

package/src/containers/Notifications/Notifications.styles.ts

@@ -1,5 +1,5 @@
-import { Button, ListItemButton } from '../../components';
-import { darkTheme, styled } from '../../theme';
+import { Button, ListItemButton } from '../../components/index.js';
+import { darkTheme, styled } from '../../theme.js';
 
 export const Container = styled('div', {
   borderRadius: '$sm',

package/src/containers/Notifications/Notifications.tsx

@@ -1,12 +1,12 @@
-import type { PropTypes } from './Notifications.types';
+import type { PropTypes } from './Notifications.types.js';
 
 import { i18n } from '@lingui/core';
 import React from 'react';
 
-import { ChainToken, Divider, Typography } from '../../components';
-import { ChevronRightIcon } from '../../icons';
+import { ChainToken, Divider, Typography } from '../../components/index.js';
+import { ChevronRightIcon } from '../../icons/index.js';
 
-import { NotificationNotFound } from './NotificationNotFound';
+import { NotificationNotFound } from './NotificationNotFound.js';
 import {
   ClearAllButton,
   Container,
@@ -15,7 +15,7 @@ import {
   Images,
   List,
   ListItem,
-} from './Notifications.styles';
+} from './Notifications.styles.js';
 
 export function Notifications(props: PropTypes) {
   const {

package/src/containers/Notifications/Notifications.types.ts

@@ -1,5 +1,5 @@
-import type { CSS } from '../../theme';
-import type { Asset } from 'rango-sdk';
+import type { CSS } from '../../theme.js';
+import type { Asset } from 'rango-types';
 
 type Notification = {
   route: { from: Asset; to: Asset };

package/src/containers/Notifications/index.ts

@@ -1 +1 @@
-export * from './Notifications';
+export * from './Notifications.js';

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

@@ -1,5 +1,5 @@
-import { Button, TextField, Typography } from '../../components';
-import { css, darkTheme, styled } from '../../theme';
+import { Button, TextField, Typography } from '../../components/index.js';
+import { css, darkTheme, styled } from '../../theme.js';
 
 export const textStyles = css();
 

package/src/containers/SwapInput/SwapInput.tsx

@@ -1,4 +1,4 @@
-import type { SwapInputPropTypes } from './SwapInput.types';
+import type { SwapInputPropTypes } from './SwapInput.types.js';
 
 import { i18n } from '@lingui/core';
 import React from 'react';
@@ -9,8 +9,8 @@ import {
   PriceImpact,
   Skeleton,
   Typography,
-} from '../../components';
-import { UI_ID } from '../../constants';
+} from '../../components/index.js';
+import { UI_ID } from '../../constants/index.js';
 
 import {
   amountStyles,
@@ -24,8 +24,8 @@ import {
   textStyles,
   UsdPrice,
   ValueTypography,
-} from './SwapInput.styles';
-import { TokenSection } from './TokenSection';
+} from './SwapInput.styles.js';
+import { TokenSection } from './TokenSection.js';
 
 export function SwapInput(props: SwapInputPropTypes) {
   const showBalance =

package/src/containers/SwapInput/SwapInput.types.ts

@@ -1,4 +1,4 @@
-import type { PriceImpactWarningLevel } from '../../components/PriceImpact/PriceImpact.types';
+import type { PriceImpactWarningLevel } from '../../components/PriceImpact/PriceImpact.types.js';
 
 export type BaseProps = {
   chain: {

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

@@ -1,6 +1,6 @@
-import { Button } from '../../components';
-import { ChainImageContainer } from '../../components/ChainToken/ChainToken.styles';
-import { css, darkTheme, styled } from '../../theme';
+import { ChainImageContainer } from '../../components/ChainToken/ChainToken.styles.js';
+import { Button } from '../../components/index.js';
+import { css, darkTheme, styled } from '../../theme.js';
 
 export const Container = styled(Button, {
   maxWidth: '180px',

package/src/containers/SwapInput/TokenSection.tsx

@@ -1,9 +1,14 @@
-import type { TokenSectionProps } from './TokenSection.types';
+import type { TokenSectionProps } from './TokenSection.types.js';
 
 import { i18n } from '@lingui/core';
 import React from 'react';
 
-import { ChainToken, Divider, Skeleton, Typography } from '../../components';
+import {
+  ChainToken,
+  Divider,
+  Skeleton,
+  Typography,
+} from '../../components/index.js';
 
 import {
   chainNameStyles,
@@ -11,7 +16,7 @@ import {
   skeletonStyles,
   tokenChainStyles,
   TokenSectionContainer,
-} from './TokenSection.styles';
+} from './TokenSection.styles.js';
 
 export function TokenSection(props: TokenSectionProps) {
   const {

package/src/containers/SwapInput/index.ts

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