@zealicsolutions/web-ui 0.3.192 → 0.3.194

package/dist/esm/src/containers/types/moleculeTypes.d.ts

@@ -1,10 +1,12 @@
 import { LinkVariant, SelectOption } from 'atoms';
-import { AdditionalTabContainerProps, AvatarDropdownMenuConfigType, AvatarDropdownProps, ButtonProps, CheckboxFieldProps, ConsentType, ImageProps, InputFieldProps, LinkProps, RadioButtonFieldProps, SelectFieldProps, TabGroupProps, TextMoleculeProps } from 'molecules';
+import { AdditionalTabContainerProps, AvatarDropdownMenuConfigType, AvatarDropdownProps, ButtonProps, CheckboxFieldProps, ChecklistItem, ConsentType, ImageProps, InputFieldProps, LinkProps, RadioButtonFieldProps, SelectFieldProps, TabGroupProps, TextMoleculeProps } from 'molecules';
 import { Dispatch, SetStateAction } from 'react';
 import { UseFormReturn } from 'react-hook-form';
 import type { AnyObject, Nullable, StrictUnion, StylesType } from 'typescript';
+import { SizesTypes } from 'theme';
 import { ConditionConfig, ContainerComponentProps, MetadataType } from './types';
 import { MaskConfig } from '../../atoms/Input/helpers';
+import { CheckboxInternalConfigProps } from '../../atoms/Checkbox/types';
 export declare type ActionTypes = 'link' | 'popup' | 'drawer' | 'download' | 'submit' | 'reset' | 'destroy';
 export declare type DataModelFieldFormatCodeTypes = 'date' | 'email' | 'string' | 'integer' | 'boolean' | 'numeric' | 'zip_code' | 'phone_number';
 export declare type DataModelFieldFormatValueTypes = 'any' | 'text' | 'email' | 'integer' | 'numerical' | 'us_zip_code' | 'phone_number' | 'month_year_date' | 'day_month_year_date' | 'month_day_year_date' | 'year_month_day_date';
@@ -126,13 +128,20 @@ export interface ProcessStepsAttributes {
         steps: ProcessStep[];
     };
 }
-export declare type MoleculeTypes = 'image' | 'text' | 'button' | 'video' | 'header_tab_group' | 'input_field' | 'select_field' | 'radio_button_field' | 'checkbox_field' | 'consent' | 'link' | 'password_setup_field' | 'account_button' | 'process_steps';
+export interface ChecklistAttributes {
+    checklist: {
+        attributeType: 'checklist';
+        items: ChecklistItem[];
+    };
+}
+export declare type MoleculeTypes = 'image' | 'text' | 'button' | 'video' | 'header_tab_group' | 'input_field' | 'select_field' | 'radio_button_field' | 'checkbox_field' | 'consent' | 'link' | 'password_setup_field' | 'account_button' | 'process_steps' | 'checklist';
 export interface BaseMolecule {
     id: string;
-    moleculeLibraryId: string;
-    instance: 'molecule';
     type: MoleculeTypes;
-    metadata?: MetadataType;
+    instance: 'molecule';
+    metadata: MetadataType;
+    moleculeLibraryId: string;
+    organismLibraryMoleculeId: string;
 }
 export interface ImageMolecule extends BaseMolecule {
     type: 'image';
@@ -185,6 +194,16 @@ export interface VideoMolecule extends BaseMolecule {
 }
 export interface TabGroupMolecule extends BaseMolecule {
     type: 'header_tab_group';
+    attributes: Partial<{
+        tabs: {
+            tabKey: string;
+            text: string;
+            disabled: boolean;
+            divider: boolean;
+        }[];
+        activeTabKey: string;
+        attributeType: 'tab_group';
+    }>;
     config: {
         props: TabGroupProps;
         wide: AdditionalTabContainerProps;
@@ -300,7 +319,16 @@ export interface ProcessStepsMoleculeType extends BaseMolecule {
     organismMoleculeLibraryId: string;
     attributes: ProcessStepsAttributes;
 }
-export declare type Molecule = StrictUnion<ImageMolecule | TextMoleculeType | ButtonMolecule | VideoMolecule | TabGroupMolecule | TextInputMolecule | SelectFieldMolecule | RadioButtonFieldMolecule | CheckboxFieldMolecule | ConsentFieldMolecule | LinkMolecule | PasswordSetupMolecule | AccountButtonMolecule | ProcessStepsMoleculeType> & Partial<{
+export interface ChecklistsMolecule extends BaseMolecule {
+    type: 'checklist';
+    config: {
+        props: {
+            gap: SizesTypes;
+        } & CheckboxInternalConfigProps;
+    };
+    attributes: ChecklistAttributes;
+}
+export declare type Molecule = StrictUnion<ImageMolecule | TextMoleculeType | ButtonMolecule | VideoMolecule | TabGroupMolecule | TextInputMolecule | SelectFieldMolecule | RadioButtonFieldMolecule | CheckboxFieldMolecule | ConsentFieldMolecule | LinkMolecule | PasswordSetupMolecule | AccountButtonMolecule | ProcessStepsMoleculeType | ChecklistsMolecule> & Partial<{
     form: UseFormReturn<any>;
     formData: AnyObject;
     setFormData: Dispatch<SetStateAction<AnyObject>>;

package/dist/esm/src/containers/types/types.d.ts

@@ -75,13 +75,14 @@ export declare type AdditionalContainerProps = Partial<{
     containerStyle: CSSProperties;
     containerProps: ContainerPropsType;
 }>;
-export declare type ContainerProps = PropsWithChildren<Partial<{
+export declare type ContainerProps = PropsWithChildren<{
     type: ContainerType;
+    metadata: MetadataType;
+} & Partial<{
     containerTemplateType: ContainerTemplateType;
     wide: AdditionalContainerProps;
     compact: AdditionalContainerProps;
     props: ContainerPropsType;
-    metadata: MetadataType;
     isMobile: boolean;
 }>>;
 export declare type ContainerComponentProps = {

package/dist/esm/src/contexts/OrganismContext/OrganismContext.d.ts

@@ -1,4 +1,4 @@
-import { ContainerComponentProps, Molecule } from 'containers';
+import { ContainerComponentProps, MetadataType, Molecule } from 'containers';
 import { InputFieldTypes } from 'fieldsConfiguration';
 import { PasswordRuleValidation } from 'molecules/PasswordSetup/PasswordSetup';
 import { Dispatch, SetStateAction } from 'react';
@@ -25,9 +25,7 @@ export declare type OrganismContextType = {
     editable?: boolean;
     isFormInEditMode?: boolean;
     isConfigurationMode?: boolean;
-    organismMetadata?: {
-        stateListenerId?: string;
-    } & AnyObject;
+    organismMetadata?: MetadataType;
     onConfigurationItemClicked: (itemInfo?: Omit<ConfigurationItem, 'organismId'>) => void;
     selectedConfigurationItemId?: string;
 };

package/dist/esm/src/contexts/OrganismContext/OrganismContextProvider.d.ts

@@ -1,11 +1,14 @@
 import { PropsWithChildren } from 'react';
-import { ContainerComponentProps, Molecule } from 'containers';
+import { ContainerComponentProps, ContainerType, MetadataType, Molecule, MoleculeTypes } from 'containers';
 import type { AnyObject } from 'typescript';
 import { PasswordRuleValidation } from 'molecules/PasswordSetup/PasswordSetup';
 export declare type ConfigurationItem = {
     entity: 'container' | 'molecule';
     entityId: string;
     organismId: string;
+    entityType: MoleculeTypes | ContainerType;
+    entityMetadata: MetadataType;
+    organismLibraryMoleculeId?: string;
 };
 export declare type OrganismContextProviderProps = PropsWithChildren<{
     organismId: string;

package/dist/esm/src/molecules/CheckboxField/CheckboxGroup.stories.d.ts

@@ -0,0 +1,32 @@
+import type { StoryFn } from '@storybook/react';
+import { CheckboxGroup as CheckboxGroupComponent } from 'molecules';
+declare const _default: {
+    title: string;
+    component: ({ ref, onBlur, onChange, checkboxesProps }: Partial<{
+        ref: import("react-hook-form").RefCallBack;
+        onBlur: import("../../typescript").Callback;
+        onChange: (checkedIds: string[]) => void;
+        checkboxesProps: Partial<{
+            checkboxGroupWrapperStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+            checkboxFieldWrapperStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+            onChange: (id: string) => void;
+            disabled: boolean;
+            options?: import("../..").SelectOption[] | undefined;
+            selectedIds?: string[] | undefined;
+            isError?: boolean | undefined;
+            isEditMode?: boolean | undefined;
+            isRichText: boolean;
+            internalConfig: Partial<{
+                selectedCheckboxBackgroundColor: string;
+                selectedCheckboxIconColor: string;
+                buttonPadding: number;
+                textPadding: number;
+                styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+                wrapperStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+                buttonOptionSpacing?: import("theme").SizesTypes | undefined;
+            }>;
+        }>;
+    }>) => JSX.Element;
+};
+export default _default;
+export declare const CheckboxGroup: StoryFn<typeof CheckboxGroupComponent>;

package/dist/esm/src/molecules/Checklist/Checklist.d.ts

@@ -0,0 +1,23 @@
+import { SizesTypes } from 'theme';
+import { CheckboxInternalConfigProps } from 'atoms/Checkbox/types';
+import type { Nullable } from 'typescript';
+export declare type ChecklistItem = {
+    id: string;
+    isChecked: boolean;
+    eventId: Nullable<string>;
+    type: 'user_interactive' | 'system_controlled';
+    label: {
+        text: string;
+        isRichText: boolean;
+    };
+};
+export declare type ChecklistProps = {
+    items: ChecklistItem[];
+    props: {
+        gap: SizesTypes;
+    } & CheckboxInternalConfigProps;
+};
+export declare const Checklist: ({ items, props: { gap, ...checkboxProps } }: ChecklistProps) => JSX.Element;
+export declare const ChecklistWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    $gap: SizesTypes;
+}, never>;

package/dist/esm/src/molecules/Checklist/Checklist.stories.d.ts

@@ -0,0 +1,8 @@
+import type { StoryFn } from '@storybook/react';
+import { Checklist as ChecklistComponent } from 'molecules';
+declare const _default: {
+    title: string;
+    component: ({ items, props: { gap, ...checkboxProps } }: import("molecules").ChecklistProps) => JSX.Element;
+};
+export default _default;
+export declare const Checklist: StoryFn<typeof ChecklistComponent>;

package/dist/esm/src/molecules/Image/Image.d.ts

@@ -15,5 +15,6 @@ export declare type ImageProps = {
     styles: StylesType;
     metadata: MetadataType;
     htmlElementId: string;
+    isOnClickDisabled: boolean;
 }>;
-export declare const Image: ({ src, onClick, link, altText, styles, width, height, id, behaveAs, cornerRadius, htmlElementId, metadata, }: ImageProps) => JSX.Element | null;
+export declare const Image: ({ src, onClick, link, altText, styles, width, height, id, behaveAs, cornerRadius, htmlElementId, metadata, isOnClickDisabled, }: ImageProps) => JSX.Element | null;

package/dist/esm/src/molecules/Image/Image.stories.d.ts

@@ -2,7 +2,7 @@ import type { StoryFn } from '@storybook/react';
 import { Image as ImageComponent } from './Image';
 declare const _default: {
     title: string;
-    component: ({ src, onClick, link, altText, styles, width, height, id, behaveAs, cornerRadius, htmlElementId, metadata, }: import("./Image").ImageProps) => JSX.Element | null;
+    component: ({ src, onClick, link, altText, styles, width, height, id, behaveAs, cornerRadius, htmlElementId, metadata, isOnClickDisabled, }: import("./Image").ImageProps) => JSX.Element | null;
 };
 export default _default;
 export declare const Image: StoryFn<typeof ImageComponent>;

package/dist/esm/src/molecules/Stepper/Stepper.d.ts

@@ -6,5 +6,6 @@ export declare type StepperProps = {
     htmlElementId?: string;
     metadata: MetadataType;
     isMobile?: boolean;
+    isOnClickDisabled?: boolean;
 };
-export declare const Stepper: ({ steps, orientation, htmlElementId, metadata, isMobile, }: StepperProps) => JSX.Element | null;
+export declare const Stepper: ({ steps, orientation, htmlElementId, metadata, isMobile, isOnClickDisabled, }: StepperProps) => JSX.Element | null;

package/dist/esm/src/molecules/Stepper/Stepper.stories.d.ts

@@ -2,7 +2,7 @@ import { StoryFn } from '@storybook/react';
 import { StepperProps } from './Stepper';
 declare const _default: {
     title: string;
-    component: ({ steps, orientation, htmlElementId, metadata, isMobile, }: StepperProps) => JSX.Element | null;
+    component: ({ steps, orientation, htmlElementId, metadata, isMobile, isOnClickDisabled, }: StepperProps) => JSX.Element | null;
 };
 export default _default;
 export declare const Stepper: StoryFn<StepperProps>;

package/dist/esm/src/molecules/Video/Video.d.ts

@@ -15,5 +15,6 @@ export declare type VideoProps = {
     htmlElementId: string;
     moleculeId: string;
     isTrigger: boolean;
+    isOnClickDisabled: boolean;
 }>;
-export declare const Video: ({ style, src, width, height, template, autoplay, enableCoverImage, coverImageSrc, styles, htmlElementId, isTrigger, moleculeId, }: VideoProps) => JSX.Element | null;
+export declare const Video: ({ style, src, width, height, template, autoplay, enableCoverImage, coverImageSrc, styles, htmlElementId, isTrigger, moleculeId, isOnClickDisabled, }: VideoProps) => JSX.Element | null;

package/dist/esm/src/molecules/Video/Video.stories.d.ts

@@ -2,7 +2,7 @@ import type { StoryFn } from '@storybook/react';
 import { Video as VideoComponent } from './Video';
 declare const _default: {
     title: string;
-    component: ({ style, src, width, height, template, autoplay, enableCoverImage, coverImageSrc, styles, htmlElementId, isTrigger, moleculeId, }: import("./Video").VideoProps) => JSX.Element | null;
+    component: ({ style, src, width, height, template, autoplay, enableCoverImage, coverImageSrc, styles, htmlElementId, isTrigger, moleculeId, isOnClickDisabled, }: import("./Video").VideoProps) => JSX.Element | null;
 };
 export default _default;
 export declare const Video: StoryFn<typeof VideoComponent>;

package/dist/esm/src/molecules/index.d.ts

@@ -30,3 +30,4 @@ export * from './Button/Button';
 export * from './ZealUIModal/ZealUIModal';
 export * from './Consent/Consent';
 export * from './Link/Link';
+export * from './Checklist/Checklist';

package/dist/index.d.ts

@@ -10,12 +10,12 @@ import { StylesType, AnyObject as AnyObject$1, Callback as Callback$1, Nullable,
 import { RefCallBack, Control as Control$1, ControllerProps as ControllerProps$1 } from 'react-hook-form/dist/types';
 import { IconNames as IconNames$1 } from 'atoms/Icon/Icon';
 import * as containers from 'containers';
-import { ContainerComponentProps as ContainerComponentProps$1, Molecule as Molecule$1, FormStateType as FormStateType$1, ProcessTrackerStatus as ProcessTrackerStatus$1, StateConfigType as StateConfigType$1, ConditionConfig as ConditionConfig$1, ProcessStep as ProcessStep$1, MetadataType as MetadataType$1, MetadataStateConfig as MetadataStateConfig$1 } from 'containers';
+import { ContainerComponentProps as ContainerComponentProps$1, Molecule as Molecule$1, FormStateType as FormStateType$1, ProcessTrackerStatus as ProcessTrackerStatus$1, MoleculeTypes as MoleculeTypes$1, ContainerType as ContainerType$1, MetadataType as MetadataType$1, StateConfigType as StateConfigType$1, ConditionConfig as ConditionConfig$1, ProcessStep as ProcessStep$1, MetadataStateConfig as MetadataStateConfig$1 } from 'containers';
 import { FieldTypes as FieldTypes$1, UIFields as UIFields$1, InputFieldTypes as InputFieldTypes$1 } from 'fieldsConfiguration/types';
 import { ThemeColors as ThemeColors$2, FontSizesTypes as FontSizesTypes$1, SizesTypes as SizesTypes$2, BreakpointSizesTypes as BreakpointSizesTypes$1 } from 'theme/types';
 import * as atoms from 'atoms';
 import { SelectOption as SelectOption$1, LinkVariant as LinkVariant$1, TextProps as TextProps$1, IconNames as IconNames$2, TouchableOpacityProps as TouchableOpacityProps$1, AvatarProps as AvatarProps$1, TabProps as TabProps$1, InputProps as InputProps$1, SelectProps as SelectProps$1, RegularImageProps as RegularImageProps$1, TextButtonProps as TextButtonProps$1, TabTheme as TabTheme$1, RadioButtonsProps as RadioButtonsProps$1, RadioButtonInternalConfigProps as RadioButtonInternalConfigProps$1, HorizontalButtonsProps as HorizontalButtonsProps$1, IconProps as IconProps$1 } from 'atoms';
-import { ImageProps as ImageProps$1, TextMoleculeProps as TextMoleculeProps$1, ButtonProps as ButtonProps$1, TabGroupProps as TabGroupProps$1, AdditionalTabContainerProps as AdditionalTabContainerProps$1, InputFieldProps as InputFieldProps$1, SelectFieldProps as SelectFieldProps$1, RadioButtonFieldProps as RadioButtonFieldProps$1, CheckboxFieldProps as CheckboxFieldProps$1, ConsentType as ConsentType$1, LinkProps as LinkProps$1, AvatarDropdownProps as AvatarDropdownProps$1, AvatarDropdownMenuConfigType as AvatarDropdownMenuConfigType$1, FieldSectionProps as FieldSectionProps$1, BaseButtonProps as BaseButtonProps$1, MenuItem, ConsentProps as ConsentProps$1, HeroImageProps as HeroImageProps$1, ColumnsProps as ColumnsProps$1, EmphasizedTextProps as EmphasizedTextProps$1, FeedContentHeaderProps as FeedContentHeaderProps$1, AlertProps as AlertProps$1, BottomNaVBarItemProps as BottomNaVBarItemProps$1, MenuItemsProps as MenuItemsProps$1 } from 'molecules';
+import { ChecklistItem as ChecklistItem$1, ImageProps as ImageProps$1, TextMoleculeProps as TextMoleculeProps$1, ButtonProps as ButtonProps$1, TabGroupProps as TabGroupProps$1, AdditionalTabContainerProps as AdditionalTabContainerProps$1, InputFieldProps as InputFieldProps$1, SelectFieldProps as SelectFieldProps$1, RadioButtonFieldProps as RadioButtonFieldProps$1, CheckboxFieldProps as CheckboxFieldProps$1, ConsentType as ConsentType$1, LinkProps as LinkProps$1, AvatarDropdownProps as AvatarDropdownProps$1, AvatarDropdownMenuConfigType as AvatarDropdownMenuConfigType$1, FieldSectionProps as FieldSectionProps$1, BaseButtonProps as BaseButtonProps$1, MenuItem, ConsentProps as ConsentProps$1, HeroImageProps as HeroImageProps$1, ColumnsProps as ColumnsProps$1, EmphasizedTextProps as EmphasizedTextProps$1, FeedContentHeaderProps as FeedContentHeaderProps$1, AlertProps as AlertProps$1, BottomNaVBarItemProps as BottomNaVBarItemProps$1, MenuItemsProps as MenuItemsProps$1 } from 'molecules';
 import * as react_hook_form from 'react-hook-form';
 import { UseFormReturn, ValidationMode, ControllerProps, DeepPartial, FieldValues, FormState, Control } from 'react-hook-form';
 import { TooltipProps as TooltipProps$1 } from 'rc-tooltip/lib/Tooltip';
@@ -76,15 +76,15 @@ declare type CheckboxProps = {
     id: string;
     onClick: (id: string) => void;
     label: string;
-} & Partial<{
-    isError: boolean;
-    disabled: boolean;
-    isEditMode: boolean;
-    isSelected: boolean;
-    isRichText: boolean;
-    internalConfig: CheckboxInternalConfigProps;
-}>;
-declare const Checkbox: ({ id, onClick, label, isError, disabled, isEditMode, isSelected, isRichText, internalConfig, }: CheckboxProps) => JSX.Element;
+    isError?: boolean;
+    disabled?: boolean;
+    isEditMode?: boolean;
+    isSelected?: boolean;
+    isRichText?: boolean;
+    notInteractable?: boolean;
+    internalConfig?: CheckboxInternalConfigProps;
+};
+declare const Checkbox: ({ id, onClick, label, isError, disabled, isEditMode, isSelected, isRichText, notInteractable, internalConfig, }: CheckboxProps) => JSX.Element;
 
 declare type SelectOption = {
     id: string;
@@ -118,8 +118,10 @@ declare type SelectProps = Partial<{
 }>;
 declare const Select: ({ ref, onBlur, onChange, value, placeholder, options, disabled, optionsPresentation, isError, isEditMode, selectInternalConfig, isRichText, }: SelectProps) => JSX.Element;
 
-declare const Container: ({ id, type, wide, props, compact, children, metadata, isMobile, }: Partial<{
+declare const Container: ({ id, type, wide, props, compact, children, metadata, isMobile, }: {
     type: containers.ContainerType;
+    metadata: containers.MetadataType;
+} & Partial<{
     containerTemplateType: "row_content_container";
     wide: Partial<{
         containerStyle: styled_components.CSSProperties;
@@ -187,7 +189,6 @@ declare const Container: ({ id, type, wide, props, compact, children, metadata,
         activeOrganismIds: string[];
         padding: containers.Padding;
     }>;
-    metadata: containers.MetadataType;
     isMobile: boolean;
 }> & {
     children?: ReactNode;
@@ -320,13 +321,20 @@ interface ProcessStepsAttributes {
         steps: ProcessStep[];
     };
 }
-declare type MoleculeTypes = 'image' | 'text' | 'button' | 'video' | 'header_tab_group' | 'input_field' | 'select_field' | 'radio_button_field' | 'checkbox_field' | 'consent' | 'link' | 'password_setup_field' | 'account_button' | 'process_steps';
+interface ChecklistAttributes {
+    checklist: {
+        attributeType: 'checklist';
+        items: ChecklistItem$1[];
+    };
+}
+declare type MoleculeTypes = 'image' | 'text' | 'button' | 'video' | 'header_tab_group' | 'input_field' | 'select_field' | 'radio_button_field' | 'checkbox_field' | 'consent' | 'link' | 'password_setup_field' | 'account_button' | 'process_steps' | 'checklist';
 interface BaseMolecule {
     id: string;
-    moleculeLibraryId: string;
-    instance: 'molecule';
     type: MoleculeTypes;
-    metadata?: MetadataType;
+    instance: 'molecule';
+    metadata: MetadataType;
+    moleculeLibraryId: string;
+    organismLibraryMoleculeId: string;
 }
 interface ImageMolecule extends BaseMolecule {
     type: 'image';
@@ -379,6 +387,16 @@ interface VideoMolecule extends BaseMolecule {
 }
 interface TabGroupMolecule extends BaseMolecule {
     type: 'header_tab_group';
+    attributes: Partial<{
+        tabs: {
+            tabKey: string;
+            text: string;
+            disabled: boolean;
+            divider: boolean;
+        }[];
+        activeTabKey: string;
+        attributeType: 'tab_group';
+    }>;
     config: {
         props: TabGroupProps$1;
         wide: AdditionalTabContainerProps$1;
@@ -494,7 +512,16 @@ interface ProcessStepsMoleculeType extends BaseMolecule {
     organismMoleculeLibraryId: string;
     attributes: ProcessStepsAttributes;
 }
-declare type Molecule = StrictUnion<ImageMolecule | TextMoleculeType | ButtonMolecule | VideoMolecule | TabGroupMolecule | TextInputMolecule | SelectFieldMolecule | RadioButtonFieldMolecule | CheckboxFieldMolecule | ConsentFieldMolecule | LinkMolecule | PasswordSetupMolecule | AccountButtonMolecule | ProcessStepsMoleculeType> & Partial<{
+interface ChecklistsMolecule extends BaseMolecule {
+    type: 'checklist';
+    config: {
+        props: {
+            gap: SizesTypes$1;
+        } & CheckboxInternalConfigProps;
+    };
+    attributes: ChecklistAttributes;
+}
+declare type Molecule = StrictUnion<ImageMolecule | TextMoleculeType | ButtonMolecule | VideoMolecule | TabGroupMolecule | TextInputMolecule | SelectFieldMolecule | RadioButtonFieldMolecule | CheckboxFieldMolecule | ConsentFieldMolecule | LinkMolecule | PasswordSetupMolecule | AccountButtonMolecule | ProcessStepsMoleculeType | ChecklistsMolecule> & Partial<{
     form: UseFormReturn<any>;
     formData: AnyObject$1;
     setFormData: Dispatch<SetStateAction<AnyObject$1>>;
@@ -579,13 +606,14 @@ declare type AdditionalContainerProps = Partial<{
     containerStyle: CSSProperties;
     containerProps: ContainerPropsType;
 }>;
-declare type ContainerProps = PropsWithChildren<Partial<{
+declare type ContainerProps = PropsWithChildren<{
     type: ContainerType;
+    metadata: MetadataType;
+} & Partial<{
     containerTemplateType: ContainerTemplateType;
     wide: AdditionalContainerProps;
     compact: AdditionalContainerProps;
     props: ContainerPropsType;
-    metadata: MetadataType;
     isMobile: boolean;
 }>>;
 declare type ContainerComponentProps = {
@@ -974,7 +1002,7 @@ declare type RichTextEditorProps = Partial<{
     moleculeId: string;
     isTrigger: boolean;
 }>;
-declare const RichTextViewer: ({ value, color, textStyles, font, numberOfLines, extraTextProps, renderElementWrapperComponent, renderElementWrapperProps, htmlElementId, moleculeId, isTrigger, }: RichTextEditorProps) => JSX.Element | null;
+declare const RichTextViewer: ({ value, color, textStyles, font, numberOfLines, extraTextProps, renderElementWrapperComponent, renderElementWrapperProps, htmlElementId, moleculeId, isTrigger, }: RichTextEditorProps) => JSX.Element;
 
 declare type RadioButtonInternalConfigProps = Partial<{
     selectedRadioOptionBackgroundColor: ThemeColors$1 | string;
@@ -1502,6 +1530,9 @@ declare type ConfigurationItem = {
     entity: 'container' | 'molecule';
     entityId: string;
     organismId: string;
+    entityType: MoleculeTypes$1 | ContainerType$1;
+    entityMetadata: MetadataType$1;
+    organismLibraryMoleculeId?: string;
 };
 declare type OrganismContextProviderProps = PropsWithChildren<{
     organismId: string;
@@ -1542,9 +1573,7 @@ declare type OrganismContextType = {
     editable?: boolean;
     isFormInEditMode?: boolean;
     isConfigurationMode?: boolean;
-    organismMetadata?: {
-        stateListenerId?: string;
-    } & AnyObject$1;
+    organismMetadata?: MetadataType$1;
     onConfigurationItemClicked: (itemInfo?: Omit<ConfigurationItem, 'organismId'>) => void;
     selectedConfigurationItemId?: string;
 };
@@ -1956,8 +1985,9 @@ declare type StepperProps = {
     htmlElementId?: string;
     metadata: MetadataType$1;
     isMobile?: boolean;
+    isOnClickDisabled?: boolean;
 };
-declare const Stepper: ({ steps, orientation, htmlElementId, metadata, isMobile, }: StepperProps) => JSX.Element | null;
+declare const Stepper: ({ steps, orientation, htmlElementId, metadata, isMobile, isOnClickDisabled, }: StepperProps) => JSX.Element | null;
 
 declare type PdfDocumentProps = {
     source: string;
@@ -2016,8 +2046,9 @@ declare type VideoProps = {
     htmlElementId: string;
     moleculeId: string;
     isTrigger: boolean;
+    isOnClickDisabled: boolean;
 }>;
-declare const Video: ({ style, src, width, height, template, autoplay, enableCoverImage, coverImageSrc, styles, htmlElementId, isTrigger, moleculeId, }: VideoProps) => JSX.Element | null;
+declare const Video: ({ style, src, width, height, template, autoplay, enableCoverImage, coverImageSrc, styles, htmlElementId, isTrigger, moleculeId, isOnClickDisabled, }: VideoProps) => JSX.Element | null;
 
 declare type ImageProps = {
     src: string;
@@ -2033,8 +2064,9 @@ declare type ImageProps = {
     styles: StylesType;
     metadata: MetadataType$1;
     htmlElementId: string;
+    isOnClickDisabled: boolean;
 }>;
-declare const Image: ({ src, onClick, link, altText, styles, width, height, id, behaveAs, cornerRadius, htmlElementId, metadata, }: ImageProps) => JSX.Element | null;
+declare const Image: ({ src, onClick, link, altText, styles, width, height, id, behaveAs, cornerRadius, htmlElementId, metadata, isOnClickDisabled, }: ImageProps) => JSX.Element | null;
 
 declare type CarouselProps = {
     children: JSX.Element[];
@@ -2168,4 +2200,25 @@ declare type LinkProps = Omit<TextButtonProps$1, 'children'> & Partial<{
 }>;
 declare const Link: ({ text, isRichText, htmlElementId, isTrigger, moleculeId, ...props }: LinkProps) => JSX.Element | null;
 
-export { AccountButtonContext, AccountButtonContextType, AccountButtonMolecule, AccountButtonProvider, AccountButtonProviderProps, AcquisitionForm, AcquisitionFormProps, ActionAttributes, ActionEventType, ActionTypes, AdditionalContainerProps, AdditionalTabContainerProps, Alert, AlertProps, AnnotationsList, ArrowIconWrapper, AuthMethod, Avatar, AvatarDropdown, AvatarDropdownMenuConfigType, AvatarDropdownProps, AvatarProps, BackgroundImage, BaseButtonProps, BaseMolecule, Body, BodyProps, BooleanAttributes, BottomNaVBarItemProps, BottomNavBarItem, BottomNavBarNavigation, BottomNavBarNavigationProps, BreakpointSizesTypes, Button, ButtonActionsContext, ButtonActionsContextType, ButtonActionsProvider, ButtonActionsProviderProps, ButtonMolecule, ButtonProps, ButtonType, ButtonVariant, ButtonsWrapper, COMMUNICATION_LINK_DATA_TEXT, COMMUNICATION_LINK_DATA_URL, COMMUNICATION_LINK_ELEMENT_ID, CaretIconWrapper, Carousel, CarouselProps, Checkbox, CheckboxField, CheckboxFieldMolecule, CheckboxFieldProps, CheckboxGroup, CheckboxGroupProps, CheckboxProps, CheckboxesProps, Circle, CircleBoxProps, CirclesWrapper, CircularIndicator, CircularIndicatorProps, CircularIndicatorStyledComponent, ColorAttributes, ColumnItem, Columns, ColumnsProps, ConditionConfig, ConditionConfigAttributes, ConditionCriteria, ConfigurationItem, Consent, ConsentCaptureMethod, ConsentFieldMolecule, ConsentProps, ConsentType, Container, ContainerAlignItemsType, ContainerComponent, ContainerComponentProps, ContainerPositionType, ContainerProps, ContainerPropsType, ContainerScrollBehaviourType, ContainerTemplateType, ContainerType, ContainerWrapper, CriteriaType, CustomValidation, CustomValidationProps, CustomValidationRule, DataConnectionAttributes, DataConnectionValues, DataModelFieldFormat, DataModelFieldFormatCodeTypes, DataModelFieldFormatValueTypes, DefaultSelectionType, DefaultTemplate, DefaultTemplateProps, Divider, DividerProps, DownloadFile, Drawer, DynamicContentZone, DynamicContentZoneProps, DynamicElementProps, EmphasizedText, EmphasizedTextProps, ErrorText, FeedContent, FeedContentContainer, FeedContentContainerProps, FeedContentHeader, FeedContentHeaderProps, FeedTemplateKeys, FieldLabels, FieldLabelsProps, FieldMapper, FieldMapperProps, FieldRuleLabelTypes, FieldSection, FieldSectionProps, FieldTypes, FilteredFeedContentType, FontSizesTypes, FontWeight, Footer, FooterContactInfo, FooterLink, FooterProps, ForgotPasswordForm, ForgotPasswordFormProps, FormContainerProps, FormDataStateConfig, FormOrganismItem, FormStateType, FormStepContainerProps, GoogleMap, GoogleMapProps, Header, HeaderProps, HeroImage, HeroImageAlignment, HeroImageProps, HeroImageTemplate, HeroSlider, HeroSliderProps, HeroSliderWrapper, HorizontalButtons, HorizontalButtonsField, HorizontalButtonsProps, HorizontalPadding, ISI, ISIProps, Icon, IconButton, IconButtonProps, IconNames, IconProps, IconWrapper, Image, ImageAttributes, ImageMolecule, ImageProps, Input, InputField, InputFieldInternalConfigProps, InputFieldProps, InputFieldTypes, InputIconProps, InputProps, IterableAttributes, LabelInternalConfig, Link, LinkAttributes, LinkMolecule, LinkProps, LinkVariant, LoginForm, LoginFormProps, MATRIX_MESSAGE_DATA_ID, MATRIX_MESSAGE_ELEMENT_ID, MapPosition, MenuItems, MenuItemsProps, MenuNavigation, MenuNavigationProps, MetadataStateConfig, MetadataType, MlrRichTextViewerContext, MlrRichTextViewerContextType, MlrRichTextViewerProvider, MlrRichTextViewerProviderProps, ModalWrapper, Molecule, MoleculeTypes, NavigationDotsWrapper, OrganismContext, OrganismContextProvider, OrganismContextProviderProps, OrganismContextType, OrganismItem, OrganismItemProps, OrientationType, OrientationTypeLabel, Padding, PaddingProps, PaddingVariants, PasswordSetupMolecule, PdfDocument, PdfDocumentProps, PopupPropsType, ProcessStep, ProcessStepsAttributes, ProcessStepsMoleculeType, ProcessTracker, ProcessTrackerOrientation, ProcessTrackerProps, ProcessTrackerStateValue, ProcessTrackerStatus, ProfileInformation, ProfileInformationProps, RadioButtonField, RadioButtonFieldMolecule, RadioButtonFieldProps, RadioButtonInternalConfigProps, RadioButtons, RadioButtonsProps, RadioGroupWrapper, RegularImage, RegularImageProps, RichTextEditorProps, RichTextViewer, RuleLabelInternalConfig, SegmentationType, Select, SelectAttributes, SelectField, SelectFieldMolecule, SelectFieldProps, SelectInternalConfigurationOptions, SelectOption, SelectProps, SelectableCardGroup, SelectableCardGroupProps, SeoTags, SetPasswordForm, SetPasswordFormProps, SetPasswordRuleValidation, SizesTypes, SlateValueChildType, Slide, SliderProps, SlidesWrapper, Spacer, SpacerProps, Spinner, StateActionType, StateConfigType, StateContext, StateContextProvider, StateContextProviderProps, StateContextType, StateEventType, StateListenerConfigType, StateModifierConfigType, Stepper, StepperProps, StyleWrapper, SubscribePanel, Tab, TabGroup, TabGroupMolecule, TabGroupProps, TabOption, TabProps, TabTheme, TabType, TextAlign, TextAttributes, TextButton, TextButtonProps, TextInputMolecule, TextMolecule, TextMoleculeProps, TextMoleculeType, TextProps, TextTypes, TextWrapper, TextWrapperProps, ThemeColors, ThemeColorsType, ThemeDevicesType, ThemeSizesType, ThemeTextType, Tooltip, TooltipInternalConfig, TooltipProps, TouchableOpacity, TouchableOpacityProps, TwoFactorAuth, TwoFactorAuthProps, UICheckboxField, UIField, UIFields, UIInputField, UISelectField, ValidationTag, ValidationTagProps, ValidationTagStatus, VerticalPadding, Video, VideoAttributes, VideoMolecule, VideoProps, WrappedContainerType, Wrapper, ZealTheme, ZealThemeProvider, ZealUIModal, ZealUIModalProps, acquisitionFormMockFields, baseButtonAllowedConfigurations, defaultTheme, defaultValue, getFieldPlaceholder, getFieldsFromFieldSections, getInitialValuesFromFields, isFormValid, loginMockFields, passwordMockFields, profileInformationMockForm, sectionMockFields, setPasswordMockFields, showAcceptToastMessage, toast, toastStyles, useButtonActionsContext, useMediaQuery, useMlrRichTextViewerContext, useRequiredConsentsAcceptedValues, useStep };
+declare type ChecklistItem = {
+    id: string;
+    isChecked: boolean;
+    eventId: Nullable<string>;
+    type: 'user_interactive' | 'system_controlled';
+    label: {
+        text: string;
+        isRichText: boolean;
+    };
+};
+declare type ChecklistProps = {
+    items: ChecklistItem[];
+    props: {
+        gap: SizesTypes$1;
+    } & CheckboxInternalConfigProps$1;
+};
+declare const Checklist: ({ items, props: { gap, ...checkboxProps } }: ChecklistProps) => JSX.Element;
+declare const ChecklistWrapper: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {
+    $gap: SizesTypes$1;
+}, never>;
+
+export { AccountButtonContext, AccountButtonContextType, AccountButtonMolecule, AccountButtonProvider, AccountButtonProviderProps, AcquisitionForm, AcquisitionFormProps, ActionAttributes, ActionEventType, ActionTypes, AdditionalContainerProps, AdditionalTabContainerProps, Alert, AlertProps, AnnotationsList, ArrowIconWrapper, AuthMethod, Avatar, AvatarDropdown, AvatarDropdownMenuConfigType, AvatarDropdownProps, AvatarProps, BackgroundImage, BaseButtonProps, BaseMolecule, Body, BodyProps, BooleanAttributes, BottomNaVBarItemProps, BottomNavBarItem, BottomNavBarNavigation, BottomNavBarNavigationProps, BreakpointSizesTypes, Button, ButtonActionsContext, ButtonActionsContextType, ButtonActionsProvider, ButtonActionsProviderProps, ButtonMolecule, ButtonProps, ButtonType, ButtonVariant, ButtonsWrapper, COMMUNICATION_LINK_DATA_TEXT, COMMUNICATION_LINK_DATA_URL, COMMUNICATION_LINK_ELEMENT_ID, CaretIconWrapper, Carousel, CarouselProps, Checkbox, CheckboxField, CheckboxFieldMolecule, CheckboxFieldProps, CheckboxGroup, CheckboxGroupProps, CheckboxProps, CheckboxesProps, Checklist, ChecklistAttributes, ChecklistItem, ChecklistProps, ChecklistWrapper, ChecklistsMolecule, Circle, CircleBoxProps, CirclesWrapper, CircularIndicator, CircularIndicatorProps, CircularIndicatorStyledComponent, ColorAttributes, ColumnItem, Columns, ColumnsProps, ConditionConfig, ConditionConfigAttributes, ConditionCriteria, ConfigurationItem, Consent, ConsentCaptureMethod, ConsentFieldMolecule, ConsentProps, ConsentType, Container, ContainerAlignItemsType, ContainerComponent, ContainerComponentProps, ContainerPositionType, ContainerProps, ContainerPropsType, ContainerScrollBehaviourType, ContainerTemplateType, ContainerType, ContainerWrapper, CriteriaType, CustomValidation, CustomValidationProps, CustomValidationRule, DataConnectionAttributes, DataConnectionValues, DataModelFieldFormat, DataModelFieldFormatCodeTypes, DataModelFieldFormatValueTypes, DefaultSelectionType, DefaultTemplate, DefaultTemplateProps, Divider, DividerProps, DownloadFile, Drawer, DynamicContentZone, DynamicContentZoneProps, DynamicElementProps, EmphasizedText, EmphasizedTextProps, ErrorText, FeedContent, FeedContentContainer, FeedContentContainerProps, FeedContentHeader, FeedContentHeaderProps, FeedTemplateKeys, FieldLabels, FieldLabelsProps, FieldMapper, FieldMapperProps, FieldRuleLabelTypes, FieldSection, FieldSectionProps, FieldTypes, FilteredFeedContentType, FontSizesTypes, FontWeight, Footer, FooterContactInfo, FooterLink, FooterProps, ForgotPasswordForm, ForgotPasswordFormProps, FormContainerProps, FormDataStateConfig, FormOrganismItem, FormStateType, FormStepContainerProps, GoogleMap, GoogleMapProps, Header, HeaderProps, HeroImage, HeroImageAlignment, HeroImageProps, HeroImageTemplate, HeroSlider, HeroSliderProps, HeroSliderWrapper, HorizontalButtons, HorizontalButtonsField, HorizontalButtonsProps, HorizontalPadding, ISI, ISIProps, Icon, IconButton, IconButtonProps, IconNames, IconProps, IconWrapper, Image, ImageAttributes, ImageMolecule, ImageProps, Input, InputField, InputFieldInternalConfigProps, InputFieldProps, InputFieldTypes, InputIconProps, InputProps, IterableAttributes, LabelInternalConfig, Link, LinkAttributes, LinkMolecule, LinkProps, LinkVariant, LoginForm, LoginFormProps, MATRIX_MESSAGE_DATA_ID, MATRIX_MESSAGE_ELEMENT_ID, MapPosition, MenuItems, MenuItemsProps, MenuNavigation, MenuNavigationProps, MetadataStateConfig, MetadataType, MlrRichTextViewerContext, MlrRichTextViewerContextType, MlrRichTextViewerProvider, MlrRichTextViewerProviderProps, ModalWrapper, Molecule, MoleculeTypes, NavigationDotsWrapper, OrganismContext, OrganismContextProvider, OrganismContextProviderProps, OrganismContextType, OrganismItem, OrganismItemProps, OrientationType, OrientationTypeLabel, Padding, PaddingProps, PaddingVariants, PasswordSetupMolecule, PdfDocument, PdfDocumentProps, PopupPropsType, ProcessStep, ProcessStepsAttributes, ProcessStepsMoleculeType, ProcessTracker, ProcessTrackerOrientation, ProcessTrackerProps, ProcessTrackerStateValue, ProcessTrackerStatus, ProfileInformation, ProfileInformationProps, RadioButtonField, RadioButtonFieldMolecule, RadioButtonFieldProps, RadioButtonInternalConfigProps, RadioButtons, RadioButtonsProps, RadioGroupWrapper, RegularImage, RegularImageProps, RichTextEditorProps, RichTextViewer, RuleLabelInternalConfig, SegmentationType, Select, SelectAttributes, SelectField, SelectFieldMolecule, SelectFieldProps, SelectInternalConfigurationOptions, SelectOption, SelectProps, SelectableCardGroup, SelectableCardGroupProps, SeoTags, SetPasswordForm, SetPasswordFormProps, SetPasswordRuleValidation, SizesTypes, SlateValueChildType, Slide, SliderProps, SlidesWrapper, Spacer, SpacerProps, Spinner, StateActionType, StateConfigType, StateContext, StateContextProvider, StateContextProviderProps, StateContextType, StateEventType, StateListenerConfigType, StateModifierConfigType, Stepper, StepperProps, StyleWrapper, SubscribePanel, Tab, TabGroup, TabGroupMolecule, TabGroupProps, TabOption, TabProps, TabTheme, TabType, TextAlign, TextAttributes, TextButton, TextButtonProps, TextInputMolecule, TextMolecule, TextMoleculeProps, TextMoleculeType, TextProps, TextTypes, TextWrapper, TextWrapperProps, ThemeColors, ThemeColorsType, ThemeDevicesType, ThemeSizesType, ThemeTextType, Tooltip, TooltipInternalConfig, TooltipProps, TouchableOpacity, TouchableOpacityProps, TwoFactorAuth, TwoFactorAuthProps, UICheckboxField, UIField, UIFields, UIInputField, UISelectField, ValidationTag, ValidationTagProps, ValidationTagStatus, VerticalPadding, Video, VideoAttributes, VideoMolecule, VideoProps, WrappedContainerType, Wrapper, ZealTheme, ZealThemeProvider, ZealUIModal, ZealUIModalProps, acquisitionFormMockFields, baseButtonAllowedConfigurations, defaultTheme, defaultValue, getFieldPlaceholder, getFieldsFromFieldSections, getInitialValuesFromFields, isFormValid, loginMockFields, passwordMockFields, profileInformationMockForm, sectionMockFields, setPasswordMockFields, showAcceptToastMessage, toast, toastStyles, useButtonActionsContext, useMediaQuery, useMlrRichTextViewerContext, useRequiredConsentsAcceptedValues, useStep };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@zealicsolutions/web-ui",
-  "version": "0.3.192",
-  "testVersion": "0.3.184",
+  "version": "0.3.194",
+  "testVersion": "0.3.193",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/Zealic_Solutions/zeal-ui-web.git"