@apify/ui-library 0.57.0 → 0.57.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "0.57.0",
+    "version": "0.57.2",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -27,7 +27,7 @@
     ],
     "dependencies": {
         "@apify/log": "^2.5.11",
-        "@apify/ui-icons": "^0.5.0",
+        "@apify/ui-icons": "^0.6.0",
         "@floating-ui/react": "^0.26.2",
         "clsx": "^2.0.0",
         "dayjs": "1.11.9",
@@ -65,5 +65,5 @@
         "recast": "^0.23.9",
         "typescript": "^5.1.6"
     },
-    "gitHead": "e5da35601e2d6fc6d8a6a3526c6388b24ae5b955"
+    "gitHead": "19fcf97b81947edbe38eea795a994c62d0f91fdf"
 }

package/src/components/action_link.tsx

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

package/src/components/actor_template_card.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { theme } from '../design_system/theme';
-import { TextBaseComponent } from './text/text_base';
-import { VerticalTile } from './tile';
+import { theme } from '../design_system/theme.js';
+import { TextBaseComponent } from './text/text_base.js';
+import { VerticalTile } from './tile/index.js';
 
 interface ActorTemplateCardProps {
     id: string;

package/src/components/badge.tsx

@@ -3,9 +3,9 @@ import styled, { css, type FlattenSimpleInterpolation } from 'styled-components'
 
 import type { IconComponent, IconSize } from '@apify/ui-icons';
 
-import { theme } from '../design_system/theme';
-import type { WithTransientProps } from '../type_utils';
-import { type RegularBoxProps, type MarginSpacingProps, Box } from './box';
+import { theme } from '../design_system/theme.js';
+import type { WithTransientProps } from '../type_utils.js';
+import { type RegularBoxProps, type MarginSpacingProps, Box } from './box.js';
 
 type BadgeSize = typeof BADGE_SIZES[number];
 

package/src/components/banner.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
 
-import { theme } from '../design_system/theme';
+import { theme } from '../design_system/theme.js';
 
 /* eslint-disable max-len */
 const BANNER_GRADIENT_BACKGROUND_SVG = `<svg width="1200" height="148" viewBox="0 0 1200 148" fill="none" xmlns="http://www.w3.org/2000/svg">

package/src/components/blog_article.tsx

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

package/src/components/box.tsx

@@ -1,9 +1,9 @@
 import React, { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 
-import { theme } from '../design_system/theme';
-import type { Size } from '../design_system/tokens';
-import type { WithTransientProps } from '../type_utils';
+import { theme } from '../design_system/theme.js';
+import type { Size } from '../design_system/tokens/index.js';
+import type { WithTransientProps } from '../type_utils.js';
 
 type ExtendedSize = Size | 'none' | 'auto';
 

package/src/components/button.tsx

@@ -3,11 +3,11 @@ import styled, { css } from 'styled-components';
 
 import { ExternalLinkIcon } from '@apify/ui-icons';
 
-import { theme } from '../design_system/theme';
-import { type WithRequired, type WithTransientProps } from '../type_utils';
-import { useSharedUiDependencies } from '../ui_dependency_provider';
-import { Box, type RegularBoxProps, type MarginSpacingProps } from './box';
-import { Link, isUrlExternal, type LinkProps } from './link';
+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 RegularBoxProps, type MarginSpacingProps } from './box.js';
+import { Link, isUrlExternal, type LinkProps } from './link.js';
 
 type ButtonSize = 'medium' | 'small';
 type ButtonColor = 'default' | 'success' | 'danger';

package/src/components/chip.tsx

@@ -5,8 +5,8 @@ import styled, { css } from 'styled-components';
 
 import type { ValueOf } from '@apify-packages/types';
 
-import { theme } from '../design_system/theme';
-import type { RegularBoxProps } from './box';
+import { theme } from '../design_system/theme.js';
+import type { RegularBoxProps } from './box.js';
 
 const CHIP_SIZES = {
     SMALL: 'S',

package/src/components/code/action_button.tsx

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

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

@@ -1,8 +1,8 @@
 import styled, { css } from 'styled-components';
 
-import { theme } from '../../../design_system/theme';
-import type { SharedTextSize } from '../../text/text_shared';
-import { SyntaxHighlighterBaseStylesWrapper } from '../syntax_highlighter';
+import { theme } from '../../../design_system/theme.js';
+import type { SharedTextSize } from '../../text/text_shared.js';
+import { SyntaxHighlighterBaseStylesWrapper } from '../syntax_highlighter.js';
 
 const HIGHLIGHT_BACKGROUND_COLOR = 'rgba(22, 114, 235, 0.05)';
 

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

@@ -1,15 +1,15 @@
 import clsx from 'clsx';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 
-import type { RegularBoxProps } from '../../box';
-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';
-import SyntaxHighlighter from '../syntax_highlighter';
-import { CodeBlockWrapper } from './code_block.styled';
-import { mapPrefixToBashLine } from './utils';
+import type { RegularBoxProps } from '../../box.js';
+import { ColorWheelGradient } from '../../color_wheel_gradient.js';
+import { Link } from '../../link.js';
+import { Text } from '../../text/index.js';
+import type { SharedTextSize } from '../../text/text_shared.js';
+import { ActionButton, CopyButton } from '../action_button.js';
+import SyntaxHighlighter from '../syntax_highlighter.js';
+import { CodeBlockWrapper } from './code_block.styled.js';
+import { mapPrefixToBashLine } from './utils.js';
 
 function HeaderDots() {
     return (

package/src/components/code/index.ts

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

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
 
-import { theme } from '../../../design_system/theme';
-import type { RegularBoxProps } from '../../box';
-import { Text } from '../../text';
-import type { SharedTextSize } from '../../text/text_shared';
+import { theme } from '../../../design_system/theme.js';
+import type { RegularBoxProps } from '../../box.js';
+import { Text } from '../../text/index.js';
+import type { SharedTextSize } from '../../text/text_shared.js';
 
 // TODO: We should not need to export these once we consolidate Markdown
 export const inlineCodeStyles = css`

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

@@ -3,13 +3,13 @@ import styled, { css } from 'styled-components';
 
 import { EyeIcon, EyeOffIcon } from '@apify/ui-icons';
 
-import { theme } from '../../../design_system/theme';
-import type { BoxProps } from '../../box';
-import { Text } from '../../text';
-import type { SharedTextSize } from '../../text/text_shared';
-import { ActionButton, CopyButton } from '../action_button';
-import SyntaxHighlighter, { SyntaxHighlighterBaseStylesWrapper } from '../syntax_highlighter';
-import type { SyntaxHighlighterBaseStylesWrapperProps } from '../syntax_highlighter';
+import { theme } from '../../../design_system/theme.js';
+import type { BoxProps } from '../../box.js';
+import { Text } from '../../text/index.js';
+import type { SharedTextSize } from '../../text/text_shared.js';
+import { ActionButton, CopyButton } from '../action_button.js';
+import SyntaxHighlighter, { SyntaxHighlighterBaseStylesWrapper } from '../syntax_highlighter.js';
+import type { SyntaxHighlighterBaseStylesWrapperProps } from '../syntax_highlighter.js';
 
 export const oneLineCodeClassNames = {
     gradientWrapper: 'OneLineCode-GradientWrapper',

package/src/components/code/syntax_highlighter.tsx

@@ -1,30 +1,41 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 import React, { forwardRef } from 'react';
 // https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/228
 import type { SyntaxHighlighterProps as ReactSyntaxHighlighterProps } from 'react-syntax-highlighter';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore The library is badly typed and does not export the type
-import bash from 'react-syntax-highlighter/dist/esm/languages/prism/bash';
-import dockerFile from 'react-syntax-highlighter/dist/esm/languages/prism/docker';
-import http from 'react-syntax-highlighter/dist/esm/languages/prism/http';
-import js from 'react-syntax-highlighter/dist/esm/languages/prism/javascript';
-import json from 'react-syntax-highlighter/dist/esm/languages/prism/json';
-import html from 'react-syntax-highlighter/dist/esm/languages/prism/markup';
-import python from 'react-syntax-highlighter/dist/esm/languages/prism/python';
-import ts from 'react-syntax-highlighter/dist/esm/languages/prism/typescript';
-import xml from 'react-syntax-highlighter/dist/esm/languages/prism/xml-doc';
-import yaml from 'react-syntax-highlighter/dist/esm/languages/prism/yaml';
-import ReactSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+import bash from 'react-syntax-highlighter/dist/esm/languages/prism/bash.js';
 // @ts-ignore The library is badly typed and does not export the type
-import dark from 'react-syntax-highlighter/dist/esm/styles/prism/night-owl';
-import light from 'react-syntax-highlighter/dist/esm/styles/prism/prism';
+import dockerFile from 'react-syntax-highlighter/dist/esm/languages/prism/docker.js';
+// @ts-ignore The library is badly typed and does not export the type
+import http from 'react-syntax-highlighter/dist/esm/languages/prism/http.js';
+// @ts-ignore The library is badly typed and does not export the type
+import js from 'react-syntax-highlighter/dist/esm/languages/prism/javascript.js';
+// @ts-ignore The library is badly typed and does not export the type
+import json from 'react-syntax-highlighter/dist/esm/languages/prism/json.js';
+// @ts-ignore The library is badly typed and does not export the type
+import html from 'react-syntax-highlighter/dist/esm/languages/prism/markup.js';
+// @ts-ignore The library is badly typed and does not export the type
+import python from 'react-syntax-highlighter/dist/esm/languages/prism/python.js';
+// @ts-ignore The library is badly typed and does not export the type
+import ts from 'react-syntax-highlighter/dist/esm/languages/prism/typescript.js';
+// @ts-ignore The library is badly typed and does not export the type
+import xml from 'react-syntax-highlighter/dist/esm/languages/prism/xml-doc.js';
+// @ts-ignore The library is badly typed and does not export the type
+import yaml from 'react-syntax-highlighter/dist/esm/languages/prism/yaml.js';
+// @ts-ignore The library is badly typed and does not export the type
+import ReactSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light.js';
+// @ts-ignore The library is badly typed and does not export the type
+import dark from 'react-syntax-highlighter/dist/esm/styles/prism/night-owl.js';
+// @ts-ignore The library is badly typed and does not export the type
+import light from 'react-syntax-highlighter/dist/esm/styles/prism/prism.js';
+/* tslint:enable */
 import styled, { css } from 'styled-components';
 
-import { theme } from '../../design_system/theme';
-import { useSharedUiDependencies } from '../../ui_dependency_provider';
-import { Box } from '../box';
-import { Text, type SharedTextProps } from '../text';
-import type { SharedTextSize } from '../text/text_shared';
+import { theme } from '../../design_system/theme.js';
+import { useSharedUiDependencies } from '../../ui_dependency_provider.js';
+import { Box } from '../box.js';
+import { Text, type SharedTextProps } from '../text/index.js';
+import type { SharedTextSize } from '../text/text_shared.js';
 
 ReactSyntaxHighlighter.registerLanguage('typescript', ts);
 ReactSyntaxHighlighter.registerLanguage('javascript', js);
@@ -104,8 +115,8 @@ export const SyntaxHighlighter = forwardRef<HTMLPreElement, SyntaxHighlighterPro
 
 export type SyntaxHighlighterBaseStylesWrapperProps = SharedTextProps & {
     $fullWidth?: boolean;
-    $fullHeight?: boolean;
-    $showLineNumbers?: boolean;
+    $fullHeight?: string;
+    $showLineNumbers?: any;
 }
 
 export const SyntaxHighlighterBaseStylesWrapper = styled(Box)<SyntaxHighlighterBaseStylesWrapperProps>`

package/src/components/floating/index.ts

@@ -1,3 +1,3 @@
-export * from './menu';
-export * from './menu_components';
-export * from './menu_common';
+export * from './menu.js';
+export * from './menu_components.js';
+export * from './menu_common.js';

package/src/components/floating/menu.tsx

@@ -18,14 +18,14 @@ import React, {
 import {
     Box,
     type BoxProps,
-} from '../box';
-import { Text } from '../text';
-import { useFloatingMenu } from './menu_common';
+} from '../box.js';
+import { Text } from '../text/index.js';
+import { useFloatingMenu } from './menu_common.js';
 import {
     DropdownMenuBaseComponent,
     ListMenuComponent,
     ListMenuItemComponent,
-} from './menu_components';
+} from './menu_components.js';
 
 export const menuClassNames = {
     WRAPPER: 'menu-wrapper',

package/src/components/floating/menu_components.tsx

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

package/src/components/image.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 
-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.js';
 
 type ImageProps = {
     src: string,

package/src/components/index.ts

@@ -1,21 +1,21 @@
-export * from './text';
-export * from './box';
-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 './to_consolidate';
-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 './text/index.js';
+export * from './box.js';
+export * from './message.js';
+export * from './floating/index.js';
+export * from './button.js';
+export * from './link.js';
+export * from './action_link.js';
+export * from './simple_markdown/index.js';
+export * from './code/index.js';
+export * from './color_wheel_gradient.js';
+export * from './readme_renderer/index.js';
+export * from './to_consolidate/index.js';
+export * from './tile/index.js';
+export * from './blog_article.js';
+export * from './banner.js';
+export * from './actor_template_card.js';
+export * from './chip.js';
+export * from './image.js';
+export * from './rating.js';
+export * from './badge.js';
+export * from './tag.js';

package/src/components/link.tsx

@@ -5,9 +5,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.js';
 
 export type To = string | Partial<Path>;
 export interface RegularLinkProps {

package/src/components/message.tsx

@@ -4,10 +4,10 @@ import styled from 'styled-components';
 
 import { CheckCircleIcon, CrossIcon, InfoIcon, WarningTriangleIcon } from '@apify/ui-icons';
 
-import { theme } from '../design_system/theme';
-import { Box, type BoxProps } from './box';
-import { Button } from './button';
-import { Heading } from './text';
+import { theme } from '../design_system/theme.js';
+import { Box, type BoxProps } from './box.js';
+import { Button } from './button.js';
+import { Heading } from './text/index.js';
 
 export const messageClassNames = {
     main: 'Message',

package/src/components/rating.tsx

@@ -6,10 +6,10 @@ import { StarEmptyIcon, StarFullIcon, StarHalfIcon } from '@apify/ui-icons';
 
 import type { ReviewRating } from '@apify-packages/types';
 
-import { theme } from '../design_system/theme';
-import type { BoxProps } from './box';
-import { Box } from './box';
-import { Text } from './text';
+import { theme } from '../design_system/theme.js';
+import type { BoxProps } from './box.js';
+import { Box } from './box.js';
+import { Text } from './text/index.js';
 
 type RatingStatsProps = {
     ratingStats: Record<ReviewRating, number>

package/src/components/readme_renderer/index.ts

@@ -1,3 +1,3 @@
-export { useActorTitleHeadingFilter } from './utils';
-export { default as pythonizeValue } from './pythonize_value';
-export { default as TableOfContents } from './table_of_contents';
+export { useActorTitleHeadingFilter } from './utils.js';
+export { default as pythonizeValue } from './pythonize_value.js';
+export { default as TableOfContents } from './table_of_contents.js';

package/src/components/readme_renderer/table_of_contents.tsx

@@ -8,11 +8,11 @@ import type { AllowElement } from 'react-markdown/lib/rehype-filter';
 import remarkToc from 'remark-toc';
 import styled from 'styled-components';
 
-import { theme } from '../../design_system/theme';
-import { inlineCodeStyles } from '../code';
-import { Link } from '../link';
-import { Text } from '../text';
-import { cleanMarkdown, slugifyHeadingChildren } from './utils';
+import { theme } from '../../design_system/theme.js';
+import { inlineCodeStyles } from '../code/index.js';
+import { Link } from '../link.js';
+import { Text } from '../text/index.js';
+import { cleanMarkdown, slugifyHeadingChildren } from './utils.js';
 
 const TOC_HEADING_ID = 'Contents';
 

package/src/components/simple_markdown/index.tsx

@@ -1,2 +1,2 @@
-export * from './simple_markdown';
-export * from './simple_markdown_components';
+export * from './simple_markdown.js';
+export * from './simple_markdown_components.js';

package/src/components/simple_markdown/simple_markdown.tsx

@@ -7,20 +7,20 @@ import rehypeSanitize from 'rehype-sanitize';
 import remarkGfm from 'remark-gfm';
 import styled from 'styled-components';
 
-import { theme } from '../../design_system/theme';
-import { useSharedUiDependencies } from '../../ui_dependency_provider';
-import { Box } from '../box';
-import { isUrlExternal } from '../link';
-import { cleanMarkdown } from '../readme_renderer/utils';
-import { Heading, Text } from '../text';
-import { HeadingContent } from '../text/heading_content';
-import { TextContent } from '../text/text_content';
+import { theme } from '../../design_system/theme.js';
+import { useSharedUiDependencies } from '../../ui_dependency_provider.js';
+import { Box } from '../box.js';
+import { isUrlExternal } from '../link.js';
+import { cleanMarkdown } from '../readme_renderer/utils.js';
+import { HeadingContent } from '../text/heading_content.js';
+import { Heading, Text } from '../text/index.js';
+import { TextContent } from '../text/text_content.js';
 import {
     MarkdownBlockQuote,
     MarkdownCode,
     MarkdownLink,
     MarkdownTable,
-} from './simple_markdown_components';
+} from './simple_markdown_components.js';
 
 export type SimpleMarkdownComponents = Components;
 

package/src/components/simple_markdown/simple_markdown_components.tsx

@@ -5,17 +5,17 @@ import styled from 'styled-components';
 
 import { CheckIcon, LinkIcon } from '@apify/ui-icons';
 
-import { theme } from '../../design_system/theme';
-import type { WithOptional } from '../../type_utils';
-import { useCopyToClipboard } from '../../utils';
-import { Box } from '../box';
-import { CodeBlock, InlineCode, OneLineCode } from '../code';
-import type { LinkProps } from '../link';
-import { Link } from '../link';
-import { slugifyHeadingChildren } from '../readme_renderer/utils';
-import { Heading } from '../text';
-import type { HeadingSharedProps } from '../text/heading_shared';
-import type { SharedTextProps, SharedTextSize } from '../text/text_shared';
+import { theme } from '../../design_system/theme.js';
+import type { WithOptional } from '../../type_utils.js';
+import { useCopyToClipboard } from '../../utils/index.js';
+import { Box } from '../box.js';
+import { CodeBlock, InlineCode, OneLineCode } from '../code/index.js';
+import type { LinkProps } from '../link.js';
+import { Link } from '../link.js';
+import { slugifyHeadingChildren } from '../readme_renderer/utils.js';
+import type { HeadingSharedProps } from '../text/heading_shared.js';
+import { Heading } from '../text/index.js';
+import type { SharedTextProps, SharedTextSize } from '../text/text_shared.js';
 
 const simpleMarkdownClassNames = {
     HEADING_ICON_LINK: 'headingIconLink',
@@ -257,7 +257,7 @@ export const MarkdownLink: React.FC<WithOptional<LinkProps, 'to'>> = ({
     return (to && typeof to === 'string') ? (
         <StyledMarkdownLink to={to} hideExternalIcon={true} rel={rel} className={className}>{children}</StyledMarkdownLink>
     ) : (
-        <span>{children}</span> // Invalid links can be rendered as a regular span instead
+        (<span>{children}</span>) // Invalid links can be rendered as a regular span instead
     );
 };
 

package/src/components/tag.tsx

@@ -3,10 +3,10 @@ import styled, { css, type FlattenSimpleInterpolation } from 'styled-components'
 
 import type { IconComponent, IconSize } from '@apify/ui-icons';
 
-import { theme } from '../design_system/theme';
-import type { WithTransientProps } from '../type_utils';
-import { Box, type MarginSpacingProps, type RegularBoxProps } from './box';
-import { Link, type RegularLinkProps } from './link';
+import { theme } from '../design_system/theme.js';
+import type { WithTransientProps } from '../type_utils.js';
+import { Box, type MarginSpacingProps, type RegularBoxProps } from './box.js';
+import { Link, type RegularLinkProps } from './link.js';
 
 type TagSize = typeof TAG_SIZES[number];
 

package/src/components/text/heading_content.tsx

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

package/src/components/text/heading_marketing.tsx

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

package/src/components/text/heading_shared.tsx

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