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

package/src/components/table/table.styled.ts

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
-import { theme } from '../../design_system/theme.js';
-import { Box } from '../box/index.js';
+import { theme } from '../../design_system/theme';
+import { Box } from '../box';
 
 /** z-index for sticky table head cells. Consumers can override via CSS if needed. */
 const STICKY_HEAD_Z_INDEX = 5;

package/src/components/table/table.tsx

@@ -1,8 +1,8 @@
 import clsx from 'clsx';
 import type { FC, HTMLAttributes } from 'react';
 
-import { StyledTable, tableClassNames } from './table.styled.js';
-import { tableTestIds } from './table.test_ids.js';
+import { StyledTable, tableClassNames } from './table.styled';
+import { tableTestIds } from './table.test_ids';
 
 export const Table: FC<HTMLAttributes<HTMLTableElement>> = ({ className, ...rest }) => (
     <StyledTable data-test={tableTestIds.TABLE} className={clsx(tableClassNames.TABLE, className)} {...rest} />

package/src/components/table/table_body.tsx

@@ -1,8 +1,8 @@
 import clsx from 'clsx';
 import type { FC, HTMLAttributes } from 'react';
 
-import { tableClassNames } from './table.styled.js';
-import { tableTestIds } from './table.test_ids.js';
+import { tableClassNames } from './table.styled';
+import { tableTestIds } from './table.test_ids';
 
 export const TableBody: FC<HTMLAttributes<HTMLTableSectionElement>> = ({ className, ...rest }) => (
     <tbody data-test={tableTestIds.BODY} className={clsx(tableClassNames.BODY, className)} {...rest} />

package/src/components/table/table_cell.tsx

@@ -2,10 +2,10 @@ import clsx from 'clsx';
 import type { FC, TdHTMLAttributes } from 'react';
 import { useContext } from 'react';
 
-import { Link, type LinkProps } from '../link/index.js';
-import { TableRowLinkContext } from './table.context.js';
-import { tableClassNames } from './table.styled.js';
-import { tableTestIds } from './table.test_ids.js';
+import { Link, type LinkProps } from '../link';
+import { TableRowLinkContext } from './table.context';
+import { tableClassNames } from './table.styled';
+import { tableTestIds } from './table.test_ids';
 
 export const TableCell: FC<TdHTMLAttributes<HTMLTableCellElement>> = ({ className, children, ...rest }) => {
     const rowLink = useContext(TableRowLinkContext);

package/src/components/table/table_empty_row.tsx

@@ -1,7 +1,7 @@
 import type { FC, ReactNode } from 'react';
 
-import { tableClassNames } from './table.styled.js';
-import { tableTestIds } from './table.test_ids.js';
+import { tableClassNames } from './table.styled';
+import { tableTestIds } from './table.test_ids';
 
 export const TableEmptyRow: FC<{ colSpan: number; children: ReactNode }> = ({ colSpan, children }) => (
     <tr data-test={tableTestIds.EMPTY_ROW} className={tableClassNames.ROW_EMPTY}>

package/src/components/table/table_error_row.tsx

@@ -1,8 +1,8 @@
 import type { FC, ReactNode } from 'react';
 
-import { Text } from '../text/index.js';
-import { tableClassNames } from './table.styled.js';
-import { tableTestIds } from './table.test_ids.js';
+import { Text } from '../text';
+import { tableClassNames } from './table.styled';
+import { tableTestIds } from './table.test_ids';
 
 export const TableErrorRow: FC<{ colSpan: number; children?: ReactNode; error?: Error | null }> = ({
     colSpan,

package/src/components/table/table_expansion_row.tsx

@@ -1,8 +1,8 @@
 import clsx from 'clsx';
 import type { FC, ReactNode } from 'react';
 
-import { tableClassNames } from './table.styled.js';
-import { tableTestIds } from './table.test_ids.js';
+import { tableClassNames } from './table.styled';
+import { tableTestIds } from './table.test_ids';
 import type { TableExpansion } from './table.types';
 
 export const TableExpansionRow: FC<{

package/src/components/table/table_foot.tsx

@@ -1,8 +1,8 @@
 import clsx from 'clsx';
 import type { FC, HTMLAttributes } from 'react';
 
-import { tableClassNames } from './table.styled.js';
-import { tableTestIds } from './table.test_ids.js';
+import { tableClassNames } from './table.styled';
+import { tableTestIds } from './table.test_ids';
 
 export const TableFoot: FC<HTMLAttributes<HTMLTableSectionElement>> = ({ className, ...rest }) => (
     <tfoot data-test={tableTestIds.FOOT} className={clsx(tableClassNames.FOOT, className)} {...rest} />

package/src/components/table/table_head.tsx

@@ -1,8 +1,8 @@
 import clsx from 'clsx';
 import type { FC, HTMLAttributes } from 'react';
 
-import { tableClassNames } from './table.styled.js';
-import { tableTestIds } from './table.test_ids.js';
+import { tableClassNames } from './table.styled';
+import { tableTestIds } from './table.test_ids';
 
 export const TableHead: FC<HTMLAttributes<HTMLTableSectionElement>> = ({ className, ...rest }) => (
     <thead data-test={tableTestIds.HEAD} className={clsx(tableClassNames.HEAD, className)} {...rest} />

package/src/components/table/table_head_cell.tsx

@@ -1,8 +1,8 @@
 import clsx from 'clsx';
 import type { FC, ThHTMLAttributes } from 'react';
 
-import { tableClassNames } from './table.styled.js';
-import { tableTestIds } from './table.test_ids.js';
+import { tableClassNames } from './table.styled';
+import { tableTestIds } from './table.test_ids';
 
 export const TableHeadCell: FC<ThHTMLAttributes<HTMLTableCellElement>> = ({ className, ...rest }) => (
     <th data-test={tableTestIds.HEAD_CELL} className={clsx(tableClassNames.HEAD_CELL, className)} {...rest} />

package/src/components/table/table_head_row.tsx

@@ -1,8 +1,8 @@
 import clsx from 'clsx';
 import type { FC, HTMLAttributes } from 'react';
 
-import { tableClassNames } from './table.styled.js';
-import { tableTestIds } from './table.test_ids.js';
+import { tableClassNames } from './table.styled';
+import { tableTestIds } from './table.test_ids';
 
 export const TableHeadRow: FC<HTMLAttributes<HTMLTableRowElement>> = ({ className, ...rest }) => (
     <tr data-test={tableTestIds.HEAD_ROW} className={clsx(tableClassNames.HEAD_ROW, className)} {...rest} />

package/src/components/table/table_loading_row.tsx

@@ -1,8 +1,8 @@
 import type { FC, ReactNode } from 'react';
 
-import { InlineSpinner } from '../spinner/index.js';
-import { tableClassNames } from './table.styled.js';
-import { tableTestIds } from './table.test_ids.js';
+import { InlineSpinner } from '../spinner';
+import { tableClassNames } from './table.styled';
+import { tableTestIds } from './table.test_ids';
 
 export const TableLoadingRow: FC<{ colSpan: number; children?: ReactNode }> = ({ colSpan, children }) => (
     <tr data-test={tableTestIds.LOADING_ROW} className={tableClassNames.ROW_EMPTY}>

package/src/components/table/table_row.tsx

@@ -1,9 +1,9 @@
 import clsx from 'clsx';
 import type { FC } from 'react';
 
-import { TableRowLinkContext } from './table.context.js';
-import { tableClassNames } from './table.styled.js';
-import { tableTestIds } from './table.test_ids.js';
+import { TableRowLinkContext } from './table.context';
+import { tableClassNames } from './table.styled';
+import { tableTestIds } from './table.test_ids';
 import type { TableRowProps } from './table.types';
 
 export const TableRow: FC<TableRowProps> = ({ className, clickable, expanded, to, ...rest }) => {

package/src/components/table/table_wrapper.tsx

@@ -1,9 +1,9 @@
 import type { FC } from 'react';
 import { useCallback, useEffect, useRef } from 'react';
 
-import { Box } from '../box/index.js';
-import { StyledHorizontallyScrollableTableWrapper, StyledTableFooterWrapper, tableClassNames } from './table.styled.js';
-import { tableTestIds } from './table.test_ids.js';
+import { Box } from '../box';
+import { StyledHorizontallyScrollableTableWrapper, StyledTableFooterWrapper, tableClassNames } from './table.styled';
+import { tableTestIds } from './table.test_ids';
 import type { HorizontallyScrollableTableWrapperProps } from './table.types';
 
 export const HorizontallyScrollableTableWrapper: FC<HorizontallyScrollableTableWrapperProps> = ({

package/src/components/tabs/index.ts

@@ -1,2 +1,2 @@
-export * from './tabs.js';
-export * from './tab.js';
+export * from './tabs';
+export * from './tab';

package/src/components/tabs/tab.stories.tsx

@@ -4,8 +4,8 @@ import styled from 'styled-components';
 
 import { PlaceholderIcon } from '@apify/ui-icons';
 
-import { Tab as TabComponent, type TabVariant } from './tab.js';
-import { Tabs as TabsComponent } from './tabs.js';
+import { Tab as TabComponent, type TabVariant } from './tab';
+import { Tabs as TabsComponent } from './tabs';
 
 const meta: Meta<typeof TabComponent> = {
     title: 'UI-Library/Tab',

package/src/components/tabs/tab.tsx

@@ -5,16 +5,16 @@ import styled, { css } from 'styled-components';
 
 import type { IconComponent } from '@apify/ui-icons';
 
-import { theme } from '../../design_system/theme.js';
+import { theme } from '../../design_system/theme';
 import type { WithTransientProps } from '../../type_utils';
 import type { FlattenSimpleInterpolation } from '../../utils/type_utils';
 import type { BadgeSize } from '../badge';
-import { Badge } from '../badge/index.js';
+import { Badge } from '../badge';
 import type { MarginSpacingProps, RegularBoxProps } from '../box';
 import type { RegularLinkProps } from '../link';
-import { Link } from '../link/index.js';
+import { Link } from '../link';
 import type { SharedTextSize } from '../text';
-import { Text } from '../text/index.js';
+import { Text } from '../text';
 
 type SharedTabProps = Omit<RegularBoxProps, 'as' | 'onClick'> &
     MarginSpacingProps &

package/src/components/tabs/tabs.tsx

@@ -2,14 +2,14 @@ import type React from 'react';
 import { useCallback, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
 
-import { theme } from '../../design_system/theme.js';
+import { theme } from '../../design_system/theme';
 import type { WithTransientProps } from '../../type_utils';
-import { useResizeObserverSsr } from '../../utils/resize_observer.js';
+import { useResizeObserverSsr } from '../../utils/resize_observer';
 import type { FlattenSimpleInterpolation } from '../../utils/type_utils';
 import type { MarginSpacingProps, RegularBoxProps } from '../box';
-import { Box } from '../box/index.js';
+import { Box } from '../box';
 import type { TabData, TabVariant } from './tab';
-import { Tab } from './tab.js';
+import { Tab } from './tab';
 
 type SharedTabsProps = Omit<RegularBoxProps, 'as' | 'onClick'> & MarginSpacingProps;
 export type TabsProps = SharedTabsProps & {

package/src/components/tag/index.ts

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

package/src/components/tag/tag.tsx

@@ -4,14 +4,14 @@ import styled, { css } from 'styled-components';
 
 import type { IconComponent, IconSize } from '@apify/ui-icons';
 
-import { theme } from '../../design_system/theme.js';
+import { theme } from '../../design_system/theme';
 import type { WithTransientProps } from '../../type_utils';
 import type { FlattenSimpleInterpolation } from '../../utils/type_utils';
-import { Box, type MarginSpacingProps, type RegularBoxProps } from '../box/index.js';
+import { Box, type MarginSpacingProps, type RegularBoxProps } from '../box';
 import type { RegularButtonProps } from '../button';
-import { Link, type RegularLinkProps } from '../link/index.js';
-import { Text } from '../text/index.js';
-import { type SharedTextSize, type SharedTextType } from '../text/index.js';
+import { Link, type RegularLinkProps } from '../link';
+import { Text } from '../text';
+import { type SharedTextSize, type SharedTextType } from '../text';
 
 type TagSize = SharedTextSize;
 export const TAG_SIZES: TagSize[] = ['big', 'regular', 'small'];

package/src/components/tag.tsx

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

package/src/components/text/heading_content.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import styled from 'styled-components';
 
-import { HeadingContent, type HeadingContentProps } from './heading_content.js';
+import { HeadingContent, type HeadingContentProps } from './heading_content';
 
 export default {
     title: 'Design Tokens/Typography/HeadingContent',

package/src/components/text/heading_content.tsx

@@ -1,10 +1,10 @@
 import type React from 'react';
 import styled, { css } from 'styled-components';
 
-import { theme } from '../../design_system/theme.js';
+import { theme } from '../../design_system/theme';
 import type { WithTransientProps } from '../../type_utils';
 import type { TextBaseProps } from './text_base';
-import { TextBaseComponent } from './text_base.js';
+import { TextBaseComponent } from './text_base';
 
 type HeadingContentType = 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6';
 

package/src/components/text/heading_marketing.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import styled from 'styled-components';
 
-import { HeadingMarketing, type HeadingMarketingProps } from './heading_marketing.js';
+import { HeadingMarketing, type HeadingMarketingProps } from './heading_marketing';
 
 export default {
     title: 'Design Tokens/Typography/HeadingMarketing',

package/src/components/text/heading_marketing.tsx

@@ -1,10 +1,10 @@
 import type React from 'react';
 import styled from 'styled-components';
 
-import { theme } from '../../design_system/theme.js';
+import { theme } from '../../design_system/theme';
 import type { WithTransientProps } from '../../type_utils';
 import type { TextBaseProps } from './text_base';
-import { TextBaseComponent } from './text_base.js';
+import { TextBaseComponent } from './text_base';
 
 type HeadingMarketingType =
     | 'titleXs'

package/src/components/text/heading_shared.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import styled from 'styled-components';
 
-import { HeadingShared, type HeadingSharedProps } from './heading_shared.js';
+import { HeadingShared, type HeadingSharedProps } from './heading_shared';
 
 export default {
     title: 'Design Tokens/Typography/HeadingShared',

package/src/components/text/heading_shared.tsx

@@ -1,10 +1,10 @@
 import type React from 'react';
 import styled from 'styled-components';
 
-import { theme } from '../../design_system/theme.js';
+import { theme } from '../../design_system/theme';
 import type { WithTransientProps } from '../../type_utils';
 import type { TextBaseProps } from './text_base';
-import { TextBaseComponent } from './text_base.js';
+import { TextBaseComponent } from './text_base';
 
 type HeadingSharedType = 'titleXs' | 'titleS' | 'titleM' | 'titleL' | 'titleXl' | 'title2xl' | 'title3xl';
 

package/src/components/text/index.ts

@@ -1,12 +1,12 @@
-import { HeadingShared } from './heading_shared.js';
+import { HeadingShared } from './heading_shared';
 import type { SharedTextProps } from './text_shared';
-import { SHARED_TEXT_TYPES, TextShared } from './text_shared.js';
+import { SHARED_TEXT_TYPES, TextShared } from './text_shared';
 
-export * from './text_base.js';
-export * from './text_content.js';
-export * from './text_marketing.js';
-export * from './heading_content.js';
-export * from './heading_marketing.js';
+export * from './text_base';
+export * from './text_content';
+export * from './text_marketing';
+export * from './heading_content';
+export * from './heading_marketing';
 
 export {
     TextShared as Text, // Shared typography is the default
@@ -16,5 +16,5 @@ export {
 };
 
 export type { SharedTextProps };
-export type { SharedTextSize, SharedTextType } from './text_shared.js';
-export type { HeadingSharedProps } from './heading_shared.js';
+export type { SharedTextSize, SharedTextType } from './text_shared';
+export type { HeadingSharedProps } from './heading_shared';

package/src/components/text/text_base.tsx

@@ -3,7 +3,7 @@ import styled, { css } from 'styled-components';
 
 import type { WithTransientProps } from '../../type_utils';
 import type { BoxProps } from '../box';
-import { Box } from '../box/index.js';
+import { Box } from '../box';
 
 export interface TransientTextBaseProps {
     italic?: boolean;

package/src/components/text/text_content.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import styled from 'styled-components';
 
-import { type ContentTextProps, TextContent } from './text_content.js';
+import { type ContentTextProps, TextContent } from './text_content';
 
 export default {
     title: 'Design Tokens/Typography/TextContent',

package/src/components/text/text_content.tsx

@@ -1,11 +1,11 @@
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 
-import { theme } from '../../design_system/theme.js';
+import { theme } from '../../design_system/theme';
 import type { WithTransientProps } from '../../type_utils';
 import type { FlattenSimpleInterpolation } from '../../utils/type_utils';
 import type { TextBaseProps } from './text_base';
-import { TextBaseComponent } from './text_base.js';
+import { TextBaseComponent } from './text_base';
 
 export type ContentTextType = 'paragraph' | 'snippet';
 export type ContentTextWeight = 'normal' | 'bold';

package/src/components/text/text_marketing.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import styled from 'styled-components';
 
-import { type MarketingTextProps, TextMarketing } from './text_marketing.js';
+import { type MarketingTextProps, TextMarketing } from './text_marketing';
 
 export default {
     title: 'Design Tokens/Typography/TextMarketing',

package/src/components/text/text_marketing.tsx

@@ -1,11 +1,11 @@
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 
-import { theme } from '../../design_system/theme.js';
+import { theme } from '../../design_system/theme';
 import type { WithTransientProps } from '../../type_utils';
 import type { FlattenSimpleInterpolation } from '../../utils/type_utils';
 import type { TextBaseProps } from './text_base';
-import { TextBaseComponent } from './text_base.js';
+import { TextBaseComponent } from './text_base';
 
 export type MarketingTextSize = 'large' | 'regular' | 'small' | 'extraSmall';
 export type MarketingTextWeight = 'normal' | 'medium' | 'bold';

package/src/components/text/text_shared.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import styled from 'styled-components';
 
-import { type SharedTextProps, TextShared } from './text_shared.js';
+import { type SharedTextProps, TextShared } from './text_shared';
 
 export default {
     title: 'Design Tokens/Typography/TextShared',

package/src/components/text/text_shared.tsx

@@ -1,10 +1,10 @@
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 
-import { theme } from '../../design_system/theme.js';
+import { theme } from '../../design_system/theme';
 import type { WithTransientProps } from '../../type_utils';
 import type { TextBaseProps } from './text_base';
-import { TextBaseComponent } from './text_base.js';
+import { TextBaseComponent } from './text_base';
 
 export const SHARED_TEXT_TYPES = ['body', 'code'] as const;
 export type SharedTextType = (typeof SHARED_TEXT_TYPES)[number];

package/src/components/tile/horizontal_tile.stories.tsx

@@ -3,9 +3,9 @@ import styled from 'styled-components';
 
 import { ChevronRightIcon, DeleteIcon, SettingsIcon, StarFullIcon } from '@apify/ui-icons';
 
-import { TextShared } from '../text/index.js';
-import { HorizontalTile } from './horizontal_tile.js';
-import { TILE_SIZES } from './shared.js';
+import { TextShared } from '../text';
+import { HorizontalTile } from './horizontal_tile';
+import { TILE_SIZES } from './shared';
 
 export default {
     title: 'UI-Library/Tile/HorizontalTile',

package/src/components/tile/horizontal_tile.tsx

@@ -1,9 +1,9 @@
 import type React from 'react';
 import styled from 'styled-components';
 
-import { theme } from '../../design_system/theme.js';
+import { theme } from '../../design_system/theme';
 import type { TileSharedProps, TileSizesType } from './shared';
-import { TILE_SIZES, tileStyle } from './shared.js';
+import { TILE_SIZES, tileStyle } from './shared';
 
 interface HorizontalTileProps extends TileSharedProps {
     icon?: React.ReactNode;

package/src/components/tile/index.ts

@@ -1,2 +1,2 @@
-export * from './horizontal_tile.js';
-export * from './vertical_tile.js';
+export * from './horizontal_tile';
+export * from './vertical_tile';

package/src/components/tile/shared.ts

@@ -1,6 +1,6 @@
 import { css } from 'styled-components';
 
-import { theme } from '../../design_system/theme.js';
+import { theme } from '../../design_system/theme';
 
 export const TILE_SIZES = {
     SMALL: 'S',

package/src/components/tile/vertical_tile.stories.tsx

@@ -3,10 +3,10 @@ import styled from 'styled-components';
 
 import { CheckCircleIcon, SettingsIcon, StarFullIcon } from '@apify/ui-icons';
 
-import { Button } from '../button/index.js';
-import { TextShared } from '../text/index.js';
-import { TILE_SIZES } from './shared.js';
-import { VerticalTile } from './vertical_tile.js';
+import { Button } from '../button';
+import { TextShared } from '../text';
+import { TILE_SIZES } from './shared';
+import { VerticalTile } from './vertical_tile';
 
 export default {
     title: 'UI-Library/Tile/VerticalTile',

package/src/components/tile/vertical_tile.tsx

@@ -1,9 +1,9 @@
 import type React from 'react';
 import styled from 'styled-components';
 
-import { theme } from '../../design_system/theme.js';
+import { theme } from '../../design_system/theme';
 import type { TileSharedProps, TileSizesType } from './shared';
-import { TILE_SIZES, tileStyle } from './shared.js';
+import { TILE_SIZES, tileStyle } from './shared';
 
 interface VerticalTileProps extends TileSharedProps {
     content: React.ReactNode;

package/src/design_system/colors/colors.stories.tsx

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import type { CSSProperties, ReactNode } from 'react';
 
-import { theme } from '../theme.js';
-import { cssColorsVariablesDark, cssColorsVariablesLight, darkTheme, lightTheme } from './index.js';
+import { cssColorsVariablesDark, cssColorsVariablesLight, darkTheme, lightTheme } from '.';
+import { theme } from '../theme';
 
 type ColorToken = {
     name: string;

package/src/design_system/colors/index.ts

@@ -1,7 +1,7 @@
-export { tokens as cssColorsVariablesLight } from './generated/css_variables.light.js';
-export { tokens as cssColorsVariablesDark } from './generated/css_variables.dark.js';
-export { tokens as cssColorsVariablesPaletteLight } from './generated/css_variables_palette.light.js';
-export { tokens as cssColorsVariablesPaletteDark } from './generated/css_variables_palette.dark.js';
-export { darkTheme } from './generated/colors_theme.dark.js';
-export { lightTheme } from './generated/colors_theme.light.js';
-export { colorProperties } from './generated/properties_theme.js';
+export { tokens as cssColorsVariablesLight } from './generated/css_variables.light';
+export { tokens as cssColorsVariablesDark } from './generated/css_variables.dark';
+export { tokens as cssColorsVariablesPaletteLight } from './generated/css_variables_palette.light';
+export { tokens as cssColorsVariablesPaletteDark } from './generated/css_variables_palette.dark';
+export { darkTheme } from './generated/colors_theme.dark';
+export { lightTheme } from './generated/colors_theme.light';
+export { colorProperties } from './generated/properties_theme';

package/src/design_system/theme.ts

@@ -1,6 +1,6 @@
-import { colorProperties, darkTheme, lightTheme } from './colors/index.js';
-import { devices, layouts, radiuses, shadows, spaces, transitions } from './tokens/index.js';
-import { typographyTokens } from './typography_theme.js';
+import { colorProperties, darkTheme, lightTheme } from './colors';
+import { devices, layouts, radiuses, shadows, spaces, transitions } from './tokens';
+import { typographyTokens } from './typography_theme';
 
 export const theme = {
     color: colorProperties,

package/src/design_system/tokens/index.ts

@@ -1,5 +1,5 @@
-export * from './layouts.js';
-export * from './spaces.js';
-export * from './shadows.js';
-export * from './radiuses.js';
-export * from './transitions.js';
+export * from './layouts';
+export * from './spaces';
+export * from './shadows';
+export * from './radiuses';
+export * from './transitions';

package/src/design_system/tokens/radiuses.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { theme } from '../theme.js';
-import { radiuses } from './radiuses.js';
+import { theme } from '../theme';
+import { radiuses } from './radiuses';
 
 const RadiusesShowcase = () => (
     <div

package/src/design_system/tokens/shadows.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { theme } from '../theme.js';
-import { shadows } from './shadows.js';
+import { theme } from '../theme';
+import { shadows } from './shadows';
 
 const ShadowsShowcase = () => (
     <div

package/src/design_system/tokens/spaces.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { theme } from '../theme.js';
-import { spaces } from './spaces.js';
+import { theme } from '../theme';
+import { spaces } from './spaces';
 
 const SpacesShowcase = ({ space }: { space: keyof typeof spaces }) => {
     const value = spaces[space];