@juspay/blend-design-system 0.0.37-beta.8 → 0.0.37

package/dist/components/DataTable/hooks/useRowFlip.d.ts

@@ -0,0 +1,6 @@
+import { RowAnimationConfig } from '../types';
+interface UseRowFlipReturn {
+    register: (id: string, el: HTMLTableRowElement | null) => void;
+}
+export declare function useRowFlip(orderedIds: string[], animationConfig?: RowAnimationConfig): UseRowFlipReturn;
+export {};

package/dist/components/DataTable/types.d.ts

@@ -285,6 +285,29 @@ export type RowSelectionConfig<T extends Record<string, unknown>> = {
     isDisabled?: (row: T, index: number) => boolean;
     disabledText?: (row: T, index: number) => string;
 };
+type BaseRowAnimationConfig = {
+    /** Enter animation duration in seconds. */
+    enterDuration: number;
+    /** Enter animation Y offset in pixels. */
+    enterOffset: number;
+};
+export type RowAnimationConfig = BaseRowAnimationConfig & ({
+    /** Transition type for layout animations. */
+    transitionType: 'bezier';
+    /** Bezier duration in seconds. */
+    duration: number;
+    /** Bezier easing curve as [x1, y1, x2, y2] cubic-bezier control points. */
+    bezier: [number, number, number, number];
+} | {
+    /** Transition type for layout animations. */
+    transitionType: 'spring';
+    /** Spring stiffness. */
+    stiffness: number;
+    /** Spring damping. */
+    damping: number;
+    /** Spring mass. */
+    mass: number;
+});
 export type DataTableProps<T extends Record<string, unknown>> = {
     data: T[];
     columns: ColumnDefinition<T>[];
@@ -376,6 +399,8 @@ export type DataTableProps<T extends Record<string, unknown>> = {
     onInsertRight?: (field: keyof T) => void;
     onDeleteColumn?: (field: keyof T) => void;
     getRowStyle?: (row: T, index: number) => React.CSSProperties;
+    enableRowAnimation?: boolean;
+    rowAnimationConfig?: RowAnimationConfig;
     tableBodyHeight?: string | number;
     mobileColumnsToShow?: number;
     /**
@@ -429,3 +454,4 @@ export type DataTableProps<T extends Record<string, unknown>> = {
         }) => void;
     };
 };
+export {};

package/dist/components/DateRangePicker/CalendarGrid.d.ts

@@ -1,4 +1,4 @@
-import { DateRange, CustomRangeConfig } from './types';
+import { DateRange, CustomRangeConfig, CustomDateDisableFunction } from './types';
 type CalendarGridProps = {
     selectedRange: DateRange | undefined;
     onDateSelect: (range: DateRange) => void;
@@ -8,13 +8,16 @@ type CalendarGridProps = {
     disablePastDates?: boolean;
     hideFutureDates?: boolean;
     hidePastDates?: boolean;
-    customDisableDates?: (date: Date) => boolean;
+    customDisableDates?: CustomDateDisableFunction;
     customRangeConfig?: CustomRangeConfig;
     showDateTimePicker?: boolean;
     resetScrollPosition?: number;
     timezone?: string;
     isSingleDatePicker?: boolean;
     maxYearOffset?: number;
+    minDate?: Date;
+    maxDate?: Date;
+    maxRangeDays?: number;
 };
 declare const CalendarGrid: import('react').ForwardRefExoticComponent<CalendarGridProps & import('react').RefAttributes<HTMLDivElement>>;
 export default CalendarGrid;

package/dist/components/DateRangePicker/types.d.ts

@@ -169,9 +169,10 @@ export type PresetsConfig = (DateRangePreset | CustomPresetConfig | CustomPreset
 /**
  * Function type for custom date disabling logic
  * @param date The date to check
+ * @param currentRange The current in-progress selected range (if any)
  * @returns true if the date should be disabled, false otherwise
  */
-export type CustomDateDisableFunction = (date: Date) => boolean;
+export type CustomDateDisableFunction = (date: Date, currentRange?: DateRange) => boolean;
 /**
  * Function type for custom range calculation
  * @param selectedDate The date that was selected
@@ -261,6 +262,7 @@ export type DateRangePickerProps = {
     icon?: ReactNode;
     minDate?: Date;
     maxDate?: Date;
+    maxRangeDays?: number;
     dateFormat?: string;
     allowSingleDateSelection?: boolean;
     isSingleDatePicker?: boolean;

package/dist/components/DateRangePicker/utils.d.ts

@@ -207,7 +207,7 @@ export declare const createSingleDateRange: (date: Date, timezone?: string, disa
  * @param isDoubleClick Whether this is a double-click event
  * @returns New date range or null if click should be ignored
  */
-export declare const handleCalendarDateClick: (clickedDate: Date, allowSingleDateSelection: boolean | undefined, today: Date, disableFutureDates?: boolean, disablePastDates?: boolean, isDoubleClick?: boolean, timezone?: string, selectedRange?: DateRange, isSingleDatePicker?: boolean) => DateRange | null;
+export declare const handleCalendarDateClick: (clickedDate: Date, allowSingleDateSelection: boolean | undefined, today: Date, disableFutureDates?: boolean, disablePastDates?: boolean, isDoubleClick?: boolean, timezone?: string, selectedRange?: DateRange, isSingleDatePicker?: boolean, minDate?: Date, maxDate?: Date, customDisableDates?: (date: Date, currentRange?: DateRange) => boolean, maxRangeDays?: number) => DateRange | null;
 /**
  * Generates calendar weeks for a specific month with consistent alignment
  * @param year The year
@@ -341,7 +341,7 @@ export declare const getScrollToMonth: (monthIndex: number, monthHeight: number)
  * @param customDisableDates Custom function to disable specific dates
  * @returns Object with all date states
  */
-export declare const getDateCellStates: (date: Date, selectedRange: DateRange | undefined, today: Date, disableFutureDates?: boolean, disablePastDates?: boolean, customDisableDates?: (date: Date) => boolean, timezone?: string, isSingleDatePicker?: boolean) => {
+export declare const getDateCellStates: (date: Date, selectedRange: DateRange | undefined, today: Date, disableFutureDates?: boolean, disablePastDates?: boolean, customDisableDates?: (date: Date, currentRange?: DateRange) => boolean, timezone?: string, isSingleDatePicker?: boolean, minDate?: Date, maxDate?: Date, maxRangeDays?: number) => {
     isStart: boolean;
     isEnd: boolean;
     isRangeDay: boolean;
@@ -525,7 +525,7 @@ export declare const createCalendarMonthData: (year: number, month: number, mont
  * @param customDisableDates Custom function to disable specific dates
  * @returns Day cell props
  */
-export declare const calculateDayCellProps: (date: Date, selectedRange: DateRange | undefined, today: Date, disableFutureDates: boolean, disablePastDates: boolean, calendarToken: CalendarTokenType, customDisableDates?: (date: Date) => boolean, timezone?: string, isSingleDatePicker?: boolean) => {
+export declare const calculateDayCellProps: (date: Date, selectedRange: DateRange | undefined, today: Date, disableFutureDates: boolean, disablePastDates: boolean, calendarToken: CalendarTokenType, customDisableDates?: (date: Date, currentRange?: DateRange) => boolean, timezone?: string, isSingleDatePicker?: boolean, minDate?: Date, maxDate?: Date, maxRangeDays?: number) => {
     dateStates: ReturnType<typeof getDateCellStates>;
     styles: Record<string, unknown>;
     textColor: string | unknown;
@@ -771,7 +771,7 @@ export declare const validateCustomRangeConfig: (config: CustomRangeConfig) => {
  * @param isDoubleClick Whether this is a double-click event
  * @returns New date range or null if click should be ignored
  */
-export declare const handleCustomRangeCalendarDateClick: (clickedDate: Date, allowSingleDateSelection: boolean | undefined, today: Date, disableFutureDates?: boolean, disablePastDates?: boolean, customRangeConfig?: CustomRangeConfig, isDoubleClick?: boolean, timezone?: string, selectedRange?: DateRange, isSingleDatePicker?: boolean) => DateRange | null;
+export declare const handleCustomRangeCalendarDateClick: (clickedDate: Date, allowSingleDateSelection: boolean | undefined, today: Date, disableFutureDates?: boolean, disablePastDates?: boolean, customRangeConfig?: CustomRangeConfig, isDoubleClick?: boolean, timezone?: string, selectedRange?: DateRange, isSingleDatePicker?: boolean, minDate?: Date, maxDate?: Date, customDisableDates?: (date: Date, currentRange?: DateRange) => boolean, maxRangeDays?: number) => DateRange | null;
 /**
  * Checks if two dates represent the same calendar day (ignoring time and timezone)
  */
@@ -804,7 +804,7 @@ export declare const matchesLastMonthPreset: (range: DateRange) => boolean;
 /**
  * Robust preset detection that works with both UTC and local timezone dates
  */
-export declare const detectPresetFromRange: (range: DateRange, timezone?: string) => DateRangePreset;
+export declare const detectPresetFromRange: (range: DateRange, timezone?: string, presetConfigs?: CustomPresetConfig[]) => DateRangePreset;
 /**
  * Default preset configuration for the DateRangePicker
  */

package/dist/components/Directory/Directory.d.ts

@@ -1,6 +1,6 @@
 import { DirectoryProps } from './types';
 declare const Directory: {
-    ({ directoryData: directoryDataProp, idPrefix, activeItem, onActiveItemChange, defaultActiveItem, iconOnlyMode, }: DirectoryProps): import("react/jsx-runtime").JSX.Element;
+    ({ directoryData: directoryDataProp, idPrefix, activeItem, onActiveItemChange, defaultActiveItem, iconOnlyMode, showHierarchyLines, hierarchyLineBorderRadius, expandedItems, defaultExpandedItems, onExpandedItemsChange, onItemExpand, enableVirtualization, virtualization, }: DirectoryProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Directory;

package/dist/components/Directory/NavItem.d.ts

@@ -17,5 +17,5 @@ type ActiveItemProviderProps = {
     defaultActiveItem?: string | null;
 };
 export declare const ActiveItemProvider: React.FC<ActiveItemProviderProps>;
-declare const NavItem: ({ item, index, onNavigate, itemPath, iconOnlyMode, }: NavItemProps) => import("react/jsx-runtime").JSX.Element;
+declare const NavItem: ({ item, index, onNavigate, itemPath, iconOnlyMode, showHierarchyLines, hierarchyLineBorderRadius, isLast, isNested, }: NavItemProps) => import("react/jsx-runtime").JSX.Element;
 export default NavItem;

package/dist/components/Directory/Section.d.ts

@@ -6,5 +6,5 @@ type SectionStateContextValue = {
 };
 declare const SectionStateContext: React.Context<SectionStateContextValue | null>;
 export { SectionStateContext };
-declare const Section: ({ section, sectionIndex, onNavigateBetweenSections, idPrefix, iconOnlyMode, }: SectionProps) => import("react/jsx-runtime").JSX.Element;
+declare const Section: ({ section, sectionIndex, onNavigateBetweenSections, idPrefix, iconOnlyMode, showHierarchyLines, hierarchyLineBorderRadius, }: SectionProps) => import("react/jsx-runtime").JSX.Element;
 export default Section;

package/dist/components/Directory/VirtualizedDirectory.d.ts

@@ -0,0 +1,3 @@
+import { DirectoryProps } from './types';
+declare const VirtualizedDirectory: ({ directoryData: directoryDataProp, activeItem: controlledActiveItem, onActiveItemChange, defaultActiveItem, showHierarchyLines, hierarchyLineBorderRadius, expandedItems, defaultExpandedItems, onExpandedItemsChange, onItemExpand, virtualization, }: DirectoryProps) => import("react/jsx-runtime").JSX.Element;
+export default VirtualizedDirectory;

package/dist/components/Directory/directory.tokens.d.ts

@@ -82,6 +82,13 @@ export type DirectoryTokenType = {
                     color: CSSObject['color'];
                     leftOffset: CSSObject['left'];
                 };
+                connector: {
+                    itemInset: CSSObject['marginLeft'];
+                    itemPaddingLeft: CSSObject['paddingLeft'];
+                    elbowTop: CSSObject['top'];
+                    elbowHeight: CSSObject['height'];
+                    elbowWidthOffset: CSSObject['width'];
+                };
             };
         };
     };

package/dist/components/Directory/types.d.ts

@@ -1,4 +1,14 @@
-import { ReactNode } from 'react';
+import { ReactNode, RefObject } from 'react';
+import { CSSObject } from 'styled-components';
+export type DirectoryExpandedItems = Set<string> | string[];
+export type DirectoryVirtualizationConfig = {
+    viewportRef?: RefObject<HTMLElement | null>;
+    rowHeight?: number;
+    sectionHeight?: number;
+    viewportHeight?: number;
+    overscan?: number;
+    threshold?: number;
+};
 export type DirectoryProps = {
     directoryData: DirectoryData[] | null;
     idPrefix?: string;
@@ -6,6 +16,14 @@ export type DirectoryProps = {
     onActiveItemChange?: (item: string | null) => void;
     defaultActiveItem?: string | null;
     iconOnlyMode?: boolean;
+    showHierarchyLines?: boolean;
+    hierarchyLineBorderRadius?: CSSObject['borderRadius'];
+    expandedItems?: DirectoryExpandedItems;
+    defaultExpandedItems?: DirectoryExpandedItems;
+    onExpandedItemsChange?: (items: string[]) => void;
+    onItemExpand?: (item: NavbarItem, itemPath: string) => void | Promise<void>;
+    enableVirtualization?: boolean;
+    virtualization?: DirectoryVirtualizationConfig;
 };
 export type DirectoryData = {
     label?: string;
@@ -33,6 +51,8 @@ export type SectionProps = {
     onNavigateBetweenSections: (direction: 'up' | 'down', currentIndex: number) => void;
     idPrefix?: string;
     iconOnlyMode?: boolean;
+    showHierarchyLines?: boolean;
+    hierarchyLineBorderRadius?: CSSObject['borderRadius'];
 };
 export type NavItemProps = {
     item: NavbarItem;
@@ -40,4 +60,21 @@ export type NavItemProps = {
     onNavigate: (direction: 'up' | 'down', currentIndex: number) => void;
     itemPath?: string;
     iconOnlyMode?: boolean;
+    showHierarchyLines?: boolean;
+    hierarchyLineBorderRadius?: CSSObject['borderRadius'];
+    isLast?: boolean;
+    isNested?: boolean;
+};
+export type DirectoryFlatRow = {
+    type: 'section';
+    section: DirectoryData;
+    sectionIndex: number;
+} | {
+    type: 'item';
+    item: NavbarItem;
+    sectionIndex: number;
+    itemPath: string;
+    depth: number;
+    isLast: boolean;
+    ancestorIsLast: boolean[];
 };

package/dist/components/Directory/utils.d.ts

@@ -1,5 +1,7 @@
-import { DirectoryData } from './types';
+import { DirectoryData, DirectoryExpandedItems, DirectoryFlatRow } from './types';
 export declare const normalizeDirectoryData: (directoryData: DirectoryData[] | null) => DirectoryData[];
+export declare const normalizeExpandedItems: (expandedItems?: DirectoryExpandedItems) => Set<string>;
+export declare const flattenDirectoryData: (directoryData: DirectoryData[], expandedItems: Set<string>, openSections: Set<number>) => DirectoryFlatRow[];
 export declare const handleSectionNavigation: (direction: "up" | "down", currentIndex: number, totalItems: number, selector?: string, childSelector?: string) => number;
 export declare const handleKeyDown: (e: React.KeyboardEvent, options: {
     hasChildren?: boolean;

package/dist/components/Drawer/index.d.ts

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use DrawerV2 instead. */
 export { Drawer, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerBody, DrawerFooter, DrawerClose, StatusDrawer, MultiSelectDrawer, SingleSelectDrawer, NestedMultiSelectDrawer, NestedSingleSelectDrawer, } from './Drawer';
 export * from './types';
 export type { DrawerTokensType } from './drawer.tokens';

package/dist/components/Inputs/MultiValueInput/index.d.ts

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use MultiValueInputV2 instead. */
 export { default as MultiValueInput } from './MultiValueInput';
 export * from './multiValueInput.tokens';
 export * from './types';

package/dist/components/Inputs/NumberInput/index.d.ts

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use NumberInputV2 instead. */
 export { default as NumberInput } from './NumberInput';
 export * from './numberInput.tokens';
 export * from './types';

package/dist/components/Inputs/OTPInput/index.d.ts

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use OTPInputV2 instead. */
 export { default as OTPInput } from './OTPInput';
 export * from './otpInput.tokens';
 export * from './types';

package/dist/components/Inputs/SearchInput/index.d.ts

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use SearchInputV2 instead. */
 export { default as SearchInput } from './SearchInput';
 export * from './searchInput.tokens';
 export * from './types';

package/dist/components/Inputs/TextArea/index.d.ts

@@ -1,2 +1,3 @@
+/** @deprecated Will be deprecated soon. Use TextAreaV2 instead. */
 export { default as TextArea } from './TextArea';
 export * from './types';

package/dist/components/Inputs/TextInput/index.d.ts

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use TextInputV2 instead. */
 export { default as TextInput } from './TextInput';
 export * from './textInput.tokens';
 export * from './types';

package/dist/components/InputsV2/TextAreaV2/utils.d.ts

@@ -19,11 +19,12 @@ export type TextAreaInputPadding = {
  * Computes textarea padding from tokens. On small screens when the field has focus or
  * value, top padding increases and bottom goes to 0 to make room for the floating label.
  */
-export declare function getTextAreaInputPadding({ inputContainer, size, isSmallScreen, inputFocusedOrWithValue, }: {
+export declare function getTextAreaInputPadding({ inputContainer, size, isSmallScreen, inputFocusedOrWithValue, hasLabel, }: {
     inputContainer: TextAreaV2TokensType['inputContainer'];
     size: InputSizeV2;
     isSmallScreen: boolean;
     inputFocusedOrWithValue: boolean;
+    hasLabel: boolean;
 }): TextAreaInputPadding;
 /**
  * Minimum textarea height so the visible area matches `rows` lines of text at the

package/dist/components/InputsV2/TextInputV2/utils.d.ts

@@ -9,9 +9,10 @@ export declare const TRANSITION = "border 200ms ease-in-out, box-shadow 200ms ea
 export declare const getInputState: (error?: {
     show: boolean;
 } | null, disabled?: boolean) => InputStateV2;
-export declare const getVerticalInputPadding: ({ isSmallScreenWithLargeSize, inputFocusedOrWithValue, paddingTop, paddingBottom, }: {
+export declare const getVerticalInputPadding: ({ isSmallScreenWithLargeSize, inputFocusedOrWithValue, hasLabel, paddingTop, paddingBottom, }: {
     isSmallScreenWithLargeSize: boolean;
     inputFocusedOrWithValue: boolean;
+    hasLabel: boolean;
     paddingTop: number;
     paddingBottom: number;
 }) => {

package/dist/components/InputsV2/UploadV2/UploadContainerV2.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+import { UploadV2TokensType } from './UploadV2.tokens.types';
+import { UploadDragState, UploadFileV2, UploadState } from './UploadV2.types';
+declare const UploadContainerV2: ({ description, descriptionId, slot, disabled, onClick, tokens, files, onFileRemove, multiple, state, errorText, errorId, progressBarValue, progressBarMaxWidth, uploadHeaderText, dragState, maxSize, maxFiles, }: {
+    description: string;
+    descriptionId?: string;
+    slot: React.ReactNode;
+    disabled: boolean;
+    onClick: () => void;
+    tokens: UploadV2TokensType;
+    files: UploadFileV2[];
+    onFileRemove: (fileId: string) => void;
+    multiple: boolean;
+    state: UploadState;
+    errorText: string;
+    errorId?: string;
+    progressBarValue: number;
+    progressBarMaxWidth: string;
+    uploadHeaderText: string;
+    dragState: UploadDragState;
+    maxSize?: number;
+    maxFiles?: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export default UploadContainerV2;

package/dist/components/InputsV2/UploadV2/UploadV2.d.ts

@@ -0,0 +1,31 @@
+import { UploadFileV2, UploadState } from './UploadV2.types';
+import { InputSizeV2 } from '../inputV2.types';
+declare const UploadV2: import('react').ForwardRefExoticComponent<{
+    id?: string;
+    name?: string;
+    label?: string;
+    subLabel?: string;
+    description?: string;
+    size?: InputSizeV2;
+    helpIconText?: string;
+    required?: boolean;
+    multiple?: boolean;
+    acceptedFileTypes?: string[];
+    disabled?: boolean;
+    slot?: React.ReactNode;
+    files?: UploadFileV2[];
+    onChange?: (files: UploadFileV2[]) => void;
+    state?: UploadState;
+    error?: {
+        show: boolean;
+        message?: string;
+    };
+    errorText?: string;
+    hintText?: string;
+    maxSize?: number;
+    maxFiles?: number;
+    progressBarValue?: number;
+    progressBarMaxWidth?: string;
+    uploadHeaderText?: string;
+} & Omit<import('react').InputHTMLAttributes<HTMLInputElement>, "size" | "style" | "multiple" | "className" | "slot" | "onChange"> & import('react').RefAttributes<HTMLInputElement>>;
+export default UploadV2;

package/dist/components/InputsV2/UploadV2/UploadV2.dark.tokens.d.ts

@@ -0,0 +1,3 @@
+import { FoundationTokenType } from '../../../tokens/theme.token';
+import { ResponsiveUploadV2Tokens } from './UploadV2.tokens.types';
+export declare const getUploadV2DarkTokens: (foundationTokens: FoundationTokenType) => ResponsiveUploadV2Tokens;

package/dist/components/InputsV2/UploadV2/UploadV2.light.tokens.d.ts

@@ -0,0 +1,3 @@
+import { FoundationTokenType } from '../../../tokens/theme.token';
+import { ResponsiveUploadV2Tokens } from './UploadV2.tokens.types';
+export declare const getUploadV2LightTokens: (foundationTokens: FoundationTokenType) => ResponsiveUploadV2Tokens;

package/dist/components/InputsV2/UploadV2/UploadV2.tokens.d.ts

@@ -0,0 +1,5 @@
+import { FoundationTokenType } from '../../../tokens/theme.token';
+import { Theme } from '../../../context/theme.enum';
+import { ResponsiveUploadV2Tokens } from './UploadV2.tokens.types';
+export type { UploadV2TokensType, ResponsiveUploadV2Tokens, } from './UploadV2.tokens.types';
+export declare const getUploadV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveUploadV2Tokens;

package/dist/components/InputsV2/UploadV2/UploadV2.tokens.types.d.ts

@@ -0,0 +1,115 @@
+import { CSSObject } from 'styled-components';
+import { InputSizeV2, InputStateV2 } from '../inputV2.types';
+import { BreakpointType } from '../../../breakpoints/breakPoints';
+import { UploadDragState, UploadState } from './UploadV2.types';
+export type UploadV2TokensType = {
+    gap: CSSObject['gap'];
+    topContainer: {
+        label: {
+            fontSize: {
+                [key in InputSizeV2]: CSSObject['fontSize'];
+            };
+            fontWeight: {
+                [key in InputSizeV2]: CSSObject['fontWeight'];
+            };
+            lineHeight: {
+                [key in InputSizeV2]: CSSObject['lineHeight'];
+            };
+            color: {
+                [key in InputStateV2]: CSSObject['color'];
+            };
+        };
+        subLabel: {
+            fontSize: {
+                [key in InputSizeV2]: CSSObject['fontSize'];
+            };
+            fontWeight: {
+                [key in InputSizeV2]: CSSObject['fontWeight'];
+            };
+            lineHeight: {
+                [key in InputSizeV2]: CSSObject['lineHeight'];
+            };
+            color: {
+                [key in InputStateV2]: CSSObject['color'];
+            };
+        };
+        required: {
+            color: CSSObject['color'];
+        };
+        helpIcon: {
+            width: {
+                [key in InputSizeV2]: CSSObject['width'];
+            };
+            color: {
+                [key in InputStateV2]: CSSObject['color'];
+            };
+        };
+    };
+    uploadContainer: {
+        gap: CSSObject['gap'];
+        paddingTop: CSSObject['paddingTop'];
+        paddingBottom: CSSObject['paddingBottom'];
+        paddingLeft: CSSObject['paddingLeft'];
+        paddingRight: CSSObject['paddingRight'];
+        borderRadius: CSSObject['borderRadius'];
+        border: {
+            [key in UploadState | UploadDragState]: CSSObject['border'];
+        };
+        backgroundColor: {
+            [key in UploadState | UploadDragState]: CSSObject['backgroundColor'];
+        };
+        header: {
+            gap: CSSObject['gap'];
+            title: {
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                color: CSSObject['color'];
+            };
+            description: {
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                color: CSSObject['color'];
+            };
+            errorText: {
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                color: CSSObject['color'];
+            };
+        };
+        fileTag: {
+            maxWidth: CSSObject['maxWidth'];
+            gap: CSSObject['gap'];
+        };
+    };
+    bottomContainer: {
+        hintText: {
+            fontSize: {
+                [key in InputSizeV2]: CSSObject['fontSize'];
+            };
+            fontWeight: {
+                [key in InputSizeV2]: CSSObject['fontWeight'];
+            };
+            lineHeight: {
+                [key in InputSizeV2]: CSSObject['lineHeight'];
+            };
+            color: {
+                [key in InputStateV2]: CSSObject['color'];
+            };
+        };
+        errorMessage: {
+            fontSize: {
+                [key in InputSizeV2]: CSSObject['fontSize'];
+            };
+            fontWeight: {
+                [key in InputSizeV2]: CSSObject['fontWeight'];
+            };
+            lineHeight: {
+                [key in InputSizeV2]: CSSObject['lineHeight'];
+            };
+            color: CSSObject['color'];
+        };
+    };
+};
+export type ResponsiveUploadV2Tokens = {
+    [key in keyof BreakpointType]: UploadV2TokensType;
+};

package/dist/components/InputsV2/UploadV2/UploadV2.types.d.ts

@@ -0,0 +1,56 @@
+import { InputSizeV2 } from '../inputV2.types';
+export declare enum UploadState {
+    IDLE = "idle",
+    UPLOADING = "uploading",
+    SUCCESS = "success",
+    ERROR = "error",
+    DISABLED = "disabled"
+}
+export declare enum UploadDragState {
+    DRAG_ENTER = "drag_enter",
+    DRAG_LEAVE = "drag_leave",
+    DRAG_OVER = "drag_over",
+    DROP = "drop"
+}
+export declare const UploadErrorReason: {
+    readonly OVERSIZED: "oversized";
+    readonly MAX_FILES: "maxFiles";
+    readonly INVALID_TYPE: "invalidType";
+};
+export type UploadErrorReasonValue = (typeof UploadErrorReason)[keyof typeof UploadErrorReason];
+export type UploadFileV2 = {
+    id?: string;
+    file: File;
+    isValid: boolean;
+    errorReason?: UploadErrorReasonValue;
+};
+export type UploadV2Props = {
+    id?: string;
+    name?: string;
+    label?: string;
+    subLabel?: string;
+    description?: string;
+    size?: InputSizeV2;
+    helpIconText?: string;
+    required?: boolean;
+    multiple?: boolean;
+    /** File types to accept (e.g., ['.jpg', '.png', 'image/*', '.pdf']) */
+    acceptedFileTypes?: string[];
+    disabled?: boolean;
+    slot?: React.ReactNode;
+    files?: UploadFileV2[];
+    /** Callback when files are selected or changed */
+    onChange?: (files: UploadFileV2[]) => void;
+    state?: UploadState;
+    error?: {
+        show: boolean;
+        message?: string;
+    };
+    errorText?: string;
+    hintText?: string;
+    maxSize?: number;
+    maxFiles?: number;
+    progressBarValue?: number;
+    progressBarMaxWidth?: string;
+    uploadHeaderText?: string;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className' | 'multiple' | 'slot' | 'onChange'>;

package/dist/components/InputsV2/UploadV2/index.d.ts

@@ -0,0 +1,3 @@
+export { default as UploadV2 } from './UploadV2';
+export * from './UploadV2.types';
+export * from './UploadV2.tokens';

package/dist/components/InputsV2/UploadV2/utils.d.ts

@@ -0,0 +1,32 @@
+import { UploadFileV2 } from './UploadV2.types';
+export declare const FILE_NAME_TAG_MAX_LEN = 24;
+export declare const createClickHandler: (disabled: boolean, fileInputRef: React.RefObject<HTMLInputElement>) => () => void;
+export declare const useUploadState: () => {
+    internalDragState: {
+        isDragActive: boolean;
+        isDragAccept: boolean;
+        isDragReject: boolean;
+    };
+    setInternalDragState: import('react').Dispatch<import('react').SetStateAction<{
+        isDragActive: boolean;
+        isDragAccept: boolean;
+        isDragReject: boolean;
+    }>>;
+    setDragCounter: import('react').Dispatch<import('react').SetStateAction<number>>;
+};
+export declare const createDragHandlers: (disabled: boolean, setDragCounter: (fn: (prev: number) => number) => void, updateDragStateFn: (isDragActive: boolean, files?: File[]) => void, processFilesFn: (files: FileList) => void) => {
+    handleDragEnter: (e: React.DragEvent) => void;
+    handleDragLeave: (e: React.DragEvent) => void;
+    handleDragOver: (e: React.DragEvent) => void;
+    handleDrop: (e: React.DragEvent) => void;
+};
+export declare const truncateFileNameForTag: (name: string) => string;
+export declare const getFileId: (uploadFile: UploadFileV2, index: number) => string;
+export declare const isFileTypeAccepted: (file: File, acceptedFileTypes: string[]) => boolean;
+declare const KNOWN_UPLOAD_ERROR_REASONS: readonly ["oversized", "maxFiles", "invalidType"];
+type KnownUploadErrorReason = (typeof KNOWN_UPLOAD_ERROR_REASONS)[number];
+export declare const formatFileSize: (sizeInBytes: number) => string;
+export declare const isKnownUploadErrorReason: (reason: unknown) => reason is KnownUploadErrorReason;
+export declare const normalizeUploadErrorReason: (reason: unknown) => "oversized" | "maxFiles" | "invalidType" | undefined;
+export declare const getValidationMessage: (reason?: unknown, maxSize?: number, maxFiles?: number) => string;
+export {};

package/dist/components/KeyValuePair/index.d.ts

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use KeyValuePairV2 instead. */
 export { default as KeyValuePair } from './KeyValuePair';
 export * from './KeyValuePair.tokens';
 export * from './types';

package/dist/components/Menu/Menu.d.ts

@@ -2,7 +2,7 @@ import { CSSObject } from 'styled-components';
 import { MenuProps } from './types';
 export declare const contentBaseStyle: CSSObject;
 declare const Menu: {
-    ({ trigger, items, asModal, alignment, side, sideOffset, alignOffset, collisonBoundaryRef, maxHeight, enableSearch, searchPlaceholder, minWidth, maxWidth, open, onOpenChange, enableVirtualScrolling, virtualItemHeight, virtualOverscan, virtualScrollThreshold, skeleton, }: MenuProps): import("react/jsx-runtime").JSX.Element;
+    ({ trigger, items, asModal, alignment, side, sideOffset, alignOffset, collisonBoundaryRef, maxHeight, enableSearch, searchPlaceholder, searchSortFn, onEnter, minWidth, maxWidth, open, onOpenChange, enableVirtualScrolling, virtualItemHeight, virtualOverscan, virtualScrollThreshold, skeleton, }: MenuProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Menu;

package/dist/components/Menu/index.d.ts

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use MenuV2 instead. */
 export { default as Menu } from './Menu';
 export * from './menu.tokens';
 export * from './types';