@apify/ui-library 0.57.3 → 0.59.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "0.57.3",
+    "version": "0.59.0",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -41,7 +41,9 @@
         "rehype-sanitize": "^6.0.0",
         "remark-gfm": "^3.0.1",
         "remark-toc": "8.0.1",
-        "slugify": "^1.6.6"
+        "slugify": "^1.6.6",
+        "unified": "^10.0.0",
+        "unist-util-visit": "^5.0.0"
     },
     "peerDependencies": {
         "react": "17.x || 18.x",
@@ -65,5 +67,5 @@
         "recast": "^0.23.9",
         "typescript": "^5.1.6"
     },
-    "gitHead": "1bd900e3e849d7be1b4d22470b34bf45b56c3a2f"
+    "gitHead": "aff5f2f1a3db4fa021ade9588f4d923e59527e8b"
 }

package/src/components/action_link.tsx

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

package/src/components/actor_template_card.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { theme } from '../design_system/theme.js';
-import { TextBaseComponent } from './text/text_base.jsx';
+import { TextBaseComponent } from './text/text_base.js';
 import { VerticalTile } from './tile/index.js';
 
 interface ActorTemplateCardProps {

package/src/components/badge.tsx

@@ -5,7 +5,7 @@ import type { IconComponent, IconSize } from '@apify/ui-icons';
 
 import { theme } from '../design_system/theme.js';
 import type { WithTransientProps } from '../type_utils.js';
-import { type RegularBoxProps, type MarginSpacingProps, Box } from './box.jsx';
+import { type RegularBoxProps, type MarginSpacingProps, Box } from './box.js';
 
 type BadgeSize = typeof BADGE_SIZES[number];
 

package/src/components/button.tsx

@@ -5,9 +5,9 @@ import { ExternalLinkIcon } 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.jsx';
-import { Box, type RegularBoxProps, type MarginSpacingProps } from './box.jsx';
-import { Link, isUrlExternal, type LinkProps } from './link.jsx';
+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

@@ -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 type { RegularBoxProps } from './box.jsx';
+import type { RegularBoxProps } from './box.js';
 
 const CHIP_SIZES = {
     SMALL: 'S',

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.js';
-import type { SharedTextSize } from '../../text/text_shared.jsx';
-import { SyntaxHighlighterBaseStylesWrapper } from '../syntax_highlighter.jsx';
+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

@@ -2,13 +2,13 @@ import clsx from 'clsx';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 
 import type { RegularBoxProps } from '../../box.js';
-import { ColorWheelGradient } from '../../color_wheel_gradient.jsx';
-import { Link } from '../../link.jsx';
+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.jsx';
-import { ActionButton, CopyButton } from '../action_button.jsx';
-import SyntaxHighlighter from '../syntax_highlighter.jsx';
-import { CodeBlockWrapper } from './code_block.styled.jsx';
+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() {

package/src/components/code/index.ts

@@ -1,3 +1,3 @@
-export * from './code_block/code_block.jsx';
-export * from './one_line_code/one_line_code.jsx';
-export * from './inline_code/inline_code.jsx';
+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

@@ -2,9 +2,9 @@ import React from 'react';
 import styled, { css } from 'styled-components';
 
 import { theme } from '../../../design_system/theme.js';
-import type { RegularBoxProps } from '../../box.jsx';
+import type { RegularBoxProps } from '../../box.js';
 import { Text } from '../../text/index.js';
-import type { SharedTextSize } from '../../text/text_shared.jsx';
+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

@@ -1,15 +1,15 @@
-import React, { useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import styled, { css } from 'styled-components';
 
 import { EyeIcon, EyeOffIcon } from '@apify/ui-icons';
 
 import { theme } from '../../../design_system/theme.js';
-import type { BoxProps } from '../../box.jsx';
+import type { BoxProps } from '../../box.js';
 import { Text } from '../../text/index.js';
-import type { SharedTextSize } from '../../text/text_shared.jsx';
-import { ActionButton, CopyButton } from '../action_button.jsx';
-import SyntaxHighlighter, { SyntaxHighlighterBaseStylesWrapper } from '../syntax_highlighter.jsx';
-import type { SyntaxHighlighterBaseStylesWrapperProps } from '../syntax_highlighter.jsx';
+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,5 +1,5 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 // https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/228
 import type { SyntaxHighlighterProps as ReactSyntaxHighlighterProps } from 'react-syntax-highlighter';
 // @ts-ignore The library is badly typed and does not export the type
@@ -32,10 +32,10 @@ import light from 'react-syntax-highlighter/dist/esm/styles/prism/prism.js';
 import styled, { css } from 'styled-components';
 
 import { theme } from '../../design_system/theme.js';
-import { useSharedUiDependencies } from '../../ui_dependency_provider.jsx';
-import { Box } from '../box.jsx';
+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.jsx';
+import type { SharedTextSize } from '../text/text_shared.js';
 
 ReactSyntaxHighlighter.registerLanguage('typescript', ts);
 ReactSyntaxHighlighter.registerLanguage('javascript', js);

package/src/components/floating/index.ts

@@ -1,3 +1,3 @@
-export * from './menu.jsx';
-export * from './menu_components.jsx';
-export * from './menu_common.jsx';
+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.jsx';
+} from '../box.js';
 import { Text } from '../text/index.js';
-import { useFloatingMenu } from './menu_common.jsx';
+import { useFloatingMenu } from './menu_common.js';
 import {
     DropdownMenuBaseComponent,
     ListMenuComponent,
     ListMenuItemComponent,
-} from './menu_components.jsx';
+} from './menu_components.js';
 
 export const menuClassNames = {
     WRAPPER: 'menu-wrapper',

package/src/components/floating/menu_components.tsx

@@ -2,13 +2,13 @@ import {
     type UseFloatingReturn,
     type ReferenceType,
 } from '@floating-ui/react';
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 
 import { ChevronDownIcon } from '@apify/ui-icons';
 
 import { theme } from '../../design_system/theme.js';
-import { Box } from '../box.jsx';
+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 { forwardRef } from 'react';
 
-import { useSharedUiDependencies } from '../ui_dependency_provider.jsx';
-import { Box, type BoxProps } from './box.jsx';
+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/index.js';
-export * from './box.jsx';
-export * from './message.jsx';
+export * from './box.js';
+export * from './message.js';
 export * from './floating/index.js';
-export * from './button.jsx';
-export * from './link.jsx';
-export * from './action_link.jsx';
+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.jsx';
+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.jsx';
-export * from './banner.jsx';
-export * from './actor_template_card.jsx';
-export * from './chip.jsx';
-export * from './image.jsx';
-export * from './rating.jsx';
-export * from './badge.jsx';
-export * from './tag.jsx';
+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

@@ -6,8 +6,8 @@ import styled from 'styled-components';
 import { ExternalLinkIcon } from '@apify/ui-icons';
 
 import { theme } from '../design_system/theme.js';
-import { useSharedUiDependencies } from '../ui_dependency_provider.jsx';
-import { Box, type BoxProps } from './box.jsx';
+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

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

package/src/components/rating.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import React, { Fragment, useMemo } from 'react';
+import { Fragment, useMemo } from 'react';
 import styled from 'styled-components';
 
 import { StarEmptyIcon, StarFullIcon, StarHalfIcon } from '@apify/ui-icons';
@@ -7,8 +7,8 @@ import { StarEmptyIcon, StarFullIcon, StarHalfIcon } from '@apify/ui-icons';
 import type { ReviewRating } from '@apify-packages/types';
 
 import { theme } from '../design_system/theme.js';
-import type { BoxProps } from './box.jsx';
-import { Box } from './box.jsx';
+import type { BoxProps } from './box.js';
+import { Box } from './box.js';
 import { Text } from './text/index.js';
 
 type RatingStatsProps = {

package/src/components/readme_renderer/index.ts

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

package/src/components/readme_renderer/table_of_contents.tsx

@@ -10,9 +10,9 @@ import styled from 'styled-components';
 
 import { theme } from '../../design_system/theme.js';
 import { inlineCodeStyles } from '../code/index.js';
-import { Link } from '../link.jsx';
+import { Link } from '../link.js';
 import { Text } from '../text/index.js';
-import { cleanMarkdown, slugifyHeadingChildren } from './utils.jsx';
+import { cleanMarkdown, slugifyHeadingChildren } from './utils.js';
 
 const TOC_HEADING_ID = 'Contents';
 

package/src/components/simple_markdown/index.ts

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

package/src/components/simple_markdown/simple_markdown.tsx

@@ -1,3 +1,4 @@
+import type { Root, Element, Text as TextNode } from 'hast';
 import React, { useCallback, useMemo, useRef } from 'react';
 import type { Components } from 'react-markdown';
 import ReactMarkdown, { uriTransformer } from 'react-markdown';
@@ -6,21 +7,23 @@ import rehypeRaw from 'rehype-raw';
 import rehypeSanitize from 'rehype-sanitize';
 import remarkGfm from 'remark-gfm';
 import styled from 'styled-components';
+import type { Pluggable, PluggableList } from 'unified';
+import { visit } from 'unist-util-visit';
 
 import { theme } from '../../design_system/theme.js';
-import { useSharedUiDependencies } from '../../ui_dependency_provider.jsx';
-import { Box } from '../box.jsx';
-import { isUrlExternal } from '../link.jsx';
-import { cleanMarkdown } from '../readme_renderer/utils.jsx';
-import { HeadingContent } from '../text/heading_content.jsx';
+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.jsx';
+import { TextContent } from '../text/text_content.js';
 import {
     MarkdownBlockQuote,
     MarkdownCode,
     MarkdownLink,
     MarkdownTable,
-} from './simple_markdown_components.jsx';
+} from './simple_markdown_components.js';
 
 export type SimpleMarkdownComponents = Components;
 
@@ -43,8 +46,33 @@ const StyledMarkdown = styled(ReactMarkdown)`
     }
 `;
 
-export const defaultRehypePlugins = [rehypeRaw];
-export const defaultRemarkPlugins = [remarkGfm];
+// Function to recursively process unsupported elements
+const unwrapUnsupportedElement = (node: Element): (Element | TextNode)[] => {
+    return node.children.flatMap((child) => {
+        if (child.type === 'text') {
+            return child; // Keep text as is
+        }
+        if (child.type === 'element') {
+            if (defaultAllowedElements.includes(child.tagName)) {
+                return child; // Keep supported elements
+            }
+            return unwrapUnsupportedElement(child as Element);
+        }
+        return []; // Ignore other node types
+    });
+};
+
+const getUnsupportedRehypeTagsSanitationPlugIn = (
+    allowedElements: string[],
+): Pluggable<any[]> => () => (tree: Root) => {
+    visit(tree, 'element', (node, index, parent) => {
+        if (!allowedElements.includes(node.tagName) && parent && typeof index === 'number') {
+            // Replace unsupported element with its valid children
+            parent.children.splice(index, 1, ...unwrapUnsupportedElement(node));
+        }
+    });
+};
+
 export const defaultAllowedElements = [
     'a',
     'b',
@@ -79,6 +107,9 @@ export const defaultAllowedElements = [
     'ul',
 ];
 
+export const defaultRehypePlugins = [rehypeRaw];
+export const defaultRemarkPlugins = [remarkGfm];
+
 // TODO: Add Image component
 const regularMarkdownSizeComponents: Components = {
     h1: ({ children }) => <HeadingContent mt='space32' mb='space16' type='heading1'>{children}</HeadingContent>,
@@ -151,13 +182,15 @@ export const SimpleMarkdown: React.FC<SimpleMarkdownProps> = ({
 }) => {
     const cleanedMarkdown = useMemo(() => cleanMarkdown(markdown), [markdown]);
 
+    const effectiveAllowedElements = useRef(allowedElements || defaultAllowedElements);
+
     const effectiveComponents = useRef({
         ...(size === 'regular' ? regularMarkdownSizeComponents : smallMarkdownSizeComponents),
         ...components,
     });
 
-    const rehypePluginsRef = useRef([
-        ...(rehypePlugins || defaultRehypePlugins),
+    const rehypePluginsRef = useRef<PluggableList>([
+        ...(rehypePlugins || [...defaultRehypePlugins, getUnsupportedRehypeTagsSanitationPlugIn(effectiveAllowedElements.current)]),
         rehypeSanitize, // lets always sanitize the output
     ]);
 
@@ -168,7 +201,7 @@ export const SimpleMarkdown: React.FC<SimpleMarkdownProps> = ({
             components={effectiveComponents.current}
             rehypePlugins={rehypePluginsRef.current}
             remarkPlugins={remarkPlugins || defaultRemarkPlugins}
-            allowedElements={allowedElements || defaultAllowedElements}
+            allowedElements={effectiveAllowedElements.current}
             transformLinkUri={(href, children, title) => {
                 const transformed = transformLinkUri ? transformLinkUri(href, children, title) : defaultUrlTransform(href);
                 return uriTransformer(transformed);

package/src/components/simple_markdown/simple_markdown_components.tsx

@@ -8,14 +8,14 @@ import { CheckIcon, LinkIcon } from '@apify/ui-icons';
 import { theme } from '../../design_system/theme.js';
 import type { WithOptional } from '../../type_utils.js';
 import { useCopyToClipboard } from '../../utils/index.js';
-import { Box } from '../box.jsx';
+import { Box } from '../box.js';
 import { CodeBlock, InlineCode, OneLineCode } from '../code/index.js';
-import type { LinkProps } from '../link.jsx';
-import { Link } from '../link.jsx';
-import { slugifyHeadingChildren } from '../readme_renderer/utils.jsx';
-import type { HeadingSharedProps } from '../text/heading_shared.jsx';
+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.jsx';
+import type { SharedTextProps, SharedTextSize } from '../text/text_shared.js';
 
 const simpleMarkdownClassNames = {
     HEADING_ICON_LINK: 'headingIconLink',

package/src/components/tag.tsx

@@ -5,8 +5,8 @@ import type { IconComponent, IconSize } from '@apify/ui-icons';
 
 import { theme } from '../design_system/theme.js';
 import type { WithTransientProps } from '../type_utils.js';
-import { Box, type MarginSpacingProps, type RegularBoxProps } from './box.jsx';
-import { Link, type RegularLinkProps } from './link.jsx';
+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

@@ -3,8 +3,8 @@ import styled, { css } from 'styled-components';
 
 import { theme } from '../../design_system/theme.js';
 import type { WithTransientProps } from '../../type_utils.js';
-import type { TextBaseProps } from './text_base.jsx';
-import { TextBaseComponent } from './text_base.jsx';
+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

@@ -3,8 +3,8 @@ import styled from 'styled-components';
 
 import { theme } from '../../design_system/theme.js';
 import type { WithTransientProps } from '../../type_utils.js';
-import type { TextBaseProps } from './text_base.jsx';
-import { TextBaseComponent } from './text_base.jsx';
+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

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

package/src/components/text/index.ts

@@ -1,12 +1,12 @@
-import HeadingShared from './heading_shared.jsx';
-import type { SharedTextProps } from './text_shared.jsx';
-import TextShared from './text_shared.jsx';
+import HeadingShared from './heading_shared.js';
+import type { SharedTextProps } from './text_shared.js';
+import TextShared from './text_shared.js';
 
-export * from './text_base.jsx';
-export * from './text_content.jsx';
-export * from './text_marketing.jsx';
-export * from './heading_content.jsx';
-export * from './heading_marketing.jsx';
+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 {
     TextShared as Text, // Shared typography is the default

package/src/components/text/text_base.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import styled, { css } from 'styled-components';
 
 import type { WithTransientProps } from '../../type_utils.js';
-import type { BoxProps } from '../box.jsx';
-import { Box } from '../box.jsx';
+import type { BoxProps } from '../box.js';
+import { Box } from '../box.js';
 
 export interface TransientTextBaseProps {
     italic?: boolean

package/src/components/text/text_content.tsx

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

package/src/components/text/text_marketing.tsx

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

package/src/components/text/text_shared.tsx

@@ -1,10 +1,10 @@
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import styled from 'styled-components';
 
 import { theme } from '../../design_system/theme.js';
 import type { WithTransientProps } from '../../type_utils.js';
-import type { TextBaseProps } from './text_base.jsx';
-import { TextBaseComponent } from './text_base.jsx';
+import type { TextBaseProps } from './text_base.js';
+import { TextBaseComponent } from './text_base.js';
 
 export type SharedTextType = 'body' | 'code';
 export type SharedTextSize = 'regular' | 'small' | 'big';

package/src/components/tile/index.ts

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

package/src/components/to_consolidate/card.tsx

@@ -4,8 +4,8 @@ import styled, { css } from 'styled-components';
 
 import { theme } from '../../design_system/theme.js';
 import type { WithTransientProps } from '../../type_utils.js';
-import type { BoxProps } from '../box.jsx';
-import { Box } from '../box.jsx';
+import type { BoxProps } from '../box.js';
+import { Box } from '../box.js';
 import { Text } from '../text/index.js';
 
 export const cardClassNames = {