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

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';

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

@@ -17,6 +17,7 @@ export type MenuSkeletonProps = {
     show?: boolean;
     variant?: SkeletonVariant;
 };
+export type MenuSearchSortFn = (items: MenuItemType[], searchText: string) => MenuItemType[];
 export type MenuProps = {
     trigger: React.ReactNode;
     items?: MenuGroupType[];
@@ -26,6 +27,8 @@ export type MenuProps = {
     minWidth?: number;
     enableSearch?: boolean;
     searchPlaceholder?: string;
+    searchSortFn?: MenuSearchSortFn;
+    onEnter?: (searchText: string, filteredGroups: MenuGroupType[]) => void;
     enableVirtualScrolling?: boolean;
     virtualItemHeight?: number | ((item: MenuItemType, index: number) => number);
     virtualOverscan?: number;
@@ -68,6 +71,10 @@ export type MenuItemType = {
     subMenu?: MenuItemType[];
     enableSubMenuSearch?: boolean;
     subMenuSearchPlaceholder?: string;
+    /** Custom sort function for submenu search results. Defaults to exact → prefix → substring. */
+    subMenuSearchSortFn?: MenuSearchSortFn;
+    /** Called when the user presses Enter while focused on the submenu search input. */
+    onSubMenuSearchEnter?: (searchText: string, filteredResults: MenuItemType[]) => void;
     tooltip?: string | React.ReactNode;
     tooltipProps?: {
         side?: TooltipSide;

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

@@ -1,3 +1,11 @@
-import { MenuGroupType, MenuItemType } from './types';
-export declare const filterMenuGroups: (groups: MenuGroupType[], searchText: string) => MenuGroupType[];
+import { MenuGroupType, MenuItemType, MenuSearchSortFn } from './types';
+export declare enum MenuMatchRank {
+    EXACT = 0,
+    PREFIX = 1,
+    SUBSTRING = 2,
+    NONE = 3
+}
+export declare const getItemMatchRank: (item: MenuItemType, lower: string) => MenuMatchRank;
+export declare const defaultSearchSortFn: MenuSearchSortFn;
+export declare const filterMenuGroups: (groups: MenuGroupType[], searchText: string, searchSortFn?: MenuSearchSortFn) => MenuGroupType[];
 export declare const filterMenuItem: (item: MenuItemType, lower: string) => MenuItemType | null;

package/dist/components/MenuV2/MenuV2Content.d.ts

@@ -9,6 +9,7 @@ export type MenuV2ContentProps = {
     searchPlaceholder: string;
     searchText: string;
     onSearchTextChange: (value: string) => void;
+    onEnter?: () => void;
     maxHeight?: CSSObject['maxHeight'];
     minHeight?: CSSObject['minHeight'];
     minWidth?: CSSObject['minWidth'];

package/dist/components/MenuV2/menuV2.types.d.ts

@@ -32,6 +32,7 @@ export type MenuV2ItemLabel = {
     text: string;
     leftSlot?: React.ReactElement;
 };
+export type MenuV2SearchSortFn = (items: MenuV2ItemType[], searchText: string) => MenuV2ItemType[];
 export type MenuV2ItemType = {
     id?: string;
     label: MenuV2ItemLabel;
@@ -43,6 +44,8 @@ export type MenuV2ItemType = {
     subMenu?: MenuV2ItemType[];
     enableSubMenuSearch?: boolean;
     subMenuSearchPlaceholder?: string;
+    subMenuSearchSortFn?: MenuV2SearchSortFn;
+    onSubMenuSearchEnter?: (searchText: string, filteredResults: MenuV2ItemType[]) => void;
     tooltip?: string | ReactNode;
     tooltipProps?: MenuV2ItemTooltipProps;
 };
@@ -72,6 +75,8 @@ export type MenuV2Props = {
     dimensions?: MenuV2Dimensions;
     enableSearch?: boolean;
     searchPlaceholder?: string;
+    searchSortFn?: MenuV2SearchSortFn;
+    onEnter?: (searchText: string, filteredGroups: MenuV2GroupType[]) => void;
     enableVirtualScrolling?: boolean;
     virtualScrolling?: MenuV2VirtualScrollingConfig;
     open?: boolean;

package/dist/components/MenuV2/menuV2.utils.d.ts

@@ -1,8 +1,16 @@
 import { ReactNode } from 'react';
-import { MenuV2GroupType, MenuV2ItemType } from './menuV2.types';
+import { MenuV2GroupType, MenuV2ItemType, MenuV2SearchSortFn } from './menuV2.types';
 import { MenuV2TokensType, MenuV2ItemStates } from './menuV2.tokens';
 type MenuV2ItemTokens = MenuV2TokensType['group']['item'];
 export declare const getItemSlots: (item: MenuV2ItemType) => [ReactNode?];
+export declare enum MenuV2MatchRank {
+    EXACT = 0,
+    PREFIX = 1,
+    SUBSTRING = 2,
+    NONE = 3
+}
+export declare const getItemMatchRank: (item: MenuV2ItemType, lower: string) => MenuV2MatchRank;
+export declare const defaultSearchSortFn: MenuV2SearchSortFn;
 export declare const filterMenuV2Item: (item: MenuV2ItemType, lower: string) => MenuV2ItemType | null;
 export declare const getMenuItemBackgroundColor: (state: MenuV2ItemStates, itemTokens: MenuV2ItemTokens, item: MenuV2ItemType) => string | undefined;
 export declare const getMenuItemOptionColor: (state: MenuV2ItemStates, itemTokens: MenuV2ItemTokens, item: MenuV2ItemType) => string | undefined;
@@ -22,5 +30,5 @@ export type MenuV2FlatRow = {
     itemIndex: number;
 };
 export declare const flattenMenuV2Groups: (groups: MenuV2GroupType[]) => MenuV2FlatRow[];
-export declare const filterMenuV2Groups: (groups: MenuV2GroupType[], searchText: string) => MenuV2GroupType[];
+export declare const filterMenuV2Groups: (groups: MenuV2GroupType[], searchText: string, searchSortFn?: MenuV2SearchSortFn) => MenuV2GroupType[];
 export {};

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

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

package/dist/components/ModalV2/ModalV2.d.ts

@@ -0,0 +1,22 @@
+declare const ModalV2: import('react').ForwardRefExoticComponent<{
+    isOpen: boolean;
+    isCustom?: boolean;
+    onClose: () => void;
+    title?: string;
+    subtitle?: string;
+    children: import('react').ReactNode;
+    primaryAction?: import('./modalV2.types').ModalV2ButtonAction;
+    secondaryAction?: import('./modalV2.types').ModalV2ButtonAction;
+    showCloseButton?: boolean;
+    showHeader?: boolean;
+    showFooter?: boolean;
+    closeOnBackdropClick?: boolean;
+    customHeader?: import('react').ReactNode;
+    customFooter?: import('react').ReactNode;
+    headerSlot?: import('react').ReactNode;
+    showDivider?: boolean;
+    dimensions?: import('./modalV2.types').ModalV2Dimensions;
+    useDrawerOnMobile?: boolean;
+    skeleton?: import('./modalV2.types').ModalV2BodySkeletonProps;
+} & Omit<import('react').HTMLAttributes<HTMLDivElement>, "style" | "className" | "title" | "children"> & import('react').RefAttributes<HTMLDivElement>>;
+export default ModalV2;

package/dist/components/ModalV2/ModalV2Footer.d.ts

@@ -0,0 +1,10 @@
+import { ModalV2Props } from './modalV2.types';
+import { SkeletonVariant } from '../Skeleton';
+declare const ModalV2Footer: ({ primaryAction, secondaryAction, showDivider, showSkeleton, skeletonVariant, }: {
+    primaryAction?: ModalV2Props["primaryAction"];
+    secondaryAction?: ModalV2Props["secondaryAction"];
+    showDivider?: boolean;
+    showSkeleton?: boolean;
+    skeletonVariant?: SkeletonVariant;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default ModalV2Footer;

package/dist/components/ModalV2/ModalV2Header.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { SkeletonVariant } from '../Skeleton';
+declare const ModalV2Header: ({ title, subtitle, onClose, showCloseButton, headerSlot, showDivider, showSkeleton, skeletonVariant, titleId, subtitleId, }: {
+    title?: string;
+    subtitle?: string;
+    onClose: () => void;
+    showCloseButton?: boolean;
+    headerSlot?: ReactNode;
+    showDivider?: boolean;
+    showSkeleton?: boolean;
+    skeletonVariant?: SkeletonVariant;
+    titleId?: string;
+    subtitleId?: string;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default ModalV2Header;

package/dist/components/ModalV2/ModalV2Skeleton.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { ModalV2SkeletonProps } from './modalV2.types';
+declare const ModalV2Skeleton: FC<ModalV2SkeletonProps>;
+export default ModalV2Skeleton;

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

@@ -0,0 +1,4 @@
+export { default as ModalV2 } from './ModalV2';
+export * from './modalV2.tokens';
+export * from './modalV2.tokens.types';
+export * from './modalV2.types';

package/dist/components/ModalV2/mobileModalV2.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+declare const MobileModalV2: React.ForwardRefExoticComponent<{
+    isOpen: boolean;
+    isCustom?: boolean;
+    onClose: () => void;
+    title?: string;
+    subtitle?: string;
+    children: React.ReactNode;
+    primaryAction?: import('./modalV2.types').ModalV2ButtonAction;
+    secondaryAction?: import('./modalV2.types').ModalV2ButtonAction;
+    showCloseButton?: boolean;
+    showHeader?: boolean;
+    showFooter?: boolean;
+    closeOnBackdropClick?: boolean;
+    customHeader?: React.ReactNode;
+    customFooter?: React.ReactNode;
+    headerSlot?: React.ReactNode;
+    showDivider?: boolean;
+    dimensions?: import('./modalV2.types').ModalV2Dimensions;
+    useDrawerOnMobile?: boolean;
+    skeleton?: import('./modalV2.types').ModalV2BodySkeletonProps;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "style" | "className" | "title" | "children"> & React.RefAttributes<HTMLDivElement>>;
+export default MobileModalV2;

package/dist/components/ModalV2/modalAnimationV2.d.ts

@@ -0,0 +1,3 @@
+export declare const modalBackdropAnimationsV2: (isAnimatingIn: boolean) => import('styled-components').RuleSet<object>;
+export declare const modalContentAnimationsV2: (isAnimatingIn: boolean) => import('styled-components').RuleSet<object>;
+export declare const ANIMATION_DURATION = 300;

package/dist/components/ModalV2/modalV2.dark.tokens.d.ts

@@ -0,0 +1,3 @@
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { ResponsiveModalV2Tokens } from './modalV2.tokens.types';
+export declare const getModalV2DarkToken: (foundationToken: FoundationTokenType) => ResponsiveModalV2Tokens;

package/dist/components/ModalV2/modalV2.light.tokens.d.ts

@@ -0,0 +1,3 @@
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { ResponsiveModalV2Tokens } from './modalV2.tokens.types';
+export declare const getModalV2LightToken: (foundationToken: FoundationTokenType) => ResponsiveModalV2Tokens;

package/dist/components/ModalV2/modalV2.tokens.d.ts

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

package/dist/components/ModalV2/modalV2.tokens.types.d.ts

@@ -0,0 +1,91 @@
+import { CSSObject } from 'styled-components';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+export type ModalV2State = 'default';
+export type ModalV2TokensType = {
+    boxShadow: CSSObject['boxShadow'];
+    borderRadius: CSSObject['borderRadius'];
+    overlay: {
+        backgroundColor: CSSObject['backgroundColor'];
+        offset: CSSObject['offset'];
+    };
+    paddingTop: CSSObject['paddingTop'];
+    paddingRight: CSSObject['paddingRight'];
+    paddingBottom: CSSObject['paddingBottom'];
+    paddingLeft: CSSObject['paddingLeft'];
+    backgroundColor: CSSObject['backgroundColor'];
+    header: {
+        gap: CSSObject['gap'];
+        paddingTop: CSSObject['paddingTop'];
+        paddingRight: CSSObject['paddingRight'];
+        paddingBottom: CSSObject['paddingBottom'];
+        paddingLeft: CSSObject['paddingLeft'];
+        maxHeight: CSSObject['maxHeight'];
+        borderBottom: CSSObject['border'];
+        backgroundColor: CSSObject['backgroundColor'];
+        borderTopLeftRadius: CSSObject['borderTopLeftRadius'];
+        borderTopRightRadius: CSSObject['borderTopRightRadius'];
+        slot: {
+            gap: CSSObject['gap'];
+        };
+        text: {
+            title: {
+                color: CSSObject['color'];
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                lineHeight: CSSObject['lineHeight'];
+            };
+            subtitle: {
+                color: CSSObject['color'];
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                lineHeight: CSSObject['lineHeight'];
+            };
+        };
+    };
+    divider: {
+        borderColor: CSSObject['borderColor'];
+    };
+    skeleton: {
+        header: {
+            gap: CSSObject['gap'];
+            paddingTop: CSSObject['paddingTop'];
+            paddingRight: CSSObject['paddingRight'];
+            paddingBottom: CSSObject['paddingBottom'];
+            paddingLeft: CSSObject['paddingLeft'];
+            borderBottom: CSSObject['border'];
+            width: CSSObject['width'];
+            height: CSSObject['height'];
+            borderRadius: CSSObject['borderRadius'];
+        };
+        body: {
+            gap: CSSObject['gap'];
+            width: CSSObject['width'];
+            height: CSSObject['height'];
+            borderRadius: CSSObject['borderRadius'];
+        };
+    };
+    body: {
+        paddingTop: CSSObject['paddingTop'];
+        paddingRight: CSSObject['paddingRight'];
+        paddingBottom: CSSObject['paddingBottom'];
+        paddingLeft: CSSObject['paddingLeft'];
+        backgroundColor: CSSObject['backgroundColor'];
+    };
+    footer: {
+        paddingTop: CSSObject['paddingTop'];
+        paddingRight: CSSObject['paddingRight'];
+        paddingBottom: CSSObject['paddingBottom'];
+        paddingLeft: CSSObject['paddingLeft'];
+        borderTop: CSSObject['border'];
+        backgroundColor: CSSObject['backgroundColor'];
+        gap: CSSObject['gap'];
+    };
+    closeButton: {
+        color: CSSObject['color'];
+        width: CSSObject['width'];
+        height: CSSObject['height'];
+    };
+};
+export type ResponsiveModalV2Tokens = {
+    [key in keyof BreakpointType]: ModalV2TokensType;
+};

package/dist/components/ModalV2/modalV2.types.d.ts

@@ -0,0 +1,66 @@
+import { SkeletonVariant } from '../Skeleton';
+import { ModalV2TokensType } from './modalV2.tokens.types';
+import { HTMLAttributes, ReactNode } from 'react';
+import { ButtonV2Props } from '../ButtonV2';
+import { CSSObject } from 'styled-components';
+export type HeaderSkeletonConfig = {
+    show: boolean;
+    showDivider: boolean;
+    showCloseButton: boolean;
+};
+export type BodySkeletonConfig = {
+    show: boolean;
+    width: string;
+    height: string | number;
+};
+export type FooterSkeletonConfig = {
+    show: boolean;
+    showDivider: boolean;
+};
+export type ModalV2SkeletonProps = {
+    modalTokens: ModalV2TokensType;
+    headerSkeleton?: HeaderSkeletonConfig;
+    bodySkeleton?: BodySkeletonConfig;
+    footerSkeleton?: FooterSkeletonConfig;
+    skeletonVariant: SkeletonVariant;
+};
+export type ModalV2ButtonAction = Omit<ButtonV2Props, 'buttonGroupPosition'>;
+export type BodySkeletonProps = {
+    show?: boolean;
+    width?: string;
+    height?: string | number;
+};
+export type ModalV2BodySkeletonProps = {
+    show?: boolean;
+    variant?: SkeletonVariant;
+    bodySkeletonProps?: BodySkeletonProps;
+};
+export type ModalV2Dimensions = {
+    width?: CSSObject['width'];
+    height?: CSSObject['height'];
+    minWidth?: CSSObject['minWidth'];
+    maxWidth?: CSSObject['maxWidth'];
+    minHeight?: CSSObject['minHeight'];
+    maxHeight?: CSSObject['maxHeight'];
+};
+export type ModalV2Props = {
+    isOpen: boolean;
+    isCustom?: boolean;
+    onClose: () => void;
+    title?: string;
+    subtitle?: string;
+    children: ReactNode;
+    primaryAction?: ModalV2ButtonAction;
+    secondaryAction?: ModalV2ButtonAction;
+    showCloseButton?: boolean;
+    showHeader?: boolean;
+    showFooter?: boolean;
+    closeOnBackdropClick?: boolean;
+    customHeader?: ReactNode;
+    customFooter?: ReactNode;
+    headerSlot?: ReactNode;
+    showDivider?: boolean;
+    dimensions?: ModalV2Dimensions;
+    useDrawerOnMobile?: boolean;
+    skeleton?: ModalV2BodySkeletonProps;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title' | 'className' | 'style'>;

package/dist/components/MultiSelect/MultiSelect.d.ts

@@ -1,3 +1,3 @@
 import { MultiSelectProps } from './types';
-declare const MultiSelect: ({ selectedValues, onChange, items, label, sublabel, disabled, helpIconHintText, name, required, variant, selectionTagType, slot, hintText, placeholder, size, enableSearch, searchPlaceholder, enableSelectAll, selectAllText, maxSelections, customTrigger, useDrawerOnMobile, minMenuWidth, maxMenuWidth, maxMenuHeight, alignment, side, sideOffset, alignOffset, inline, error, errorMessage, showActionButtons, primaryAction, secondaryAction, showItemDividers, showHeaderBorder, fullWidth, enableVirtualization, virtualListItemHeight, virtualListOverscan, itemsToRender, onEndReached, endReachedThreshold, hasMore, loadingComponent, skeleton, maxTriggerWidth, minTriggerWidth, allowCustomValue, customValueLabel, showClearButton, onClearAllClick, onOpenChange, multiSelectGroupPosition, ...rest }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
+declare const MultiSelect: ({ selectedValues, onChange, items, label, sublabel, disabled, helpIconHintText, name, required, variant, selectionTagType, slot, hintText, placeholder, size, enableSearch, searchPlaceholder, enableSelectAll, selectAllText, maxSelections, customTrigger, useDrawerOnMobile, minMenuWidth, maxMenuWidth, maxMenuHeight, alignment, side, sideOffset, alignOffset, inline, error, errorMessage, showActionButtons, primaryAction, secondaryAction, showItemDividers, showHeaderBorder, fullWidth, enableVirtualization, virtualListItemHeight, virtualListOverscan, itemsToRender, onEndReached, endReachedThreshold, hasMore, loadingComponent, skeleton, maxTriggerWidth, minTriggerWidth, allowCustomValue, customValueLabel, showClearButton, onClearAllClick, onOpenChange, multiSelectGroupPosition, menuFooter, ...rest }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
 export default MultiSelect;

package/dist/components/MultiSelect/MultiSelectMenu.d.ts

@@ -1,3 +1,3 @@
 import { MultiSelectMenuProps } from './types';
-declare const MultiSelectMenu: ({ items, selected, onSelect, trigger, minMenuWidth, maxMenuWidth, maxMenuHeight, disabled, enableSearch, searchPlaceholder, enableSelectAll, selectAllText, maxSelections, onSelectAll, alignment, side, sideOffset, alignOffset, collisionBoundary, open, onOpenChange, showActionButtons, primaryAction, secondaryAction, enableVirtualization, virtualListItemHeight, virtualListOverscan, onEndReached, endReachedThreshold, hasMore, skeleton, size, variant, allowCustomValue, customValueLabel, menuId, }: MultiSelectMenuProps) => import("react/jsx-runtime").JSX.Element;
+declare const MultiSelectMenu: ({ items, selected, onSelect, trigger, minMenuWidth, maxMenuWidth, maxMenuHeight, disabled, enableSearch, searchPlaceholder, enableSelectAll, selectAllText, maxSelections, onSelectAll, alignment, side, sideOffset, alignOffset, collisionBoundary, open, onOpenChange, showActionButtons, primaryAction, secondaryAction, enableVirtualization, virtualListItemHeight, virtualListOverscan, onEndReached, endReachedThreshold, hasMore, skeleton, size, variant, allowCustomValue, customValueLabel, menuId, menuFooter, }: MultiSelectMenuProps) => import("react/jsx-runtime").JSX.Element;
 export default MultiSelectMenu;

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

@@ -1,4 +1,6 @@
+/** @deprecated Will be deprecated soon. Use MultiSelectV2 instead. */
 export { default as MultiSelect } from './MultiSelect';
+/** @deprecated Will be deprecated soon. Use MultiSelectV2 instead. */
 export { default as MultiSelectTrigger } from './MultiSelectTrigger';
 export * from './multiSelect.tokens';
 export * from './types';

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

@@ -126,6 +126,7 @@ export type MultiSelectProps = {
     showClearButton?: boolean;
     onClearAllClick?: () => void;
     multiSelectGroupPosition?: 'center' | 'left' | 'right';
+    menuFooter?: React.ReactNode;
 } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'slot' | 'onChange'>;
 export type MultiSelectMenuProps = {
     items: MultiSelectMenuGroupType[];
@@ -176,4 +177,5 @@ export type MultiSelectMenuProps = {
     customValueLabel?: string;
     menuId?: string;
     collisionBoundary?: Element | null | Array<Element | null>;
+    menuFooter?: React.ReactNode;
 };