npm - @rango-dev/ui - Versions diffs - 0.37.1-next.1 → 0.38.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (937) hide show

package/src/components/Button/Button.types.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import type { ButtonBase } from './Button.styles.js';
+import type { ButtonBase } from './Button.styles';
 import type * as Stitches from '@stitches/react';
 import type { HTMLAttributes } from 'react';

package/src/components/Button/Ripple.tsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { RippleContainer } from './Button.styles.js';
+import { RippleContainer } from './Button.styles';
 const DURATION = 850;

package/src/components/Button/index.ts CHANGED Viewed

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

package/src/components/ChainToken/ChainToken.constants.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import type { ChainTokenPropTypes } from './ChainToken.types.js';
+import type { ChainTokenPropTypes } from './ChainToken.types';
 export const tokenChainSizeMap: {
   [key in ChainTokenPropTypes['size']]: { token: number; chain: number };

package/src/components/ChainToken/ChainToken.styles.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-import { darkTheme, styled } from '../../theme.js';
-import { Image } from '../common/index.js';
+import { darkTheme, styled } from '../../theme';
+import { Image } from '../common';
 export const Container = styled('div', {
   position: 'relative',

package/src/components/ChainToken/ChainToken.tsx CHANGED Viewed

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

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

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

package/src/components/ChainToken/index.ts CHANGED Viewed

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

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

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

package/src/components/Checkbox/Checkbox.tsx CHANGED Viewed

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

package/src/components/Checkbox/index.ts CHANGED Viewed

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

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

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

package/src/components/Chip/Chip.tsx CHANGED Viewed

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

package/src/components/Chip/index.ts CHANGED Viewed

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

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

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

package/src/components/Collapsible/Collapsible.tsx CHANGED Viewed

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

package/src/components/Collapsible/index.ts CHANGED Viewed

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

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

@@ -1,4 +1,4 @@
-import { styled } from '../../theme.js';
+import { styled } from '../../theme';
 export const DividerContainer = styled('div', {
   flexShrink: 0,
@@ -15,6 +15,7 @@ export const DividerContainer = styled('div', {
       24: {},
       30: {},
       32: {},
+      36: {},
       40: {},
     },
     direction: {
@@ -170,6 +171,20 @@ export const DividerContainer = styled('div', {
         width: '$32',
       },
     },
+    {
+      size: 36,
+      direction: 'vertical',
+      css: {
+        height: '$36',
+      },
+    },
+    {
+      size: 36,
+      direction: 'horizontal',
+      css: {
+        width: '$36',
+      },
+    },
     {
       size: 32,
       direction: 'vertical',

package/src/components/Divider/Divider.tsx CHANGED Viewed

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

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

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

package/src/components/Divider/index.ts CHANGED Viewed

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

package/src/components/Flags/Bengali.tsx CHANGED Viewed

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

package/src/components/Flags/Chinese.tsx CHANGED Viewed

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

package/src/components/Flags/English.tsx CHANGED Viewed

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

package/src/components/Flags/Finland.tsx CHANGED Viewed

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

package/src/components/Flags/French.tsx CHANGED Viewed

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

package/src/components/Flags/German.tsx CHANGED Viewed

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

package/src/components/Flags/Greece.tsx CHANGED Viewed

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

package/src/components/Flags/Hindi.tsx CHANGED Viewed

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

package/src/components/Flags/Indonesian.tsx CHANGED Viewed

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

package/src/components/Flags/Italian.tsx CHANGED Viewed

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

package/src/components/Flags/Japanese.tsx CHANGED Viewed

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

package/src/components/Flags/Malay.tsx CHANGED Viewed

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

package/src/components/Flags/Netherlands.tsx CHANGED Viewed

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

package/src/components/Flags/Poland.tsx CHANGED Viewed

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

package/src/components/Flags/Portuguese.tsx CHANGED Viewed

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

package/src/components/Flags/Russian.tsx CHANGED Viewed

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

package/src/components/Flags/Spanish.tsx CHANGED Viewed

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

package/src/components/Flags/Swedish.tsx CHANGED Viewed

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

package/src/components/Flags/Thai.tsx CHANGED Viewed

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

package/src/components/Flags/Turkish.tsx CHANGED Viewed

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

package/src/components/Flags/Ukrainian.tsx CHANGED Viewed

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

package/src/components/Flags/Vietnamese.tsx CHANGED Viewed

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

package/src/components/Flags/index.ts CHANGED Viewed

@@ -1,27 +1,27 @@
-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';
+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';
-export type { FlagPropTypes } from './Flags.types.js';
+export type { FlagPropTypes } from './Flags.types';
 export {
   English,

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

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

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

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

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

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

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

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