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

package/dist/node.js

@@ -1,4 +1,4 @@
-import { F as a, T as o, y as t, x as T, w as n, v as g, z as k, u as V, t as r, s as i, r as l, q as c, g as b, p as d, o as u, n as S, m as p, a as h, l as m, j as v, i as x, k as A, h as C, f as M, e as B, d as E, c as N, b as P } from "./node-CRWdZOVN.js";
+import { F as a, T as o, y as t, x as T, w as n, v as g, z as k, u as V, t as r, s as i, r as l, q as c, g as b, p as d, o as u, n as S, m as p, a as h, l as m, j as v, i as x, k as A, h as C, f as M, e as B, d as E, c as N, b as P } from "./node-C2uf3sNA.js";
 export {
   a as FOUNDATION_THEME,
   o as Theme,

package/dist/tokens.js

@@ -1,4 +1,4 @@
-import { F as u, T as d, g as k, a as E, b as V, c as g, d as v, e as S, f as p, h, i as R, j as A, k as y, l as C, m as N, n as I, o as P, p as _, q as m, r as B, s as L, t as M, u as w, v as j, w as U, x as D, y as G, z as H } from "./node-CRWdZOVN.js";
+import { F as u, T as d, g as k, a as E, b as V, c as g, d as v, e as S, f as p, h, i as R, j as A, k as y, l as C, m as N, n as I, o as P, p as _, q as m, r as B, s as L, t as M, u as w, v as j, w as U, x as D, y as G, z as H } from "./node-C2uf3sNA.js";
 import { BRANCH_COLLECTION as ie, BRANCH_ID_PATTERN as ae, PRESETS as ce, PRESET_BLEND_DEFAULT as fe, PRESET_GREEN as le, PRESET_JUSPAY as Te, PRESET_ORANGE as ue, PRESET_PURPLE as de, RADIUS_PRESETS as Oe, SNAPSHOT_SUBCOLLECTION as ke, STORAGE_KEYS as Ee, TEAM_ROLE_PERMISSIONS as Ve, VERSION_PATTERN as ge, VERSION_SUBCOLLECTION as ve, analyzeContrast as Se, canUserPerformAction as pe, diffBrandConfigs as he, extractOverridePaths as Re, generateBranchId as Ae, generateColorScale as ye, getContrastRatio as Ce, getContrastRatioHex as Ne, getDefaultOnboardingState as Ie, getDefaultPreferences as Pe, getPreset as _e, hexToRgb as me, incrementVersion as Be, isValidHexColor as Le, listPresets as Me, meetsWCAG as we, parseBranchId as je, relativeLuminance as Ue, resolveWithInheritance as De, snapshotsPath as Ge, suggestForeground as He, validateAgainstLocks as xe, validateBranchId as Ke, validateBrandConfig as Fe, validatePaletteContrast as Je, validateVersion as $e, versionsPath as Ye } from "./tokens-server.js";
 function O(e) {
   const o = typeof structuredClone == "function" ? structuredClone(u) : JSON.parse(JSON.stringify(u));

package/lib/components/AccordionV2/index.ts

@@ -1,4 +1,7 @@
 export { default as AccordionV2 } from './AccordionV2'
 export { AccordionV2Item } from './AccordionV2Item'
+export { AccordionV2Chevron } from './AccordionV2Chevron'
+export { AccordionV2TriggerContent } from './AccordionV2TriggerContent'
+export * from './accordionV2.animations'
 export * from './accordionV2.tokens'
 export * from './accordionV2.types'

package/lib/components/AvatarV2/AvatarV2.tsx

@@ -21,7 +21,7 @@ import {
     getAriaLiveValue,
     getStatusPositionStyles,
     renderFallbackContent,
-    createKeyboardHandler,
+    createAvatarKeyboardHandler,
     isInteractive,
 } from './avatarV2.utils'
 
@@ -209,7 +209,7 @@ const AvatarV2 = forwardRef<HTMLDivElement, AvatarV2Props>(
             onImageLoad?.()
         }
 
-        const keyboardHandler = createKeyboardHandler(rest.onClick)
+        const keyboardHandler = createAvatarKeyboardHandler(rest.onClick)
         const filteredProps = filterBlockedProps(rest)
 
         const renderAvatarContent = () => {

package/lib/components/AvatarV2/avatarV2.utils.ts

@@ -174,7 +174,7 @@ export function getStatusPositionStyles(
             return { top, right }
     }
 }
-export function createKeyboardHandler(
+export function createAvatarKeyboardHandler(
     onClick: ((event: React.MouseEvent<HTMLDivElement>) => void) | undefined
 ) {
     if (!onClick) {

package/lib/components/AvatarV2/index.ts

@@ -1,15 +1,4 @@
 export { default as AvatarV2 } from './AvatarV2'
-export type {
-    AvatarV2Props,
-    AvatarV2SkeletonConfig,
-    AvatarV2StatusConfig,
-} from './avatarV2.types'
-export {
-    AvatarV2Size,
-    AvatarV2Shape,
-    AvatarV2Status,
-    AvatarV2StatusPosition,
-    AvatarV2Variant,
-} from './avatarV2.types'
+export * from './avatarV2.types'
 export * from './avatarV2.tokens'
 export * from './avatarV2.utils'

package/lib/components/BreadcrumbV2/index.ts

@@ -1,3 +1,13 @@
 export { default as BreadcrumbV2 } from './BreadcrumbV2'
+export { default as BreadcrumbV2Icon } from './BreadcrumbV2Icon'
+export { default as BreadcrumbV2Item } from './BreadcrumbV2Item'
+export { default as BreadcrumbV2List } from './BreadcrumbV2List'
+export type { BreadcrumbV2ListProps } from './BreadcrumbV2List'
+export { default as BreadcrumbV2OverflowMenu } from './BreadcrumbV2OverflowMenu'
+export type { BreadcrumbV2OverflowMenuProps } from './BreadcrumbV2OverflowMenu'
+export { default as BreadcrumbV2Page } from './BreadcrumbV2Page'
+export type { BreadcrumbV2PageProps } from './BreadcrumbV2Page'
+export { default as BreadcrumbV2Separator } from './BreadcrumbV2Separator'
 export * from './breadcrumbV2.tokens'
 export * from './breadcrumbV2.types'
+export * from './utils'

package/lib/components/ButtonV2/ButtonGroupV2/index.ts

@@ -4,3 +4,4 @@ export type {
     ButtonGroupPosition,
 } from './buttonGroupV2.types'
 export * from './buttonGroupV2.types'
+export * from './utils'

package/lib/components/ButtonV2/ButtonV2.tsx

@@ -15,7 +15,7 @@ import Skeleton from '../Skeleton/Skeleton'
 import PrimitiveButton from '../Primitives/PrimitiveButton/PrimitiveButton'
 import { VisuallyHidden } from './VisuallyHidden'
 import {
-    getBorderRadius,
+    getButtonV2BorderRadius,
     getButtonHeight,
     getButtonStatus,
     getButtonTabIndex,
@@ -208,7 +208,7 @@ const ButtonV2 = forwardRef<HTMLButtonElement, ButtonV2Props>(
             onClick?.(event)
         }
 
-        const borderRadius = getBorderRadius(
+        const borderRadius = getButtonV2BorderRadius(
             size,
             buttonType,
             subType,

package/lib/components/ButtonV2/LinkButton.tsx

@@ -12,7 +12,7 @@ import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
 import Skeleton from '../Skeleton/Skeleton'
 import { renderButtonContent } from './ButtonV2'
 import {
-    getBorderRadius,
+    getButtonV2BorderRadius,
     getButtonHeight,
     getButtonStatus,
     getSkeletonBorderRadius,
@@ -60,7 +60,7 @@ const LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(
         )
         const buttonStatus = getButtonStatus(isLoading, isDisabled)
 
-        const borderRadius = getBorderRadius(
+        const borderRadius = getButtonV2BorderRadius(
             size,
             buttonType,
             subType,

package/lib/components/ButtonV2/buttonV2.types.ts

@@ -34,12 +34,6 @@ export enum PaddingDirection {
     LEFT = 'left',
 }
 
-// Legacy exports for backward compatibility
-export const ButtonType = ButtonV2Type
-export const ButtonSize = ButtonV2Size
-export const ButtonSubType = ButtonV2SubType
-export const ButtonState = ButtonV2State
-
 export type ButtonSlot = {
     slot: React.ReactNode
     maxHeight?: string | number

package/lib/components/ButtonV2/index.ts

@@ -1,4 +1,5 @@
 export { default as ButtonV2 } from './ButtonV2'
+export { renderButtonContent } from './ButtonV2'
 export { default as IconButton } from './IconButton'
 export { default as LinkButton } from './LinkButton'
 export { ButtonGroupV2 } from './ButtonGroupV2'
@@ -6,3 +7,5 @@ export type { ButtonV2Props, LinkButtonProps } from './buttonV2.types'
 export type { IconButtonProps } from './IconButton'
 export type { ButtonGroupV2Props, ButtonGroupPosition } from './ButtonGroupV2'
 export * from './buttonV2.types'
+export * from './buttonV2.tokens'
+export * from './utils'

package/lib/components/ButtonV2/utils.ts

@@ -10,7 +10,7 @@ import {
 import type { ButtonV2TokensType } from './buttonV2.tokens'
 import { FOUNDATION_THEME } from '../../tokens'
 
-export function getBorderRadius(
+export function getButtonV2BorderRadius(
     size: ButtonV2Size,
     buttonType: ButtonV2Type,
     subType: ButtonV2SubType,
@@ -101,7 +101,7 @@ export function getSkeletonBorderRadius(
     buttonGroupPosition: 'center' | 'left' | 'right' | undefined,
     tokens: ButtonV2TokensType
 ): string {
-    return getBorderRadius(
+    return getButtonV2BorderRadius(
         size,
         buttonType,
         subType,

package/lib/components/Charts/BlendChart.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import HighchartsReact from 'highcharts-react-official'
+import { HighchartsReact } from 'highcharts-react-official'
 import Highcharts from 'highcharts'
 import 'highcharts/modules/xrange'
 import { forwardRef, useRef } from 'react'

package/lib/components/ChartsV2/ChartV2.tsx

@@ -5,8 +5,9 @@ import {
     ChartV2SeriesOptionsType,
 } from './chartV2.types'
 import Highcharts from 'highcharts'
-import HighchartsReact, {
-    HighchartsReactProps,
+import {
+    HighchartsReact,
+    type HighchartsReactProps,
 } from 'highcharts-react-official'
 import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
 import { ChartV2TokensType } from './chartV2.tokens'

package/lib/components/ChartsV2/index.ts

@@ -7,3 +7,8 @@ export { default as ChartV2Skeleton } from './ChartV2Skeleton'
 export { default as ChartV2NoData } from './ChartV2NoData'
 export * from './chartV2.tokens'
 export * from './chartV2.types'
+export { useChartLegend } from './useChartLegend'
+export { useChartLegendHover } from './useChartLegendHover'
+export { default as useChartRefs } from './useChartRefs'
+export { getLegendItems, applyHoverState } from './utils'
+export { mergeChartOptions } from './chartV2Options'

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 => {