@zealicsolutions/web-ui 0.2.87 → 0.2.89

package/dist/index.d.ts

@@ -3,16 +3,16 @@ import * as React$1 from 'react';
 import React__default, { PropsWithChildren, ReactNode, Dispatch, SetStateAction, CSSProperties as CSSProperties$1, ComponentType } from 'react';
 import * as styled_components from 'styled-components';
 import { CSSProperties, DefaultTheme } from 'styled-components';
+import { ThemeColors as ThemeColors$1, SizesTypes as SizesTypes$1, FontSizesTypes as FontSizesTypes$2 } from 'theme';
+import { StylesType, Callback as Callback$1, OverrideStyles, Nullable, StrictUnion } from 'typescript';
 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 { ThemeColors as ThemeColors$1, FontSizesTypes as FontSizesTypes$1, SizesTypes as SizesTypes$2, BreakpointSizesTypes as BreakpointSizesTypes$1 } from 'theme/types';
-import { StylesType, Callback as Callback$1, OverrideStyles, Nullable, StrictUnion } from 'typescript';
-import { ThemeColors as ThemeColors$2, SizesTypes as SizesTypes$1, FontSizesTypes as FontSizesTypes$2 } from 'theme';
-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, FieldLabelsProps as FieldLabelsProps$1, FieldSectionProps as FieldSectionProps$1, MenuItemsProps as MenuItemsProps$1, InputFieldProps as InputFieldProps$1, ImageProps as ImageProps$1 } from 'molecules';
+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 } 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 { 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, CheckBoxProps as CheckBoxProps$1, RegularImageProps as RegularImageProps$1, TextButtonProps as TextButtonProps$1, TabTheme as TabTheme$1, HorizontalButtonsProps as HorizontalButtonsProps$1, IconProps as IconProps$1 } 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, CheckBoxProps as CheckBoxProps$1, RegularImageProps as RegularImageProps$1, TextButtonProps as TextButtonProps$1, TabTheme as TabTheme$1, HorizontalButtonsProps as HorizontalButtonsProps$1, IconProps as IconProps$1 } from 'atoms';
 import { UIFields as UIFields$1, UIField as UIField$1 } from 'fieldsConfiguration';
 import { MaxRuleValidation, MinRuleValidation, SetPasswordFields } 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';
@@ -26,9 +26,9 @@ 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 { Control, ControllerProps, DeepPartial, FieldValues, FormState } from 'react-hook-form';
+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 { SelectOption as SelectOption$1 } from 'atoms/Select/types';
 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';
@@ -65,6 +65,16 @@ declare type SelectOption = {
     id: string;
     label: string;
 };
+declare type SelectInternalConfigurationOptions = {
+    placeholderTextColor: ThemeColors$1 | string;
+    placeholderTextFontSize: number;
+    selectedTextColor: ThemeColors$1 | string;
+    selectedTextFontSize: number;
+    verticalPadding: number;
+    horizontalPadding: number;
+    wrapperStyles: StylesType;
+    styles: StylesType;
+};
 declare type SelectProps = {
     value?: string;
     optionsPresentation?: boolean;
@@ -74,20 +84,21 @@ declare type SelectProps = {
     options?: SelectOption[];
     isError?: boolean;
     isEditMode?: boolean;
+    selectInternalConfig?: SelectInternalConfigurationOptions;
+    isRichText?: boolean;
 };
+declare const Select: ({ onChange, value, placeholder, options, disabled, optionsPresentation, isError, selectInternalConfig, isRichText, }: SelectProps) => JSX.Element;
 
-declare const Select: ({ onChange, value, placeholder, options, disabled, optionsPresentation, isError, }: SelectProps) => JSX.Element;
-
-declare type InputFieldInternalConfigProps = {
-    textColor: ThemeColors$1 | string;
+declare type InputFieldInternalConfigProps = Partial<{
+    textColor: ThemeColors$2 | string;
     textFontSize: number;
-    placeholderTextColor: ThemeColors$1 | string;
+    placeholderTextColor: ThemeColors$2 | string;
     placeholderTextFontSize: number;
     verticalPadding: number;
     horizontalPadding: number;
     styles: StylesType;
     wrapperStyles: StylesType;
-};
+}>;
 declare type InputIconProps = {
     name: IconNames$1;
     onClick?: Callback$1;
@@ -117,7 +128,7 @@ declare type TextProps = {
     layout?: 'div' | 'span';
     type?: TextTypes;
     styles?: StylesType;
-    color?: ThemeColors$1 | string;
+    color?: ThemeColors$2 | string;
     numberOfLines?: number;
     textAlign?: TextAlign;
     behaveAs?: 'text' | 'button';
@@ -129,8 +140,8 @@ declare const TextWrapper: ({ children, seoTag, ...textProps }: TextWrapperProps
 declare type IconProps = {
     name: IconNames;
     size?: number;
-    color?: ThemeColors$2 | string;
-    fill?: ThemeColors$2 | string;
+    color?: ThemeColors$1 | string;
+    fill?: ThemeColors$1 | string;
     pointerEvents?: 'auto' | 'none';
     style?: CSSProperties;
 };
@@ -170,7 +181,7 @@ declare type SpacerProps = {
 declare const Spacer: styled_components.StyledComponent<"div", styled_components.DefaultTheme, SpacerProps, never>;
 
 declare const Spinner: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {
-    color?: ThemeColors$1 | undefined;
+    color?: ThemeColors$2 | undefined;
     size?: SizesTypes$2 | undefined;
 }, never>;
 
@@ -249,9 +260,9 @@ declare type AvatarProps = {
     size?: SizesTypes$1 | number;
     withShadow?: boolean;
     label?: string;
-    backgroundColor?: ThemeColors$2;
+    backgroundColor?: ThemeColors$1;
     textConfig?: {
-        color?: ThemeColors$2;
+        color?: ThemeColors$1;
         font?: FontSizesTypes$2;
     };
     content: {
@@ -271,7 +282,7 @@ declare const VerticalPadding: styled_components.StyledComponent<"div", styled_c
 
 declare type DividerProps = {
     type?: 'horizontal' | 'vertical';
-    color?: ThemeColors$2 | string;
+    color?: ThemeColors$1 | string;
     marginVertical?: SizesTypes$1 | number;
     marginHorizontal?: SizesTypes$1 | number;
     weight?: number;
@@ -297,7 +308,7 @@ declare const COMMUNICATION_LINK_DATA_TEXT = "communication-link-text";
 declare type RichTextEditorProps = Partial<{
     value: string;
     font: FontSizesTypes$2;
-    color: ThemeColors$2 | string;
+    color: ThemeColors$1 | string;
     textStyles: StylesType;
     numberOfLines?: number;
     extraTextProps?: TextProps$1;
@@ -330,8 +341,8 @@ declare const Circle: ({ index, type }: CircleBoxProps) => JSX.Element;
 
 declare type CircularIndicatorProps = {
     active: boolean;
-    activeColor?: ThemeColors$2 | string;
-    inactiveColor?: ThemeColors$2 | string;
+    activeColor?: ThemeColors$1 | string;
+    inactiveColor?: ThemeColors$1 | string;
 };
 declare const CircularIndicator: ({ activeColor, inactiveColor, ...props }: CircularIndicatorProps) => JSX.Element;
 declare const CircularIndicatorStyledComponent: styled_components.StyledComponent<"span", styled_components.DefaultTheme, CircularIndicatorProps, never>;
@@ -340,8 +351,8 @@ declare type IconButtonProps = {
     name: IconNames$2;
     size?: number;
     onClick: Callback$1;
-    color?: ThemeColors$2 | string;
-    fill?: ThemeColors$2 | string;
+    color?: ThemeColors$1 | string;
+    fill?: ThemeColors$1 | string;
     pointerEvents?: 'auto' | 'none';
 };
 declare const IconButton: ({ name, color, onClick, disabled, activeOpacity, withoutOpacityEffect, ...props }: IconButtonProps & TouchableOpacityProps$1) => JSX.Element;
@@ -369,9 +380,9 @@ declare type TabProps<T = string, K = string> = {
     tabFont: FontSizesTypes$2;
     textSize: number;
     tabPadding: SizesTypes$1 | number;
-    defaultTabTextColor: ThemeColors$2 | string;
-    selectedTabTextColor: ThemeColors$2 | string;
-    selectedTabIndicatorColor: ThemeColors$2 | string;
+    defaultTabTextColor: ThemeColors$1 | string;
+    selectedTabTextColor: ThemeColors$1 | string;
+    selectedTabIndicatorColor: ThemeColors$1 | string;
     styles: StylesType;
 }>;
 declare const ZealTab: <T extends string, K extends string>({ options, onClick, text, tabKey, vertical, onOptionClick, tabTheme, tabFont, tabPadding, selectedTabIndicatorColor, textSize, defaultTabTextColor, ...tabProps }: TabProps<T, K>, ref: React__default.ForwardedRef<TabElement>) => JSX.Element;
@@ -390,9 +401,9 @@ declare const Tab: <T, K>(props: {
     tabFont: FontSizesTypes$2;
     textSize: number;
     tabPadding: SizesTypes$1 | number;
-    defaultTabTextColor: ThemeColors$2 | string;
-    selectedTabTextColor: ThemeColors$2 | string;
-    selectedTabIndicatorColor: ThemeColors$2 | string;
+    defaultTabTextColor: ThemeColors$1 | string;
+    selectedTabTextColor: ThemeColors$1 | string;
+    selectedTabIndicatorColor: ThemeColors$1 | string;
     styles: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<object, styled_components.DefaultTheme>>;
 }> & {
     ref?: React__default.ForwardedRef<TabElement> | undefined;
@@ -748,7 +759,7 @@ declare const useMediaQuery: (breakpointSize: BreakpointSizesTypes$1) => boolean
 
 declare const getFieldPlaceholder: (type: FieldTypes$1, title?: string) => string;
 
-declare type InputFieldTypes = 'phoneNumber' | 'text' | 'email' | 'password' | 'number' | 'any';
+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;
@@ -765,12 +776,10 @@ declare type UIInputField = {
     inputType?: InputFieldTypes;
     maxLength?: number;
     onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-    inputProps?: InputProps$1;
-    labelsProps?: FieldLabelsProps$1;
-};
+} & InputFieldProps$1;
 declare type UISelectField = {
     options?: SelectOption$1[];
-};
+} & SelectFieldProps$1;
 declare type UICheckboxField = {
     checkboxLabel?: string;
 };
@@ -822,14 +831,14 @@ declare type LabelInternalConfig = {
     fontVariant: FontSizesTypes$2;
     fontSize: number;
     fontWeight: string | number;
-    color: ThemeColors$2 | string;
+    color: ThemeColors$1 | string;
     padding: string;
     styles: StylesType;
     wrapperStyles: StylesType;
 };
 declare type RuleLabelInternalConfig = {
-    requiredTextColor: ThemeColors$2 | string;
-    optionalTextColor: ThemeColors$2 | string;
+    requiredTextColor: ThemeColors$1 | string;
+    optionalTextColor: ThemeColors$1 | string;
     padding: string;
     fontSize: number;
     styles: StylesType;
@@ -838,15 +847,15 @@ declare type TooltipInternalConfig = {
     fontVariant: FontSizesTypes$2;
     fontSize: number;
     fontWeight: string | number;
-    color: ThemeColors$2 | string;
+    color: ThemeColors$1 | string;
     padding: string;
-    backgroundColor: ThemeColors$2 | string;
-    iconColor: ThemeColors$2 | string;
+    backgroundColor: ThemeColors$1 | string;
+    iconColor: ThemeColors$1 | string;
     styles: StylesType;
     wrapperStyles: StylesType;
 };
 declare type FieldLabelsProps = {
-    label: string;
+    label?: string;
     tooltipText?: string;
     isError?: boolean;
     isTooltipVisible?: boolean;
@@ -854,20 +863,21 @@ declare type FieldLabelsProps = {
     labelInternalConfig?: LabelInternalConfig;
     ruleLabelInternalConfig?: RuleLabelInternalConfig;
     tooltipInternalConfig?: TooltipInternalConfig;
+    isRichText?: boolean;
 };
-declare const FieldLabels: ({ label, isTooltipVisible, isError, ruleLabel, tooltipText, labelInternalConfig, ruleLabelInternalConfig, tooltipInternalConfig, }: FieldLabelsProps) => JSX.Element;
+declare const FieldLabels: ({ label, isTooltipVisible, isError, ruleLabel, tooltipText, labelInternalConfig, ruleLabelInternalConfig, tooltipInternalConfig, isRichText, }: FieldLabelsProps) => JSX.Element;
 
-declare type InputFieldProps = {
+declare type InputFieldProps = Partial<{
     name: string;
-    control?: Control$1<any>;
-    rules?: ControllerProps$1['rules'];
-    required?: boolean;
-    optional?: boolean;
-    defaultValue?: string;
+    control: Control$1<any>;
+    rules: ControllerProps$1['rules'];
+    required: boolean;
+    optional: boolean;
+    defaultValue: string;
     inputProps: InputProps$1;
-    styles?: StylesType;
-    labelsProps?: FieldLabelsProps;
-};
+    styles: StylesType;
+    labelsProps: FieldLabelsProps;
+}>;
 declare const InputField: ({ control, name, inputProps, styles, labelsProps, defaultValue, optional, required, rules, }: InputFieldProps) => JSX.Element;
 
 declare type FieldMapperProps<T extends object> = {
@@ -889,17 +899,17 @@ declare type CheckboxFieldProps = {
 };
 declare const CheckboxField: ({ control, name, checkboxProps, defaultValue, }: CheckboxFieldProps) => JSX.Element;
 
-declare type SelectFieldProps = {
+declare type SelectFieldProps = Partial<{
     selectProps: SelectProps;
-    labelsProps?: FieldLabelsProps;
+    labelsProps: FieldLabelsProps;
     name: string;
-    rules?: ControllerProps$1['rules'];
-    control?: Control$1<any>;
-    required?: boolean;
-    optional?: boolean;
-    defaultValue?: string;
-    styles?: StylesType;
-};
+    rules: ControllerProps$1['rules'];
+    control: Control$1<any>;
+    required: boolean;
+    optional: boolean;
+    defaultValue: string;
+    styles: StylesType;
+}>;
 declare const SelectField: ({ selectProps, name, defaultValue, optional, required, control, styles, labelsProps, rules, }: SelectFieldProps) => JSX.Element;
 
 declare type CustomValidationRule<T = string> = {
@@ -952,7 +962,7 @@ declare type DrawerProps = DrawerProps$1 & {
     padding?: SizesTypes$2 | number;
     height?: number | string;
     width?: number | string;
-    closeIconColor?: ThemeColors$1 | string;
+    closeIconColor?: ThemeColors$2 | string;
 };
 
 declare const Drawer: ({ children, closeIconColor, ...props }: PropsWithChildren<DrawerProps>) => JSX.Element;
@@ -1008,9 +1018,9 @@ declare type TabGroupProps<T = string, K = string> = {
     textSize?: number;
     tabPadding?: SizesTypes$2 | number;
     tabSpacing?: SizesTypes$2;
-    defaultTabTextColor?: ThemeColors$1 | string;
-    selectedTabTextColor?: ThemeColors$1 | string;
-    selectedTabIndicatorColor?: ThemeColors$1 | string;
+    defaultTabTextColor?: ThemeColors$2 | string;
+    selectedTabTextColor?: ThemeColors$2 | string;
+    selectedTabIndicatorColor?: ThemeColors$2 | string;
     wide?: AdditionalTabContainerProps;
     compact?: AdditionalTabContainerProps;
 };
@@ -1063,7 +1073,7 @@ declare type AlertProps = {
     withCloseIcon?: {
         onClose: Callback$1;
     };
-    fontColor?: ThemeColors$2;
+    fontColor?: ThemeColors$1;
     destinationLink?: string;
     onDestinationHandler?: Callback$1;
     containerStyles?: CSSProperties;
@@ -1086,12 +1096,12 @@ declare type PdfDocumentProps = {
     source: string;
     isMobile?: boolean;
     customDocumentStyles?: Partial<{
-        wrapperBackgroundColor: ThemeColors$2 | string;
-        pageNumberColor: ThemeColors$2 | string;
+        wrapperBackgroundColor: ThemeColors$1 | string;
+        pageNumberColor: ThemeColors$1 | string;
         pageWidth: number;
         pageHeight: number;
-        paginationArrowColor: ThemeColors$2 | string;
-        disabledPaginationArrowColor: ThemeColors$2 | string;
+        paginationArrowColor: ThemeColors$1 | string;
+        disabledPaginationArrowColor: ThemeColors$1 | string;
     }>;
 };
 declare const PdfDocument: ({ source, isMobile, customDocumentStyles, }: PdfDocumentProps) => JSX.Element;
@@ -1172,7 +1182,7 @@ declare type TextMoleculeProps = Partial<{
     variant: 'base' | 'custom';
     fontVariant: FontSizesTypes$2;
     textSize: number;
-    textColor: ThemeColors$2 | string;
+    textColor: ThemeColors$1 | string;
     letterSpacing: number;
     lineHeight: number;
     fontWeight: string | number;
@@ -1187,21 +1197,22 @@ declare type BaseButtonProps = PropsWithChildren<{
     onClick?: Callback$1;
     variant?: ButtonVariant;
     disabled?: boolean;
+    state?: 'disabled' | 'enabled';
     fullWidth?: boolean;
     size?: 'medium' | 'small';
     buttonFont?: FontSizesTypes$2;
-    textColor?: ThemeColors$2 | string;
+    textColor?: ThemeColors$1 | string;
     textSize?: number;
     horizontalPadding?: SizesTypes$1;
     verticalPadding?: SizesTypes$1;
-    buttonColor?: ThemeColors$2 | string;
-    buttonStroke?: ThemeColors$2 | string;
+    buttonColor?: ThemeColors$1 | string;
+    buttonStroke?: ThemeColors$1 | string;
     cornerRadius?: SizesTypes$1 | number;
-    hoverButtonColor?: ThemeColors$2 | string;
-    hoverStrokeColor?: ThemeColors$2 | string;
-    inactiveButtonColor?: ThemeColors$2 | string;
-    inactiveStrokeColor?: ThemeColors$2 | string;
-    inactiveTextColor?: ThemeColors$2 | string;
+    hoverButtonColor?: ThemeColors$1 | string;
+    hoverStrokeColor?: ThemeColors$1 | string;
+    inactiveButtonColor?: ThemeColors$1 | string;
+    inactiveStrokeColor?: ThemeColors$1 | string;
+    inactiveTextColor?: ThemeColors$1 | string;
     styles?: StylesType;
     colorTheme?: 'light' | 'dark';
     href?: string;
@@ -1215,10 +1226,11 @@ declare type ButtonProps = BaseButtonProps & {
     isRichText?: boolean;
     containerStyle?: CSSProperties;
     buttonStyle?: CSSProperties;
+    type?: 'button' | 'submit' | 'reset';
 };
-declare const Button: ({ text: textProp, onClick, loading, disabled, variant, isRichText, fullWidth, elementId, link, containerStyle, children, buttonStyle, size, textColor, inactiveTextColor, ...props }: ButtonProps) => JSX.Element | null;
+declare const Button: ({ text: textProp, onClick, loading, disabled, variant, isRichText, fullWidth, elementId, link, containerStyle, children, buttonStyle, size, textColor, inactiveTextColor, type, state, ...props }: ButtonProps) => JSX.Element | null;
 
-declare const Container: ({ children, wide, compact, type, ...props }: ContainerProps$1) => JSX.Element;
+declare const Container: ({ children, wide, compact, type, props }: ContainerProps$1) => JSX.Element;
 declare const ContainerComponent: ({ type, items, config, tabsProps }: ContainerComponentProps$1) => JSX.Element | null;
 
 declare type ImageAttributes = {
@@ -1235,8 +1247,8 @@ interface VideoAttributes {
     videoSource: string;
 }
 interface LinkAttributes {
-    attributeType: 'link';
     id: string;
+    attributeType: 'link';
     type: 'internalLink' | 'externalLink';
     internalLink: Nullable<string>;
     externalLink: Nullable<string>;
@@ -1251,7 +1263,11 @@ interface BooleanAttributes {
     attributeType: 'boolean';
     value: boolean;
 }
-declare type MoleculeTypes = 'image' | 'text' | 'button' | 'video' | 'header_tab_group';
+interface IterableAttributes {
+    attributeType: 'iterable';
+    options: SelectOption$1[];
+}
+declare type MoleculeTypes = 'image' | 'text' | 'button' | 'video' | 'header_tab_group' | 'input_field' | 'select_field';
 interface BaseMolecule {
     id: string;
     instance: 'molecule';
@@ -1275,15 +1291,15 @@ interface TextMoleculeType extends BaseMolecule {
         seoStyle: SelectAttributes;
     };
     config: {
-        props: {
+        props: Partial<{
             fontVariant: FontSizesTypes$2;
             textSize: number;
-            textColor: ThemeColors$2 | string;
+            textColor: ThemeColors$1 | string;
             letterSpacing: number;
             lineHeight: number;
             isRichText: boolean;
-            styles: CSSProperties;
-        };
+            styles: StylesType;
+        }>;
     };
 }
 interface ButtonMolecule extends BaseMolecule {
@@ -1293,7 +1309,7 @@ interface ButtonMolecule extends BaseMolecule {
         buttonLink: LinkAttributes;
     };
     config: {
-        props: Omit<ButtonProps$1, 'disabled' | 'children' | 'link' | 'text' | 'onClick' | 'elementId'>;
+        props: Partial<Omit<ButtonProps$1, 'disabled' | 'children' | 'link' | 'text' | 'onClick' | 'elementId'>>;
     };
 }
 interface VideoMolecule extends BaseMolecule {
@@ -1306,10 +1322,10 @@ interface VideoMolecule extends BaseMolecule {
         coverImage: ImageAttributes;
     };
     config: {
-        props: {
+        props: Partial<{
             width: number;
             styles: CSSProperties;
-        };
+        }>;
     };
 }
 interface TabGroupMolecule extends BaseMolecule {
@@ -1326,15 +1342,47 @@ interface TabGroupMolecule extends BaseMolecule {
         };
     };
 }
-declare type Molecule = StrictUnion<ImageMolecule | TextMoleculeType | ButtonMolecule | VideoMolecule | TabGroupMolecule>;
+interface TextInputMolecule extends BaseMolecule {
+    type: 'input_field';
+    attributes: {
+        label: TextAttributes;
+        required: BooleanAttributes;
+        inputType: SelectAttributes;
+    };
+    config: {
+        props: Partial<{
+            state: 'default' | 'error';
+        } & InputFieldProps$1>;
+    };
+}
+interface SelectFieldMolecule extends BaseMolecule {
+    type: 'select_field';
+    attributes: {
+        label: TextAttributes;
+        required: BooleanAttributes;
+        options: IterableAttributes;
+    };
+    config: {
+        props: Partial<{
+            state: 'default' | 'error';
+        } & SelectFieldProps$1>;
+    };
+}
+declare type Molecule = StrictUnion<ImageMolecule | TextMoleculeType | ButtonMolecule | VideoMolecule | TabGroupMolecule | TextInputMolecule | SelectFieldMolecule> & {
+    form?: UseFormReturn<any>;
+};
 
-declare type ContainerType = 'row' | 'column' | 'slider';
+declare type ContainerType = 'row' | 'column' | 'slider' | 'form';
 declare type ContainerPositionType = 'fixed' | 'sticky' | 'static';
 declare type ContainerScrollBehaviourType = 'vertical' | 'horizontal' | 'auto' | 'none';
 declare type ContainerPropsType = Partial<{
     position: ContainerPositionType;
     scrollBehaviour: ContainerScrollBehaviourType;
     cornerRadius: number;
+    styles: StylesType;
+    formProps: {
+        mode: keyof ValidationMode;
+    };
 }>;
 declare type AdditionalContainerProps = Partial<{
     containerStyle: CSSProperties;
@@ -1344,14 +1392,16 @@ declare type ContainerProps = PropsWithChildren<Partial<{
     type: ContainerType;
     wide: AdditionalContainerProps;
     compact: AdditionalContainerProps;
+    props: ContainerPropsType;
 }>>;
 declare type ContainerComponentProps = {
     id: string;
     instance: 'container';
     type: ContainerType;
     config: {
-        wide: AdditionalContainerProps;
-        compact: AdditionalContainerProps;
+        wide?: AdditionalContainerProps;
+        compact?: AdditionalContainerProps;
+        props?: ContainerPropsType;
     };
     items: (ContainerComponentProps | Molecule)[];
     tabsProps?: Pick<TabGroupProps$1, 'tabs' | 'activeTabKey' | 'onTabChange'>;
@@ -1362,6 +1412,10 @@ declare const ContainerWrapper: styled_components.StyledComponent<"div", styled_
         position: containers_types_types.ContainerPositionType;
         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;
+        };
     }> | undefined;
 }, never>;
 
@@ -1370,4 +1424,4 @@ declare const OrganismItem: ({ item, tabsProps, }: {
     tabsProps?: Pick<TabGroupProps$1<string, string>, "tabs" | "activeTabKey" | "onTabChange"> | undefined;
 }) => JSX.Element | null;
 
-export { AcquisitionForm, AcquisitionFormProps, AdditionalContainerProps, Alert, AlertProps, AnnotationsList, ArrowIconWrapper, AuthMethod, Avatar, AvatarDropdown, AvatarDropdownProps, AvatarProps, BackgroundImage, BaseButtonProps, BaseMolecule, Body, BodyProps, BooleanAttributes, BottomNaVBarItemProps, BottomNavBarItem, BottomNavBarNavigation, BottomNavBarNavigationProps, BreakpointSizesTypes, Button, ButtonMolecule, ButtonProps, ButtonVariant, ButtonsWrapper, COMMUNICATION_LINK_DATA_TEXT, COMMUNICATION_LINK_DATA_URL, COMMUNICATION_LINK_ELEMENT_ID, CaretIconWrapper, Carousel, CarouselProps, CheckBoxProps, Checkbox, CheckboxField, CheckboxFieldProps, Circle, CircleBoxProps, CircularIndicator, CircularIndicatorProps, CircularIndicatorStyledComponent, ColumnItem, Columns, ColumnsProps, Consent, ConsentProps, Container, ContainerComponent, ContainerComponentProps, ContainerPositionType, ContainerProps, ContainerPropsType, ContainerScrollBehaviourType, ContainerType, ContainerWrapper, CustomValidation, CustomValidationProps, CustomValidationRule, DefaultTemplate, DefaultTemplateProps, Divider, DividerProps, Drawer, DynamicContentZone, DynamicContentZoneProps, DynamicElementProps, EmphasizedText, EmphasizedTextProps, 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, Image, ImageAttributes, ImageMolecule, ImageProps, Input, InputField, InputFieldInternalConfigProps, InputFieldProps, InputFieldTypes, InputIconProps, InputProps, LabelInternalConfig, LinkAttributes, LoginForm, LoginFormProps, MATRIX_MESSAGE_DATA_ID, MATRIX_MESSAGE_ELEMENT_ID, MapPosition, MenuItem, MenuItems, MenuItemsProps, MenuNavigation, MenuNavigationProps, MlrRichTextViewerContext, MlrRichTextViewerContextType, MlrRichTextViewerProvider, MlrRichTextViewerProviderProps, Molecule, MoleculeTypes, NavigationDotsWrapper, OrganismItem, OrientationType, PdfDocument, PdfDocumentProps, ProcessTracker, ProcessTrackerProps, ProcessTrackerStatus, ProfileInformation, ProfileInformationProps, RadioButtonField, RadioButtonFieldProps, RadioButtonType, RadioButtons, RadioButtonsProps, RegularImage, RegularImageProps, RichTextEditorProps, RichTextViewer, RuleLabelInternalConfig, Select, SelectAttributes, SelectField, SelectFieldProps, 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, 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, acquisitionFormMockFields, defaultTheme, getFieldPlaceholder, getFieldsFromFieldSections, getInitialValuesFromFields, isFormValid, loginMockFields, profileInformationMockForm, sectionMockFields, setPasswordMockFields, showAcceptToastMessage, toast, toastStyles, useMediaQuery, useMlrRichTextViewerContext, useRequiredConsentsAcceptedValues, useStep };
+export { AcquisitionForm, AcquisitionFormProps, AdditionalContainerProps, Alert, AlertProps, AnnotationsList, ArrowIconWrapper, AuthMethod, Avatar, AvatarDropdown, AvatarDropdownProps, AvatarProps, BackgroundImage, BaseButtonProps, BaseMolecule, Body, BodyProps, BooleanAttributes, BottomNaVBarItemProps, BottomNavBarItem, BottomNavBarNavigation, BottomNavBarNavigationProps, BreakpointSizesTypes, Button, ButtonMolecule, ButtonProps, ButtonVariant, ButtonsWrapper, COMMUNICATION_LINK_DATA_TEXT, COMMUNICATION_LINK_DATA_URL, COMMUNICATION_LINK_ELEMENT_ID, CaretIconWrapper, Carousel, CarouselProps, CheckBoxProps, Checkbox, CheckboxField, CheckboxFieldProps, Circle, CircleBoxProps, CircularIndicator, CircularIndicatorProps, CircularIndicatorStyledComponent, ColumnItem, Columns, ColumnsProps, Consent, ConsentProps, Container, ContainerComponent, ContainerComponentProps, ContainerPositionType, ContainerProps, ContainerPropsType, ContainerScrollBehaviourType, ContainerType, ContainerWrapper, CustomValidation, CustomValidationProps, CustomValidationRule, DefaultTemplate, DefaultTemplateProps, Divider, DividerProps, Drawer, DynamicContentZone, DynamicContentZoneProps, DynamicElementProps, EmphasizedText, EmphasizedTextProps, 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, 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, Molecule, MoleculeTypes, NavigationDotsWrapper, OrganismItem, OrientationType, PdfDocument, PdfDocumentProps, ProcessTracker, ProcessTrackerProps, ProcessTrackerStatus, ProfileInformation, ProfileInformationProps, RadioButtonField, RadioButtonFieldProps, RadioButtonType, RadioButtons, RadioButtonsProps, 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, acquisitionFormMockFields, defaultTheme, getFieldPlaceholder, getFieldsFromFieldSections, getInitialValuesFromFields, isFormValid, loginMockFields, profileInformationMockForm, sectionMockFields, setPasswordMockFields, showAcceptToastMessage, toast, toastStyles, useMediaQuery, useMlrRichTextViewerContext, useRequiredConsentsAcceptedValues, useStep };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zealicsolutions/web-ui",
-  "version": "0.2.87",
+  "version": "0.2.89",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/Zealic_Solutions/zeal-ui-web.git"

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

@@ -1,14 +0,0 @@
-export declare type SelectOption = {
-    id: string;
-    label: string;
-};
-export declare type SelectProps = {
-    value?: string;
-    optionsPresentation?: boolean;
-    onChange?: (value: string) => void;
-    placeholder?: string;
-    disabled?: boolean;
-    options?: SelectOption[];
-    isError?: boolean;
-    isEditMode?: boolean;
-};

package/dist/esm/src/atoms/Select/types.d.ts

@@ -1,14 +0,0 @@
-export declare type SelectOption = {
-    id: string;
-    label: string;
-};
-export declare type SelectProps = {
-    value?: string;
-    optionsPresentation?: boolean;
-    onChange?: (value: string) => void;
-    placeholder?: string;
-    disabled?: boolean;
-    options?: SelectOption[];
-    isError?: boolean;
-    isEditMode?: boolean;
-};