@juspay/blend-design-system 0.0.37-beta.3 → 0.0.37-beta.5

package/lib/components/Checkbox/Checkbox.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useId } from 'react'
+import { forwardRef, useEffect, useId, useState } from 'react'
 import { Check, Minus } from 'lucide-react'
 import type { CheckboxProps } from './types'
 import { CheckboxSize } from './types'
@@ -46,6 +46,26 @@ export const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
         const generatedId = useId()
         const uniqueId = id || generatedId
         const shouldShake = useErrorShake(error)
+        const isControlled = checked !== undefined
+        const [uncontrolledChecked, setUncontrolledChecked] = useState<
+            boolean | 'indeterminate'
+        >(defaultChecked ?? false)
+        const resolvedChecked = isControlled ? checked : uncontrolledChecked
+
+        useEffect(() => {
+            if (!isControlled) {
+                setUncontrolledChecked(defaultChecked ?? false)
+            }
+        }, [defaultChecked, isControlled])
+
+        const handleCheckedChange = (
+            nextChecked: boolean | 'indeterminate'
+        ) => {
+            if (!isControlled) {
+                setUncontrolledChecked(nextChecked)
+            }
+            onCheckedChange?.(nextChecked)
+        }
 
         const labelMaxLength = maxLength?.label
         const subtextMaxLength = maxLength?.subtext
@@ -76,28 +96,30 @@ export const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
                     id={uniqueId}
                     name={name}
                     ref={ref}
-                    checked={checked ?? defaultChecked ?? false}
-                    onCheckedChange={onCheckedChange}
+                    {...(isControlled
+                        ? { checked }
+                        : { defaultChecked: defaultChecked ?? false })}
+                    onCheckedChange={handleCheckedChange}
                     disabled={disabled}
                     required={required}
                     size={size}
                     $isDisabled={disabled}
-                    $checked={checked ?? defaultChecked ?? false}
+                    $checked={resolvedChecked}
                     $error={error}
                     style={getErrorShakeStyle(shouldShake)}
                     {...ariaAttributes}
                     {...restProps}
                     data-element="checkbox"
                     data-state={
-                        checked === 'indeterminate'
+                        resolvedChecked === 'indeterminate'
                             ? 'indeterminate'
-                            : checked
+                            : resolvedChecked
                               ? 'checked'
                               : 'unchecked'
                     }
                 >
                     <CheckboxIndicator
-                        checked={checked ?? defaultChecked ?? false}
+                        checked={resolvedChecked}
                         size={size}
                         tokens={tokens}
                         disabled={disabled}

package/lib/components/CodeBlock/CodeBlock.tsx

@@ -7,6 +7,7 @@ import {
     useCallback,
     useMemo,
 } from 'react'
+import styled from 'styled-components'
 import { Check, Copy, FileCode } from 'lucide-react'
 import Block from '../Primitives/Block/Block'
 import Button from '../Button/Button'
@@ -33,6 +34,21 @@ import {
     buildDiffViewSegments,
 } from './utils'
 
+const CopyOverlay = styled.div`
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    z-index: 10;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.15s ease;
+
+    .code-body:hover & {
+        opacity: 1;
+        pointer-events: auto;
+    }
+`
+
 const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
     (
         {
@@ -255,7 +271,7 @@ const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
                                 type="button"
                                 onClick={copyToClipboard}
                                 buttonType={ButtonType.SECONDARY}
-                                subType={ButtonSubType.ICON_ONLY}
+                                subType={ButtonSubType.INLINE}
                                 size={ButtonSize.SMALL}
                                 aria-label={
                                     isCopied
@@ -284,8 +300,38 @@ const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
                     }
                     backgroundColor={tokens.body.backgroundColor}
                     overflow="auto"
+                    position={
+                        !showHeader && showCopyButton ? 'relative' : undefined
+                    }
+                    className={
+                        !showHeader && showCopyButton ? 'code-body' : undefined
+                    }
                     style={{ maxHeight: maxHeight || 'none' }}
                 >
+                    {!showHeader && showCopyButton && (
+                        <CopyOverlay>
+                            <Button
+                                data-element="copy-button"
+                                type="button"
+                                onClick={copyToClipboard}
+                                buttonType={ButtonType.SECONDARY}
+                                subType={ButtonSubType.ICON_ONLY}
+                                size={ButtonSize.SMALL}
+                                aria-label={
+                                    isCopied
+                                        ? 'Code copied to clipboard'
+                                        : 'Copy code'
+                                }
+                                leadingIcon={
+                                    isCopied ? (
+                                        <Check size={16} aria-hidden="true" />
+                                    ) : (
+                                        <Copy size={16} aria-hidden="true" />
+                                    )
+                                }
+                            />
+                        </CopyOverlay>
+                    )}
                     {isDiffMode && diffLines?.length ? (
                         <CodeBlockDiffView
                             diffLines={diffLines}

package/lib/components/CodeBlock/codeBlock.token.ts

@@ -130,9 +130,9 @@ export const getCodeBlockTokens = (
                 borderBottom: `1px solid ${foundationToken.colors.gray[200]}`,
                 padding: {
                     x: foundationToken.unit[12],
-                    y: foundationToken.unit[10],
+                    y: foundationToken.unit[8],
                 },
-                gap: foundationToken.unit[8],
+                gap: foundationToken.unit[6],
                 icon: {
                     width: 16,
                 },
@@ -229,11 +229,11 @@ export const getCodeBlockTokens = (
                 borderBottom: `1px solid ${foundationToken.colors.gray[200]}`,
                 padding: {
                     x: foundationToken.unit[16],
-                    y: foundationToken.unit[10],
+                    y: foundationToken.unit[8],
                 },
-                gap: foundationToken.unit[12],
+                gap: foundationToken.unit[8],
                 icon: {
-                    width: 20,
+                    width: 16,
                 },
                 text: {
                     fontSize: foundationToken.font.size.body.md.fontSize,

package/lib/components/CodeEditor/CodeEditor.tsx

@@ -1,9 +1,8 @@
-import { forwardRef, useState } from 'react'
+import { forwardRef, useCallback, useEffect, useRef, useState } from 'react'
 import Block from '../Primitives/Block/Block'
 import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
 import type { CodeBlockTokenType } from '../CodeBlock/codeBlock.token'
 import { CodeEditorVariant, type CodeEditorProps } from './types'
-import { createCopyToClipboard } from '../CodeBlock/utils'
 import { shouldShowLineNumbers, getContainerStyles } from './utils'
 import { CodeEditorHeader } from './CodeEditorHeader'
 import { MonacoEditorWrapper } from './MonacoEditorWrapper'
@@ -37,6 +36,31 @@ const CodeEditor = forwardRef<HTMLDivElement, CodeEditorProps>(
     ) => {
         const tokens = useResponsiveTokens<CodeBlockTokenType>('CODE_BLOCK')
         const [isCopied, setIsCopied] = useState(false)
+        const copyFeedbackTimeoutRef = useRef<ReturnType<
+            typeof setTimeout
+        > | null>(null)
+
+        useEffect(() => {
+            return () => {
+                if (copyFeedbackTimeoutRef.current !== null) {
+                    clearTimeout(copyFeedbackTimeoutRef.current)
+                }
+            }
+        }, [])
+
+        const copyToClipboard = useCallback(() => {
+            navigator.clipboard.writeText(value)
+            setIsCopied(true)
+
+            if (copyFeedbackTimeoutRef.current !== null) {
+                clearTimeout(copyFeedbackTimeoutRef.current)
+            }
+
+            copyFeedbackTimeoutRef.current = setTimeout(() => {
+                setIsCopied(false)
+                copyFeedbackTimeoutRef.current = null
+            }, 2000)
+        }, [value])
 
         // Determine if line numbers should be shown
         const shouldShowLineNumbersValue = shouldShowLineNumbers(
@@ -44,8 +68,6 @@ const CodeEditor = forwardRef<HTMLDivElement, CodeEditorProps>(
             variant
         )
 
-        // Handlers
-        const copyToClipboard = createCopyToClipboard(value, setIsCopied)
         const containerStyles = getContainerStyles(minHeight, maxHeight)
 
         return (

package/lib/components/CodeEditor/MonacoEditorWrapper.tsx

@@ -342,6 +342,7 @@ export const MonacoEditorWrapper = ({
     const editorRef = useRef<Monaco.editor.IStandaloneCodeEditor | null>(null)
     const monacoRef = useRef<typeof import('monaco-editor') | null>(null)
     const shortcutDisposables = useRef<Monaco.IDisposable[]>([])
+    const focusTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
     const [isEditorReady, setIsEditorReady] = useState(false)
     const monacoLanguage = useMemo(() => mapLanguage(language), [language])
 
@@ -449,6 +450,14 @@ export const MonacoEditorWrapper = ({
         }
     }, [disposeShortcuts, isEditorReady, registerKeyboardShortcuts])
 
+    useEffect(() => {
+        return () => {
+            if (focusTimeoutRef.current !== null) {
+                clearTimeout(focusTimeoutRef.current)
+            }
+        }
+    }, [])
+
     const handleEditorDidMount: OnMount = (editor, monacoInstance) => {
         editorRef.current = editor
         monacoRef.current = monacoInstance
@@ -502,7 +511,10 @@ export const MonacoEditorWrapper = ({
         editor.onDidBlurEditorText(() => onBlur?.())
 
         if (autoFocus && !disabled && !readOnly) {
-            setTimeout(() => editor.focus(), EDITOR_FOCUS_DELAY_MS)
+            focusTimeoutRef.current = setTimeout(
+                () => editor.focus(),
+                EDITOR_FOCUS_DELAY_MS
+            )
         }
     }
 

package/lib/components/CodeEditorV2/CodeEditorV2.tsx

@@ -8,7 +8,7 @@ import {
     copyToClipboardWithTemporaryFeedback,
     isDiffEditorMode,
     shouldShowLineNumbers,
-    getContainerStyles,
+    getCodeEditorV2ContainerStyles,
     toCssValue,
 } from './utils'
 import { CodeEditorV2Header } from './CodeEditorV2Header'
@@ -91,7 +91,7 @@ const CodeEditorV2 = forwardRef<HTMLDivElement, CodeEditorV2Props>(
         const resolvedEditorHeight = toCssValue(height)
         const hasFixedEditorHeight = Boolean(resolvedEditorHeight)
         const editorMinHeight = hasFixedEditorHeight ? height! : minHeight
-        const containerStyles = getContainerStyles(
+        const containerStyles = getCodeEditorV2ContainerStyles(
             hasFixedEditorHeight ? undefined : minHeight,
             maxHeight
         )

package/lib/components/CodeEditorV2/codeEditorV2.dark.tokens.ts

@@ -1,6 +1,6 @@
 import { FoundationTokenType } from '../../tokens/theme.token'
 import { ResponsiveCodeEditorV2Tokens } from './codeEditorV2.tokens'
-import { DiffLineType, MonacoTheme } from './codeEditorV2.types'
+import { CodeEditorV2DiffLineType, MonacoTheme } from './codeEditorV2.types'
 
 export const darkCodeEditorV2Tokens = (
     foundationToken: FoundationTokenType
@@ -41,20 +41,24 @@ export const darkCodeEditorV2Tokens = (
                     width: '40px',
                     color: foundationToken.colors.gray[0],
                     backgroundColor: {
-                        [DiffLineType.UNCHANGED]:
+                        [CodeEditorV2DiffLineType.UNCHANGED]:
                             foundationToken.colors.gray[200],
-                        [DiffLineType.REMOVED]: foundationToken.colors.red[500],
-                        [DiffLineType.ADDED]: foundationToken.colors.green[500],
+                        [CodeEditorV2DiffLineType.REMOVED]:
+                            foundationToken.colors.red[500],
+                        [CodeEditorV2DiffLineType.ADDED]:
+                            foundationToken.colors.green[500],
                     },
                     borderLeft: {
-                        [DiffLineType.UNCHANGED]: 'none',
-                        [DiffLineType.REMOVED]: `2px solid ${foundationToken.colors.red[600]}`,
-                        [DiffLineType.ADDED]: `2px solid ${foundationToken.colors.green[600]}`,
+                        [CodeEditorV2DiffLineType.UNCHANGED]: 'none',
+                        [CodeEditorV2DiffLineType.REMOVED]: `2px solid ${foundationToken.colors.red[600]}`,
+                        [CodeEditorV2DiffLineType.ADDED]: `2px solid ${foundationToken.colors.green[600]}`,
                     },
                     borderColor: {
-                        [DiffLineType.UNCHANGED]: 'transparent',
-                        [DiffLineType.REMOVED]: foundationToken.colors.red[600],
-                        [DiffLineType.ADDED]: foundationToken.colors.green[600],
+                        [CodeEditorV2DiffLineType.UNCHANGED]: 'transparent',
+                        [CodeEditorV2DiffLineType.REMOVED]:
+                            foundationToken.colors.red[600],
+                        [CodeEditorV2DiffLineType.ADDED]:
+                            foundationToken.colors.green[600],
                     },
                 },
                 code: {
@@ -68,9 +72,11 @@ export const darkCodeEditorV2Tokens = (
                 },
                 highlightedLine: {
                     backgroundColor: {
-                        [DiffLineType.UNCHANGED]: 'transparent',
-                        [DiffLineType.REMOVED]: foundationToken.colors.red[700],
-                        [DiffLineType.ADDED]: foundationToken.colors.green[700],
+                        [CodeEditorV2DiffLineType.UNCHANGED]: 'transparent',
+                        [CodeEditorV2DiffLineType.REMOVED]:
+                            foundationToken.colors.red[700],
+                        [CodeEditorV2DiffLineType.ADDED]:
+                            foundationToken.colors.green[700],
                     },
                 },
                 syntax: {
@@ -120,20 +126,24 @@ export const darkCodeEditorV2Tokens = (
                     width: '44px',
                     color: foundationToken.colors.gray[0],
                     backgroundColor: {
-                        [DiffLineType.UNCHANGED]:
+                        [CodeEditorV2DiffLineType.UNCHANGED]:
                             foundationToken.colors.gray[200],
-                        [DiffLineType.REMOVED]: foundationToken.colors.red[500],
-                        [DiffLineType.ADDED]: foundationToken.colors.green[500],
+                        [CodeEditorV2DiffLineType.REMOVED]:
+                            foundationToken.colors.red[500],
+                        [CodeEditorV2DiffLineType.ADDED]:
+                            foundationToken.colors.green[500],
                     },
                     borderLeft: {
-                        [DiffLineType.UNCHANGED]: 'none',
-                        [DiffLineType.REMOVED]: `2px solid ${foundationToken.colors.red[600]}`,
-                        [DiffLineType.ADDED]: `2px solid ${foundationToken.colors.green[600]}`,
+                        [CodeEditorV2DiffLineType.UNCHANGED]: 'none',
+                        [CodeEditorV2DiffLineType.REMOVED]: `2px solid ${foundationToken.colors.red[600]}`,
+                        [CodeEditorV2DiffLineType.ADDED]: `2px solid ${foundationToken.colors.green[600]}`,
                     },
                     borderColor: {
-                        [DiffLineType.UNCHANGED]: 'transparent',
-                        [DiffLineType.REMOVED]: foundationToken.colors.red[600],
-                        [DiffLineType.ADDED]: foundationToken.colors.green[600],
+                        [CodeEditorV2DiffLineType.UNCHANGED]: 'transparent',
+                        [CodeEditorV2DiffLineType.REMOVED]:
+                            foundationToken.colors.red[600],
+                        [CodeEditorV2DiffLineType.ADDED]:
+                            foundationToken.colors.green[600],
                     },
                 },
                 code: {
@@ -147,9 +157,11 @@ export const darkCodeEditorV2Tokens = (
                 },
                 highlightedLine: {
                     backgroundColor: {
-                        [DiffLineType.UNCHANGED]: 'transparent',
-                        [DiffLineType.REMOVED]: foundationToken.colors.red[700],
-                        [DiffLineType.ADDED]: foundationToken.colors.green[700],
+                        [CodeEditorV2DiffLineType.UNCHANGED]: 'transparent',
+                        [CodeEditorV2DiffLineType.REMOVED]:
+                            foundationToken.colors.red[700],
+                        [CodeEditorV2DiffLineType.ADDED]:
+                            foundationToken.colors.green[700],
                     },
                 },
                 syntax: {

package/lib/components/CodeEditorV2/codeEditorV2.light.token.ts

@@ -1,6 +1,6 @@
 import { FoundationTokenType } from '../../tokens/theme.token'
 import { ResponsiveCodeEditorV2Tokens } from './codeEditorV2.tokens'
-import { DiffLineType, MonacoTheme } from './codeEditorV2.types'
+import { CodeEditorV2DiffLineType, MonacoTheme } from './codeEditorV2.types'
 
 export const lightCodeEditorV2Tokens = (
     foundationToken: FoundationTokenType
@@ -41,21 +41,25 @@ export const lightCodeEditorV2Tokens = (
                     width: '40px',
                     color: foundationToken.colors.gray[400],
                     backgroundColor: {
-                        [DiffLineType.UNCHANGED]:
+                        [CodeEditorV2DiffLineType.UNCHANGED]:
                             foundationToken.colors.gray[200],
-                        [DiffLineType.REMOVED]: foundationToken.colors.red[200],
-                        [DiffLineType.ADDED]: foundationToken.colors.green[200],
+                        [CodeEditorV2DiffLineType.REMOVED]:
+                            foundationToken.colors.red[200],
+                        [CodeEditorV2DiffLineType.ADDED]:
+                            foundationToken.colors.green[200],
                     },
                     borderLeft: {
-                        [DiffLineType.UNCHANGED]: 'none',
-                        [DiffLineType.REMOVED]: `2px solid ${foundationToken.colors.red[600]}`,
-                        [DiffLineType.ADDED]: `2px solid ${foundationToken.colors.green[600]}`,
+                        [CodeEditorV2DiffLineType.UNCHANGED]: 'none',
+                        [CodeEditorV2DiffLineType.REMOVED]: `2px solid ${foundationToken.colors.red[600]}`,
+                        [CodeEditorV2DiffLineType.ADDED]: `2px solid ${foundationToken.colors.green[600]}`,
                     },
                     borderColor: {
-                        [DiffLineType.UNCHANGED]:
+                        [CodeEditorV2DiffLineType.UNCHANGED]:
                             foundationToken.colors.gray[0],
-                        [DiffLineType.REMOVED]: foundationToken.colors.red[600],
-                        [DiffLineType.ADDED]: foundationToken.colors.green[600],
+                        [CodeEditorV2DiffLineType.REMOVED]:
+                            foundationToken.colors.red[600],
+                        [CodeEditorV2DiffLineType.ADDED]:
+                            foundationToken.colors.green[600],
                     },
                 },
                 code: {
@@ -69,9 +73,11 @@ export const lightCodeEditorV2Tokens = (
                 },
                 highlightedLine: {
                     backgroundColor: {
-                        [DiffLineType.UNCHANGED]: 'transparent',
-                        [DiffLineType.REMOVED]: foundationToken.colors.red[100],
-                        [DiffLineType.ADDED]: foundationToken.colors.green[100],
+                        [CodeEditorV2DiffLineType.UNCHANGED]: 'transparent',
+                        [CodeEditorV2DiffLineType.REMOVED]:
+                            foundationToken.colors.red[100],
+                        [CodeEditorV2DiffLineType.ADDED]:
+                            foundationToken.colors.green[100],
                     },
                 },
                 syntax: {
@@ -121,21 +127,25 @@ export const lightCodeEditorV2Tokens = (
                     width: '44px',
                     color: foundationToken.colors.gray[400],
                     backgroundColor: {
-                        [DiffLineType.UNCHANGED]:
+                        [CodeEditorV2DiffLineType.UNCHANGED]:
                             foundationToken.colors.gray[200],
-                        [DiffLineType.REMOVED]: foundationToken.colors.red[200],
-                        [DiffLineType.ADDED]: foundationToken.colors.green[200],
+                        [CodeEditorV2DiffLineType.REMOVED]:
+                            foundationToken.colors.red[200],
+                        [CodeEditorV2DiffLineType.ADDED]:
+                            foundationToken.colors.green[200],
                     },
                     borderLeft: {
-                        [DiffLineType.UNCHANGED]: 'none',
-                        [DiffLineType.REMOVED]: `2px solid ${foundationToken.colors.red[600]}`,
-                        [DiffLineType.ADDED]: `2px solid ${foundationToken.colors.green[600]}`,
+                        [CodeEditorV2DiffLineType.UNCHANGED]: 'none',
+                        [CodeEditorV2DiffLineType.REMOVED]: `2px solid ${foundationToken.colors.red[600]}`,
+                        [CodeEditorV2DiffLineType.ADDED]: `2px solid ${foundationToken.colors.green[600]}`,
                     },
                     borderColor: {
-                        [DiffLineType.UNCHANGED]:
+                        [CodeEditorV2DiffLineType.UNCHANGED]:
                             foundationToken.colors.gray[0],
-                        [DiffLineType.REMOVED]: foundationToken.colors.red[600],
-                        [DiffLineType.ADDED]: foundationToken.colors.green[600],
+                        [CodeEditorV2DiffLineType.REMOVED]:
+                            foundationToken.colors.red[600],
+                        [CodeEditorV2DiffLineType.ADDED]:
+                            foundationToken.colors.green[600],
                     },
                 },
                 code: {
@@ -149,9 +159,11 @@ export const lightCodeEditorV2Tokens = (
                 },
                 highlightedLine: {
                     backgroundColor: {
-                        [DiffLineType.UNCHANGED]: 'transparent',
-                        [DiffLineType.REMOVED]: foundationToken.colors.red[100],
-                        [DiffLineType.ADDED]: foundationToken.colors.green[100],
+                        [CodeEditorV2DiffLineType.UNCHANGED]: 'transparent',
+                        [CodeEditorV2DiffLineType.REMOVED]:
+                            foundationToken.colors.red[100],
+                        [CodeEditorV2DiffLineType.ADDED]:
+                            foundationToken.colors.green[100],
                     },
                 },
                 syntax: {

package/lib/components/CodeEditorV2/codeEditorV2.tokens.ts

@@ -1,10 +1,10 @@
 import type { CSSObject } from 'styled-components'
-import { DiffLineType } from './codeEditorV2.types'
 import { BreakpointType } from '../../breakpoints/breakPoints'
 import { FoundationTokenType } from '../../tokens/theme.token'
 import { darkCodeEditorV2Tokens } from './codeEditorV2.dark.tokens'
 import { lightCodeEditorV2Tokens } from './codeEditorV2.light.token'
 import { Theme } from '../../context/theme.enum'
+import { CodeEditorV2DiffLineType } from './codeEditorV2.types'
 
 export type CodeEditorV2Tokens = {
     backgroundColor: CSSObject['backgroundColor']
@@ -44,13 +44,13 @@ export type CodeEditorV2Tokens = {
             width: CSSObject['width']
             color: CSSObject['color']
             backgroundColor: {
-                [key in DiffLineType]: CSSObject['backgroundColor']
+                [key in CodeEditorV2DiffLineType]: CSSObject['backgroundColor']
             }
             borderLeft: {
-                [key in DiffLineType]: CSSObject['borderLeft']
+                [key in CodeEditorV2DiffLineType]: CSSObject['borderLeft']
             }
             borderColor: {
-                [key in DiffLineType]: CSSObject['color']
+                [key in CodeEditorV2DiffLineType]: CSSObject['color']
             }
         }
         // Code tokens
@@ -66,7 +66,7 @@ export type CodeEditorV2Tokens = {
         // Highlighted line tokens (for diff mode and code highlighting)
         highlightedLine: {
             backgroundColor: {
-                [key in DiffLineType]: CSSObject['backgroundColor']
+                [key in CodeEditorV2DiffLineType]: CSSObject['backgroundColor']
             }
         }
         // Syntax highlighting tokens

package/lib/components/CodeEditorV2/codeEditorV2.types.ts

@@ -11,18 +11,18 @@ export enum MonacoTheme {
     LIGHT = 'light',
     DARK = 'dark',
 }
-export enum DiffLineType {
+export enum CodeEditorV2DiffLineType {
     ADDED = 'added',
     REMOVED = 'removed',
     UNCHANGED = 'unchanged',
 }
 
-export type DiffLine = {
+export type CodeEditorV2DiffLine = {
     content: string
-    type: DiffLineType
+    type: CodeEditorV2DiffLineType
 }
 
-export type SupportedLanguage =
+export type CodeEditorV2SupportedLanguage =
     | 'javascript'
     | 'typescript'
     | 'jsx'
@@ -57,7 +57,7 @@ export type CodeEditorV2Props = {
         rightSlot?: ReactNode
         showCopyButton?: boolean
     }
-    language?: SupportedLanguage
+    language?: CodeEditorV2SupportedLanguage
     placeholder?: string
     readOnly?: boolean
     disabled?: boolean

package/lib/components/CodeEditorV2/index.ts

@@ -1,3 +1,5 @@
 export { default as CodeEditorV2 } from './CodeEditorV2'
+export { CodeEditorV2Header } from './CodeEditorV2Header'
 export * from './codeEditorV2.types'
 export * from './codeEditorV2.tokens'
+export * from './utils'

package/lib/components/CodeEditorV2/utils.ts

@@ -98,7 +98,7 @@ export const isDiffEditorMode = (
 /**
  * Calculates container styles with min/max height
  */
-export const getContainerStyles = (
+export const getCodeEditorV2ContainerStyles = (
     minHeight?: string | number,
     maxHeight?: string | number
 ): React.CSSProperties => {