@zealicsolutions/web-ui 0.3.32 → 0.3.33

package/dist/esm/src/atoms/Input/Input.d.ts

@@ -1,4 +1,5 @@
 import type { IconNames } from 'atoms/Icon/Icon';
+import { FormStateType } from 'containers';
 import { InputFieldTypes } from 'fieldsConfiguration/types';
 import React from 'react';
 import { ThemeColors } from 'theme/types';
@@ -18,20 +19,21 @@ export declare type InputIconProps = {
     name: IconNames;
     onClick?: Callback;
 };
-export declare type InputProps = {
-    value?: string;
-    leftIcon?: InputIconProps;
-    rightIcon?: InputIconProps;
-    onBlur?: Callback;
-    type?: InputFieldTypes;
-    placeholder?: string;
-    disabled?: boolean;
-    isEditMode?: boolean;
-    isError?: boolean;
-    maxLength?: number;
-    onChange?: (value: string) => void;
-    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-    internalConfig?: InputFieldInternalConfigProps;
+export declare type InputProps = Partial<{
+    value: string;
+    leftIcon: InputIconProps;
+    rightIcon: InputIconProps;
+    onBlur: Callback;
+    type: InputFieldTypes;
+    placeholder: string;
+    disabled: boolean;
+    isEditMode: boolean;
+    isError: boolean;
+    maxLength: number;
+    onChange: (value: string) => void;
+    onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    internalConfig: InputFieldInternalConfigProps;
     config?: MaskConfig;
-};
+    state: FormStateType;
+}>;
 export declare const Input: ({ value, leftIcon, rightIcon, onChange, onBlur, disabled, isError, placeholder, isEditMode, type, internalConfig, config, ...rest }: InputProps) => JSX.Element;

package/dist/esm/src/atoms/Input/Input.stories.d.ts

@@ -3,7 +3,36 @@ import type { StoryFn } from '@storybook/react';
 import { InputProps } from './Input';
 declare const _default: {
     title: string;
-    component: ({ value, leftIcon, rightIcon, onChange, onBlur, disabled, isError, placeholder, isEditMode, type, internalConfig, config, ...rest }: InputProps) => JSX.Element;
+    component: ({ value, leftIcon, rightIcon, onChange, onBlur, disabled, isError, placeholder, isEditMode, type, internalConfig, config, ...rest }: Partial<{
+        value: string;
+        leftIcon: import("./Input").InputIconProps;
+        rightIcon: import("./Input").InputIconProps;
+        onBlur: import("../../typescript").Callback;
+        type: import("../..").InputFieldTypes;
+        placeholder: string;
+        disabled: boolean;
+        isEditMode: boolean;
+        isError: boolean;
+        maxLength: number;
+        onChange: (value: string) => void;
+        onKeyDown: (event: import("react").KeyboardEvent<HTMLInputElement>) => void;
+        internalConfig: Partial<{
+            textColor: string;
+            textFontSize: number;
+            placeholderTextColor: string;
+            placeholderTextFontSize: number;
+            verticalPadding: number;
+            horizontalPadding: 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>>;
+        }>;
+        config?: Partial<{
+            maskPlaceholder: string;
+            dataModelFieldType: import("../..").InputFieldTypes;
+            maskPattern: (string | RegExp)[];
+        }> | undefined;
+        state: import("../..").FormStateType;
+    }>) => JSX.Element;
 };
 export default _default;
 export declare const Input: StoryFn<InputProps>;

package/dist/esm/src/atoms/Input/helpers.d.ts

@@ -13,6 +13,35 @@ export declare const getSpecificInputProps: (type: InputFieldTypes) => {
     inputMode?: "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
 };
 export declare const getMaskInputProps: (type?: InputFieldTypes, config?: MaskConfig) => Pick<MaskedInputProps, 'pipe' | 'mask' | 'placeholder' | 'keepCharPositions'>;
-export declare const getInputIconColor: ({ isEditMode, isFocused, isError, disabled, }: Pick<InputProps, "disabled" | "isError" | "isEditMode"> & {
+export declare const getInputIconColor: ({ isEditMode, isFocused, isError, disabled, }: Pick<Partial<{
+    value: string;
+    leftIcon: import("atoms").InputIconProps;
+    rightIcon: import("atoms").InputIconProps;
+    onBlur: import("../../typescript").Callback;
+    type: InputFieldTypes;
+    placeholder: string;
+    disabled: boolean;
+    isEditMode: boolean;
+    isError: boolean;
+    maxLength: number;
+    onChange: (value: string) => void;
+    onKeyDown: (event: import("react").KeyboardEvent<HTMLInputElement>) => void;
+    internalConfig: Partial<{
+        textColor: string;
+        textFontSize: number;
+        placeholderTextColor: string;
+        placeholderTextFontSize: number;
+        verticalPadding: number;
+        horizontalPadding: 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>>;
+    }>;
+    config?: Partial<{
+        maskPlaceholder: string;
+        dataModelFieldType: InputFieldTypes;
+        maskPattern: Array<string | RegExp>;
+    }> | undefined;
+    state: import("../..").FormStateType;
+}>, "disabled" | "isError" | "isEditMode"> & {
     isFocused: boolean;
 }) => ThemeColors;

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

@@ -27,6 +27,7 @@ declare type Action = {
     reset: ResetAction;
     destroy: DestroyAction;
 }>;
+export declare type FormStateType = 'default' | 'success' | 'format_error' | 'field_error' | 'open_dropdown';
 export declare type ImageAttributes = {
     attributeType: 'image';
     imageSource: string;
@@ -81,6 +82,10 @@ export interface ConditionConfigAttributes {
     attributeType: 'condition_config';
     conditionConfig: ConditionConfig;
 }
+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';
 export interface BaseMolecule {
     id: string;
@@ -105,6 +110,7 @@ export interface TextMoleculeType extends BaseMolecule {
         text: TextAttributes;
         seoStyle: SelectAttributes;
         fontVariant: SelectAttributes;
+        textColor: ColorAttributes;
     }>;
     config: {
         props?: TextMoleculeProps;
@@ -154,9 +160,7 @@ export interface TextInputMolecule extends BaseMolecule {
         conditionConfig: ConditionConfigAttributes;
     }>;
     config: {
-        props?: Partial<{
-            state: 'default' | 'error';
-        } & InputFieldProps>;
+        props: InputFieldProps;
     };
 }
 export interface SelectFieldMolecule extends BaseMolecule {
@@ -169,9 +173,7 @@ export interface SelectFieldMolecule extends BaseMolecule {
         conditionConfig: ConditionConfigAttributes;
     }>;
     config: {
-        props?: Partial<{
-            state: 'default' | 'error';
-        } & SelectFieldProps>;
+        props: SelectFieldProps;
     };
 }
 export interface RadioButtonFieldMolecule extends BaseMolecule {
@@ -184,9 +186,7 @@ export interface RadioButtonFieldMolecule extends BaseMolecule {
         conditionConfig: ConditionConfigAttributes;
     }>;
     config: {
-        props?: Partial<{
-            state: 'default' | 'error';
-        } & RadioButtonFieldProps<string>>;
+        props: RadioButtonFieldProps<string>;
     };
 }
 export interface CheckboxFieldMolecule extends BaseMolecule {
@@ -199,9 +199,7 @@ export interface CheckboxFieldMolecule extends BaseMolecule {
         conditionConfig: ConditionConfigAttributes;
     }>;
     config: {
-        props?: Partial<{
-            state: 'default' | 'error';
-        } & CheckboxFieldProps>;
+        props: CheckboxFieldProps;
     };
 }
 export interface ConsentFieldMolecule extends BaseMolecule {

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { SelectOption } from 'atoms';
 import { CheckboxInternalConfigProps } from 'atoms/Checkbox/types';
-import { ConditionConfig } from 'containers';
+import { ConditionConfig, FormStateType } from 'containers';
 import { Control, ControllerProps } from 'react-hook-form/dist/types';
 import type { StylesType } from 'typescript';
 import { FieldLabelsProps } from '../FieldLabels/FieldLabels';
@@ -26,6 +26,8 @@ export declare type CheckboxFieldProps = Partial<{
     required: boolean;
     optional: boolean;
     wrapperStyles: StylesType;
-    conditionConfig?: ConditionConfig;
+    conditionConfig: ConditionConfig;
+    state: FormStateType;
+    defaultValue: string;
 }>;
-export declare const CheckboxField: ({ checkboxesProps, name, rules, control, optional, required, labelsProps, wrapperStyles, conditionConfig, }: CheckboxFieldProps) => JSX.Element | null;
+export declare const CheckboxField: ({ checkboxesProps, name, rules, control, optional, required, labelsProps, wrapperStyles, conditionConfig, defaultValue, }: 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, conditionConfig, }: Partial<{
+    component: ({ checkboxesProps, name, rules, control, optional, required, labelsProps, wrapperStyles, conditionConfig, defaultValue, }: 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,9 @@ declare const _default: {
         required: boolean;
         optional: boolean;
         wrapperStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
-        conditionConfig?: import("../..").ConditionConfig | undefined;
+        conditionConfig: import("../..").ConditionConfig;
+        state: import("../..").FormStateType;
+        defaultValue: string;
     }>) => JSX.Element | null;
 };
 export default _default;

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

@@ -1,9 +1,10 @@
 /// <reference types="react" />
-import { Control, ControllerProps } from 'react-hook-form/dist/types';
 import { InputProps } from 'atoms';
+import { ConditionConfig, FormStateType } from 'containers';
+import { InputFieldTypes } from 'fieldsConfiguration';
+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 InputFieldProps = Partial<{
     name: string;
     control: Control<any>;
@@ -14,6 +15,10 @@ export declare type InputFieldProps = Partial<{
     inputProps: InputProps;
     styles: StylesType;
     labelsProps: FieldLabelsProps;
-    conditionConfig?: ConditionConfig;
+    conditionConfig: ConditionConfig;
+    state: FormStateType;
 }>;
-export declare const InputField: ({ control, name, inputProps, styles, labelsProps, defaultValue, optional, required, rules, conditionConfig, }: InputFieldProps) => JSX.Element | null;
+declare type ReturnValueType = Record<FormStateType, string>;
+export declare const getMockValueForSuccessAndFormatError: (type: InputFieldTypes) => ReturnValueType;
+export declare const InputField: ({ control, name, inputProps, styles, labelsProps, defaultValue, optional, required, rules, conditionConfig, state, }: InputFieldProps) => JSX.Element | null;
+export {};

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, conditionConfig, }: Partial<{
+    component: ({ control, name, inputProps, styles, labelsProps, defaultValue, optional, required, rules, conditionConfig, state, }: Partial<{
         name: string;
         control: import("react-hook-form").Control<any, any>;
         rules: Omit<Partial<{
@@ -27,10 +27,40 @@ declare const _default: {
         required: boolean;
         optional: boolean;
         defaultValue: string;
-        inputProps: import("../..").InputProps;
+        inputProps: Partial<{
+            value: string;
+            leftIcon: import("../..").InputIconProps;
+            rightIcon: import("../..").InputIconProps;
+            onBlur: import("typescript").Callback;
+            type: import("fieldsConfiguration").InputFieldTypes;
+            placeholder: string;
+            disabled: boolean;
+            isEditMode: boolean;
+            isError: boolean;
+            maxLength: number;
+            onChange: (value: string) => void;
+            onKeyDown: (event: import("react").KeyboardEvent<HTMLInputElement>) => void;
+            internalConfig: Partial<{
+                textColor: string;
+                textFontSize: number;
+                placeholderTextColor: string;
+                placeholderTextFontSize: number;
+                verticalPadding: number;
+                horizontalPadding: 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>>;
+            }>;
+            config?: Partial<{
+                maskPlaceholder: string;
+                dataModelFieldType: import("fieldsConfiguration").InputFieldTypes;
+                maskPattern: (string | RegExp)[];
+            }> | undefined;
+            state: import("../..").FormStateType;
+        }>;
         styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
         labelsProps: import("..").FieldLabelsProps;
-        conditionConfig?: import("../..").ConditionConfig | undefined;
+        conditionConfig: import("../..").ConditionConfig;
+        state: import("../..").FormStateType;
     }>) => JSX.Element | null;
 };
 export default _default;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { RadioButtonInternalConfigProps, RadioButtonsProps } from 'atoms';
-import { ConditionConfig } from 'containers';
+import { ConditionConfig, FormStateType } from 'containers';
 import { Control, ControllerProps } from 'react-hook-form/dist/types';
 import type { StylesType } from 'typescript';
 import { FieldLabelsProps } from '../FieldLabels/FieldLabels';
@@ -15,7 +15,8 @@ export declare type RadioButtonFieldProps<T extends string> = Partial<{
     defaultValue: string;
     radioButtonsProps: RadioButtonsProps<T>;
     internalConfig: RadioButtonInternalConfigProps;
-    conditionConfig?: ConditionConfig;
+    conditionConfig: ConditionConfig;
+    state: FormStateType;
 }>;
 export declare const RadioButtonField: <T extends string>({ name, rules, styles, control, optional, required, labelsProps, defaultValue, radioButtonsProps, conditionConfig, }: Partial<{
     name: string;
@@ -59,5 +60,6 @@ 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>>;
     }>;
-    conditionConfig?: ConditionConfig | undefined;
+    conditionConfig: ConditionConfig;
+    state: FormStateType;
 }>) => JSX.Element | null;

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

@@ -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>>;
         }>;
-        conditionConfig?: import("../..").ConditionConfig | undefined;
+        conditionConfig: import("../..").ConditionConfig;
+        state: import("../..").FormStateType;
     }>) => JSX.Element | null;
 };
 export default _default;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { SelectProps } from 'atoms';
-import { ConditionConfig } from 'containers';
+import { ConditionConfig, FormStateType } from 'containers';
 import { Control, ControllerProps } from 'react-hook-form/dist/types';
 import type { StylesType } from 'typescript';
 import { FieldLabelsProps } from '../FieldLabels/FieldLabels';
@@ -14,6 +14,7 @@ export declare type SelectFieldProps = Partial<{
     optional: boolean;
     defaultValue: string;
     styles: StylesType;
-    conditionConfig?: ConditionConfig;
+    conditionConfig: ConditionConfig;
+    state: FormStateType;
 }>;
 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

@@ -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>>;
-        conditionConfig?: import("../..").ConditionConfig | undefined;
+        conditionConfig: import("../..").ConditionConfig;
+        state: import("../..").FormStateType;
     }>) => JSX.Element | null;
 };
 export default _default;

package/dist/esm/src/organisms/FeedContent/styles.d.ts

@@ -15,5 +15,5 @@ export declare const CloseButton: import("styled-components").StyledComponent<"d
     disabled?: boolean | undefined;
 } & {
     children?: import("react").ReactNode;
-} & Pick<FeedContentProps, "feedContentTemplate" | "withCloseIcon">, never>;
+} & Pick<FeedContentProps, "withCloseIcon" | "feedContentTemplate">, never>;
 export declare const PdfWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<FeedContentProps, "showDefaultDocumentStyles">, never>;

package/dist/index.d.ts

@@ -8,6 +8,8 @@ import * as typescript from 'typescript';
 import { StylesType, AnyObject, Callback as Callback$1, OverrideStyles, StyledTransientProps, Nullable, StrictUnion } from 'typescript';
 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 { FormStateType as FormStateType$1, ContainerComponentProps as ContainerComponentProps$1, Molecule as Molecule$1, ConditionConfig as ConditionConfig$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 react_hook_form from 'react-hook-form';
@@ -19,7 +21,7 @@ import { TooltipProps as TooltipProps$1 } from 'rc-tooltip/lib/Tooltip';
 import { WithGoogleMapProps } from 'react-google-maps/lib/withGoogleMap';
 import { WithScriptjsProps } from 'react-google-maps/lib/withScriptjs';
 import { RadioGroup, DrawerProps as DrawerProps$1, ModalProps } from '@mui/material';
-import { UIFields as UIFields$2, UIField as UIField$1 } from 'fieldsConfiguration';
+import { UIFields as UIFields$2, InputFieldTypes as InputFieldTypes$2, UIField as UIField$1 } from 'fieldsConfiguration';
 import { SetPasswordFields, MaxRuleValidation, MinRuleValidation } from 'organisms/SetPasswordForm/types';
 import { ConsentProps as ConsentProps$2 } from 'molecules/Consent/Consent';
 import { FooterAProps } from 'organisms/Footer/FooterA';
@@ -37,8 +39,6 @@ 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 * as containers from 'containers';
-import { ContainerComponentProps as ContainerComponentProps$1, Molecule as Molecule$1, ConditionConfig as ConditionConfig$1 } from 'containers';
 export * from 'helpers/constants';
 import { CheckboxInternalConfigProps as CheckboxInternalConfigProps$1 } from 'atoms/Checkbox/types';
 import { CustomDescendant } from 'atoms/RichTextViewer/types';
@@ -115,6 +115,8 @@ declare type SelectProps = Partial<{
 }>;
 declare const Select: ({ ref, onBlur, onChange, value, placeholder, options, disabled, optionsPresentation, isError, selectInternalConfig, isRichText, }: SelectProps) => JSX.Element;
 
+declare type Callback = () => void;
+
 declare const getFieldPlaceholder: (type: FieldTypes$1, title?: string) => string;
 
 declare type InputFieldTypes = 'phone_number' | 'text' | 'email' | 'password' | 'numerical' | 'month_year_date' | 'day_month_year_date' | 'month_day_year_date' | 'us_zip_code' | 'any';
@@ -176,22 +178,23 @@ declare type InputIconProps = {
     name: IconNames$1;
     onClick?: Callback$1;
 };
-declare type InputProps = {
-    value?: string;
-    leftIcon?: InputIconProps;
-    rightIcon?: InputIconProps;
-    onBlur?: Callback$1;
-    type?: InputFieldTypes$1;
-    placeholder?: string;
-    disabled?: boolean;
-    isEditMode?: boolean;
-    isError?: boolean;
-    maxLength?: number;
-    onChange?: (value: string) => void;
-    onKeyDown?: (event: react__default.KeyboardEvent<HTMLInputElement>) => void;
-    internalConfig?: InputFieldInternalConfigProps;
+declare type InputProps = Partial<{
+    value: string;
+    leftIcon: InputIconProps;
+    rightIcon: InputIconProps;
+    onBlur: Callback$1;
+    type: InputFieldTypes$1;
+    placeholder: string;
+    disabled: boolean;
+    isEditMode: boolean;
+    isError: boolean;
+    maxLength: number;
+    onChange: (value: string) => void;
+    onKeyDown: (event: react__default.KeyboardEvent<HTMLInputElement>) => void;
+    internalConfig: InputFieldInternalConfigProps;
     config?: MaskConfig;
-};
+    state: FormStateType$1;
+}>;
 declare const Input: ({ value, leftIcon, rightIcon, onChange, onBlur, disabled, isError, placeholder, isEditMode, type, internalConfig, config, ...rest }: InputProps) => JSX.Element;
 
 declare type TextTypes = 'primary' | 'secondary' | 'error' | 'success';
@@ -962,9 +965,12 @@ declare type InputFieldProps = Partial<{
     inputProps: InputProps$1;
     styles: StylesType;
     labelsProps: FieldLabelsProps;
-    conditionConfig?: ConditionConfig$1;
+    conditionConfig: ConditionConfig$1;
+    state: FormStateType$1;
 }>;
-declare const InputField: ({ control, name, inputProps, styles, labelsProps, defaultValue, optional, required, rules, conditionConfig, }: InputFieldProps) => JSX.Element | null;
+declare type ReturnValueType = Record<FormStateType$1, string>;
+declare const getMockValueForSuccessAndFormatError: (type: InputFieldTypes$2) => ReturnValueType;
+declare const InputField: ({ control, name, inputProps, styles, labelsProps, defaultValue, optional, required, rules, conditionConfig, state, }: InputFieldProps) => JSX.Element | null;
 
 declare type FieldMapperProps<T extends object> = {
     field: UIField$1<keyof T>;
@@ -998,9 +1004,11 @@ declare type CheckboxFieldProps = Partial<{
     required: boolean;
     optional: boolean;
     wrapperStyles: StylesType;
-    conditionConfig?: ConditionConfig$1;
+    conditionConfig: ConditionConfig$1;
+    state: FormStateType$1;
+    defaultValue: string;
 }>;
-declare const CheckboxField: ({ checkboxesProps, name, rules, control, optional, required, labelsProps, wrapperStyles, conditionConfig, }: CheckboxFieldProps) => JSX.Element | null;
+declare const CheckboxField: ({ checkboxesProps, name, rules, control, optional, required, labelsProps, wrapperStyles, conditionConfig, defaultValue, }: CheckboxFieldProps) => JSX.Element | null;
 
 declare type CheckboxGroupProps = Partial<{
     ref: RefCallBack;
@@ -1020,7 +1028,8 @@ declare type SelectFieldProps = Partial<{
     optional: boolean;
     defaultValue: string;
     styles: StylesType;
-    conditionConfig?: ConditionConfig$1;
+    conditionConfig: ConditionConfig$1;
+    state: FormStateType$1;
 }>;
 declare const SelectField: ({ selectProps, name, defaultValue, optional, required, control, styles, labelsProps, rules, conditionConfig, }: SelectFieldProps) => JSX.Element | null;
 
@@ -1172,7 +1181,8 @@ declare type RadioButtonFieldProps<T extends string> = Partial<{
     defaultValue: string;
     radioButtonsProps: RadioButtonsProps$1<T>;
     internalConfig: RadioButtonInternalConfigProps$1;
-    conditionConfig?: ConditionConfig$1;
+    conditionConfig: ConditionConfig$1;
+    state: FormStateType$1;
 }>;
 declare const RadioButtonField: <T extends string>({ name, rules, styles, control, optional, required, labelsProps, defaultValue, radioButtonsProps, conditionConfig, }: Partial<{
     name: string;
@@ -1216,7 +1226,8 @@ declare const RadioButtonField: <T extends string>({ name, rules, styles, contro
         buttonOptionSpacing: SizesTypes;
         radioGroupWrapperStyles: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<object, styled_components.DefaultTheme>>;
     }>;
-    conditionConfig?: ConditionConfig$1 | undefined;
+    conditionConfig: ConditionConfig$1;
+    state: FormStateType$1;
 }>) => JSX.Element | null;
 
 declare type AlertProps = {
@@ -1283,8 +1294,6 @@ declare type ToggleFieldProps = {
 };
 declare const HorizontalButtonsField: ({ name, title, control, description, horizontalButtonsProps, }: ToggleFieldProps) => JSX.Element;
 
-declare type Callback = () => void;
-
 declare type BottomNaVBarItemProps = {
     name: string;
     icon: ComponentType<Omit<IconProps$1, 'name'>>;
@@ -1496,6 +1505,7 @@ declare type Action = {
     reset: ResetAction;
     destroy: DestroyAction;
 }>;
+declare type FormStateType = 'default' | 'success' | 'format_error' | 'field_error' | 'open_dropdown';
 declare type ImageAttributes = {
     attributeType: 'image';
     imageSource: string;
@@ -1550,6 +1560,10 @@ interface ConditionConfigAttributes {
     attributeType: 'condition_config';
     conditionConfig: ConditionConfig;
 }
+interface ColorAttributes {
+    attributeType: 'color';
+    color: string;
+}
 declare type MoleculeTypes = 'image' | 'text' | 'button' | 'video' | 'header_tab_group' | 'input_field' | 'select_field' | 'radio_button_field' | 'checkbox_field' | 'consent';
 interface BaseMolecule {
     id: string;
@@ -1574,6 +1588,7 @@ interface TextMoleculeType extends BaseMolecule {
         text: TextAttributes;
         seoStyle: SelectAttributes;
         fontVariant: SelectAttributes;
+        textColor: ColorAttributes;
     }>;
     config: {
         props?: TextMoleculeProps$1;
@@ -1623,9 +1638,7 @@ interface TextInputMolecule extends BaseMolecule {
         conditionConfig: ConditionConfigAttributes;
     }>;
     config: {
-        props?: Partial<{
-            state: 'default' | 'error';
-        } & InputFieldProps$1>;
+        props: InputFieldProps$1;
     };
 }
 interface SelectFieldMolecule extends BaseMolecule {
@@ -1638,9 +1651,7 @@ interface SelectFieldMolecule extends BaseMolecule {
         conditionConfig: ConditionConfigAttributes;
     }>;
     config: {
-        props?: Partial<{
-            state: 'default' | 'error';
-        } & SelectFieldProps$1>;
+        props: SelectFieldProps$1;
     };
 }
 interface RadioButtonFieldMolecule extends BaseMolecule {
@@ -1653,9 +1664,7 @@ interface RadioButtonFieldMolecule extends BaseMolecule {
         conditionConfig: ConditionConfigAttributes;
     }>;
     config: {
-        props?: Partial<{
-            state: 'default' | 'error';
-        } & RadioButtonFieldProps$1<string>>;
+        props: RadioButtonFieldProps$1<string>;
     };
 }
 interface CheckboxFieldMolecule extends BaseMolecule {
@@ -1668,9 +1677,7 @@ interface CheckboxFieldMolecule extends BaseMolecule {
         conditionConfig: ConditionConfigAttributes;
     }>;
     config: {
-        props?: Partial<{
-            state: 'default' | 'error';
-        } & CheckboxFieldProps$1>;
+        props: CheckboxFieldProps$1;
     };
 }
 interface ConsentFieldMolecule extends BaseMolecule {
@@ -1764,4 +1771,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, ConditionConfig, ConditionConfigAttributes, ConditionCriteria, Consent, ConsentCaptureMethod, ConsentFieldMolecule, ConsentProps, Container, ContainerComponent, ContainerComponentProps, ContainerPositionType, ContainerProps, ContainerPropsType, ContainerScrollBehaviourType, ContainerType, ContainerWrapper, CriteriaType, CustomValidation, CustomValidationProps, CustomValidationRule, DataConnectionAttributes, 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, FormStepContainerProps, FormStepContextProviderProps, 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, OrganismContext, OrganismContextProvider, OrganismContextType, 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 };
+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, ColorAttributes, ColumnItem, Columns, ColumnsProps, ConditionConfig, ConditionConfigAttributes, ConditionCriteria, Consent, ConsentCaptureMethod, ConsentFieldMolecule, ConsentProps, Container, ContainerComponent, ContainerComponentProps, ContainerPositionType, ContainerProps, ContainerPropsType, ContainerScrollBehaviourType, ContainerType, ContainerWrapper, CriteriaType, CustomValidation, CustomValidationProps, CustomValidationRule, DataConnectionAttributes, 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, FormStateType, FormStepContainerProps, FormStepContextProviderProps, 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, OrganismContext, OrganismContextProvider, OrganismContextType, 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, getMockValueForSuccessAndFormatError, 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.32",
+  "version": "0.3.33",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/Zealic_Solutions/zeal-ui-web.git"