@juspay/blend-design-system 0.0.1

package/dist/components/Inputs/OTPInput/otpInput.tokens.d.ts

@@ -0,0 +1,34 @@
+import { CSSObject } from 'styled-components';
+import { FoundationTokenType } from '../../../tokens/theme.token';
+declare enum OTPInputState {
+    DEFAULT = "default",
+    HOVER = "hover",
+    FOCUS = "focus",
+    ERROR = "error",
+    DISABLED = "disabled"
+}
+export type OTPInputTokensType = {
+    input: {
+        gap: CSSObject['gap'];
+        borderRadius: CSSObject['borderRadius'];
+        boxShadow: {
+            [key in OTPInputState]: CSSObject['boxShadow'];
+        };
+        padding: CSSObject['padding'];
+        outline: {
+            [key in OTPInputState]: CSSObject['outline'];
+        };
+        border: {
+            [key in OTPInputState]: CSSObject['border'];
+        };
+        color: {
+            [key in OTPInputState]: CSSObject['color'];
+        };
+        backgroundColor: {
+            [key in OTPInputState]: CSSObject['backgroundColor'];
+        };
+    };
+};
+declare const otpInputTokens: OTPInputTokensType;
+export declare const getOTPInputTokens: (foundationToken: FoundationTokenType) => OTPInputTokensType;
+export default otpInputTokens;

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

@@ -0,0 +1,11 @@
+export type OTPProps = {
+    label?: string;
+    sublabel?: string;
+    helpIconHintText?: string;
+    error?: boolean;
+    errorMessage?: string;
+    hintText?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    form?: string;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className'>;

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

@@ -0,0 +1,3 @@
+import { SearchInputProps } from './types';
+declare const SearchInput: ({ leftSlot, rightSlot, error, placeholder, value, onChange, name, ...rest }: SearchInputProps) => import("react/jsx-runtime").JSX.Element;
+export default SearchInput;

package/dist/components/Inputs/SearchInput/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SearchInput } from './SearchInput';
+export * from './types';

package/dist/components/Inputs/SearchInput/searchInput.tokens.d.ts

@@ -0,0 +1,41 @@
+import { CSSObject } from 'styled-components';
+import { FoundationTokenType } from '../../../tokens/theme.token';
+declare enum SearchInputState {
+    DEFAULT = "default",
+    HOVER = "hover",
+    FOCUS = "focus",
+    ERROR = "error"
+}
+export type SearchInputTokensType = {
+    height: CSSObject['height'];
+    width: CSSObject['width'];
+    gap: CSSObject['gap'];
+    padding: {
+        x: CSSObject['padding'];
+        y: CSSObject['padding'];
+    };
+    borderRadius: CSSObject['borderRadius'];
+    borderTop: {
+        [key in SearchInputState]: CSSObject['borderTop'];
+    };
+    borderLeft: {
+        [key in SearchInputState]: CSSObject['borderTop'];
+    };
+    borderRight: {
+        [key in SearchInputState]: CSSObject['borderRight'];
+    };
+    borderBottom: {
+        [key in SearchInputState]: CSSObject['borderBottom'];
+    };
+    border?: {
+        radius: CSSObject['borderRadius'];
+        color: {
+            [key in SearchInputState]: CSSObject['borderColor'];
+        };
+    };
+    outline: CSSObject['outline'];
+    boxShadow: CSSObject['boxShadow'];
+};
+declare const searchInputTokens: Readonly<SearchInputTokensType>;
+export declare const getSearchInputTokens: (foundationTokens: FoundationTokenType) => SearchInputTokensType;
+export default searchInputTokens;

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

@@ -0,0 +1,7 @@
+export type SearchInputProps = {
+    leftSlot?: React.ReactNode;
+    rightSlot?: React.ReactNode;
+    error?: boolean;
+    value?: string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className'>;

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

@@ -0,0 +1,3 @@
+import { TextAreaProps } from './types';
+declare const TextArea: ({ value, placeholder, disabled, autoFocus, onChange, onFocus, onBlur, rows, cols, label, sublabel, hintText, helpIconHintText, required, error, errorMessage, wrap, resize, ...rest }: TextAreaProps) => import("react/jsx-runtime").JSX.Element;
+export default TextArea;

package/dist/components/Inputs/TextArea/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TextArea } from './TextArea';
+export * from './types';

package/dist/components/Inputs/TextArea/textarea.token.d.ts

@@ -0,0 +1,27 @@
+import { CSSObject } from 'styled-components';
+import { FoundationTokenType } from '../../../tokens/theme.token';
+type TextAreaState = 'default' | 'hover' | 'focus' | 'error' | 'disabled';
+export type TextAreaTokensType = {
+    fontFamily: CSSObject['fontFamily'];
+    paddingX: CSSObject['padding'];
+    paddingY: CSSObject['padding'];
+    borderRadius: CSSObject['borderRadius'];
+    boxShadow: {
+        [key in TextAreaState]: CSSObject['boxShadow'];
+    };
+    outline: {
+        [key in TextAreaState]: CSSObject['outline'];
+    };
+    border: {
+        [key in TextAreaState]: CSSObject['border'];
+    };
+    color: {
+        [key in TextAreaState]: CSSObject['color'];
+    };
+    backgroundColor: {
+        [key in TextAreaState]: CSSObject['backgroundColor'];
+    };
+};
+export declare const textAreaTokens: TextAreaTokensType;
+export declare const getTextAreaTokens: (foundationTokens: FoundationTokenType) => TextAreaTokensType;
+export default textAreaTokens;

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

@@ -0,0 +1,22 @@
+import { CSSObject } from 'styled-components';
+export type TextAreaProps = {
+    value: string;
+    placeholder: string;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
+    rows?: number;
+    cols?: number;
+    label?: string;
+    sublabel?: string;
+    hintText?: string;
+    helpIconHintText?: string;
+    helpIconText?: string;
+    required?: boolean;
+    error?: boolean;
+    errorMessage?: string;
+    resize?: 'none' | 'both' | 'horizontal' | 'vertical' | 'block' | 'inline';
+    wrap?: CSSObject['whiteSpace'];
+} & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size' | 'style' | 'className'>;

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

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

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

@@ -0,0 +1,2 @@
+export { default as TextInput } from './TextInput';
+export * from './types';

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

@@ -0,0 +1,33 @@
+import { CSSObject } from 'styled-components';
+import { FoundationTokenType } from '../../../tokens/theme.token';
+import { TextInputSize, TextInputState } from './types';
+export type TextInputTokensType = {
+    input: {
+        gap: CSSObject['gap'];
+        borderRadius?: CSSObject['borderRadius'];
+        boxShadow: {
+            [key in TextInputState]: CSSObject['boxShadow'];
+        };
+        paddingX: {
+            [key in TextInputSize]: CSSObject['padding'];
+        };
+        paddingY: {
+            [key in TextInputSize]: CSSObject['padding'];
+        };
+        border: {
+            [key in TextInputState]: CSSObject['border'];
+        };
+        color: {
+            [key in TextInputState]: CSSObject['color'];
+        };
+        outline: {
+            [key in TextInputState]: CSSObject['outline'];
+        };
+        backgroundColor: {
+            [key in TextInputState]: CSSObject['backgroundColor'];
+        };
+    };
+};
+declare const textInputTokens: Readonly<TextInputTokensType>;
+export declare const getTextInputTokens: (foundationTheme: FoundationTokenType) => TextInputTokensType;
+export default textInputTokens;

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

@@ -0,0 +1,24 @@
+export declare enum TextInputSize {
+    MEDIUM = "md",
+    LARGE = "lg"
+}
+export declare enum TextInputState {
+    DEFAULT = "default",
+    HOVER = "hover",
+    FOCUS = "focus",
+    ERROR = "error",
+    DISABLED = "disabled"
+}
+export type TextInputProps = {
+    label?: string;
+    sublabel?: string;
+    hintText?: string;
+    helpIconHintText?: string;
+    error?: boolean;
+    errorMessage?: string;
+    size?: TextInputSize;
+    leftSlot?: React.ReactNode;
+    rightSlot?: React.ReactNode;
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className'>;

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

@@ -0,0 +1,3 @@
+import { UnitInputProps } from './types';
+declare const UnitInput: ({ value, onChange, min, max, step, error, errorMessage, required, disabled, size, placeholder, sublabel, helpIconHintText, label, hintText, leftSlot, rightSlot, unit, unitPosition, name, ...rest }: UnitInputProps) => import("react/jsx-runtime").JSX.Element;
+export default UnitInput;

package/dist/components/Inputs/UnitInput/index.d.ts

@@ -0,0 +1,2 @@
+export { default as UnitInput } from './UnitInput';
+export * from './types';

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

@@ -0,0 +1,25 @@
+export declare enum UnitInputSize {
+    MEDIUM = "md",
+    LARGE = "lg"
+}
+export declare enum UnitPosition {
+    LEFT = "left",
+    RIGHT = "right"
+}
+export type UnitInputProps = {
+    value: number;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    step?: number;
+    error?: boolean;
+    errorMessage?: string;
+    required?: boolean;
+    size?: UnitInputSize;
+    label?: string;
+    sublabel?: string;
+    helpIconHintText?: string;
+    hintText?: string;
+    leftSlot?: React.ReactNode;
+    rightSlot?: React.ReactNode;
+    unit: string;
+    unitPosition?: UnitPosition;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'className'>;

package/dist/components/Inputs/UnitInput/unitInput.tokens.d.ts

@@ -0,0 +1,40 @@
+import { CSSObject } from 'styled-components';
+import { UnitInputSize } from './types';
+import { FoundationTokenType } from '../../../tokens/theme.token';
+declare enum UnitInputState {
+    DEFAULT = "default",
+    HOVER = "hover",
+    FOCUS = "focus",
+    ERROR = "error",
+    DISABLED = "disabled"
+}
+export type UnitInputTokensType = {
+    input: {
+        gap: CSSObject['gap'];
+        borderRadius?: CSSObject['borderRadius'];
+        boxShadow: {
+            [key in UnitInputState]: CSSObject['boxShadow'];
+        };
+        paddingX: {
+            [key in UnitInputSize]: CSSObject['padding'];
+        };
+        paddingY: {
+            [key in UnitInputSize]: CSSObject['padding'];
+        };
+        border: {
+            [key in UnitInputState]: CSSObject['border'];
+        };
+        color: {
+            [key in UnitInputState]: CSSObject['color'];
+        };
+        outline: {
+            [key in UnitInputState]: CSSObject['outline'];
+        };
+        backgroundColor: {
+            [key in UnitInputState]: CSSObject['backgroundColor'];
+        };
+    };
+};
+declare const unitInputTokens: UnitInputTokensType;
+export declare const getUnitInputTokens: (foundationTheme: FoundationTokenType) => UnitInputTokensType;
+export default unitInputTokens;

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

@@ -0,0 +1,8 @@
+export * from './TextInput';
+export * from './NumberInput';
+export * from './DropdownInput';
+export * from './SearchInput';
+export * from './OTPInput';
+export * from './UnitInput';
+export * from './MultiValueInput';
+export * from './TextArea';

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

@@ -0,0 +1,8 @@
+type InputFooterProps = {
+    error?: boolean;
+    errorMessage?: string;
+    hintText?: string;
+    disabled?: boolean;
+};
+declare const InputFooter: ({ error, errorMessage, hintText, disabled, }: InputFooterProps) => "" | import("react/jsx-runtime").JSX.Element | undefined;
+export default InputFooter;

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

@@ -0,0 +1,18 @@
+type InputLabelsProps = {
+    label?: string;
+    sublabel?: string;
+    disabled?: boolean;
+    helpIconHintText?: string;
+    name?: string;
+    required?: boolean;
+};
+/**
+ * @description InputLabels is a component that displays a label and sublabel for an input field.
+ * @param {string} label - The label for the input field.
+ * @param {string} sublabel - The sublabel for the input field.
+ * @param {boolean} disabled - Whether the input field is disabled.
+ * @param {string} helpIconHintText - The hint text for the help icon.
+ * @param {boolean} required - Whether the input field is required.
+ */
+declare const InputLabels: ({ label, sublabel, disabled, helpIconHintText, name, required, }: InputLabelsProps) => "" | import("react/jsx-runtime").JSX.Element | undefined;
+export default InputLabels;

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

@@ -0,0 +1,8 @@
+import { CSSObject } from 'styled-components';
+import { MenuV2Props } from './types';
+export declare const contentBaseStyle: CSSObject;
+declare const Menu: {
+    ({ trigger, items, asModal, alignment, side, sideOffset, alignOffset, collisonBoundaryRef, maxHeight, enableSearch, searchPlaceholder, minWidth, maxWidth, open, onOpenChange, }: MenuV2Props): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Menu;

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

@@ -0,0 +1,3 @@
+import * as RadixMenu from '@radix-ui/react-dropdown-menu';
+declare const MenuGroupLabel: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<RadixMenu.DropdownMenuLabelProps & import('react').RefAttributes<HTMLDivElement>, never>> & string & Omit<import('react').ForwardRefExoticComponent<RadixMenu.DropdownMenuLabelProps & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;
+export default MenuGroupLabel;

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

@@ -0,0 +1,9 @@
+import { MenuItemV2Type } from './types';
+declare const MenuItem: {
+    ({ item, idx }: {
+        item: MenuItemV2Type;
+        idx: number;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default MenuItem;

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

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+export declare const MenuPlayground: React.FC;
+export default MenuPlayground;

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

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+export declare const MenuPlaygroundComprehensive: React.FC;
+export default MenuPlaygroundComprehensive;

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

@@ -0,0 +1,5 @@
+import { MenuItemV2Type } from './types';
+export declare const SubMenu: ({ item, idx, }: {
+    item: MenuItemV2Type;
+    idx: number;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { default as Menu } from './Menu';
+export * from './types';

package/dist/components/Menu/menu.styles.d.ts

@@ -0,0 +1,2 @@
+import { CSSObject } from 'styled-components';
+export declare const contentBaseStyle: CSSObject;

package/dist/components/Menu/menu.tokens.d.ts

@@ -0,0 +1,100 @@
+import { CSSObject } from 'styled-components';
+import { MenuItemV2ActionType, MenuItemV2Variant } from './types';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+export type MenuItemStates = 'default' | 'hover' | 'active' | 'focus' | 'focusVisible' | 'disabled';
+export type MenuTokensType = {
+    shadow: CSSObject['boxShadow'];
+    backgroundColor: CSSObject['backgroundColor'];
+    paddingTop: CSSObject['paddingTop'];
+    paddingBottom: CSSObject['paddingBottom'];
+    border: CSSObject['border'];
+    outline: CSSObject['outline'];
+    borderRadius: CSSObject['borderRadius'];
+    item: {
+        padding: CSSObject['padding'];
+        margin: CSSObject['margin'];
+        borderRadius: CSSObject['borderRadius'];
+        backgroundColor: {
+            [MenuItemV2Variant.DEFAULT]: {
+                enabled: {
+                    [key in MenuItemStates]: CSSObject['backgroundColor'];
+                };
+                disabled: {
+                    [key in MenuItemStates]: CSSObject['backgroundColor'];
+                };
+            };
+            [MenuItemV2Variant.ACTION]: {
+                [key in MenuItemV2ActionType]: {
+                    enabled: {
+                        [key in MenuItemStates]: CSSObject['backgroundColor'];
+                    };
+                    disabled: {
+                        [key in MenuItemStates]: CSSObject['backgroundColor'];
+                    };
+                };
+            };
+        };
+        cursor: CSSObject['cursor'];
+        gap: CSSObject['gap'];
+        label: {
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            color: {
+                [MenuItemV2Variant.DEFAULT]: {
+                    enabled: {
+                        [key in MenuItemStates]: CSSObject['color'];
+                    };
+                    disabled: {
+                        [key in MenuItemStates]: CSSObject['color'];
+                    };
+                };
+                [MenuItemV2Variant.ACTION]: {
+                    [key in MenuItemV2ActionType]: {
+                        enabled: {
+                            [key in MenuItemStates]: CSSObject['color'];
+                        };
+                        disabled: {
+                            [key in MenuItemStates]: CSSObject['color'];
+                        };
+                    };
+                };
+            };
+        };
+        subLabel: {
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            color: {
+                [MenuItemV2Variant.DEFAULT]: {
+                    enabled: {
+                        [key in MenuItemStates]: CSSObject['color'];
+                    };
+                    disabled: {
+                        [key in MenuItemStates]: CSSObject['color'];
+                    };
+                };
+                [MenuItemV2Variant.ACTION]: {
+                    [key in MenuItemV2ActionType]: {
+                        enabled: {
+                            [key in MenuItemStates]: CSSObject['color'];
+                        };
+                        disabled: {
+                            [key in MenuItemStates]: CSSObject['color'];
+                        };
+                    };
+                };
+            };
+        };
+    };
+    seperator: {
+        color: CSSObject['color'];
+        height: CSSObject['height'];
+        margin: CSSObject['margin'];
+    };
+};
+export type ResponsiveMenuTokensType = {
+    [key in keyof BreakpointType]: MenuTokensType;
+};
+declare const menuTokens: MenuTokensType;
+export declare const getMenuTokens: (foundationToken: FoundationTokenType) => ResponsiveMenuTokensType;
+export default menuTokens;

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

@@ -0,0 +1,55 @@
+export declare enum MenuAlignment {
+    START = "start",
+    CENTER = "center",
+    END = "end"
+}
+export declare enum MenuSide {
+    TOP = "top",
+    LEFT = "left",
+    RIGHT = "right",
+    BOTTOM = "bottom"
+}
+export type MenuV2Props = {
+    trigger: React.ReactNode;
+    items?: MenuV2GroupType[];
+    maxHeight?: number;
+    minHeight?: number;
+    maxWidth?: number;
+    minWidth?: number;
+    enableSearch?: boolean;
+    searchPlaceholder?: string;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    asModal?: boolean;
+    alignment?: MenuAlignment;
+    side?: MenuSide;
+    sideOffset?: number;
+    alignOffset?: number;
+    collisonBoundaryRef?: Element | null | Array<Element | null>;
+};
+export declare enum MenuItemV2Variant {
+    DEFAULT = "default",
+    ACTION = "action"
+}
+export declare enum MenuItemV2ActionType {
+    PRIMARY = "primary",
+    DANGER = "danger"
+}
+export type MenuItemV2Type = {
+    label: string;
+    subLabel?: string;
+    slot1?: React.ReactNode;
+    slot2?: React.ReactNode;
+    slot3?: React.ReactNode;
+    slot4?: React.ReactNode;
+    variant?: MenuItemV2Variant;
+    actionType?: MenuItemV2ActionType;
+    disabled?: boolean;
+    onClick?: () => void;
+    subMenu?: MenuItemV2Type[];
+};
+export type MenuV2GroupType = {
+    label?: string;
+    items: MenuItemV2Type[];
+    showSeparator?: boolean;
+};

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

@@ -0,0 +1,3 @@
+import { MenuItemV2Type, MenuV2GroupType } from './types';
+export declare const filterMenuGroups: (groups: MenuV2GroupType[], searchText: string) => MenuV2GroupType[];
+export declare const filterMenuItem: (item: MenuItemV2Type, lower: string) => MenuItemV2Type | null;

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

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

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

@@ -0,0 +1,2 @@
+export { default as Modal } from './Modal';
+export * from './types';

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

@@ -0,0 +1,48 @@
+import { CSSObject } from 'styled-components';
+import { FoundationTokenType } from '../../tokens/theme.token';
+export type ModalTokensType = {
+    shadow: CSSObject['boxShadow'];
+    zIndex: CSSObject['zIndex'];
+    borderRadius: CSSObject['borderRadius'];
+    headerContainer: {
+        padding: CSSObject['padding'];
+        borderBottom: CSSObject['borderBottom'];
+        borderTop: CSSObject['borderTop'];
+        borderLeft: CSSObject['borderLeft'];
+        borderRight: CSSObject['borderRight'];
+        borderRadius: CSSObject['borderRadius'];
+        backgroundColor: CSSObject['backgroundColor'];
+        header: {
+            color: CSSObject['color'];
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+        };
+        subtitle: {
+            color: CSSObject['color'];
+            fontSize: CSSObject['fontSize'];
+        };
+    };
+    bodyContainer: {
+        padding: CSSObject['padding'];
+        borderBottom: CSSObject['borderBottom'];
+        borderTop: CSSObject['borderTop'];
+        borderLeft: CSSObject['borderLeft'];
+        borderRight: CSSObject['borderRight'];
+        borderRadius: CSSObject['borderRadius'];
+        backgroundColor: CSSObject['backgroundColor'];
+    };
+    footerContainer: {
+        padding: CSSObject['padding'];
+        borderBottom: CSSObject['borderBottom'];
+        borderTop: CSSObject['borderTop'];
+        borderLeft: CSSObject['borderLeft'];
+        borderRight: CSSObject['borderRight'];
+        borderRadius: CSSObject['borderRadius'];
+        backgroundColor: CSSObject['backgroundColor'];
+        alignItems: CSSObject['alignItems'];
+        gap: CSSObject['gap'];
+    };
+};
+export declare const modalTokens: ModalTokensType;
+export declare const getModalComponentTokens: (foundationToken: FoundationTokenType) => ModalTokensType;
+export default modalTokens;

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

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { ButtonV2Props } from '../Button';
+type ModalButtonAction = Omit<ButtonV2Props, 'buttonGroupPosition'>;
+export type ModalProps = {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: string;
+    subtitle?: string;
+    children: ReactNode;
+    primaryAction?: ModalButtonAction;
+    secondaryAction?: ModalButtonAction;
+    className?: string;
+    showCloseButton?: boolean;
+    showHeader?: boolean;
+    showFooter?: boolean;
+    closeOnBackdropClick?: boolean;
+    customHeader?: ReactNode;
+    customFooter?: ReactNode;
+    headerRightSlot?: ReactNode;
+    showDivider?: boolean;
+};
+export {};

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

@@ -0,0 +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, useDrawerOnMobile, minWidth, maxWidth, maxHeight, alignment, side, sideOffset, alignOffset, }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
+export default MultiSelect;