@juspay/blend-design-system 0.0.33 → 0.0.34

package/dist/components/AccordionV2/AccordionV2.d.ts

@@ -0,0 +1,12 @@
+import { AccordionV2Type } from './accordionV2.types';
+import * as React from 'react';
+declare const AccordionV2: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+    accordionType?: AccordionV2Type;
+    defaultValue?: string | string[];
+    value?: string | string[];
+    isMultiple?: boolean;
+    onValueChange?: (value: string | string[]) => void;
+} & import('./accordionV2.types').AccordionV2Dimensions & React.RefAttributes<HTMLDivElement>>;
+export default AccordionV2;
+export { AccordionV2Item } from './AccordionV2Item';

package/dist/components/AccordionV2/AccordionV2Chevron.d.ts

@@ -0,0 +1,11 @@
+import { AccordionV2ChevronPosition } from './accordionV2.types';
+import { AccordionV2TokensType } from './accordionV2.tokens';
+import * as React from 'react';
+type AccordionV2ChevronProps = {
+    isExpanded: boolean;
+    isDisabled: boolean;
+    position: AccordionV2ChevronPosition;
+    accordionTokens: AccordionV2TokensType;
+};
+export declare const AccordionV2Chevron: React.FC<AccordionV2ChevronProps>;
+export {};

package/dist/components/AccordionV2/AccordionV2Item.d.ts

@@ -0,0 +1,10 @@
+import { AccordionV2ItemProps, AccordionV2Type, AccordionV2ChevronPosition } from './accordionV2.types';
+declare const AccordionV2Item: import('react').ForwardRefExoticComponent<AccordionV2ItemProps & {
+    accordionType?: AccordionV2Type;
+    chevronPosition?: AccordionV2ChevronPosition;
+    isFirst?: boolean;
+    isLast?: boolean;
+    isIntermediate?: boolean;
+    currentValue?: string | string[];
+} & import('react').RefAttributes<HTMLDivElement>>;
+export { AccordionV2Item };

package/dist/components/AccordionV2/AccordionV2TriggerContent.d.ts

@@ -0,0 +1,17 @@
+import { AccordionV2ChevronPosition } from './accordionV2.types';
+import { AccordionV2TokensType } from './accordionV2.tokens';
+import * as React from 'react';
+type AccordionV2TriggerContentProps = {
+    title: string;
+    subtext?: string;
+    leftSlot?: React.ReactNode;
+    rightSlot?: React.ReactNode;
+    subtextSlot?: React.ReactNode;
+    isDisabled: boolean;
+    isExpanded: boolean;
+    chevronPosition: AccordionV2ChevronPosition;
+    accordionTokens: AccordionV2TokensType;
+    isSmallScreen: boolean;
+};
+export declare const AccordionV2TriggerContent: React.FC<AccordionV2TriggerContentProps>;
+export {};

package/dist/components/AccordionV2/accordionV2.animations.d.ts

@@ -0,0 +1,3 @@
+export declare const accordionDown: import('styled-components/dist/models/Keyframes').default;
+export declare const accordionUp: import('styled-components/dist/models/Keyframes').default;
+export declare const ACCORDION_TRANSITION = "all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)";

package/dist/components/AccordionV2/accordionV2.dark.tokens.d.ts

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

package/dist/components/AccordionV2/accordionV2.light.tokens.d.ts

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

package/dist/components/AccordionV2/accordionV2.tokens.d.ts

@@ -0,0 +1,70 @@
+import { CSSObject } from 'styled-components';
+import { AccordionV2Type } from './accordionV2.types';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+import { Theme } from '../../context/theme.enum';
+export type AccordionV2State = 'default' | 'hover' | 'active' | 'disabled' | 'open';
+export type AccordionV2TokensType = {
+    gap: {
+        [key in AccordionV2Type]: CSSObject['gap'];
+    };
+    borderRadius: {
+        [key in AccordionV2Type]: CSSObject['borderRadius'];
+    };
+    trigger: {
+        content: {
+            gap: CSSObject['gap'];
+        };
+        backgroundColor: {
+            [key in AccordionV2Type]: {
+                [key in AccordionV2State]: CSSObject['backgroundColor'];
+            };
+        };
+        border: {
+            [key in AccordionV2Type]: {
+                [key in AccordionV2State]: CSSObject['border'];
+            };
+        };
+        padding: {
+            [key in AccordionV2Type]: CSSObject['padding'];
+        };
+        text: {
+            gap: CSSObject['gap'];
+            title: {
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                lineHeight: CSSObject['lineHeight'];
+                color: {
+                    [key in AccordionV2State]: CSSObject['color'];
+                };
+            };
+            subtext: {
+                fontSize: CSSObject['fontSize'];
+                fontWeight: CSSObject['fontWeight'];
+                lineHeight: CSSObject['lineHeight'];
+                gap: CSSObject['gap'];
+                color: {
+                    [key in AccordionV2State]: CSSObject['color'];
+                };
+            };
+        };
+        slot: {
+            height: CSSObject['height'];
+        };
+    };
+    separator: {
+        color: {
+            [key in AccordionV2Type]: CSSObject['color'];
+        };
+    };
+    chevron: {
+        height: CSSObject['height'];
+        color: {
+            [key in AccordionV2State]: CSSObject['color'];
+        };
+    };
+};
+export type ResponsiveAccordionV2Tokens = {
+    [key in keyof BreakpointType]: AccordionV2TokensType;
+};
+export declare const getAccordionV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveAccordionV2Tokens;

package/dist/components/AccordionV2/accordionV2.types.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+import { CSSObject } from 'styled-components';
+export declare enum AccordionV2Type {
+    BORDER = "border",
+    NO_BORDER = "noBorder"
+}
+export declare enum AccordionV2ChevronPosition {
+    LEFT = "left",
+    RIGHT = "right"
+}
+export type AccordionV2ItemProps = {
+    value: string;
+    title: string;
+    subtext?: string;
+    leftSlot?: ReactNode;
+    rightSlot?: ReactNode;
+    subtextSlot?: ReactNode;
+    children: ReactNode;
+    isDisabled?: boolean;
+    chevronPosition?: AccordionV2ChevronPosition;
+};
+export type AccordionV2Dimensions = {
+    width?: CSSObject['width'];
+    maxWidth?: CSSObject['maxWidth'];
+    minWidth?: CSSObject['minWidth'];
+};
+export type AccordionV2Props = {
+    children: ReactNode;
+    accordionType?: AccordionV2Type;
+    defaultValue?: string | string[];
+    value?: string | string[];
+    isMultiple?: boolean;
+    onValueChange?: (value: string | string[]) => void;
+} & AccordionV2Dimensions;

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

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

package/dist/components/AlertV2/AlertV2.d.ts

@@ -0,0 +1,19 @@
+import { default as React, ReactElement } from 'react';
+import { AlertV2Type, AlertV2SubType, AlertV2Actions } from './alertV2.types';
+import { CSSObject } from 'styled-components';
+declare const AlertV2: React.ForwardRefExoticComponent<{
+    type?: AlertV2Type;
+    subType?: AlertV2SubType;
+    slot?: {
+        slot: ReactElement;
+        maxHeight?: CSSObject["maxHeight"];
+    };
+    heading?: string;
+    description?: string;
+    actions?: AlertV2Actions;
+    closeButton?: {
+        show?: boolean;
+        onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    };
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "style" | "className" | "slot"> & import('./alertV2.types').AlertV2Dimensions & React.RefAttributes<HTMLDivElement>>;
+export default AlertV2;

package/dist/components/AlertV2/alertV2.dark.tokens.d.ts

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

package/dist/components/AlertV2/alertV2.light.tokens.d.ts

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

package/dist/components/AlertV2/alertV2.tokens.d.ts

@@ -0,0 +1,87 @@
+import { CSSObject } from 'styled-components';
+import { AlertV2Type, AlertV2SubType, AlertV2ActionPosition, AlertV2PaddingDirection } from './alertV2.types';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+import { Theme } from '../../context/theme.enum';
+export type AlertV2TokensType = {
+    width: CSSObject['width'];
+    maxWidth: CSSObject['maxWidth'];
+    minWidth: CSSObject['minWidth'];
+    border: {
+        [key in AlertV2Type]: {
+            [key in AlertV2SubType]: CSSObject['color'];
+        };
+    };
+    borderRadius: CSSObject['borderRadius'];
+    backgroundColor: {
+        [key in AlertV2Type]: {
+            [key in AlertV2SubType]: CSSObject['color'];
+        };
+    };
+    padding: {
+        [key in AlertV2PaddingDirection]: CSSObject['padding'];
+    };
+    gap: {
+        [key in AlertV2ActionPosition]: CSSObject['gap'];
+    };
+    slot: {
+        maxHeight: CSSObject['maxHeight'];
+    };
+    mainContainer: {
+        gap: CSSObject['gap'];
+        content: {
+            gap: {
+                [key in AlertV2ActionPosition]: CSSObject['gap'];
+            };
+            textContainer: {
+                gap: CSSObject['gap'];
+                heading: {
+                    color: {
+                        [key in AlertV2Type]: CSSObject['color'];
+                    };
+                    fontWeight: CSSObject['fontWeight'];
+                    fontSize: CSSObject['fontSize'];
+                    lineHeight: CSSObject['lineHeight'];
+                };
+                description: {
+                    color: {
+                        [key in AlertV2Type]: CSSObject['color'];
+                    };
+                    fontWeight: CSSObject['fontWeight'];
+                    fontSize: CSSObject['fontSize'];
+                    lineHeight: CSSObject['lineHeight'];
+                };
+            };
+            actionContainer: {
+                gap: CSSObject['gap'];
+                primaryAction: {
+                    color: {
+                        [key in AlertV2Type]: CSSObject['color'];
+                    };
+                    fontWeight: CSSObject['fontWeight'];
+                    fontSize: CSSObject['fontSize'];
+                    lineHeight: CSSObject['lineHeight'];
+                };
+                secondaryAction: {
+                    color: {
+                        [key in AlertV2Type]: CSSObject['color'];
+                    };
+                    fontWeight: CSSObject['fontWeight'];
+                    fontSize: CSSObject['fontSize'];
+                    lineHeight: CSSObject['lineHeight'];
+                };
+            };
+        };
+        closeButton: {
+            color: {
+                [key in AlertV2Type]: CSSObject['color'];
+            };
+            height: CSSObject['height'];
+            width: CSSObject['width'];
+        };
+    };
+};
+export type ResponsiveAlertV2Tokens = {
+    [key in keyof BreakpointType]: AlertV2TokensType;
+};
+export declare const getAlertV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveAlertV2Tokens;

package/dist/components/AlertV2/alertV2.types.d.ts

@@ -0,0 +1,54 @@
+import { ReactElement } from 'react';
+import { CSSObject } from 'styled-components';
+export declare enum AlertV2PaddingDirection {
+    TOP = "top",
+    BOTTOM = "bottom",
+    LEFT = "left",
+    RIGHT = "right"
+}
+export declare enum AlertV2Type {
+    PRIMARY = "primary",
+    SUCCESS = "success",
+    WARNING = "warning",
+    ERROR = "error",
+    PURPLE = "purple",
+    ORANGE = "orange",
+    NEUTRAL = "neutral"
+}
+export declare enum AlertV2SubType {
+    SUBTLE = "subtle",
+    NO_FILL = "noFill"
+}
+export declare enum AlertV2ActionPosition {
+    BOTTOM = "bottom",
+    RIGHT = "right"
+}
+export type AlertV2Action = {
+    text: string;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+};
+export type AlertV2Actions = {
+    position?: AlertV2ActionPosition;
+    primaryAction?: AlertV2Action;
+    secondaryAction?: AlertV2Action;
+};
+export type AlertV2Dimensions = {
+    width?: CSSObject['width'];
+    maxWidth?: CSSObject['maxWidth'];
+    minWidth?: CSSObject['minWidth'];
+};
+export type AlertV2Props = {
+    type?: AlertV2Type;
+    subType?: AlertV2SubType;
+    slot?: {
+        slot: ReactElement;
+        maxHeight?: CSSObject['maxHeight'];
+    };
+    heading?: string;
+    description?: string;
+    actions?: AlertV2Actions;
+    closeButton?: {
+        show?: boolean;
+        onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    };
+} & Omit<React.HTMLAttributes<HTMLDivElement>, 'slot' | 'className' | 'style'> & AlertV2Dimensions;

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

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

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

@@ -0,0 +1,46 @@
+import { MouseEvent } from 'react';
+import { ButtonV2Size, ButtonV2State, ButtonV2SubType, ButtonV2Type } from './buttonV2.types';
+import { ButtonV2TokensType } from './buttonV2.tokens';
+export declare function getBorderRadius(size: ButtonV2Size, buttonType: ButtonV2Type, subType: ButtonV2SubType, buttonGroupPosition: 'center' | 'left' | 'right' | undefined, tokens: ButtonV2TokensType): string;
+export declare function createButtonClickHandler(onClick?: (event?: MouseEvent<HTMLButtonElement>) => void, isSkeleton?: boolean, isDisabled?: boolean, isLoading?: boolean): (event: MouseEvent<HTMLButtonElement>) => void;
+export declare function getButtonHeight(subType: ButtonV2SubType): string | undefined;
+export declare function getIconMaxHeight(subType: ButtonV2SubType, leftSlotMaxHeight: string | number | undefined, rightSlotMaxHeight: string | number | undefined, size: ButtonV2Size): string;
+export declare function getButtonStatus(isLoading: boolean | undefined, isDisabled: boolean | undefined): 'loading' | 'disabled' | 'enabled';
+export declare function getButtonTabIndex(isDisabled: boolean, providedTabIndex?: number): number;
+export declare function getSkeletonBorderRadius(size: ButtonV2Size, buttonType: ButtonV2Type, subType: ButtonV2SubType, buttonGroupPosition: 'center' | 'left' | 'right' | undefined, tokens: ButtonV2TokensType): string;
+export declare function getSkeletonWidth(width?: string | number): string;
+export declare function getButtonBorderStyles(buttonGroupPosition: 'center' | 'left' | 'right' | undefined, defaultBorder: string | undefined): {
+    border?: string;
+    borderTop?: string;
+    borderRight?: string;
+    borderBottom?: string;
+    borderLeft?: string;
+};
+/** Return type for getButtonStyles (explicit to avoid csstype reference in .d.ts) */
+export type ButtonStylesReturn = {
+    background?: string;
+    color?: string;
+    border?: string;
+    borderTop?: string;
+    borderBottom?: string;
+    borderLeft?: string;
+    borderRight?: string;
+    cursor?: string;
+    _active?: Record<string, string | number | undefined>;
+    _hover?: Record<string, string | number | undefined>;
+    _focusVisible?: Record<string, string | number | undefined>;
+    _disabled?: Record<string, string | number | undefined>;
+};
+/**
+ * Get all button styles in one call for better performance
+ */
+export declare function getButtonStyles(isSkeleton: boolean, isDisabled: boolean, buttonType: ButtonV2Type, subType: ButtonV2SubType, tokens: ButtonV2TokensType, buttonGroupPosition?: 'center' | 'left' | 'right'): ButtonStylesReturn;
+export declare function getIconColor(isSkeleton: boolean, disabled: boolean | undefined, buttonType: ButtonV2Type, subType: ButtonV2SubType, tokens: ButtonV2TokensType): string;
+export declare function getTextColor(isSkeleton: boolean, disabled: boolean | undefined, state: ButtonV2State, buttonType: ButtonV2Type, subType: ButtonV2SubType, tokens: ButtonV2TokensType): string;
+export declare function getButtonPadding(size: ButtonV2Size, buttonType: ButtonV2Type, subType: ButtonV2SubType, tokens: ButtonV2TokensType): {
+    top: string;
+    right: string;
+    bottom: string;
+    left: string;
+};
+export declare function getButtonLineHeight(size: ButtonV2Size, tokens: ButtonV2TokensType): string;

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

@@ -16,6 +16,7 @@ export declare const DrawerContent: React.ForwardRefExoticComponent<DrawerConten
     contentDriven?: boolean;
     width?: string | number;
     maxWidth?: string | number;
+    offSet?: string | number;
     mobileOffset?: {
         top?: string;
         bottom?: string;

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

@@ -1,3 +1,3 @@
 import { TextInputProps } from './types';
-declare const TextInput: ({ size, leftSlot, rightSlot, error, errorMessage, hintText, helpIconHintText, disabled, label, placeholder, sublabel, value, onChange, name, required, onBlur, onFocus, cursor, id: providedId, passwordToggle, type: providedType, ...rest }: TextInputProps) => import("react/jsx-runtime").JSX.Element;
+declare const TextInput: ({ size, leftSlot, rightSlot, error, errorMessage, hintText, helpIconHintText, disabled, label, placeholder, sublabel, value, onChange, name, required, onBlur, onFocus, cursor, id: providedId, passwordToggle, type: providedType, textInputGroupPosition, ...rest }: TextInputProps) => import("react/jsx-runtime").JSX.Element;
 export default TextInput;

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

@@ -10,6 +10,11 @@ export declare enum TextInputState {
     ERROR = "error",
     DISABLED = "disabled"
 }
+export declare enum TextInputGroupPosition {
+    CENTER = "center",
+    LEFT = "left",
+    RIGHT = "right"
+}
 export type TextInputProps = {
     label?: string;
     sublabel?: string;
@@ -26,4 +31,5 @@ export type TextInputProps = {
     onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
     cursor?: 'text' | 'pointer' | 'default' | 'not-allowed';
     passwordToggle?: boolean;
+    textInputGroupPosition?: TextInputGroupPosition;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className' | 'onBlur' | 'onFocus'>;

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

@@ -0,0 +1,6 @@
+import { TextInputTokensType } from './textInput.tokens';
+import { TextInputGroupPosition, TextInputSize } from './types';
+export declare const getTextInputBorderRadius: (size: TextInputSize, textInputGroupPosition: TextInputGroupPosition | undefined, tokens: TextInputTokensType) => {
+    borderRadius: string;
+    borderRight?: string;
+};

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, }: 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, 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;
 export default MultiSelect;

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

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

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

@@ -126,6 +126,7 @@ export type MultiSelectProps = {
     customValueLabel?: string;
     showClearButton?: boolean;
     onClearAllClick?: () => void;
+    multiSelectGroupPosition?: 'center' | 'left' | 'right';
 };
 export type MultiSelectMenuProps = {
     items: MultiSelectMenuGroupType[];
@@ -175,4 +176,5 @@ export type MultiSelectMenuProps = {
     allowCustomValue?: boolean;
     customValueLabel?: string;
     menuId?: string;
+    collisionBoundary?: Element | null | Array<Element | null>;
 };

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

@@ -1,8 +1,14 @@
-import { MultiSelectMenuGroupType, MultiSelectMenuItemType } from './types';
+import { MultiSelectTokensType } from './multiSelect.tokens';
+import { MultiSelectMenuSize, MultiSelectVariant, MultiSelectMenuGroupType, MultiSelectMenuItemType } from './types';
 export declare const getSelectAllState: (selected: string[], availableValues: string[]) => {
     allSelected: boolean;
     someSelected: boolean;
 };
+export declare function getMultiSelectBorderRadius(size: MultiSelectMenuSize, varient: MultiSelectVariant, multiSelectGroupPosition: 'center' | 'left' | 'right' | undefined, tokens: MultiSelectTokensType, shouldShowClearButton: boolean): string;
+export declare function getMultiSelectCrossBorderRadius(size: MultiSelectMenuSize, varient: MultiSelectVariant, multiSelectGroupPosition: 'center' | 'left' | 'right' | undefined, tokens: MultiSelectTokensType): {
+    borderRadius: string;
+    borderRight?: string;
+};
 export declare const map: (groups: MultiSelectMenuGroupType[]) => Record<string, string>;
 export declare const getAllValues: (groups: MultiSelectMenuGroupType[]) => string[];
 export declare const handleSelectAll: (selectAll: boolean, items: MultiSelectMenuGroupType[], selectedValues: string[], onChange: (value: string) => void) => void;

package/dist/components/MultiSelectGroup/MultiSelectGroup.d.ts

@@ -0,0 +1,3 @@
+import { MultiSelectGroupProps } from './MultiselectGroupProps.types';
+declare const MultiSelectGroup: import('react').ForwardRefExoticComponent<MultiSelectGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export default MultiSelectGroup;

package/dist/components/MultiSelectGroup/MultiselectGroupProps.types.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+import { MultiSelectProps } from '../MultiSelect/types';
+export type MultiSelectGroupProps = {
+    stacked?: boolean;
+    gap?: string | number;
+    children: ReactElement<MultiSelectProps> | ReactElement<MultiSelectProps>[];
+};

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

@@ -0,0 +1,3 @@
+import { default as MultiSelectGroup } from './MultiSelectGroup';
+export { MultiSelectGroup };
+export type * from './/MultiselectGroupProps.types';

package/dist/components/Primitives/Block/Block.d.ts

@@ -78,7 +78,6 @@ type StyledBlockProps = StateStyles & {
     overflowX?: CSSObject['overflowX'];
     overflowY?: CSSObject['overflowY'];
     whiteSpace?: CSSObject['whiteSpace'];
-    transition?: CSSObject['transition'];
     contentCentered?: boolean;
     cursor?: CSSObject['cursor'];
     fontSize?: CSSObject['fontSize'];
@@ -89,8 +88,16 @@ type StyledBlockProps = StateStyles & {
     textTransform?: CSSObject['textTransform'];
     textOverflow?: CSSObject['textOverflow'];
     userSelect?: CSSObject['userSelect'];
+    transform?: CSSObject['transform'];
+    willChange?: CSSObject['willChange'];
+    transformOrigin?: CSSObject['transformOrigin'];
+    backfaceVisibility?: CSSObject['backfaceVisibility'];
+    transition?: CSSObject['transition'];
+    transitionDuration?: CSSObject['transitionDuration'];
+    transitionTimingFunction?: CSSObject['transitionTimingFunction'];
+    transitionDelay?: CSSObject['transitionDelay'];
 };
-type SemanticTagType = keyof Pick<JSX.IntrinsicElements, 'div' | 'section' | 'article' | 'header' | 'footer' | 'main' | 'span' | 'nav' | 'hr'>;
+type SemanticTagType = keyof Pick<JSX.IntrinsicElements, 'div' | 'section' | 'article' | 'header' | 'footer' | 'main' | 'span' | 'nav' | 'hr' | 'label'>;
 export type BlockProps = StyledBlockProps & Omit<React.HTMLAttributes<HTMLElement>, 'as' | 'color'> & {
     children?: React.ReactNode;
     as?: SemanticTagType;
@@ -173,7 +180,6 @@ declare const Block: React.ForwardRefExoticComponent<StateStyles & {
     overflowX?: CSSObject["overflowX"];
     overflowY?: CSSObject["overflowY"];
     whiteSpace?: CSSObject["whiteSpace"];
-    transition?: CSSObject["transition"];
     contentCentered?: boolean;
     cursor?: CSSObject["cursor"];
     fontSize?: CSSObject["fontSize"];
@@ -184,6 +190,14 @@ declare const Block: React.ForwardRefExoticComponent<StateStyles & {
     textTransform?: CSSObject["textTransform"];
     textOverflow?: CSSObject["textOverflow"];
     userSelect?: CSSObject["userSelect"];
+    transform?: CSSObject["transform"];
+    willChange?: CSSObject["willChange"];
+    transformOrigin?: CSSObject["transformOrigin"];
+    backfaceVisibility?: CSSObject["backfaceVisibility"];
+    transition?: CSSObject["transition"];
+    transitionDuration?: CSSObject["transitionDuration"];
+    transitionTimingFunction?: CSSObject["transitionTimingFunction"];
+    transitionDelay?: CSSObject["transitionDelay"];
 } & Omit<React.HTMLAttributes<HTMLElement>, "color" | "as"> & {
     children?: React.ReactNode;
     as?: SemanticTagType;

package/dist/components/Primitives/PrimitiveButton/PrimitiveButton.d.ts

@@ -32,6 +32,7 @@ type PrimitiveButtonProps = StateStyles & {
     maxWidth?: CSSObject['maxWidth'];
     minHeight?: CSSObject['minHeight'];
     maxHeight?: CSSObject['maxHeight'];
+    opacity?: CSSObject['opacity'];
     flexGrow?: CSSObject['flexGrow'];
     flexShrink?: CSSObject['flexShrink'];
     flexBasis?: CSSObject['flexBasis'];
@@ -62,15 +63,22 @@ type PrimitiveButtonProps = StateStyles & {
     outlineStyle?: CSSObject['outlineStyle'];
     outlineWidth?: CSSObject['outlineWidth'];
     outlineColor?: CSSObject['outlineColor'];
-    transform?: CSSObject['transform'];
-    transition?: CSSObject['transition'];
     disabled?: boolean;
     fontWeight?: CSSObject['fontWeight'];
+    lineHeight?: CSSObject['lineHeight'];
     fontSize?: CSSObject['fontSize'];
     fontFamily?: CSSObject['fontFamily'];
     textDecoration?: CSSObject['textDecoration'];
     textUnderlineOffset?: CSSObject['textUnderlineOffset'];
     textTransform?: CSSObject['textTransform'];
+    willChange?: CSSObject['willChange'];
+    transformOrigin?: CSSObject['transformOrigin'];
+    backfaceVisibility?: CSSObject['backfaceVisibility'];
+    transform?: CSSObject['transform'];
+    transition?: CSSObject['transition'];
+    transitionDuration?: CSSObject['transitionDuration'];
+    transitionTimingFunction?: CSSObject['transitionTimingFunction'];
+    transitionDelay?: CSSObject['transitionDelay'];
 };
 export type ButtonProps = PrimitiveButtonProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'> & {
     children?: React.ReactNode;
@@ -98,6 +106,7 @@ declare const PrimitiveButton: React.ForwardRefExoticComponent<StateStyles & {
     maxWidth?: CSSObject["maxWidth"];
     minHeight?: CSSObject["minHeight"];
     maxHeight?: CSSObject["maxHeight"];
+    opacity?: CSSObject["opacity"];
     flexGrow?: CSSObject["flexGrow"];
     flexShrink?: CSSObject["flexShrink"];
     flexBasis?: CSSObject["flexBasis"];
@@ -128,15 +137,22 @@ declare const PrimitiveButton: React.ForwardRefExoticComponent<StateStyles & {
     outlineStyle?: CSSObject["outlineStyle"];
     outlineWidth?: CSSObject["outlineWidth"];
     outlineColor?: CSSObject["outlineColor"];
-    transform?: CSSObject["transform"];
-    transition?: CSSObject["transition"];
     disabled?: boolean;
     fontWeight?: CSSObject["fontWeight"];
+    lineHeight?: CSSObject["lineHeight"];
     fontSize?: CSSObject["fontSize"];
     fontFamily?: CSSObject["fontFamily"];
     textDecoration?: CSSObject["textDecoration"];
     textUnderlineOffset?: CSSObject["textUnderlineOffset"];
     textTransform?: CSSObject["textTransform"];
+    willChange?: CSSObject["willChange"];
+    transformOrigin?: CSSObject["transformOrigin"];
+    backfaceVisibility?: CSSObject["backfaceVisibility"];
+    transform?: CSSObject["transform"];
+    transition?: CSSObject["transition"];
+    transitionDuration?: CSSObject["transitionDuration"];
+    transitionTimingFunction?: CSSObject["transitionTimingFunction"];
+    transitionDelay?: CSSObject["transitionDelay"];
 } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "color"> & {
     children?: React.ReactNode;
 } & React.RefAttributes<HTMLButtonElement>>;