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

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/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/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/MultiSelectV2/MobileMultiSelectV2.d.ts

@@ -0,0 +1 @@
+export { default } from './mobile/MobileMultiSelectV2';

package/dist/components/MultiSelectV2/MultiSelectV2.d.ts

@@ -0,0 +1,6 @@
+import { MultiSelectV2Props } from './multiSelectV2.types';
+declare const MultiSelectV2: {
+    ({ selectedValues, onChange, items, label, subLabel, helpIconText, required, variant, selectionTagType, slot, hintText, placeholder, size, search, enableSelectAll, selectAllText, maxSelections, customTrigger, usePanelOnMobile, triggerDimensions, menuDimensions, menuPosition, inline, error, showActionButtons, primaryAction, secondaryAction, showItemDividers, showHeaderBorder, enableVirtualization, virtualListItemHeight, virtualListOverscan, onEndReached, endReachedThreshold, hasMore, loadingComponent, skeleton, allowCustomValue, customValueLabel, showClearButton, onClearAllClick, onOpenChange, multiSelectGroupPosition, ...rest }: MultiSelectV2Props): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default MultiSelectV2;

package/dist/components/MultiSelectV2/MultiSelectV2Menu.d.ts

@@ -0,0 +1,6 @@
+import { MultiSelectV2MenuProps } from './multiSelectV2.types';
+declare const MultiSelectV2Menu: {
+    ({ items, selected, onSelect, trigger, menuDimensions, disabled, search, enableSelectAll, selectAllText, maxSelections, onSelectAll, menuPosition, collisionBoundary, open, onOpenChange, showActionButtons, primaryAction, secondaryAction, enableVirtualization, virtualListItemHeight, virtualListOverscan, onEndReached, endReachedThreshold, hasMore, skeleton, size, variant, allowCustomValue, customValueLabel, menuId, }: MultiSelectV2MenuProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default MultiSelectV2Menu;

package/dist/components/MultiSelectV2/MultiSelectV2MenuActions.d.ts

@@ -0,0 +1,23 @@
+import { MultiSelectV2TokensType } from './multiSelectV2.tokens';
+export type MultiSelectV2MenuActionsProps = {
+    tokens: MultiSelectV2TokensType;
+    primaryAction?: {
+        text: string;
+        onClick: (selectedValues: string[]) => void;
+        disabled?: boolean;
+        loading?: boolean;
+    };
+    secondaryAction?: {
+        text: string;
+        onClick: () => void;
+        disabled?: boolean;
+        loading?: boolean;
+    };
+    selected: string[];
+    onClose: () => void;
+};
+declare const MultiSelectV2MenuActions: {
+    ({ tokens, primaryAction, secondaryAction, selected, onClose, }: MultiSelectV2MenuActionsProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default MultiSelectV2MenuActions;

package/dist/components/MultiSelectV2/MultiSelectV2MenuHeader.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+import { MultiSelectV2TokensType } from './multiSelectV2.tokens';
+import { MultiSelectV2GroupType } from './multiSelectV2.types';
+export type MultiSelectV2MenuHeaderProps = {
+    tokens: MultiSelectV2TokensType;
+    showSearch: boolean;
+    itemsCount: number;
+    searchValue: string;
+    searchPlaceholder?: string;
+    searchInputRef: React.RefObject<HTMLInputElement | null>;
+    onSearchChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onSearchArrowKeyToFirst: () => void;
+    showSelectAll: boolean;
+    selected: string[];
+    availableValues: string[];
+    filteredItems: MultiSelectV2GroupType[];
+    onSelectAll?: (selectAll: boolean, filteredItems: MultiSelectV2GroupType[]) => void;
+    selectAllText?: string;
+    disabled?: boolean;
+};
+declare const MultiSelectV2MenuHeader: {
+    ({ tokens, showSearch, itemsCount, searchValue, searchPlaceholder, searchInputRef, onSearchChange, onSearchArrowKeyToFirst, showSelectAll, selected, availableValues, filteredItems, onSelectAll, selectAllText, disabled, }: MultiSelectV2MenuHeaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default MultiSelectV2MenuHeader;

package/dist/components/MultiSelectV2/MultiSelectV2MenuItem.d.ts

@@ -0,0 +1,11 @@
+import { MultiSelectV2ItemType } from './multiSelectV2.types';
+type MultiSelectV2MenuItemProps = {
+    item: MultiSelectV2ItemType;
+    onSelect: (value: string) => void;
+    selected: string[];
+    maxSelections?: number;
+    allItems?: MultiSelectV2ItemType[];
+    index?: number;
+};
+declare const MultiSelectV2MenuItem: ({ item, onSelect, selected, maxSelections, allItems, index, }: MultiSelectV2MenuItemProps) => import("react/jsx-runtime").JSX.Element;
+export default MultiSelectV2MenuItem;

package/dist/components/MultiSelectV2/MultiSelectV2MenuItems.d.ts

@@ -0,0 +1,17 @@
+import { MultiSelectV2TokensType } from './multiSelectV2.tokens';
+import { MultiSelectV2Size, MultiSelectV2Variant, MultiSelectV2GroupType, MultiSelectV2ItemType } from './multiSelectV2.types';
+export type MultiSelectV2MenuItemsProps = {
+    filteredItems: MultiSelectV2GroupType[];
+    allItemsFlat: MultiSelectV2ItemType[];
+    selected: string[];
+    onSelect: (value: string) => void;
+    maxSelections?: number;
+    tokens: MultiSelectV2TokensType;
+    size: MultiSelectV2Size;
+    variant: MultiSelectV2Variant;
+};
+declare const MultiSelectV2MenuItems: {
+    ({ filteredItems, allItemsFlat, selected, onSelect, maxSelections, tokens, size, variant, }: MultiSelectV2MenuItemsProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default MultiSelectV2MenuItems;

package/dist/components/MultiSelectV2/MultiSelectV2MenuSearch.d.ts

@@ -0,0 +1,14 @@
+import { default as React, RefObject } from 'react';
+export type MultiSelectV2MenuSearchProps = {
+    inputRef: RefObject<HTMLInputElement | null>;
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    placeholder?: string;
+    ariaLabel?: string;
+    onArrowKeyToFirstOption?: () => void;
+};
+declare const MultiSelectV2MenuSearch: {
+    ({ inputRef, value, onChange, placeholder, ariaLabel, onArrowKeyToFirstOption, }: MultiSelectV2MenuSearchProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default MultiSelectV2MenuSearch;

package/dist/components/MultiSelectV2/MultiSelectV2MenuVirtualList.d.ts

@@ -0,0 +1,22 @@
+import { MultiSelectV2TokensType } from './multiSelectV2.tokens';
+import { FlattenedMultiSelectV2Item, MultiSelectV2ItemType } from './multiSelectV2.types';
+export type MultiSelectV2MenuVirtualListProps = {
+    flattenedItems: FlattenedMultiSelectV2Item[];
+    itemIndexMap: Map<string, number>;
+    allItemsFlat: MultiSelectV2ItemType[];
+    selected: string[];
+    onSelect: (value: string) => void;
+    maxSelections?: number;
+    tokens: MultiSelectV2TokensType;
+    height: number;
+    itemHeight: number;
+    overscan?: number;
+    onEndReached?: () => void;
+    endReachedThreshold?: number;
+    hasMore?: boolean;
+};
+declare const MultiSelectV2MenuVirtualList: {
+    ({ flattenedItems, itemIndexMap, allItemsFlat, selected, onSelect, maxSelections, tokens, height, itemHeight, overscan, onEndReached, endReachedThreshold, hasMore, }: MultiSelectV2MenuVirtualListProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default MultiSelectV2MenuVirtualList;

package/dist/components/MultiSelectV2/MultiSelectV2SelectAllItem.d.ts

@@ -0,0 +1,9 @@
+type MultiSelectV2SelectAllItemProps = {
+    selected: string[];
+    availableValues: string[];
+    onSelectAll: (selectAll: boolean) => void;
+    selectAllText: string;
+    disabled?: boolean;
+};
+declare const MultiSelectV2SelectAllItem: ({ selected, availableValues, onSelectAll, selectAllText, disabled, }: MultiSelectV2SelectAllItemProps) => import("react/jsx-runtime").JSX.Element;
+export default MultiSelectV2SelectAllItem;

package/dist/components/MultiSelectV2/MultiSelectV2Skeleton.d.ts

@@ -0,0 +1,8 @@
+import { MultiSelectV2TokensType } from './multiSelectV2.tokens';
+import { SelectV2SkeletonProps } from '../SelectV2/selectV2.shared.types';
+export type MultiSelectV2SkeletonComponentProps = {
+    multiSelectTokens: MultiSelectV2TokensType;
+    skeleton: SelectV2SkeletonProps;
+};
+declare const MultiSelectV2Skeleton: import('react').ForwardRefExoticComponent<MultiSelectV2SkeletonComponentProps & import('react').RefAttributes<HTMLDivElement>>;
+export default MultiSelectV2Skeleton;

package/dist/components/MultiSelectV2/MultiSelectV2SubMenu.d.ts

@@ -0,0 +1,9 @@
+import { MultiSelectV2ItemType } from './multiSelectV2.types';
+type MultiSelectV2SubMenuProps = {
+    item: MultiSelectV2ItemType;
+    onSelect: (value: string) => void;
+    selected: string[];
+    maxSelections?: number;
+};
+declare const MultiSelectV2SubMenu: ({ item, onSelect, selected, maxSelections, }: MultiSelectV2SubMenuProps) => import("react/jsx-runtime").JSX.Element;
+export default MultiSelectV2SubMenu;

package/dist/components/MultiSelectV2/MultiSelectV2Trigger.d.ts

@@ -0,0 +1,30 @@
+import { default as React } from 'react';
+import { MultiSelectV2SelectionTagType, MultiSelectV2Size, MultiSelectV2Variant, SelectV2TriggerDimensions } from './multiSelectV2.types';
+import { MultiSelectV2TokensType } from './multiSelectV2.tokens';
+export type MultiSelectV2TriggerProps = {
+    selectedValues: string[];
+    slot?: React.ReactNode;
+    variant: MultiSelectV2Variant;
+    size: MultiSelectV2Size;
+    isSmallScreen: boolean;
+    name: string;
+    label: string;
+    placeholder: string;
+    required: boolean;
+    selectionTagType: MultiSelectV2SelectionTagType;
+    valueLabelMap: Record<string, string>;
+    open: boolean;
+    multiSelectTokens: MultiSelectV2TokensType;
+    inline?: boolean;
+    error?: boolean;
+    disabled?: boolean;
+    triggerDimensions?: SelectV2TriggerDimensions;
+    borderRadius: string;
+    borderRight?: string;
+    [key: string]: unknown;
+};
+declare const MultiSelectV2Trigger: {
+    ({ selectedValues, slot, variant, size, isSmallScreen, name, label, placeholder, required, selectionTagType, valueLabelMap, open, multiSelectTokens, inline, error, disabled, triggerDimensions, borderRadius, borderRight, ...rest }: MultiSelectV2TriggerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default MultiSelectV2Trigger;

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

@@ -0,0 +1,14 @@
+export { default as MultiSelectV2 } from './MultiSelectV2';
+export { default as MultiSelectV2Skeleton } from './MultiSelectV2Skeleton';
+export { default as MultiSelectV2Menu } from './MultiSelectV2Menu';
+export { default as MultiSelectV2MenuHeader } from './MultiSelectV2MenuHeader';
+export { default as MultiSelectV2MenuSearch } from './MultiSelectV2MenuSearch';
+export { default as MultiSelectV2MenuVirtualList } from './MultiSelectV2MenuVirtualList';
+export { default as MultiSelectV2MenuItems } from './MultiSelectV2MenuItems';
+export { default as MultiSelectV2MenuActions } from './MultiSelectV2MenuActions';
+export { default as MultiSelectV2Trigger } from './MultiSelectV2Trigger';
+export { default as MobileMultiSelectV2 } from './MobileMultiSelectV2';
+export type { MultiSelectV2Props } from './multiSelectV2.types';
+export * from './multiSelectV2.types';
+export * from './multiSelectV2.tokens';
+export * from './utils';

package/dist/components/MultiSelectV2/mobile/MobileMultiSelectV2.d.ts

@@ -0,0 +1,3 @@
+import { MultiSelectV2Props } from '../multiSelectV2.types';
+declare const MobileMultiSelectV2: ({ selectedValues, onChange, items, label, subLabel, helpIconText, required, variant, selectionTagType, slot, hintText, placeholder, size, search, enableSelectAll, selectAllText, maxSelections, customTrigger, error, showActionButtons, primaryAction, secondaryAction, showItemDividers, showHeaderBorder, enableVirtualization, virtualListItemHeight, virtualListOverscan, onEndReached, endReachedThreshold, hasMore, skeleton, allowCustomValue, customValueLabel, onOpenChange, triggerDimensions, inline, disabled, name, ...buttonRest }: MultiSelectV2Props) => import("react/jsx-runtime").JSX.Element;
+export default MobileMultiSelectV2;

package/dist/components/MultiSelectV2/mobile/mobileMultiSelectV2.utils.d.ts

@@ -0,0 +1,8 @@
+import { VirtualListItem } from '../../VirtualList/types';
+import { FlattenedMultiSelectV2Item, MultiSelectV2GroupType } from '../multiSelectV2.types';
+export type FlattenedMobileMultiSelectV2Item = Omit<FlattenedMultiSelectV2Item, 'type'> & {
+    type: FlattenedMultiSelectV2Item['type'] | 'selectAll';
+};
+export declare const flattenMobileMultiSelectV2Groups: (groups: MultiSelectV2GroupType[], enableSelectAll: boolean) => FlattenedMobileMultiSelectV2Item[];
+export declare const isSelectableItem: (value: string, groups: MultiSelectV2GroupType[]) => boolean;
+export declare const toVirtualListItems: (items: FlattenedMobileMultiSelectV2Item[]) => VirtualListItem[];

package/dist/components/MultiSelectV2/multiSelectV2.dark.tokens.d.ts

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

package/dist/components/MultiSelectV2/multiSelectV2.light.tokens.d.ts

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

package/dist/components/MultiSelectV2/multiSelectV2.tokens.d.ts

@@ -0,0 +1,216 @@
+import { CSSObject } from 'styled-components';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+import { MultiSelectV2Size, MultiSelectV2SelectionTagType, MultiSelectV2Variant } from './multiSelectV2.types';
+import { Theme } from '../../context/theme.enum';
+import { SelectV2ItemStates, SelectV2TriggerStates } from '../SelectV2/selectV2.tokenStates';
+type StateToken<T> = Record<SelectV2ItemStates, T>;
+type TriggerStateToken<T> = Record<SelectV2TriggerStates, T>;
+type VariantToken<T> = Record<MultiSelectV2Variant, T>;
+type SizeToken<T> = Record<MultiSelectV2Size, T>;
+type SelectionTagTypeToken<T> = Record<MultiSelectV2SelectionTagType, T>;
+export type MultiSelectV2TriggerStates = SelectV2TriggerStates;
+export type MultiSelectV2ItemStates = SelectV2ItemStates;
+export type MultiSelectV2TokensType = {
+    gap: CSSObject['gap'];
+    label: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: StateToken<CSSObject['color']>;
+    };
+    subLabel: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: StateToken<CSSObject['color']>;
+    };
+    hintText: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: StateToken<CSSObject['color']>;
+    };
+    errorMessage: {
+        fontSize: CSSObject['fontSize'];
+        fontWeight: CSSObject['fontWeight'];
+        color: CSSObject['color'];
+    };
+    required: {
+        color: CSSObject['color'];
+    };
+    trigger: {
+        height: SizeToken<VariantToken<CSSObject['height']>>;
+        padding: SizeToken<VariantToken<{
+            top: CSSObject['paddingTop'];
+            right: CSSObject['paddingRight'];
+            bottom: CSSObject['paddingBottom'];
+            left: CSSObject['paddingLeft'];
+        }>>;
+        borderRadius: SizeToken<VariantToken<CSSObject['borderRadius']>>;
+        boxShadow: VariantToken<CSSObject['boxShadow']>;
+        backgroundColor: VariantToken<TriggerStateToken<CSSObject['backgroundColor']>>;
+        outline: VariantToken<TriggerStateToken<CSSObject['outline']>>;
+        slot: {
+            gap: CSSObject['gap'];
+            width: CSSObject['width'];
+        };
+        selectionTag: VariantToken<SelectionTagTypeToken<{
+            color: CSSObject['color'];
+            backgroundColor: CSSObject['backgroundColor'];
+            fontWeight: CSSObject['fontWeight'];
+            paddingTop: CSSObject['paddingTop'];
+            paddingRight: CSSObject['paddingRight'];
+            paddingBottom: CSSObject['paddingBottom'];
+            paddingLeft: CSSObject['paddingLeft'];
+        }>> & {
+            marginLeft: CSSObject['margin'];
+            borderRadius: CSSObject['borderRadius'];
+        };
+        chevron: {
+            gap: CSSObject['gap'];
+            width: CSSObject['width'];
+            height: CSSObject['height'];
+            iconSize?: number;
+        };
+        clearButton?: {
+            backgroundColor: TriggerStateToken<CSSObject['backgroundColor']>;
+            outline: TriggerStateToken<CSSObject['outline']>;
+            color: CSSObject['color'];
+            width?: CSSObject['width'];
+        };
+        floatingLabel: {
+            paddingTop: CSSObject['paddingTop'];
+            paddingRight: CSSObject['paddingRight'];
+            paddingBottom: CSSObject['paddingBottom'];
+            paddingLeft: CSSObject['paddingLeft'];
+        };
+        placeholder: {
+            color: CSSObject['color'];
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+        };
+        selectedValue: {
+            color: CSSObject['color'];
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+        };
+    };
+    menu: {
+        backgroundColor: CSSObject['backgroundColor'];
+        border: CSSObject['border'];
+        borderRadius: CSSObject['borderRadius'];
+        padding: SizeToken<VariantToken<{
+            top: CSSObject['paddingTop'];
+            right: CSSObject['paddingRight'];
+            bottom: CSSObject['paddingBottom'];
+            left: CSSObject['paddingLeft'];
+        }>>;
+        minWidth: CSSObject['minWidth'];
+        scroll: {
+            height: CSSObject['height'];
+            maxHeight: CSSObject['maxHeight'];
+        };
+        header: {
+            backgroundColor: CSSObject['backgroundColor'];
+            borderBottom: CSSObject['borderBottom'];
+            selectAllRowPaddingLeft: CSSObject['paddingLeft'];
+            selectAllRowPaddingRight: CSSObject['paddingRight'];
+        };
+        selectAll: {
+            paddingTop: CSSObject['paddingTop'];
+            paddingRight: CSSObject['paddingRight'];
+            paddingBottom: CSSObject['paddingBottom'];
+            paddingLeft: CSSObject['paddingLeft'];
+            borderRadius: CSSObject['borderRadius'];
+        };
+        list: {
+            paddingTop: CSSObject['paddingTop'];
+            paddingRight: CSSObject['paddingRight'];
+            paddingBottom: CSSObject['paddingBottom'];
+            paddingLeft: CSSObject['paddingLeft'];
+        };
+        actions: {
+            paddingTop: CSSObject['paddingTop'];
+            paddingRight: CSSObject['paddingRight'];
+            paddingBottom: CSSObject['paddingBottom'];
+            paddingLeft: CSSObject['paddingLeft'];
+            gap: CSSObject['gap'];
+            backgroundColor: CSSObject['backgroundColor'];
+            borderTop: CSSObject['borderTop'];
+        };
+        item: {
+            paddingTop: CSSObject['paddingTop'];
+            paddingRight: CSSObject['paddingRight'];
+            paddingBottom: CSSObject['paddingBottom'];
+            paddingLeft: CSSObject['paddingLeft'];
+            margin: CSSObject['margin'];
+            borderRadius: CSSObject['borderRadius'];
+            gap: CSSObject['gap'];
+            backgroundColor: StateToken<CSSObject['backgroundColor']>;
+            optionsLabel: {
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                color: StateToken<CSSObject['color']>;
+                paddingTop: CSSObject['paddingTop'];
+                paddingRight: CSSObject['paddingRight'];
+                paddingBottom: CSSObject['paddingBottom'];
+                paddingLeft: CSSObject['paddingLeft'];
+            };
+            option: {
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                color: StateToken<CSSObject['color']>;
+            };
+            description: {
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                color: StateToken<CSSObject['color']>;
+            };
+            seperator: {
+                color: CSSObject['color'];
+                height: CSSObject['height'];
+                margin: CSSObject['margin'];
+            };
+        };
+    };
+    subMenu: {
+        trigger: {
+            paddingTop: CSSObject['paddingTop'];
+            paddingRight: CSSObject['paddingRight'];
+            paddingBottom: CSSObject['paddingBottom'];
+            paddingLeft: CSSObject['paddingLeft'];
+            margin: CSSObject['margin'];
+            borderRadius: CSSObject['borderRadius'];
+        };
+        content: {
+            borderRadius: CSSObject['borderRadius'];
+            paddingTop: CSSObject['paddingTop'];
+            paddingRight: CSSObject['paddingRight'];
+            paddingBottom: CSSObject['paddingBottom'];
+            paddingLeft: CSSObject['paddingLeft'];
+        };
+    };
+    drawer: {
+        header: {
+            paddingTop: CSSObject['paddingTop'];
+            paddingRight: CSSObject['paddingRight'];
+            paddingBottom: CSSObject['paddingBottom'];
+            paddingLeft: CSSObject['paddingLeft'];
+            borderBottom: CSSObject['borderBottom'];
+        };
+        search: {
+            paddingTop: CSSObject['paddingTop'];
+            paddingRight: CSSObject['paddingRight'];
+            paddingBottom: CSSObject['paddingBottom'];
+            paddingLeft: CSSObject['paddingLeft'];
+            marginTop: CSSObject['margin'];
+            marginBottom: CSSObject['margin'];
+        };
+        content: {
+            gap: CSSObject['gap'];
+        };
+    };
+};
+export type ResponsiveMultiSelectV2Tokens = {
+    [key in keyof BreakpointType]: MultiSelectV2TokensType;
+};
+export declare const getMultiSelectV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveMultiSelectV2Tokens;
+export {};