@zealicsolutions/web-ui 0.3.16 → 0.3.18

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

@@ -0,0 +1,4 @@
+import { PropsWithChildren } from 'react';
+import { FormStepContainerProps } from 'containers';
+export declare type StepContainerProps = PropsWithChildren<Partial<FormStepContainerProps>>;
+export declare const FormStepContainer: ({ formStepName, order, conditionConfig, children, }: StepContainerProps) => JSX.Element;

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

@@ -0,0 +1 @@
+export { useCheckCondition } from './useCheckCondition';

package/dist/esm/src/containers/hooks/useCheckCondition.d.ts

@@ -0,0 +1,6 @@
+import { ConditionConfig } from 'containers/types/types';
+import { AnyObject } from 'typescript';
+/**
+ * @attention This hook needs to be used inside of the form container for the form fields
+ */
+export declare const useCheckCondition: (config?: ConditionConfig, formData?: AnyObject) => boolean;

package/dist/esm/src/containers/hooks/useCheckCondition.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -2,3 +2,4 @@ import { ContainerComponentProps } from 'containers';
 export declare const sliderContainerProps: ContainerComponentProps;
 export declare const formContainerProps: ContainerComponentProps;
 export declare const columnContainerProps: ContainerComponentProps;
+export declare const formBuilderData: ContainerComponentProps;

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

@@ -5,8 +5,7 @@ export declare const ContainerWrapper: import("styled-components").StyledCompone
         scrollBehaviour: import("containers/types/types").ContainerScrollBehaviourType;
         cornerRadius: number;
         styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
-        formProps: {
-            mode: keyof import("react-hook-form").ValidationMode;
-        };
+        formProps: import("containers/types/types").FormContainerProps;
+        formStepProps: import("containers/types/types").FormStepContainerProps;
     }> | undefined;
 }, never>;

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

@@ -1,9 +1,9 @@
 import { SelectOption } from 'atoms';
 import { AdditionalTabContainerProps, ButtonProps, CheckboxFieldProps, ImageProps, InputFieldProps, RadioButtonFieldProps, SelectFieldProps, TabGroupProps, TextMoleculeProps } from 'molecules';
-import { UseFormReturn } from 'react-hook-form';
 import { CSSProperties } from 'styled-components';
 import type { AnyObject, Nullable, StrictUnion } from 'typescript';
-import { ContainerComponentProps } from './types';
+import { ConditionConfig, ContainerComponentProps } from './types';
+import { UseFormReturn } from 'react-hook-form';
 export declare type ActionTypes = 'link' | 'popup' | 'drawer' | 'download' | 'submit' | 'reset' | 'destroy';
 export declare type DownloadFile = {
     url: string;
@@ -35,7 +35,7 @@ export declare type ImageAttributes = {
 export interface TextAttributes {
     id?: string;
     attributeType: 'text';
-    isRichText: boolean;
+    isRichText?: boolean;
     text: string;
 }
 export interface VideoAttributes {
@@ -68,6 +68,19 @@ export interface IterableAttributes {
     attributeType: 'iterable';
     options: SelectOption[];
 }
+export interface DataConnectionAttributes {
+    id: string;
+    attributeType: 'data_model_field';
+    dataModelField: {
+        id: string;
+        fieldName: string;
+    };
+}
+export interface ConditionConfigAttributes {
+    id: string;
+    attributeType: 'condition_config';
+    conditionConfig: ConditionConfig;
+}
 export declare type MoleculeTypes = 'image' | 'text' | 'button' | 'video' | 'header_tab_group' | 'input_field' | 'select_field' | 'radio_button_field' | 'checkbox_field';
 export interface BaseMolecule {
     id: string;
@@ -83,7 +96,7 @@ export interface ImageMolecule extends BaseMolecule {
         link: LinkAttributes;
     };
     config: {
-        props: Omit<ImageProps, 'src' | 'link' | 'altText'>;
+        props?: Omit<ImageProps, 'src' | 'link' | 'altText'>;
     };
 }
 export interface TextMoleculeType extends BaseMolecule {
@@ -91,9 +104,10 @@ export interface TextMoleculeType extends BaseMolecule {
     attributes: {
         text: TextAttributes;
         seoStyle: SelectAttributes;
+        fontVariant: SelectAttributes;
     };
     config: {
-        props: TextMoleculeProps;
+        props?: TextMoleculeProps;
     };
 }
 export interface ButtonMolecule extends BaseMolecule {
@@ -103,7 +117,7 @@ export interface ButtonMolecule extends BaseMolecule {
         action: ActionAttributes;
     };
     config: {
-        props: Partial<Omit<ButtonProps, 'disabled' | 'children' | 'link' | 'text' | 'onClick' | 'elementId'>>;
+        props?: Partial<Omit<ButtonProps, 'disabled' | 'children' | 'link' | 'text' | 'onClick' | 'elementId'>>;
     };
 }
 export interface VideoMolecule extends BaseMolecule {
@@ -136,9 +150,11 @@ export interface TextInputMolecule extends BaseMolecule {
         label: TextAttributes;
         required: BooleanAttributes;
         inputType: SelectAttributes;
+        dataModelField: DataConnectionAttributes;
+        conditionConfig: ConditionConfigAttributes;
     };
     config: {
-        props: Partial<{
+        props?: Partial<{
             state: 'default' | 'error';
         } & InputFieldProps>;
     };
@@ -149,9 +165,11 @@ export interface SelectFieldMolecule extends BaseMolecule {
         label: TextAttributes;
         required: BooleanAttributes;
         options: IterableAttributes;
+        dataModelField: DataConnectionAttributes;
+        conditionConfig: ConditionConfigAttributes;
     };
     config: {
-        props: Partial<{
+        props?: Partial<{
             state: 'default' | 'error';
         } & SelectFieldProps>;
     };
@@ -162,9 +180,11 @@ export interface RadioButtonFieldMolecule extends BaseMolecule {
         label: TextAttributes;
         required: BooleanAttributes;
         options: IterableAttributes;
+        dataModelField: DataConnectionAttributes;
+        conditionConfig: ConditionConfigAttributes;
     };
     config: {
-        props: Partial<{
+        props?: Partial<{
             state: 'default' | 'error';
         } & RadioButtonFieldProps<string>>;
     };
@@ -175,9 +195,11 @@ export interface CheckboxFieldMolecule extends BaseMolecule {
         label: TextAttributes;
         required: BooleanAttributes;
         options: IterableAttributes;
+        dataModelField: DataConnectionAttributes;
+        conditionConfig: ConditionConfigAttributes;
     };
     config: {
-        props: Partial<{
+        props?: Partial<{
             state: 'default' | 'error';
         } & CheckboxFieldProps>;
     };

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

@@ -2,19 +2,26 @@ import { TabGroupProps } from 'molecules';
 import { PropsWithChildren } from 'react';
 import { CSSProperties } from 'styled-components';
 import { ValidationMode } from 'react-hook-form';
-import type { AnyObject, StylesType } from 'typescript';
+import type { AnyObject, Nullable, StylesType } from 'typescript';
 import { Molecule } from './moleculeTypes';
-export declare type ContainerType = 'row' | 'column' | 'slider' | 'form';
+export declare type ContainerType = 'row' | 'column' | 'slider' | 'form' | 'form_step';
 export declare type ContainerPositionType = 'fixed' | 'sticky' | 'static' | 'relative';
 export declare type ContainerScrollBehaviourType = 'vertical' | 'horizontal' | 'auto' | 'none';
+export declare type FormStepContainerProps = {
+    formStepName: string;
+    order: number;
+    conditionConfig: ConditionConfig;
+};
+export declare type FormContainerProps = {
+    mode: keyof ValidationMode;
+};
 export declare type ContainerPropsType = Partial<{
     position: ContainerPositionType;
     scrollBehaviour: ContainerScrollBehaviourType;
     cornerRadius: number;
     styles: StylesType;
-    formProps: {
-        mode: keyof ValidationMode;
-    };
+    formProps: FormContainerProps;
+    formStepProps: FormStepContainerProps;
 }>;
 export declare type AdditionalContainerProps = Partial<{
     containerStyle: CSSProperties;
@@ -41,3 +48,19 @@ export declare type ContainerComponentProps = {
     attributes?: AnyObject;
     containerLibraryId?: string;
 };
+export declare type CriteriaType = 'operator' | 'condition';
+export declare type ConditionCriteria = {
+    id: string;
+    type: CriteriaType;
+    operator: string;
+    dataFieldId: Nullable<string>;
+    dataFieldName: Nullable<string>;
+    dataValue: Nullable<string>;
+    connectedTo: Nullable<string>;
+};
+export declare type SegmentationType = 'simple' | 'advanced';
+export declare type ConditionConfig = Nullable<{
+    id: string;
+    segmentationType: SegmentationType;
+    criteriaList: ConditionCriteria[];
+}>;

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

@@ -4,6 +4,7 @@ import { SelectOption } from 'atoms';
 import type { StylesType } from 'typescript';
 import { CheckboxInternalConfigProps } from 'atoms/Checkbox/types';
 import { FieldLabelsProps } from '../FieldLabels/FieldLabels';
+import { ConditionConfig } from 'containers';
 export declare type CheckboxesProps = Partial<{
     checkboxGroupWrapperStyles: StylesType;
     checkboxFieldWrapperStyles: StylesType;
@@ -25,5 +26,6 @@ export declare type CheckboxFieldProps = Partial<{
     required: boolean;
     optional: boolean;
     wrapperStyles: StylesType;
+    conditionConfig?: ConditionConfig;
 }>;
-export declare const CheckboxField: ({ checkboxesProps, name, rules, control, optional, required, labelsProps, wrapperStyles, }: CheckboxFieldProps) => JSX.Element;
+export declare const CheckboxField: ({ checkboxesProps, name, rules, control, optional, required, labelsProps, wrapperStyles, conditionConfig, }: CheckboxFieldProps) => JSX.Element | null;

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

@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/react';
 import { CheckboxField as CheckboxFieldComponent } from 'molecules';
 declare const _default: {
     title: string;
-    component: ({ checkboxesProps, name, rules, control, optional, required, labelsProps, wrapperStyles, }: Partial<{
+    component: ({ checkboxesProps, name, rules, control, optional, required, labelsProps, wrapperStyles, conditionConfig, }: Partial<{
         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>>;
@@ -48,7 +48,8 @@ declare const _default: {
         required: boolean;
         optional: boolean;
         wrapperStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
-    }>) => JSX.Element;
+        conditionConfig?: import("../..").ConditionConfig | undefined;
+    }>) => JSX.Element | null;
 };
 export default _default;
 export declare const CheckboxField: StoryFn<typeof CheckboxFieldComponent>;

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

@@ -3,6 +3,7 @@ import { Control, ControllerProps } from 'react-hook-form/dist/types';
 import { InputProps } from 'atoms';
 import type { StylesType } from 'typescript';
 import { FieldLabelsProps } from '../FieldLabels/FieldLabels';
+import { ConditionConfig } from 'containers';
 export declare type InputFieldProps = Partial<{
     name: string;
     control: Control<any>;
@@ -13,5 +14,6 @@ export declare type InputFieldProps = Partial<{
     inputProps: InputProps;
     styles: StylesType;
     labelsProps: FieldLabelsProps;
+    conditionConfig?: ConditionConfig;
 }>;
-export declare const InputField: ({ control, name, inputProps, styles, labelsProps, defaultValue, optional, required, rules, }: InputFieldProps) => JSX.Element;
+export declare const InputField: ({ control, name, inputProps, styles, labelsProps, defaultValue, optional, required, rules, conditionConfig, }: InputFieldProps) => JSX.Element | null;

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

@@ -3,7 +3,7 @@ import { StoryFn } from '@storybook/react';
 import { InputFieldProps } from './InputField';
 declare const _default: {
     title: string;
-    component: ({ control, name, inputProps, styles, labelsProps, defaultValue, optional, required, rules, }: Partial<{
+    component: ({ control, name, inputProps, styles, labelsProps, defaultValue, optional, required, rules, conditionConfig, }: Partial<{
         name: string;
         control: import("react-hook-form").Control<any, any>;
         rules: Omit<Partial<{
@@ -30,7 +30,8 @@ declare const _default: {
         inputProps: import("../..").InputProps;
         styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
         labelsProps: import("..").FieldLabelsProps;
-    }>) => JSX.Element;
+        conditionConfig?: import("../..").ConditionConfig | undefined;
+    }>) => JSX.Element | null;
 };
 export default _default;
 export declare const InputField: StoryFn<InputFieldProps>;

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

@@ -3,6 +3,7 @@ import { RadioButtonInternalConfigProps, RadioButtonsProps } from 'atoms';
 import { Control, ControllerProps } from 'react-hook-form/dist/types';
 import type { StylesType } from 'typescript';
 import { FieldLabelsProps } from '../FieldLabels/FieldLabels';
+import { ConditionConfig } from 'containers';
 export declare type RadioButtonFieldProps<T extends string> = Partial<{
     name: string;
     rules: ControllerProps['rules'];
@@ -14,8 +15,9 @@ export declare type RadioButtonFieldProps<T extends string> = Partial<{
     defaultValue: string;
     radioButtonsProps: RadioButtonsProps<T>;
     internalConfig: RadioButtonInternalConfigProps;
+    conditionConfig?: ConditionConfig;
 }>;
-export declare const RadioButtonField: <T extends string>({ name, rules, styles, control, optional, required, labelsProps, defaultValue, radioButtonsProps, }: Partial<{
+export declare const RadioButtonField: <T extends string>({ name, rules, styles, control, optional, required, labelsProps, defaultValue, radioButtonsProps, conditionConfig, }: Partial<{
     name: string;
     rules: ControllerProps['rules'];
     styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
@@ -57,4 +59,5 @@ export declare const RadioButtonField: <T extends string>({ name, rules, styles,
         buttonOptionSpacing: import("../..").SizesTypes;
         radioGroupWrapperStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
     }>;
-}>) => JSX.Element;
+    conditionConfig?: ConditionConfig | undefined;
+}>) => JSX.Element | null;

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

@@ -3,7 +3,7 @@ import type { ComponentStory } from '@storybook/react';
 import { RadioButtonField as RadioButtonFieldComponent } from './RadioButtonField';
 declare const _default: {
     title: string;
-    component: <T extends string>({ name, rules, styles, control, optional, required, labelsProps, defaultValue, radioButtonsProps, }: Partial<{
+    component: <T extends string>({ name, rules, styles, control, optional, required, labelsProps, defaultValue, radioButtonsProps, conditionConfig, }: Partial<{
         name: string;
         rules: Omit<Partial<{
             required: string | import("react-hook-form").ValidationRule<boolean>;
@@ -62,7 +62,8 @@ declare const _default: {
             buttonOptionSpacing: import("theme").SizesTypes;
             radioGroupWrapperStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
         }>;
-    }>) => JSX.Element;
+        conditionConfig?: import("../..").ConditionConfig | undefined;
+    }>) => JSX.Element | null;
 };
 export default _default;
 export declare const RadioButtonField: ComponentStory<typeof RadioButtonFieldComponent>;

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

@@ -3,6 +3,7 @@ import { SelectProps } from 'atoms';
 import { Control, ControllerProps } from 'react-hook-form/dist/types';
 import type { StylesType } from 'typescript';
 import { FieldLabelsProps } from '../FieldLabels/FieldLabels';
+import { ConditionConfig } from 'containers';
 export declare type SelectFieldProps = Partial<{
     selectProps: SelectProps;
     labelsProps: FieldLabelsProps;
@@ -13,5 +14,6 @@ export declare type SelectFieldProps = Partial<{
     optional: boolean;
     defaultValue: string;
     styles: StylesType;
+    conditionConfig?: ConditionConfig;
 }>;
-export declare const SelectField: ({ selectProps, name, defaultValue, optional, required, control, styles, labelsProps, rules, }: SelectFieldProps) => JSX.Element;
+export declare const SelectField: ({ selectProps, name, defaultValue, optional, required, control, styles, labelsProps, rules, conditionConfig, }: SelectFieldProps) => JSX.Element | null;

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

@@ -3,7 +3,7 @@ import { StoryFn } from '@storybook/react';
 import { SelectFieldProps } from './SelectField';
 declare const _default: {
     title: string;
-    component: ({ selectProps, name, defaultValue, optional, required, control, styles, labelsProps, rules, }: Partial<{
+    component: ({ selectProps, name, defaultValue, optional, required, control, styles, labelsProps, rules, conditionConfig, }: Partial<{
         selectProps: Partial<{
             ref: import("react-hook-form").RefCallBack;
             onBlur: import("typescript").Callback;
@@ -43,7 +43,8 @@ declare const _default: {
         optional: boolean;
         defaultValue: string;
         styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
-    }>) => JSX.Element;
+        conditionConfig?: import("../..").ConditionConfig | undefined;
+    }>) => JSX.Element | null;
 };
 export default _default;
 export declare const SelectField: StoryFn<SelectFieldProps>;

package/dist/index.d.ts

@@ -37,7 +37,7 @@ import { LoginFields as LoginFields$1 } from 'organisms/LoginForm/types';
 import { AnnotationsList as AnnotationsList$1 } from 'contexts/MlrRichTextViewerContext/types';
 import * as contexts_MlrRichTextViewerContext_MlrRichTextViewerContext from 'contexts/MlrRichTextViewerContext/MlrRichTextViewerContext';
 import * as contexts_ButtonActionsContext_ButtonActionsContext from 'contexts/ButtonActionsContext/ButtonActionsContext';
-import { ContainerComponentProps as ContainerComponentProps$1, ContainerProps as ContainerProps$1, Molecule as Molecule$1 } from 'containers';
+import { ContainerComponentProps as ContainerComponentProps$1, ConditionConfig as ConditionConfig$1, ContainerProps as ContainerProps$1, Molecule as Molecule$1 } from 'containers';
 export * from 'helpers/constants';
 import { CheckboxInternalConfigProps as CheckboxInternalConfigProps$1 } from 'atoms/Checkbox/types';
 import * as containers_types_types from 'containers/types/types';
@@ -971,8 +971,9 @@ declare type InputFieldProps = Partial<{
     inputProps: InputProps$1;
     styles: StylesType;
     labelsProps: FieldLabelsProps;
+    conditionConfig?: ConditionConfig$1;
 }>;
-declare const InputField: ({ control, name, inputProps, styles, labelsProps, defaultValue, optional, required, rules, }: InputFieldProps) => JSX.Element;
+declare const InputField: ({ control, name, inputProps, styles, labelsProps, defaultValue, optional, required, rules, conditionConfig, }: InputFieldProps) => JSX.Element | null;
 
 declare type FieldMapperProps<T extends object> = {
     field: UIField$1<keyof T>;
@@ -1006,8 +1007,9 @@ declare type CheckboxFieldProps = Partial<{
     required: boolean;
     optional: boolean;
     wrapperStyles: StylesType;
+    conditionConfig?: ConditionConfig$1;
 }>;
-declare const CheckboxField: ({ checkboxesProps, name, rules, control, optional, required, labelsProps, wrapperStyles, }: CheckboxFieldProps) => JSX.Element;
+declare const CheckboxField: ({ checkboxesProps, name, rules, control, optional, required, labelsProps, wrapperStyles, conditionConfig, }: CheckboxFieldProps) => JSX.Element | null;
 
 declare type CheckboxGroupProps = Partial<{
     ref: RefCallBack;
@@ -1027,8 +1029,9 @@ declare type SelectFieldProps = Partial<{
     optional: boolean;
     defaultValue: string;
     styles: StylesType;
+    conditionConfig?: ConditionConfig$1;
 }>;
-declare const SelectField: ({ selectProps, name, defaultValue, optional, required, control, styles, labelsProps, rules, }: SelectFieldProps) => JSX.Element;
+declare const SelectField: ({ selectProps, name, defaultValue, optional, required, control, styles, labelsProps, rules, conditionConfig, }: SelectFieldProps) => JSX.Element | null;
 
 declare type CustomValidationRule<T = string> = {
     text: string;
@@ -1178,8 +1181,9 @@ declare type RadioButtonFieldProps<T extends string> = Partial<{
     defaultValue: string;
     radioButtonsProps: RadioButtonsProps$1<T>;
     internalConfig: RadioButtonInternalConfigProps$1;
+    conditionConfig?: ConditionConfig$1;
 }>;
-declare const RadioButtonField: <T extends string>({ name, rules, styles, control, optional, required, labelsProps, defaultValue, radioButtonsProps, }: Partial<{
+declare const RadioButtonField: <T extends string>({ name, rules, styles, control, optional, required, labelsProps, defaultValue, radioButtonsProps, conditionConfig, }: Partial<{
     name: string;
     rules: ControllerProps$1['rules'];
     styles: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<object, styled_components.DefaultTheme>>;
@@ -1221,7 +1225,8 @@ declare const RadioButtonField: <T extends string>({ name, rules, styles, contro
         buttonOptionSpacing: SizesTypes;
         radioGroupWrapperStyles: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<object, styled_components.DefaultTheme>>;
     }>;
-}>) => JSX.Element;
+    conditionConfig?: ConditionConfig$1 | undefined;
+}>) => JSX.Element | null;
 
 declare type AlertProps = {
     style?: CSSProperties;
@@ -1445,7 +1450,7 @@ declare type ImageAttributes = {
 interface TextAttributes {
     id?: string;
     attributeType: 'text';
-    isRichText: boolean;
+    isRichText?: boolean;
     text: string;
 }
 interface VideoAttributes {
@@ -1478,6 +1483,19 @@ interface IterableAttributes {
     attributeType: 'iterable';
     options: SelectOption$1[];
 }
+interface DataConnectionAttributes {
+    id: string;
+    attributeType: 'data_model_field';
+    dataModelField: {
+        id: string;
+        fieldName: string;
+    };
+}
+interface ConditionConfigAttributes {
+    id: string;
+    attributeType: 'condition_config';
+    conditionConfig: ConditionConfig;
+}
 declare type MoleculeTypes = 'image' | 'text' | 'button' | 'video' | 'header_tab_group' | 'input_field' | 'select_field' | 'radio_button_field' | 'checkbox_field';
 interface BaseMolecule {
     id: string;
@@ -1493,7 +1511,7 @@ interface ImageMolecule extends BaseMolecule {
         link: LinkAttributes;
     };
     config: {
-        props: Omit<ImageProps$1, 'src' | 'link' | 'altText'>;
+        props?: Omit<ImageProps$1, 'src' | 'link' | 'altText'>;
     };
 }
 interface TextMoleculeType extends BaseMolecule {
@@ -1501,9 +1519,10 @@ interface TextMoleculeType extends BaseMolecule {
     attributes: {
         text: TextAttributes;
         seoStyle: SelectAttributes;
+        fontVariant: SelectAttributes;
     };
     config: {
-        props: TextMoleculeProps$1;
+        props?: TextMoleculeProps$1;
     };
 }
 interface ButtonMolecule extends BaseMolecule {
@@ -1513,7 +1532,7 @@ interface ButtonMolecule extends BaseMolecule {
         action: ActionAttributes;
     };
     config: {
-        props: Partial<Omit<ButtonProps$1, 'disabled' | 'children' | 'link' | 'text' | 'onClick' | 'elementId'>>;
+        props?: Partial<Omit<ButtonProps$1, 'disabled' | 'children' | 'link' | 'text' | 'onClick' | 'elementId'>>;
     };
 }
 interface VideoMolecule extends BaseMolecule {
@@ -1546,9 +1565,11 @@ interface TextInputMolecule extends BaseMolecule {
         label: TextAttributes;
         required: BooleanAttributes;
         inputType: SelectAttributes;
+        dataModelField: DataConnectionAttributes;
+        conditionConfig: ConditionConfigAttributes;
     };
     config: {
-        props: Partial<{
+        props?: Partial<{
             state: 'default' | 'error';
         } & InputFieldProps$1>;
     };
@@ -1559,9 +1580,11 @@ interface SelectFieldMolecule extends BaseMolecule {
         label: TextAttributes;
         required: BooleanAttributes;
         options: IterableAttributes;
+        dataModelField: DataConnectionAttributes;
+        conditionConfig: ConditionConfigAttributes;
     };
     config: {
-        props: Partial<{
+        props?: Partial<{
             state: 'default' | 'error';
         } & SelectFieldProps$1>;
     };
@@ -1572,9 +1595,11 @@ interface RadioButtonFieldMolecule extends BaseMolecule {
         label: TextAttributes;
         required: BooleanAttributes;
         options: IterableAttributes;
+        dataModelField: DataConnectionAttributes;
+        conditionConfig: ConditionConfigAttributes;
     };
     config: {
-        props: Partial<{
+        props?: Partial<{
             state: 'default' | 'error';
         } & RadioButtonFieldProps$1<string>>;
     };
@@ -1585,9 +1610,11 @@ interface CheckboxFieldMolecule extends BaseMolecule {
         label: TextAttributes;
         required: BooleanAttributes;
         options: IterableAttributes;
+        dataModelField: DataConnectionAttributes;
+        conditionConfig: ConditionConfigAttributes;
     };
     config: {
-        props: Partial<{
+        props?: Partial<{
             state: 'default' | 'error';
         } & CheckboxFieldProps$1>;
     };
@@ -1596,17 +1623,24 @@ declare type Molecule = StrictUnion<ImageMolecule | TextMoleculeType | ButtonMol
     form?: UseFormReturn<any>;
 };
 
-declare type ContainerType = 'row' | 'column' | 'slider' | 'form';
+declare type ContainerType = 'row' | 'column' | 'slider' | 'form' | 'form_step';
 declare type ContainerPositionType = 'fixed' | 'sticky' | 'static' | 'relative';
 declare type ContainerScrollBehaviourType = 'vertical' | 'horizontal' | 'auto' | 'none';
+declare type FormStepContainerProps = {
+    formStepName: string;
+    order: number;
+    conditionConfig: ConditionConfig;
+};
+declare type FormContainerProps = {
+    mode: keyof ValidationMode;
+};
 declare type ContainerPropsType = Partial<{
     position: ContainerPositionType;
     scrollBehaviour: ContainerScrollBehaviourType;
     cornerRadius: number;
     styles: StylesType;
-    formProps: {
-        mode: keyof ValidationMode;
-    };
+    formProps: FormContainerProps;
+    formStepProps: FormStepContainerProps;
 }>;
 declare type AdditionalContainerProps = Partial<{
     containerStyle: CSSProperties;
@@ -1633,6 +1667,22 @@ declare type ContainerComponentProps = {
     attributes?: AnyObject;
     containerLibraryId?: string;
 };
+declare type CriteriaType = 'operator' | 'condition';
+declare type ConditionCriteria = {
+    id: string;
+    type: CriteriaType;
+    operator: string;
+    dataFieldId: Nullable<string>;
+    dataFieldName: Nullable<string>;
+    dataValue: Nullable<string>;
+    connectedTo: Nullable<string>;
+};
+declare type SegmentationType = 'simple' | 'advanced';
+declare type ConditionConfig = Nullable<{
+    id: string;
+    segmentationType: SegmentationType;
+    criteriaList: ConditionCriteria[];
+}>;
 
 declare const ContainerWrapper: styled_components.StyledComponent<"div", styled_components.DefaultTheme, Pick<ContainerProps$2, "type"> & {
     containerProps?: Partial<{
@@ -1640,9 +1690,8 @@ declare const ContainerWrapper: styled_components.StyledComponent<"div", styled_
         scrollBehaviour: containers_types_types.ContainerScrollBehaviourType;
         cornerRadius: number;
         styles: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<object, styled_components.DefaultTheme>>;
-        formProps: {
-            mode: keyof react_hook_form.ValidationMode;
-        };
+        formProps: containers_types_types.FormContainerProps;
+        formStepProps: containers_types_types.FormStepContainerProps;
     }> | undefined;
 }, never>;
 
@@ -1651,4 +1700,4 @@ declare const OrganismItem: ({ item, tabsProps, }: {
     tabsProps?: Pick<TabGroupProps$1<string, string>, "tabs" | "activeTabKey" | "onTabChange"> | undefined;
 }) => JSX.Element | null;
 
-export { AcquisitionForm, AcquisitionFormProps, ActionAttributes, ActionTypes, AdditionalContainerProps, AdditionalTabContainerProps, Alert, AlertProps, AnnotationsList, ArrowIconWrapper, AuthMethod, Avatar, AvatarDropdown, 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, ColumnItem, Columns, ColumnsProps, Consent, ConsentProps, Container, ContainerComponent, ContainerComponentProps, ContainerPositionType, ContainerProps, ContainerPropsType, ContainerScrollBehaviourType, ContainerType, ContainerWrapper, CustomValidation, CustomValidationProps, CustomValidationRule, 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, GoogleMap, GoogleMapProps, Header, HeaderProps, HeroImage, HeroImageAlignment, HeroImageProps, HeroImageTemplate, HeroSlider, HeroSliderProps, HeroSliderWrapper, HorizontalButtons, HorizontalButtonsField, HorizontalButtonsProps, HorizontalPadding, HorizontalPaddingProps, ISI, ISIProps, Icon, IconButton, IconButtonProps, IconNames, IconProps, IconWrapper, Image, ImageAttributes, ImageMolecule, ImageProps, Input, InputField, InputFieldInternalConfigProps, InputFieldProps, InputFieldTypes, InputIconProps, InputProps, IterableAttributes, LabelInternalConfig, LinkAttributes, LoginForm, LoginFormProps, MATRIX_MESSAGE_DATA_ID, MATRIX_MESSAGE_ELEMENT_ID, MapPosition, MenuItem, MenuItems, MenuItemsProps, MenuNavigation, MenuNavigationProps, MlrRichTextViewerContext, MlrRichTextViewerContextType, MlrRichTextViewerProvider, MlrRichTextViewerProviderProps, ModalWrapper, Molecule, MoleculeTypes, NavigationDotsWrapper, OrganismItem, OrientationType, PdfDocument, PdfDocumentProps, ProcessTracker, ProcessTrackerProps, ProcessTrackerStatus, ProfileInformation, ProfileInformationProps, RadioButtonField, RadioButtonFieldMolecule, RadioButtonFieldProps, RadioButtonInternalConfigProps, RadioButtons, RadioButtonsProps, RadioGroupWrapper, RegularImage, RegularImageProps, RichTextEditorProps, RichTextViewer, RuleLabelInternalConfig, Select, SelectAttributes, SelectField, SelectFieldMolecule, SelectFieldProps, SelectInternalConfigurationOptions, SelectOption, SelectProps, SelectableCardGroup, SelectableCardGroupProps, SeoTags, SetPasswordForm, SetPasswordFormProps, SetPasswordRuleValidation, SizesTypes, Slide, SlidesWrapper, Spacer, SpacerProps, Spinner, 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, Wrapper, ZealTheme, ZealThemeProvider, ZealUIModal, ZealUIModalProps, acquisitionFormMockFields, defaultTheme, getFieldPlaceholder, getFieldsFromFieldSections, getInitialValuesFromFields, isFormValid, loginMockFields, profileInformationMockForm, sectionMockFields, setPasswordMockFields, showAcceptToastMessage, toast, toastStyles, useButtonActionsContext, useMediaQuery, useMlrRichTextViewerContext, useRequiredConsentsAcceptedValues, useStep };
+export { AcquisitionForm, AcquisitionFormProps, ActionAttributes, ActionTypes, AdditionalContainerProps, AdditionalTabContainerProps, Alert, AlertProps, AnnotationsList, ArrowIconWrapper, AuthMethod, Avatar, AvatarDropdown, 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, ColumnItem, Columns, ColumnsProps, ConditionConfig, ConditionConfigAttributes, ConditionCriteria, Consent, ConsentProps, Container, ContainerComponent, ContainerComponentProps, ContainerPositionType, ContainerProps, ContainerPropsType, ContainerScrollBehaviourType, ContainerType, ContainerWrapper, CriteriaType, CustomValidation, CustomValidationProps, CustomValidationRule, DataConnectionAttributes, 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, FormStepContainerProps, GoogleMap, GoogleMapProps, Header, HeaderProps, HeroImage, HeroImageAlignment, HeroImageProps, HeroImageTemplate, HeroSlider, HeroSliderProps, HeroSliderWrapper, HorizontalButtons, HorizontalButtonsField, HorizontalButtonsProps, HorizontalPadding, HorizontalPaddingProps, ISI, ISIProps, Icon, IconButton, IconButtonProps, IconNames, IconProps, IconWrapper, Image, ImageAttributes, ImageMolecule, ImageProps, Input, InputField, InputFieldInternalConfigProps, InputFieldProps, InputFieldTypes, InputIconProps, InputProps, IterableAttributes, LabelInternalConfig, LinkAttributes, LoginForm, LoginFormProps, MATRIX_MESSAGE_DATA_ID, MATRIX_MESSAGE_ELEMENT_ID, MapPosition, MenuItem, MenuItems, MenuItemsProps, MenuNavigation, MenuNavigationProps, MlrRichTextViewerContext, MlrRichTextViewerContextType, MlrRichTextViewerProvider, MlrRichTextViewerProviderProps, ModalWrapper, Molecule, MoleculeTypes, NavigationDotsWrapper, OrganismItem, OrientationType, PdfDocument, PdfDocumentProps, ProcessTracker, ProcessTrackerProps, 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, Slide, SlidesWrapper, Spacer, SpacerProps, Spinner, 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, Wrapper, ZealTheme, ZealThemeProvider, ZealUIModal, ZealUIModalProps, acquisitionFormMockFields, defaultTheme, getFieldPlaceholder, getFieldsFromFieldSections, getInitialValuesFromFields, isFormValid, loginMockFields, profileInformationMockForm, sectionMockFields, setPasswordMockFields, showAcceptToastMessage, toast, toastStyles, useButtonActionsContext, useMediaQuery, useMlrRichTextViewerContext, useRequiredConsentsAcceptedValues, useStep };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zealicsolutions/web-ui",
-  "version": "0.3.16",
+  "version": "0.3.18",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/Zealic_Solutions/zeal-ui-web.git"
@@ -53,6 +53,7 @@
     "@swc/jest": "^0.2.22",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.4.3",
     "@types/jest": "^29.0.0",
     "@types/react": "^18.0.18",