@zealicsolutions/web-ui 0.2.122 → 0.2.125

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

@@ -3,6 +3,7 @@ import { InputFieldTypes } from 'fieldsConfiguration/types';
 import React from 'react';
 import { ThemeColors } from 'theme/types';
 import type { Callback, StylesType } from 'typescript';
+import { MaskConfig } from './helpers';
 export declare type InputFieldInternalConfigProps = Partial<{
     textColor: ThemeColors | string;
     textFontSize: number;
@@ -31,5 +32,6 @@ export declare type InputProps = {
     onChange?: (value: string) => void;
     onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     internalConfig?: InputFieldInternalConfigProps;
+    config?: MaskConfig;
 };
-export declare const Input: ({ value, leftIcon, rightIcon, onChange, onBlur, disabled, isError, placeholder, isEditMode, type, internalConfig, ...rest }: InputProps) => JSX.Element;
+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,7 @@ 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, ...rest }: InputProps) => JSX.Element;
+    component: ({ value, leftIcon, rightIcon, onChange, onBlur, disabled, isError, placeholder, isEditMode, type, internalConfig, config, ...rest }: InputProps) => JSX.Element;
 };
 export default _default;
 export declare const Input: StoryFn<InputProps>;

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

@@ -0,0 +1,18 @@
+import { MaskedInputProps } from 'react-text-mask';
+import { HTMLInputTypeAttribute } from 'react';
+import { ThemeColors } from 'theme';
+import { InputProps } from 'atoms';
+import { InputFieldTypes } from '../../fieldsConfiguration';
+export declare type MaskConfig = Partial<{
+    maskPlaceholder: string;
+    dataModelFieldType: InputFieldTypes;
+    maskPattern: Array<string | RegExp> | false;
+}>;
+export declare const getSpecificInputProps: (type: InputFieldTypes) => {
+    type?: HTMLInputTypeAttribute | undefined;
+    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"> & {
+    isFocused: boolean;
+}) => ThemeColors;

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

@@ -9,7 +9,7 @@ export declare type DownloadFile = {
     url: string;
     name: string;
 };
-declare type LinkAction = Omit<LinkAttributes, 'attributeType'>;
+declare type LinkAction = LinkAttributes;
 declare type PopupDrawerAction = ContainerComponentProps;
 declare type DownloadAction = DownloadFile;
 declare type SubmitAction = AnyObject;
@@ -74,9 +74,6 @@ export interface BaseMolecule {
     instance: 'molecule';
     type: MoleculeTypes;
     metadata?: AnyObject;
-    idForFrontend?: string;
-    moleculeLibraryId?: string;
-    organismLibraryMoleculeId?: string;
 }
 export interface ImageMolecule extends BaseMolecule {
     type: 'image';

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

@@ -2,7 +2,7 @@
 import { ControllerProps } from 'react-hook-form';
 import { SelectOption } from 'atoms';
 import { InputFieldProps, SelectFieldProps } from 'molecules';
-export declare type InputFieldTypes = 'phone-number' | 'text' | 'email' | 'password' | 'numerical' | 'any';
+export declare type InputFieldTypes = 'phone-number' | 'text' | 'email' | 'password' | 'numerical' | 'month_year_date' | 'day_month_year_date' | 'month_day_year_date' | 'us_zip_code' | 'any';
 export declare type FieldTypes = 'input' | 'select' | 'checkbox';
 export declare type UIField<T = string> = (UIInputField & UISelectField & UICheckboxField) & {
     name: T;

package/dist/esm/src/helpers/validations.d.ts

@@ -5,4 +5,11 @@ export declare const phoneNumberValidation: RegExp;
 export declare const numberValidation: RegExp;
 export declare const emailValidation: RegExp;
 export declare const textValidation: RegExp;
+export declare const dateValidation: RegExp;
+export declare const usZipCode: RegExp;
 export declare const getInputValidation: (type?: InputFieldTypes) => ValidationRule<RegExp> | undefined;
+export declare const postCodeMask: RegExp[];
+export declare const dayMonthYearDateMask: (string | RegExp)[];
+export declare const monthYearDateMask: (string | RegExp)[];
+export declare const phoneNumberMask: (string | RegExp)[];
+export declare const removeMaskFromString: (inputString: string) => string;

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

@@ -26,7 +26,24 @@ declare const _default: {
         }>;
         labelsProps: import("molecules").FieldLabelsProps;
         name: string;
-        rules: Omit<import("react-hook-form").RegisterOptions<import("react-hook-form").FieldValues, string>, "disabled" | "valueAsNumber" | "valueAsDate" | "setValueAs"> | undefined;
+        rules: Omit<Partial<{
+            required: string | import("react-hook-form").ValidationRule<boolean>;
+            min: import("react-hook-form").ValidationRule<string | number>;
+            max: import("react-hook-form").ValidationRule<string | number>;
+            maxLength: import("react-hook-form").ValidationRule<number>;
+            minLength: import("react-hook-form").ValidationRule<number>;
+            pattern: import("react-hook-form").ValidationRule<RegExp>;
+            validate: import("react-hook-form").Validate<any> | Record<string, import("react-hook-form").Validate<any>>;
+            valueAsNumber: boolean;
+            valueAsDate: boolean;
+            value: any;
+            setValueAs: (value: any) => any;
+            shouldUnregister?: boolean | undefined;
+            onChange?: ((event: any) => void) | undefined;
+            onBlur?: ((event: any) => void) | undefined;
+            disabled: boolean;
+            deps: string | string[];
+        }>, "disabled" | "valueAsNumber" | "valueAsDate" | "setValueAs"> | undefined;
         control: import("react-hook-form").Control<any, any>;
         required: boolean;
         optional: boolean;

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

@@ -1,15 +1,16 @@
 /// <reference types="react" />
-import { StylesType } from 'typescript';
+import { Callback, StylesType } from 'typescript';
 export declare type ImageProps = {
     src: string;
 } & Partial<{
     id: string;
     altText: string;
     link: string;
+    onClick: Callback;
     width: number;
     height: number;
     cornerRadius: number;
     behaveAs: 'background' | 'regular';
     styles: StylesType;
 }>;
-export declare const Image: ({ src, link, altText, styles, width, height, id, behaveAs, cornerRadius, }: ImageProps) => JSX.Element;
+export declare const Image: ({ src, onClick, link, altText, styles, width, height, id, behaveAs, cornerRadius, }: ImageProps) => JSX.Element;

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

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

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

@@ -6,7 +6,24 @@ declare const _default: {
     component: ({ control, name, inputProps, styles, labelsProps, defaultValue, optional, required, rules, }: Partial<{
         name: string;
         control: import("react-hook-form").Control<any, any>;
-        rules: Omit<import("react-hook-form").RegisterOptions<import("react-hook-form").FieldValues, string>, "disabled" | "valueAsNumber" | "valueAsDate" | "setValueAs"> | undefined;
+        rules: Omit<Partial<{
+            required: string | import("react-hook-form").ValidationRule<boolean>;
+            min: import("react-hook-form").ValidationRule<string | number>;
+            max: import("react-hook-form").ValidationRule<string | number>;
+            maxLength: import("react-hook-form").ValidationRule<number>;
+            minLength: import("react-hook-form").ValidationRule<number>;
+            pattern: import("react-hook-form").ValidationRule<RegExp>;
+            validate: import("react-hook-form").Validate<any> | Record<string, import("react-hook-form").Validate<any>>;
+            valueAsNumber: boolean;
+            valueAsDate: boolean;
+            value: any;
+            setValueAs: (value: any) => any;
+            shouldUnregister?: boolean | undefined;
+            onChange?: ((event: any) => void) | undefined;
+            onBlur?: ((event: any) => void) | undefined;
+            disabled: boolean;
+            deps: string | string[];
+        }>, "disabled" | "valueAsNumber" | "valueAsDate" | "setValueAs"> | undefined;
         required: boolean;
         optional: boolean;
         defaultValue: string;

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

@@ -5,7 +5,24 @@ declare const _default: {
     title: string;
     component: <T extends string>({ name, rules, styles, control, optional, required, labelsProps, defaultValue, radioButtonsProps, }: Partial<{
         name: string;
-        rules: Omit<import("react-hook-form").RegisterOptions<import("react-hook-form").FieldValues, string>, "disabled" | "valueAsNumber" | "valueAsDate" | "setValueAs"> | undefined;
+        rules: Omit<Partial<{
+            required: string | import("react-hook-form").ValidationRule<boolean>;
+            min: import("react-hook-form").ValidationRule<string | number>;
+            max: import("react-hook-form").ValidationRule<string | number>;
+            maxLength: import("react-hook-form").ValidationRule<number>;
+            minLength: import("react-hook-form").ValidationRule<number>;
+            pattern: import("react-hook-form").ValidationRule<RegExp>;
+            validate: import("react-hook-form").Validate<any> | Record<string, import("react-hook-form").Validate<any>>;
+            valueAsNumber: boolean;
+            valueAsDate: boolean;
+            value: any;
+            setValueAs: (value: any) => any;
+            shouldUnregister?: boolean | undefined;
+            onChange?: ((event: any) => void) | undefined;
+            onBlur?: ((event: any) => void) | undefined;
+            disabled: boolean;
+            deps: string | string[];
+        }>, "disabled" | "valueAsNumber" | "valueAsDate" | "setValueAs"> | undefined;
         styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
         control: import("react-hook-form").Control<any, any>;
         optional: boolean;

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

@@ -20,7 +20,24 @@ declare const _default: {
         }>;
         labelsProps: import("..").FieldLabelsProps;
         name: string;
-        rules: Omit<import("react-hook-form").RegisterOptions<import("react-hook-form").FieldValues, string>, "disabled" | "valueAsNumber" | "valueAsDate" | "setValueAs"> | undefined;
+        rules: Omit<Partial<{
+            required: string | import("react-hook-form").ValidationRule<boolean>;
+            min: import("react-hook-form").ValidationRule<string | number>;
+            max: import("react-hook-form").ValidationRule<string | number>;
+            maxLength: import("react-hook-form").ValidationRule<number>;
+            minLength: import("react-hook-form").ValidationRule<number>;
+            pattern: import("react-hook-form").ValidationRule<RegExp>;
+            validate: import("react-hook-form").Validate<any> | Record<string, import("react-hook-form").Validate<any>>;
+            valueAsNumber: boolean;
+            valueAsDate: boolean;
+            value: any;
+            setValueAs: (value: any) => any;
+            shouldUnregister?: boolean | undefined;
+            onChange?: ((event: any) => void) | undefined;
+            onBlur?: ((event: any) => void) | undefined;
+            disabled: boolean;
+            deps: string | string[];
+        }>, "disabled" | "valueAsNumber" | "valueAsDate" | "setValueAs"> | undefined;
         control: import("react-hook-form").Control<any, any>;
         required: boolean;
         optional: boolean;

package/dist/index.d.ts

@@ -8,17 +8,19 @@ import * as typescript from 'typescript';
 import { StylesType, Callback as Callback$1, OverrideStyles, StyledTransientProps, Nullable, AnyObject, 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 { InputFieldTypes as InputFieldTypes$1, FieldTypes as FieldTypes$1, UIFields as UIFields$2 } from 'fieldsConfiguration/types';
+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 { BaseButtonProps as BaseButtonProps$1, MenuItem as MenuItem$1, HeroImageProps as HeroImageProps$1, ColumnsProps as ColumnsProps$1, EmphasizedTextProps as EmphasizedTextProps$1, TabGroupProps as TabGroupProps$1, AvatarDropdownProps as AvatarDropdownProps$1, ButtonProps as ButtonProps$1, FeedContentHeaderProps as FeedContentHeaderProps$1, AlertProps as AlertProps$1, BottomNaVBarItemProps as BottomNaVBarItemProps$1, InputFieldProps as InputFieldProps$1, SelectFieldProps as SelectFieldProps$1, FieldSectionProps as FieldSectionProps$1, MenuItemsProps as MenuItemsProps$1, ImageProps as ImageProps$1, TextMoleculeProps as TextMoleculeProps$1, AdditionalTabContainerProps as AdditionalTabContainerProps$1, RadioButtonFieldProps as RadioButtonFieldProps$1, CheckboxFieldProps as CheckboxFieldProps$1 } from 'molecules';
+import * as react_hook_form from 'react-hook-form';
+import { ControllerProps, DeepPartial, FieldValues, FormState, Control, UseFormReturn, ValidationMode } from 'react-hook-form';
+import * as atoms from 'atoms';
+import { SelectOption as SelectOption$1, TextProps as TextProps$1, IconNames as IconNames$2, TouchableOpacityProps as TouchableOpacityProps$1, AvatarProps as AvatarProps$1, TabProps as TabProps$1, RadioButtonsProps as RadioButtonsProps$1, InputProps as InputProps$1, SelectProps as SelectProps$1, RegularImageProps as RegularImageProps$1, TextButtonProps as TextButtonProps$1, TabTheme as TabTheme$1, RadioButtonInternalConfigProps as RadioButtonInternalConfigProps$1, HorizontalButtonsProps as HorizontalButtonsProps$1, IconProps as IconProps$1 } from 'atoms';
+import { InputFieldProps as InputFieldProps$1, SelectFieldProps as SelectFieldProps$1, FieldSectionProps as FieldSectionProps$1, BaseButtonProps as BaseButtonProps$1, MenuItem as MenuItem$1, HeroImageProps as HeroImageProps$1, ColumnsProps as ColumnsProps$1, EmphasizedTextProps as EmphasizedTextProps$1, TabGroupProps as TabGroupProps$1, AvatarDropdownProps as AvatarDropdownProps$1, ButtonProps as ButtonProps$1, FeedContentHeaderProps as FeedContentHeaderProps$1, AlertProps as AlertProps$1, BottomNaVBarItemProps as BottomNaVBarItemProps$1, MenuItemsProps as MenuItemsProps$1, ImageProps as ImageProps$1, TextMoleculeProps as TextMoleculeProps$1, AdditionalTabContainerProps as AdditionalTabContainerProps$1, RadioButtonFieldProps as RadioButtonFieldProps$1, CheckboxFieldProps as CheckboxFieldProps$1 } from 'molecules';
 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 * as atoms from 'atoms';
-import { TextProps as TextProps$1, IconNames as IconNames$2, TouchableOpacityProps as TouchableOpacityProps$1, AvatarProps as AvatarProps$1, TabProps as TabProps$1, RadioButtonsProps as RadioButtonsProps$1, SelectOption as SelectOption$1, InputProps as InputProps$1, SelectProps as SelectProps$1, RegularImageProps as RegularImageProps$1, TextButtonProps as TextButtonProps$1, TabTheme as TabTheme$1, RadioButtonInternalConfigProps as RadioButtonInternalConfigProps$1, HorizontalButtonsProps as HorizontalButtonsProps$1, IconProps as IconProps$1 } from 'atoms';
 import { RadioGroup, DrawerProps as DrawerProps$1, ModalProps } from '@mui/material';
-import { UIFields as UIFields$1, UIField as UIField$1 } from 'fieldsConfiguration';
-import { MaxRuleValidation, MinRuleValidation, SetPasswordFields } from 'organisms/SetPasswordForm/types';
+import { UIFields as UIFields$2, UIField as UIField$1 } from 'fieldsConfiguration';
+import { SetPasswordFields, MaxRuleValidation, MinRuleValidation } from 'organisms/SetPasswordForm/types';
 import { ConsentProps as ConsentProps$1, FilteredFeedContentType as FilteredFeedContentType$1, HeroSliderProps as HeroSliderProps$1, ProcessTrackerProps as ProcessTrackerProps$1, ProcessTrackerStatus as ProcessTrackerStatus$1 } from 'organisms';
 import { ConsentProps as ConsentProps$2 } from 'organisms/Consent/Consent';
 import { FooterAProps } from 'organisms/Footer/FooterA';
@@ -30,8 +32,6 @@ import { SubscribePanelProps as SubscribePanelProps$1 } from 'organisms/Subscrib
 import { ISIAProps } from 'organisms/ISI/ISIA';
 import { HeaderAProps as HeaderAProps$1 } from 'organisms/Header/HeaderA';
 import { FeedContentProps as FeedContentProps$1, FeedContentTemplateTypes as FeedContentTemplateTypes$1 } from 'organisms/FeedContent/types';
-import * as react_hook_form from 'react-hook-form';
-import { Control, ControllerProps, DeepPartial, FieldValues, FormState, UseFormReturn, ValidationMode } from 'react-hook-form';
 import { AlertProps as AlertProps$2 } from 'molecules/Alert/Alert';
 import { LoginFields as LoginFields$1 } from 'organisms/LoginForm/types';
 import { AnnotationsList as AnnotationsList$1 } from 'contexts/MlrRichTextViewerContext/types';
@@ -110,6 +110,53 @@ declare type SelectProps = Partial<{
 }>;
 declare const Select: ({ ref, onBlur, onChange, value, placeholder, options, disabled, optionsPresentation, isError, selectInternalConfig, isRichText, }: SelectProps) => JSX.Element;
 
+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';
+declare type FieldTypes = 'input' | 'select' | 'checkbox';
+declare type UIField<T = string> = (UIInputField & UISelectField & UICheckboxField) & {
+    name: T;
+    type: FieldTypes;
+    value?: string;
+    label?: string;
+    placeholder?: string;
+    required?: boolean;
+    tooltip?: string;
+    rules?: ControllerProps['rules'];
+    order?: number;
+};
+declare type UIInputField = {
+    inputType?: InputFieldTypes;
+    maxLength?: number;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+} & InputFieldProps$1;
+declare type UISelectField = {
+    options?: SelectOption$1[];
+} & SelectFieldProps$1;
+declare type UICheckboxField = {
+    checkboxLabel?: string;
+};
+declare type UIFields<T extends object> = UIField<keyof T>[];
+
+declare const getInitialValuesFromFields: <T extends object>(fields: UIFields$1<T>) => DeepPartial<T>;
+declare const isFormValid: <T extends FieldValues>(formState: FormState<T>) => boolean;
+declare const getFieldsFromFieldSections: <T extends object>(sections: Pick<FieldSectionProps$1<T>, "fields">[]) => UIFields$1<T>;
+
+declare const acquisitionFormMockFields: UIFields$1<Record<string, string>>;
+declare const setPasswordMockFields: UIFields$1<SetPasswordFields>;
+declare const loginMockFields: UIFields$1<LoginFields$1>;
+declare const sectionMockFields: UIFields$1<Record<string, string>>;
+declare const profileInformationMockForm: {
+    label: string;
+    fields: UIFields$1<Record<string, string>>;
+}[];
+
+declare type MaskConfig = Partial<{
+    maskPlaceholder: string;
+    dataModelFieldType: InputFieldTypes;
+    maskPattern: Array<string | RegExp> | false;
+}>;
+
 declare type InputFieldInternalConfigProps = Partial<{
     textColor: ThemeColors$2 | string;
     textFontSize: number;
@@ -138,8 +185,9 @@ declare type InputProps = {
     onChange?: (value: string) => void;
     onKeyDown?: (event: React__default.KeyboardEvent<HTMLInputElement>) => void;
     internalConfig?: InputFieldInternalConfigProps;
+    config?: MaskConfig;
 };
-declare const Input: ({ value, leftIcon, rightIcon, onChange, onBlur, disabled, isError, placeholder, isEditMode, type, internalConfig, ...rest }: InputProps) => JSX.Element;
+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';
 declare type TextAlign = 'center' | 'right' | 'left';
@@ -473,7 +521,7 @@ declare type SetPasswordRuleValidation = {
     rule: MaxRuleValidation | MinRuleValidation;
 };
 declare type SetPasswordFormProps = {
-    fields: UIFields$1<SetPasswordFields>;
+    fields: UIFields$2<SetPasswordFields>;
     logoUrl: string;
     isLoading?: boolean;
     validations: SetPasswordRuleValidation[];
@@ -484,7 +532,7 @@ declare const SetPasswordForm: ({ logoUrl, fields, validations, onBack, onSubmit
 
 declare const showAcceptToastMessage: () => void | undefined;
 declare type AcquisitionFormProps<T extends object> = {
-    fields: UIFields$1<T>;
+    fields: UIFields$2<T>;
     consents: ConsentProps$1[];
     logoUrl: string;
     isLoading?: boolean;
@@ -520,7 +568,7 @@ declare type LoginFields = {
 };
 
 declare type LoginFormProps = {
-    fields: UIFields$1<LoginFields>;
+    fields: UIFields$2<LoginFields>;
     logoUrl: string;
     isLoading?: boolean;
     twoFactorAuthConfig?: {
@@ -816,47 +864,6 @@ declare const toastStyles: styled_components.FlattenSimpleInterpolation;
 
 declare const useMediaQuery: (breakpointSize: BreakpointSizesTypes$1) => boolean;
 
-declare const getFieldPlaceholder: (type: FieldTypes$1, title?: string) => string;
-
-declare type InputFieldTypes = 'phone-number' | 'text' | 'email' | 'password' | 'numerical' | 'any';
-declare type FieldTypes = 'input' | 'select' | 'checkbox';
-declare type UIField<T = string> = (UIInputField & UISelectField & UICheckboxField) & {
-    name: T;
-    type: FieldTypes;
-    value?: string;
-    label?: string;
-    placeholder?: string;
-    required?: boolean;
-    tooltip?: string;
-    rules?: ControllerProps['rules'];
-    order?: number;
-};
-declare type UIInputField = {
-    inputType?: InputFieldTypes;
-    maxLength?: number;
-    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-} & InputFieldProps$1;
-declare type UISelectField = {
-    options?: SelectOption$1[];
-} & SelectFieldProps$1;
-declare type UICheckboxField = {
-    checkboxLabel?: string;
-};
-declare type UIFields<T extends object> = UIField<keyof T>[];
-
-declare const getInitialValuesFromFields: <T extends object>(fields: UIFields$2<T>) => DeepPartial<T>;
-declare const isFormValid: <T extends FieldValues>(formState: FormState<T>) => boolean;
-declare const getFieldsFromFieldSections: <T extends object>(sections: Pick<FieldSectionProps$1<T>, "fields">[]) => UIFields$2<T>;
-
-declare const acquisitionFormMockFields: UIFields$2<Record<string, string>>;
-declare const setPasswordMockFields: UIFields$2<SetPasswordFields>;
-declare const loginMockFields: UIFields$2<LoginFields$1>;
-declare const sectionMockFields: UIFields$2<Record<string, string>>;
-declare const profileInformationMockForm: {
-    label: string;
-    fields: UIFields$2<Record<string, string>>;
-}[];
-
 declare type MlrRichTextViewerProviderProps = PropsWithChildren<{
     annotationsList: AnnotationsList$1;
     isMLRReview: boolean;
@@ -1307,13 +1314,14 @@ declare type ImageProps = {
     id: string;
     altText: string;
     link: string;
+    onClick: Callback$1;
     width: number;
     height: number;
     cornerRadius: number;
     behaveAs: 'background' | 'regular';
     styles: StylesType;
 }>;
-declare const Image: ({ src, link, altText, styles, width, height, id, behaveAs, cornerRadius, }: ImageProps) => JSX.Element;
+declare const Image: ({ src, onClick, link, altText, styles, width, height, id, behaveAs, cornerRadius, }: ImageProps) => JSX.Element;
 
 declare type CarouselProps = {
     children: JSX.Element[];
@@ -1409,7 +1417,7 @@ declare type DownloadFile = {
     url: string;
     name: string;
 };
-declare type LinkAction = Omit<LinkAttributes, 'attributeType'>;
+declare type LinkAction = LinkAttributes;
 declare type PopupDrawerAction = ContainerComponentProps;
 declare type DownloadAction = DownloadFile;
 declare type SubmitAction = AnyObject;
@@ -1474,9 +1482,6 @@ interface BaseMolecule {
     instance: 'molecule';
     type: MoleculeTypes;
     metadata?: AnyObject;
-    idForFrontend?: string;
-    moleculeLibraryId?: string;
-    organismLibraryMoleculeId?: string;
 }
 interface ImageMolecule extends BaseMolecule {
     type: 'image';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zealicsolutions/web-ui",
-  "version": "0.2.122",
+  "version": "0.2.125",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/Zealic_Solutions/zeal-ui-web.git"
@@ -57,8 +57,10 @@
     "@types/jest": "^29.0.0",
     "@types/react": "^18.0.18",
     "@types/react-pdf": "^6.2.0",
+    "@types/react-text-mask": "^5.4.11",
     "@types/styled-components": "^5.1.26",
     "@types/styled-system": "^5.1.15",
+    "@types/text-mask-addons": "^3.8.1",
     "@typescript-eslint/eslint-plugin": "^5.36.2",
     "@typescript-eslint/parser": "^5.36.2",
     "babel-loader": "^8.2.5",
@@ -85,8 +87,8 @@
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "styled-components": "^5.3.5",
-    "react-pdf": "6.2.2"
+    "react-pdf": "6.2.2",
+    "styled-components": "^5.3.5"
   },
   "dependencies": {
     "@mui/material": "^5.10.4",
@@ -101,9 +103,11 @@
     "react-google-maps": "^9.4.5",
     "react-hook-form": "^7.34.2",
     "react-pdf": "6.2.2",
+    "react-text-mask": "^5.5.0",
     "slate": "^0.85.0",
     "slate-react": "^0.83.2",
-    "styled-components": "^5.3.5"
+    "styled-components": "^5.3.5",
+    "text-mask-addons": "^3.8.0"
   },
   "resolutions": {
     "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
@@ -119,4 +123,4 @@
   "homepage": "https://bitbucket.org/Zealic_Solutions/zeal-ui-web#readme",
   "keywords": [],
   "description": ""
-}
+}