@apify/ui-library 1.148.1-featuremigrateapifyuilibrary-48563e.21 → 1.149.0

package/src/components/code/one_line_code/one_line_code.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { OneLineCode, type OneLineCodeProps } from './one_line_code';
+import { OneLineCode, type OneLineCodeProps } from './one_line_code.js';
 
 /**
  * Stories for the OneLineCode component. This file showcases the

package/src/components/code/one_line_code/one_line_code.tsx

@@ -5,15 +5,15 @@ import { EyeIcon, EyeOffIcon } from '@apify/ui-icons';
 
 import type { HttpMethod } from '@apify-packages/types';
 
-import { theme } from '../../../design_system/theme';
+import { theme } from '../../../design_system/theme.js';
 import type { BoxProps } from '../../box';
-import { Text } from '../../text';
+import { Text } from '../../text/index.js';
 import type { SharedTextSize } from '../../text/text_shared';
-import { ActionButton, CopyButton } from '../action_button';
+import { ActionButton, CopyButton } from '../action_button.js';
 import type { SyntaxHighlighterBaseStylesWrapperProps } from '../code_block/code_block.styled';
-import { SyntaxHighlighterBaseStylesWrapper } from '../code_block/code_block.styled';
-import { getBashLinePrefixes } from '../code_block/utils';
-import { PrismSyntaxHighlighter } from '../prism_highlighter';
+import { SyntaxHighlighterBaseStylesWrapper } from '../code_block/code_block.styled.js';
+import { getBashLinePrefixes } from '../code_block/utils.js';
+import { PrismSyntaxHighlighter } from '../prism_highlighter.js';
 
 export const oneLineCodeClassNames = {
     gradientWrapper: 'OneLineCode-GradientWrapper',

package/src/components/code/prism_highlighter.tsx

@@ -6,11 +6,11 @@ import type { ReactNode } from 'react';
 import { forwardRef, useMemo, useRef } from 'react';
 import styled, { css } from 'styled-components';
 
-import { theme } from '../../design_system/theme';
-import { useSharedUiDependencies } from '../../ui_dependency_provider';
+import { theme } from '../../design_system/theme.js';
+import { useSharedUiDependencies } from '../../ui_dependency_provider.js';
 import type { SharedTextSize } from '../text';
-import { Text } from '../text';
-import { oneLightTheme } from './one_light_theme';
+import { Text } from '../text/index.js';
+import { oneLightTheme } from './one_light_theme.js';
 
 (typeof global !== 'undefined' ? global : window).Prism = Prism;
 
@@ -41,7 +41,7 @@ const loadLanguages = async () => {
         // @ts-expect-error The library is badly typed and does not export the type
         import('prismjs/components/prism-yaml.js'),
         // @ts-expect-error The library is badly typed and does not export the type
-        import('./prism_python'),
+        import('./prism_python.js'),
     ]);
 };
 

package/src/components/collapsible_card/collapsible_card.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { CollapsibleCard, type CollapsibleCardProps } from './collapsible_card';
+import { CollapsibleCard, type CollapsibleCardProps } from './collapsible_card.js';
 
 export default {
     title: 'UI-Library/Cards/CollapsibleCard',

package/src/components/collapsible_card/collapsible_card.tsx

@@ -5,9 +5,9 @@ import styled, { css } from 'styled-components';
 
 import { ChevronDownIcon } from '@apify/ui-icons';
 
-import { theme } from '../../design_system/theme';
+import { theme } from '../../design_system/theme.js';
 import type { WithTransientProps } from '../../type_utils';
-import { Box } from '../box';
+import { Box } from '../box/index.js';
 
 interface TransientWrapperProps {
     hideOuterBorder?: boolean;

package/src/components/collapsible_card/index.ts

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

package/src/components/color_wheel_gradient/color_wheel_gradient.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryContext, StoryObj } from '@storybook/react-vite';
 import type { ElementType } from 'react';
 
-import { ColorWheelGradient, type ColorWheelGradientProps } from './color_wheel_gradient';
+import { ColorWheelGradient, type ColorWheelGradientProps } from './color_wheel_gradient.js';
 
 const Wrapper = ({ children }: { children: React.ReactNode }) => (
     <div

package/src/components/color_wheel_gradient/index.ts

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

package/src/components/dropdown/dropdown.stories.tsx

@@ -3,9 +3,9 @@ import styled from 'styled-components';
 
 import { AnalyticsIcon, ArrowRightIcon, PeopleIcon, UnlockIcon } from '@apify/ui-icons';
 
-import { Dropdown } from './dropdown';
-import { DropdownButton } from './dropdown_button';
-import { DropdownShell } from './dropdown_shell';
+import { Dropdown } from './dropdown.js';
+import { DropdownButton } from './dropdown_button.js';
+import { DropdownShell } from './dropdown_shell.js';
 
 const CLASS_NAME_PREFIX = 'Dropdown';
 const elementClass = (name: string) => `${CLASS_NAME_PREFIX}-${name}`;

package/src/components/dropdown/dropdown.styled.ts

@@ -1,7 +1,7 @@
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import styled from 'styled-components';
 
-import { theme } from '../../design_system/theme';
+import { theme } from '../../design_system/theme.js';
 
 export const DROPDOWN_ELEMENT_CLASSES = {
     WRAPPER: 'dropdown-wrapper',

package/src/components/dropdown/dropdown.tsx

@@ -6,10 +6,10 @@ import styled from 'styled-components';
 
 import { CheckIcon } from '@apify/ui-icons';
 
-import { theme } from '../../design_system/theme';
-import { CheckboxPrimitive } from '../checkbox/checkbox';
-import { radioButtonStyle } from '../radio_button/radio_button.style';
-import { useDropdownContext } from './dropdown.context';
+import { theme } from '../../design_system/theme.js';
+import { CheckboxPrimitive } from '../checkbox/checkbox.js';
+import { radioButtonStyle } from '../radio_button/radio_button.style.js';
+import { useDropdownContext } from './dropdown.context.js';
 import {
     DROPDOWN_ELEMENT_CLASSES,
     StyledCheckboxIconWrapper,
@@ -25,9 +25,9 @@ import {
     StyledLabel,
     StyledSeparator,
     StyledTagWrapper,
-} from './dropdown.styled';
-import type { BaseDropdownItemProps } from './dropdown.types';
-import { DropdownRoot } from './dropdown_root';
+} from './dropdown.styled.js';
+import type { BaseDropdownItemProps } from './dropdown.types.js';
+import { DropdownRoot } from './dropdown_root.js';
 
 type DropdownItemProps = React.ComponentPropsWithRef<typeof DropdownMenu.Item> &
     BaseDropdownItemProps & {

package/src/components/dropdown/dropdown_button.tsx

@@ -1,10 +1,10 @@
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import { useState } from 'react';
 
-import { Button } from '../button/button';
-import { ScrollableContent, StyledContent } from './dropdown.styled';
-import type { BaseDropdownContentProps } from './dropdown.types';
-import { DropdownRoot } from './dropdown_root';
+import { Button } from '../button/button.js';
+import { ScrollableContent, StyledContent } from './dropdown.styled.js';
+import type { BaseDropdownContentProps } from './dropdown.types.js';
+import { DropdownRoot } from './dropdown_root.js';
 
 type DropdownButtonProps = BaseDropdownContentProps & {
     buttonProps?: Partial<React.ComponentPropsWithoutRef<typeof Button>>;

package/src/components/dropdown/dropdown_root.tsx

@@ -1,7 +1,7 @@
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import { useCallback, useState } from 'react';
 
-import { DropdownContext } from './dropdown.context';
+import { DropdownContext } from './dropdown.context.js';
 
 type DropdownRootProps = React.ComponentPropsWithRef<typeof DropdownMenu.Root> & {
     closeOnSelect?: boolean;

package/src/components/dropdown/dropdown_shell.tsx

@@ -10,10 +10,10 @@ import {
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import { type ReactNode, type RefObject, useCallback, useLayoutEffect } from 'react';
 
-import { theme } from '../../design_system/theme';
-import { DropdownContext } from './dropdown.context';
-import { ScrollableContent, StyledContent } from './dropdown.styled';
-import type { BaseDropdownContentProps } from './dropdown.types';
+import { theme } from '../../design_system/theme.js';
+import { DropdownContext } from './dropdown.context.js';
+import { ScrollableContent, StyledContent } from './dropdown.styled.js';
+import type { BaseDropdownContentProps } from './dropdown.types.js';
 
 export type DropdownShellProps = BaseDropdownContentProps & {
     children: ReactNode;

package/src/components/dropdown/index.ts

@@ -1,6 +1,6 @@
-export { Dropdown } from './dropdown';
-export { DropdownButton } from './dropdown_button';
-export { DropdownShell } from './dropdown_shell';
-export type { DropdownShellProps } from './dropdown_shell';
-export { DROPDOWN_ELEMENT_CLASSES } from './dropdown.styled';
-export type { BaseDropdownItemProps, BaseDropdownContentProps } from './dropdown.types';
+export { Dropdown } from './dropdown.js';
+export { DropdownButton } from './dropdown_button.js';
+export { DropdownShell } from './dropdown_shell.js';
+export type { DropdownShellProps } from './dropdown_shell.js';
+export { DROPDOWN_ELEMENT_CLASSES } from './dropdown.styled.js';
+export type { BaseDropdownItemProps, BaseDropdownContentProps } from './dropdown.types.js';

package/src/components/floating/floating_component_base.tsx

@@ -21,7 +21,7 @@ import {
 } from 'react';
 import styled from 'styled-components';
 
-import { theme } from '../../design_system/theme';
+import { theme } from '../../design_system/theme.js';
 
 export const classNames = {
     CHILDREN: 'FloatingComponent-children',

package/src/components/floating/index.ts

@@ -1,5 +1,5 @@
-export * from './menu';
-export * from './menu_components';
-export * from './menu_common';
-export * from './tooltip';
-export { FLOATING_PLACEMENT, type FloatingPlacement } from './floating_component_base';
+export * from './menu.js';
+export * from './menu_components.js';
+export * from './menu_common.js';
+export * from './tooltip.js';
+export { FLOATING_PLACEMENT, type FloatingPlacement } from './floating_component_base.js';

package/src/components/floating/menu.stories.tsx

@@ -3,7 +3,7 @@ import { forwardRef, useState } from 'react';
 import styled, { css } from 'styled-components';
 
 import { CheckboxPrimitive, RadioButtonPrimitive, Text } from '../';
-import { theme } from '../../design_system/theme';
+import { theme } from '../../design_system/theme.js';
 import {
     DropdownMenuBaseComponentWithCount,
     ListMenuComponent,

package/src/components/floating/menu.tsx

@@ -13,10 +13,10 @@ import clsx from 'clsx';
 import type React from 'react';
 import { useCallback, useMemo, useRef, useState } from 'react';
 
-import { Box, type BoxProps } from '../box';
-import { Text } from '../text';
-import { useFloatingMenu } from './menu_common';
-import { DropdownMenuBaseComponent, ListMenuComponent, ListMenuItemComponent } from './menu_components';
+import { Box, type BoxProps } from '../box/index.js';
+import { Text } from '../text/index.js';
+import { useFloatingMenu } from './menu_common.js';
+import { DropdownMenuBaseComponent, ListMenuComponent, ListMenuItemComponent } from './menu_components.js';
 
 export const menuClassNames = {
     WRAPPER: 'menu-wrapper',

package/src/components/floating/menu_components.tsx

@@ -5,10 +5,10 @@ import styled, { css } from 'styled-components';
 
 import { ChevronDownIcon, CrossIcon } from '@apify/ui-icons';
 
-import { theme } from '../../design_system/theme';
-import { Badge } from '../badge';
+import { theme } from '../../design_system/theme.js';
+import { Badge } from '../badge/index.js';
 import type { BoxProps } from '../box';
-import { Box } from '../box';
+import { Box } from '../box/index.js';
 
 export type FloatingContext = Pick<UseFloatingReturn<ReferenceType>, 'context'>['context'];
 

package/src/components/floating/tooltip.tsx

@@ -2,15 +2,15 @@ import { FloatingPortal, useHover, useInteractions } from '@floating-ui/react';
 import { type ComponentType, type ElementType, forwardRef, type ReactNode, useState } from 'react';
 import styled, { css } from 'styled-components';
 
-import { theme } from '../../design_system/theme';
-import { useSharedUiDependencies } from '../../ui_dependency_provider';
+import { theme } from '../../design_system/theme.js';
+import { useSharedUiDependencies } from '../../ui_dependency_provider.js';
 import {
     type FloatingComponentBaseProps,
     FloatingComponentWrapper,
     getFloatingPopupStyle,
     useFloatingPopup,
-} from './floating_component_base';
-import { TooltipContent } from './tooltip_content';
+} from './floating_component_base.js';
+import { TooltipContent } from './tooltip_content.js';
 
 export const TOOLTIP_TEXT_ALIGNS = {
     LEFT: 'left',

package/src/components/floating/tooltip_content.tsx

@@ -1,9 +1,9 @@
 import styled, { css } from 'styled-components';
 
-import { theme } from '../../design_system/theme';
-import { Shortcut } from '../shortcut';
+import { theme } from '../../design_system/theme.js';
+import { Shortcut } from '../shortcut/index.js';
 import type { TooltipProps, TooltipSize, TooltipTextAlign } from './tooltip';
-import { TOOLTIP_SIZES, TOOLTIP_TEXT_ALIGNS } from './tooltip';
+import { TOOLTIP_SIZES, TOOLTIP_TEXT_ALIGNS } from './tooltip.js';
 
 type ContentProps = Pick<TooltipProps, 'content' | 'shortcuts' | 'imageUrl' | 'subtleText' | 'size' | 'textAlign'>;
 

package/src/components/icon_button/icon_button.stories.tsx

@@ -5,7 +5,7 @@ import styled from 'styled-components';
 
 import { BellIcon, DeleteIcon, PeopleIcon } from '@apify/ui-icons';
 
-import { ICON_BUTTON_VARIANTS, IconButton, type IconButtonProps } from './icon_button';
+import { ICON_BUTTON_VARIANTS, IconButton, type IconButtonProps } from './icon_button.js';
 
 export default {
     title: 'UI-Library/IconButton',

package/src/components/icon_button/icon_button.tsx

@@ -5,7 +5,7 @@ import type { IconComponent, IconSize } from '@apify/ui-icons';
 
 import type { ValueOf } from '@apify-packages/types';
 
-import { theme } from '../../design_system/theme';
+import { theme } from '../../design_system/theme.js';
 import type { RegularBoxProps } from '../box';
 import {
     Button,
@@ -13,10 +13,10 @@ import {
     type ButtonSize,
     type RegularButtonProps,
     type TransientButtonProps,
-} from '../button';
-import { Tooltip } from '../floating';
-import { Link, type RegularLinkProps } from '../link';
-import { InlineSpinner, spinnerClassNames } from '../spinner';
+} from '../button/index.js';
+import { Tooltip } from '../floating/index.js';
+import { Link, type RegularLinkProps } from '../link/index.js';
+import { InlineSpinner, spinnerClassNames } from '../spinner/index.js';
 
 export const ICON_BUTTON_VARIANTS = {
     DEFAULT: 'DEFAULT',

package/src/components/icon_button/index.ts

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

package/src/components/image/image.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Image } from './image';
+import { Image } from './image.js';
 
 const meta: Meta<typeof Image> = {
     title: 'UI-Library/Image',

package/src/components/image/image.tsx

@@ -1,8 +1,8 @@
 import { forwardRef } from 'react';
 
 import type { ImageProxyOptions } from '../../ui_dependency_provider';
-import { useSharedUiDependencies } from '../../ui_dependency_provider';
-import { Box, type BoxProps } from '../box';
+import { useSharedUiDependencies } from '../../ui_dependency_provider.js';
+import { Box, type BoxProps } from '../box/index.js';
 
 type ImageProps = {
     src: string;

package/src/components/image/index.ts

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

package/src/components/index.ts

@@ -1,40 +1,40 @@
-export * from './text';
-export * from './box';
-export * from './avatar';
-export * from './card_container';
-export * from './message';
-export * from './floating';
-export * from './button';
-export * from './link';
-export * from './action_link';
-export * from './simple_markdown';
-export * from './code';
-export * from './color_wheel_gradient';
-export * from './readme_renderer';
-export * from './card';
-export * from './markdown';
-export * from './pagination';
-export * from './tab_number_chip';
-export * from './tile';
-export * from './blog_article';
-export * from './banner';
-export * from './actor_template_card';
-export * from './chip';
-export * from './image';
-export * from './rating';
-export * from './badge';
-export * from './tag';
-export * from './tabs';
-export * from './shortcut';
-export * from './icon_button';
-export * from './spinner';
-export * from './store';
-export * from './checkbox';
-export * from './radio_button';
-export * from './browser_window';
-export * from './collapsible_card';
-export * from './select';
-export * from './switch';
-export * from './table';
-export * from './breadcrumb';
-export * from './dropdown';
+export * from './text/index.js';
+export * from './box/index.js';
+export * from './avatar/index.js';
+export * from './card_container/index.js';
+export * from './message/index.js';
+export * from './floating/index.js';
+export * from './button/index.js';
+export * from './link/index.js';
+export * from './action_link/index.js';
+export * from './simple_markdown/index.js';
+export * from './code/index.js';
+export * from './color_wheel_gradient/index.js';
+export * from './readme_renderer/index.js';
+export * from './card/index.js';
+export * from './markdown/index.js';
+export * from './pagination/index.js';
+export * from './tab_number_chip/index.js';
+export * from './tile/index.js';
+export * from './blog_article/index.js';
+export * from './banner/index.js';
+export * from './actor_template_card/index.js';
+export * from './chip/index.js';
+export * from './image/index.js';
+export * from './rating/index.js';
+export * from './badge/index.js';
+export * from './tag/index.js';
+export * from './tabs/index.js';
+export * from './shortcut/index.js';
+export * from './icon_button/index.js';
+export * from './spinner/index.js';
+export * from './store/index.js';
+export * from './checkbox/index.js';
+export * from './radio_button/index.js';
+export * from './browser_window/index.js';
+export * from './collapsible_card/index.js';
+export * from './select/index.js';
+export * from './switch/index.js';
+export * from './table/index.js';
+export * from './breadcrumb/index.js';
+export * from './dropdown/index.js';

package/src/components/link/index.ts

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

package/src/components/link/link.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryContext, StoryObj } from '@storybook/react-vite';
 import type { ElementType } from 'react';
 
-import { Link, type LinkProps } from './link';
+import { Link, type LinkProps } from './link.js';
 
 // eslint-disable-next-line @stylistic/max-len
 const longText =

package/src/components/link/link.tsx

@@ -6,9 +6,9 @@ import styled from 'styled-components';
 
 import { ExternalLinkIcon } from '@apify/ui-icons';
 
-import { theme } from '../../design_system/theme';
-import { useSharedUiDependencies } from '../../ui_dependency_provider';
-import { Box, type BoxProps } from '../box';
+import { theme } from '../../design_system/theme.js';
+import { useSharedUiDependencies } from '../../ui_dependency_provider.js';
+import { Box, type BoxProps } from '../box/index.js';
 
 export type To = string | Partial<Path>;
 export interface RegularLinkProps {

package/src/components/markdown/index.ts

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

package/src/components/markdown/markdown.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Markdown, type MarkdownProps } from './markdown';
+import { Markdown, type MarkdownProps } from './markdown.js';
 
 export default {
     title: 'UI-Library/Markdown/Markdown',

package/src/components/markdown/markdown.tsx

@@ -10,13 +10,13 @@ import styled from 'styled-components';
 
 import { LinkIcon } from '@apify/ui-icons';
 
-import { Box } from '..';
 import type { UiThemeOption } from '../../design_system/theme';
-import { theme } from '../../design_system/theme';
-import { useCopyToClipboard } from '../../utils';
-import { CodeBlock, inlineCodeStyles, OneLineCode } from '../code';
-import { Link as SharedLink, type LinkProps } from '../link';
-import { cleanMarkdown, slugifyHeadingChildren } from '../readme_renderer';
+import { theme } from '../../design_system/theme.js';
+import { useCopyToClipboard } from '../../utils/index.js';
+import { CodeBlock, inlineCodeStyles, OneLineCode } from '../code/index.js';
+import { Box } from '../index.js';
+import { Link as SharedLink, type LinkProps } from '../link/index.js';
+import { cleanMarkdown, slugifyHeadingChildren } from '../readme_renderer/index.js';
 
 interface StyledReadmeProps {
     $scrollMarginTopPx: number;

package/src/components/message/index.ts

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

package/src/components/message/message.tsx

@@ -6,11 +6,11 @@ import styled, { css } from 'styled-components';
 import type { IconComponent as IconComponentType } from '@apify/ui-icons';
 import { CheckIcon, CrossIcon, InfoIcon, WarningTriangleIcon, XCircleIcon } from '@apify/ui-icons';
 
-import { theme } from '../../design_system/theme';
-import { Box, type BoxProps } from '../box';
+import { theme } from '../../design_system/theme.js';
+import { Box, type BoxProps } from '../box/index.js';
 import type { ButtonProps } from '../button';
-import { Button } from '../button';
-import { Text } from '../text';
+import { Button } from '../button/index.js';
+import { Text } from '../text/index.js';
 
 export const messageClassNames = {
     main: 'Message',

package/src/components/pagination/index.ts

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

package/src/components/pagination/pagination.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { PaginationButtons, type PaginationButtonsProps } from './pagination';
+import { PaginationButtons, type PaginationButtonsProps } from './pagination.js';
 
 export default {
     title: 'UI-Library/PaginationButtons',

package/src/components/pagination/pagination.tsx

@@ -4,9 +4,9 @@ import styled from 'styled-components';
 
 import { ChevronLeftIcon, ChevronRightIcon } from '@apify/ui-icons';
 
-import { theme } from '../../design_system/theme';
-import { Box } from '../box';
-import { Button } from '../button';
+import { theme } from '../../design_system/theme.js';
+import { Box } from '../box/index.js';
+import { Button } from '../button/index.js';
 
 const LEADING_THREE_DOTS_PAGE_KEY = -1;
 const TRAILING_THREE_DOTS_PAGE_KEY = -2;

package/src/components/radio_button/index.ts

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

package/src/components/radio_button/radio_button.stories.tsx

@@ -1,7 +1,7 @@
 import { type ComponentProps, useState } from 'react';
 import styled from 'styled-components';
 
-import { RadioButtonPrimitive } from './radio_button';
+import { RadioButtonPrimitive } from './radio_button.js';
 
 export default {
     title: 'UI-Library/Inputs/RadioButtonPrimitive',

package/src/components/radio_button/radio_button.style.ts

@@ -1,6 +1,6 @@
 import { css } from 'styled-components';
 
-import { theme } from '../../design_system/theme';
+import { theme } from '../../design_system/theme.js';
 
 export const radioButtonStyle = css`
     all: unset;

package/src/components/radio_button/radio_button.tsx

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import { type ComponentPropsWithoutRef, type FC } from 'react';
 import styled from 'styled-components';
 
-import { radioButtonStyle } from './radio_button.style';
+import { radioButtonStyle } from './radio_button.style.js';
 
 const RADIO_VALUE = 'checked';
 

package/src/components/rating/index.ts

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

package/src/components/rating/rating.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Rating, RatingStats, SingleStarRating } from './rating';
+import { Rating, RatingStats, SingleStarRating } from './rating.js';
 
 interface RatingProps {
     rating: number | undefined;