@zealicsolutions/web-ui 0.3.82 → 0.3.83

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

@@ -15,5 +15,6 @@ export declare type RichTextEditorProps = Partial<{
     extraTextProps: TextProps;
     renderElementWrapperComponent: (props: AnyObject) => JSX.Element;
     renderElementWrapperProps: AnyObject;
+    htmlElementId: string;
 }>;
-export declare const RichTextViewer: ({ value, color, textStyles, font, numberOfLines, extraTextProps, renderElementWrapperComponent, renderElementWrapperProps, }: RichTextEditorProps) => JSX.Element | null;
+export declare const RichTextViewer: ({ value, color, textStyles, font, numberOfLines, extraTextProps, renderElementWrapperComponent, renderElementWrapperProps, htmlElementId, }: RichTextEditorProps) => JSX.Element | null;

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

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

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

@@ -58,7 +58,7 @@ export declare const Container: ({ children, wide, compact, type, props, id, met
     children?: ReactNode;
 } & {
     id: string;
-}) => JSX.Element;
+}) => JSX.Element | null;
 export declare const ContainerComponent: ({ config, tabsProps, id, type, items, metadata, formData, setFormData, isMobile, }: ContainerComponentProps & {
     formData?: AnyObject | undefined;
     setFormData?: Dispatch<SetStateAction<AnyObject>> | undefined;

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

@@ -3,7 +3,7 @@ import { TabGroupProps } from 'molecules';
 export declare const getFullLink: (url: string) => string;
 export declare const navigateToPage: (url: string) => void;
 export declare const downloadFile: (url?: string, name?: string) => Promise<void>;
-export declare const MoleculeItem: ({ type, config, attributes, tabsProps, form, id, formData, setFormData, isMobile, validations, }: Molecule & {
+export declare const MoleculeItem: ({ type, config, attributes, tabsProps, form, id, formData, setFormData, isMobile, validations, metadata, }: Molecule & {
     tabsProps?: Pick<TabGroupProps<string, string>, "tabs" | "activeTabKey" | "onTabChange"> | undefined;
     isMobile?: boolean | undefined;
 }) => JSX.Element | null;

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

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

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

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

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

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

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

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

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

@@ -13,14 +13,14 @@ export declare type ContainerScrollBehaviourType = 'vertical' | 'horizontal' | '
 export declare type StateActionType = 'visible' | 'disabled';
 export declare type StateEventType = 'click' | 'view';
 export declare type StateListenerConfigType = {
-    stateRole: 'stateListener';
+    role: 'stateListener';
     stateKey: string;
-    stateValue: string;
-    defaultState: Record<StateActionType, boolean>;
-    action: Record<StateActionType, boolean>;
+    stateValue: string | boolean;
+    defaultState: Partial<Record<StateActionType, boolean>>;
+    action: Partial<Record<StateActionType, boolean>>;
 };
 export declare type StateModifierConfigType = {
-    stateRole: 'stateModifier';
+    role: 'stateModifier';
     stateKey: string;
     event: StateEventType;
 };

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

@@ -2,5 +2,6 @@
 import { StateConfigType } from 'containers';
 export declare type StateContextType = {
     stateConfig: StateConfigType;
+    stateHandler?: (updatedStateConfig: StateConfigType) => void;
 };
 export declare const StateContext: import("react").Context<StateContextType>;

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

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

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

@@ -1,3 +1,4 @@
+import { MetadataStateConfig } from 'containers';
 import { PropsWithChildren } from 'react';
 import { FontSizesTypes, SizesTypes, ThemeColors } from 'theme';
 import type { Callback, StylesType } from 'typescript';
@@ -37,5 +38,7 @@ export declare type ButtonProps = BaseButtonProps & {
     isRichText?: boolean;
     containerStyle?: StylesType;
     buttonStyle?: StylesType;
+    stateConfig?: MetadataStateConfig[];
+    htmlElementId?: string;
 };
-export declare const Button: ({ text, onClick, loading, disabled, variant, isRichText, fullWidth, elementId, link, containerStyle, children, buttonStyle, size, textColor, inactiveTextColor, state, href, ...props }: ButtonProps) => JSX.Element | null;
+export declare const Button: ({ text, onClick, loading, disabled, variant, isRichText, fullWidth, elementId, link, containerStyle, children, buttonStyle, size, textColor, inactiveTextColor, state, href, stateConfig, htmlElementId, ...props }: ButtonProps) => JSX.Element | null;

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

@@ -2,7 +2,7 @@ import type { StoryFn } from '@storybook/react';
 import { Button as ButtonComponent } from 'molecules';
 declare const _default: {
     title: string;
-    component: ({ text, onClick, loading, disabled, variant, isRichText, fullWidth, elementId, link, containerStyle, children, buttonStyle, size, textColor, inactiveTextColor, state, href, ...props }: import("molecules").ButtonProps) => JSX.Element | null;
+    component: ({ text, onClick, loading, disabled, variant, isRichText, fullWidth, elementId, link, containerStyle, children, buttonStyle, size, textColor, inactiveTextColor, state, href, stateConfig, htmlElementId, ...props }: import("molecules").ButtonProps) => JSX.Element | null;
 };
 export default _default;
 export declare const Button: StoryFn<typeof ButtonComponent>;

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

@@ -29,5 +29,6 @@ export declare type CheckboxFieldProps = Partial<{
     state: FormStateType;
     defaultValue: string[];
     formData: AnyObject;
+    htmlElementId: string;
 }>;
-export declare const CheckboxField: ({ checkboxesProps, name, rules, control, optional, required, labelsProps, wrapperStyles, conditionConfig, defaultValue, formData, }: CheckboxFieldProps) => JSX.Element | null;
+export declare const CheckboxField: ({ checkboxesProps, name, rules, control, optional, required, labelsProps, wrapperStyles, conditionConfig, defaultValue, formData, htmlElementId, }: CheckboxFieldProps) => JSX.Element | null;

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

@@ -2,7 +2,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, defaultValue, formData, }: Partial<{
+    component: ({ checkboxesProps, name, rules, control, optional, required, labelsProps, wrapperStyles, conditionConfig, defaultValue, formData, htmlElementId, }: 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>>;
@@ -51,6 +51,7 @@ declare const _default: {
         state: import("../..").FormStateType;
         defaultValue: string[];
         formData: import("../../typescript").AnyObject;
+        htmlElementId: string;
     }>) => JSX.Element | null;
 };
 export default _default;

package/dist/esm/src/molecules/Consent/ConsentMolecule.d.ts

@@ -4,6 +4,7 @@ declare type ConsentMoleculeProps = {
     attributes: ConsentFieldMolecule['attributes'];
     config: ConsentFieldMolecule['config'];
     formData?: AnyObject;
+    htmlElementId?: string;
 };
-export declare const ConsentMolecule: ({ attributes, formData, config }: ConsentMoleculeProps) => JSX.Element | null;
+export declare const ConsentMolecule: ({ attributes, formData, config, htmlElementId, }: ConsentMoleculeProps) => JSX.Element | null;
 export {};

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

@@ -1,3 +1,4 @@
+import { MetadataStateConfig } from 'containers';
 import { Callback, StylesType } from 'typescript';
 export declare type ImageProps = {
     src: string;
@@ -11,5 +12,7 @@ export declare type ImageProps = {
     cornerRadius: number;
     behaveAs: 'background' | 'regular';
     styles: StylesType;
+    stateConfig: MetadataStateConfig[];
+    htmlElementId: string;
 }>;
-export declare const Image: ({ src, onClick, link, altText, styles, width, height, id, behaveAs, cornerRadius, }: ImageProps) => JSX.Element | null;
+export declare const Image: ({ src, onClick, link, altText, styles, width, height, id, behaveAs, cornerRadius, stateConfig, htmlElementId, }: ImageProps) => JSX.Element | null;

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

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

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

@@ -16,5 +16,6 @@ export declare type InputFieldProps = Partial<{
     conditionConfig: ConditionConfig;
     state: FormStateType;
     formData: AnyObject;
+    htmlElementId: string;
 }>;
-export declare const InputField: ({ control, name, inputProps, styles, labelsProps, defaultValue, optional, required, rules, conditionConfig, state, formData, }: InputFieldProps) => JSX.Element | null;
+export declare const InputField: ({ control, name, inputProps, styles, labelsProps, defaultValue, optional, required, rules, conditionConfig, state, formData, htmlElementId, }: InputFieldProps) => JSX.Element | null;

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

@@ -3,7 +3,7 @@ import { StoryFn } from '@storybook/react';
 import { InputFieldProps } from './InputField';
 declare const _default: {
     title: string;
-    component: ({ control, name, inputProps, styles, labelsProps, defaultValue, optional, required, rules, conditionConfig, state, formData, }: Partial<{
+    component: ({ control, name, inputProps, styles, labelsProps, defaultValue, optional, required, rules, conditionConfig, state, formData, htmlElementId, }: Partial<{
         name: string;
         control: import("react-hook-form").Control<any, any>;
         rules: Omit<Partial<{
@@ -62,6 +62,7 @@ declare const _default: {
         conditionConfig: import("../..").ConditionConfig;
         state: import("../..").FormStateType;
         formData: import("typescript").AnyObject;
+        htmlElementId: string;
     }>) => JSX.Element | null;
 };
 export default _default;

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

@@ -3,5 +3,6 @@ export declare type LinkProps = Omit<TextButtonProps, 'children'> & Partial<{
     text: string;
     isRichText: boolean;
     href: string;
+    htmlElementId: string;
 }>;
-export declare const Link: ({ text, isRichText, ...props }: LinkProps) => JSX.Element | null;
+export declare const Link: ({ text, isRichText, htmlElementId, ...props }: LinkProps) => JSX.Element | null;

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

@@ -2,7 +2,7 @@ import type { StoryFn } from '@storybook/react';
 import { Link as LinkComponent } from 'molecules';
 declare const _default: {
     title: string;
-    component: ({ text, isRichText, ...props }: import("molecules").LinkProps) => JSX.Element | null;
+    component: ({ text, isRichText, htmlElementId, ...props }: import("molecules").LinkProps) => JSX.Element | null;
 };
 export default _default;
 export declare const Link: StoryFn<typeof LinkComponent>;

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

@@ -17,8 +17,9 @@ export declare type RadioButtonFieldProps<T extends string> = Partial<{
     conditionConfig: ConditionConfig;
     state: FormStateType;
     formData: AnyObject;
+    htmlElementId: string;
 }>;
-export declare const RadioButtonField: <T extends string>({ name, rules, styles, control, optional, required, labelsProps, defaultValue, radioButtonsProps, conditionConfig, formData, }: Partial<{
+export declare const RadioButtonField: <T extends string>({ name, rules, styles, control, optional, required, labelsProps, defaultValue, radioButtonsProps, conditionConfig, formData, htmlElementId, }: Partial<{
     name: string;
     rules: ControllerProps['rules'];
     styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
@@ -63,4 +64,5 @@ export declare const RadioButtonField: <T extends string>({ name, rules, styles,
     conditionConfig: ConditionConfig;
     state: FormStateType;
     formData: AnyObject;
+    htmlElementId: string;
 }>) => JSX.Element | null;

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

@@ -2,7 +2,7 @@ import type { ComponentStory } from '@storybook/react';
 import { RadioButtonField as RadioButtonFieldComponent } from './RadioButtonField';
 declare const _default: {
     title: string;
-    component: <T extends string>({ name, rules, styles, control, optional, required, labelsProps, defaultValue, radioButtonsProps, conditionConfig, formData, }: Partial<{
+    component: <T extends string>({ name, rules, styles, control, optional, required, labelsProps, defaultValue, radioButtonsProps, conditionConfig, formData, htmlElementId, }: Partial<{
         name: string;
         rules: Omit<Partial<{
             required: string | import("react-hook-form").ValidationRule<boolean>;
@@ -64,6 +64,7 @@ declare const _default: {
         conditionConfig: import("../..").ConditionConfig;
         state: import("../..").FormStateType;
         formData: import("typescript").AnyObject;
+        htmlElementId: string;
     }>) => JSX.Element | null;
 };
 export default _default;

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

@@ -17,5 +17,6 @@ export declare type SelectFieldProps = Partial<{
     conditionConfig: ConditionConfig;
     state: FormStateType;
     formData: AnyObject;
+    htmlElementId: string;
 }>;
-export declare const SelectField: ({ selectProps, name, defaultValue, optional, required, control, styles, labelsProps, rules, conditionConfig, formData, state, }: SelectFieldProps) => JSX.Element | null;
+export declare const SelectField: ({ selectProps, name, defaultValue, optional, required, control, styles, labelsProps, rules, conditionConfig, formData, state, htmlElementId, }: SelectFieldProps) => JSX.Element | null;

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

@@ -2,7 +2,7 @@ import { StoryFn } from '@storybook/react';
 import { SelectFieldProps } from './SelectField';
 declare const _default: {
     title: string;
-    component: ({ selectProps, name, defaultValue, optional, required, control, styles, labelsProps, rules, conditionConfig, formData, state, }: Partial<{
+    component: ({ selectProps, name, defaultValue, optional, required, control, styles, labelsProps, rules, conditionConfig, formData, state, htmlElementId, }: Partial<{
         selectProps: Partial<{
             ref: import("react-hook-form").RefCallBack;
             onBlur: import("typescript").Callback;
@@ -45,6 +45,7 @@ declare const _default: {
         conditionConfig: import("../..").ConditionConfig;
         state: import("../..").FormStateType;
         formData: import("typescript").AnyObject;
+        htmlElementId: string;
     }>) => JSX.Element | null;
 };
 export default _default;

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

@@ -24,5 +24,6 @@ export declare type TabGroupProps<T = string, K = string> = {
     wide?: AdditionalTabContainerProps;
     compact?: AdditionalTabContainerProps;
     isMobile?: boolean;
+    htmlElementId?: string;
 };
-export declare const TabGroup: <T extends string, K extends string>({ tabs, vertical, activeTabKey, onTabChange, tabTheme, wide, compact, tabSpacing, isMobile, ...props }: TabGroupProps<T, K>) => JSX.Element;
+export declare const TabGroup: <T extends string, K extends string>({ tabs, vertical, activeTabKey, onTabChange, tabTheme, wide, compact, tabSpacing, isMobile, htmlElementId, ...props }: TabGroupProps<T, K>) => JSX.Element;

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

@@ -2,7 +2,7 @@ import type { StoryFn } from '@storybook/react';
 import { TabGroupProps } from './TabGroup';
 declare const _default: {
     title: string;
-    component: <T extends string, K extends string>({ tabs, vertical, activeTabKey, onTabChange, tabTheme, wide, compact, tabSpacing, isMobile, ...props }: TabGroupProps<T, K>) => JSX.Element;
+    component: <T extends string, K extends string>({ tabs, vertical, activeTabKey, onTabChange, tabTheme, wide, compact, tabSpacing, isMobile, htmlElementId, ...props }: TabGroupProps<T, K>) => JSX.Element;
 };
 export default _default;
 export declare const TabGroup: StoryFn<TabGroupProps>;

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

@@ -13,5 +13,6 @@ export declare type TextMoleculeProps = Partial<{
     isRichText: boolean;
     styles: StylesType;
     textAlign: 'center' | 'right' | 'left';
+    htmlElementId: string;
 }> & Pick<TextProps, 'seoTag' | 'numberOfLines'>;
-export declare const TextMolecule: ({ isRichText, variant, text, seoTag, fontVariant, textColor, textSize, fontWeight, lineHeight, letterSpacing, styles, textAlign, ...restOfTextProps }: TextMoleculeProps) => JSX.Element;
+export declare const TextMolecule: ({ isRichText, variant, text, seoTag, fontVariant, textColor, textSize, fontWeight, lineHeight, letterSpacing, styles, textAlign, htmlElementId, ...restOfTextProps }: TextMoleculeProps) => JSX.Element;

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

@@ -2,7 +2,7 @@ import type { StoryFn } from '@storybook/react';
 import { TextMoleculeProps } from './TextMolecule';
 declare const _default: {
     title: string;
-    component: ({ isRichText, variant, text, seoTag, fontVariant, textColor, textSize, fontWeight, lineHeight, letterSpacing, styles, textAlign, ...restOfTextProps }: TextMoleculeProps) => JSX.Element;
+    component: ({ isRichText, variant, text, seoTag, fontVariant, textColor, textSize, fontWeight, lineHeight, letterSpacing, styles, textAlign, htmlElementId, ...restOfTextProps }: TextMoleculeProps) => JSX.Element;
 };
 export default _default;
 export declare const TextMolecule: StoryFn<TextMoleculeProps>;

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

@@ -12,5 +12,6 @@ export declare type VideoProps = {
     style: CSSProperties;
     styles: StylesType;
     template: FeedContentTemplateTypes;
+    htmlElementId: string;
 }>;
-export declare const Video: ({ style, src, width, height, template, autoplay, enableCoverImage, coverImageSrc, styles, }: VideoProps) => JSX.Element | null;
+export declare const Video: ({ style, src, width, height, template, autoplay, enableCoverImage, coverImageSrc, styles, htmlElementId, }: VideoProps) => JSX.Element | null;

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

@@ -2,7 +2,7 @@ import type { StoryFn } from '@storybook/react';
 import { Video as VideoComponent } from './Video';
 declare const _default: {
     title: string;
-    component: ({ style, src, width, height, template, autoplay, enableCoverImage, coverImageSrc, styles, }: import("./Video").VideoProps) => JSX.Element | null;
+    component: ({ style, src, width, height, template, autoplay, enableCoverImage, coverImageSrc, styles, htmlElementId, }: import("./Video").VideoProps) => JSX.Element | null;
 };
 export default _default;
 export declare const Video: StoryFn<typeof VideoComponent>;

package/dist/index.d.ts

@@ -10,7 +10,7 @@ import { StylesType, AnyObject as AnyObject$1, Callback as Callback$1, OverrideS
 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 { FormStateType as FormStateType$1, ContainerComponentProps as ContainerComponentProps$1, Molecule as Molecule$1, ConditionConfig as ConditionConfig$1, MetadataStateConfig as MetadataStateConfig$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';
@@ -214,6 +214,7 @@ declare type TextProps = {
     textAlign?: TextAlign;
     behaveAs?: 'text' | 'button';
     seoTag?: SeoTags;
+    htmlElementId?: string;
 };
 declare type TextWrapperProps = PropsWithChildren<TextProps>;
 declare const TextWrapper: ({ children, seoTag, ...textProps }: TextWrapperProps) => JSX.Element;
@@ -405,8 +406,9 @@ declare type RichTextEditorProps = Partial<{
     extraTextProps: TextProps$1;
     renderElementWrapperComponent: (props: AnyObject$1) => JSX.Element;
     renderElementWrapperProps: AnyObject$1;
+    htmlElementId: string;
 }>;
-declare const RichTextViewer: ({ value, color, textStyles, font, numberOfLines, extraTextProps, renderElementWrapperComponent, renderElementWrapperProps, }: RichTextEditorProps) => JSX.Element | null;
+declare const RichTextViewer: ({ value, color, textStyles, font, numberOfLines, extraTextProps, renderElementWrapperComponent, renderElementWrapperProps, htmlElementId, }: RichTextEditorProps) => JSX.Element | null;
 
 declare type RadioButtonInternalConfigProps = Partial<{
     selectedRadioOptionBackgroundColor: ThemeColors$1 | string;
@@ -991,8 +993,9 @@ declare type InputFieldProps = Partial<{
     conditionConfig: ConditionConfig$1;
     state: FormStateType$1;
     formData: AnyObject$1;
+    htmlElementId: string;
 }>;
-declare const InputField: ({ control, name, inputProps, styles, labelsProps, defaultValue, optional, required, rules, conditionConfig, state, formData, }: InputFieldProps) => JSX.Element | null;
+declare const InputField: ({ control, name, inputProps, styles, labelsProps, defaultValue, optional, required, rules, conditionConfig, state, formData, htmlElementId, }: InputFieldProps) => JSX.Element | null;
 
 declare type FieldMapperProps<T extends object> = {
     field: UIField$1<keyof T>;
@@ -1030,8 +1033,9 @@ declare type CheckboxFieldProps = Partial<{
     state: FormStateType$1;
     defaultValue: string[];
     formData: AnyObject$1;
+    htmlElementId: string;
 }>;
-declare const CheckboxField: ({ checkboxesProps, name, rules, control, optional, required, labelsProps, wrapperStyles, conditionConfig, defaultValue, formData, }: CheckboxFieldProps) => JSX.Element | null;
+declare const CheckboxField: ({ checkboxesProps, name, rules, control, optional, required, labelsProps, wrapperStyles, conditionConfig, defaultValue, formData, htmlElementId, }: CheckboxFieldProps) => JSX.Element | null;
 
 declare type CheckboxGroupProps = Partial<{
     ref: RefCallBack;
@@ -1054,8 +1058,9 @@ declare type SelectFieldProps = Partial<{
     conditionConfig: ConditionConfig$1;
     state: FormStateType$1;
     formData: AnyObject$1;
+    htmlElementId: string;
 }>;
-declare const SelectField: ({ selectProps, name, defaultValue, optional, required, control, styles, labelsProps, rules, conditionConfig, formData, state, }: SelectFieldProps) => JSX.Element | null;
+declare const SelectField: ({ selectProps, name, defaultValue, optional, required, control, styles, labelsProps, rules, conditionConfig, formData, state, htmlElementId, }: SelectFieldProps) => JSX.Element | null;
 
 declare type CustomValidationRule<T = string> = {
     text: string;
@@ -1169,8 +1174,9 @@ declare type TabGroupProps<T = string, K = string> = {
     wide?: AdditionalTabContainerProps;
     compact?: AdditionalTabContainerProps;
     isMobile?: boolean;
+    htmlElementId?: string;
 };
-declare const TabGroup: <T extends string, K extends string>({ tabs, vertical, activeTabKey, onTabChange, tabTheme, wide, compact, tabSpacing, isMobile, ...props }: TabGroupProps<T, K>) => JSX.Element;
+declare const TabGroup: <T extends string, K extends string>({ tabs, vertical, activeTabKey, onTabChange, tabTheme, wide, compact, tabSpacing, isMobile, htmlElementId, ...props }: TabGroupProps<T, K>) => JSX.Element;
 
 declare type FieldSectionProps<T extends object> = {
     label: string;
@@ -1209,8 +1215,9 @@ declare type RadioButtonFieldProps<T extends string> = Partial<{
     conditionConfig: ConditionConfig$1;
     state: FormStateType$1;
     formData: AnyObject$1;
+    htmlElementId: string;
 }>;
-declare const RadioButtonField: <T extends string>({ name, rules, styles, control, optional, required, labelsProps, defaultValue, radioButtonsProps, conditionConfig, formData, }: Partial<{
+declare const RadioButtonField: <T extends string>({ name, rules, styles, control, optional, required, labelsProps, defaultValue, radioButtonsProps, conditionConfig, formData, htmlElementId, }: Partial<{
     name: string;
     rules: ControllerProps$1['rules'];
     styles: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<object, styled_components.DefaultTheme>>;
@@ -1255,6 +1262,7 @@ declare const RadioButtonField: <T extends string>({ name, rules, styles, contro
     conditionConfig: ConditionConfig$1;
     state: FormStateType$1;
     formData: AnyObject$1;
+    htmlElementId: string;
 }>) => JSX.Element | null;
 
 declare type AlertProps = {
@@ -1341,8 +1349,9 @@ declare type VideoProps = {
     style: CSSProperties;
     styles: StylesType;
     template: FeedContentTemplateTypes$1;
+    htmlElementId: string;
 }>;
-declare const Video: ({ style, src, width, height, template, autoplay, enableCoverImage, coverImageSrc, styles, }: VideoProps) => JSX.Element | null;
+declare const Video: ({ style, src, width, height, template, autoplay, enableCoverImage, coverImageSrc, styles, htmlElementId, }: VideoProps) => JSX.Element | null;
 
 declare type ImageProps = {
     src: string;
@@ -1356,8 +1365,10 @@ declare type ImageProps = {
     cornerRadius: number;
     behaveAs: 'background' | 'regular';
     styles: StylesType;
+    stateConfig: MetadataStateConfig$1[];
+    htmlElementId: string;
 }>;
-declare const Image: ({ src, onClick, link, altText, styles, width, height, id, behaveAs, cornerRadius, }: ImageProps) => JSX.Element | null;
+declare const Image: ({ src, onClick, link, altText, styles, width, height, id, behaveAs, cornerRadius, stateConfig, htmlElementId, }: ImageProps) => JSX.Element | null;
 
 declare type CarouselProps = {
     children: JSX.Element[];
@@ -1388,8 +1399,9 @@ declare type TextMoleculeProps = Partial<{
     isRichText: boolean;
     styles: StylesType;
     textAlign: 'center' | 'right' | 'left';
+    htmlElementId: string;
 }> & Pick<TextProps$1, 'seoTag' | 'numberOfLines'>;
-declare const TextMolecule: ({ isRichText, variant, text, seoTag, fontVariant, textColor, textSize, fontWeight, lineHeight, letterSpacing, styles, textAlign, ...restOfTextProps }: TextMoleculeProps) => JSX.Element;
+declare const TextMolecule: ({ isRichText, variant, text, seoTag, fontVariant, textColor, textSize, fontWeight, lineHeight, letterSpacing, styles, textAlign, htmlElementId, ...restOfTextProps }: TextMoleculeProps) => JSX.Element;
 
 declare type ButtonVariant = 'primary' | 'secondary' | 'text' | 'custom';
 declare type ButtonType = 'button' | 'submit' | 'reset';
@@ -1427,8 +1439,10 @@ declare type ButtonProps = BaseButtonProps & {
     isRichText?: boolean;
     containerStyle?: StylesType;
     buttonStyle?: StylesType;
+    stateConfig?: MetadataStateConfig$1[];
+    htmlElementId?: string;
 };
-declare const Button: ({ text, onClick, loading, disabled, variant, isRichText, fullWidth, elementId, link, containerStyle, children, buttonStyle, size, textColor, inactiveTextColor, state, href, ...props }: ButtonProps) => JSX.Element | null;
+declare const Button: ({ text, onClick, loading, disabled, variant, isRichText, fullWidth, elementId, link, containerStyle, children, buttonStyle, size, textColor, inactiveTextColor, state, href, stateConfig, htmlElementId, ...props }: ButtonProps) => JSX.Element | null;
 
 declare type ZealUIModalProps = PropsWithChildren<Pick<ModalProps, 'open'>> & {
     padding?: number | string;
@@ -1476,8 +1490,9 @@ declare type LinkProps = Omit<TextButtonProps$1, 'children'> & Partial<{
     text: string;
     isRichText: boolean;
     href: string;
+    htmlElementId: string;
 }>;
-declare const Link: ({ text, isRichText, ...props }: LinkProps) => JSX.Element | null;
+declare const Link: ({ text, isRichText, htmlElementId, ...props }: LinkProps) => JSX.Element | null;
 
 declare const Container: ({ children, wide, compact, type, props, id, metadata, isMobile, }: Partial<{
     type: containers.ContainerType;
@@ -1536,7 +1551,7 @@ declare const Container: ({ children, wide, compact, type, props, id, metadata,
     children?: ReactNode;
 } & {
     id: string;
-}) => JSX.Element;
+}) => JSX.Element | null;
 declare const ContainerComponent: ({ config, tabsProps, id, type, items, metadata, formData, setFormData, isMobile, }: ContainerComponentProps$1 & {
     formData?: AnyObject$1 | undefined;
     setFormData?: Dispatch<SetStateAction<AnyObject$1>> | undefined;
@@ -1802,14 +1817,14 @@ declare type ContainerScrollBehaviourType = 'vertical' | 'horizontal' | 'auto' |
 declare type StateActionType = 'visible' | 'disabled';
 declare type StateEventType = 'click' | 'view';
 declare type StateListenerConfigType = {
-    stateRole: 'stateListener';
+    role: 'stateListener';
     stateKey: string;
-    stateValue: string;
-    defaultState: Record<StateActionType, boolean>;
-    action: Record<StateActionType, boolean>;
+    stateValue: string | boolean;
+    defaultState: Partial<Record<StateActionType, boolean>>;
+    action: Partial<Record<StateActionType, boolean>>;
 };
 declare type StateModifierConfigType = {
-    stateRole: 'stateModifier';
+    role: 'stateModifier';
     stateKey: string;
     event: StateEventType;
 };

package/package.json

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