@juspay/blend-design-system 0.0.36 → 0.0.37-beta.1

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

@@ -0,0 +1,78 @@
+import { Dispatch, MutableRefObject, SetStateAction } from 'react';
+import { CodeEditorV2Variant } from './codeEditorV2.types';
+import { CodeEditorV2Tokens } from './codeEditorV2.tokens';
+import { CSSObject } from 'styled-components';
+import type * as Monaco from 'monaco-editor';
+/** Delay before focusing the editor after mount (ms). */
+export declare const EDITOR_FOCUS_DELAY_MS = 100;
+/** How long the “copied” state stays visible after copy (ms). */
+export declare const COPY_FEEDBACK_RESET_MS = 2000;
+/** Minimum Monaco vertical/horizontal scrollbar thickness (px). */
+export declare const MIN_SCROLLBAR_SIZE = 8;
+/** Ref must be stable across renders (e.g. from `useRef`) so timeout ids persist. */
+export type CopyFeedbackTimeoutRef = MutableRefObject<ReturnType<typeof setTimeout> | null>;
+/**
+ * Writes `code` to the clipboard, sets copied feedback to true, and schedules
+ * resetting it after `resetMs`. Clears any previous reset timeout on the same ref.
+ */
+export declare const copyToClipboardWithTemporaryFeedback: (code: string, setIsCopied: Dispatch<SetStateAction<boolean>>, feedbackTimeoutRef: CopyFeedbackTimeoutRef, resetMs?: number) => void;
+export declare const shouldShowLineNumbers: (showLineNumbers: boolean | undefined, variant: CodeEditorV2Variant) => boolean;
+/** True when Monaco should render the diff editor (either explicit `diff` or `variant="diff"`). */
+export declare const isDiffEditorMode: (diff: boolean | undefined, variant: CodeEditorV2Variant) => boolean;
+/**
+ * Calculates container styles with min/max height
+ */
+export declare const getContainerStyles: (minHeight?: string | number, maxHeight?: string | number) => React.CSSProperties;
+export declare const toCssValue: (value?: string | number) => string | undefined;
+export declare const toNumericValue: (value: string | number | undefined, fallback?: number) => number;
+export type EditorMetrics = {
+    fontSize: number;
+    lineHeight: number;
+    verticalPadding: number;
+    codePaddingLeft: number;
+    gutterWidth: number;
+    lineDecorationsWidth: number;
+    lineNumbersMinChars: number;
+    scrollbarSize: number;
+};
+export declare function getEditorMetrics(tokens: CodeEditorV2Tokens, showLineNumbers: boolean): EditorMetrics;
+export declare function getContainerDimensions(height: CSSObject['height'] | undefined, minHeight: CSSObject['minHeight'], maxHeight?: CSSObject['maxHeight']): {
+    minHeight?: CSSObject['minHeight'];
+    maxHeight?: CSSObject['maxHeight'];
+    height?: CSSObject['height'];
+};
+export declare function getPlaceholderPosition(metrics: EditorMetrics, showLineNumbers: boolean): {
+    top: string;
+    left: string;
+};
+export declare function configureLanguageDefaults(monaco: typeof import('monaco-editor')): void;
+/** Options applied on editor mount (full set) */
+export declare function getMountEditorOptions(metrics: EditorMetrics, tokens: CodeEditorV2Tokens, showLineNumbers: boolean, readOnly: boolean, disabled: boolean): Monaco.editor.IStandaloneEditorConstructionOptions;
+/** Options applied when props change (subset) */
+export declare function getUpdateEditorOptions(metrics: EditorMetrics, showLineNumbers: boolean, readOnly: boolean, disabled: boolean): Monaco.editor.IEditorOptions;
+export declare function getDiffEditorOptions(metrics: EditorMetrics, tokens: CodeEditorV2Tokens, showLineNumbers: boolean, renderSideBySide: boolean, readOnly: boolean, disabled: boolean, isDiffUnchangedCollapsed: boolean, diffContextLines: number, diffExpandChunk: number): Monaco.editor.IDiffEditorConstructionOptions;
+export declare function getInitialEditorOptions(metrics: EditorMetrics, tokens: CodeEditorV2Tokens, showLineNumbers: boolean, readOnly: boolean, disabled: boolean): Monaco.editor.IStandaloneEditorConstructionOptions;
+export declare const backupColor: {
+    body: {
+        backgroundColor: string;
+        gutter: {
+            color: string;
+            backgroundColor: {
+                added: string;
+                removed: string;
+                unchanged: string;
+            };
+            borderColor: {
+                added: string;
+                removed: string;
+                unchanged: string;
+            };
+        };
+        highlightedLine: {
+            backgroundColor: string;
+        };
+    };
+    header: {
+        backgroundColor: string;
+    };
+};

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

@@ -16,6 +16,8 @@ export type TableBodyProps<T extends Record<string, unknown>> = {
     enableRowSelection?: boolean;
     rowActions?: RowActionsConfig<T>;
     columnFreeze?: number;
+    /** Freeze last N columns on the right side (sticky right). */
+    columnFreezeRight?: number;
     /** Measured pixel widths of frozen columns (from header ResizeObserver). Used for sticky left offset. */
     measuredFrozenWidths?: number[];
     mobileConfig?: MobileDataTableConfig;

package/dist/components/DataTable/TableHeader/FilterComponents.d.ts

@@ -11,6 +11,11 @@ type FilterComponentsProps = {
     filterState: FilterState;
     sortState: SortState;
     onColumnFilter?: ColumnFilterHandler;
+    onRenameHeader?: () => void;
+    onOperations?: () => void;
+    onInsertLeft?: () => void;
+    onInsertRight?: () => void;
+    onDeleteColumn?: () => void;
     onPopoverClose?: () => void;
     onFilterApplied?: () => void;
 };
@@ -20,6 +25,8 @@ export declare const SortOptions: React.FC<{
     tableToken: TableTokenType;
     sortHandlers: SortHandlers;
     sortState: SortState;
+    nestedSortOpen: boolean;
+    setNestedSortOpen: (open: boolean) => void;
     onFilterApplied?: () => void;
     onPopoverClose?: () => void;
 }>;

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

@@ -31,6 +31,7 @@ export type TableHeaderProps<T extends Record<string, unknown>> = {
     rowActions?: RowActionsConfig<T>;
     data?: T[];
     columnFreeze?: number;
+    columnFreezeRight?: number;
     mobileConfig?: MobileDataTableConfig;
     mobileOverflowColumns?: ColumnDefinition<T>[];
     onMobileOverflowClick?: (row: T) => void;
@@ -54,6 +55,10 @@ export type TableHeaderProps<T extends Record<string, unknown>> = {
         operator?: string;
     }>;
     onHeaderChange?: (field: keyof T, newHeader: string) => void;
+    onOperations?: (field: keyof T) => void;
+    onInsertLeft?: (field: keyof T) => void;
+    onInsertRight?: (field: keyof T) => void;
+    onDeleteColumn?: (field: keyof T) => void;
     getColumnWidth: (column: ColumnDefinition<T>, index: number) => React.CSSProperties;
     /** Measured pixel widths of frozen columns (from ResizeObserver). Used for sticky left offset. */
     measuredFrozenWidths?: number[];

package/dist/components/DataTable/TableHeader/utils.d.ts

@@ -18,6 +18,8 @@ export declare const filterItemsBySearch: (items: Array<{
 }>;
 export declare const getPopoverAlignment: (index: number, totalColumns: number) => "start" | "center" | "end";
 export declare function getFrozenLeftOffset(index: number, _columnFreeze: number, enableRowExpansion: boolean, enableRowSelection: boolean, visibleColumns: ColumnDefinition<Record<string, unknown>>[], getColumnWidth: (column: ColumnDefinition<Record<string, unknown>>, i: number) => React.CSSProperties, measuredFrozenWidths?: number[]): number;
+export declare function getFrozenRightOffset(index: number, columnFreezeRight: number, visibleColumns: ColumnDefinition<Record<string, unknown>>[], getColumnWidth: (column: ColumnDefinition<Record<string, unknown>>, i: number) => React.CSSProperties, rightStickyOffsetPx: number): number;
+export declare const getFrozenRightColumnStyles: (index: number, columnFreezeRight: number, visibleColumns: ColumnDefinition<Record<string, unknown>>[], getColumnWidth: (column: ColumnDefinition<Record<string, unknown>>, index: number) => React.CSSProperties, backgroundColor: string, rightStickyOffsetPx: number) => {};
 export declare const getFrozenColumnStyles: (index: number, columnFreeze: number, enableRowExpansion: boolean, enableRowSelection: boolean, visibleColumns: ColumnDefinition<Record<string, unknown>>[], getColumnWidth: (column: ColumnDefinition<Record<string, unknown>>, index: number) => React.CSSProperties, backgroundColor: string, measuredFrozenWidths?: number[]) => {
     padding: string;
 } | {

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

@@ -289,6 +289,8 @@ export type DataTableProps<T extends Record<string, unknown>> = {
     onFilterChange?: (filters: ColumnFilter[]) => void;
     onAdvancedFiltersChange?: (filters: unknown[]) => void;
     columnFreeze?: number;
+    /** Freeze last N columns on the right side (sticky right). */
+    columnFreezeRight?: number;
     enableColumnManager?: boolean;
     enableColumnReordering?: boolean;
     onColumnReorder?: (columns: ColumnDefinition<T>[]) => void;
@@ -340,6 +342,10 @@ export type DataTableProps<T extends Record<string, unknown>> = {
     onRowSelectionChange?: (selectedRowIds: string[], isSelected: boolean, rowId: string, rowData: T) => void;
     bulkActions?: BulkActionsConfig;
     rowActions?: RowActionsConfig<T>;
+    onOperations?: (field: keyof T) => void;
+    onInsertLeft?: (field: keyof T) => void;
+    onInsertRight?: (field: keyof T) => void;
+    onDeleteColumn?: (field: keyof T) => void;
     getRowStyle?: (row: T, index: number) => React.CSSProperties;
     tableBodyHeight?: string | number;
     mobileColumnsToShow?: number;

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

@@ -248,6 +248,7 @@ export type DateRangePickerProps = {
     onChange?: (range: DateRange) => void;
     onPresetSelection?: (data: PresetSelectionData) => void;
     showDateTimePicker?: boolean;
+    showDateInput?: boolean;
     showPresets?: boolean;
     customPresets?: PresetsConfig;
     placeholder?: string;

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

@@ -0,0 +1,3 @@
+export { default as DrawerV2 } from './DrawerV2';
+export { DrawerV2Body, DrawerV2Close, DrawerV2Content, DrawerV2Description, DrawerV2Footer, DrawerV2Header, DrawerV2NestedRoot, DrawerV2Overlay, DrawerV2Portal, DrawerV2Title, DrawerV2Trigger, } from './DrawerV2';
+export * from './types';

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

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+import { Drawer as VaulDrawer } from 'vaul';
+export type DrawerV2RootRef = unknown;
+export type DrawerV2RootProps = React.ComponentPropsWithoutRef<typeof VaulDrawer.Root>;
+export type DrawerV2NestedRootRef = unknown;
+export type DrawerV2NestedRootProps = React.ComponentPropsWithoutRef<typeof VaulDrawer.NestedRoot>;
+export type DrawerV2TriggerRef = React.ComponentRef<typeof VaulDrawer.Trigger>;
+export type DrawerV2TriggerProps = React.ComponentPropsWithoutRef<typeof VaulDrawer.Trigger>;
+export type DrawerV2PortalRef = unknown;
+export type DrawerV2PortalProps = React.ComponentPropsWithoutRef<typeof VaulDrawer.Portal>;
+export type DrawerV2OverlayRef = React.ElementRef<typeof VaulDrawer.Overlay>;
+export type DrawerV2OverlayProps = React.ComponentPropsWithoutRef<typeof VaulDrawer.Overlay>;
+export type DrawerV2ContentRef = React.ComponentRef<typeof VaulDrawer.Content>;
+export type DrawerV2ContentProps = React.ComponentPropsWithoutRef<typeof VaulDrawer.Content>;
+export type DrawerV2TitleRef = React.ComponentRef<typeof VaulDrawer.Title>;
+export type DrawerV2TitleProps = React.ComponentPropsWithoutRef<typeof VaulDrawer.Title>;
+export type DrawerV2DescriptionRef = React.ComponentRef<typeof VaulDrawer.Description>;
+export type DrawerV2DescriptionProps = React.ComponentPropsWithoutRef<typeof VaulDrawer.Description>;
+export type DrawerV2CloseRef = React.ComponentRef<typeof VaulDrawer.Close>;
+export type DrawerV2CloseProps = React.ComponentPropsWithoutRef<typeof VaulDrawer.Close>;
+export type DrawerV2HeaderRef = HTMLDivElement;
+export type DrawerV2HeaderProps = React.HTMLAttributes<HTMLDivElement>;
+export type DrawerV2BodyRef = HTMLDivElement;
+export type DrawerV2BodyProps = React.HTMLAttributes<HTMLDivElement>;
+export type DrawerV2FooterRef = HTMLDivElement;
+export type DrawerV2FooterProps = React.HTMLAttributes<HTMLDivElement>;

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

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import { SkeletonVariant } from '../Skeleton';
 import { TooltipSide, TooltipAlign, TooltipSize } from '../Tooltip/types';
 export declare enum MenuAlignment {
@@ -38,7 +39,7 @@ export type MenuProps = {
     alignOffset?: number;
     collisonBoundaryRef?: Element | null | Array<Element | null>;
     skeleton?: MenuSkeletonProps;
-};
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'slot'>;
 export type SubMenuVirtualScrollProps = {
     enableVirtualScrolling?: boolean;
     virtualItemHeight?: number;

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

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { MenuV2Props } from './menuV2.types';
+declare const MenuV2: React.ForwardRefExoticComponent<MenuV2Props & React.RefAttributes<HTMLDivElement>>;
+export default MenuV2;

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

@@ -0,0 +1,29 @@
+import { FocusEvent, KeyboardEvent, default as React } from 'react';
+import { CSSObject } from 'styled-components';
+import { MenuV2GroupType, MenuV2VirtualScrollingConfig } from './menuV2.types';
+import { MenuV2TokensType } from './menuV2.tokens';
+export type MenuV2ContentProps = {
+    filteredItems: MenuV2GroupType[];
+    menuTokens: MenuV2TokensType;
+    enableSearch: boolean;
+    searchPlaceholder: string;
+    searchText: string;
+    onSearchTextChange: (value: string) => void;
+    maxHeight?: CSSObject['maxHeight'];
+    minHeight?: CSSObject['minHeight'];
+    minWidth?: CSSObject['minWidth'];
+    maxWidth?: CSSObject['maxWidth'];
+    enableVirtualScrolling?: boolean;
+    virtualScrolling?: MenuV2VirtualScrollingConfig;
+    alignment?: 'start' | 'center' | 'end';
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    sideOffset?: number;
+    alignOffset?: number;
+    collisionBoundaryRef?: HTMLElement | null | (HTMLElement | null)[];
+    onInteractOutside?: (e: unknown) => void;
+    onPointerDownOutside?: (e: unknown) => void;
+    onFocusCapture?: (e: FocusEvent<HTMLDivElement>) => void;
+    onKeyDown?: (e: KeyboardEvent<HTMLDivElement>) => void;
+};
+declare const MenuV2Content: React.ForwardRefExoticComponent<MenuV2ContentProps & React.RefAttributes<HTMLDivElement>>;
+export default MenuV2Content;

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

@@ -0,0 +1,9 @@
+import { MenuV2ItemType } from './menuV2.types';
+import { MenuV2TokensType } from './menuV2.tokens';
+type MenuV2ItemProps = {
+    item: MenuV2ItemType;
+    index: number;
+    itemTokens: MenuV2TokensType['group']['item'];
+};
+declare const MenuV2Item: import('react').ForwardRefExoticComponent<MenuV2ItemProps & import('react').RefAttributes<HTMLDivElement>>;
+export default MenuV2Item;

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

@@ -0,0 +1,12 @@
+import { CSSObject } from 'styled-components';
+import { MenuV2ItemType } from './menuV2.types';
+type MenuV2SubMenuProps = {
+    item: MenuV2ItemType;
+    index: number;
+    maxHeight?: CSSObject['maxHeight'];
+};
+declare const MenuV2SubMenu: {
+    ({ item, index, maxHeight }: MenuV2SubMenuProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default MenuV2SubMenu;

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

@@ -0,0 +1,7 @@
+export { default as MenuV2 } from './MenuV2';
+export { default as MenuV2Content } from './MenuV2Content';
+export { default as MenuV2Item } from './MenuV2Item';
+export { default as MenuV2SubMenu } from './MenuV2SubMenu';
+export * from './menuV2.types';
+export * from './menuV2.tokens';
+export * from './menuV2.utils';

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

@@ -0,0 +1,2 @@
+export declare const menuV2ContentAnimations = "\n  transform-origin: var(--radix-dropdown-menu-content-transform-origin);\n\n  &[data-side='bottom'][data-state='open'] {\n    animation: menuV2SlideInFromTop 400ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  &[data-side='bottom'][data-state='closed'] {\n    animation: menuV2SlideOutToTop 300ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n\n  &[data-side='top'][data-state='open'] {\n    animation: menuV2SlideInFromBottom 400ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  &[data-side='top'][data-state='closed'] {\n    animation: menuV2SlideOutToBottom 300ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n\n  &[data-side='right'][data-state='open'] {\n    animation: menuV2SlideInFromLeft 400ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  &[data-side='right'][data-state='closed'] {\n    animation: menuV2SlideOutToLeft 300ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n\n  &[data-side='left'][data-state='open'] {\n    animation: menuV2SlideInFromRight 400ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  &[data-side='left'][data-state='closed'] {\n    animation: menuV2SlideOutToRight 300ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n\n  @keyframes menuV2SlideInFromTop {\n    from { opacity: 0; transform: translateY(-8px) scale(0.95); }\n    to { opacity: 1; transform: translateY(0) scale(1); }\n  }\n  @keyframes menuV2SlideOutToTop {\n    from { opacity: 1; transform: translateY(0) scale(1); }\n    to { opacity: 0; transform: translateY(-8px) scale(0.95); }\n  }\n  @keyframes menuV2SlideInFromBottom {\n    from { opacity: 0; transform: translateY(8px) scale(0.95); }\n    to { opacity: 1; transform: translateY(0) scale(1); }\n  }\n  @keyframes menuV2SlideOutToBottom {\n    from { opacity: 1; transform: translateY(0) scale(1); }\n    to { opacity: 0; transform: translateY(8px) scale(0.95); }\n  }\n  @keyframes menuV2SlideInFromLeft {\n    from { opacity: 0; transform: translateX(-8px) scale(0.95); }\n    to { opacity: 1; transform: translateX(0) scale(1); }\n  }\n  @keyframes menuV2SlideOutToLeft {\n    from { opacity: 1; transform: translateX(0) scale(1); }\n    to { opacity: 0; transform: translateX(-8px) scale(0.95); }\n  }\n  @keyframes menuV2SlideInFromRight {\n    from { opacity: 0; transform: translateX(8px) scale(0.95); }\n    to { opacity: 1; transform: translateX(0) scale(1); }\n  }\n  @keyframes menuV2SlideOutToRight {\n    from { opacity: 1; transform: translateX(0) scale(1); }\n    to { opacity: 0; transform: translateX(8px) scale(0.95); }\n  }\n";
+export declare const menuV2SubmenuContentAnimations = "\n  transform-origin: var(--radix-dropdown-menu-content-transform-origin);\n\n  &[data-side='right'][data-state='open'] {\n    animation: menuV2SlideInFromLeft 400ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  &[data-side='right'][data-state='closed'] {\n    animation: menuV2SlideOutToLeft 300ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  &[data-side='left'][data-state='open'] {\n    animation: menuV2SlideInFromRight 400ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  &[data-side='left'][data-state='closed'] {\n    animation: menuV2SlideOutToRight 300ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n";

package/dist/components/MenuV2/menuV2.dark.tokens.d.ts

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

package/dist/components/MenuV2/menuV2.light.tokens.d.ts

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

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

@@ -0,0 +1,92 @@
+import { CSSObject } from 'styled-components';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+import { Theme } from '../../context/theme.enum';
+import { SelectV2ItemStates } from '../SelectV2/selectV2.tokenStates';
+import { MenuV2ItemActionType, MenuV2ItemVariant } from './menuV2.types';
+export type { SelectV2ItemStates as MenuV2ItemStates } from '../SelectV2/selectV2.tokenStates';
+type StateToken<T> = Record<SelectV2ItemStates, T>;
+type MenuV2VariantToken<T> = {
+    [MenuV2ItemVariant.DEFAULT]: T;
+    [MenuV2ItemVariant.ACTION]: {
+        [MenuV2ItemActionType.PRIMARY]: T;
+        [MenuV2ItemActionType.DANGER]: T;
+    };
+};
+export type MenuV2TokensType = {
+    backgroundColor: CSSObject['backgroundColor'];
+    border: CSSObject['border'];
+    borderRadius: CSSObject['borderRadius'];
+    boxShadow: CSSObject['boxShadow'];
+    zIndex: CSSObject['zIndex'];
+    minWidth: CSSObject['minWidth'];
+    maxWidth: CSSObject['maxWidth'];
+    paddingTop: CSSObject['paddingTop'];
+    paddingRight: CSSObject['paddingRight'];
+    paddingBottom: CSSObject['paddingBottom'];
+    paddingLeft: CSSObject['paddingLeft'];
+    searchIcon: {
+        width: CSSObject['width'];
+    };
+    group: {
+        label: {
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            lineHeight: CSSObject['lineHeight'];
+            color: CSSObject['color'];
+            paddingTop: CSSObject['paddingTop'];
+            paddingRight: CSSObject['paddingRight'];
+            paddingBottom: CSSObject['paddingBottom'];
+            paddingLeft: CSSObject['paddingLeft'];
+            marginTop: CSSObject['marginTop'];
+            marginRight: CSSObject['marginRight'];
+            marginBottom: CSSObject['marginBottom'];
+            marginLeft: CSSObject['marginLeft'];
+        };
+        item: {
+            paddingTop: CSSObject['paddingTop'];
+            paddingRight: CSSObject['paddingRight'];
+            paddingBottom: CSSObject['paddingBottom'];
+            paddingLeft: CSSObject['paddingLeft'];
+            marginTop: CSSObject['marginTop'];
+            marginRight: CSSObject['marginRight'];
+            marginBottom: CSSObject['marginBottom'];
+            marginLeft: CSSObject['marginLeft'];
+            gap: CSSObject['gap'];
+            borderRadius: CSSObject['borderRadius'];
+            backgroundColor: MenuV2VariantToken<StateToken<CSSObject['backgroundColor']>>;
+            text: {
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                lineHeight: CSSObject['lineHeight'];
+                color: MenuV2VariantToken<StateToken<CSSObject['color']>>;
+                subText: {
+                    fontSize: CSSObject['fontSize'];
+                    fontWeight: CSSObject['fontWeight'];
+                    lineHeight: CSSObject['lineHeight'];
+                    color: MenuV2VariantToken<StateToken<CSSObject['color']>>;
+                };
+                leftSlot: {
+                    maxWidth: CSSObject['maxWidth'];
+                    maxHeight: CSSObject['maxHeight'];
+                };
+                rightChevron: {
+                    color: CSSObject['color'];
+                    width: CSSObject['width'];
+                };
+            };
+        };
+    };
+    separator: {
+        color: CSSObject['color'];
+        height: CSSObject['height'];
+        marginTop: CSSObject['marginTop'];
+        marginRight: CSSObject['marginRight'];
+        marginBottom: CSSObject['marginBottom'];
+        marginLeft: CSSObject['marginLeft'];
+    };
+};
+export type ResponsiveMenuV2TokensType = {
+    [key in keyof BreakpointType]: MenuV2TokensType;
+};
+export declare const getMenuV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveMenuV2TokensType;

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

@@ -0,0 +1,86 @@
+import { ReactNode } from 'react';
+import { TooltipSide, TooltipAlign, TooltipSize } from '../Tooltip/types';
+import { CSSObject } from 'styled-components';
+export declare enum MenuV2Alignment {
+    START = "start",
+    CENTER = "center",
+    END = "end"
+}
+export declare enum MenuV2Side {
+    TOP = "top",
+    LEFT = "left",
+    RIGHT = "right",
+    BOTTOM = "bottom"
+}
+export declare enum MenuV2ItemVariant {
+    DEFAULT = "default",
+    ACTION = "action"
+}
+export declare enum MenuV2ItemActionType {
+    PRIMARY = "primary",
+    DANGER = "danger"
+}
+export type MenuV2ItemTooltipProps = {
+    side?: TooltipSide;
+    align?: TooltipAlign;
+    size?: TooltipSize;
+    showArrow?: boolean;
+    delayDuration?: number;
+    offset?: number;
+};
+export type MenuV2ItemLabel = {
+    text: string;
+    leftSlot?: React.ReactElement;
+};
+export type MenuV2ItemType = {
+    id?: string;
+    label: MenuV2ItemLabel;
+    subLabel?: string;
+    variant?: MenuV2ItemVariant;
+    actionType?: MenuV2ItemActionType;
+    disabled?: boolean;
+    onClick?: () => void;
+    subMenu?: MenuV2ItemType[];
+    enableSubMenuSearch?: boolean;
+    subMenuSearchPlaceholder?: string;
+    tooltip?: string | ReactNode;
+    tooltipProps?: MenuV2ItemTooltipProps;
+};
+export type MenuV2GroupType = {
+    id?: string;
+    label?: string;
+    items: MenuV2ItemType[];
+    showSeparator?: boolean;
+};
+export type MenuV2VirtualScrollingConfig = {
+    /** Estimated height per item (px). Used by useVirtualizer. */
+    itemHeight?: number;
+    /** Number of items to render outside visible area. */
+    overscan?: number;
+    /** Min number of items to enable virtual scrolling. Default 30. */
+    threshold?: number;
+};
+export type MenuV2Dimensions = {
+    minWidth?: CSSObject['minWidth'];
+    maxWidth?: CSSObject['maxWidth'];
+    minHeight?: CSSObject['minHeight'];
+    maxHeight?: CSSObject['maxHeight'];
+};
+export type MenuV2Props = {
+    trigger: React.ReactElement;
+    items?: MenuV2GroupType[];
+    dimensions?: MenuV2Dimensions;
+    enableSearch?: boolean;
+    searchPlaceholder?: string;
+    enableVirtualScrolling?: boolean;
+    virtualScrolling?: MenuV2VirtualScrollingConfig;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    asModal?: boolean;
+    alignment?: MenuV2Alignment;
+    side?: MenuV2Side;
+    sideOffset?: number;
+    alignOffset?: number;
+    collisionBoundaryRef?: HTMLElement | null | (HTMLElement | null)[];
+    triggerProps?: Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'style'>;
+};

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

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+import { MenuV2GroupType, MenuV2ItemType } from './menuV2.types';
+import { MenuV2TokensType, MenuV2ItemStates } from './menuV2.tokens';
+type MenuV2ItemTokens = MenuV2TokensType['group']['item'];
+export declare const getItemSlots: (item: MenuV2ItemType) => [ReactNode?];
+export declare const filterMenuItem: (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;
+export declare const getMenuItemDescriptionColor: (state: MenuV2ItemStates, itemTokens: MenuV2ItemTokens, item: MenuV2ItemType) => string | undefined;
+export type MenuV2FlatRow = {
+    type: 'label';
+    id: string;
+    label: string;
+} | {
+    type: 'separator';
+    id: string;
+} | {
+    type: 'item';
+    id: string;
+    item: MenuV2ItemType;
+    groupId: number;
+    itemIndex: number;
+};
+export declare const flattenMenuV2Groups: (groups: MenuV2GroupType[]) => MenuV2FlatRow[];
+export declare const filterMenuGroups: (groups: MenuV2GroupType[], searchText: string) => MenuV2GroupType[];
+export {};

package/dist/components/Modal/modal.tokens.d.ts

@@ -34,6 +34,9 @@ export type ModalState = 'default';
 export type ModalTokensType = {
     boxShadow: CSSObject['boxShadow'];
     borderRadius: CSSObject['borderRadius'];
+    overlay: {
+        backgroundColor: CSSObject['backgroundColor'];
+    };
     header: {
         padding: {
             x: CSSObject['padding'];

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, onBlur, onFocus, 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, }: 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, ...rest }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
 export default MultiSelect;

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

@@ -15,13 +15,13 @@ export type MultiSelectTriggerProps = {
     selectionTagType: MultiSelectSelectionTagType;
     valueLabelMap: Record<string, string>;
     open: boolean;
-    onClick?: () => void;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
     multiSelectTokens: MultiSelectTokensType;
     inline?: boolean;
     error?: boolean;
     disabled?: boolean;
     maxTriggerWidth?: number;
     minTriggerWidth?: number;
-};
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'slot' | 'onClick' | 'name' | 'disabled' | 'onChange'>;
 declare const MultiSelectTrigger: ({ selectedValues, slot, variant, size, isSmallScreen, onChange, name, label, placeholder, required, open, onClick, multiSelectTokens, inline, error, maxTriggerWidth, minTriggerWidth, }: MultiSelectTriggerProps) => import("react/jsx-runtime").JSX.Element;
 export default MultiSelectTrigger;

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

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import { SkeletonVariant } from '../Skeleton';
 import { TooltipSide, TooltipAlign, TooltipSize } from '../Tooltip/types';
 export declare enum MultiSelectVariant {
@@ -92,8 +93,6 @@ export type MultiSelectProps = {
     sideOffset?: number;
     alignOffset?: number;
     inline?: boolean;
-    onBlur?: () => void;
-    onFocus?: () => void;
     onOpenChange?: (open: boolean) => void;
     error?: boolean;
     errorMessage?: string;
@@ -127,7 +126,7 @@ export type MultiSelectProps = {
     showClearButton?: boolean;
     onClearAllClick?: () => void;
     multiSelectGroupPosition?: 'center' | 'left' | 'right';
-};
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'slot' | 'onChange'>;
 export type MultiSelectMenuProps = {
     items: MultiSelectMenuGroupType[];
     selected: string[];

package/dist/components/ProgressBarV2/CircularProgressBarV2.d.ts

@@ -0,0 +1,2 @@
+import { CircularProgressBarV2Props } from './progressBarV2.types';
+export declare const CircularProgressBarV2: ({ value, size, appearance, tokens, showLabel, ariaLabel, ariaLabelledby, min, max, }: CircularProgressBarV2Props) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ProgressBarV2/LinearProgressBarV2.d.ts

@@ -0,0 +1,2 @@
+import { LinearProgressBarV2Props } from './progressBarV2.types';
+export declare const LinearProgressBarV2: ({ value, size, appearance, tokens, showLabel, ariaLabel, ariaLabelledby, min, max, }: LinearProgressBarV2Props) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ProgressBarV2/ProgressBarV2.d.ts

@@ -0,0 +1,11 @@
+import { ProgressBarV2Appearance, ProgressBarV2Size, ProgressBarV2Variant } from './progressBarV2.types';
+declare const ProgressBarV2: import('react').ForwardRefExoticComponent<{
+    value: number;
+    size?: ProgressBarV2Size;
+    variant?: ProgressBarV2Variant;
+    appearance?: ProgressBarV2Appearance;
+    showLabel?: boolean;
+    min?: number;
+    max?: number;
+} & Omit<import('react').HTMLAttributes<HTMLDivElement>, "style" | "className" | "children"> & import('react').RefAttributes<HTMLDivElement>>;
+export default ProgressBarV2;

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

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

package/dist/components/ProgressBarV2/progressBarV2.dark.tokens.d.ts

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

package/dist/components/ProgressBarV2/progressBarV2.light.tokens.d.ts

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