@zealicsolutions/web-ui 1.0.30 → 1.0.31-beta.1

package/dist/index.d.ts

@@ -15,7 +15,7 @@ import { BaseButtonProps, PasswordRuleValidation as PasswordRuleValidation$1, Ba
 import { TooltipProps as TooltipProps$1 } from 'rc-tooltip/lib/Tooltip';
 import { Descendant } from 'slate';
 import * as _mui_material from '@mui/material';
-import { DrawerProps as DrawerProps$1, ModalProps, SxProps, TypographyProps, ButtonProps as ButtonProps$1, SwitchProps, BadgeProps, TextFieldProps, SliderProps as SliderProps$1 } from '@mui/material';
+import { DrawerProps as DrawerProps$1, ModalProps, SxProps, TypographyProps, ButtonProps as ButtonProps$1, SwitchProps, BadgeProps, TextFieldProps, RatingProps, SliderProps as SliderProps$1 } from '@mui/material';
 import { IconNames as IconNames$1, TouchableOpacityProps as TouchableOpacityProps$1 } from 'components';
 import { OrganismDTO } from 'organisms/types';
 import { AnnotationsList as AnnotationsList$1 } from 'contexts/MlrRichTextViewerContext/types';
@@ -1041,25 +1041,21 @@ declare type StepperProps = {
 };
 declare const Stepper: FC<StepperProps>;
 
-/**
- * SwitchMolecule Component:
- * A reusable switch component with customizable labels and styles.
- */
-interface SwitchMoleculeProps extends SwitchProps {
+interface SwitchMoleculeProps extends Omit<SwitchProps, 'onChange'> {
+    /** If true, switch is shown but disabled, with a text next to it that indicates ON/OFF. */
+    isDisplayOnly?: boolean;
+    /** If true, we rely on MUI FormControl to show the required asterisk. */
     required?: boolean;
-    moleculeId?: string;
-    configurationItemInfo?: ConfigurationItemInfo$1;
+    requiredErrorText?: string;
+    validationErrorText?: string;
     text?: string;
-    textAlign?: 'left' | 'center' | 'right' | 'justify';
-    fontSize?: number | string;
-    fontFamily?: string;
-    fontWeight?: 'normal' | 'bold';
-    placement?: 'left' | 'right' | 'top' | 'bottom';
-    selectColor?: string;
-    color?: string;
-    colorDisabled?: string;
-    textColor?: string;
-    size?: 'small' | 'medium';
+    thumbColor?: string;
+    thumbCheckedColor?: string;
+    trackColor?: string;
+    disabledThumbColor?: string;
+    /** MUI FormControl label placement with a real label. We'll show the label above by default. */
+    labelPlacement?: 'top' | 'bottom';
+    /** Additional MUI styling props if needed */
     marginLeft?: string;
     marginTop?: string;
     marginRight?: string;
@@ -1068,9 +1064,10 @@ interface SwitchMoleculeProps extends SwitchProps {
     paddingTop?: string;
     paddingRight?: string;
     paddingBottom?: string;
-    borderColor?: string;
+    /** For hooking up with react-hook-form */
     name: string;
     sourceDataModelField?: string;
+    configurationItemInfo?: ConfigurationItemInfo$1;
 }
 declare const SwitchMolecule: react__default.FC<SwitchMoleculeProps>;
 
@@ -1152,6 +1149,8 @@ declare const AlertMolecule: react__default.FC<AlertMoleculeProps>;
 
 interface BasicTextFieldProps extends TextFieldProps {
     required?: boolean;
+    requiredErrorText?: string;
+    validationErrorText?: string;
     backgroundColor?: string;
     textAlign?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
     color?: string;
@@ -1176,24 +1175,35 @@ interface BasicTextFieldProps extends TextFieldProps {
     name: string;
     rules?: Omit<RegisterOptions<FieldValues, string>, 'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'>;
     sourceDataModelField?: string;
+    isDisplayOnly?: boolean;
 }
 declare const BasicTextField: react__default.FC<BasicTextFieldProps>;
 
-interface RatingMoleculeProps {
+interface RatingMoleculeProps extends Omit<RatingProps, 'onChange'> {
+    /** Label text displayed above or beside the rating */
     text: string;
+    /** Name used for react-hook-form registration */
     name: string;
+    /** If true, the user can’t change the rating (renders read-only) */
+    isDisplayOnly?: boolean;
+    /** If true, we show an asterisk and require a non-null rating */
+    required?: boolean;
+    /** Custom error text if `required` is not satisfied */
+    requiredErrorText?: string;
+    /** If some other validation fails, show this text */
+    validationErrorText?: string;
+    /** If true, rating icons will show real-time integer value on hover or selection */
+    hoverFeedback?: boolean;
+    /** For hooking up with state config if you store an initial rating there */
+    sourceDataModelField?: string;
+    /** Some style props for customizing layout/appearance */
     textAlign?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
     color?: string;
     textColor?: string;
-    selectSize?: string;
     selectColor?: string;
     fontSize?: number | string;
     fontFamily?: string;
-    fontWeight?: 'normal' | 'bold';
-    placement?: 'right' | 'left';
-    ratingPrecision?: number;
-    maxValue?: number;
-    hoverFeedback?: boolean;
+    fontWeight?: 'normal' | 'bold' | number;
     marginLeft?: string;
     marginTop?: string;
     marginRight?: string;
@@ -1202,14 +1212,26 @@ interface RatingMoleculeProps {
     paddingTop?: string;
     paddingRight?: string;
     paddingBottom?: string;
+    /** For left or right placement of the hover feedback text */
+    placement?: 'right' | 'left';
+    /** The config item for design-time or telemetry */
     configurationItemInfo?: Record<string, unknown>;
+    /** Disables rating input in editable mode (MUI prop) */
     disabled?: boolean;
+    /** If using react-hook-form, we can track field errors.  */
+    maxValue?: number;
+    ratingPrecision?: number;
 }
 declare const RatingMolecule: react__default.FC<RatingMoleculeProps>;
 
-declare type SliderMoleculeProps = SliderProps$1 & {
+interface SliderMoleculeProps extends Omit<SliderProps$1, 'onChange'> {
+    /** If true, the slider is displayed disabled + text showing the value. */
+    isDisplayOnly?: boolean;
+    /** If true, rely on FormControl to show a required asterisk. */
     required?: boolean;
-    text: string;
+    requiredErrorText?: string;
+    validationErrorText?: string;
+    text?: string;
     startIcon?: string;
     endIcon?: string;
     borderColor?: string;
@@ -1219,17 +1241,17 @@ declare type SliderMoleculeProps = SliderProps$1 & {
     textColor?: string;
     fontSize?: number | string;
     fontFamily?: string;
-    fontWeight?: 'normal' | 'bold';
-    textAlign?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
-    placement?: 'left' | 'right' | 'top' | 'bottom';
+    fontWeight?: 'normal' | 'bold' | number;
+    valueFormat?: string;
+    valueDisplay?: 'on' | 'off' | 'auto';
     iconSize?: string;
     selectColor?: string;
     iconColor?: string;
     minValue?: number;
     maxValue?: number;
-    valueFormat?: string;
-    valueDisplay?: 'on' | 'off' | 'auto';
     step?: number;
+    /** label's placement relative to the slider+icons */
+    labelPlacement?: 'top' | 'bottom';
     marginLeft?: string;
     marginTop?: string;
     marginRight?: string;
@@ -1239,21 +1261,26 @@ declare type SliderMoleculeProps = SliderProps$1 & {
     paddingRight?: string;
     paddingBottom?: string;
     configurationItemInfo?: ConfigurationItemInfo$1;
+    /** For hooking up with react-hook-form */
     name?: string;
     sourceDataModelField?: string;
-};
+}
+/**
+ * SliderMolecule
+ */
 declare const SliderMolecule: react__default.FC<SliderMoleculeProps>;
 
 interface DatePickerMoleculeProps extends DatePickerProps {
     required?: boolean;
+    placeholderText?: string;
     moleculeId?: string;
     configurationItemInfo?: any;
     text: string;
     borderColor?: string;
-    fontSize?: TypographyProps['fontSize'];
-    fontFamily?: TypographyProps['fontFamily'];
-    fontWeight?: TypographyProps['fontWeight'];
-    textColor?: TypographyProps['color'];
+    fontSize?: string | number;
+    fontFamily?: string;
+    fontWeight?: string | number;
+    textColor?: string;
     iconColor?: IconRendererProps$1['color'];
     minDate?: string;
     maxDate?: string;
@@ -1268,20 +1295,43 @@ interface DatePickerMoleculeProps extends DatePickerProps {
     paddingBottom?: string;
     name: string;
     sourceDataModelField?: string;
+    /**
+     * If true, disables the actual picker input and just displays
+     * the date in read-only text form.
+     */
+    isDisplayOnly?: boolean;
+    /**
+     * Format to use when displaying date in "display only" mode
+     * or controlling the displayed text in the editable field.
+     * e.g. 'MM/dd/yyyy' or 'yyyy-MM-dd'
+     */
+    displayFormat?: string;
 }
 declare const DatePickerMolecule: react__default.FC<DatePickerMoleculeProps>;
 
+interface SelectMoleculeOption {
+    id: string;
+    value: string;
+}
 interface SelectMoleculeProps {
+    /** Label text (visible above or inside the select) */
     text: string;
-    options: {
-        id: string;
-        value: string;
-    }[];
+    /** Dropdown options. Each has { id, value } or you can supply string[] */
+    options: SelectMoleculeOption[] | string[];
+    /** For a placeholder, you might use the first item or do a custom approach */
     placeholderText?: string;
-    fontSize?: number | string;
+    /** If true, the field is required in form validation */
     required?: boolean;
+    /** Use this text if required == true and no value selected */
+    requiredErrorText?: string;
+    /** Use this text if user fails some extra validation pattern */
+    validationErrorText?: string;
+    /** If true, show a text label instead of an interactive dropdown */
+    isDisplayOnly?: boolean;
+    /** CSS style props */
+    fontSize?: number | string;
     fontFamily?: TypographyProps['fontFamily'];
-    fontWeight?: 'normal' | 'bold';
+    fontWeight?: 'normal' | 'bold' | number;
     textColor?: string;
     textAlign?: TypographyProps['textAlign'];
     borderColor?: string;
@@ -1295,8 +1345,11 @@ interface SelectMoleculeProps {
     paddingTop?: string;
     paddingRight?: string;
     paddingBottom?: string;
+    /** Additional config from system (e.g. for selection in config mode) */
     configurationItemInfo?: ConfigurationItemInfo$1;
+    /** The name of the field in react-hook-form */
     name: string;
+    /** The data field in global stateConfig to populate/initialize value */
     sourceDataModelField?: string;
 }
 declare const SelectMolecule: react__default.FC<SelectMoleculeProps>;
@@ -1631,16 +1684,27 @@ declare type TabsItemDTO = BaseItem & {
 };
 
 interface EmailInputFieldProps {
+    /** If true, show the email as text only (no editing). */
+    isDisplayOnly?: boolean;
+    /** If true, do required validation in RHF + show MUI asterisk. */
     required?: boolean;
+    requiredErrorText?: string;
+    validationErrorText?: string;
+    /** Basic label & placeholder */
+    text?: string;
+    placeholderText?: string;
+    /** If true, apply an email text mask in the editable field. */
+    masked?: boolean;
+    multiLine?: boolean;
+    /** Basic styling props */
     backgroundColor?: string;
-    textAlign?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
+    borderColor?: string;
     color?: string;
     fontSize?: number | string;
     fontFamily?: string;
-    fontWeight?: 'normal' | 'bold';
-    masked?: boolean;
-    multiLine?: boolean;
-    borderColor?: string;
+    fontWeight?: 'normal' | 'bold' | number;
+    textAlign?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
+    /** Spacing */
     marginLeft?: string;
     marginTop?: string;
     marginRight?: string;
@@ -1649,24 +1713,29 @@ interface EmailInputFieldProps {
     paddingTop?: string;
     paddingRight?: string;
     paddingBottom?: string;
-    text?: string;
-    placeholderText?: string;
-    configurationItemInfo?: ConfigurationItemInfo$1;
     name: string;
     sourceDataModelField?: string;
+    configurationItemInfo?: ConfigurationItemInfo$1;
 }
 
 interface PhoneNumberInputFieldProps {
+    /** If true, we skip rendering the textfield and just show a text display. */
+    isDisplayOnly?: boolean;
+    /** If true, we do required validation in react-hook-form + show asterisk in MUI FormControl. */
     required?: boolean;
+    requiredErrorText?: string;
+    validationErrorText?: string;
+    text?: string;
+    placeholderText?: string;
+    masked?: boolean;
+    /** Basic style props */
     backgroundColor?: string;
-    textAlign?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
-    color?: string;
+    borderColor?: string;
+    textColor?: string;
     fontSize?: number | string;
     fontFamily?: string;
-    fontWeight?: 'normal' | 'bold';
-    masked?: boolean;
-    multiLine?: boolean;
-    borderColor?: string;
+    fontWeight?: 'normal' | 'bold' | number;
+    /** Spacing */
     marginLeft?: string;
     marginTop?: string;
     marginRight?: string;
@@ -1675,22 +1744,34 @@ interface PhoneNumberInputFieldProps {
     paddingTop?: string;
     paddingRight?: string;
     paddingBottom?: string;
-    text?: string;
-    placeholderText?: string;
-    configurationItemInfo?: ConfigurationItemInfo$1;
     name: string;
     sourceDataModelField?: string;
+    configurationItemInfo?: ConfigurationItemInfo$1;
 }
 
 interface NumericInputFieldProps {
+    /** If true, the field shows as text-only (no editing). */
+    isDisplayOnly?: boolean;
+    /** If true, we do required validation in form + show MUI asterisk. */
     required?: boolean;
+    requiredErrorText?: string;
+    validationErrorText?: string;
+    /** Label text for the field */
+    text?: string;
+    placeholderText?: string;
     backgroundColor?: string;
-    textAlign?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
+    borderColor?: string;
     textColor?: string;
     fontSize?: number | string;
     fontFamily?: string;
-    fontWeight?: 'normal' | 'bold';
-    borderColor?: string;
+    fontWeight?: 'normal' | 'bold' | number;
+    /** If false => we disallow negative input. */
+    allowNegative?: boolean;
+    /** e.g. "0.01" => step=0.01, 2 decimals */
+    numericPrecision?: string;
+    name: string;
+    sourceDataModelField?: string;
+    /** Basic spacing/styling */
     marginLeft?: string;
     marginTop?: string;
     marginRight?: string;
@@ -1699,44 +1780,7 @@ interface NumericInputFieldProps {
     paddingTop?: string;
     paddingRight?: string;
     paddingBottom?: string;
-    text?: string;
-    placeholderText?: string;
     configurationItemInfo?: ConfigurationItemInfo$1;
-    name: string;
-    allowNegative: boolean;
-    /**
-     * A string representing the precision step for the numeric input
-     * e.g. '1.0' or '0.05' or '0.001'
-     */
-    numericPrecision?: string;
-    sourceDataModelField?: string;
-}
-
-/**
- * Props similar to SimpleText, plus sourceDataModelField for retrieving text from stateConfig
- */
-interface DisplayDataFieldMoleculeProps extends TypographyProps {
-    sourceDataModelField?: string;
-    /** If you want custom background color around the text */
-    backgroundColor?: string;
-    /** Text color */
-    textColor?: string;
-    /** Whether text should wrap. If falsy => MUI uses "noWrap" */
-    wrap?: boolean;
-    /** Additional margin/padding props */
-    marginTop?: string;
-    marginRight?: string;
-    marginBottom?: string;
-    marginLeft?: string;
-    paddingTop?: string;
-    paddingRight?: string;
-    paddingBottom?: string;
-    paddingLeft?: string;
-    /**
-     * If you want a custom ID or attach config style
-     */
-    htmlElementId?: string;
-    configurationsItemInfo?: ConfigurationItemInfo$1;
 }
 
 declare type ActionTypes = 'link' | 'popup' | 'drawer' | 'download' | 'submit' | 'reset' | 'destroy';
@@ -1846,7 +1890,7 @@ declare type ObjectStateProperties = {
     pmiObjectId: string | null;
 };
 declare type MoleculeItemTypes = 'stepper_item' | 'checklist_item' | 'accordion_item' | 'menu_item' | 'tabs_item';
-declare type MoleculeTypes = 'simple_text' | 'text' | 'header_tab_group' | 'consent' | 'signup_password_fields' | 'account_button' | 'stepper' | 'checklist' | 'accordion' | 'menu' | 'tabs' | 'divider' | 'link' | 'video' | 'image' | 'button' | 'alert' | 'badge' | 'chip' | 'basic_text_field' | 'rating' | 'switch' | 'slider' | 'select' | 'date_picker' | 'email_input_field' | 'phone_number_input_field' | 'numeric_input_field' | 'currency_input_field' | 'display_data_field';
+declare type MoleculeTypes = 'simple_text' | 'text' | 'header_tab_group' | 'consent' | 'signup_password_fields' | 'account_button' | 'stepper' | 'checklist' | 'accordion' | 'menu' | 'tabs' | 'divider' | 'link' | 'video' | 'image' | 'button' | 'alert' | 'badge' | 'chip' | 'basic_text_field' | 'rating' | 'switch' | 'slider' | 'select' | 'date_picker' | 'email_input_field' | 'phone_number_input_field' | 'numeric_input_field' | 'currency_input_field' | 'email_display_field' | 'phone_number_display_field' | 'numeric_display_field' | 'currency_display_field' | 'basic_text_display_field' | 'select_display_field' | 'rating_display_field' | 'switch_display_field' | 'slider_display_field' | 'date_display_field';
 /**
  * [ NEW MOLECULE: 3 ] Second Step is to add the new molecule name to this list, in snake case format
  *
@@ -2026,7 +2070,7 @@ interface AlertMoleculeType extends BaseMoleculeType {
     };
 }
 interface BasicTextFieldMoleculeType extends BaseMoleculeType {
-    type: 'basic_text_field';
+    type: 'basic_text_field' | 'basic_text_display_field';
     config: {
         props: BasicTextFieldProps$1 & {
             dataCaptureName?: string;
@@ -2034,21 +2078,28 @@ interface BasicTextFieldMoleculeType extends BaseMoleculeType {
     };
     properties: {
         text: TextProperties;
-        dataCapture: DataCaptureProperties;
         placeholderText: TextProperties;
+        requiredErrorText: TextProperties;
+        validationErrorText: TextProperties;
+        required: BooleanProperties;
+        dataCapture: DataCaptureProperties;
     };
 }
 interface RatingMoleculeType extends BaseMoleculeType {
-    type: 'rating';
+    type: 'rating' | 'rating_display_field';
     config: {
         props: RatingMoleculeProps$1;
     };
     properties: {
         text: TextProperties;
+        requiredErrorText: TextProperties;
+        validationErrorText: TextProperties;
+        required: BooleanProperties;
+        dataCapture: DataCaptureProperties;
     };
 }
 interface SwitchMoleculeType extends BaseMoleculeType {
-    type: 'switch';
+    type: 'switch' | 'switch_display_field';
     config: {
         props: AlertMoleculeProps$1 & {
             dataCaptureName?: string;
@@ -2057,21 +2108,27 @@ interface SwitchMoleculeType extends BaseMoleculeType {
     properties: {
         text: TextProperties;
         subText: TextProperties;
+        requiredErrorText: TextProperties;
+        validationErrorText: TextProperties;
+        required: BooleanProperties;
         dataCapture: DataCaptureProperties;
     };
 }
 interface SliderMoleculeType extends BaseMoleculeType {
-    type: 'slider';
+    type: 'slider' | 'slider_display_field';
     config: {
         props: SliderMoleculeProps$1;
     };
     properties: {
         text: TextProperties;
+        requiredErrorText: TextProperties;
+        validationErrorText: TextProperties;
+        required: BooleanProperties;
         dataCapture: DataCaptureProperties;
     };
 }
 interface SelectMoleculeType extends BaseMoleculeType {
-    type: 'select';
+    type: 'select' | 'select_display_field';
     config: {
         props: SelectMoleculeProps$1 & {
             dataCaptureName?: string;
@@ -2079,11 +2136,14 @@ interface SelectMoleculeType extends BaseMoleculeType {
     };
     properties: {
         text: TextProperties;
+        requiredErrorText: TextProperties;
+        validationErrorText: TextProperties;
+        required: BooleanProperties;
         dataCapture: DataCaptureProperties;
     };
 }
 interface DatePickerMoleculeType extends BaseMoleculeType {
-    type: 'date_picker';
+    type: 'date_picker' | 'date_display_field';
     config: {
         props: DatePickerMoleculeProps$1 & {
             dataCaptureName?: string;
@@ -2091,11 +2151,14 @@ interface DatePickerMoleculeType extends BaseMoleculeType {
     };
     properties: {
         text: TextProperties;
+        requiredErrorText: TextProperties;
+        validationErrorText: TextProperties;
+        required: BooleanProperties;
         dataCapture: DataCaptureProperties;
     };
 }
 interface EmailInputFieldMoleculeType extends BaseMoleculeType {
-    type: 'email_input_field';
+    type: 'email_input_field' | 'email_display_field';
     config: {
         props: EmailInputFieldProps & {
             dataCaptureName?: string;
@@ -2104,11 +2167,14 @@ interface EmailInputFieldMoleculeType extends BaseMoleculeType {
     properties: {
         text: TextProperties;
         placeholderText: TextProperties;
+        requiredErrorText: TextProperties;
+        validationErrorText: TextProperties;
+        required: BooleanProperties;
         dataCapture: DataCaptureProperties;
     };
 }
 interface PhoneNumberInputFieldMoleculeType extends BaseMoleculeType {
-    type: 'phone_number_input_field';
+    type: 'phone_number_input_field' | 'phone_number_display_field';
     config: {
         props: PhoneNumberInputFieldProps & {
             dataCaptureName?: string;
@@ -2117,11 +2183,14 @@ interface PhoneNumberInputFieldMoleculeType extends BaseMoleculeType {
     properties: {
         text: TextProperties;
         placeholderText: TextProperties;
+        requiredErrorText: TextProperties;
+        validationErrorText: TextProperties;
+        required: BooleanProperties;
         dataCapture: DataCaptureProperties;
     };
 }
 interface NumericInputFieldMoleculeType extends BaseMoleculeType {
-    type: 'numeric_input_field';
+    type: 'numeric_input_field' | 'numeric_display_field';
     config: {
         props: NumericInputFieldProps & {
             dataCaptureName?: string;
@@ -2130,11 +2199,14 @@ interface NumericInputFieldMoleculeType extends BaseMoleculeType {
     properties: {
         text: TextProperties;
         placeholderText: TextProperties;
+        requiredErrorText: TextProperties;
+        validationErrorText: TextProperties;
+        required: BooleanProperties;
         dataCapture: DataCaptureProperties;
     };
 }
 interface CurrencyInputFieldMoleculeType extends BaseMoleculeType {
-    type: 'currency_input_field';
+    type: 'currency_input_field' | 'currency_display_field';
     config: {
         props: NumericInputFieldProps & {
             dataCaptureName?: string;
@@ -2143,19 +2215,13 @@ interface CurrencyInputFieldMoleculeType extends BaseMoleculeType {
     properties: {
         text: TextProperties;
         placeholderText: TextProperties;
+        requiredErrorText: TextProperties;
+        validationErrorText: TextProperties;
+        required: BooleanProperties;
         dataCapture: DataCaptureProperties;
     };
 }
-interface DisplayDataFieldMoleculeType extends BaseMoleculeType {
-    type: 'display_data_field';
-    config: {
-        props: Omit<DisplayDataFieldMoleculeProps, 'sourceDataModelField' | 'configurationItemInfo'>;
-    };
-    properties: {
-        dataCapture: DataCaptureProperties;
-    };
-}
-declare type Molecule = StrictUnion<SimpleTextMoleculeType | TextMoleculeType | ConsentFieldMoleculeType | PasswordSetupMoleculeType | StepperMoleculeType | ChecklistsMoleculeType | AccordionMoleculeType | MenuMoleculeType | TabsMoleculeType | DividerMoleculeType | LinkMoleculeType | VideoMoleculeType | ImageMoleculeType | ButtonMoleculeType | ChipMoleculeType | BadgeMoleculeType | AlertMoleculeType | BasicTextFieldMoleculeType | RatingMoleculeType | SwitchMoleculeType | SliderMoleculeType | SelectMoleculeType | DatePickerMoleculeType | EmailInputFieldMoleculeType | PhoneNumberInputFieldMoleculeType | NumericInputFieldMoleculeType | CurrencyInputFieldMoleculeType | DisplayDataFieldMoleculeType> & Partial<{
+declare type Molecule = StrictUnion<SimpleTextMoleculeType | TextMoleculeType | ConsentFieldMoleculeType | PasswordSetupMoleculeType | StepperMoleculeType | ChecklistsMoleculeType | AccordionMoleculeType | MenuMoleculeType | TabsMoleculeType | DividerMoleculeType | LinkMoleculeType | VideoMoleculeType | ImageMoleculeType | ButtonMoleculeType | ChipMoleculeType | BadgeMoleculeType | AlertMoleculeType | BasicTextFieldMoleculeType | RatingMoleculeType | SwitchMoleculeType | SliderMoleculeType | SelectMoleculeType | DatePickerMoleculeType | EmailInputFieldMoleculeType | PhoneNumberInputFieldMoleculeType | NumericInputFieldMoleculeType | CurrencyInputFieldMoleculeType> & Partial<{
     form: UseFormReturn<any>;
     formData: AnyObject$1;
     setFormData: Dispatch<SetStateAction<AnyObject$1>>;
@@ -2355,4 +2421,4 @@ declare type FormOrganismItemProps = {
 };
 declare const FormOrganismItem: ({ formData, setFormData, isMobile, ...props }: FormOrganismItemProps) => _emotion_react_jsx_runtime.JSX.Element | null;
 
-export { AccordionMoleculeType, AccountButtonContext, AccountButtonContextType, AccountButtonProvider, AccountButtonProviderProps, ActionEventType, ActionProperties, ActionType, ActionTypes, AdditionalContainerProps, AlertMolecule, AlertMoleculeProps, AlertMoleculeType, AnnotationsList, Avatar, AvatarProps, BackgroundImage, BadgeMolecule, BadgeMoleculeProps, BadgeMoleculeType, BaseMolecule, BaseMoleculeType, BaseStateValue, BaseTextButton, BasicTextField, BasicTextFieldMoleculeType, BasicTextFieldProps, BooleanProperties, BreakpointSizesTypes, Button, ButtonActionsContext, ButtonActionsContextType, ButtonActionsProvider, ButtonActionsProviderProps, ButtonMoleculeType, ButtonProps, COMMUNICATION_LINK_DATA_TEXT, COMMUNICATION_LINK_DATA_URL, COMMUNICATION_LINK_ELEMENT_ID, Checkbox, CheckboxProps, Checklist, ChecklistItem, ChecklistProperties, ChecklistProps, ChecklistsMoleculeType, ChipMolecule, ChipMoleculeProps, ChipMoleculeType, Circle, CircleBoxProps, CirclesWrapper, CircularIndicator, CircularIndicatorProps, CircularIndicatorStyledComponent, ColorProperties, ConditionConfig, ConditionConfigProperties, ConditionCriteria, ConfigurationItem, ConfigurationItemInfo, Consent, ConsentCaptureMethod, ConsentFieldMoleculeType, ConsentProps, ConsentStatus, ConsentType, Container, ContainerAlignItemsType, ContainerComponentProps, ContainerConfig, ContainerPositionType, ContainerProperties, ContainerProps, ContainerPropsType, ContainerScrollBehaviourType, ContainerTemplateType, ContainerType, ContainerWrapper, CountValidationTypes, CriteriaType, CurrencyInputFieldMoleculeType, CustomStep, CustomValidation, CustomValidationProps, CustomValidationRule, DataCaptureProperties, DataConnectionValues, DataModelFieldFormat, DataModelFieldFormatCodeTypes, DataModelFieldFormatValueTypes, DatePickerMolecule, DatePickerMoleculeProps, DatePickerMoleculeType, DefaultSelectionType, DisplayDataFieldMoleculeType, Divider, DividerMoleculeType, DividerProps, DownloadFile, Drawer, EmailInputFieldMoleculeType, ErrorText, FontSizesTypes, FontWeight, FormContainerProps, FormDataStateConfig, FormOrganismItem, FormStateType, FormStepContainerProps, HorizontalButtons, HorizontalButtonsProps, HorizontalPadding, Icon, IconButton, IconButtonProps, IconNames, IconProps, IconRenderer, IconRendererProps, IconWrapper, Image, ImageMoleculeType, ImageProperties, ImageProps, Input, InputFieldInternalConfigProps, InputIconProps, InputProps, Link, LinkMoleculeType, LinkProperties, LinkProps, LinkTypes, LinkVariant, MATRIX_MESSAGE_DATA_ID, MATRIX_MESSAGE_ELEMENT_ID, MaxRuleValidation, MenuMoleculeType, MetadataStateConfig, MetadataType, MinRuleValidation, MlrRichTextViewerContext, MlrRichTextViewerContextType, MlrRichTextViewerProvider, MlrRichTextViewerProviderProps, ModalWrapper, Molecule, MoleculeItemTypes, MoleculeTypes, NumericInputFieldMoleculeType, ObjectStateProperties, Organism, OrganismContext, OrganismContextProvider, OrganismContextProviderProps, OrganismContextType, OrganismItem, Padding, PaddingProps, PaddingVariants, PasswordFields, PasswordRuleValidation, PasswordSetup, PasswordSetupMoleculeType, PasswordSetupProps, PdfDocument, PdfDocumentProps, PhoneNumberInputFieldMoleculeType, PopupPropsType, RadioButtonInternalConfigProps, RadioButtons, RadioButtonsProps, RadioGroupWrapper, RatingMolecule, RatingMoleculeProps, RatingMoleculeType, RegularImage, RegularImageProps, RichTextEditorProps, RichTextViewer, SegmentationType, Select, SelectInternalConfigurationOptions, SelectMolecule, SelectMoleculeProps, SelectMoleculeType, SelectOption, SelectProps, SeoTags, SetPasswordRuleValidation, SimpleTextMoleculeType, SizesTypes, SliderMolecule, SliderMoleculeProps, SliderMoleculeType, SliderProps, Spacer, SpacerProps, Spinner, StateActionType, StateConfigType, StateContext, StateContextProvider, StateContextProviderProps, StateContextType, StateEventType, StateListenerConfigType, StateModifierConfigType, StateProperties, Stepper, StepperMoleculeType, StepperOrientation, StepperProps, StyleWrapper, SwitchMolecule, SwitchMoleculeProps, SwitchMoleculeType, TabsMoleculeType, TextAlign, TextButton, TextButtonProps, TextElementProps, TextMolecule, TextMoleculeType, TextProperties, TextProps, TextTypes, TextWrapper, TextWrapperProps, ThemeColors, ThemeColorsType, ThemeDevicesType, ThemeSizesType, ThemeTextType, Tooltip, TooltipProps, TouchableOpacity, TouchableOpacityProps, ValidationTag, ValidationTagProps, ValidationTagStatus, VerticalPadding, Video, VideoMoleculeType, VideoProperties, VideoProps, WrappedContainerType, ZealTheme, ZealThemeProvider, ZealUIModal, ZealUIModalProps, defaultTheme, defaultValue, passwordValidationMapper, toast, toastStyles, useButtonActionsContext, useMediaQuery, useMlrRichTextViewerContext };
+export { AccordionMoleculeType, AccountButtonContext, AccountButtonContextType, AccountButtonProvider, AccountButtonProviderProps, ActionEventType, ActionProperties, ActionType, ActionTypes, AdditionalContainerProps, AlertMolecule, AlertMoleculeProps, AlertMoleculeType, AnnotationsList, Avatar, AvatarProps, BackgroundImage, BadgeMolecule, BadgeMoleculeProps, BadgeMoleculeType, BaseMolecule, BaseMoleculeType, BaseStateValue, BaseTextButton, BasicTextField, BasicTextFieldMoleculeType, BasicTextFieldProps, BooleanProperties, BreakpointSizesTypes, Button, ButtonActionsContext, ButtonActionsContextType, ButtonActionsProvider, ButtonActionsProviderProps, ButtonMoleculeType, ButtonProps, COMMUNICATION_LINK_DATA_TEXT, COMMUNICATION_LINK_DATA_URL, COMMUNICATION_LINK_ELEMENT_ID, Checkbox, CheckboxProps, Checklist, ChecklistItem, ChecklistProperties, ChecklistProps, ChecklistsMoleculeType, ChipMolecule, ChipMoleculeProps, ChipMoleculeType, Circle, CircleBoxProps, CirclesWrapper, CircularIndicator, CircularIndicatorProps, CircularIndicatorStyledComponent, ColorProperties, ConditionConfig, ConditionConfigProperties, ConditionCriteria, ConfigurationItem, ConfigurationItemInfo, Consent, ConsentCaptureMethod, ConsentFieldMoleculeType, ConsentProps, ConsentStatus, ConsentType, Container, ContainerAlignItemsType, ContainerComponentProps, ContainerConfig, ContainerPositionType, ContainerProperties, ContainerProps, ContainerPropsType, ContainerScrollBehaviourType, ContainerTemplateType, ContainerType, ContainerWrapper, CountValidationTypes, CriteriaType, CurrencyInputFieldMoleculeType, CustomStep, CustomValidation, CustomValidationProps, CustomValidationRule, DataCaptureProperties, DataConnectionValues, DataModelFieldFormat, DataModelFieldFormatCodeTypes, DataModelFieldFormatValueTypes, DatePickerMolecule, DatePickerMoleculeProps, DatePickerMoleculeType, DefaultSelectionType, Divider, DividerMoleculeType, DividerProps, DownloadFile, Drawer, EmailInputFieldMoleculeType, ErrorText, FontSizesTypes, FontWeight, FormContainerProps, FormDataStateConfig, FormOrganismItem, FormStateType, FormStepContainerProps, HorizontalButtons, HorizontalButtonsProps, HorizontalPadding, Icon, IconButton, IconButtonProps, IconNames, IconProps, IconRenderer, IconRendererProps, IconWrapper, Image, ImageMoleculeType, ImageProperties, ImageProps, Input, InputFieldInternalConfigProps, InputIconProps, InputProps, Link, LinkMoleculeType, LinkProperties, LinkProps, LinkTypes, LinkVariant, MATRIX_MESSAGE_DATA_ID, MATRIX_MESSAGE_ELEMENT_ID, MaxRuleValidation, MenuMoleculeType, MetadataStateConfig, MetadataType, MinRuleValidation, MlrRichTextViewerContext, MlrRichTextViewerContextType, MlrRichTextViewerProvider, MlrRichTextViewerProviderProps, ModalWrapper, Molecule, MoleculeItemTypes, MoleculeTypes, NumericInputFieldMoleculeType, ObjectStateProperties, Organism, OrganismContext, OrganismContextProvider, OrganismContextProviderProps, OrganismContextType, OrganismItem, Padding, PaddingProps, PaddingVariants, PasswordFields, PasswordRuleValidation, PasswordSetup, PasswordSetupMoleculeType, PasswordSetupProps, PdfDocument, PdfDocumentProps, PhoneNumberInputFieldMoleculeType, PopupPropsType, RadioButtonInternalConfigProps, RadioButtons, RadioButtonsProps, RadioGroupWrapper, RatingMolecule, RatingMoleculeProps, RatingMoleculeType, RegularImage, RegularImageProps, RichTextEditorProps, RichTextViewer, SegmentationType, Select, SelectInternalConfigurationOptions, SelectMolecule, SelectMoleculeOption, SelectMoleculeProps, SelectMoleculeType, SelectOption, SelectProps, SeoTags, SetPasswordRuleValidation, SimpleTextMoleculeType, SizesTypes, SliderMolecule, SliderMoleculeProps, SliderMoleculeType, SliderProps, Spacer, SpacerProps, Spinner, StateActionType, StateConfigType, StateContext, StateContextProvider, StateContextProviderProps, StateContextType, StateEventType, StateListenerConfigType, StateModifierConfigType, StateProperties, Stepper, StepperMoleculeType, StepperOrientation, StepperProps, StyleWrapper, SwitchMolecule, SwitchMoleculeProps, SwitchMoleculeType, TabsMoleculeType, TextAlign, TextButton, TextButtonProps, TextElementProps, TextMolecule, TextMoleculeType, TextProperties, TextProps, TextTypes, TextWrapper, TextWrapperProps, ThemeColors, ThemeColorsType, ThemeDevicesType, ThemeSizesType, ThemeTextType, Tooltip, TooltipProps, TouchableOpacity, TouchableOpacityProps, ValidationTag, ValidationTagProps, ValidationTagStatus, VerticalPadding, Video, VideoMoleculeType, VideoProperties, VideoProps, WrappedContainerType, ZealTheme, ZealThemeProvider, ZealUIModal, ZealUIModalProps, defaultTheme, defaultValue, passwordValidationMapper, toast, toastStyles, useButtonActionsContext, useMediaQuery, useMlrRichTextViewerContext };

package/package.json

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

package/dist/cjs/molecules/DisplayDataFieldMolecule/DisplayDataFieldMolecule.d.ts

@@ -1,30 +0,0 @@
-import React from 'react';
-import { TypographyProps as MuiTypographyProps } from '@mui/material';
-import { ConfigurationItemInfo } from 'containers';
-/**
- * Props similar to SimpleText, plus sourceDataModelField for retrieving text from stateConfig
- */
-export interface DisplayDataFieldMoleculeProps extends MuiTypographyProps {
-    sourceDataModelField?: string;
-    /** If you want custom background color around the text */
-    backgroundColor?: string;
-    /** Text color */
-    textColor?: string;
-    /** Whether text should wrap. If falsy => MUI uses "noWrap" */
-    wrap?: boolean;
-    /** Additional margin/padding props */
-    marginTop?: string;
-    marginRight?: string;
-    marginBottom?: string;
-    marginLeft?: string;
-    paddingTop?: string;
-    paddingRight?: string;
-    paddingBottom?: string;
-    paddingLeft?: string;
-    /**
-     * If you want a custom ID or attach config style
-     */
-    htmlElementId?: string;
-    configurationsItemInfo?: ConfigurationItemInfo;
-}
-export declare const DisplayDataFieldMolecule: React.FC<DisplayDataFieldMoleculeProps>;

package/dist/cjs/molecules/DisplayDataFieldMolecule/DisplayDataFieldMolecule.stories.d.ts

@@ -1,7 +0,0 @@
-import { DisplayDataFieldMoleculeProps } from './DisplayDataFieldMolecule';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
-export default _default;
-declare type StoryProps = DisplayDataFieldMoleculeProps & {
-    sourceDataModelFieldValue?: string;
-};
-export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, StoryProps>;