@juspay/blend-design-system 0.0.37-beta.0 → 0.0.37-beta.2

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/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/InputsV2/MultiValueInputV2/MultiValueInputV2.d.ts

@@ -0,0 +1,27 @@
+import { TagShape, TagSize, TagVariant } from '../../Tags';
+import { InputSizeV2 } from '../inputV2.types';
+declare const MultiValueInputV2: import('react').ForwardRefExoticComponent<{
+    value?: string;
+    label?: string;
+    sublabel?: string;
+    helpIconHintText?: string;
+    error?: boolean;
+    errorMessage?: string;
+    hintText?: string;
+    disabled?: boolean;
+    tags?: {
+        value: string[];
+        size: TagSize;
+        shape: TagShape;
+        variant: TagVariant;
+    };
+    onChange?: (value: string) => void;
+    onTagAdd?: (tag: string) => void;
+    onTagRemove?: (tag: string) => void;
+    size?: InputSizeV2;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    leftSlot?: React.ReactNode;
+    rightSlot?: React.ReactNode;
+} & Omit<import('react').InputHTMLAttributes<HTMLInputElement>, "size" | "style" | "className" | "value" | "onFocus" | "onBlur" | "onChange"> & import('react').RefAttributes<HTMLInputElement>>;
+export default MultiValueInputV2;

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

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

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

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

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

@@ -0,0 +1,74 @@
+import { CSSObject } from 'styled-components';
+import { InputSizeV2, InputStateV2 } from '../inputV2.types';
+import { BreakpointType } from '../../../breakpoints/breakPoints';
+import { Theme } from '../../../context/theme.enum';
+import { FoundationTokenType } from '../../../tokens/theme.token';
+import { InputFooterV2Tokens, InputLabelsV2Tokens } from '../inputV2.tokens';
+export type MultiValueInputV2TokensType = {
+    gap: CSSObject['gap'];
+    borderRadius: CSSObject['borderRadius'];
+    topContainer: InputLabelsV2Tokens;
+    inputContainer: {
+        offSet: number;
+        fontSize: {
+            [key in InputSizeV2]: CSSObject['fontSize'];
+        };
+        fontWeight: {
+            [key in InputSizeV2]: CSSObject['fontWeight'];
+        };
+        gap: CSSObject['gap'];
+        borderRadius?: CSSObject['borderRadius'];
+        boxShadow: {
+            [key in InputStateV2]: CSSObject['boxShadow'];
+        };
+        paddingTop: {
+            [key in InputSizeV2]: CSSObject['paddingTop'];
+        };
+        paddingRight: {
+            [key in InputSizeV2]: CSSObject['paddingRight'];
+        };
+        paddingBottom: {
+            [key in InputSizeV2]: CSSObject['paddingBottom'];
+        };
+        paddingLeft: {
+            [key in InputSizeV2]: CSSObject['paddingLeft'];
+        };
+        border: {
+            [key in InputStateV2]: CSSObject['border'];
+        };
+        color: {
+            [key in InputStateV2]: CSSObject['color'];
+        };
+        placeholderColor: {
+            default: CSSObject['color'];
+            focus: CSSObject['color'];
+            hover: CSSObject['color'];
+            error: CSSObject['color'];
+            disabled: CSSObject['color'];
+        };
+        backgroundColor: {
+            [key in InputStateV2]: CSSObject['backgroundColor'];
+        };
+        closeButton: {
+            width: CSSObject['width'];
+        };
+        leftSlot: {
+            width: CSSObject['width'];
+            height: CSSObject['height'];
+        };
+        rightSlot: {
+            width: CSSObject['width'];
+            height: CSSObject['height'];
+        };
+        /** Vertical alignment for slot row vs tags (`top` / `marginTop` in layout) */
+        slotAlignTop: {
+            withTags: CSSObject['top'];
+            withoutTags: CSSObject['top'];
+        };
+    };
+    bottomContainer: InputFooterV2Tokens;
+};
+export type ResponsiveMultiValueInputV2Tokens = {
+    [key in keyof BreakpointType]: MultiValueInputV2TokensType;
+};
+export declare const getMultiValueInputV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveMultiValueInputV2Tokens;

package/dist/components/InputsV2/MultiValueInputV2/MultiValueV2.types.d.ts

@@ -0,0 +1,26 @@
+import { TagShape, TagSize, TagVariant } from '../../Tags/types';
+import { InputSizeV2 } from '../inputV2.types';
+export type MultiValueInputV2Props = {
+    value?: string;
+    label?: string;
+    sublabel?: string;
+    helpIconHintText?: string;
+    error?: boolean;
+    errorMessage?: string;
+    hintText?: string;
+    disabled?: boolean;
+    tags?: {
+        value: string[];
+        size: TagSize;
+        shape: TagShape;
+        variant: TagVariant;
+    };
+    onChange?: (value: string) => void;
+    onTagAdd?: (tag: string) => void;
+    onTagRemove?: (tag: string) => void;
+    size?: InputSizeV2;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    leftSlot?: React.ReactNode;
+    rightSlot?: React.ReactNode;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className' | 'onChange' | 'value' | 'onFocus' | 'onBlur'>;

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

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

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

@@ -9,10 +9,7 @@ declare const TextInputV2: import('react').ForwardRefExoticComponent<{
         message?: string;
     };
     hintText?: string;
-    helpIconText?: {
-        text: string;
-        onClick?: () => void;
-    };
+    helpIconText?: string;
     leftSlot?: {
         slot: import('react').ReactElement;
         maxHeight?: import('styled-components').CSSObject["maxHeight"];

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

@@ -11,10 +11,7 @@ export type TextInputV2Props = {
         message?: string;
     };
     hintText?: string;
-    helpIconText?: {
-        text: string;
-        onClick?: () => void;
-    };
+    helpIconText?: string;
     leftSlot?: {
         slot: ReactElement;
         maxHeight?: CSSObject['maxHeight'];

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

@@ -0,0 +1,90 @@
+import { CSSObject } from 'styled-components';
+import { InputSizeV2, InputStateV2 } from './inputV2.types';
+export type FloatingLabelsV2Tokens = {
+    placeholder: {
+        color: {
+            [key in InputStateV2]: CSSObject['color'];
+        };
+        fontSize: {
+            [key in InputSizeV2]: CSSObject['fontSize'];
+        };
+        fontWeight: {
+            [key in InputSizeV2]: CSSObject['fontWeight'];
+        };
+        lineHeight: {
+            [key in InputSizeV2]: CSSObject['lineHeight'];
+        };
+    };
+    required: {
+        color: CSSObject['color'];
+    };
+};
+export type InputLabelsV2Tokens = {
+    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'];
+        };
+    };
+};
+export type InputFooterV2Tokens = {
+    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'];
+    };
+};

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

@@ -1,24 +1,5 @@
 import { InputSizeV2, InputStateV2 } from '../../inputV2.types';
-import { CSSObject } from 'styled-components';
-export type FloatingLabelsV2Tokens = {
-    placeholder: {
-        color: {
-            [key in InputStateV2]: CSSObject['color'];
-        };
-        fontSize: {
-            [key in InputSizeV2]: CSSObject['fontSize'];
-        };
-        fontWeight: {
-            [key in InputSizeV2]: CSSObject['fontWeight'];
-        };
-        lineHeight: {
-            [key in InputSizeV2]: CSSObject['lineHeight'];
-        };
-    };
-    required: {
-        color: CSSObject['color'];
-    };
-};
+import { FloatingLabelsV2Tokens } from '../../inputV2.tokens';
 declare const FloatingLabelsV2: ({ label, required, name, inputId, isInputFocusedOrWithValue, topPadding, leftPadding, tokens, size, state, }: {
     label: string;
     required: boolean;

package/dist/components/InputsV2/utils/InputFooter/InputFooterV2.d.ts

@@ -1,33 +1,5 @@
-import { CSSObject } from 'styled-components';
-import { InputSizeV2, InputStateV2 } from '../../inputV2.types';
-type InputFooterV2Tokens = {
-    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'];
-    };
-};
+import { InputSizeV2 } from '../../inputV2.types';
+import { InputFooterV2Tokens } from '../../inputV2.tokens';
 type InputFooterV2Props = {
     error?: boolean;
     errorMessage?: string;

package/dist/components/InputsV2/utils/InputLabels/InputLabelsV2.d.ts

@@ -1,53 +1,9 @@
 import { InputSizeV2, InputStateV2 } from '../../inputV2.types';
-import { CSSObject } from 'styled-components';
-export type InputLabelsV2Tokens = {
-    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'];
-        };
-    };
-};
+import { InputLabelsV2Tokens } from '../../inputV2.tokens';
 export type InputLabelsV2Props = {
     label?: string;
     sublabel?: string;
-    helpIconText?: {
-        text: string;
-        onClick?: () => void;
-    };
+    helpIconText?: string;
     name?: string;
     inputId?: string;
     required?: boolean;

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