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

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

@@ -1,91 +1,13 @@
-import type { CSSObject } from 'styled-components'
-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'
+import type { ResponsiveCodeEditorV2Tokens } from './codeEditorV2.tokens.types'
 
-export type CodeEditorV2Tokens = {
-    backgroundColor: CSSObject['backgroundColor']
-    border: CSSObject['border']
-    borderRadius: CSSObject['borderRadius']
-    boxShadow: CSSObject['boxShadow']
-    theme: 'light' | 'dark'
-    // Header tokens
-    header: {
-        backgroundColor: CSSObject['backgroundColor']
-        borderBottom: CSSObject['borderBottom']
-        paddingTop: CSSObject['paddingTop']
-        paddingBottom: CSSObject['paddingBottom']
-        paddingLeft: CSSObject['paddingLeft']
-        paddingRight: CSSObject['paddingRight']
-        gap: CSSObject['gap']
-        icon: {
-            width: CSSObject['width']
-        }
-        text: {
-            fontSize: CSSObject['fontSize']
-            fontWeight: CSSObject['fontWeight']
-            lineHeight: CSSObject['lineHeight']
-            color: CSSObject['color']
-        }
-    }
-    // Content area tokens
-    body: {
-        paddingTop: CSSObject['paddingTop']
-        paddingBottom: CSSObject['paddingBottom']
-        paddingLeft: CSSObject['paddingLeft']
-        paddingRight: CSSObject['paddingRight']
-        backgroundColor: CSSObject['backgroundColor']
-
-        // Gutter (line numbers) tokens
-        gutter: {
-            width: CSSObject['width']
-            color: CSSObject['color']
-            backgroundColor: {
-                [key in CodeEditorV2DiffLineType]: CSSObject['backgroundColor']
-            }
-            borderLeft: {
-                [key in CodeEditorV2DiffLineType]: CSSObject['borderLeft']
-            }
-            borderColor: {
-                [key in CodeEditorV2DiffLineType]: CSSObject['color']
-            }
-        }
-        // Code tokens
-        code: {
-            fontFamily: CSSObject['fontFamily']
-            fontSize: CSSObject['fontSize']
-            lineHeight: CSSObject['lineHeight']
-            paddingTop: CSSObject['paddingTop']
-            paddingBottom: CSSObject['paddingBottom']
-            paddingLeft: CSSObject['paddingLeft']
-            paddingRight: CSSObject['paddingRight']
-        }
-        // Highlighted line tokens (for diff mode and code highlighting)
-        highlightedLine: {
-            backgroundColor: {
-                [key in CodeEditorV2DiffLineType]: CSSObject['backgroundColor']
-            }
-        }
-        // Syntax highlighting tokens
-        syntax: {
-            keyword: { color: CSSObject['color'] }
-            function: { color: CSSObject['color'] }
-            string: { color: CSSObject['color'] }
-            number: { color: CSSObject['color'] }
-            operator: { color: CSSObject['color'] }
-            variable: { color: CSSObject['color'] }
-            comment: { color: CSSObject['color'] }
-            text: { color: CSSObject['color'] }
-        }
-    }
-}
-
-export type ResponsiveCodeEditorV2Tokens = {
-    [key in keyof BreakpointType]: CodeEditorV2Tokens
-}
+export type {
+    CodeEditorV2Tokens,
+    ResponsiveCodeEditorV2Tokens,
+} from './codeEditorV2.tokens.types'
 
 export const getCodeEditorV2Tokens = (
     foundationToken: FoundationTokenType,

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

@@ -0,0 +1,89 @@
+import type { CSSObject } from 'styled-components'
+import { BreakpointType } from '../../breakpoints/breakPoints'
+
+export enum CodeEditorV2DiffLineType {
+    ADDED = 'added',
+    REMOVED = 'removed',
+    UNCHANGED = 'unchanged',
+}
+
+export type CodeEditorV2Tokens = {
+    backgroundColor: CSSObject['backgroundColor']
+    border: CSSObject['border']
+    borderRadius: CSSObject['borderRadius']
+    boxShadow: CSSObject['boxShadow']
+    theme: 'light' | 'dark'
+    // Header tokens
+    header: {
+        backgroundColor: CSSObject['backgroundColor']
+        borderBottom: CSSObject['borderBottom']
+        paddingTop: CSSObject['paddingTop']
+        paddingBottom: CSSObject['paddingBottom']
+        paddingLeft: CSSObject['paddingLeft']
+        paddingRight: CSSObject['paddingRight']
+        gap: CSSObject['gap']
+        icon: {
+            width: CSSObject['width']
+        }
+        text: {
+            fontSize: CSSObject['fontSize']
+            fontWeight: CSSObject['fontWeight']
+            lineHeight: CSSObject['lineHeight']
+            color: CSSObject['color']
+        }
+    }
+    // Content area tokens
+    body: {
+        paddingTop: CSSObject['paddingTop']
+        paddingBottom: CSSObject['paddingBottom']
+        paddingLeft: CSSObject['paddingLeft']
+        paddingRight: CSSObject['paddingRight']
+        backgroundColor: CSSObject['backgroundColor']
+
+        // Gutter (line numbers) tokens
+        gutter: {
+            width: CSSObject['width']
+            color: CSSObject['color']
+            backgroundColor: {
+                [key in CodeEditorV2DiffLineType]: CSSObject['backgroundColor']
+            }
+            borderLeft: {
+                [key in CodeEditorV2DiffLineType]: CSSObject['borderLeft']
+            }
+            borderColor: {
+                [key in CodeEditorV2DiffLineType]: CSSObject['color']
+            }
+        }
+        // Code tokens
+        code: {
+            fontFamily: CSSObject['fontFamily']
+            fontSize: CSSObject['fontSize']
+            lineHeight: CSSObject['lineHeight']
+            paddingTop: CSSObject['paddingTop']
+            paddingBottom: CSSObject['paddingBottom']
+            paddingLeft: CSSObject['paddingLeft']
+            paddingRight: CSSObject['paddingRight']
+        }
+        // Highlighted line tokens (for diff mode and code highlighting)
+        highlightedLine: {
+            backgroundColor: {
+                [key in CodeEditorV2DiffLineType]: CSSObject['backgroundColor']
+            }
+        }
+        // Syntax highlighting tokens
+        syntax: {
+            keyword: { color: CSSObject['color'] }
+            function: { color: CSSObject['color'] }
+            string: { color: CSSObject['color'] }
+            number: { color: CSSObject['color'] }
+            operator: { color: CSSObject['color'] }
+            variable: { color: CSSObject['color'] }
+            comment: { color: CSSObject['color'] }
+            text: { color: CSSObject['color'] }
+        }
+    }
+}
+
+export type ResponsiveCodeEditorV2Tokens = {
+    [key in keyof BreakpointType]: CodeEditorV2Tokens
+}

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

@@ -1,6 +1,10 @@
 import { ReactNode } from 'react'
-import { CodeEditorV2Tokens } from './codeEditorV2.tokens'
+import type { CodeEditorV2Tokens } from './codeEditorV2.tokens.types'
+import { CodeEditorV2DiffLineType } from './codeEditorV2.tokens.types'
 import type { CSSObject } from 'styled-components'
+
+export { CodeEditorV2DiffLineType } from './codeEditorV2.tokens.types'
+
 export enum CodeEditorV2Variant {
     DEFAULT = 'default',
     NO_GUTTER = 'no-gutter',
@@ -11,11 +15,6 @@ export enum MonacoTheme {
     LIGHT = 'light',
     DARK = 'dark',
 }
-export enum CodeEditorV2DiffLineType {
-    ADDED = 'added',
-    REMOVED = 'removed',
-    UNCHANGED = 'unchanged',
-}
 
 export type CodeEditorV2DiffLine = {
     content: string

package/lib/components/DataTable/DataTable.tsx

@@ -61,6 +61,7 @@ import { MenuGroupType, MenuAlignment } from '../Menu/types'
 
 import { useMobileDataTable } from './hooks/useMobileDataTable'
 import MobileColumnDrawer from './MobileColumnDrawer'
+// eslint-disable-next-line import-x/no-cycle -- intentional recursion: DataTable renders PivotTableModal whose preview renders a nested DataTable
 import PivotTableModal from './PivotTableModal'
 import type { PivotTableConfig } from './PivotTableModal/types'
 import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
@@ -943,6 +944,14 @@ const DataTable = forwardRef(
 
         const sortTimeoutRef = useRef<NodeJS.Timeout | null>(null)
 
+        useEffect(() => {
+            return () => {
+                if (sortTimeoutRef.current) {
+                    clearTimeout(sortTimeoutRef.current)
+                }
+            }
+        }, [])
+
         const applySortConfig = (
             field: keyof T,
             newSortConfig: SortConfig | null

package/lib/components/DataTable/DataTableHeader/index.tsx

@@ -1,7 +1,8 @@
 import { forwardRef, useState, useRef, useEffect, useCallback } from 'react'
 import { Filter, Search, ListFilter, X } from 'lucide-react'
 import { DataTableHeaderProps } from './types'
-import { Button, TextInput } from '../../../main'
+import { Button } from '../../Button'
+import { TextInput } from '../../Inputs/TextInput'
 import { ButtonSize, ButtonType } from '../../Button/types'
 import Block from '../../Primitives/Block/Block'
 import PrimitiveText from '../../Primitives/PrimitiveText/PrimitiveText'

package/lib/components/DataTable/PivotTableModal/PivotPreviewPanel.tsx

@@ -3,6 +3,7 @@ import Block from '../../Primitives/Block/Block'
 import PrimitiveText from '../../Primitives/PrimitiveText/PrimitiveText'
 import Button from '../../Button/Button'
 import { ButtonSize, ButtonType } from '../../Button/types'
+// eslint-disable-next-line import-x/no-cycle -- intentional recursion: the pivot preview renders a nested DataTable
 import DataTable from '../DataTable'
 import { NoScrollbar } from './pivotModal.styled'
 import { PivotTableIllustration } from './PivotTableIllustration'

package/lib/components/DataTable/PivotTableModal/index.tsx

@@ -36,6 +36,7 @@ import {
 } from './utils'
 import { NoScrollbar } from './pivotModal.styled'
 import { getPivotModalStyleTokens } from './pivotModalStyleTokens'
+// eslint-disable-next-line import-x/no-cycle -- intentional recursion: pivot preview renders a nested DataTable
 import PivotPreviewPanel from './PivotPreviewPanel'
 
 type PivotSectionKey = 'rows' | 'columns' | 'values'

package/lib/components/DataTable/TableBody/BulkActionBar.tsx

@@ -1,6 +1,6 @@
 import { forwardRef, useState } from 'react'
 import { Download } from 'lucide-react'
-import { Button } from '../../../main'
+import { Button } from '../../Button'
 import { ButtonSize, ButtonType } from '../../Button/types'
 import Block from '../../Primitives/Block/Block'
 import PrimitiveText from '../../Primitives/PrimitiveText/PrimitiveText'

package/lib/components/DataTable/TableBody/index.tsx

@@ -19,16 +19,10 @@ import { MenuAlignment, MenuSide } from '../../Menu/types'
 import Skeleton from '../../Skeleton/Skeleton'
 import { getSkeletonState } from '../../Skeleton/utils'
 
-import {
-    Button,
-    ButtonType,
-    ButtonSize,
-    ButtonSubType,
-    Checkbox,
-    CheckboxSize,
-    TableTokenType,
-    Tooltip,
-} from '../../../main'
+import { Button, ButtonType, ButtonSize, ButtonSubType } from '../../Button'
+import { Checkbox, CheckboxSize } from '../../Checkbox'
+import { Tooltip } from '../../Tooltip'
+import type { TableTokenType } from '../dataTable.tokens'
 import { useResponsiveTokens } from '../../../hooks/useResponsiveTokens'
 import { TooltipSide, TooltipAlign, TooltipSize } from '../../Tooltip/types'
 

package/lib/components/DataTable/TableHeader/FilterComponents.tsx

@@ -618,6 +618,8 @@ export const SingleSelectItems: React.FC<{
                                                         .header.filter
                                                         .sortOption.fontWeight,
                                                 flexGrow: 1,
+                                                overflowWrap: 'break-word',
+                                                minWidth: 0,
                                             }}
                                         >
                                             {label}
@@ -824,6 +826,8 @@ export const MultiSelectItems: React.FC<{
                                                         .header.filter
                                                         .sortOption.fontWeight,
                                                 flexGrow: 1,
+                                                overflowWrap: 'break-word',
+                                                minWidth: 0,
                                             }}
                                         >
                                             {label}

package/lib/components/DateRangePicker/DateRangePicker.tsx

@@ -25,6 +25,8 @@ import {
     getPresetLabel,
     getTodayInTimezone,
     validateDateInput,
+    isControlledDateRange,
+    isValidDate,
 } from './utils'
 import CalendarGrid from './CalendarGrid'
 import QuickRangeSelector from './QuickRangeSelector'
@@ -37,7 +39,8 @@ import { Popover } from '../Popover'
 import { TextInput, TextInputSize } from '../Inputs/TextInput'
 import PrimitiveText from '../Primitives/PrimitiveText/PrimitiveText'
 import PrimitiveButton from '../Primitives/PrimitiveButton/PrimitiveButton'
-import { ButtonType, ButtonSize, Button, Tooltip } from '../../main'
+import { ButtonType, ButtonSize, Button } from '../Button'
+import { Tooltip } from '../Tooltip'
 import { useBreakpoints } from '../../hooks/useBreakPoints'
 import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
 
@@ -408,7 +411,7 @@ const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
 
         const [selectedRange, setSelectedRange] = useState<
             DateRange | undefined
-        >(value)
+        >(() => (isControlledDateRange(value) ? value : undefined))
         const lastExternalValueRef = React.useRef<{
             start: number | null
             end: number | null
@@ -524,32 +527,44 @@ const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
 
         const resetValues = useCallback(
             (dateRangeObj?: DateRange) => {
-                setSelectedRange(dateRangeObj)
+                const normalizedRange = isControlledDateRange(dateRangeObj)
+                    ? dateRangeObj
+                    : undefined
+
+                setSelectedRange(normalizedRange)
                 setActivePreset(
-                    dateRangeObj
-                        ? detectPresetFromRange(dateRangeObj, timezone)
+                    normalizedRange
+                        ? detectPresetFromRange(normalizedRange, timezone)
                         : DateRangePreset.CUSTOM
                 )
                 setStartDate(
-                    dateRangeObj &&
-                        formatDate(dateRangeObj.startDate, dateFormat, timezone)
+                    normalizedRange &&
+                        formatDate(
+                            normalizedRange.startDate,
+                            dateFormat,
+                            timezone
+                        )
                 )
-                if (dateRangeObj && dateRangeObj.endDate) {
+                if (normalizedRange?.endDate) {
                     setEndDate(
-                        formatDate(dateRangeObj.endDate, dateFormat, timezone)
+                        formatDate(
+                            normalizedRange.endDate,
+                            dateFormat,
+                            timezone
+                        )
                     )
-                } else if (!dateRangeObj) {
+                } else if (!normalizedRange) {
                     setEndDate(undefined)
                 }
                 setStartTime(
-                    dateRangeObj &&
-                        formatDate(dateRangeObj.startDate, 'HH:mm', timezone)
+                    normalizedRange &&
+                        formatDate(normalizedRange.startDate, 'HH:mm', timezone)
                 )
-                if (dateRangeObj && dateRangeObj.endDate) {
+                if (normalizedRange?.endDate) {
                     setEndTime(
-                        formatDate(dateRangeObj.endDate, 'HH:mm', timezone)
+                        formatDate(normalizedRange.endDate, 'HH:mm', timezone)
                     )
-                } else if (!dateRangeObj) {
+                } else if (!normalizedRange) {
                     setEndTime(undefined)
                 }
                 setStartDateValidation({ isValid: true, error: 'none' })
@@ -562,7 +577,7 @@ const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
         )
 
         useEffect(() => {
-            if (!value) {
+            if (!isControlledDateRange(value)) {
                 if (lastExternalValueRef.current !== null) {
                     lastExternalValueRef.current = null
                     resetValues(undefined)
@@ -571,8 +586,11 @@ const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
             }
 
             const nextSignature = {
-                start: value.startDate.getTime() ?? null,
-                end: value.endDate?.getTime() ?? null,
+                start: value.startDate.getTime(),
+                end:
+                    value.endDate && isValidDate(value.endDate)
+                        ? value.endDate.getTime()
+                        : null,
                 dateFormat,
             }
 

package/lib/components/DateRangePicker/components/ActionButtons.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import Block from '../../Primitives/Block/Block'
-import { ButtonType, ButtonSize, Button, Tooltip } from '../../../main'
+import { ButtonType, ButtonSize, Button } from '../../Button'
+import { Tooltip } from '../../Tooltip'
 import type { ActionButtonsProps } from '../types'
 import { useBreakpoints } from '../../../hooks/useBreakPoints'
 import { getMobileToken } from './mobile.tokens'

package/lib/components/DateRangePicker/types.ts

@@ -194,11 +194,11 @@ export type CustomPresetDefinition = {
 /**
  * Presets configuration - can be predefined presets, custom configs, or custom definitions
  */
-export type PresetsConfig =
-    | DateRangePreset[]
-    | CustomPresetConfig[]
-    | CustomPresetDefinition[]
-    | (DateRangePreset | CustomPresetConfig | CustomPresetDefinition)[]
+export type PresetsConfig = (
+    | DateRangePreset
+    | CustomPresetConfig
+    | CustomPresetDefinition
+)[]
 
 // =============================================================================
 // COMPONENT PROPS

package/lib/components/DateRangePicker/utils.ts

@@ -256,6 +256,11 @@ export const isValidDate = (date: Date): boolean => {
     return date instanceof Date && !isNaN(date.getTime())
 }
 
+/** True when a controlled `value` has a usable start date (avoids `.getTime()` on undefined). */
+export const isControlledDateRange = (
+    value?: DateRange | null
+): value is DateRange => !!value && isValidDate(value.startDate)
+
 /**
  * Formats time in 12-hour format
  * @param date The date to format

package/lib/components/Directory/Directory.tsx

@@ -5,19 +5,20 @@ import { createRef, useEffect, useRef } from 'react'
 import type { DirectoryProps } from './types'
 import Section from './Section'
 import Block from '../Primitives/Block/Block'
-import { handleSectionNavigation } from './utils'
+import { handleSectionNavigation, normalizeDirectoryData } from './utils'
 import { ActiveItemProvider } from './NavItem'
 import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
 import { DirectoryTokenType } from './directory.tokens'
 
 const Directory = ({
-    directoryData,
+    directoryData: directoryDataProp,
     idPrefix,
     activeItem,
     onActiveItemChange,
     defaultActiveItem,
     iconOnlyMode = false,
 }: DirectoryProps) => {
+    const directoryData = normalizeDirectoryData(directoryDataProp)
     const sectionRefs = useRef<Array<React.RefObject<HTMLDivElement | null>>>(
         []
     )

package/lib/components/Directory/NavItem.tsx

@@ -368,6 +368,7 @@ const NavItem = ({
                         style={{
                             display: 'flex',
                             flexDirection: 'column',
+                            whiteSpace: 'nowrap',
                         }}
                     >
                         <TruncatedTextWithTooltipV2

package/lib/components/Directory/Section.tsx

@@ -204,6 +204,7 @@ const Section = ({
                         color={tokens.section.header.label.color}
                         fontWeight={tokens.section.header.label.fontWeight}
                         fontSize={tokens.section.header.label.fontSize}
+                        style={{ whiteSpace: 'nowrap' }}
                     >
                         {section.label.toUpperCase()}
                     </Text>

package/lib/components/Directory/types.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react'
 
 export type DirectoryProps = {
-    directoryData: DirectoryData[]
+    directoryData: DirectoryData[] | null
     idPrefix?: string
     activeItem?: string | null
     onActiveItemChange?: (item: string | null) => void

package/lib/components/Directory/utils.ts

@@ -1,3 +1,9 @@
+import type { DirectoryData } from './types'
+
+export const normalizeDirectoryData = (
+    directoryData: DirectoryData[] | null
+): DirectoryData[] => (Array.isArray(directoryData) ? directoryData : [])
+
 export const handleSectionNavigation = (
     direction: 'up' | 'down',
     currentIndex: number,

package/lib/components/Drawer/components/DrawerBase.tsx

@@ -299,6 +299,22 @@ export const Drawer = ({
         string | undefined
     >(undefined)
 
+    // Prevent focus from escaping to underlying content when a nested drawer is open
+    React.useLayoutEffect(() => {
+        const stopFocus = (e: FocusEvent) => {
+            // only intercept when a nested modal is open
+            if (document.querySelector('[data-modal]')) {
+                e.stopImmediatePropagation()
+            }
+        }
+        document.addEventListener('focusin', stopFocus)
+        document.addEventListener('focusout', stopFocus)
+        return () => {
+            document.removeEventListener('focusin', stopFocus)
+            document.removeEventListener('focusout', stopFocus)
+        }
+    }, [])
+
     // Screen reader announcement for drawer state changes
     React.useEffect(() => {
         if (open) {

package/lib/components/Drawer/components/NestedSelectDrawer.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useState, useMemo, createContext } from 'react'
+import React, { useState, useMemo, createContext, useEffect } from 'react'
 import {
     Drawer,
     DrawerPortal,
@@ -249,6 +249,11 @@ export const NestedMultiSelectDrawer = ({
         }>
     >([{ title: heading, items, selectedValues: internalSelectedValues }])
 
+    useEffect(() => {
+        setInternalSelectedValues(selectedValues)
+        setNavigationStack([{ title: heading, items, selectedValues }])
+    }, [selectedValues])
+
     const selectMobileOffset = {
         top: '74px',
         bottom: '0px',
@@ -579,6 +584,13 @@ export const NestedSingleSelectDrawer = ({
         }>
     >([{ title: heading, items, selectedValue: internalSelectedValue }])
 
+    useEffect(() => {
+        setInternalSelectedValue(selectedValue || '')
+        setNavigationStack([
+            { title: heading, items, selectedValue: selectedValue || '' },
+        ])
+    }, [selectedValue])
+
     const selectMobileOffset = {
         top: '74px',
         bottom: '16px',

package/lib/components/Drawer/components/SelectDrawer.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useState, useMemo } from 'react'
+import React, { useState, useMemo, useEffect } from 'react'
 import {
     Drawer,
     DrawerPortal,
@@ -46,6 +46,10 @@ export const MultiSelectDrawer = ({
     const [internalSelectedValues, setInternalSelectedValues] =
         useState<string[]>(selectedValues)
 
+    useEffect(() => {
+        setInternalSelectedValues(selectedValues)
+    }, [selectedValues])
+
     const selectMobileOffset = {
         top: '74px',
         bottom: '16px',
@@ -386,6 +390,10 @@ export const SingleSelectDrawer = ({
         selectedValue || ''
     )
 
+    useEffect(() => {
+        setInternalSelectedValue(selectedValue || '')
+    }, [selectedValue])
+
     const selectMobileOffset = {
         top: '74px',
         bottom: '0px',

package/lib/components/Inputs/OTPInput/OTPInput.tsx

@@ -74,15 +74,17 @@ const OTPInput = ({
             .join(' ') || undefined
 
     useEffect(() => {
-        if (!disabled) return
         const val = value || ''
         const otpArray = val.split('').slice(0, length)
         const paddedOtp = [
             ...otpArray,
             ...new Array(Math.max(length - otpArray.length, 0)).fill(''),
         ]
-        setOtp(paddedOtp)
-    }, [disabled, value, length])
+        setOtp((prevOtp) => {
+            if (prevOtp.join('') === paddedOtp.join('')) return prevOtp
+            return paddedOtp
+        })
+    }, [value, length])
 
     useEffect(() => {
         setOtp((prevOtp) => {

package/lib/components/InputsV2/ChatInputV2/ChatInputV2.dark.tokens.ts

@@ -1,6 +1,6 @@
 import { FoundationTokenType } from '../../../tokens/theme.token'
 import { InputStateV2 } from '../inputV2.types'
-import { ResponsiveChatInputV2TokensType } from './ChatInputV2.tokens'
+import type { ResponsiveChatInputV2TokensType } from './ChatInputV2.tokens.types'
 
 const focusRing = (foundationToken: FoundationTokenType) =>
     `inset 0 0 0 3px ${foundationToken.colors.primary[500]}`

package/lib/components/InputsV2/ChatInputV2/ChatInputV2.light.tokens.ts

@@ -1,6 +1,6 @@
 import { FoundationTokenType } from '../../../tokens/theme.token'
 import { InputStateV2 } from '../inputV2.types'
-import { ResponsiveChatInputV2TokensType } from './ChatInputV2.tokens'
+import type { ResponsiveChatInputV2TokensType } from './ChatInputV2.tokens.types'
 
 export const getChatInputV2LightTokens = (
     foundationToken: FoundationTokenType