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

package/src/components/FullExpandedQuote/FullExpandedQuote.types.ts

@@ -1,11 +1,14 @@
-import type { SwapInputPropTypes } from '../../containers/SwapInput/SwapInput.types';
-import type { ChainTokenPropTypes } from '../ChainToken';
-import type { PriceImpactPropTypes } from '../PriceImpact/PriceImpact.types';
-import type { PropTypes as QuoteCostProps } from '../QuoteCost/QuoteCost.types';
-import type { InternalSwap, Step } from '../StepDetails/StepDetails.types';
-import type { NumericTooltipPropTypes, TooltipPropTypes } from '../Tooltip';
+import type { SwapInputPropTypes } from '../../containers/SwapInput/SwapInput.types.js';
+import type { ChainTokenPropTypes } from '../ChainToken/index.js';
+import type { PriceImpactPropTypes } from '../PriceImpact/PriceImpact.types.js';
+import type { PropTypes as QuoteCostProps } from '../QuoteCost/QuoteCost.types.js';
+import type { InternalSwap, Step } from '../StepDetails/StepDetails.types.js';
+import type {
+  NumericTooltipPropTypes,
+  TooltipPropTypes,
+} from '../Tooltip/index.js';
 import type { CSSProperties } from '@stitches/react';
-import type { RouteTag } from 'rango-sdk';
+import type { RouteTag } from 'rango-types/lib/api/main';
 
 type BaseProps = {
   percentageChange?: PriceImpactPropTypes['percentageChange'];

package/src/components/FullExpandedQuote/index.ts

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

package/src/components/Header/Header.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Header } from './Header';
+import { Header } from './Header.js';
 
 const meta: Meta<typeof Header> = {
   component: Header,

package/src/components/Header/Header.styles.ts

@@ -1,8 +1,8 @@
 import { globalCss } from '@stitches/react';
 
-import { darkTheme, styled } from '../../theme';
+import { darkTheme, styled } from '../../theme.js';
 
-import { HEADER_CORNDER_RADIUS } from './Header.constants';
+import { HEADER_CORNDER_RADIUS } from './Header.constants.js';
 
 export const globalHeaderStyles = globalCss({
   '.rng-scrolled': {

package/src/components/Header/Header.tsx

@@ -1,11 +1,11 @@
-import type { PropTypes } from './Header.types';
+import type { PropTypes } from './Header.types.js';
 import type { PropsWithChildren } from 'react';
 
 import React from 'react';
 
-import { Typography } from '../Typography';
+import { Typography } from '../Typography/index.js';
 
-import { Container, globalHeaderStyles, Suffix } from './Header.styles';
+import { Container, globalHeaderStyles, Suffix } from './Header.styles.js';
 
 export function Header({
   prefix,

package/src/components/Header/index.ts

@@ -1,2 +1,2 @@
-export { Header } from './Header';
-export { HEADER_CORNDER_RADIUS } from './Header.constants';
+export { Header } from './Header.js';
+export { HEADER_CORNDER_RADIUS } from './Header.constants.js';

package/src/components/I18nManager/I18nManager.tsx

@@ -11,21 +11,21 @@ import React, { useEffect, useReducer } from 'react';
  *  "translations/*": ["../../translations/*"]
  *}
  */
-import { messages as deMessages } from '../../../../../translations/de';
-import { messages as elMessages } from '../../../../../translations/el';
-import { messages as enMessages } from '../../../../../translations/en';
-import { messages as esMessages } from '../../../../../translations/es';
-import { messages as fiMessages } from '../../../../../translations/fi';
-import { messages as frMessages } from '../../../../../translations/fr';
-import { messages as itMessages } from '../../../../../translations/it';
-import { messages as jaMessages } from '../../../../../translations/ja';
-import { messages as nlMessages } from '../../../../../translations/nl';
-import { messages as plMessages } from '../../../../../translations/pl';
-import { messages as ptMessages } from '../../../../../translations/pt';
-import { messages as ruMessages } from '../../../../../translations/ru';
-import { messages as svMessages } from '../../../../../translations/sv';
-import { messages as ukMessages } from '../../../../../translations/uk';
-import { messages as zhMessages } from '../../../../../translations/zh';
+import { messages as deMessages } from '../../../../../translations/de.js';
+import { messages as elMessages } from '../../../../../translations/el.js';
+import { messages as enMessages } from '../../../../../translations/en.js';
+import { messages as esMessages } from '../../../../../translations/es.js';
+import { messages as fiMessages } from '../../../../../translations/fi.js';
+import { messages as frMessages } from '../../../../../translations/fr.js';
+import { messages as itMessages } from '../../../../../translations/it.js';
+import { messages as jaMessages } from '../../../../../translations/ja.js';
+import { messages as nlMessages } from '../../../../../translations/nl.js';
+import { messages as plMessages } from '../../../../../translations/pl.js';
+import { messages as ptMessages } from '../../../../../translations/pt.js';
+import { messages as ruMessages } from '../../../../../translations/ru.js';
+import { messages as svMessages } from '../../../../../translations/sv.js';
+import { messages as ukMessages } from '../../../../../translations/uk.js';
+import { messages as zhMessages } from '../../../../../translations/zh.js';
 
 const messages = {
   en: enMessages,

package/src/components/I18nManager/index.ts

@@ -1,2 +1,2 @@
-export { I18nManager } from './I18nManager';
-export type { Language } from './I18nManager';
+export { I18nManager } from './I18nManager.js';
+export type { Language } from './I18nManager.js';

package/src/components/IconButton/IconButton.tsx

@@ -1,9 +1,9 @@
-import type { IconButtonPropTypes } from './IconButton.types';
+import type { IconButtonPropTypes } from './IconButton.types.js';
 import type { PropsWithChildren, Ref } from 'react';
 
 import React from 'react';
 
-import { Button } from '../Button';
+import { Button } from '../Button/index.js';
 
 // border-radius: 100% + overflow: hidden
 function IconButtonComponent(

package/src/components/IconButton/IconButton.types.ts

@@ -1,4 +1,4 @@
-import type { ButtonPropTypes } from '../Button/Button.types';
+import type { ButtonPropTypes } from '../Button/Button.types.js';
 import type { CSSProperties } from 'react';
 
 export type IconButtonPropTypes = {

package/src/components/IconButton/index.ts

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

package/src/components/List/List.styles.tsx

@@ -1,4 +1,4 @@
-import { styled } from '../../theme';
+import { styled } from '../../theme.js';
 
 export const BaseList = styled('ul', {
   padding: 0,

package/src/components/List/List.tsx

@@ -1,10 +1,10 @@
-import type { ListPropTypes } from './List.types';
+import type { ListPropTypes } from './List.types.js';
 
 import React from 'react';
 
-import { ListItem } from '../ListItem';
+import { ListItem } from '../ListItem/index.js';
 
-import { BaseList } from './List.styles';
+import { BaseList } from './List.styles.js';
 
 function List(props: ListPropTypes) {
   return (

package/src/components/List/List.types.ts

@@ -1,4 +1,4 @@
-import type { ListItemPropTypes } from '../ListItem';
+import type { ListItemPropTypes } from '../ListItem/index.js';
 import type * as Stitches from '@stitches/react';
 import type React from 'react';
 

package/src/components/List/index.ts

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

package/src/components/ListItem/ListItem.styles.ts

@@ -1,4 +1,4 @@
-import { darkTheme, styled } from '../../theme';
+import { darkTheme, styled } from '../../theme.js';
 
 export const BaseListItem = styled('li', {
   width: '100%',

package/src/components/ListItem/ListItem.tsx

@@ -1,10 +1,10 @@
-import type { ListItemPropTypes } from './ListItem.types';
+import type { ListItemPropTypes } from './ListItem.types.js';
 
 import React from 'react';
 
-import { Typography } from '../Typography';
+import { Typography } from '../Typography/index.js';
 
-import { BaseListItem } from './ListItem.styles';
+import { BaseListItem } from './ListItem.styles.js';
 
 function ListItem(props: ListItemPropTypes) {
   const { start, title, description, end, onClick, hasDivider, ...restProps } =

package/src/components/ListItem/index.ts

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

package/src/components/ListItemButton/ListItemButton.styles.ts

@@ -1,5 +1,5 @@
-import { darkTheme, styled } from '../../theme';
-import { ListItem } from '../ListItem/ListItem';
+import { darkTheme, styled } from '../../theme.js';
+import { ListItem } from '../ListItem/ListItem.js';
 
 export const BaseListItemButton = styled(ListItem, {
   transition: 'all 0.35s',

package/src/components/ListItemButton/ListItemButton.tsx

@@ -1,8 +1,8 @@
-import type { ListItemButtonProps } from './ListItemButton.types';
+import type { ListItemButtonProps } from './ListItemButton.types.js';
 
 import React from 'react';
 
-import { BaseListItemButton } from './ListItemButton.styles';
+import { BaseListItemButton } from './ListItemButton.styles.js';
 
 function ListItemButton(props: ListItemButtonProps) {
   const { onClick, id, selected, ...restProps } = props;

package/src/components/ListItemButton/ListItemButton.types.ts

@@ -1,4 +1,4 @@
-import type { ListItemPropTypes } from '../ListItem';
+import type { ListItemPropTypes } from '../ListItem/index.js';
 import type { CSSProperties } from '@stitches/react';
 
 export type ListItemButtonProps = Omit<ListItemPropTypes, 'onClick'> & {

package/src/components/ListItemButton/index.ts

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

package/src/components/Logo/Logo.tsx

@@ -1,8 +1,8 @@
-import type { SvgIconProps } from '../SvgIcon';
+import type { SvgIconProps } from '../SvgIcon/index.js';
 
 import React from 'react';
 
-import { SvgWithColor } from '../SvgIcon/SvgIcon.style';
+import { SvgWithColor } from '../SvgIcon/SvgIcon.style.js';
 
 export function Logo(props: SvgIconProps) {
   const { size = '1em', color } = props;

package/src/components/Logo/index.tsx

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

package/src/components/MessageBox/CollapsibleMessageBox.styles.tsx

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

package/src/components/MessageBox/CollapsibleMessageBox.tsx

@@ -1,16 +1,16 @@
-import type { PropTypes } from './CollapsibleMessageBox.types';
+import type { PropTypes } from './CollapsibleMessageBox.types.js';
 import type { PropsWithChildren } from 'react';
 
 import * as Collapsible from '@radix-ui/react-collapsible';
 import React, { useState } from 'react';
 
-import { ChevronDownIcon, ChevronUpIcon } from '../../icons';
-import { CollapsibleContent } from '../common/styles';
-import { Divider } from '../Divider';
+import { ChevronDownIcon, ChevronUpIcon } from '../../icons/index.js';
+import { CollapsibleContent } from '../common/styles.js';
+import { Divider } from '../Divider/index.js';
 
-import { Trigger } from './CollapsibleMessageBox.styles';
+import { Trigger } from './CollapsibleMessageBox.styles.js';
 
-import { MessageBox } from '.';
+import { MessageBox } from './index.js';
 
 export function CollapsibleMessageBox(props: PropsWithChildren<PropTypes>) {
   const { description, status, title, children } = props;

package/src/components/MessageBox/CollapsibleMessageBox.types.tsx

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

package/src/components/MessageBox/DefaultMessageBox.tsx

@@ -1,13 +1,13 @@
-import type { PropTypes } from './MessageBox.types';
+import type { PropTypes } from './MessageBox.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 { Container, Description, IconHighlight } from './MessageBox.styles';
-import StatusIcon from './StatusIcon';
+import { Container, Description, IconHighlight } from './MessageBox.styles.js';
+import StatusIcon from './StatusIcon.js';
 
 export function MessageBox(props: PropsWithChildren<PropTypes>) {
   const { type, title, description, children, icon } = props;

package/src/components/MessageBox/MessageBox.styles.tsx

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

package/src/components/MessageBox/MessageBox.tsx

@@ -1,2 +1,2 @@
-export { MessageBox } from './DefaultMessageBox';
-export { CollapsibleMessageBox } from './CollapsibleMessageBox';
+export { MessageBox } from './DefaultMessageBox.js';
+export { CollapsibleMessageBox } from './CollapsibleMessageBox.js';

package/src/components/MessageBox/MessageBox.types.tsx

@@ -1,4 +1,4 @@
-import type { IconHighlight } from './MessageBox.styles';
+import type { IconHighlight } from './MessageBox.styles.js';
 import type * as Stitches from '@stitches/react';
 import type { ReactNode } from 'react';
 

package/src/components/MessageBox/StatusIcon.tsx

@@ -1,4 +1,4 @@
-import type { PropTypes } from './MessageBox.types';
+import type { PropTypes } from './MessageBox.types.js';
 
 import React from 'react';
 
@@ -7,8 +7,8 @@ import {
   ErrorIcon,
   InfoErrorIcon,
   WarningIcon,
-} from '../../icons';
-import { Spinner } from '../Spinner';
+} from '../../icons/index.js';
+import { Spinner } from '../Spinner/index.js';
 
 function StatusIcon(props: Pick<PropTypes, 'type'>) {
   switch (props.type) {

package/src/components/MessageBox/index.ts

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

package/src/components/Modal/Modal.styles.ts

@@ -1,5 +1,5 @@
-import { styled } from '../../theme';
-import { IconButton } from '../IconButton';
+import { styled } from '../../theme.js';
+import { IconButton } from '../IconButton/index.js';
 
 export const BackDrop = styled('div', {
   position: 'absolute',

package/src/components/Modal/Modal.tsx

@@ -1,14 +1,14 @@
-import type { ModalPropTypes } from './Modal.types';
+import type { ModalPropTypes } from './Modal.types.js';
 import type { PropsWithChildren } from 'react';
 
 import React, { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 
-import { CloseIcon } from '../../icons';
-import { BottomLogo } from '../BottomLogo';
-import { Divider } from '../Divider';
-import { IconButton } from '../IconButton/IconButton';
-import { Typography } from '../Typography';
+import { CloseIcon } from '../../icons/index.js';
+import { BottomLogo } from '../BottomLogo/index.js';
+import { Divider } from '../Divider/index.js';
+import { IconButton } from '../IconButton/index.js';
+import { Typography } from '../Typography/index.js';
 
 import {
   BackDrop,
@@ -17,7 +17,7 @@ import {
   Footer,
   ModalContainer,
   ModalHeader,
-} from './Modal.styles';
+} from './Modal.styles.js';
 
 const CLOSED_DELAY = 600;
 const OPEN_DELAY = 100;

package/src/components/Modal/Modal.types.ts

@@ -1,5 +1,5 @@
-import type { ModalContainer } from './Modal.styles';
-import type { config } from '../../theme';
+import type { ModalContainer } from './Modal.styles.js';
+import type { config } from '../../theme.js';
 import type * as Stitches from '@stitches/react';
 
 type BaseProps = Stitches.VariantProps<typeof ModalContainer>;

package/src/components/Modal/index.ts

@@ -1,3 +1,3 @@
-export { Modal } from './Modal';
-export { ModalHeader } from './Modal.styles';
-export type { ModalPropTypes } from './Modal.types';
+export { Modal } from './Modal.js';
+export { ModalHeader } from './Modal.styles.js';
+export type { ModalPropTypes } from './Modal.types.js';

package/src/components/NotFound/NotFound.styles.ts

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

package/src/components/NotFound/NotFound.tsx

@@ -1,12 +1,12 @@
-import type { NotFoundPropTypes } from './NotFound.types';
+import type { NotFoundPropTypes } from './NotFound.types.js';
 
 import React from 'react';
 
-import { SearchIcon } from '../../icons';
-import { Divider } from '../Divider';
-import { Typography } from '../Typography';
+import { SearchIcon } from '../../icons/index.js';
+import { Divider } from '../Divider/index.js';
+import { Typography } from '../Typography/index.js';
 
-import { Container } from './NotFound.styles';
+import { Container } from './NotFound.styles.js';
 
 export function NotFound(props: NotFoundPropTypes) {
   const { hasIcon = true, titleColor } = props;

package/src/components/NotFound/index.tsx

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

package/src/components/Popover/Popover.styles.ts

@@ -1,6 +1,6 @@
 import * as RadixPopover from '@radix-ui/react-popover';
 
-import { darkTheme, styled } from '../../theme';
+import { darkTheme, styled } from '../../theme.js';
 
 export const PopoverContainer = styled(RadixPopover.Content, {
   borderRadius: '$sm',

package/src/components/Popover/Popover.tsx

@@ -1,10 +1,10 @@
-import type { ContentType, PopoverPropTypes, Ref } from './Popover.types';
+import type { ContentType, PopoverPropTypes, Ref } from './Popover.types.js';
 import type { PropsWithChildren } from 'react';
 
 import * as RadixPopover from '@radix-ui/react-popover';
 import React from 'react';
 
-import { PopoverArrow, PopoverContainer } from './Popover.styles';
+import { PopoverArrow, PopoverContainer } from './Popover.styles.js';
 
 const DEFAULT_SIDE_OFFSET = 0;
 const DEFAULT_ALIGN_OFFSET = 0;

package/src/components/Popover/Popover.types.ts

@@ -1,4 +1,4 @@
-import type { CSS } from '../../theme';
+import type { CSS } from '../../theme.js';
 import type { ReactNode } from 'react';
 
 export type Ref =

package/src/components/Popover/index.ts

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

package/src/components/PriceImpact/PriceImpact.styles.ts

@@ -1,4 +1,4 @@
-import { darkTheme, styled } from '../../theme';
+import { darkTheme, styled } from '../../theme.js';
 
 export const Container = styled('div', {
   width: '100%',

package/src/components/PriceImpact/PriceImpact.tsx

@@ -1,10 +1,10 @@
-import type { PriceImpactPropTypes } from './PriceImpact.types';
+import type { PriceImpactPropTypes } from './PriceImpact.types.js';
 
 import React from 'react';
 
-import { Divider, NumericTooltip, Typography } from '..';
+import { Divider, NumericTooltip, Typography } from '../index.js';
 
-import { Container, ValueTypography } from './PriceImpact.styles';
+import { Container, ValueTypography } from './PriceImpact.styles.js';
 
 export function PriceImpact(props: PriceImpactPropTypes) {
   const {

package/src/components/PriceImpact/PriceImpact.types.ts

@@ -1,5 +1,5 @@
-import type { TooltipPropTypes } from '../Tooltip/Tooltip.types';
-import type { TypographyPropTypes } from '../Typography';
+import type { TooltipPropTypes } from '../Tooltip/Tooltip.types.js';
+import type { TypographyPropTypes } from '../Typography/index.js';
 
 export type PriceImpactWarningLevel = 'low' | 'high' | undefined;
 

package/src/components/PriceImpact/index.ts

@@ -1,5 +1,5 @@
-export { PriceImpact } from './PriceImpact';
+export { PriceImpact } from './PriceImpact.js';
 export type {
   PriceImpactWarningLevel,
   PriceImpactPropTypes,
-} from './PriceImpact.types';
+} from './PriceImpact.types.js';

package/src/components/QuoteCost/QuoteCost.styles.ts

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

package/src/components/QuoteCost/QuoteCost.tsx

@@ -1,18 +1,18 @@
-import type { PropTypes } from './QuoteCost.types';
+import type { PropTypes } from './QuoteCost.types.js';
 
 import React from 'react';
 
-import { GasIcon, NumberIcon, TimeIcon } from '../../icons';
-import { Divider } from '../Divider';
-import { Tooltip } from '../Tooltip';
-import { Typography } from '../Typography';
+import { GasIcon, NumberIcon, TimeIcon } from '../../icons/index.js';
+import { Divider } from '../Divider/index.js';
+import { Tooltip } from '../Tooltip/index.js';
+import { Typography } from '../Typography/index.js';
 
 import {
   Container,
   iconStyles,
   itemStyles,
   Separator,
-} from './QuoteCost.styles';
+} from './QuoteCost.styles.js';
 
 export function QuoteCost(props: PropTypes) {
   const {

package/src/components/QuoteCost/index.ts

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

package/src/components/QuoteTag/QuoteTag.styles.ts

@@ -1,4 +1,4 @@
-import { css, darkTheme, styled } from '../../theme';
+import { css, darkTheme, styled } from '../../theme.js';
 
 export const getLabelStyles = css({});
 

package/src/components/QuoteTag/QuoteTag.tsx

@@ -1,10 +1,10 @@
-import type { RouteTag, Tag } from 'rango-sdk';
+import type { RouteTag, Tag } from 'rango-types/lib/api/main';
 
 import React from 'react';
 
-import { Typography } from '../Typography';
+import { Typography } from '../Typography/index.js';
 
-import { getLabelStyles, TagContainer } from './QuoteTag.styles';
+import { getLabelStyles, TagContainer } from './QuoteTag.styles.js';
 
 export const QuoteTag = (props: RouteTag) => {
   const { value, label } = props;

package/src/components/QuoteTag/index.ts

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

package/src/components/Radio/Radio.styles.tsx

@@ -1,6 +1,6 @@
 import * as Radio from '@radix-ui/react-radio-group';
 
-import { darkTheme, styled } from '../../theme';
+import { darkTheme, styled } from '../../theme.js';
 
 export const StyledItem = styled(Radio.Item, {
   padding: '0',

package/src/components/Radio/Radio.tsx

@@ -1,8 +1,8 @@
-import type { RadioPropTypes } from './Radio.types';
+import type { RadioPropTypes } from './Radio.types.js';
 
 import React from 'react';
 
-import { StyledIndicator, StyledItem } from './Radio.styles';
+import { StyledIndicator, StyledItem } from './Radio.styles.js';
 
 export function Radio(props: RadioPropTypes) {
   const { value } = props;