@zealicsolutions/web-ui 0.3.336 → 0.4.0

package/dist/cjs/src/atoms/RadioButtons/helpers.d.ts

@@ -1,10 +1,12 @@
 import { RadioButtonInternalConfigProps } from 'atoms';
+import { ThemeColors } from 'theme';
 import type { StylesType } from 'typescript';
 declare type RadioOptionStylesConfig = {
     textStyles: StylesType;
     groupWrapperStyles: StylesType;
     radioIconWrapperStyles: StylesType;
     radioLabelWrapperStyles: StylesType;
+    textColor: ThemeColors;
 };
 declare type GetRadioOptionStylesProps = Partial<{
     isError: boolean;

package/dist/cjs/src/atoms/RadioButtons/styles.d.ts

@@ -6,4 +6,5 @@ export declare const RadioLabelWrapper: import("styled-components").StyledCompon
 export declare const RadioIconWrapper: import("styled-components").StyledComponent<typeof Radio, import("styled-components").DefaultTheme, StyledTransientProps<{
     disabled: boolean;
     isError?: boolean | undefined;
+    isEditMode?: boolean | undefined;
 }> & OverrideStyles, never>;

package/dist/cjs/src/atoms/RichTextViewer/RichTextViewer.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
 import { TextProps } from 'atoms';
+import { Descendant } from 'slate';
 import { FontSizesTypes, ThemeColors } from 'theme';
 import { AnyObject, StylesType } from 'typescript';
+export declare const defaultValue: Descendant[];
 export declare const MATRIX_MESSAGE_ELEMENT_ID = "matrix-message";
 export declare const COMMUNICATION_LINK_ELEMENT_ID = "communication-link";
 export declare const MATRIX_MESSAGE_DATA_ID = "matrix-message-id";
@@ -16,5 +18,6 @@ export declare type RichTextEditorProps = Partial<{
     extraTextProps: TextProps;
     renderElementWrapperComponent: (props: AnyObject) => JSX.Element;
     renderElementWrapperProps: AnyObject;
+    htmlElementId: string;
 }>;
-export declare const RichTextViewer: ({ value, color, textStyles, font, numberOfLines, extraTextProps, renderElementWrapperComponent: RenderElementWrapperComponent, renderElementWrapperProps, }: RichTextEditorProps) => JSX.Element | null;
+export declare const RichTextViewer: ({ value, color, textStyles, font, numberOfLines, extraTextProps, renderElementWrapperComponent, renderElementWrapperProps, htmlElementId, }: RichTextEditorProps) => JSX.Element | null;

package/dist/cjs/src/atoms/Select/Select.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
+import { RefCallBack } from 'react-hook-form/dist/types';
 import { ThemeColors } from 'theme';
 import type { AnyObject, Callback, StylesType } from 'typescript';
-import { RefCallBack } from 'react-hook-form/dist/types';
 export declare type SelectOption = {
     id: string;
     label: string;
@@ -32,4 +32,4 @@ export declare type SelectProps = Partial<{
     selectInternalConfig: SelectInternalConfigurationOptions;
     isRichText: boolean;
 }>;
-export declare const Select: ({ ref, onBlur, onChange, value, placeholder, options, disabled, optionsPresentation, isError, selectInternalConfig, isRichText, }: SelectProps) => JSX.Element;
+export declare const Select: ({ ref, onBlur, onChange, value, placeholder, options, disabled, optionsPresentation, isError, isEditMode, selectInternalConfig, isRichText, }: SelectProps) => JSX.Element;

package/dist/cjs/src/atoms/Select/Select.stories.d.ts

@@ -3,7 +3,7 @@ import { StoryFn } from '@storybook/react';
 import { SelectProps } from './Select';
 declare const _default: {
     title: string;
-    component: ({ ref, onBlur, onChange, value, placeholder, options, disabled, optionsPresentation, isError, selectInternalConfig, isRichText, }: Partial<{
+    component: ({ ref, onBlur, onChange, value, placeholder, options, disabled, optionsPresentation, isError, isEditMode, selectInternalConfig, isRichText, }: Partial<{
         ref: import("react-hook-form").RefCallBack;
         onBlur: import("../../typescript").Callback;
         value: string;

package/dist/cjs/src/atoms/Select/styles.d.ts

@@ -6,6 +6,7 @@ declare type SelectContainerProps = {
     isOpen: boolean;
     hasError: boolean;
     $styles: StylesType;
+    isEditMode?: boolean;
 };
 export declare const SelectContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, SelectContainerProps, never>;
 export declare const DropdownMenu: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/cjs/src/atoms/TextWrapper/TextWrapper.d.ts

@@ -14,6 +14,7 @@ export declare type TextProps = {
     textAlign?: TextAlign;
     behaveAs?: 'text' | 'button';
     seoTag?: SeoTags;
+    htmlElementId?: string;
 };
 export declare type TextWrapperProps = PropsWithChildren<TextProps>;
 export declare const TextWrapper: ({ children, seoTag, ...textProps }: TextWrapperProps) => JSX.Element;

package/dist/cjs/src/containers/Container.d.ts

@@ -1,6 +1,7 @@
-/// <reference types="react" />
 import { ContainerComponentProps, ContainerProps } from 'containers';
-export declare const Container: ({ children, wide, compact, type, props, id, metadata, }: Partial<{
+import { Dispatch, ReactNode, SetStateAction } from 'react';
+import { AnyObject } from 'typescript';
+export declare const Container: ({ children, wide, compact, type, props, id, metadata, isMobile, }: Partial<{
     type: import("containers").ContainerType;
     containerTemplateType: "row_content_container";
     wide: Partial<{
@@ -11,10 +12,13 @@ export declare const Container: ({ children, wide, compact, type, props, id, met
             cornerRadius: number | import("theme").SizesTypes;
             gap: import("theme").SizesTypes;
             styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+            sliderProps: import("containers").SliderProps;
             formProps: import("containers").FormContainerProps;
             formStepProps: import("containers").FormStepContainerProps;
             padding: import("containers").Padding;
             border: string;
+            activeChildrenIds: string[];
+            activeOrganismIds: string[];
         }>;
     }>;
     compact: Partial<{
@@ -25,10 +29,13 @@ export declare const Container: ({ children, wide, compact, type, props, id, met
             cornerRadius: number | import("theme").SizesTypes;
             gap: import("theme").SizesTypes;
             styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+            sliderProps: import("containers").SliderProps;
             formProps: import("containers").FormContainerProps;
             formStepProps: import("containers").FormStepContainerProps;
             padding: import("containers").Padding;
             border: string;
+            activeChildrenIds: string[];
+            activeOrganismIds: string[];
         }>;
     }>;
     props: Partial<{
@@ -37,15 +44,22 @@ export declare const Container: ({ children, wide, compact, type, props, id, met
         cornerRadius: number | import("theme").SizesTypes;
         gap: import("theme").SizesTypes;
         styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+        sliderProps: import("containers").SliderProps;
         formProps: import("containers").FormContainerProps;
         formStepProps: import("containers").FormStepContainerProps;
         padding: import("containers").Padding;
         border: string;
+        activeChildrenIds: string[];
+        activeOrganismIds: string[];
     }>;
-    metadata: import("../typescript").AnyObject;
+    metadata: import("containers").MetadataType;
+    isMobile: boolean;
 }> & {
-    children?: import("react").ReactNode;
+    children?: ReactNode;
 } & {
     id: string;
-}) => JSX.Element;
-export declare const ContainerComponent: ({ config, tabsProps, id, type, items, metadata, }: ContainerComponentProps) => JSX.Element | null;
+}) => JSX.Element | null;
+export declare const ContainerComponent: ({ config, tabsProps, id, type, items, metadata, formData, setFormData, isMobile, }: ContainerComponentProps & {
+    formData?: AnyObject | undefined;
+    setFormData?: Dispatch<SetStateAction<AnyObject>> | undefined;
+}) => JSX.Element | null;

package/dist/cjs/src/containers/Container.stories.d.ts

@@ -1,6 +1,7 @@
 import type { Meta, StoryFn } from '@storybook/react';
-import { ContainerComponent, ContainerComponentProps } from 'containers';
+import { ContainerComponent, ContainerComponentProps, StateConfigType } from 'containers';
 declare const meta: Meta<typeof ContainerComponent>;
 export default meta;
 declare type Story = StoryFn<ContainerComponentProps>;
 export declare const Container: Story;
+export declare const stateObject: StateConfigType;

package/dist/cjs/src/containers/FormOrganismItem.d.ts

@@ -0,0 +1,11 @@
+import { ContainerComponentProps } from 'containers/types/types';
+import { Dispatch, SetStateAction } from 'react';
+import { AnyObject } from 'typescript';
+export declare type FormOrganismItemProps = {
+    item: ContainerComponentProps;
+    activeChildrenIds: string[];
+    formData?: AnyObject;
+    setFormData?: Dispatch<SetStateAction<AnyObject>>;
+    isMobile?: boolean;
+};
+export declare const FormOrganismItem: ({ formData, setFormData, isMobile, ...props }: FormOrganismItemProps) => JSX.Element | null;

package/dist/cjs/src/containers/FormStepContainer.d.ts

@@ -1,6 +1,9 @@
-import { FormStepContainerProps } from 'containers';
+import { FormStepContainerProps, MetadataType } from 'containers';
+import { InputFieldTypes } from 'fieldsConfiguration';
 import { PropsWithChildren } from 'react';
 export declare type StepContainerProps = PropsWithChildren<Partial<FormStepContainerProps>> & {
     id: string;
+    metadata?: MetadataType;
 };
-export declare const FormStepContainer: ({ order, id }: StepContainerProps) => JSX.Element | null;
+export declare const parsedDateValue: (value: string, type: InputFieldTypes) => string;
+export declare const FormStepContainer: ({ order, id, metadata, formStepStyles, }: StepContainerProps) => JSX.Element | null;

package/dist/cjs/src/containers/MoleculeItem.d.ts

@@ -1,9 +1,12 @@
 /// <reference types="react" />
+import { CustomDescendant } from 'atoms/RichTextViewer/types';
 import { Molecule } from 'containers';
 import { TabGroupProps } from 'molecules';
 export declare const getFullLink: (url: string) => string;
 export declare const navigateToPage: (url: string) => void;
 export declare const downloadFile: (url?: string, name?: string) => Promise<void>;
-export declare const MoleculeItem: ({ type, config, attributes, tabsProps, form, id: moleculeId, }: Molecule & {
+export declare const parseDescendantContent: (string: string) => CustomDescendant[];
+export declare const MoleculeItem: ({ type, config, attributes, tabsProps, form, id, formData, setFormData, isMobile, metadata, }: Molecule & {
     tabsProps?: Pick<TabGroupProps<string, string>, "tabs" | "activeTabKey" | "onTabChange"> | undefined;
+    isMobile?: boolean | undefined;
 }) => JSX.Element | null;

package/dist/cjs/src/containers/OrganismItem.d.ts

@@ -1,8 +1,12 @@
-/// <reference types="react" />
 import { ContainerComponentProps, Molecule } from 'containers';
 import { TabGroupProps } from 'molecules';
+import { Dispatch, SetStateAction } from 'react';
+import { AnyObject } from 'typescript';
 export declare type OrganismItemProps = {
     item: ContainerComponentProps | Molecule;
     tabsProps?: Pick<TabGroupProps, 'tabs' | 'activeTabKey' | 'onTabChange'>;
+    formData?: AnyObject;
+    setFormData?: Dispatch<SetStateAction<AnyObject>>;
+    isMobile?: boolean;
 };
-export declare const OrganismItem: ({ item, tabsProps }: OrganismItemProps) => JSX.Element | null;
+export declare const OrganismItem: ({ item, tabsProps, formData, setFormData, isMobile, }: OrganismItemProps) => JSX.Element | null;

package/dist/cjs/src/containers/helpers.d.ts

@@ -1,4 +1,6 @@
 import { ContainerScrollBehaviourType, Padding } from 'containers/types/types';
 import { ThemeSizesType } from 'theme';
+import { Nullable } from 'typescript';
 export declare const getScrollBehaviour: (scrollBehaviour?: ContainerScrollBehaviourType) => "overflow-y: scroll" | "overflow-x: scroll" | "overflow: visible" | "overflow: unset";
 export declare const getPadding: (padding: Padding, sizes: ThemeSizesType) => string;
+export declare const isInViewport: (element: Nullable<HTMLElement>) => boolean;

package/dist/cjs/src/containers/hooks/index.d.ts

@@ -1 +1,3 @@
 export { useCheckCondition } from './useCheckCondition';
+export { useSetFormData } from './useSetFormData';
+export { useFormOrganismItem } from './useFormOrganismItem';

package/dist/cjs/src/containers/hooks/useFormOrganismItem.d.ts

@@ -0,0 +1,3 @@
+import { FormOrganismItemProps } from 'containers/FormOrganismItem';
+import { ContainerComponentProps } from 'containers/types/types';
+export declare const useFormOrganismItem: ({ item, activeChildrenIds }: FormOrganismItemProps) => ContainerComponentProps | undefined;

package/dist/cjs/src/containers/hooks/useSetFormData.d.ts

@@ -0,0 +1,17 @@
+import { DataConnectionAttributes } from 'containers/types/moleculeTypes';
+import { InputFieldTypes } from 'fieldsConfiguration';
+import { Dispatch, SetStateAction } from 'react';
+import { AnyObject } from 'typescript';
+declare type UseSetFormDataProps<DefaultValueType> = Partial<{
+    defaultValue: DefaultValueType;
+    dataModelField: DataConnectionAttributes;
+    setFormData: Dispatch<SetStateAction<AnyObject>>;
+    inputType: InputFieldTypes;
+}>;
+export declare const useSetFormData: <DefaultValueType>({ setFormData, defaultValue, dataModelField, inputType, }: Partial<{
+    defaultValue: DefaultValueType;
+    dataModelField: DataConnectionAttributes;
+    setFormData: Dispatch<SetStateAction<AnyObject>>;
+    inputType: InputFieldTypes;
+}>) => void;
+export {};

package/dist/cjs/src/containers/hooks/useStateClickModifierHandler.d.ts

@@ -0,0 +1,2 @@
+import { MetadataStateConfig } from 'containers/types/types';
+export declare const useStateClickModifierHandler: (metadataStateConfig?: MetadataStateConfig[]) => () => void;

package/dist/cjs/src/containers/hooks/useStateListenerValue.d.ts

@@ -0,0 +1,5 @@
+import { MetadataType } from 'containers/types/types';
+export declare const useStateListenerValue: (metadata?: MetadataType) => {
+    isStateDisabled: boolean | undefined;
+    isStateVisible: boolean | undefined;
+};

package/dist/cjs/src/containers/hooks/useStateViewModifierHandler.d.ts

@@ -0,0 +1,2 @@
+import { MetadataStateConfig } from 'containers/types/types';
+export declare const useStateViewModifierHandler: (itemStateConfig?: MetadataStateConfig[]) => string | undefined;

package/dist/cjs/src/containers/index.d.ts

@@ -3,3 +3,4 @@ export * from './types/types';
 export * from './types/moleculeTypes';
 export * from './styles';
 export * from './OrganismItem';
+export { FormOrganismItem } from './FormOrganismItem';

package/dist/cjs/src/containers/mock-data.d.ts

@@ -11,3 +11,4 @@ export declare const rowRepeaterContainerSingle: ContainerComponentProps;
 export declare const columnRepeaterContainer: ContainerComponentProps;
 export declare const outlinedColumnContainer: ContainerComponentProps;
 export declare const headerContainer: ContainerComponentProps;
+export declare const headerContainerWithTabs: ContainerComponentProps;

package/dist/cjs/src/containers/styles.d.ts

@@ -8,10 +8,13 @@ export declare const ContainerWrapper: import("styled-components").StyledCompone
         cornerRadius: number | SizesTypes;
         gap: SizesTypes;
         styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+        sliderProps: import("containers/types/types").SliderProps;
         formProps: import("containers/types/types").FormContainerProps;
         formStepProps: import("containers/types/types").FormStepContainerProps;
         padding: import("containers/types/types").Padding;
         border: string;
+        activeChildrenIds: string[];
+        activeOrganismIds: string[];
     }> | undefined;
     metadata?: AnyObject | undefined;
 }, never>;

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

@@ -1,8 +1,9 @@
 import { LinkVariant, SelectOption } from 'atoms';
-import { AdditionalTabContainerProps, ButtonProps, CheckboxFieldProps, Consent, ImageProps, InputFieldProps, LinkProps, RadioButtonFieldProps, SelectFieldProps, TabGroupProps, TextMoleculeProps } from 'molecules';
+import { AdditionalTabContainerProps, AvatarDropdownMenuConfigType, AvatarDropdownProps, ButtonProps, CheckboxFieldProps, 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 { ConditionConfig, ContainerComponentProps } from './types';
+import { ConditionConfig, ContainerComponentProps, MetadataType } from './types';
 export declare type ActionTypes = 'link' | 'popup' | 'drawer' | 'download' | 'submit' | 'reset' | 'destroy';
 export declare type DownloadFile = {
     url: string;
@@ -27,7 +28,7 @@ declare type Action = {
     reset: ResetAction;
     destroy: DestroyAction;
 }>;
-export declare type FormStateType = 'default' | 'success' | 'format_error' | 'field_error' | 'open_dropdown';
+export declare type FormStateType = 'default' | 'success' | 'error' | 'format_error' | 'field_error' | 'open_dropdown' | 'match_error';
 export declare type ImageAttributes = {
     attributeType: 'image';
     imageSource: string;
@@ -73,8 +74,10 @@ export interface DataConnectionAttributes {
     attributeType: 'data_model_field';
     dataModelField: {
         id: string;
+        subtype?: string;
         fieldName: string;
         code: string;
+        defaultValue?: string;
     };
 }
 export interface ConditionConfigAttributes {
@@ -86,12 +89,12 @@ export interface ColorAttributes {
     attributeType: 'color';
     color: string;
 }
-export declare type MoleculeTypes = 'image' | 'text' | 'button' | 'video' | 'header_tab_group' | 'input_field' | 'select_field' | 'radio_button_field' | 'checkbox_field' | 'consent' | 'link';
+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';
 export interface BaseMolecule {
     id: string;
     instance: 'molecule';
     type: MoleculeTypes;
-    metadata?: AnyObject;
+    metadata?: MetadataType;
 }
 export interface ImageMolecule extends BaseMolecule {
     type: 'image';
@@ -207,10 +210,16 @@ export interface ConsentFieldMolecule extends BaseMolecule {
     attributes: Partial<{
         consent: Partial<{
             attributeType: 'consent';
-            consent: Consent;
+            consent: ConsentType;
             required: BooleanAttributes;
         }>;
+        conditionConfig: ConditionConfigAttributes;
     }>;
+    config: {
+        props: Partial<{
+            state: 'field_error';
+        }>;
+    };
 }
 export interface LinkMolecule extends BaseMolecule {
     type: 'link';
@@ -225,7 +234,33 @@ export interface LinkMolecule extends BaseMolecule {
         }>;
     };
 }
-export declare type Molecule = StrictUnion<ImageMolecule | TextMoleculeType | ButtonMolecule | VideoMolecule | TabGroupMolecule | TextInputMolecule | SelectFieldMolecule | RadioButtonFieldMolecule | CheckboxFieldMolecule | ConsentFieldMolecule | LinkMolecule> & {
-    form?: UseFormReturn<any>;
-};
+export interface PasswordSetupMolecule extends BaseMolecule {
+    type: 'password_setup_field';
+    attributes: Partial<{
+        passwordFieldLabel: TextAttributes;
+        reenteredPasswordFieldLabel: TextAttributes;
+        passwordFieldRequired: BooleanAttributes;
+        reenteredPasswordFieldRequired: BooleanAttributes;
+        dataModelField: DataConnectionAttributes;
+    }>;
+    config: {
+        props: {
+            validationLabel?: string;
+            state?: FormStateType;
+            passwordInputProps: InputFieldProps;
+            reenteredPasswordInputProps: InputFieldProps;
+        };
+    };
+}
+export interface AccountButtonMolecule extends BaseMolecule {
+    type: 'account_button';
+    config: {
+        props: AvatarDropdownProps<AvatarDropdownMenuConfigType>;
+    };
+}
+export declare type Molecule = StrictUnion<ImageMolecule | TextMoleculeType | ButtonMolecule | VideoMolecule | TabGroupMolecule | TextInputMolecule | SelectFieldMolecule | RadioButtonFieldMolecule | CheckboxFieldMolecule | ConsentFieldMolecule | LinkMolecule | PasswordSetupMolecule | AccountButtonMolecule> & Partial<{
+    form: UseFormReturn<any>;
+    formData: AnyObject;
+    setFormData: Dispatch<SetStateAction<AnyObject>>;
+}>;
 export {};

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

@@ -7,12 +7,38 @@ import type { AnyObject, Nullable, StylesType } from 'typescript';
 import { Molecule } from './moleculeTypes';
 export declare type ContainerType = 'row' | 'column' | 'slider' | 'form' | 'form_step' | 'dynamic';
 export declare type ContainerTemplateType = 'row_content_container';
+export declare type WrappedContainerType = Extract<ContainerType, 'slider' | 'form' | 'form_step'>;
 export declare type ContainerPositionType = 'fixed' | 'sticky' | 'static' | 'relative';
 export declare type ContainerScrollBehaviourType = 'vertical' | 'horizontal' | 'auto' | 'none';
+export declare type StateActionType = 'visible' | 'disabled';
+export declare type StateEventType = 'click' | 'view';
+export declare type StateListenerConfigType = {
+    role: 'stateListener';
+    stateKey: string;
+    stateValue: string | boolean;
+    defaultState: Partial<Record<StateActionType, boolean>>;
+    action: Partial<Record<StateActionType, boolean>>;
+};
+export declare type StateModifierConfigType = {
+    role: 'stateModifier';
+    stateKey: string;
+    event: StateEventType;
+};
+export declare type MetadataStateConfig = StateListenerConfigType | StateModifierConfigType;
+export declare type MetadataType = AnyObject & {
+    stateConfig: MetadataStateConfig[];
+    notEditable?: boolean;
+    hasOwnButton?: boolean;
+};
+export declare type SliderProps = {
+    autoplay?: boolean;
+    autoplayDuration?: number;
+};
 export declare type FormStepContainerProps = {
     formStepName: string;
     order: number;
     conditionConfig: ConditionConfig;
+    formStepStyles?: CSSProperties;
 };
 export declare type FormContainerProps = {
     mode: keyof ValidationMode;
@@ -25,10 +51,13 @@ export declare type ContainerPropsType = Partial<{
     cornerRadius: SizesTypes | number;
     gap: SizesTypes;
     styles: StylesType;
+    sliderProps: SliderProps;
     formProps: FormContainerProps;
     formStepProps: FormStepContainerProps;
     padding: Padding;
     border: string;
+    activeChildrenIds: string[];
+    activeOrganismIds: string[];
 }>;
 export declare type AdditionalContainerProps = Partial<{
     containerStyle: CSSProperties;
@@ -40,22 +69,24 @@ export declare type ContainerProps = PropsWithChildren<Partial<{
     wide: AdditionalContainerProps;
     compact: AdditionalContainerProps;
     props: ContainerPropsType;
-    metadata: AnyObject;
+    metadata: MetadataType;
+    isMobile: boolean;
 }>>;
 export declare type ContainerComponentProps = {
     id: string;
     instance: 'container';
     type: ContainerType;
     items: (ContainerComponentProps | Molecule)[];
-    config: {
-        wide?: AdditionalContainerProps;
-        compact?: AdditionalContainerProps;
-        props?: ContainerPropsType;
-    };
+    config: Partial<{
+        wide: AdditionalContainerProps;
+        compact: AdditionalContainerProps;
+        props: ContainerPropsType;
+    }>;
     tabsProps?: Pick<TabGroupProps, 'tabs' | 'activeTabKey' | 'onTabChange'>;
-    metadata?: AnyObject;
+    metadata?: MetadataType;
     attributes?: AnyObject;
     containerLibraryId?: string;
+    isMobile?: boolean;
 };
 export declare type CriteriaType = 'operator' | 'condition';
 export declare type ConditionCriteria = {
@@ -73,3 +104,9 @@ export declare type ConditionConfig = Nullable<{
     segmentationType: SegmentationType;
     criteriaList: ConditionCriteria[];
 }>;
+export declare type FormDataStateConfig = {
+    value?: string | number;
+} & Record<string, {
+    value?: string | number;
+}>;
+export declare type StateConfigType = Record<string, Nullable<boolean | string | FormDataStateConfig>>;

package/dist/cjs/src/contexts/AccountButtonContext/AccountButtonContext.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { Callback } from 'typescript';
+export declare type AccountButtonContextType = Partial<{
+    userInitials: string;
+    logOutHandler: Callback;
+    goToAccountInfo: Callback;
+    username: string;
+}>;
+export declare const AccountButtonContext: import("react").Context<Partial<{
+    userInitials: string;
+    logOutHandler: Callback;
+    goToAccountInfo: Callback;
+    username: string;
+}>>;

package/dist/cjs/src/contexts/AccountButtonContext/AccountButtonContextProvider.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+import { Callback } from 'typescript';
+export declare type AccountButtonProviderProps = PropsWithChildren<Partial<{
+    userInitials: string;
+    logOutHandler: Callback;
+    goToAccountInfo: Callback;
+    username: string;
+}>>;
+export declare const AccountButtonProvider: ({ children, goToAccountInfo, userInitials, logOutHandler, username, }: AccountButtonProviderProps) => JSX.Element;

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

@@ -1,8 +1,27 @@
-/// <reference types="react" />
 import { ContainerComponentProps, Molecule } from 'containers';
+import { InputFieldTypes } from 'fieldsConfiguration';
+import { PasswordRuleValidation } from 'molecules/PasswordSetup/PasswordSetup';
+import { Dispatch, SetStateAction } from 'react';
+import { AnyObject } from 'typescript';
 import { GroupedStepItemsByStepContainer } from './utils';
 export declare type OrganismContextType = {
     items: (ContainerComponentProps | Molecule)[];
     groupStepItemsByStepContainer: () => GroupedStepItemsByStepContainer;
+    dateFields: {
+        id: string;
+        dateType: InputFieldTypes;
+    }[];
+    setDateFields: Dispatch<SetStateAction<{
+        id: string;
+        dateType: InputFieldTypes;
+    }[]>>;
+    formId?: string;
+    submitHandler?: (data: {
+        formId: string;
+        data: AnyObject;
+    }) => void;
+    validations?: PasswordRuleValidation[];
+    editable?: boolean;
+    isEditableForm?: boolean;
 };
 export declare const OrganismContext: import("react").Context<OrganismContextType>;

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

@@ -1,6 +1,16 @@
-import { PropsWithChildren } from 'react';
 import { ContainerComponentProps, Molecule } from 'containers';
+import { PasswordRuleValidation } from 'molecules/PasswordSetup/PasswordSetup';
+import { PropsWithChildren } from 'react';
+import { AnyObject } from 'typescript';
 export declare type FormStepContextProviderProps = PropsWithChildren<Partial<{
     initItems: (ContainerComponentProps | Molecule)[];
+    formId: string;
+    submitHandler: (data: {
+        formId: string;
+        data: AnyObject;
+    }) => void;
+    validations: PasswordRuleValidation[];
+    editable: boolean;
+    isEditableForm: boolean;
 }>>;
-export declare const OrganismContextProvider: ({ initItems, children, }: FormStepContextProviderProps) => JSX.Element;
+export declare const OrganismContextProvider: ({ initItems, children, submitHandler, formId, validations, editable, isEditableForm, }: FormStepContextProviderProps) => JSX.Element;

package/dist/cjs/src/contexts/StateContext/StateContext.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { StateConfigType } from 'containers';
+export declare type StateContextType = {
+    stateConfig: StateConfigType;
+    stateHandler?: (updatedStateConfig: StateConfigType) => void;
+};
+export declare const StateContext: import("react").Context<StateContextType>;

package/dist/cjs/src/contexts/StateContext/StateContextProvider.d.ts

@@ -0,0 +1,7 @@
+import { StateConfigType } from 'containers';
+import { PropsWithChildren } from 'react';
+export declare type StateContextProviderProps = PropsWithChildren<{
+    initStateConfig: StateConfigType;
+    stateHandler?: (updatedStateConfig: StateConfigType) => void;
+}>;
+export declare const StateContextProvider: ({ initStateConfig, children, stateHandler, }: StateContextProviderProps) => JSX.Element;

package/dist/cjs/src/contexts/hooks/index.d.ts

@@ -2,3 +2,5 @@ export { useFormStepContext } from './useFormStepContext';
 export { useButtonActionsContext } from './useButtonActionsContext';
 export { useMlrRichTextViewerContext } from './useMlrRichTextViewerContext';
 export { useOrganismContext } from './useOrganismContext';
+export { useStateContext } from './useStateContext';
+export { useAccountButtonContext } from './useAccountButtonContext';

package/dist/cjs/src/contexts/hooks/useAccountButtonContext.d.ts

@@ -0,0 +1,6 @@
+export declare const useAccountButtonContext: () => Partial<{
+    userInitials: string;
+    logOutHandler: import("../../typescript").Callback;
+    goToAccountInfo: import("../../typescript").Callback;
+    username: string;
+}>;

package/dist/cjs/src/contexts/hooks/useStateContext.d.ts

@@ -0,0 +1 @@
+export declare const useStateContext: () => import("contexts/StateContext/StateContext").StateContextType;

package/dist/cjs/src/contexts/index.d.ts

@@ -7,3 +7,7 @@ export * from './ButtonActionsContext/ButtonActionsContext';
 export * from './ButtonActionsContext/ButtonActionsContextProvider';
 export * from './OrganismContext/OrganismContext';
 export * from './OrganismContext/OrganismContextProvider';
+export * from './AccountButtonContext/AccountButtonContext';
+export * from './AccountButtonContext/AccountButtonContextProvider';
+export * from './StateContext/StateContext';
+export * from './StateContext/StateContextProvider';

package/dist/cjs/src/fieldsConfiguration/mock.d.ts

@@ -1,8 +1,10 @@
 import { UIFields } from 'fieldsConfiguration/types';
+import { PasswordFields } from 'molecules/PasswordSetup/PasswordSetup';
 import { LoginFields } from 'organisms/LoginForm/types';
 import { SetPasswordFields } from 'organisms/SetPasswordForm/types';
 export declare const acquisitionFormMockFields: UIFields<Record<string, string>>;
 export declare const setPasswordMockFields: UIFields<SetPasswordFields>;
+export declare const passwordMockFields: UIFields<PasswordFields>;
 export declare const loginMockFields: UIFields<LoginFields>;
 export declare const sectionMockFields: UIFields<Record<string, string>>;
 export declare const profileInformationMockForm: {