@apify/ui-library 0.65.3 → 0.66.1-featuresyntaxhighlighter-48cb44.19

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "0.65.3",
+    "version": "0.66.1-featuresyntaxhighlighter-48cb44.19+dd172314efe",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -33,9 +33,10 @@
         "fast-average-color": "^9.4.0",
         "history": "^5.3.0",
         "lodash": "^4.17.21",
+        "prism-react-renderer": "^2.4.1",
+        "prismjs": "^1.30.0",
         "query-string": "^8.1.0",
         "react-markdown": "^8.0.5",
-        "react-syntax-highlighter": "^15.5.0",
         "rehype-raw": "^6.1.1",
         "rehype-sanitize": "^6.0.0",
         "remark-gfm": "^3.0.1",
@@ -54,7 +55,6 @@
         "@types/lodash": "^4.14.200",
         "@types/node": "^22.10.5",
         "@types/react": "^18.2.74",
-        "@types/react-syntax-highlighter": "^15.5.9",
         "@types/styled-components": "^5.1.34",
         "eslint": "^9.22.0",
         "eslint-plugin-import": "2.26.0",
@@ -65,5 +65,5 @@
         "typescript": "^5.1.6",
         "typescript-eslint": "^8.24.0"
     },
-    "gitHead": "d28107308e89cc139489334a352f51de1ce3ff8f"
+    "gitHead": "dd172314efe4cbe8e1fbb4454a4a71dc517103ef"
 }

package/src/components/action_link.tsx

@@ -24,18 +24,19 @@ const StyledGuidepost = styled(Box)<{ $isBackLink: boolean }>`
     }
 `;
 
-export const ActionLink: React.FC<LinkProps> = ({
+export const ActionLink: React.FC<LinkProps & { contentProps?: object }> = ({
     children,
-    as,
+    as = Link,
+    contentProps,
     ...rest
 }) => {
     return (
         <StyledGuidepost
-            forwardedAs={as || Link}
+            forwardedAs={as}
             $isBackLink={false}
             {...rest}
         >
-            <Heading as='span' type='titleM'>{children}</Heading>
+            <Heading as='span' type='titleM' {...contentProps}>{children}</Heading>
             <ArrowRightIcon size="16" />
         </StyledGuidepost>
     );

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

@@ -1,10 +1,28 @@
 import styled, { css } from 'styled-components';
 
 import { theme } from '../../../design_system/theme.js';
-import type { SharedTextSize } from '../../text/text_shared.js';
-import { SyntaxHighlighterBaseStylesWrapper } from '../syntax_highlighter.js';
+import { Box } from '../../box.js';
+import type { SharedTextProps, SharedTextSize } from '../../text/text_shared.js';
 
-const HIGHLIGHT_BACKGROUND_COLOR = 'rgba(22, 114, 235, 0.05)';
+export type SyntaxHighlighterBaseStylesWrapperProps = SharedTextProps & {
+    $fullWidth?: boolean;
+    $fullHeight?: string;
+    $showLineNumbers?: boolean;
+}
+
+export const SyntaxHighlighterBaseStylesWrapper = styled(Box)<SyntaxHighlighterBaseStylesWrapperProps>`
+    background-color: ${theme.color.neutral.backgroundMuted} !important;
+    border: 1px solid ${theme.color.neutral.border};
+    border-radius: ${theme.radius.radius12};
+    overflow: hidden;
+
+    width: 100%;
+    ${({ $fullWidth }) => !$fullWidth && css`max-width: 860px;`}
+    ${({ $fullHeight }) => !$fullHeight && css`max-height: 600px;`}
+
+    background-color: transparent;
+    position: relative;
+`;
 
 export const CodeBlockWrapper = styled(SyntaxHighlighterBaseStylesWrapper) <{
     $hasHeader: boolean;
@@ -105,72 +123,6 @@ export const CodeBlockWrapper = styled(SyntaxHighlighterBaseStylesWrapper) <{
         }
     }
 
-    .CodePre {
-        z-index: 2;
-        padding: ${theme.space.space16} 0 !important;
-
-        code {
-            & > span {
-                display: block;
-                padding-left: ${({ $showLineNumbers }) => ($showLineNumbers ? theme.space.space8 : theme.space.space16)};
-                padding-right: ${theme.space.space16};
-                &:hover {
-                    background-color: ${HIGHLIGHT_BACKGROUND_COLOR} !important;
-                    border-left: 6px solid ${theme.color.neutral.border} !important;
-                    padding-left: ${({ $showLineNumbers }) => ($showLineNumbers ? '0.2' : '1')}rem;
-                }
-            }
-
-            // Common styles
-            [data*='bash']{
-                &::before {
-                    color: ${theme.color.lavender.base};
-                    padding-right: ${theme.space.space16};
-                    min-width: ${theme.space.space24};
-                    user-select: none;
-                    -webkit-user-select: none;
-                    font-size: 1em;
-                }
-            }
-
-            [data*='bashStartCommand'] {
-                &::before {
-                    content: '$';
-                }
-            }
-
-            [data*='bashCommand'] {
-                &::before {
-                    content: '>';
-                }
-            }
-
-            [data*='bashEmptyLine'] {
-                &::before {
-                    content: ' ';
-                }
-            }
-
-            [data*='highlighted'] {
-                background-color: ${HIGHLIGHT_BACKGROUND_COLOR} !important;
-                border-left: 6px solid ${theme.color.neutral.border} !important;
-                padding-left: ${({ $showLineNumbers }) => ($showLineNumbers ? '0.2' : '1')}rem;
-            }
-
-
-            .linenumber {
-                color: ${theme.color.neutral.textSubtle} !important;
-                padding-right: ${theme.space.space16} !important;
-                min-width: ${theme.space.space24} !important;
-                box-sizing: unset !important;
-                user-select: none;
-                -webkit-user-select: none;
-
-                ${({ $showLineNumbers }) => (!$showLineNumbers && css`display: none !important;`)}
-
-            }
-        }
-    }
 
     .CodeBlock-TopRightActionsWrapper {
         position: absolute;

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

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 
 import type { RegularBoxProps } from '../../box.js';
 import { ColorWheelGradient } from '../../color_wheel_gradient.js';
@@ -7,9 +7,9 @@ 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 { PrismSyntaxHighlighter } from '../prism_highlighter.js';
 import { CodeBlockWrapper } from './code_block.styled.js';
-import { mapPrefixToBashLine } from './utils.js';
+import { getBashLinePrefixes, getNumberLinePrefixes } from './utils.js';
 
 type CodeTab = {
     key: string;
@@ -149,9 +149,7 @@ export const CodeBlock = ({
 
     const isBash = currentLanguage === 'bash';
 
-    const showLineNumbers = !hideLineNumbers
-        && !LANGUAGES_WITHOUT_LINE_NUMBERS.includes(currentLanguage ?? '');
-    const showBashPrompt = isBash && !hideBashPromptPrefixes;
+    const showLineNumbers = !hideLineNumbers && !LANGUAGES_WITHOUT_LINE_NUMBERS.includes(currentLanguage ?? '');
     const showBashHeader = isBash && !hideBashHeader && !isMultiTab;
 
     const showHeader = isMultiTab || !!title || showBashHeader;
@@ -164,28 +162,20 @@ export const CodeBlock = ({
         syntaxHighlighterRef.current?.scrollTo(0, 0);
     };
 
-    const currentBashLinesPrefixes = useMemo(() => {
-        if (!showBashPrompt) return [];
-        return mapPrefixToBashLine(
-            currentCode,
-            currentTab?.bashCommandsStart ?? bashCommandsStart,
-        );
-    }, [currentCode, bashCommandsStart, showBashPrompt, currentTab]);
-
-    const getLineProps = useCallback(
-        (lineNumber: number) => {
-            const data = [];
-            if (currentHighlightLines?.includes(lineNumber)) {
-                data.push('highlighted');
-            }
-            if (showBashPrompt) {
-                data.push(currentBashLinesPrefixes[lineNumber - 1]);
-            }
-
-            return { data: data.join(' ') };
-        },
-        [currentHighlightLines, showBashPrompt, currentBashLinesPrefixes],
-    );
+    const showBashPrompt = isBash && !hideBashPromptPrefixes;
+    const effectiveBashCommandsStart = currentTab?.bashCommandsStart ?? bashCommandsStart;
+
+    const linePrefixes = useMemo(() => {
+        if (showBashPrompt) {
+            return getBashLinePrefixes(currentCode, effectiveBashCommandsStart);
+        }
+
+        if (showLineNumbers) {
+            return getNumberLinePrefixes(currentCode);
+        }
+
+        return {};
+    }, [showLineNumbers, showBashPrompt, currentCode, effectiveBashCommandsStart]);
 
     return (
         <CodeBlockWrapper
@@ -208,16 +198,15 @@ export const CodeBlock = ({
                 />
             )}
 
-            <SyntaxHighlighter
-                showLineNumbers
-                wrapLines
-                language={currentLanguage}
+            <PrismSyntaxHighlighter
+                code={currentCode}
+                linePrefixes={linePrefixes}
+                highlightLines={currentHighlightLines}
+                language={currentLanguage || 'text'}
                 size={size}
-                lineProps={getLineProps}
                 ref={syntaxHighlighterRef}
-            >
-                {currentCode}
-            </SyntaxHighlighter>
+                isSingleLine={false}
+            />
 
             <div className="CodeBlock-TopRightActionsWrapper">
                 {showActionButton && <ActionButton successStyle onClick={onActionButtonClick}>{actionButtonLabel ?? 'Run on Apify'}</ActionButton>}

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

@@ -0,0 +1,53 @@
+import type { ReactNode } from 'react';
+
+import { theme } from '../../../design_system/theme.js';
+import { CodeHighlighterLineBashPrefix, CodeHighlighterLinePrefix } from '../prism_highlighter.js';
+
+// input: [2, 4, 5, 6, 8, 10, 11, 12]
+// returns string indicating what type of line it is (bashStartCommand, bashCommand, bashEmptyLine)
+// commands start -> bashStartCommand
+// every next line after command start until next command start or empty line -> bashCommand
+export const getBashLinePrefixes = (
+    code: string,
+    bashCommandsStart: number[] = [],
+    isOneLine?: boolean) => {
+    const lines = code.split('\n').map((line) => line.trim());
+
+    const bashLinePrefixesArray = lines.map((line, i) => {
+        const isEmptyLine = line.startsWith('#') || !line;
+
+        // by default each line that is not empty or comment is a command start
+        if (bashCommandsStart.length === 0) {
+            return isEmptyLine ? (
+                <CodeHighlighterLineBashPrefix $isOneLine={isOneLine} />
+            ) : (
+                <CodeHighlighterLineBashPrefix $isOneLine={isOneLine} color={theme.color.lavender.base}>$</CodeHighlighterLineBashPrefix>
+            );
+        }
+
+        if (bashCommandsStart.includes(i + 1)) {
+            return (
+                <CodeHighlighterLineBashPrefix $isOneLine={isOneLine} color={theme.color.lavender.base}>$</CodeHighlighterLineBashPrefix>
+            );
+        }
+
+        if (isEmptyLine) {
+            return (
+                <CodeHighlighterLineBashPrefix $isOneLine={isOneLine}/>
+            );
+        }
+
+        return (
+            <CodeHighlighterLineBashPrefix $isOneLine={isOneLine} color={theme.color.lavender.base}>&lt;</CodeHighlighterLineBashPrefix>
+        );
+    });
+
+    return Object.fromEntries(bashLinePrefixesArray.map((linePrefix, i) => [i + 1, linePrefix]));
+};
+
+export const getNumberLinePrefixes = (code: string): Record<number, ReactNode> => {
+    const numberOfLines = code.split('\n').length;
+    const numbersArray = Array.from({ length: numberOfLines }, (_, i) => i + 1);
+
+    return Object.fromEntries(numbersArray.map((number) => [number, <CodeHighlighterLinePrefix>{number}</CodeHighlighterLinePrefix>]));
+};

package/src/components/code/index.ts

@@ -2,3 +2,4 @@ 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';

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

@@ -8,8 +8,10 @@ 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 type { SyntaxHighlighterBaseStylesWrapperProps } from '../syntax_highlighter.js';
-import { SyntaxHighlighter, SyntaxHighlighterBaseStylesWrapper } from '../syntax_highlighter.js';
+import type { SyntaxHighlighterBaseStylesWrapperProps } from '../code_block/code_block.styled.js';
+import { SyntaxHighlighterBaseStylesWrapper } from '../code_block/code_block.styled.js';
+import { getBashLinePrefixes } from '../code_block/utils.js';
+import { PrismSyntaxHighlighter } from '../prism_highlighter.js';
 
 export const oneLineCodeClassNames = {
     gradientWrapper: 'OneLineCode-GradientWrapper',
@@ -83,7 +85,6 @@ const OneLineCodeWrapper = styled(SyntaxHighlighterBaseStylesWrapper)<OneLineCod
         position: relative;
         flex: 1;
         min-width: 0;
-        padding-top: ${theme.space.space8};
         display: flex;
 
         .${oneLineCodeClassNames.gradient} {
@@ -92,6 +93,7 @@ const OneLineCodeWrapper = styled(SyntaxHighlighterBaseStylesWrapper)<OneLineCod
             top: 0;
             bottom: 0;
             width: 4rem;
+            z-index: 5;
             background: linear-gradient(
                 to right,
                 transparent,
@@ -105,6 +107,7 @@ const OneLineCodeWrapper = styled(SyntaxHighlighterBaseStylesWrapper)<OneLineCod
         overflow-x: auto;
         overflow-y: hidden;
         display: flex;
+        align-items: center;
         gap: ${theme.space.space16};
         padding: 0 ${theme.space.space8} !important;
         margin-left: ${theme.space.space8} !important;
@@ -114,30 +117,19 @@ const OneLineCodeWrapper = styled(SyntaxHighlighterBaseStylesWrapper)<OneLineCod
         scrollbar-color: ${theme.color.neutral.border} transparent;
 
 
-        .CodePre {
-            overflow: unset !important;
+        pre {
             display: flex;
             flex: 1;
             align-items: center;
-            height: 2.8rem;
+            height: 100%;
 
             code {
-                & > span {
-                    text-overflow: ellipsis;
-                    overflow: hidden;
-                    white-space: nowrap;
-                    vertical-align: text-top;
-                    ${({ $showBashPrefixes }) => $showBashPrefixes && css`
-                        &::before {
-                            color: ${theme.color.lavender.base};
-                            padding-right: ${theme.space.space16};
-                            min-width: ${theme.space.space24};
-                            user-select: none;
-                            -webkit-user-select: none;
-                            content: "$";
-                            font-size: 1em;
-                        }
-                    `}
+                height: 100%;
+                display: flex;
+                align-items: center;
+
+                & > div {
+                    padding-right: ${theme.space.space16};
                 }
             }
         }
@@ -182,6 +174,11 @@ export function OneLineCode({
 
     const showBashPrefixes = language === 'bash';
 
+    const linePrefixes = useMemo(
+        () => (showBashPrefixes ? getBashLinePrefixes(code, [1], true) : {}),
+        [showBashPrefixes, code],
+    );
+
     return (
         <OneLineCodeWrapper
             $httpMethod={httpMethod}
@@ -197,13 +194,13 @@ export function OneLineCode({
                             {httpMethod}
                         </Text>
                     )}
-                    <SyntaxHighlighter
+                    <PrismSyntaxHighlighter
                         language={language}
                         size={size}
-                        wrapLines
-                    >
-                        {code}
-                    </SyntaxHighlighter>
+                        linePrefixes={linePrefixes}
+                        code={code}
+                        isSingleLine={true}
+                    />
                 </div>
                 <div className={oneLineCodeClassNames.gradient} />
             </div>

package/src/components/code/prism_highlighter.tsx

@@ -0,0 +1,180 @@
+import clsx from 'clsx';
+import _ from 'lodash';
+import type { HighlightProps } from 'prism-react-renderer';
+import { Highlight, Prism, themes } from 'prism-react-renderer';
+import type { ReactNode } from 'react';
+import { forwardRef, useRef } from 'react';
+import styled, { css } from 'styled-components';
+
+import { theme } from '../../design_system/theme.js';
+import { useSharedUiDependencies } from '../../ui_dependency_provider.js';
+import { Text } from '../text/index.js';
+import type { SharedTextSize } from '../text/text_shared.js';
+
+(typeof global !== 'undefined' ? global : window).Prism = Prism;
+
+const HIGHLIGHT_BACKGROUND_COLOR = 'rgba(22, 114, 235, 0.05)';
+
+const loadLanguages = async () => {
+    await Promise.all([
+        // @ts-expect-error The library is badly typed and does not export the type
+        import('prismjs/components/prism-bash.js'),
+        // @ts-expect-error The library is badly typed and does not export the type
+        import('prismjs/components/prism-rust.js'),
+        // @ts-expect-error The library is badly typed and does not export the type
+        import('prismjs/components/prism-bash.js'),
+        // @ts-expect-error The library is badly typed and does not export the type
+        import('prismjs/components/prism-docker.js'),
+        // @ts-expect-error The library is badly typed and does not export the type
+        import('prismjs/components/prism-http.js'),
+        // @ts-expect-error The library is badly typed and does not export the type
+        import('prismjs/components/prism-javascript.js'),
+        // @ts-expect-error The library is badly typed and does not export the type
+        import('prismjs/components/prism-json.js'),
+        // @ts-expect-error The library is badly typed and does not export the type
+        import('prismjs/components/prism-markup.js'),
+        // @ts-expect-error The library is badly typed and does not export the type
+        import('prismjs/components/prism-python.js'),
+        // @ts-expect-error The library is badly typed and does not export the type
+        import('prismjs/components/prism-typescript.js'),
+        // @ts-expect-error The library is badly typed and does not export the type
+        import('prismjs/components/prism-xml-doc.js'),
+        // @ts-expect-error The library is badly typed and does not export the type
+        import('prismjs/components/prism-yaml.js'),
+    ]);
+};
+
+void loadLanguages();
+
+type StyledPreProps = {
+    $hasLinePrefixes: boolean,
+    $isSingleLine: boolean
+};
+
+const StyledPre = styled.pre<StyledPreProps>`
+    width: 100%;
+    position: relative;
+    overflow: auto;
+    z-index: 2;
+    padding: ${({ $isSingleLine }) => ($isSingleLine ? 0 : `${theme.space.space16} 0`)};
+    margin: 0;
+
+    code {
+        min-width: 100%;
+        display: inline-block;
+        vertical-align: middle;
+
+        *,
+        *::before,
+        *::after {
+            text-shadow: none !important;
+            font-style: normal !important;
+            font-family: inherit !important;
+            font-size: inherit !important;
+            font-weight: inherit !important;
+            line-height: inherit !important;
+            background-color: transparent !important;
+        }
+
+        & > div {
+            display: block;
+
+            &.highlighted {
+                background-color: ${HIGHLIGHT_BACKGROUND_COLOR} !important;
+                border-left: 6px solid ${theme.color.neutral.border} !important;
+                padding-left: ${({ $hasLinePrefixes }) => ($hasLinePrefixes ? '0.2' : '1')}rem;
+            }
+
+            ${({ $isSingleLine }) => !$isSingleLine && css<{$hasLinePrefixes: boolean}>`
+                &:hover {
+                    background-color: ${HIGHLIGHT_BACKGROUND_COLOR} !important;
+                    border-left: 6px solid ${theme.color.neutral.border} !important;
+                    padding-left: ${({ $hasLinePrefixes }) => ($hasLinePrefixes ? '0.2' : '1')}rem;
+                }
+            `}
+
+            ${({ $isSingleLine }) => ($isSingleLine ? css<StyledPreProps>`
+                white-space: nowrap;
+                vertical-align: text-top;
+            ` : css<StyledPreProps>`
+                padding-left: ${({ $hasLinePrefixes }) => ($hasLinePrefixes ? theme.space.space8 : theme.space.space16)};
+                padding-right: ${theme.space.space16};
+
+                &:hover {
+                    background-color: ${HIGHLIGHT_BACKGROUND_COLOR} !important;
+                    border-left: 6px solid ${theme.color.neutral.border} !important;
+                    padding-left: ${({ $hasLinePrefixes }) => ($hasLinePrefixes ? '0.2' : '1')}rem;
+                }
+            `)}
+        }
+    }
+`;
+
+export const CodeHighlighterLinePrefix = styled(Text).attrs({ as: 'span' })`
+    display: inline-block;
+    margin-right: ${theme.space.space16};
+    text-align: right;
+    min-width: ${theme.space.space24};
+    color: ${({ color }) => color || theme.color.neutral.textSubtle};
+    user-select: none;
+    -webkit-user-select: none;
+`;
+
+export const CodeHighlighterLineBashPrefix = styled(CodeHighlighterLinePrefix)<{ $isOneLine?: boolean }>`
+    min-width: ${({ $isOneLine }) => ($isOneLine ? 'unset' : theme.space.space16)} !important;
+`;
+
+type SyntaxHighlighterProps = Omit<HighlightProps, 'children' | 'language'> & {
+    size?: SharedTextSize,
+    linePrefixes?: Record<string, ReactNode>,
+    highlightLines?: number[],
+    language?: string,
+    className?: string,
+    isSingleLine: boolean,
+};
+
+export const PrismSyntaxHighlighter = forwardRef<HTMLPreElement, SyntaxHighlighterProps>(({
+    size = 'regular',
+    linePrefixes = {},
+    highlightLines = [],
+    language = 'javascript',
+    className,
+    isSingleLine,
+    ...rest
+}, ref) => {
+    const { uiTheme } = useSharedUiDependencies();
+    const hasLinePrefixes = !_.isEmpty(linePrefixes);
+    const highlightedLinesObject = useRef<Record<number, boolean>>(Object.fromEntries(highlightLines.map((e) => [e, true])));
+
+    return (
+        <Highlight
+            theme={uiTheme === 'DARK' ? themes.nightOwl : themes.oneLight}
+            language={language}
+            {...rest}
+        >
+            {({ className: prismClassName, tokens, getLineProps, getTokenProps }) => (
+                <StyledPre
+                    className={clsx(className, prismClassName)}
+                    $hasLinePrefixes={hasLinePrefixes}
+                    $isSingleLine={isSingleLine}
+                    ref={ref}
+                >
+                    <Text
+                        size={size}
+                        type='code'
+                        as='code'
+                    >
+                        {tokens.map((line, i) => (
+                            <div key={i} {...getLineProps({ line, className: highlightedLinesObject.current[i + 1] ? 'highlighted' : '' })}>
+                                {hasLinePrefixes && (linePrefixes[i + 1] || <CodeHighlighterLinePrefix />)}
+                                {line.map((token, key) => (
+                                    <span key={key} {...getTokenProps({ token })} />
+                                ))}
+                            </div>
+                        ))}
+                    </Text>
+                </StyledPre>
+            )}
+        </Highlight>
+    );
+});

package/src/components/image.tsx

@@ -1,5 +1,6 @@
 import { forwardRef } from 'react';
 
+import type { ImageProxyOptions } from '../ui_dependency_provider.js';
 import { useSharedUiDependencies } from '../ui_dependency_provider.js';
 import { Box, type BoxProps } from './box.js';
 
@@ -9,7 +10,7 @@ type ImageProps = {
     width?: number,
     height?: number,
     loading?: 'eager' | 'lazy' | undefined;
-}
+} & ImageProxyOptions
 
 export const Image = forwardRef<HTMLImageElement, ImageProps & Omit<BoxProps, 'as'>>((props, ref) => {
     const { InternalImage } = useSharedUiDependencies();

package/src/ui_dependency_provider.tsx

@@ -10,6 +10,14 @@ export interface AgnosticInternalLinkProps extends Omit<React.AnchorHTMLAttribut
     href: string;
 }
 
+export type ImageProxyOptions = {
+    extension?: string,
+    resize?: {
+        width?: number,
+        height?: number,
+    }
+}
+
 export interface UiDependencies {
     InternalLink: React.ForwardRefExoticComponent<AgnosticInternalLinkProps & React.RefAttributes<HTMLAnchorElement>>,
     InternalImage: React.ForwardRefExoticComponent<React.RefAttributes<HTMLImageElement>>,
@@ -22,7 +30,7 @@ export interface UiDependencies {
     isHrefTrusted: (href: string) => boolean,
     uiTheme?: UiThemeOption, // Optional - as we can just fallback to light theme on the web
     // TODO: Make required once we add it on the web
-    generateProxyImageUrl?: (url: string, options: { extension?: string, resize?: { width?: number, height?: number } }) => string
+    generateProxyImageUrl?: (url: string, options: ImageProxyOptions) => string
 }
 
 interface UiDependencyProviderProps {

package/dist/src/components/code/syntax_highlighter.d.ts

@@ -1,15 +0,0 @@
-import type { SyntaxHighlighterProps as ReactSyntaxHighlighterProps } from 'react-syntax-highlighter';
-import { type SharedTextProps } from '../text/index.js';
-import type { SharedTextSize } from '../text/text_shared.js';
-type SyntaxHighlighterProps = ReactSyntaxHighlighterProps & {
-    size: SharedTextSize;
-};
-export declare const SyntaxHighlighter: import("react").ForwardRefExoticComponent<Omit<SyntaxHighlighterProps, "ref"> & import("react").RefAttributes<HTMLPreElement>>;
-export type SyntaxHighlighterBaseStylesWrapperProps = SharedTextProps & {
-    $fullWidth?: boolean;
-    $fullHeight?: string;
-    $showLineNumbers?: boolean;
-};
-export declare const SyntaxHighlighterBaseStylesWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../box.js").BoxProps & import("react").RefAttributes<HTMLElement>>, any, SyntaxHighlighterBaseStylesWrapperProps, never>;
-export {};
-//# sourceMappingURL=syntax_highlighter.d.ts.map

package/dist/src/components/code/syntax_highlighter.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"syntax_highlighter.d.ts","sourceRoot":"","sources":["../../../../src/components/code/syntax_highlighter.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,IAAI,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AAiCtG,OAAO,EAAE,KAAK,eAAe,EAAQ,MAAM,kBAAkB,CAAC;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAoD7D,KAAK,sBAAsB,GAAG,2BAA2B,GAAG;IAAE,IAAI,EAAE,cAAc,CAAA;CAAE,CAAC;AAErF,eAAO,MAAM,iBAAiB,gIAsB5B,CAAC;AAEH,MAAM,MAAM,uCAAuC,GAAG,eAAe,GAAG;IACpE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAA;AAED,eAAO,MAAM,kCAAkC,wNAY9C,CAAC"}