@apify/ui-library 1.147.10 → 1.147.12-featuremigrateapifyuilibrary-48563e.21

package/package.json

@@ -1,9 +1,10 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.147.10",
+    "version": "1.147.12-featuremigrateapifyuilibrary-48563e.21+36d9d5ae3fa",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
+    "sideEffects": false,
     "main": "dist/src/index.js",
     "types": "dist/src/index.d.ts",
     "publishConfig": {
@@ -17,8 +18,8 @@
         "lint:fix": "oxlint --type-aware --fix .",
         "build": "pnpm run clean && pnpm run compile",
         "clean": "rimraf ./dist",
-        "compile": "tsc -p tsconfig.build.json",
-        "type-check": "tsc --noEmit",
+        "compile": "pnpm run type-check && vite build",
+        "type-check": "tsc --noEmit -p tsconfig.build.json",
         "generate-theme": "node src/codemods/generate_typograpy_tokens_files.mjs  && pnpm run lint:fix",
         "build-color-tokens": "node src/design_system/colors/build_color_tokens.js",
         "postpublish": "rimraf ./dist"
@@ -61,22 +62,25 @@
         "styled-components": "^6.1.19"
     },
     "devDependencies": {
-        "@apify-packages/types": "^3.383.0",
+        "@apify-packages/types": "^3.384.0",
         "@storybook/react-vite": "^10.3.5",
         "@testing-library/react": "^16.3.2",
         "@types/hast": "^3.0.4",
         "@types/lodash": "^4.14.200",
         "@types/react": "19.2.2",
+        "@vitejs/plugin-react-swc": "^4.3.1",
         "jest-styled-components": "^7.4.0",
         "jsdom": "^29.1.1",
         "recast": "^0.23.9",
         "style-dictionary": "^4.4.0",
-        "styled-components": "^6.1.19"
+        "styled-components": "^6.1.19",
+        "vite": "^8.0.14",
+        "vite-plugin-dts": "^5.0.1"
     },
     "files": [
         "dist",
         "src",
         "style"
     ],
-    "gitHead": "c827ce390fbb864ce8988f955d5f46a52a82e56b"
+    "gitHead": "36d9d5ae3fa27d7003706879bb29dd83a0935343"
 }

package/src/components/action_link/action_link.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import type { ComponentProps } from 'react';
 
-import { ActionLink, BackLink } from './action_link.js';
+import { ActionLink, BackLink } from './action_link';
 
 type ActionLinkProps = ComponentProps<typeof ActionLink>;
 type BackLinkProps = ComponentProps<typeof BackLink>;

package/src/components/action_link/action_link.tsx

@@ -5,10 +5,10 @@ import { ArrowLeftIcon, ArrowRightIcon } from '@apify/ui-icons';
 
 import type { RequiredBy } from '@apify-packages/types';
 
-import { theme } from '../../design_system/theme.js';
-import { Box, type BoxProps } from '../box/index.js';
-import { Link, type LinkProps, StyledAsLink } from '../link/index.js';
-import { Heading } from '../text/index.js';
+import { theme } from '../../design_system/theme';
+import { Box, type BoxProps } from '../box';
+import { Link, type LinkProps, StyledAsLink } from '../link';
+import { Heading } from '../text';
 
 const StyledGuidepost = styled(Box)<{ $isBackLink: boolean }>`
     display: inline-flex;

package/src/components/action_link/index.ts

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

package/src/components/actor_template_card/actor_template_card.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import type React from 'react';
 
-import { ActorTemplateCard } from './actor_template_card.js';
+import { ActorTemplateCard } from './actor_template_card';
 
 // Define the props interface for the component
 interface ActorTemplateCardProps {

package/src/components/actor_template_card/actor_template_card.tsx

@@ -1,10 +1,10 @@
 import type React from 'react';
 import styled from 'styled-components';
 
-import { theme } from '../../design_system/theme.js';
-import { Badge } from '../badge/index.js';
-import { TextMarketing } from '../text/index.js';
-import { VerticalTile } from '../tile/index.js';
+import { theme } from '../../design_system/theme';
+import { Badge } from '../badge';
+import { TextMarketing } from '../text';
+import { VerticalTile } from '../tile';
 
 interface ActorTemplateCardProps {
     id: string;

package/src/components/actor_template_card/index.ts

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

package/src/components/avatar/actor_avatar.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { ActorAvatar } from './actor_avatar.js';
+import { ActorAvatar } from './actor_avatar';
 
 const meta = {
     title: 'UI-Library/Avatar/ActorAvatar',

package/src/components/avatar/actor_avatar.tsx

@@ -3,10 +3,10 @@ import type { FC, RefCallback } from 'react';
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
 
-import { theme } from '../../design_system/theme.js';
-import { useSharedUiDependencies } from '../../ui_dependency_provider.js';
-import { useImageColor } from '../../utils/image_color.js';
-import { BoringAvatarMarble } from './boring_avatar.js';
+import { theme } from '../../design_system/theme';
+import { useSharedUiDependencies } from '../../ui_dependency_provider';
+import { useImageColor } from '../../utils/image_color';
+import { BoringAvatarMarble } from './boring_avatar';
 
 export const actorAvatarClassnames = {
     BASE: 'ActorAvatar',

package/src/components/avatar/index.ts

@@ -1,2 +1,2 @@
-export * from './actor_avatar.js';
-export * from './user_avatar.js';
+export * from './actor_avatar';
+export * from './user_avatar';

package/src/components/avatar/user_avatar.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import React from 'react';
 import styled from 'styled-components';
 
-import { UserAvatar } from './user_avatar.js';
+import { UserAvatar } from './user_avatar';
 
 const meta = {
     title: 'UI-Library/Avatar/UserAvatar',

package/src/components/avatar/user_avatar.tsx

@@ -3,9 +3,9 @@ import type { FC } from 'react';
 import React, { useEffect } from 'react';
 import styled from 'styled-components';
 
-import { theme } from '../../design_system/theme.js';
-import { useSharedUiDependencies } from '../../ui_dependency_provider.js';
-import { BoringAvatarSolid } from './boring_avatar.js';
+import { theme } from '../../design_system/theme';
+import { useSharedUiDependencies } from '../../ui_dependency_provider';
+import { BoringAvatarSolid } from './boring_avatar';
 
 const DEFAULT_USER_PICTURE_URL = 'https://cdn.apify.com/img/icons/anonymous_user_picture.png';
 const DEFAULT_ORGANIZATION_PICTURE_URL = 'https://cdn.apify.com/img/icons/anonymous_organization_picture.png';

package/src/components/badge/badge.tsx

@@ -4,12 +4,12 @@ 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 { SharedTextSize, SharedTextType } from '../text';
-import { Text } from '../text/index.js';
+import { Text } from '../text';
 
 export type BadgeSize = 'large' | 'regular' | 'small' | 'extra_small';
 export const BADGE_SIZES: BadgeSize[] = ['large', 'regular', 'small', 'extra_small'];

package/src/components/badge/index.ts

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

package/src/components/banner/banner.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import type React from 'react';
 
-import { Banner } from './banner.js';
+import { Banner } from './banner';
 
 interface BannerProps {
     background?: string;

package/src/components/banner/banner.tsx

@@ -1,7 +1,7 @@
 import type React from 'react';
 import styled, { css } from 'styled-components';
 
-import { theme } from '../../design_system/theme.js';
+import { theme } from '../../design_system/theme';
 
 const BANNER_GRADIENT_BACKGROUND_SVG = `<svg width="1200" height="148" viewBox="0 0 1200 148" fill="none" xmlns="http://www.w3.org/2000/svg">
     <g clip-path="url(#clip0_2285_34756)">

package/src/components/banner/index.ts

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

package/src/components/blog_article/blog_article.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import type { ComponentProps } from 'react';
 
-import { BlogArticle } from './blog_article.js';
+import { BlogArticle } from './blog_article';
 
 type BlogArticleProps = ComponentProps<typeof BlogArticle>;
 

package/src/components/blog_article/blog_article.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { ArrowRightIcon } from '@apify/ui-icons';
 
-import { theme } from '../../design_system/theme.js';
+import { theme } from '../../design_system/theme';
 
 const classNames = {
     IMAGE_WRAPPER: 'ImageWrapper',

package/src/components/blog_article/index.ts

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

package/src/components/box/box.stories.tsx

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

package/src/components/box/box.tsx

@@ -2,10 +2,10 @@ import type React from 'react';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 
-import { theme } from '../../design_system/theme.js';
+import { theme } from '../../design_system/theme';
 import type { Size } from '../../design_system/tokens';
 import type { WithTransientProps } from '../../type_utils';
-import { getResponsiveStyles, type ResponsiveValue } from '../../utils/css_utils.js';
+import { getResponsiveStyles, type ResponsiveValue } from '../../utils/css_utils';
 
 type ExtendedSize = Size | 'none' | 'auto';
 

package/src/components/box/index.ts

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

package/src/components/breadcrumb/breadcrumb.stories.tsx

@@ -1,7 +1,7 @@
 import type { StoryObj } from '@storybook/react-vite';
 import { userEvent, within } from 'storybook/test';
 
-import { Breadcrumbs } from './breadcrumb.js';
+import { Breadcrumbs } from './breadcrumb';
 
 type Story = StoryObj<typeof Breadcrumbs>;
 

package/src/components/breadcrumb/breadcrumb.tsx

@@ -2,10 +2,10 @@ import clsx from 'clsx';
 import React from 'react';
 import styled from 'styled-components';
 
-import { theme } from '../../design_system/theme.js';
-import { Box } from '../box/index.js';
-import { Link } from '../link/index.js';
-import { Text } from '../text/index.js';
+import { theme } from '../../design_system/theme';
+import { Box } from '../box';
+import { Link } from '../link';
+import { Text } from '../text';
 
 export const breadcrumbClassNames = {
     WRAPPER: 'Breadcrumbs__Wrapper',

package/src/components/breadcrumb/index.ts

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

package/src/components/browser_window/browser_window.tsx

@@ -2,8 +2,8 @@ import clsx from 'clsx';
 import type { ReactNode } from 'react';
 import styled from 'styled-components';
 
-import { theme } from '../../design_system/theme.js';
-import { Badge } from '../badge/index.js';
+import { theme } from '../../design_system/theme';
+import { Badge } from '../badge';
 
 const classNames = {
     ROOT: 'browser-window',

package/src/components/browser_window/index.ts

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

package/src/components/button/button.stories.tsx

@@ -5,8 +5,8 @@ import styled from 'styled-components';
 
 import { CrossIcon } from '@apify/ui-icons';
 
-import { theme } from '../../design_system/theme.js';
-import { Button, type ButtonProps } from './button.js';
+import { theme } from '../../design_system/theme';
+import { Button, type ButtonProps } from './button';
 
 export default {
     title: 'UI-Library/Button',

package/src/components/button/button.tsx

@@ -5,11 +5,11 @@ import styled, { css } from 'styled-components';
 
 import { ExternalLinkIcon, type IconSize } from '@apify/ui-icons';
 
-import { theme } from '../../design_system/theme.js';
-import { type WithRequired, type WithTransientProps } from '../../type_utils.js';
-import { useSharedUiDependencies } from '../../ui_dependency_provider.js';
-import { Box, type MarginSpacingProps, type RegularBoxProps } from '../box/index.js';
-import { isUrlExternal, Link, type LinkProps } from '../link/index.js';
+import { theme } from '../../design_system/theme';
+import { type WithRequired, type WithTransientProps } from '../../type_utils';
+import { useSharedUiDependencies } from '../../ui_dependency_provider';
+import { Box, type MarginSpacingProps, type RegularBoxProps } from '../box';
+import { isUrlExternal, Link, type LinkProps } from '../link';
 
 export type ButtonSize = 'extraLarge' | 'large' | 'medium' | 'small' | 'extraSmall';
 type ButtonColor = 'default' | 'success' | 'danger' | 'primaryBlack';

package/src/components/button/index.ts

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

package/src/components/card/card.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Button } from '../button/index.js';
-import { Card, type CardProps } from './card.js';
+import { Button } from '../button';
+import { Card, type CardProps } from './card';
 
 export default {
     title: 'UI-Library/Cards/Card',

package/src/components/card/card.tsx

@@ -3,11 +3,11 @@ import type React from 'react';
 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 { BoxProps } from '../box';
-import { Box } from '../box/index.js';
-import { Text } from '../text/index.js';
+import { Box } from '../box';
+import { Text } from '../text';
 
 export const cardClassNames = {
     WRAPPER: 'Card',

package/src/components/card/index.ts

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

package/src/components/card_container/card_container.stories.tsx

@@ -4,8 +4,8 @@ import styled from 'styled-components';
 
 import { DragIndicatorIcon } from '@apify/ui-icons';
 
-import { IconButton } from '../icon_button/index.js';
-import { CardContainer, cardContainerClassNames, type CardContainerProps } from './card_container.js';
+import { IconButton } from '../icon_button';
+import { CardContainer, cardContainerClassNames, type CardContainerProps } from './card_container';
 
 export default {
     title: 'UI-Library/Cards/CardContainer',

package/src/components/card_container/card_container.tsx

@@ -3,9 +3,9 @@ import styled from 'styled-components';
 
 import type { ValueOf } from '@apify-packages/types';
 
-import { theme } from '../../design_system/theme.js';
+import { theme } from '../../design_system/theme';
 import type { Size } from '../../design_system/tokens';
-import { Box, type BoxProps } from '../box/index.js';
+import { Box, type BoxProps } from '../box';
 
 export const cardContainerClassNames = {
     CONTENT: 'CardContainer-Content',

package/src/components/card_container/index.ts

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

package/src/components/checkbox/checkbox.stories.tsx

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

package/src/components/checkbox/checkbox.style.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 checkboxStyle = css`
     overflow: hidden;

package/src/components/checkbox/checkbox.tsx

@@ -5,8 +5,8 @@ import styled from 'styled-components';
 
 import { CheckIcon, MinusIcon } from '@apify/ui-icons';
 
-import { theme } from '../../design_system/theme.js';
-import { checkboxStyle } from './checkbox.style.js';
+import { theme } from '../../design_system/theme';
+import { checkboxStyle } from './checkbox.style';
 
 const StyledCheckbox = styled(CheckboxPrimitiveReact.Root)`
     all: unset;

package/src/components/checkbox/index.ts

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

package/src/components/chip/chip.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Chip, CHIP_SIZES, CHIP_TYPES, type ChipProps } from './chip.js';
+import { Chip, CHIP_SIZES, CHIP_TYPES, type ChipProps } from './chip';
 
 const mockIcons = {
     star: <span style={{ fontSize: '14px' }}>⭐</span>,

package/src/components/chip/chip.tsx

@@ -6,7 +6,7 @@ import styled, { css } from 'styled-components';
 
 import type { ValueOf } from '@apify-packages/types';
 
-import { theme } from '../../design_system/theme.js';
+import { theme } from '../../design_system/theme';
 import type { RegularBoxProps } from '../box';
 
 export const CHIP_SIZES = {

package/src/components/chip/index.ts

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

package/src/components/code/action_button.tsx

@@ -3,10 +3,10 @@ import styled, { css } from 'styled-components';
 
 import { CheckIcon, CopyIcon } from '@apify/ui-icons';
 
-import { theme } from '../../design_system/theme.js';
-import { useSharedUiDependencies } from '../../ui_dependency_provider.js';
-import { useCopyToClipboard } from '../../utils/index.js';
-import { Text } from '../text/index.js';
+import { theme } from '../../design_system/theme';
+import { useSharedUiDependencies } from '../../ui_dependency_provider';
+import { useCopyToClipboard } from '../../utils';
+import { Text } from '../text';
 
 interface StyledButtonProps {
     $successStyle?: boolean;

package/src/components/code/code_block/code_block.styled.tsx

@@ -1,7 +1,7 @@
 import styled, { css } 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';
 import type { SharedTextProps, SharedTextSize } from '../../text/text_shared';
 
 export type SyntaxHighlighterBaseStylesWrapperProps = SharedTextProps & {

package/src/components/code/code_block/code_block.tsx

@@ -3,14 +3,14 @@ import type React from 'react';
 import { useMemo, useRef, useState } from 'react';
 
 import type { RegularBoxProps } from '../../box';
-import { ColorWheelGradient } from '../../color_wheel_gradient/index.js';
-import { Link } from '../../link/index.js';
-import { Text } from '../../text/index.js';
+import { ColorWheelGradient } from '../../color_wheel_gradient';
+import { Link } from '../../link';
+import { Text } from '../../text';
 import type { SharedTextSize } from '../../text/text_shared';
-import { ActionButton, CopyButton } from '../action_button.js';
-import { PrismSyntaxHighlighter } from '../prism_highlighter.js';
-import { CodeBlockWrapper } from './code_block.styled.js';
-import { getBashLinePrefixes, getNumberLinePrefixes } from './utils.js';
+import { ActionButton, CopyButton } from '../action_button';
+import { PrismSyntaxHighlighter } from '../prism_highlighter';
+import { CodeBlockWrapper } from './code_block.styled';
+import { getBashLinePrefixes, getNumberLinePrefixes } from './utils';
 
 type CodeTab = {
     key: string;

package/src/components/code/code_block/code_block_with_tabs.stories.tsx

@@ -1,8 +1,8 @@
 import { useMemo, useState } from 'react';
 import styled from 'styled-components';
 
-import { theme } from '../../../design_system/theme.js';
-import { type CodeBlockTabKey, CodeBlockWithTabs, type CodeBlockWithTabsProps } from './code_block_with_tabs.js';
+import { theme } from '../../../design_system/theme';
+import { type CodeBlockTabKey, CodeBlockWithTabs, type CodeBlockWithTabsProps } from './code_block_with_tabs';
 
 export default {
     title: 'UI-Library/Code/CodeBlockWithTabs',

package/src/components/code/code_block/code_block_with_tabs.tsx

@@ -5,12 +5,12 @@ import styled from 'styled-components';
 
 import { CodeIcon, HttpIcon, type IconComponent, McpIcon } from '@apify/ui-icons';
 
-import { theme } from '../../../design_system/theme.js';
-import { useSharedUiDependencies } from '../../../ui_dependency_provider.js';
-import { Box, type MarginSpacingProps, type RegularBoxProps } from '../../box/index.js';
-import { Link, type RegularLinkProps } from '../../link/index.js';
-import { HeadingShared } from '../../text/heading_shared.js';
-import { CodeBlock, type CodeBlockProps } from './code_block.js';
+import { theme } from '../../../design_system/theme';
+import { useSharedUiDependencies } from '../../../ui_dependency_provider';
+import { Box, type MarginSpacingProps, type RegularBoxProps } from '../../box';
+import { Link, type RegularLinkProps } from '../../link';
+import { HeadingShared } from '../../text/heading_shared';
+import { CodeBlock, type CodeBlockProps } from './code_block';
 
 export type CodeBlockTabKey = 'cli' | 'http' | 'javascript' | 'mcp' | 'openapi' | 'python' | 'typescript';
 type CodeBlockTabConfig = {

package/src/components/code/code_block/utils.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 
-import { theme } from '../../../design_system/theme.js';
-import { CodeHighlighterLineBashPrefix, CodeHighlighterLinePrefix } from '../prism_highlighter.js';
+import { theme } from '../../../design_system/theme';
+import { CodeHighlighterLineBashPrefix, CodeHighlighterLinePrefix } from '../prism_highlighter';
 
 // input: [2, 4, 5, 6, 8, 10, 11, 12]
 // returns string indicating what type of line it is (bashStartCommand, bashCommand, bashEmptyLine)

package/src/components/code/index.ts

@@ -1,5 +1,5 @@
-export * from './code_block/code_block.js';
-export * from './code_block/code_block_with_tabs.js';
-export * from './one_line_code/one_line_code.js';
-export * from './inline_code/inline_code.js';
-export * from './prism_highlighter.js';
+export * from './code_block/code_block';
+export * from './code_block/code_block_with_tabs';
+export * from './one_line_code/one_line_code';
+export * from './inline_code/inline_code';
+export * from './prism_highlighter';

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

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import type { InlineCodeProps } from './inline_code';
-import { InlineCode } from './inline_code.js';
+import { InlineCode } from './inline_code';
 
 /**
  * Stories for the InlineCode component. This file showcases the

package/src/components/code/inline_code/inline_code.tsx

@@ -3,10 +3,10 @@ import styled, { css } from 'styled-components';
 
 import { CheckIcon, CopyIcon } from '@apify/ui-icons';
 
-import { theme } from '../../../design_system/theme.js';
-import { useCopyToClipboard } from '../../../utils/copy_to_clipboard.js';
+import { theme } from '../../../design_system/theme';
+import { useCopyToClipboard } from '../../../utils/copy_to_clipboard';
 import type { RegularBoxProps } from '../../box';
-import { Text } from '../../text/index.js';
+import { Text } from '../../text';
 import type { SharedTextSize } from '../../text/text_shared';
 
 // TODO: We should not need to export these once we consolidate Markdown

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.js';
+import { OneLineCode, type OneLineCodeProps } from './one_line_code';
 
 /**
  * Stories for the OneLineCode component. This file showcases the