@zealicsolutions/web-ui 1.0.133 → 1.0.135

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

@@ -0,0 +1,51 @@
+import type { SxProps, Theme } from '@mui/system';
+import { ConfigurationItemInfo } from 'containers';
+import React from 'react';
+export 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;
+    borderColor?: string;
+    color?: string;
+    fontSize?: number | string;
+    fontFamily?: string;
+    fontWeight?: 'normal' | 'bold' | number;
+    textAlign?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
+    /** Spacing */
+    marginLeft?: string;
+    marginTop?: string;
+    marginRight?: string;
+    marginBottom?: string;
+    paddingLeft?: string;
+    paddingTop?: string;
+    paddingRight?: string;
+    paddingBottom?: string;
+    width?: string;
+    height?: string;
+    minHeight?: string;
+    maxHeight?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    /** Material-UI sx prop for advanced styling */
+    sx?: SxProps<Theme>;
+    name: string;
+    sourceDataModelField?: string;
+    configurationItemInfo?: ConfigurationItemInfo;
+}
+/**
+ * Main EmailInputField:
+ * - display-only => <Typography />
+ * - editable => <TextField> (optionally masked)
+ */
+export declare const EmailInputField: React.FC<EmailInputFieldProps>;

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

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+import { BaseMolecule } from '../BaseMolecule';
+type Story = StoryObj<typeof BaseMolecule>;
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("../BaseMolecule").BaseMoleculeProps>;
+    parameters: {
+        layout: string;
+    };
+    decorators: ((Story: any) => import("@emotion/react/jsx-runtime").JSX.Element)[];
+};
+export default _default;
+export declare const EmailInputFieldExamples: Story;
+export declare const BasicEditableEmailField: Story;
+export declare const DisplayOnlyEmailField: Story;
+export declare const MaskedEmailInput: Story;
+export declare const MultilineEmailField: Story;
+export declare const CompactEmailField: Story;
+export declare const ProfessionalBusinessEmailField: Story;

package/dist/cjs/molecules/EmailInputField/EmailTextMask.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface EmailTextMaskProps {
+    inputRef: (ref: HTMLInputElement | null) => void;
+}
+export declare const EmailTextMask: React.ForwardRefExoticComponent<EmailTextMaskProps & React.RefAttributes<HTMLElement>>;
+export {};

package/dist/cjs/molecules/Icon/IconRenderer.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export type IconRendererProps = {
+    iconName?: string;
+    size?: number | string;
+    color?: string;
+    borderRadius?: number | string;
+    backgroundColor?: string;
+} & React.SVGProps<SVGSVGElement>;
+export declare const IconRenderer: React.ForwardRefExoticComponent<Pick<IconRendererProps, "string" | "backgroundColor" | "clipPath" | "color" | "cursor" | "direction" | "display" | "filter" | "fontFamily" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "height" | "imageRendering" | "letterSpacing" | "opacity" | "order" | "paintOrder" | "pointerEvents" | "rotate" | "scale" | "textRendering" | "transform" | "unicodeBidi" | "visibility" | "width" | "wordSpacing" | "writingMode" | "borderRadius" | "mask" | "offset" | "overflow" | "textDecoration" | "azimuth" | "clip" | "alignmentBaseline" | "baselineShift" | "clipRule" | "colorInterpolation" | "colorRendering" | "dominantBaseline" | "fill" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "glyphOrientationVertical" | "lightingColor" | "markerEnd" | "markerMid" | "markerStart" | "shapeRendering" | "stopColor" | "stopOpacity" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "vectorEffect" | "spacing" | "mode" | "values" | "className" | "style" | "children" | "elevation" | "path" | "key" | "id" | "lang" | "tabIndex" | "role" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "max" | "in" | "name" | "type" | "href" | "size" | "orientation" | "media" | "target" | "min" | "viewBox" | "method" | "crossOrigin" | "accentHeight" | "accumulate" | "additive" | "allowReorder" | "alphabetic" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "baseFrequency" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clipPathUnits" | "colorInterpolationFilters" | "colorProfile" | "contentScriptType" | "contentStyleType" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "divisor" | "dur" | "dx" | "dy" | "edgeMode" | "enableBackground" | "end" | "exponent" | "externalResourcesRequired" | "filterRes" | "filterUnits" | "focusable" | "format" | "fr" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphRef" | "gradientTransform" | "gradientUnits" | "hanging" | "horizAdvX" | "horizOriginX" | "ideographic" | "in2" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "limitingConeAngle" | "local" | "markerHeight" | "markerUnits" | "markerWidth" | "maskContentUnits" | "maskUnits" | "mathematical" | "numOctaves" | "operator" | "orient" | "origin" | "overlinePosition" | "overlineThickness" | "panose1" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rx" | "ry" | "seed" | "slope" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "strikethroughPosition" | "strikethroughThickness" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textLength" | "to" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicode" | "unicodeRange" | "unitsPerEm" | "vAlphabetic" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewTarget" | "vMathematical" | "widths" | "x1" | "x2" | "x" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "y" | "yChannelSelector" | "z" | "zoomAndPan" | "iconName"> & React.RefAttributes<SVGSVGElement>>;

package/dist/cjs/molecules/Icon/index.d.ts

@@ -0,0 +1 @@
+export * from './IconRenderer';

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

@@ -0,0 +1,37 @@
+import { SxProps, Theme } from '@mui/material/styles';
+import { ConfigurationItemInfo, MetadataType } from 'containers';
+import { FC } from 'react';
+export interface ImageProps {
+    src?: string;
+    alt?: string;
+    height?: number | string;
+    width?: number | string;
+    minHeight?: string;
+    maxHeight?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    autoSize?: boolean;
+    rounded?: boolean;
+    raised?: boolean;
+    margin?: string;
+    padding?: string;
+    moleculeId?: string;
+    configurationItemInfo?: ConfigurationItemInfo;
+    metadata?: MetadataType;
+    onClick?: () => void;
+    marginTop?: string;
+    marginRight?: string;
+    marginBottom?: string;
+    marginLeft?: string;
+    paddingTop?: string;
+    paddingRight?: string;
+    paddingBottom?: string;
+    paddingLeft?: string;
+    borderRadius?: string | number;
+    sx?: SxProps<Theme>;
+}
+export declare const Image: FC<ImageProps & {
+    properties?: {
+        image?: any;
+    };
+}>;

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

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+import { BaseMolecule } from '../BaseMolecule';
+type Story = StoryObj<typeof BaseMolecule>;
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("../BaseMolecule").BaseMoleculeProps>;
+    parameters: {
+        layout: string;
+    };
+    decorators: ((Story: any) => import("@emotion/react/jsx-runtime").JSX.Element)[];
+};
+export default _default;
+export declare const ImageExamples: Story;
+export declare const BasicImage: Story;
+export declare const RoundedElevatedImage: Story;
+export declare const ClickableLinkImage: Story;
+export declare const ResponsiveAutoImage: Story;
+export declare const StyledRichImage: Story;

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

@@ -0,0 +1,35 @@
+import { SxProps, Theme, TypographyProps } from '@mui/material';
+import { ConfigurationItemInfo, LinkProperties, MetadataType } from 'containers';
+import { FC } from 'react';
+export type LinkTypes = 'internalLink' | 'internal_link' | 'externalLink' | 'external_link';
+export interface LinkProps {
+    src?: string | undefined;
+    text: string;
+    type?: LinkTypes;
+    link?: LinkProperties;
+    color?: string;
+    disabled?: boolean;
+    disabledColor?: string;
+    underline?: 'none' | 'always' | 'hover';
+    variant?: TypographyProps['variant'];
+    margin?: string;
+    padding?: string;
+    moleculeId?: string;
+    configurationItemInfo?: ConfigurationItemInfo;
+    metadata?: MetadataType;
+    marginTop?: string;
+    marginRight?: string;
+    marginBottom?: string;
+    marginLeft?: string;
+    paddingTop?: string;
+    paddingRight?: string;
+    paddingBottom?: string;
+    paddingLeft?: string;
+    fontFamily?: string;
+    fontWeight?: string;
+    fontSize?: string;
+    align?: TypographyProps['align'];
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    sx?: SxProps<Theme>;
+}
+export declare const Link: FC<LinkProps>;

package/dist/cjs/molecules/Link/NewLink.stories.d.ts

@@ -0,0 +1,10 @@
+import type { StoryObj } from '@storybook/react';
+import { BaseMolecule } from '../BaseMolecule';
+type Story = StoryObj<typeof BaseMolecule>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const LinkExamples: Story;
+export declare const ExternalLinkPrimary: Story;
+export declare const InternalLinkSecondary: Story;
+export declare const DisabledLink: Story;
+export declare const CallToActionLink: Story;

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

@@ -0,0 +1,87 @@
+import { SxProps, Theme } from '@mui/material';
+import { ConfigurationItemInfo, LinkProperties } from 'containers';
+import { FC } from 'react';
+/**
+ * Each item now has minimal properties, with styling controlled at molecule level
+ */
+export type MenuItemType = {
+    id: string;
+    text: string;
+    link?: LinkProperties;
+    disabled?: boolean;
+    startIcon?: string;
+    endIcon?: string;
+    textColor?: string;
+    fontSize?: string;
+    fontWeight?: 'normal' | 'bold';
+    fontFamily?: string;
+    textAlign?: 'left' | 'center' | 'right' | 'justify';
+    wrap?: boolean;
+    backgroundColor?: string;
+    paddingTop?: string;
+    paddingRight?: string;
+    paddingBottom?: string;
+    paddingLeft?: string;
+};
+/** Props for our Menu molecule */
+export interface MenuProps {
+    popover?: boolean;
+    items: MenuItemType[];
+    sx?: SxProps<Theme>;
+    marginTop?: string;
+    marginRight?: string;
+    marginBottom?: string;
+    marginLeft?: string;
+    paddingTop?: string;
+    paddingRight?: string;
+    paddingBottom?: string;
+    paddingLeft?: string;
+    cornerRadius?: string | number;
+    backgroundColor?: string;
+    width?: string;
+    height?: string;
+    shadow?: boolean;
+    borderColor?: string;
+    borderWeight?: string;
+    buttonText?: string;
+    buttonVariant?: 'contained' | 'outlined' | 'text';
+    buttonTextColor?: string;
+    buttonFontSize?: number | string;
+    buttonFontWeight?: 'normal' | 'bold';
+    buttonFontFamily?: string;
+    buttonDisabled?: boolean;
+    buttonGap?: number | string;
+    buttonStartIcon?: string;
+    buttonEndIcon?: string;
+    buttonCornerRadius?: string | number;
+    buttonMarginTop?: string;
+    buttonMarginRight?: string;
+    buttonMarginBottom?: string;
+    buttonMarginLeft?: string;
+    buttonPaddingTop?: string;
+    buttonPaddingRight?: string;
+    buttonPaddingBottom?: string;
+    buttonPaddingLeft?: string;
+    buttonIconOnly?: boolean;
+    buttonElevation?: number;
+    buttonFillColor?: string;
+    buttonFillColorDisabled?: string;
+    buttonFillColorHover?: string;
+    buttonFillColorPressed?: string;
+    buttonBorderColor?: string;
+    buttonBorderColorDisabled?: string;
+    buttonBorderColorHover?: string;
+    buttonBorderColorPressed?: string;
+    buttonTextColorDisabled?: string;
+    buttonTextColorHover?: string;
+    buttonTextColorPressed?: string;
+    buttonColor?: string;
+    anchorOriginVertical?: 'top' | 'center' | 'bottom';
+    anchorOriginHorizontal?: 'left' | 'center' | 'right';
+    transformOriginVertical?: 'top' | 'center' | 'bottom';
+    transformOriginHorizontal?: 'left' | 'center' | 'right';
+    elevation?: number;
+    moleculeId?: string;
+    configurationItemInfo?: ConfigurationItemInfo;
+}
+export declare const Menu: FC<MenuProps>;

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

@@ -0,0 +1,11 @@
+import type { StoryObj } from '@storybook/react';
+import { BaseMolecule } from '../BaseMolecule';
+type Story = StoryObj<typeof BaseMolecule>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const MenuExamples: Story;
+export declare const BasicPopover: Story;
+export declare const AdvancedPopover: Story;
+export declare const StaticMenuList: Story;
+export declare const CompactMenuIcons: Story;
+export declare const MenuWithLinks: Story;

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

@@ -0,0 +1,52 @@
+import type { SxProps, Theme } from '@mui/system';
+import { ConfigurationItemInfo } from 'containers';
+import React from 'react';
+export 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;
+    borderColor?: string;
+    textColor?: string;
+    fontSize?: number | string;
+    fontFamily?: 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;
+    marginBottom?: string;
+    paddingLeft?: string;
+    paddingTop?: string;
+    paddingRight?: string;
+    paddingBottom?: string;
+    width?: string;
+    height?: string;
+    configurationItemInfo?: ConfigurationItemInfo;
+    textAlign?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
+    minHeight?: string;
+    maxHeight?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    /** sx object for advanced styling */
+    sx?: SxProps<Theme>;
+}
+/**
+ * Main NumericInputField component
+ *
+ * - Display-only -> <Typography>
+ * - Editable -> <TextField> (react-hook-form or local state)
+ */
+export declare const NumericInputField: React.FC<NumericInputFieldProps>;

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

@@ -0,0 +1,10 @@
+import type { StoryObj } from '@storybook/react';
+import { BaseMolecule } from '../BaseMolecule';
+type Story = StoryObj<typeof BaseMolecule>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const NumericInputFieldExamples: Story;
+export declare const StandardNumericInput: Story;
+export declare const CurrencyInput: Story;
+export declare const PercentageInput: Story;
+export declare const NumericDisplay: Story;

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

@@ -0,0 +1,25 @@
+import { BoxProps } from '@mui/material';
+import { ConfigurationItemInfo, FormStateType, PasswordSetupMoleculeType } from 'containers';
+import { BasicTextFieldProps } from 'molecules';
+import { PasswordRuleValidation } from './types';
+export { PasswordRuleValidation };
+export type PasswordSetupProps = BoxProps & {
+    gap: string;
+    inputProps: Omit<BasicTextFieldProps, 'name'>;
+    validations: PasswordRuleValidation[];
+    htmlElementId: string;
+    validationState: FormStateType;
+    overridesProperties: PasswordSetupMoleculeType['properties'];
+    configurationItemInfo: ConfigurationItemInfo;
+    width?: string;
+    height?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    minHeight?: string;
+    maxHeight?: string;
+    marginLeft?: string;
+    marginTop?: string;
+    marginRight?: string;
+    marginBottom?: string;
+};
+export declare const PasswordSetup: ({ gap, inputProps, validations, htmlElementId, validationState, overridesProperties, configurationItemInfo, width, height, minWidth, maxWidth, minHeight, maxHeight, marginLeft, marginTop, marginRight, marginBottom, sx, ...rest }: PasswordSetupProps) => import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,11 @@
+import type { StoryObj } from '@storybook/react';
+import { BaseMolecule } from '../BaseMolecule';
+type Story = StoryObj<typeof BaseMolecule>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const PasswordSetupExamples: Story;
+export declare const StandardSignupForm: Story;
+export declare const CorporateProfessional: Story;
+export declare const MinimalistClean: Story;
+export declare const DarkThemeProfessional: Story;
+export declare const CompactMobile: Story;

package/dist/cjs/molecules/PasswordSetup/types.d.ts

@@ -0,0 +1,25 @@
+export type SetPasswordRuleValidation = {
+    label: string;
+    rule: MaxRuleValidation | MinRuleValidation;
+};
+export type CountValidationTypes = 'COUNT' | 'CAPITAL_COUNT' | 'NUMBER_COUNT' | 'SPECIAL_CHARACTERS_COUNT' | 'LOWER_CASE_COUNT';
+export type MaxRuleValidation = {
+    MAX: number;
+    type: CountValidationTypes;
+};
+export type MinRuleValidation = {
+    MIN: number;
+    type: CountValidationTypes;
+};
+export type PasswordRuleValidation = {
+    label: string;
+    rule: MaxRuleValidation | MinRuleValidation;
+};
+export type PasswordFields = {
+    password: {
+        value: string;
+    };
+    reenteredPassword?: {
+        value?: string;
+    };
+};

package/dist/cjs/molecules/PasswordSetup/utils.d.ts

@@ -0,0 +1,2 @@
+import { SetPasswordRuleValidation } from './types';
+export declare const passwordValidationMapper: (validation: SetPasswordRuleValidation) => CustomValidationRule;

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

@@ -0,0 +1,100 @@
+import type { SxProps, Theme } from '@mui/system';
+import { ConfigurationItemInfo } from 'containers';
+import React from 'react';
+export 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;
+    multiLine?: boolean;
+    /** Basic style props */
+    backgroundColor?: string;
+    borderColor?: string;
+    textColor?: string;
+    fontSize?: number | string;
+    fontFamily?: string;
+    fontWeight?: 'normal' | 'bold';
+    textAlign?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
+    /** Spacing */
+    marginLeft?: string;
+    marginTop?: string;
+    marginRight?: string;
+    marginBottom?: string;
+    paddingLeft?: string;
+    paddingTop?: string;
+    paddingRight?: string;
+    paddingBottom?: string;
+    width?: string;
+    height?: string;
+    minHeight?: string;
+    maxHeight?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    name: string;
+    sourceDataModelField?: string;
+    configurationItemInfo?: ConfigurationItemInfo;
+    /** sx prop for advanced styling */
+    sx?: SxProps<Theme>;
+}
+/**
+ * formatPhoneDisplay(value):
+ * Takes a raw string (possibly containing digits and non-digits)
+ * and returns a string shaped like + (XXX) XXX-XXXX,
+ * filling placeholders sequentially from `phoneNumberMask`.
+ *
+ * If there are fewer than 10 digits, it will show partial underscores
+ * for missing digits by default.
+ * You can tweak the code if you prefer to truncate or show partial input.
+ */
+export declare function formatPhoneDisplay(value?: string | null): string;
+export 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;
+    multiLine?: boolean;
+    /** Basic style props */
+    backgroundColor?: string;
+    borderColor?: string;
+    textColor?: string;
+    fontSize?: number | string;
+    fontFamily?: string;
+    fontWeight?: 'normal' | 'bold';
+    textAlign?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
+    /** Spacing */
+    marginLeft?: string;
+    marginTop?: string;
+    marginRight?: string;
+    marginBottom?: string;
+    paddingLeft?: string;
+    paddingTop?: string;
+    paddingRight?: string;
+    paddingBottom?: string;
+    width?: string;
+    height?: string;
+    minHeight?: string;
+    maxHeight?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    name: string;
+    sourceDataModelField?: string;
+    configurationItemInfo?: ConfigurationItemInfo;
+    /** sx prop for advanced styling */
+    sx?: SxProps<Theme>;
+}
+/**
+ * Main PhoneNumberInputField:
+ *  - display-only -> <Typography>
+ *  - editable -> <TextField> with optional mask
+ */
+export declare const PhoneNumberInputField: React.FC<PhoneNumberInputFieldProps>;

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

@@ -0,0 +1,14 @@
+import type { StoryObj } from '@storybook/react';
+import { BaseMolecule } from '../BaseMolecule';
+type Story = StoryObj<typeof BaseMolecule>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const PhoneNumberExamples: Story;
+export declare const StandardPhoneInput: Story;
+export declare const DisplayOnlyPhone: Story;
+export declare const CompactStyledPhone: Story;
+export declare const BusinessContactForm: Story;
+export declare const EmergencyContactPhone: Story;
+export declare const UnmaskedPhoneInput: Story;
+export declare const MobileOptimizedPhone: Story;
+export declare const DarkThemePhone: Story;

package/dist/cjs/molecules/PhoneNumberInputField/PhoneTextMask.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface PhoneTextMaskProps {
+    inputRef: (ref: HTMLInputElement | null) => void;
+}
+export declare const PhoneTextMask: React.ForwardRefExoticComponent<PhoneTextMaskProps & React.RefAttributes<HTMLElement>>;
+export {};

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

@@ -0,0 +1,40 @@
+import { RatingProps } from '@mui/material';
+import React from 'react';
+export interface RatingMoleculeProps extends RatingProps {
+    text: string;
+    name: string;
+    isDisplayOnly?: boolean;
+    required?: boolean;
+    requiredErrorText?: string;
+    validationErrorText?: string;
+    placeholderText?: string;
+    hoverFeedback?: boolean;
+    sourceDataModelField?: string;
+    textAlign?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
+    color?: string;
+    textColor?: string;
+    selectColor?: string;
+    fontSize?: number | string;
+    fontFamily?: string;
+    fontWeight?: 'normal' | 'bold' | number;
+    marginLeft?: string;
+    marginTop?: string;
+    marginRight?: string;
+    marginBottom?: string;
+    paddingLeft?: string;
+    paddingTop?: string;
+    paddingRight?: string;
+    paddingBottom?: string;
+    width?: string;
+    height?: string;
+    minHeight?: string;
+    maxHeight?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    placement?: 'right' | 'left';
+    configurationItemInfo?: Record<string, unknown>;
+    disabled?: boolean;
+    maxValue?: number;
+    ratingPrecision?: number;
+}
+export declare const RatingMolecule: React.FC<RatingMoleculeProps>;

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

@@ -0,0 +1,13 @@
+import type { StoryObj } from '@storybook/react';
+import { BaseMolecule } from '../BaseMolecule';
+type Story = StoryObj<typeof BaseMolecule>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const RatingExamples: Story;
+export declare const Standard: Story;
+export declare const DisplayOnly: Story;
+export declare const Compact: Story;
+export declare const Large: Story;
+export declare const Disabled: Story;
+export declare const CustomColored: Story;
+export declare const Minimal: Story;

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

@@ -0,0 +1,14 @@
+import type { StoryObj } from '@storybook/react';
+import { BaseMolecule } from '../BaseMolecule';
+type Story = StoryObj<typeof BaseMolecule>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const RichTextExamples: Story;
+export declare const SimpleTextDisplay: Story;
+export declare const BasicRichText: Story;
+export declare const TextWithVariables: Story;
+export declare const StyledVariablesDisplay: Story;
+export declare const VariablesWithoutState: Story;
+export declare const SiteNameWithVariable: Story;
+export declare const SiteNameVariableWithoutState: Story;
+export declare const PulseAdminVariables: Story;