@zealicsolutions/web-ui 1.0.118 → 1.0.119

package/dist/cjs/molecules/Checklist/Checklist.d.ts

@@ -0,0 +1,69 @@
+import { FormGroupProps } from '@mui/material';
+import { ConfigurationItemInfo } from 'containers';
+import { FC } from 'react';
+export type ChecklistItemType = {
+    id: string;
+    type: 'checklist_item';
+    label: string;
+    textColor?: string;
+    fontSize?: string;
+    fontFamily?: string;
+    fontWeight?: string;
+    textAlign?: 'left' | 'center' | 'right' | 'justify';
+    interacted?: 'checked' | 'unchecked';
+    disabled?: boolean;
+    isSystemDriven?: boolean;
+    iconName?: string;
+    iconColor?: string;
+    checkedIconName?: string;
+    checkedIconColor?: string;
+};
+export type DividerItemType = {
+    id: string;
+    type: 'divider_item';
+    orientation?: 'horizontal' | 'vertical';
+    variant?: 'fullWidth' | 'inset' | 'middle';
+    color?: string;
+    thickness?: string;
+};
+export type TextItemType = {
+    id: string;
+    type: 'text_item';
+    text: string;
+    textColor?: string;
+    fontSize?: string;
+    fontFamily?: string;
+    fontWeight?: string;
+    textAlign?: 'left' | 'center' | 'right' | 'justify';
+};
+export type RichTextItemType = {
+    id: string;
+    type: 'rich_text_item';
+    text: string;
+    textColor?: string;
+    fontSize?: string;
+    fontFamily?: string;
+    fontWeight?: string;
+    textAlign?: 'left' | 'center' | 'right' | 'justify';
+};
+export type ChecklistItem = ChecklistItemType | DividerItemType | TextItemType | RichTextItemType;
+export type ChecklistProps = FormGroupProps & {
+    gap?: string;
+    moleculeId?: string;
+    items: ChecklistItem[];
+    iconSize?: 'small' | 'medium' | 'large';
+    labelPlacement?: 'start' | 'end' | 'top' | 'bottom';
+    width?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    paddingTop?: string;
+    paddingRight?: string;
+    paddingBottom?: string;
+    paddingLeft?: string;
+    marginTop?: string;
+    marginRight?: string;
+    marginBottom?: string;
+    marginLeft?: string;
+    configurationItemInfo?: ConfigurationItemInfo;
+};
+export declare const Checklist: FC<ChecklistProps>;

package/dist/cjs/molecules/Checklist/Checklist.stories.d.ts

@@ -0,0 +1,12 @@
+import type { StoryObj } from '@storybook/react';
+import { BaseMolecule } from '../BaseMolecule';
+type Story = StoryObj<typeof BaseMolecule>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const ChecklistExamples: Story;
+export declare const BasicTodoList: Story;
+export declare const ProfessionalFormChecklist: Story;
+export declare const MixedContentChecklist: Story;
+export declare const CompactMobileChecklist: Story;
+export declare const DarkThemeChecklist: Story;
+export declare const ColorfulAccentChecklist: Story;

package/dist/cjs/molecules/Chip/Chip.d.ts

@@ -0,0 +1,28 @@
+import { SxProps, Theme, TypographyProps } from '@mui/material';
+import React from 'react';
+export interface ChipMoleculeProps {
+    text: string;
+    variant?: 'outlined' | 'filled';
+    icon?: string;
+    backgroundColor?: string;
+    borderColor?: string;
+    borderWeight?: string;
+    size?: 'small' | 'medium';
+    textAlign?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
+    textColor?: string;
+    wrap?: boolean;
+    fontSize?: number | string;
+    fontFamily?: TypographyProps['fontFamily'];
+    fontWeight?: 'normal' | 'bold';
+    marginLeft?: string;
+    marginTop?: string;
+    marginRight?: string;
+    marginBottom?: string;
+    paddingLeft?: string;
+    paddingTop?: string;
+    paddingRight?: string;
+    paddingBottom?: string;
+    sx?: SxProps<Theme>;
+    configurationItemInfo?: Record<string, unknown>;
+}
+export declare const ChipMolecule: React.FC<ChipMoleculeProps>;

package/dist/cjs/molecules/Chip/Chip.stories.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+import { BaseMolecule } from '../BaseMolecule';
+type Story = StoryObj<typeof BaseMolecule>;
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("../BaseMolecule").BaseMoleculeProps>;
+    parameters: {
+        layout: string;
+    };
+    decorators: ((Story: any) => import("@emotion/react/jsx-runtime").JSX.Element)[];
+};
+export default _default;
+export declare const ChipExamples: Story;
+export declare const BasicFilledChip: Story;
+export declare const OutlinedChip: Story;
+export declare const ChipWithIcon: Story;
+export declare const SuccessStatusChip: Story;
+export declare const ErrorStatusChip: Story;
+export declare const WarningStatusChip: Story;
+export declare const TagChip: Story;
+export declare const PremiumChip: Story;

package/dist/cjs/molecules/Consent/Consent.stories.d.ts

@@ -0,0 +1,10 @@
+import type { StoryObj } from '@storybook/react';
+import { BaseMolecule } from '../BaseMolecule';
+type Story = StoryObj<typeof BaseMolecule>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const ConsentExamples: Story;
+export declare const DefaultConsent: Story;
+export declare const StyledConsent: Story;
+export declare const CompactConsent: Story;
+export declare const WarningConsent: Story;

package/dist/cjs/molecules/Consent/ConsentMolecule.d.ts

@@ -0,0 +1,25 @@
+import { BoxProps, SxProps, Theme } from '@mui/material';
+import { ConfigurationItemInfo, ConsentFieldMoleculeType } from 'containers';
+type ConsentMoleculeProps = BoxProps & {
+    properties: ConsentFieldMoleculeType['properties'];
+    htmlElementId: string;
+    isOnClickDisabled?: boolean;
+    configurationItemInfo?: ConfigurationItemInfo;
+    paddingTop?: string;
+    paddingRight?: string;
+    paddingBottom?: string;
+    paddingLeft?: string;
+    marginTop?: string;
+    marginRight?: string;
+    marginBottom?: string;
+    marginLeft?: string;
+    width?: string | number;
+    height?: string | number;
+    minHeight?: string;
+    maxHeight?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    sx?: SxProps<Theme>;
+};
+export declare const ConsentMolecule: ({ properties, htmlElementId, configurationItemInfo, paddingTop, paddingRight, paddingBottom, paddingLeft, marginTop, marginRight, marginBottom, marginLeft, width, height, minHeight, maxHeight, minWidth, maxWidth, sx, ...rest }: ConsentMoleculeProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/cjs/molecules/CurrencyInputtField/CurrencyInputField.d.ts

@@ -0,0 +1,40 @@
+import type { SxProps, Theme } from '@mui/system';
+import { ConfigurationItemInfo } from 'containers';
+import React from 'react';
+export interface CurrencyInputFieldProps {
+    required?: boolean;
+    requiredErrorText?: string;
+    validationErrorText?: string;
+    isDisplayOnly?: boolean;
+    backgroundColor?: string;
+    textAlign?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
+    textColor?: string;
+    fontSize?: number | string;
+    fontFamily?: string;
+    fontWeight?: 'normal' | 'bold';
+    borderColor?: string;
+    marginLeft?: string;
+    marginTop?: string;
+    marginRight?: string;
+    marginBottom?: string;
+    paddingLeft?: string;
+    paddingTop?: string;
+    paddingRight?: string;
+    paddingBottom?: string;
+    width?: string;
+    height?: string;
+    minHeight?: string;
+    maxHeight?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    text?: string;
+    placeholderText?: string;
+    configurationItemInfo?: ConfigurationItemInfo;
+    name: string;
+    numericPrecision?: string;
+    currency?: string;
+    placement?: 'left' | 'right';
+    sourceDataModelField?: string;
+    sx?: SxProps<Theme>;
+}
+export declare const CurrencyInputField: React.FC<CurrencyInputFieldProps>;

package/dist/cjs/molecules/CurrencyInputtField/CurrencyInputField.stories.d.ts

@@ -0,0 +1,12 @@
+import type { StoryObj } from '@storybook/react';
+import { BaseMolecule } from '../BaseMolecule';
+type Story = StoryObj<typeof BaseMolecule>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const CurrencyInputFieldExamples: Story;
+export declare const BasicPriceInput: Story;
+export declare const CurrencyDisplay: Story;
+export declare const RequiredAmount: Story;
+export declare const CompactPrice: Story;
+export declare const PremiumAmount: Story;
+export declare const MinimalistAmount: Story;

package/dist/cjs/molecules/CustomValidation/CustomValidation.d.ts

@@ -0,0 +1 @@
+export { CustomValidation, type CustomValidationProps, type CustomValidationRule } from 'components/CustomValidation/CustomValidation';

package/dist/cjs/molecules/DateCalendar/DateCalendar.d.ts

@@ -0,0 +1,41 @@
+import { FC } from 'react';
+import { ConfigurationItemInfo } from '../../containers';
+import { BooleanProperties, DataCaptureProperties, DateProperties, TextProperties } from '../../containers/types/moleculeTypes';
+export interface DateCalendarProps {
+    required?: boolean;
+    requiredErrorText?: string;
+    validationErrorText?: string;
+    name?: string;
+    isDisplayOnly?: boolean;
+    disabled?: boolean;
+    configurationItemInfo?: ConfigurationItemInfo;
+    sourceDataModelFieldId?: string;
+    minDate?: Date | string;
+    maxDate?: Date | string;
+    futureOnly?: boolean;
+    pastOnly?: boolean;
+    width?: string;
+    height?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    minHeight?: string;
+    maxHeight?: string;
+    [key: string]: unknown;
+}
+export interface DateCalendarMoleculeProps {
+    properties: {
+        required?: BooleanProperties;
+        requiredErrorText?: TextProperties;
+        validationErrorText?: TextProperties;
+        sourceDataModelField?: DataCaptureProperties;
+        minDate?: DateProperties;
+        maxDate?: DateProperties;
+        futureOnly?: BooleanProperties;
+        pastOnly?: BooleanProperties;
+    };
+    config?: {
+        props?: DateCalendarProps;
+    };
+    configurationItemInfo?: ConfigurationItemInfo;
+}
+export declare const DateCalendar: FC<DateCalendarProps>;

package/dist/cjs/molecules/DateCalendar/DateCalendar.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { BaseMolecule } from '../BaseMolecule';
+type Story = StoryObj<typeof BaseMolecule>;
+declare const meta: Meta<typeof BaseMolecule>;
+export default meta;
+export declare const DateCalendarExamples: Story;
+export declare const BasicDateCalendar: Story;
+export declare const ModernDateCalendar: Story;
+export declare const CompactDateCalendar: Story;
+export declare const DarkDateCalendar: Story;
+export declare const ElegantDateCalendar: Story;

package/dist/cjs/molecules/DateCalendar/index.d.ts

@@ -0,0 +1,2 @@
+export { DateCalendar } from './DateCalendar';
+export type { DateCalendarMoleculeProps, DateCalendarProps } from './DateCalendar';

package/dist/cjs/molecules/DatePicker/DatePicker.d.ts

@@ -0,0 +1,42 @@
+import { SxProps, Theme } from '@mui/material';
+import { DatePickerProps as MuiDatePickerProps } from '@mui/x-date-pickers';
+import { ConfigurationItemInfo } from 'containers';
+import React from 'react';
+export interface DatePickerMoleculeProps extends Omit<MuiDatePickerProps, 'minDate' | 'maxDate'> {
+    required?: boolean;
+    placeholderText?: string;
+    requiredErrorText?: string;
+    validationErrorText?: string;
+    moleculeId?: string;
+    configurationItemInfo?: ConfigurationItemInfo;
+    text: string;
+    borderColor?: string;
+    fontSize?: string | number;
+    fontFamily?: string;
+    fontWeight?: string | number;
+    textColor?: string;
+    iconColor?: string;
+    minDate?: string;
+    maxDate?: string;
+    backgroundColor?: string;
+    marginLeft?: string;
+    marginTop?: string;
+    marginRight?: string;
+    marginBottom?: string;
+    paddingLeft?: string;
+    paddingTop?: string;
+    paddingRight?: string;
+    paddingBottom?: string;
+    width?: string;
+    height?: string;
+    minHeight?: string;
+    maxHeight?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    name: string;
+    sourceDataModelField?: string;
+    isDisplayOnly?: boolean;
+    displayFormat?: string;
+    sx?: SxProps<Theme>;
+}
+export declare const DatePickerMolecule: React.FC<DatePickerMoleculeProps>;

package/dist/cjs/molecules/DatePicker/DatePicker.stories.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+import { BaseMolecule } from '../BaseMolecule';
+type Story = StoryObj<typeof BaseMolecule>;
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("../BaseMolecule").BaseMoleculeProps>;
+    parameters: {
+        layout: string;
+    };
+    decorators: ((Story: any) => import("@emotion/react/jsx-runtime").JSX.Element)[];
+};
+export default _default;
+export declare const DatePickerExamples: Story;
+export declare const BasicDatePicker: Story;
+export declare const DisplayOnlyDatePicker: Story;
+export declare const DatePickerWithValidation: Story;
+export declare const StyledDatePicker: Story;
+export declare const CompactDatePicker: Story;

package/dist/cjs/molecules/Divider/Divider.d.ts

@@ -0,0 +1,18 @@
+import { SxProps } from '@mui/material';
+import { ConfigurationItemInfo } from 'containers';
+export interface DividerProps {
+    text?: string;
+    variant?: 'fullWidth' | 'inset' | 'middle';
+    moleculeId?: string;
+    lineWeight?: number;
+    orientation?: 'horizontal' | 'vertical';
+    borderColor?: string;
+    borderRadius?: number;
+    sx?: SxProps;
+    marginTop?: string | number;
+    marginRight?: string | number;
+    marginBottom?: string | number;
+    marginLeft?: string | number;
+    configurationItemInfo?: ConfigurationItemInfo;
+}
+export declare const Divider: ({ moleculeId, variant, lineWeight, orientation, borderColor, borderRadius, sx, marginTop, marginRight, marginBottom, marginLeft, configurationItemInfo, }: DividerProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/cjs/molecules/Divider/Divider.stories.d.ts

@@ -0,0 +1,13 @@
+import type { StoryObj } from '@storybook/react';
+import { BaseMolecule } from '../BaseMolecule';
+type Story = StoryObj<typeof BaseMolecule>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const DividerExamples: Story;
+export declare const BasicHorizontal: Story;
+export declare const StyledVertical: Story;
+export declare const InsetContent: Story;
+export declare const ThickAccent: Story;
+export declare const ModernGradient: Story;
+export declare const SubtleMenu: Story;
+export declare const MiddleVariant: Story;

package/dist/cjs/molecules/Drawer/Drawer.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { DrawerProps } from './types';
+export declare const Drawer: React.FC<DrawerProps>;

package/dist/cjs/molecules/Drawer/Drawer.stories.d.ts

@@ -0,0 +1,12 @@
+import type { StoryObj } from '@storybook/react';
+import { BaseMolecule } from '../BaseMolecule';
+type Story = StoryObj<typeof BaseMolecule>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const DrawerExamples: Story;
+export declare const PersistentNavigationDrawer: Story;
+export declare const TemporaryOverlayDrawer: Story;
+export declare const PermanentSidebarDrawer: Story;
+export declare const DrawerWithButtonTrigger: Story;
+export declare const BottomSheetDrawer: Story;
+export declare const ProductionSidebarNavigation: Story;

package/dist/cjs/molecules/Drawer/styles.d.ts

@@ -0,0 +1,62 @@
+/// <reference types="react" />
+import { DrawerProps as DrawerComponentProps } from '@mui/material';
+import { Anchor, DrawerVariant } from './types';
+export type StyledDrawerProps = DrawerComponentProps & {
+    anchor: Anchor;
+    variant?: DrawerVariant;
+    paddingTop?: string;
+    paddingRight?: string;
+    paddingBottom?: string;
+    paddingLeft?: string;
+    height?: number | string;
+    width?: number | string;
+    backgroundColor?: string;
+    marginTop?: string;
+    marginRight?: string;
+    marginBottom?: string;
+    marginLeft?: string;
+    positionType?: 'absolute' | 'normal';
+};
+export declare const BaseDrawer: import("@emotion/styled").StyledComponent<DrawerComponentProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    anchor: Anchor;
+    variant?: DrawerVariant | undefined;
+    paddingTop?: string | undefined;
+    paddingRight?: string | undefined;
+    paddingBottom?: string | undefined;
+    paddingLeft?: string | undefined;
+    height?: string | number | undefined;
+    width?: string | number | undefined;
+    backgroundColor?: string | undefined;
+    marginTop?: string | undefined;
+    marginRight?: string | undefined;
+    marginBottom?: string | undefined;
+    marginLeft?: string | undefined;
+    positionType?: "normal" | "absolute" | undefined;
+}, {}, {}>;
+export declare const DrawerWithCloseIcon: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DrawerContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IconWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    top?: string | number | undefined;
+    left?: string | number | undefined;
+    borderRadius?: string | number | undefined;
+    elevation?: number | undefined;
+    backgroundColor?: string | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DrawerItemsList: import("@emotion/styled").StyledComponent<import("@mui/material").ListOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "key" | keyof import("react").HTMLAttributes<HTMLUListElement>> & {
+    ref?: ((instance: HTMLUListElement | null) => void) | import("react").RefObject<HTMLUListElement> | null | undefined;
+}, "className" | "style" | "classes" | "children" | "sx" | "subheader" | "dense" | "disablePadding"> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    gap?: string | number | undefined;
+}, {}, {}>;

package/dist/cjs/molecules/Drawer/types.d.ts

@@ -0,0 +1,169 @@
+/// <reference types="react" />
+import { SxProps, Theme } from '@mui/material/styles';
+import { ConfigurationItemInfo, LinkProperties } from 'containers';
+import { SizesTypes, ThemeColors } from 'theme/types';
+export type DrawerItemType = 'menu_item' | 'divider_item' | 'text_item' | 'rich_text_item' | 'image_item';
+export interface BaseDrawerItem {
+    id: string;
+    type: DrawerItemType;
+}
+export interface DrawerMenuItemType extends BaseDrawerItem {
+    type: 'menu_item';
+    text: string;
+    link?: LinkProperties;
+    disabled?: boolean;
+    startIcon?: string;
+    endIcon?: string;
+    textColor?: string;
+    fontSize?: string;
+    fontWeight?: 'normal' | 'bold';
+    fontFamily?: string;
+    wrap?: boolean;
+    textAlign?: 'left' | 'center' | 'right' | 'justify';
+    backgroundColor?: string;
+    paddingTop?: string;
+    paddingRight?: string;
+    paddingBottom?: string;
+    paddingLeft?: string;
+}
+export interface DrawerDividerItemType extends BaseDrawerItem {
+    type: 'divider_item';
+    variant?: 'fullWidth' | 'inset' | 'middle';
+    lineWeight?: number;
+    orientation?: 'horizontal' | 'vertical';
+    borderColor?: string;
+    borderRadius?: number;
+    marginTop?: string | number;
+    marginRight?: string | number;
+    marginBottom?: string | number;
+    marginLeft?: string | number;
+}
+export interface DrawerTextItemType extends BaseDrawerItem {
+    type: 'text_item';
+    text?: string;
+    align?: 'left' | 'center' | 'right' | 'justify';
+    color?: string;
+    wrap?: string;
+    variant?: string;
+    fontSize?: string | number;
+    fontWeight?: 'normal' | 'bold';
+    fontFamily?: string;
+    marginTop?: string;
+    marginRight?: string;
+    marginBottom?: string;
+    marginLeft?: string;
+    paddingTop?: string;
+    paddingRight?: string;
+    paddingBottom?: string;
+    paddingLeft?: string;
+}
+export interface DrawerRichTextItemType extends BaseDrawerItem {
+    type: 'rich_text_item';
+    text?: string;
+    align?: 'left' | 'center' | 'right' | 'justify';
+    color?: string;
+    wrap?: string;
+    variant?: string;
+    fontSize?: string | number;
+    fontWeight?: 'normal' | 'bold';
+    fontFamily?: string;
+    marginTop?: string;
+    marginRight?: string;
+    marginBottom?: string;
+    marginLeft?: string;
+    paddingTop?: string;
+    paddingRight?: string;
+    paddingBottom?: string;
+    paddingLeft?: string;
+    numberOfLines?: number;
+}
+export interface DrawerImageItemType extends BaseDrawerItem {
+    type: 'image_item';
+    src: string;
+    alt?: string;
+    link?: LinkProperties;
+    height?: number | string;
+    width?: number | string;
+    raised?: boolean;
+    borderRadius?: string | number;
+    marginTop?: string;
+    marginRight?: string;
+    marginBottom?: string;
+    marginLeft?: string;
+    paddingTop?: string;
+    paddingRight?: string;
+    paddingBottom?: string;
+    paddingLeft?: string;
+}
+export type DrawerItem = DrawerMenuItemType | DrawerDividerItemType | DrawerTextItemType | DrawerRichTextItemType | DrawerImageItemType;
+export type Anchor = 'top' | 'left' | 'bottom' | 'right';
+export type DrawerVariant = 'permanent' | 'persistent' | 'temporary';
+export interface DrawerProps {
+    anchor?: Anchor;
+    variant?: DrawerVariant;
+    open?: boolean;
+    onClose?: (event: React.KeyboardEvent | React.MouseEvent, reason: string) => void;
+    items?: DrawerItem[];
+    padding?: SizesTypes | number | string;
+    paddingTop?: string;
+    paddingRight?: string;
+    paddingBottom?: string;
+    paddingLeft?: string;
+    height?: number | string;
+    width?: number | string;
+    mobileWidth?: string | number;
+    backgroundColor?: string;
+    gap?: number | string;
+    marginTop?: string;
+    marginRight?: string;
+    marginBottom?: string;
+    marginLeft?: string;
+    withButton?: boolean;
+    buttonText?: string;
+    buttonVariant?: 'contained' | 'outlined' | 'text';
+    buttonTextColor?: string;
+    buttonFontSize?: number | string;
+    buttonFontWeight?: 'normal' | 'bold';
+    buttonFontFamily?: string;
+    buttonDisabled?: boolean;
+    buttonGap?: number | string;
+    buttonStartIcon?: string;
+    buttonEndIcon?: string;
+    buttonBorderRadius?: string | number;
+    buttonMarginTop?: string;
+    buttonMarginRight?: string;
+    buttonMarginBottom?: string;
+    buttonMarginLeft?: string;
+    buttonPaddingTop?: string;
+    buttonPaddingRight?: string;
+    buttonPaddingBottom?: string;
+    buttonPaddingLeft?: string;
+    buttonIconOnly?: boolean;
+    buttonElevation?: number;
+    buttonFillColor?: string;
+    buttonFillColorDisabled?: string;
+    buttonFillColorHover?: string;
+    buttonFillColorPressed?: string;
+    buttonBorderColor?: string;
+    buttonBorderColorDisabled?: string;
+    buttonBorderColorHover?: string;
+    buttonBorderColorPressed?: string;
+    buttonTextColorDisabled?: string;
+    buttonTextColorHover?: string;
+    buttonTextColorPressed?: string;
+    buttonColor?: string;
+    buttonDisabledColor?: string;
+    withCloseIcon?: boolean;
+    closeIconColor?: ThemeColors | string;
+    closeIconName?: string;
+    closeIconSize?: number;
+    closeIconBackgroundColor?: string;
+    closeIconVisible?: boolean;
+    closeIconTop?: string | number;
+    closeIconLeft?: string | number;
+    closeIconBorderRadius?: number | string;
+    closeIconElevation?: number;
+    moleculeId?: string;
+    configurationItemInfo?: ConfigurationItemInfo;
+    sx?: SxProps<Theme>;
+}