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

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,5 +1,5 @@
-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 { 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";
+import { F as u, T as d, g as k, a as E, b as V, c as g, d as v, e as p, f as S, h, i as R, j as A, k as y, l as C, m as N, n as I, o as P, p as m, q as _, r as B, s as L, t as w, u as M, 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 pe, canUserPerformAction as Se, 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 me, hexToRgb as _e, incrementVersion as Be, isValidHexColor as Le, listPresets as we, meetsWCAG as Me, 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));
   return x(o, e), K(o, e), F(o, e), J(o, e), o;
@@ -30,8 +30,9 @@ function F(e, o) {
 function J(e, o) {
   if (o.font) {
     if (o.font.family) {
-      const t = e.font;
-      "family" in t && (t.family = o.font.family);
+      const t = e.font.family, n = o.font.family.trim(), s = n.toLowerCase() === "system ui" ? "system-ui, sans-serif" : n;
+      for (const r of Object.keys(t))
+        r !== "mono" && (t[r] = s);
     }
     if (o.font.weight) {
       const t = e.font.weight;
@@ -46,12 +47,12 @@ const l = {
   ALERTV2: D,
   AVATARV2: U,
   BREADCRUMBV2: j,
-  CHARTSV2: w,
-  CHECKBOXV2: M,
+  CHARTSV2: M,
+  CHECKBOXV2: w,
   CODEEDITORV2: L,
   KEYVALUEPAIRV2: B,
-  MENU_V2: m,
-  MULTI_SELECT_V2: _,
+  MENU_V2: _,
+  MULTI_SELECT_V2: m,
   POPOVERV2: P,
   PROGRESS_BARV2: I,
   RADIOV2: N,
@@ -60,8 +61,8 @@ const l = {
   SNACKBARV2: A,
   STATCARDV2: R,
   TABSV2: h,
-  TAGV2: p,
-  TEXT_INPUTV2: S,
+  TAGV2: S,
+  TEXT_INPUTV2: p,
   TIMELINE: v,
   TOOLTIPV2: g,
   TOPBARV2: V,
@@ -198,9 +199,9 @@ export {
   te as V2_COMPONENT_KEYS,
   ge as VERSION_PATTERN,
   ve as VERSION_SUBCOLLECTION,
-  Se as analyzeContrast,
+  pe as analyzeContrast,
   O as buildBrandFoundation,
-  pe as canUserPerformAction,
+  Se as canUserPerformAction,
   z as clearTokenCache,
   he as diffBrandConfigs,
   Re as extractOverridePaths,
@@ -210,12 +211,12 @@ export {
   Ne as getContrastRatioHex,
   Ie as getDefaultOnboardingState,
   Pe as getDefaultPreferences,
-  _e as getPreset,
-  me as hexToRgb,
+  me as getPreset,
+  _e as hexToRgb,
   Be as incrementVersion,
   Le as isValidHexColor,
-  Me as listPresets,
-  we as meetsWCAG,
+  we as listPresets,
+  Me as meetsWCAG,
   je as parseBranchId,
   oe as registerResolver,
   Ue as relativeLuminance,

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/Avatar/Avatar.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useState } from 'react'
+import { forwardRef, useEffect, useState } from 'react'
 import {
     type AvatarProps,
     AvatarSize,
@@ -33,6 +33,11 @@ const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
         ref
     ) => {
         const [imageError, setImageError] = useState(false)
+
+        useEffect(() => {
+            setImageError(false)
+        }, [src])
+
         const hasImage = src && !imageError
         const shouldShowSkeleton = skeleton?.show
         const variant = hasImage ? 'withImage' : 'withoutImage'

package/lib/components/AvatarGroup/AvatarGroup.tsx

@@ -17,7 +17,7 @@ import { AvatarTokensType } from '../Avatar/avatar.tokens'
 const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(
     (
         {
-            avatars,
+            avatars = [],
             maxCount = 5,
             size = AvatarSize.MD,
             shape = AvatarShape.CIRCULAR,

package/lib/components/AvatarV2/AvatarV2.tsx

@@ -1,4 +1,9 @@
-import React, { forwardRef, useState, type ReactElement } from 'react'
+import React, {
+    forwardRef,
+    useEffect,
+    useState,
+    type ReactElement,
+} from 'react'
 import {
     AvatarV2Props,
     AvatarV2Size,
@@ -21,7 +26,7 @@ import {
     getAriaLiveValue,
     getStatusPositionStyles,
     renderFallbackContent,
-    createKeyboardHandler,
+    createAvatarKeyboardHandler,
     isInteractive,
 } from './avatarV2.utils'
 
@@ -176,6 +181,10 @@ const AvatarV2 = forwardRef<HTMLDivElement, AvatarV2Props>(
     ) => {
         const [imageError, setImageError] = useState(false)
 
+        useEffect(() => {
+            setImageError(false)
+        }, [src])
+
         const tokens = useResponsiveTokens<AvatarV2TokensType>('AVATARV2')
 
         const hasImage = src && !imageError
@@ -209,7 +218,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/Breadcrumb/Breadcrumb.tsx

@@ -5,7 +5,12 @@ import PrimitiveButton from '../Primitives/PrimitiveButton/PrimitiveButton'
 import PrimitiveText from '../Primitives/PrimitiveText/PrimitiveText'
 import { FOUNDATION_THEME } from '../../tokens'
 import type { BreadcrumbTokenType } from './breadcrumb.tokens'
-import type { BreadcrumbItemType, BreadcrumbSkeletonProps } from './types'
+import type {
+    BreadcrumbItemType,
+    BreadcrumbProps,
+    BreadcrumbSkeletonProps,
+} from './types'
+import { normalizeBreadcrumbItems } from './types'
 import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
 import { SkeletonVariant } from '../Skeleton'
 import BreadcrumbSkeleton from './BreadcrumbSkeleton'
@@ -111,13 +116,9 @@ const BreadcrumbItem = ({
     )
 }
 
-const Breadcrumb = ({
-    items,
-    skeleton,
-}: {
-    items: BreadcrumbItemType[]
-    skeleton?: BreadcrumbSkeletonProps
-}) => {
+const Breadcrumb = ({ items: itemsProp, skeleton }: BreadcrumbProps) => {
+    const items = normalizeBreadcrumbItems(itemsProp)
+
     const breadcrumbTokens =
         useResponsiveTokens<BreadcrumbTokenType>('BREADCRUMB')
     if (items.length === 0) return null

package/lib/components/Breadcrumb/types.ts

@@ -5,6 +5,18 @@ export type BreadcrumbSkeletonProps = {
     variant: SkeletonVariant
 }
 
+/** Replace null, undefined, or non-array `items` with `[]`. */
+export function normalizeBreadcrumbItems(
+    items: BreadcrumbItemType[] | null | undefined
+): BreadcrumbItemType[] {
+    return Array.isArray(items) ? items : []
+}
+
+export type BreadcrumbProps = {
+    items: BreadcrumbItemType[] | null
+    skeleton?: BreadcrumbSkeletonProps
+}
+
 export type BreadcrumbItemType = {
     leftSlot?: React.ReactNode
     rightSlot?: React.ReactNode

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/Button/ButtonBase.tsx

@@ -11,7 +11,7 @@ import type { ButtonTokensType } from './button.tokens'
 import { LoaderCircle } from 'lucide-react'
 import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
 import { FOUNDATION_THEME } from '../../tokens'
-const StyledButtonText = styled(Text)`
+const StyledButtonText = styled.span`
     display: flex;
     align-items: center;
     justify-content: center;

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/Card/CardComponents.tsx

@@ -44,6 +44,37 @@ type CustomCardComponentProps = {
     baseId?: string
 }
 
+const isPlainTextContent = (content: React.ReactNode) =>
+    typeof content === 'string' || typeof content === 'number'
+
+const CardBodyContent = ({
+    content,
+    contentId,
+    cardToken,
+    describedBy,
+}: {
+    content: React.ReactNode
+    contentId: string
+    cardToken: CardTokenType
+    describedBy?: string
+}) => {
+    const sharedProps = {
+        id: contentId,
+        style: getBodyContentStyles(cardToken),
+        'aria-describedby': describedBy,
+    }
+
+    if (isPlainTextContent(content)) {
+        return (
+            <Text as="p" {...sharedProps}>
+                {content}
+            </Text>
+        )
+    }
+
+    return <Block {...sharedProps}>{content}</Block>
+}
+
 export const DefaultCard: React.FC<CardComponentProps> = ({
     props,
     cardToken,
@@ -80,6 +111,9 @@ export const DefaultCard: React.FC<CardComponentProps> = ({
     const subHeaderId = `${baseId}-subheader`
     const bodyTitleId = `${baseId}-body-title`
     const contentId = `${baseId}-content`
+    const contentDataId = isPlainTextContent(content)
+        ? String(content)
+        : undefined
 
     return (
         <>
@@ -228,22 +262,20 @@ export const DefaultCard: React.FC<CardComponentProps> = ({
                             ),
                         }}
                         data-element="card-body-content"
-                        data-id={content}
+                        data-id={contentDataId}
                     >
-                        <Text
-                            as="p"
-                            id={contentId}
-                            style={getBodyContentStyles(cardToken)}
-                            aria-describedby={
+                        <CardBodyContent
+                            content={content}
+                            contentId={contentId}
+                            cardToken={cardToken}
+                            describedBy={
                                 bodyTitle
                                     ? bodyTitleId
                                     : headerTitle
                                       ? headerTitleId
                                       : undefined
                             }
-                        >
-                            {content}
-                        </Text>
+                        />
                     </Block>
                 )}
 
@@ -461,20 +493,18 @@ const CardContent: React.FC<{
                 }
             >
                 {hasContent && (
-                    <Text
-                        as="p"
-                        id={contentId}
-                        style={getBodyContentStyles(cardToken)}
-                        aria-describedby={
+                    <CardBodyContent
+                        content={content}
+                        contentId={contentId}
+                        cardToken={cardToken}
+                        describedBy={
                             bodyTitle
                                 ? bodyTitleId
                                 : headerTitle
                                   ? headerTitleId
                                   : undefined
                         }
-                    >
-                        {content}
-                    </Text>
+                    />
                 )}
 
                 {hasActionButton && (
@@ -612,7 +642,12 @@ export const CustomCard: React.FC<CustomCardComponentProps> = ({
 
     return (
         <Block
+            display="flex"
+            flexDirection="column"
+            flexGrow={1}
             style={{
+                minHeight: 0,
+                width: '100%',
                 ...(maxHeight && {
                     overflowY: 'auto',
                     overflowX: 'hidden',

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/Charts/ChartUtils.tsx

@@ -6,6 +6,13 @@ import {
 } from './types'
 import { parseTimestamp, dateFormat } from './DateTimeFormatter'
 
+/** Replace null, undefined, or non-array `data` with `[]` (empty / no-data state). */
+export function normalizeChartData(
+    data: NewNestedDataPoint[] | null | undefined
+): NewNestedDataPoint[] {
+    return Array.isArray(data) ? data : []
+}
+
 export function transformNestedData(
     data: NewNestedDataPoint[],
     selectedKeys: string[] = []

package/lib/components/Charts/Charts.tsx

@@ -5,7 +5,7 @@ import ChartHeader from './ChartHeader'
 import ChartLegends from './ChartLegend'
 import { useRef, useState, useEffect, useCallback, useId, useMemo } from 'react'
 import { renderChart } from './renderChart'
-import { transformNestedData } from './ChartUtils'
+import { normalizeChartData, transformNestedData } from './ChartUtils'
 import Block from '../../components/Primitives/Block/Block'
 import { ChartTokensType } from './chart.tokens'
 import { FOUNDATION_THEME } from '../../tokens'
@@ -20,7 +20,7 @@ import ChartsSkeleton from './ChartsSkeleton'
 
 const Charts: React.FC<ChartsProps> = ({
     chartType = ChartType.LINE,
-    data,
+    data: dataProp,
     colors,
     slot1,
     slot2,
@@ -46,6 +46,8 @@ const Charts: React.FC<ChartsProps> = ({
     lineSeriesKeys,
     ...props
 }) => {
+    const data = normalizeChartData(dataProp)
+
     const { breakPointLabel } = useBreakpoints(BREAKPOINTS)
     const isSmallScreen = breakPointLabel === 'sm'
     const chartTokens = useResponsiveTokens<ChartTokensType>('CHARTS')

package/lib/components/Charts/CoreChart.tsx

@@ -3,11 +3,11 @@ import { ResponsiveContainer } from 'recharts'
 import { ChartType, CoreChartProps } from './types'
 import { DEFAULT_COLORS } from './utils'
 import { renderChart } from './renderChart'
-import { transformNestedData } from './ChartUtils'
+import { normalizeChartData, transformNestedData } from './ChartUtils'
 
 export const CoreChart: React.FC<CoreChartProps> = ({
     chartType = ChartType.LINE,
-    data,
+    data: dataProp,
     colors = DEFAULT_COLORS,
     barsize,
     xAxis,
@@ -22,6 +22,8 @@ export const CoreChart: React.FC<CoreChartProps> = ({
     enableHover = false,
     lineSeriesKeys,
 }) => {
+    const data = normalizeChartData(dataProp)
+
     const [internalHoveredKey, setInternalHoveredKey] = useState<string | null>(
         null
     )

package/lib/components/Charts/types.tsx

@@ -151,7 +151,7 @@ export type RenderChartProps = {
 
 export type CoreChartProps = {
     chartType?: ChartType
-    data: NewNestedDataPoint[]
+    data?: NewNestedDataPoint[] | null
     colors?: { key: string; color: string }[]
     barsize?: number
     xAxis?: XAxisConfig
@@ -175,7 +175,7 @@ export type ChartsSkeletonProps = {
 
 export type ChartsProps = {
     chartType?: ChartType
-    data: NewNestedDataPoint[]
+    data?: NewNestedDataPoint[] | null
     colors?: { key: string; color: string }[]
     slot1?: ReactNode
     slot2?: ReactNode

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'
@@ -31,7 +32,7 @@ const ChartV2 = forwardRef<ChartV2ReactRefObject, ChartV2Props>(
         ref
     ) => {
         const tokens = useResponsiveTokens<ChartV2TokensType>('CHARTSV2')
-        const { options, ...restProps } = props
+        const { options = {}, ...restProps } = props
 
         const hasSeriesData =
             (options.series as ChartV2SeriesOptionsType[] | undefined)?.some(

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'