@apify/ui-library 1.138.0 → 1.138.1

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

@@ -17,14 +17,22 @@ export const SyntaxHighlighterBaseStylesWrapper = styled(Box)<SyntaxHighlighterB
     overflow: hidden;
 
     width: 100%;
-    ${({ $fullWidth }) => !$fullWidth && css`max-width: 860px;`}
-    ${({ $fullHeight }) => !$fullHeight && css`max-height: 600px;`}
+    ${({ $fullWidth }) =>
+        !$fullWidth &&
+        css`
+            max-width: 860px;
+        `}
+    ${({ $fullHeight }) =>
+        !$fullHeight &&
+        css`
+            max-height: 600px;
+        `}
 
     background-color: transparent;
     position: relative;
 `;
 
-export const CodeBlockWrapper = styled(SyntaxHighlighterBaseStylesWrapper) <{
+export const CodeBlockWrapper = styled(SyntaxHighlighterBaseStylesWrapper)<{
     $hasHeader: boolean;
     $gradientRotation?: number;
     $highlightLines?: number[];
@@ -33,7 +41,7 @@ export const CodeBlockWrapper = styled(SyntaxHighlighterBaseStylesWrapper) <{
     $fullWidth?: boolean;
     $showLineNumbers?: boolean;
     $fullHeight?: boolean;
-    size?: SharedTextSize,
+    size?: SharedTextSize;
 }>`
     position: relative;
     display: flex;
@@ -91,7 +99,6 @@ export const CodeBlockWrapper = styled(SyntaxHighlighterBaseStylesWrapper) <{
                     overflow: hidden;
                 }
 
-
                 &.selected {
                     color: ${theme.color.neutral.text};
                     border: 1px solid ${theme.color.neutral.border};
@@ -124,31 +131,31 @@ export const CodeBlockWrapper = styled(SyntaxHighlighterBaseStylesWrapper) <{
         }
     }
 
-
     .CodeBlock-TopRightActionsWrapper {
         position: absolute;
         top: 0;
         right: 0;
-        ${({ $hasHeader }) => ($hasHeader
-            ? css`
-            padding-top: 6px;
-            padding-right: ${theme.space.space8};`
-            : css`
-            padding-top: ${theme.space.space16};
-            padding-right: ${theme.space.space16};`)}
+        ${({ $hasHeader }) =>
+            $hasHeader
+                ? css`
+                      padding-top: 6px;
+                      padding-right: ${theme.space.space8};
+                  `
+                : css`
+                      padding-top: ${theme.space.space16};
+                      padding-right: ${theme.space.space16};
+                  `}
 
         display: flex;
         gap: ${theme.space.space8};
         z-index: 3;
         height: 3.9rem;
 
-        ${({ $hasHeader }) => $hasHeader && css`
+        ${({ $hasHeader }) =>
+            $hasHeader &&
+            css`
                 padding-left: ${theme.space.space32};
-                background: linear-gradient(
-                    to right,
-                    transparent,
-                    ${theme.color.neutral.backgroundSubtle} 20px
-                );
+                background: linear-gradient(to right, transparent, ${theme.color.neutral.backgroundSubtle} 20px);
             `}
     }
 

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

@@ -31,7 +31,19 @@ type HeaderProps = {
     showBashHeader?: boolean;
 };
 
-const LANGUAGES_WITHOUT_LINE_NUMBERS = ['json', 'jsonp', 'jsonp', 'rss', 'yaml', 'xml', 'html', 'bash', 'text', 'dockerfile', 'http'];
+const LANGUAGES_WITHOUT_LINE_NUMBERS = [
+    'json',
+    'jsonp',
+    'jsonp',
+    'rss',
+    'yaml',
+    'xml',
+    'html',
+    'bash',
+    'text',
+    'dockerfile',
+    'http',
+];
 
 const HeaderDots = () => {
     return (
@@ -43,15 +55,9 @@ const HeaderDots = () => {
     );
 };
 
-const Header = ({
-    tabs,
-    currentTab,
-    showBashHeader,
-    onTabChange,
-    title,
-}: HeaderProps) => {
+const Header = ({ tabs, currentTab, showBashHeader, onTabChange, title }: HeaderProps) => {
     return (
-        <div className="CodeBlock-Header">
+        <div className="CodeBlock-Header" data-test="code-block-header">
             {showBashHeader && <HeaderDots />}
             {title && (
                 <Text weight="bold" className="CodeBlock-HeaderTitle">
@@ -63,14 +69,13 @@ const Header = ({
                     const selected = tab.key === currentTab?.key;
                     const props = {
                         className: clsx('CodeBlock-Tab', { selected }),
+                        'data-test': `code-block-tab-${tab.key}`,
                         onClick: (e: React.MouseEvent) => onTabChange(tab, e),
                         title: tab.label,
                         id: tab.id ?? tab.key,
                     };
 
-                    const label = <Text weight={tab.key === currentTab?.key ? 'bold' : 'normal'}>
-                        {tab.label}
-                    </Text>;
+                    const label = <Text weight={tab.key === currentTab?.key ? 'bold' : 'normal'}>{tab.label}</Text>;
 
                     if (tab.to) {
                         return (
@@ -136,15 +141,13 @@ export const CodeBlock = ({
     ...rest
 }: CodeBlockProps) => {
     const isMultiTab = content instanceof Array;
-    const defaultTab = isMultiTab
-        ? content.find((tab) => tab.key === defaultTabKey) ?? content[0]
-        : null;
+    const defaultTab = isMultiTab ? (content.find((tab) => tab.key === defaultTabKey) ?? content[0]) : null;
     const [currentTab, setCurrentTab] = useState<CodeTab | null>(defaultTab);
     const currentCode = (isMultiTab ? currentTab?.code : content)?.trim() ?? '';
     const currentLanguage = language ?? currentTab?.language;
 
     const currentHighlightLines = useMemo(
-        () => (isMultiTab ? currentTab?.highlightLines ?? [] : highlightLines),
+        () => (isMultiTab ? (currentTab?.highlightLines ?? []) : highlightLines),
         [isMultiTab, currentTab, highlightLines],
     );
 
@@ -210,16 +213,15 @@ export const CodeBlock = ({
             />
 
             <div className="CodeBlock-TopRightActionsWrapper">
-                {showActionButton && <ActionButton successStyle onClick={onActionButtonClick}>{actionButtonLabel ?? 'Run on Apify'}</ActionButton>}
+                {showActionButton && (
+                    <ActionButton successStyle onClick={onActionButtonClick}>
+                        {actionButtonLabel ?? 'Run on Apify'}
+                    </ActionButton>
+                )}
                 {!hideCopyButton && <CopyButton code={currentCode} />}
             </div>
 
-            {showGradient && (
-                <ColorWheelGradient
-                    className="CodeBlock-Gradient"
-                    blurSize={69}
-                />
-            )}
-        </CodeBlockWrapper >
+            {showGradient && <ColorWheelGradient className="CodeBlock-Gradient" blurSize={69} />}
+        </CodeBlockWrapper>
     );
 };

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

@@ -1,13 +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.js';
+import { type CodeBlockTabKey, CodeBlockWithTabs, type CodeBlockWithTabsProps } from './code_block_with_tabs.js';
 
 export default {
     title: 'UI-Library/Code/CodeBlockWithTabs',
@@ -34,18 +29,18 @@ const Container = styled.div`
 
 export const Default = ({ tabs, ...args }: Omit<CodeBlockWithTabsProps, 'currentTabKey'>) => {
     const [currentTabKey, setCurrentTabKey] = useState(tabs[0]?.key);
-    const extendedTabs = useMemo(() => tabs.map((tab) => ({
-        ...tab,
-        onClick: () => setCurrentTabKey(tab.key),
-    })), [tabs]);
+    const extendedTabs = useMemo(
+        () =>
+            tabs.map((tab) => ({
+                ...tab,
+                onClick: () => setCurrentTabKey(tab.key),
+            })),
+        [tabs],
+    );
 
     return (
         <Container>
-            <CodeBlockWithTabs
-                currentTabKey={currentTabKey as CodeBlockTabKey}
-                tabs={extendedTabs}
-                {...args}
-            />
+            <CodeBlockWithTabs currentTabKey={currentTabKey as CodeBlockTabKey} tabs={extendedTabs} {...args} />
         </Container>
     );
 };
@@ -74,8 +69,7 @@ console.log(c);`,
 const a: number = 1;
 const b: number = 2;
 const c: number = a + b;
-console.log(c);`
-            ,
+console.log(c);`,
         },
     ],
 };

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

@@ -64,7 +64,10 @@ export const CODE_BLOCK_TAB_CATALOG: Record<CodeBlockTabKey, CodeBlockTabConfig>
 
 type SharedBoxProps = Omit<RegularBoxProps, 'as' | 'children' | 'onClick'> & MarginSpacingProps;
 
-type SharedCodeBlockProps = Omit<CodeBlockProps, 'bashCommandsStart' | 'content' | 'language' | 'defaultTabKey' | 'onTabChange'>;
+type SharedCodeBlockProps = Omit<
+    CodeBlockProps,
+    'bashCommandsStart' | 'content' | 'language' | 'defaultTabKey' | 'onTabChange'
+>;
 type SharedLinkProps = Pick<RegularLinkProps, 'to' | 'rel' | 'target'>;
 
 export type CodeBlockTabProps = {
@@ -105,7 +108,7 @@ const CodeBlockWithTabsWrapper = styled(Box)`
         border-top-left-radius: ${theme.radius.radius12};
         position: relative;
 
-        & > [role="tabpanel"] {
+        & > [role='tabpanel'] {
             position: sticky;
             right: 0;
             top: 0;
@@ -117,7 +120,11 @@ const CodeBlockWithTabsWrapper = styled(Box)`
                 right: -${theme.space.space8};
                 height: 100%;
                 width: ${theme.space.space16};
-                background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, ${theme.color.neutral.backgroundSubtle} 100%);
+                background: linear-gradient(
+                    90deg,
+                    rgba(255, 255, 255, 0) 0%,
+                    ${theme.color.neutral.backgroundSubtle} 100%
+                );
                 content: ' ';
                 pointer-events: none;
                 position: absolute;
@@ -130,7 +137,7 @@ const CodeBlockWithTabsWrapper = styled(Box)`
             gap: ${theme.space.space24};
             padding-inline: ${theme.space.space24};
 
-            & > [role="tabpanel"] {
+            & > [role='tabpanel'] {
                 margin-left: unset;
 
                 &::after {
@@ -159,7 +166,7 @@ const CodeBlockWithTabsWrapper = styled(Box)`
             height: 20px;
         }
 
-        [role="tabpanel"] {
+        [role='tabpanel'] {
             bottom: 0;
             width: 100%;
             height: 2px;
@@ -174,7 +181,7 @@ const CodeBlockWithTabsWrapper = styled(Box)`
         &.selected {
             color: ${theme.color.neutral.text};
 
-            [role="tabpanel"] {
+            [role='tabpanel'] {
                 display: block;
             }
         }
@@ -197,7 +204,14 @@ const IMG_RESIZE = {
     height: 20,
 };
 
-export const CodeBlockWithTabs = ({ className, codeBlockProps, currentTabKey, tabs, optimisticCurrentTabKey, ...props }: CodeBlockWithTabsProps) => {
+export const CodeBlockWithTabs = ({
+    className,
+    codeBlockProps,
+    currentTabKey,
+    tabs,
+    optimisticCurrentTabKey,
+    ...props
+}: CodeBlockWithTabsProps) => {
     const { generateProxyImageUrl } = useSharedUiDependencies();
     const currentTab = tabs.find((tab) => tab.key === currentTabKey) ?? tabs[0];
 
@@ -215,10 +229,14 @@ export const CodeBlockWithTabs = ({ className, codeBlockProps, currentTabKey, ta
                     };
                     const children = (
                         <>
-                            {Icon
-                                ? <Icon size="20" />
-                                : <img src={src && (generateProxyImageUrl?.(src, { resize: IMG_RESIZE }) ?? src)} alt={label} />
-                            }
+                            {Icon ? (
+                                <Icon size="20" />
+                            ) : (
+                                <img
+                                    src={src && (generateProxyImageUrl?.(src, { resize: IMG_RESIZE }) ?? src)}
+                                    alt={label}
+                                />
+                            )}
                             <HeadingShared type="titleS" as="p">
                                 {label}
                             </HeadingShared>
@@ -236,11 +254,7 @@ export const CodeBlockWithTabs = ({ className, codeBlockProps, currentTabKey, ta
                     }
 
                     return (
-                        <div
-                            {...commonProps}
-                            role="button"
-                            key={tab.key}
-                        >
+                        <div {...commonProps} role="button" key={tab.key}>
                             {children}
                         </div>
                     );

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

@@ -7,10 +7,7 @@ import { CodeHighlighterLineBashPrefix, CodeHighlighterLinePrefix } from '../pri
 // 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) => {
+export const getBashLinePrefixes = (code: string, bashCommandsStart: number[] = [], isOneLine?: boolean) => {
     const lines = code.split('\n').map((line) => line.trim());
 
     const bashLinePrefixesArray = lines.map((line, i) => {
@@ -21,7 +18,13 @@ export const getBashLinePrefixes = (
             return isEmptyLine ? (
                 <CodeHighlighterLineBashPrefix $isOneLine={isOneLine} key={`code-highlighter-line-bash-prefix-${i}`} />
             ) : (
-                <CodeHighlighterLineBashPrefix $isOneLine={isOneLine} color={theme.color.lavender.base} key={`code-highlighter-line-bash-prefix-${i}`}>$</CodeHighlighterLineBashPrefix>
+                <CodeHighlighterLineBashPrefix
+                    $isOneLine={isOneLine}
+                    color={theme.color.lavender.base}
+                    key={`code-highlighter-line-bash-prefix-${i}`}
+                >
+                    $
+                </CodeHighlighterLineBashPrefix>
             );
         }
 
@@ -31,16 +34,15 @@ export const getBashLinePrefixes = (
                     $isOneLine={isOneLine}
                     color={theme.color.lavender.base}
                     key={`code-highlighter-line-bash-prefix-${i}`}
-                >$</CodeHighlighterLineBashPrefix>
+                >
+                    $
+                </CodeHighlighterLineBashPrefix>
             );
         }
 
         if (isEmptyLine) {
             return (
-                <CodeHighlighterLineBashPrefix
-                    $isOneLine={isOneLine}
-                    key={`code-highlighter-line-bash-prefix-${i}`}
-                />
+                <CodeHighlighterLineBashPrefix $isOneLine={isOneLine} key={`code-highlighter-line-bash-prefix-${i}`} />
             );
         }
 
@@ -49,7 +51,9 @@ export const getBashLinePrefixes = (
                 $isOneLine={isOneLine}
                 color={theme.color.lavender.base}
                 key={`code-highlighter-line-bash-prefix-${i}`}
-            >&lt;</CodeHighlighterLineBashPrefix>
+            >
+                &lt;
+            </CodeHighlighterLineBashPrefix>
         );
     });
 
@@ -60,8 +64,12 @@ 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 key={`code-highlighter-line-prefix-${number}`}>{number}</CodeHighlighterLinePrefix>,
-    ]));
+    return Object.fromEntries(
+        numbersArray.map((number) => [
+            number,
+            <CodeHighlighterLinePrefix key={`code-highlighter-line-prefix-${number}`}>
+                {number}
+            </CodeHighlighterLinePrefix>,
+        ]),
+    );
 };

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

@@ -43,13 +43,15 @@ type Story = StoryObj<InlineCodeProps>;
  */
 export const AllVariants: Story = {
     render: () => (
-        <div style={{
-            display: 'grid',
-            gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
-            gap: '24px',
-            padding: '24px',
-            maxWidth: '1200px',
-        }}>
+        <div
+            style={{
+                display: 'grid',
+                gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
+                gap: '24px',
+                padding: '24px',
+                maxWidth: '1200px',
+            }}
+        >
             {/* Size variants without copy button */}
             <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
                 <h3 style={{ margin: '0 0 8px 0', fontSize: '16px', fontWeight: '600' }}>Size Variants</h3>
@@ -72,15 +74,21 @@ export const AllVariants: Story = {
                 <h3 style={{ margin: '0 0 8px 0', fontSize: '16px', fontWeight: '600' }}>With Copy Button</h3>
                 <div>
                     <p style={{ margin: '0 0 4px 0', fontSize: '14px', color: '#666' }}>Small</p>
-                    <InlineCode size="small" withCopyButton>npm install @apify/ui-library</InlineCode>
+                    <InlineCode size="small" withCopyButton>
+                        npm install @apify/ui-library
+                    </InlineCode>
                 </div>
                 <div>
                     <p style={{ margin: '0 0 4px 0', fontSize: '14px', color: '#666' }}>Regular</p>
-                    <InlineCode size="regular" withCopyButton>npm install @apify/ui-library</InlineCode>
+                    <InlineCode size="regular" withCopyButton>
+                        npm install @apify/ui-library
+                    </InlineCode>
                 </div>
                 <div>
                     <p style={{ margin: '0 0 4px 0', fontSize: '14px', color: '#666' }}>Big</p>
-                    <InlineCode size="big" withCopyButton>npm install @apify/ui-library</InlineCode>
+                    <InlineCode size="big" withCopyButton>
+                        npm install @apify/ui-library
+                    </InlineCode>
                 </div>
             </div>
         </div>

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

@@ -27,9 +27,11 @@ const CopyButtonWrapper = styled.div`
 
 const CopyButton: React.FC<{ text: string }> = ({ text }) => {
     const { isCopied, copyToClipboard } = useCopyToClipboard();
-    return <CopyButtonWrapper role='button' onClick={async () => copyToClipboard(text)} title='Copy to clipboard'>
-        {isCopied ? <CheckIcon size="16" /> : <CopyIcon size="16" />}
-    </CopyButtonWrapper>;
+    return (
+        <CopyButtonWrapper role="button" onClick={async () => copyToClipboard(text)} title="Copy to clipboard">
+            {isCopied ? <CheckIcon size="16" /> : <CopyIcon size="16" />}
+        </CopyButtonWrapper>
+    );
 };
 
 const Wrapper = styled.span`
@@ -39,24 +41,17 @@ const Wrapper = styled.span`
 `;
 
 export type InlineCodeProps = RegularBoxProps & {
-    children: React.ReactNode,
-    size?: SharedTextSize,
-    withCopyButton?: boolean,
+    children: React.ReactNode;
+    size?: SharedTextSize;
+    withCopyButton?: boolean;
 };
 
 // This might be just a Chip component
-export const InlineCode: React.FC<InlineCodeProps> = ({
-    children,
-    size,
-    withCopyButton,
-    ...props
-}) => <Wrapper {...props}>
-    <Text
-        type="code"
-        as="code"
-        size={size}
-    >
-        {children}
-        {withCopyButton && <CopyButton text={children?.toString() ?? ''} />}
-    </Text>
-</Wrapper>;
+export const InlineCode: React.FC<InlineCodeProps> = ({ children, size, withCopyButton, ...props }) => (
+    <Wrapper {...props}>
+        <Text type="code" as="code" size={size}>
+            {children}
+            {withCopyButton && <CopyButton text={children?.toString() ?? ''} />}
+        </Text>
+    </Wrapper>
+);

package/src/components/code/one_light_theme.ts

@@ -19,14 +19,7 @@ export const oneLightTheme: PrismTheme = {
             },
         },
         {
-            types: [
-                'attr-name',
-                'class-name',
-                'boolean',
-                'constant',
-                'number',
-                'atrule',
-            ],
+            types: ['attr-name', 'class-name', 'boolean', 'constant', 'number', 'atrule'],
             style: {
                 color: 'hsl(35, 99%, 36%)',
             },
@@ -51,15 +44,7 @@ export const oneLightTheme: PrismTheme = {
             },
         },
         {
-            types: [
-                'selector',
-                'string',
-                'char',
-                'builtin',
-                'inserted',
-                'regex',
-                'attr-value',
-            ],
+            types: ['selector', 'string', 'char', 'builtin', 'inserted', 'regex', 'attr-value'],
             style: {
                 color: 'hsl(119, 34%, 47%)',
             },

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

@@ -76,13 +76,15 @@ type Story = StoryObj<OneLineCodeProps>;
  */
 export const AllVariants: Story = {
     render: () => (
-        <div style={{
-            display: 'flex',
-            flexDirection: 'column',
-            padding: '24px',
-            gap: '24px',
-            maxWidth: '1200px',
-        }}>
+        <div
+            style={{
+                display: 'flex',
+                flexDirection: 'column',
+                padding: '24px',
+                gap: '24px',
+                maxWidth: '1200px',
+            }}
+        >
             {/* Basic examples */}
             <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
                 <h3 style={{ margin: '0 0 8px 0', fontSize: '16px', fontWeight: '600' }}>Basic Examples</h3>
@@ -105,19 +107,27 @@ export const AllVariants: Story = {
                 <h3 style={{ margin: '0 0 8px 0', fontSize: '16px', fontWeight: '600' }}>HTTP Methods</h3>
                 <div>
                     <p style={{ margin: '0 0 4px 0', fontSize: '14px', color: '#666' }}>GET</p>
-                    <OneLineCode language="http" httpMethod="GET">https://api.example.com/users</OneLineCode>
+                    <OneLineCode language="http" httpMethod="GET">
+                        https://api.example.com/users
+                    </OneLineCode>
                 </div>
                 <div>
                     <p style={{ margin: '0 0 4px 0', fontSize: '14px', color: '#666' }}>POST</p>
-                    <OneLineCode language="http" httpMethod="POST">https://api.example.com/users</OneLineCode>
+                    <OneLineCode language="http" httpMethod="POST">
+                        https://api.example.com/users
+                    </OneLineCode>
                 </div>
                 <div>
                     <p style={{ margin: '0 0 4px 0', fontSize: '14px', color: '#666' }}>PUT</p>
-                    <OneLineCode language="http" httpMethod="PUT">https://api.example.com/users/123</OneLineCode>
+                    <OneLineCode language="http" httpMethod="PUT">
+                        https://api.example.com/users/123
+                    </OneLineCode>
                 </div>
                 <div>
                     <p style={{ margin: '0 0 4px 0', fontSize: '14px', color: '#666' }}>DELETE</p>
-                    <OneLineCode language="http" httpMethod="DELETE">https://api.example.com/users/123</OneLineCode>
+                    <OneLineCode language="http" httpMethod="DELETE">
+                        https://api.example.com/users/123
+                    </OneLineCode>
                 </div>
             </div>
 
@@ -136,11 +146,7 @@ export const AllVariants: Story = {
                 </div>
                 <div>
                     <p style={{ margin: '0 0 4px 0', fontSize: '14px', color: '#666' }}>With Secret</p>
-                    <OneLineCode
-                        language="http"
-                        secret="VERY_SECRET_TOKEN"
-                        httpMethod="GET"
-                    >
+                    <OneLineCode language="http" secret="VERY_SECRET_TOKEN" httpMethod="GET">
                         https://api.example.com?token=***
                     </OneLineCode>
                 </div>
@@ -157,15 +163,21 @@ export const AllVariants: Story = {
                 <h3 style={{ margin: '0 0 8px 0', fontSize: '16px', fontWeight: '600' }}>Size Variants</h3>
                 <div>
                     <p style={{ margin: '0 0 4px 0', fontSize: '14px', color: '#666' }}>Small</p>
-                    <OneLineCode language="javascript" size="small">const foo = &apos;bar&apos;;</OneLineCode>
+                    <OneLineCode language="javascript" size="small">
+                        const foo = &apos;bar&apos;;
+                    </OneLineCode>
                 </div>
                 <div>
                     <p style={{ margin: '0 0 4px 0', fontSize: '14px', color: '#666' }}>Regular</p>
-                    <OneLineCode language="javascript" size="regular">const foo = &apos;bar&apos;;</OneLineCode>
+                    <OneLineCode language="javascript" size="regular">
+                        const foo = &apos;bar&apos;;
+                    </OneLineCode>
                 </div>
                 <div>
                     <p style={{ margin: '0 0 4px 0', fontSize: '14px', color: '#666' }}>Big</p>
-                    <OneLineCode language="javascript" size="big">const foo = &apos;bar&apos;;</OneLineCode>
+                    <OneLineCode language="javascript" size="big">
+                        const foo = &apos;bar&apos;;
+                    </OneLineCode>
                 </div>
             </div>
         </div>