@form-eng/mui 1.0.0

package/dist/index.js

@@ -0,0 +1,1036 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  DateControl: () => DateControl_default,
+  DocumentLinks: () => DocumentLinks_default,
+  DocumentLinksStrings: () => DocumentLinksStrings,
+  Dropdown: () => Dropdown_default,
+  DynamicFragment: () => DynamicFragment_default,
+  FieldClassName: () => FieldClassName,
+  FormLoading: () => FormLoading,
+  GetFieldDataTestId: () => GetFieldDataTestId,
+  MultiSelect: () => MultiSelect_default,
+  MultiSelectSearch: () => MultiSelectSearch_default,
+  Number: () => Number_default,
+  PopOutEditor: () => PopOutEditor_default,
+  ReadOnly: () => ReadOnly_default,
+  ReadOnlyArray: () => ReadOnlyArray_default,
+  ReadOnlyCumulativeNumber: () => ReadOnlyCumulativeNumber_default,
+  ReadOnlyDateTime: () => ReadOnlyDateTime_default,
+  ReadOnlyRichText: () => ReadOnlyRichText_default,
+  ReadOnlyText: () => ReadOnlyText,
+  ReadOnlyWithButton: () => ReadOnlyWithButton_default,
+  SimpleDropdown: () => SimpleDropdown_default,
+  Slider: () => Slider_default,
+  StatusDropdown: () => StatusDropdown_default,
+  StatusMessage: () => StatusMessage,
+  Textbox: () => Textbox_default,
+  Toggle: () => Toggle_default,
+  createMuiFieldRegistry: () => createMuiFieldRegistry,
+  formatDateTime: () => formatDateTime
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/fields/Textbox.tsx
+var import_material2 = require("@mui/material");
+
+// src/components/ReadOnlyText.tsx
+var import_material = require("@mui/material");
+var import_jsx_runtime = require("react/jsx-runtime");
+var ReadOnlyText = (props) => {
+  const { value, fieldName, valueClassName, showControlOnSide, containerClassName, ellipsifyTextCharacters } = props;
+  const classNameValue = valueClassName === void 0 ? "read-only-field" : valueClassName;
+  const cutoff = (ellipsifyTextCharacters || 0) - 3;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${showControlOnSide ? "flexBox" : ""} ${containerClassName ?? ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_material.Typography,
+    {
+      variant: "body2",
+      id: `${fieldName}-read-only`,
+      className: classNameValue,
+      title: value,
+      component: "span",
+      children: value ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: ellipsifyTextCharacters && value.length > ellipsifyTextCharacters ? `${value.substring(0, cutoff)}...` : value }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: "-" })
+    }
+  ) });
+};
+
+// src/helpers.ts
+var FieldClassName = (className, error) => {
+  return error ? `${className} error` : className;
+};
+var GetFieldDataTestId = (fieldName, programName, entityType, entityId) => {
+  return `${programName}-${entityType}-${entityId}-${fieldName}`;
+};
+function formatDateTime(dateStr, options) {
+  if (!dateStr) return "";
+  const date = new Date(dateStr);
+  if (isNaN(date.getTime())) return dateStr;
+  if (options?.hideTimestamp) {
+    return date.toLocaleDateString(void 0, { year: "numeric", month: "short", day: "numeric" });
+  }
+  return date.toLocaleString(void 0, { year: "numeric", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
+}
+var DocumentLinksStrings = {
+  link: "Link",
+  addLink: "Add Link",
+  addAnotherLink: "Add Another Link",
+  deleteLink: "Delete Link",
+  confirmDeleteLink: "Are you sure you want to delete",
+  delete: "Delete",
+  cancel: "Cancel",
+  saveChanges: "Save Changes",
+  save: "Save"
+};
+
+// src/fields/Textbox.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Textbox = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, config, error, required, placeholder, setFieldValue } = props;
+  const onChange = (event) => {
+    setFieldValue(fieldName, event.target.value, false, 3e3);
+  };
+  return readOnly ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    ReadOnlyText,
+    {
+      fieldName,
+      value,
+      ellipsifyTextCharacters: config?.ellipsifyTextCharacters
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_material2.TextField,
+    {
+      className: FieldClassName("hook-textbox", error),
+      autoComplete: "off",
+      value: value ?? "",
+      onChange,
+      size: "small",
+      fullWidth: true,
+      error: !!error,
+      required,
+      placeholder: placeholder ?? config?.placeHolder,
+      helperText: error?.message,
+      inputProps: {
+        "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId)
+      }
+    }
+  );
+};
+var Textbox_default = Textbox;
+
+// src/fields/Number.tsx
+var import_core = require("@form-eng/core");
+var import_material3 = require("@mui/material");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var NumberField = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, config, error, required, setFieldValue } = props;
+  const onChange = (event) => {
+    const number = Number(event.target.value);
+    if (!isNaN(number)) {
+      setFieldValue(fieldName, number, false, 1500);
+    }
+  };
+  return readOnly ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ReadOnlyText, { fieldName, value: String(value) }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_material3.TextField,
+    {
+      className: FieldClassName("hook-number", error),
+      autoComplete: "off",
+      type: "number",
+      value: !(0, import_core.isNull)(value) ? String(value) : "",
+      onChange,
+      size: "small",
+      fullWidth: true,
+      error: !!error,
+      required,
+      helperText: error?.message,
+      inputProps: {
+        "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId)
+      }
+    }
+  );
+};
+var Number_default = NumberField;
+
+// src/fields/Toggle.tsx
+var import_core2 = require("@form-eng/core");
+var import_material4 = require("@mui/material");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Toggle = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, setFieldValue } = props;
+  const onChange = (_, checked) => {
+    setFieldValue(fieldName, checked);
+  };
+  return readOnly ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ReadOnlyText, { fieldName, value: (0, import_core2.convertBooleanToYesOrNoText)(value) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_material4.FormControlLabel,
+    {
+      className: "hook-toggle",
+      control: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        import_material4.Switch,
+        {
+          checked: value,
+          onChange,
+          "aria-invalid": !!error,
+          "aria-required": required,
+          "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId)
+        }
+      ),
+      label: ""
+    }
+  );
+};
+var Toggle_default = Toggle;
+
+// src/fields/Dropdown.tsx
+var import_material5 = require("@mui/material");
+var import_react = __toESM(require("react"));
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Dropdown = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, config, error, required, placeholder, options, setFieldValue } = props;
+  const onChange = (event) => {
+    setFieldValue(fieldName, event.target.value);
+  };
+  import_react.default.useEffect(() => {
+    if (!value && !readOnly && config?.setDefaultKeyIfOnlyOneOption && options?.length === 1) {
+      setFieldValue(fieldName, String(options[0].value));
+    }
+  }, [options]);
+  return readOnly ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ReadOnlyText, { fieldName, value }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material5.FormControl, { fullWidth: true, size: "small", error: !!error, required, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    import_material5.Select,
+    {
+      className: FieldClassName("hook-dropdown", error),
+      value: value ? String(value) : "",
+      onChange,
+      displayEmpty: true,
+      "aria-required": required,
+      "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId),
+      children: [
+        !value && (placeholder ?? config?.placeHolder) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material5.MenuItem, { value: "", disabled: true, children: placeholder ?? config?.placeHolder }),
+        options?.map((option) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material5.MenuItem, { value: String(option.value), disabled: option.disabled, children: option.label }, String(option.value)))
+      ]
+    }
+  ) });
+};
+var Dropdown_default = Dropdown;
+
+// src/fields/MultiSelect.tsx
+var import_material6 = require("@mui/material");
+var import_react_hook_form = require("react-hook-form");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var MultiSelect = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, options, setFieldValue } = props;
+  const { watch } = (0, import_react_hook_form.useFormContext)();
+  const selectedOptions = watch(`${fieldName}`) ?? [];
+  const onChange = (event) => {
+    const newValue = event.target.value;
+    setFieldValue(fieldName, typeof newValue === "string" ? newValue.split(",") : newValue, false, 1500);
+  };
+  return readOnly ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: value && value.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material6.Box, { className: "hook-multi-select-read-only", sx: { display: "flex", flexWrap: "wrap", gap: 0.5 }, children: value.map((v) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material6.Chip, { label: v, size: "small" }, v)) }) : null }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material6.FormControl, { fullWidth: true, size: "small", error: !!error, required, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_material6.Select,
+    {
+      className: FieldClassName("hook-multi-select", error),
+      multiple: true,
+      value: selectedOptions,
+      onChange,
+      "aria-invalid": !!error,
+      "aria-required": required,
+      renderValue: (selected) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material6.Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5 }, children: selected.map((val) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material6.Chip, { label: val, size: "small" }, val)) }),
+      "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId),
+      children: options?.map((option) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material6.MenuItem, { value: String(option.value), disabled: option.disabled, children: option.label }, String(option.value)))
+    }
+  ) });
+};
+var MultiSelect_default = MultiSelect;
+
+// src/fields/DateControl.tsx
+var import_core3 = require("@form-eng/core");
+var import_material7 = require("@mui/material");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var DateControl = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, setFieldValue } = props;
+  const onChange = (event) => {
+    const date = new Date(event.target.value);
+    if (!isNaN(date.getTime())) {
+      setFieldValue(fieldName, date.toISOString());
+    }
+  };
+  const onClearDate = () => {
+    setFieldValue(fieldName, null);
+  };
+  const dateInputValue = value ? new Date(value).toISOString().split("T")[0] : "";
+  return readOnly ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: value ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hook-read-only-date", children: formatDateTime(value, { hideTimestamp: true }) }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: "-" }) }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hook-date-control-container", style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_material7.TextField,
+      {
+        className: FieldClassName("hook-date-control", error),
+        type: "date",
+        value: dateInputValue,
+        onChange,
+        size: "small",
+        fullWidth: true,
+        error: !!error,
+        required,
+        helperText: error?.message,
+        InputLabelProps: { shrink: true },
+        inputProps: {
+          "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId)
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_material7.IconButton,
+      {
+        size: "small",
+        onClick: onClearDate,
+        title: import_core3.FormStrings.clickToClear,
+        "aria-label": `${fieldName} ${import_core3.FormStrings.clear}`,
+        children: "\u2715"
+      }
+    )
+  ] });
+};
+var DateControl_default = DateControl;
+
+// src/fields/Slider.tsx
+var import_material8 = require("@mui/material");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Slider = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, config, error, required, setFieldValue } = props;
+  const onChange = (_, newValue) => {
+    setFieldValue(fieldName, newValue);
+  };
+  return readOnly ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ReadOnlyText, { fieldName, value: String(value) }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_material8.Slider,
+    {
+      className: FieldClassName("hook-slider", error),
+      value: value ?? 0,
+      onChange,
+      max: config?.max,
+      min: config?.min,
+      step: config?.step,
+      valueLabelDisplay: "auto",
+      "aria-invalid": !!error,
+      "aria-required": required,
+      "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId)
+    }
+  );
+};
+var Slider_default = Slider;
+
+// src/fields/DynamicFragment.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var DynamicFragment = (props) => {
+  const { value } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("input", { type: "hidden", value });
+};
+var DynamicFragment_default = DynamicFragment;
+
+// src/fields/SimpleDropdown.tsx
+var import_material9 = require("@mui/material");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var SimpleDropdown = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, config, error, required, placeholder, setFieldValue } = props;
+  const simpleOptions = config?.dropdownOptions ?? [];
+  const onChange = (event) => {
+    setFieldValue(fieldName, event.target.value);
+  };
+  return readOnly ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ReadOnlyText, { fieldName, value }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_material9.FormControl, { fullWidth: true, size: "small", error: !!error, required, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    import_material9.Select,
+    {
+      className: FieldClassName("hook-dropdown", error),
+      value: value ?? "",
+      onChange,
+      displayEmpty: true,
+      "aria-required": required,
+      "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId),
+      children: [
+        !value && (placeholder ?? config?.placeHolder) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_material9.MenuItem, { value: "", disabled: true, children: placeholder ?? config?.placeHolder }),
+        simpleOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_material9.MenuItem, { value: option, children: option }, option))
+      ]
+    }
+  ) });
+};
+var SimpleDropdown_default = SimpleDropdown;
+
+// src/fields/MultiSelectSearch.tsx
+var import_material10 = require("@mui/material");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_react2 = require("react");
+var MultiSelectSearch = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, options: dropdownOptions, setFieldValue } = props;
+  const selectedValues = value ?? [];
+  const mappedOptions = dropdownOptions?.map((o) => ({
+    value: String(o.value),
+    label: o.label,
+    disabled: !!o.disabled
+  })) ?? [];
+  const onChange = (_, newValue) => {
+    setFieldValue(fieldName, newValue.map((v) => v.value), false, 3e3);
+  };
+  return readOnly ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: value && value.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material10.Box, { className: "hook-multi-select-search-read-only", sx: { display: "flex", flexWrap: "wrap", gap: 0.5 }, children: value.map((v) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material10.Chip, { label: v, size: "small" }, v)) }) : null }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    import_material10.Autocomplete,
+    {
+      className: FieldClassName("hook-multi-select-search", error),
+      multiple: true,
+      freeSolo: true,
+      "aria-required": required,
+      options: mappedOptions,
+      getOptionLabel: (option) => typeof option === "string" ? option : option.label,
+      getOptionDisabled: (option) => typeof option === "string" ? false : !!option.disabled,
+      value: mappedOptions.filter((o) => selectedValues.includes(o.value)),
+      onChange,
+      renderTags: (tagValue, getTagProps) => tagValue.map((option, index) => /* @__PURE__ */ (0, import_react2.createElement)(
+        import_material10.Chip,
+        {
+          size: "small",
+          label: typeof option === "string" ? option : option.label,
+          ...getTagProps({ index }),
+          key: typeof option === "string" ? option : option.value
+        }
+      )),
+      renderInput: (params) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        import_material10.TextField,
+        {
+          ...params,
+          size: "small",
+          error: !!error,
+          required,
+          helperText: error?.message,
+          inputProps: {
+            ...params.inputProps,
+            "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId)
+          }
+        }
+      )
+    }
+  );
+};
+var MultiSelectSearch_default = MultiSelectSearch;
+
+// src/fields/PopOutEditor.tsx
+var import_core5 = require("@form-eng/core");
+var import_material12 = require("@mui/material");
+var import_react3 = require("react");
+
+// src/components/StatusMessage.tsx
+var import_core4 = require("@form-eng/core");
+var import_material11 = require("@mui/material");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var StatusMessage = (props) => {
+  const { id, error, errorCount, savePending, saving } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "message", children: error ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "error-icon", style: { color: "#d32f2f", fontSize: "16px" }, children: "\u26A0" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "error-message", id, role: "alert", children: error.message || "Error" })
+  ] }) : savePending ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "warning-icon", style: { color: "#ed6c02", fontSize: "16px" }, children: "\u26A0" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "warning-message", id, role: "alert", children: [
+      import_core4.FormStrings.autoSavePending,
+      " (",
+      errorCount,
+      " ",
+      import_core4.FormStrings.remaining,
+      ")"
+    ] })
+  ] }) : saving ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_material11.CircularProgress, { size: 16 }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "save-message", id, role: "alert", children: import_core4.FormStrings.saving })
+  ] }) : null });
+};
+
+// src/fields/PopOutEditor.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var PopOutEditor = (props) => {
+  const {
+    error,
+    fieldName,
+    programName,
+    entityType,
+    entityId,
+    config,
+    readOnly,
+    required,
+    savePending,
+    saving,
+    value,
+    label,
+    setFieldValue
+  } = props;
+  const [modalValue, setModalValue] = (0, import_react3.useState)();
+  const [modalVisible, setModalVisible] = (0, import_react3.useState)(false);
+  const [dialogVisible, setDialogVisible] = (0, import_react3.useState)(false);
+  const onChange = (event) => {
+    const newValue = event.target.value;
+    modalVisible ? setModalValue(newValue) : setFieldValue(fieldName, newValue, false, 3e3);
+  };
+  const onExpandButtonClick = () => {
+    setModalVisible(true);
+    setModalValue(value ? `${value}` : "");
+  };
+  const onSaveButtonClick = () => {
+    setFieldValue(fieldName, modalValue, false);
+    setDialogVisible(false);
+    setModalVisible(false);
+    config?.saveCallback?.();
+  };
+  const onCancelButtonClick = () => {
+    if (dialogVisible) {
+      setDialogVisible(false);
+      setModalVisible(false);
+    } else if (modalValue !== value) {
+      setDialogVisible(true);
+    } else {
+      setModalVisible(false);
+    }
+  };
+  if (readOnly) {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      ReadOnlyText,
+      {
+        fieldName,
+        value: value ? `${value}` : "",
+        ellipsifyTextCharacters: config?.ellipsifyTextCharacters
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "hook-textarea", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        import_material12.TextField,
+        {
+          className: FieldClassName("hook-text-area", error),
+          autoComplete: "off",
+          multiline: true,
+          rows: config?.numberOfRows ?? 4,
+          value: modalVisible ? `${modalValue}` : value ? `${value}` : "",
+          onChange,
+          size: "small",
+          fullWidth: true,
+          error: !!error,
+          helperText: error?.message,
+          inputProps: {
+            "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId)
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        import_material12.Button,
+        {
+          className: "expand-button",
+          variant: "outlined",
+          size: "small",
+          onClick: onExpandButtonClick,
+          "aria-label": import_core5.FormStrings.openExpandedTextEditor,
+          sx: { mt: 1 },
+          children: import_core5.FormStrings.expand
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      import_material12.Dialog,
+      {
+        open: modalVisible,
+        onClose: onCancelButtonClick,
+        maxWidth: "md",
+        fullWidth: true,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_material12.DialogTitle, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { children: [
+              label,
+              required && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "required-indicator", children: " *" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              import_material12.IconButton,
+              {
+                size: "small",
+                onClick: onCancelButtonClick,
+                "aria-label": import_core5.FormStrings.closeExpandedTextEditor,
+                children: "\u2715"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material12.DialogContent, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            import_material12.TextField,
+            {
+              className: FieldClassName("hook-text-area", error),
+              autoComplete: "off",
+              multiline: true,
+              rows: 12,
+              value: modalVisible ? `${modalValue}` : value ? `${value}` : "",
+              onChange,
+              fullWidth: true,
+              error: !!error,
+              sx: { mt: 1 }
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_material12.DialogActions, { children: [
+            config?.renderExtraModalFooter && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "custom-footer", children: config.renderExtraModalFooter() }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: (savePending || saving) && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StatusMessage, { savePending: !error ? savePending : void 0, saving, error }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material12.Button, { variant: "outlined", onClick: onCancelButtonClick, children: import_core5.FormStrings.cancel }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              import_material12.Button,
+              {
+                variant: "contained",
+                onClick: onSaveButtonClick,
+                disabled: !config?.saveCallback && modalValue === value,
+                "data-testid": `${programName}-${entityType}-${entityId}-save-note`,
+                children: import_core5.FormStrings.save
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_material12.Dialog, { open: dialogVisible, onClose: () => setDialogVisible(false), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material12.DialogTitle, { children: import_core5.FormStrings.unsavedChanges }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material12.DialogContent, { children: import_core5.FormStrings.saveChangesTo(label) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_material12.DialogActions, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material12.Button, { variant: "outlined", onClick: onCancelButtonClick, children: import_core5.FormStrings.dontSave }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material12.Button, { variant: "contained", onClick: onSaveButtonClick, children: import_core5.FormStrings.save })
+      ] })
+    ] })
+  ] });
+};
+var PopOutEditor_default = PopOutEditor;
+
+// src/fields/DocumentLinks.tsx
+var import_core6 = require("@form-eng/core");
+var import_material13 = require("@mui/material");
+var import_react4 = __toESM(require("react"));
+var import_react_hook_form2 = require("react-hook-form");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var DocumentLinkItem = (props) => {
+  const {
+    fieldName,
+    programName,
+    entityType,
+    entityId,
+    readOnly,
+    index,
+    title,
+    url,
+    addNewLink,
+    saveLinks,
+    onCancelAddLink,
+    onConfirmDeleteLink
+  } = props;
+  const { confirm, cancel, linkTitleLabel, linkUrlLabel, add, edit, deleteLabel } = import_core6.FormStrings;
+  const [editingLink, setEditingLink] = import_react4.default.useState(false);
+  const { control, handleSubmit, setValue, reset, trigger } = (0, import_react_hook_form2.useForm)({
+    mode: "onChange",
+    defaultValues: { title: addNewLink ? "" : title, url: addNewLink ? "" : url }
+  });
+  const onSubmit = (data) => {
+    saveLinks({ title: data.title, url: data.url }, addNewLink, index);
+    setEditingLink(false);
+  };
+  import_react4.default.useEffect(() => {
+    setEditingLink(addNewLink);
+  }, [title, url, addNewLink]);
+  const onLinkTitleChange = (e) => {
+    setValue("title", e.target.value);
+    trigger("title");
+  };
+  const onLinkUrlChange = (e) => {
+    setValue("url", e.target.value);
+    trigger("url");
+  };
+  const onEditDocumentLink = () => setEditingLink(true);
+  const onCancelFormChanges = () => {
+    reset();
+    setEditingLink(false);
+    onCancelAddLink?.();
+  };
+  const onDelete = () => onConfirmDeleteLink(index);
+  return editingLink ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "editing-link", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("form", { onSubmit: handleSubmit(onSubmit), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "header", style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "8px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material13.Typography, { variant: "subtitle2", children: [
+        addNewLink ? add : edit,
+        " ",
+        DocumentLinksStrings.link
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { display: "flex", gap: "4px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.IconButton, { size: "small", "aria-label": confirm, onClick: handleSubmit(onSubmit), children: "\u2713" }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.IconButton, { size: "small", "aria-label": cancel, onClick: onCancelFormChanges, children: "\u2715" })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      import_react_hook_form2.Controller,
+      {
+        name: "title",
+        control,
+        rules: { required: { value: true, message: import_core6.FormStrings.required } },
+        render: ({ field, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { marginBottom: "8px" }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          import_material13.TextField,
+          {
+            label: linkTitleLabel,
+            value: field.value,
+            onChange: onLinkTitleChange,
+            required: true,
+            size: "small",
+            fullWidth: true,
+            error: !!error,
+            helperText: error?.message,
+            inputProps: {
+              "data-testid": `${GetFieldDataTestId(fieldName, programName, entityType, entityId)}-link-title`
+            }
+          }
+        ) })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      import_react_hook_form2.Controller,
+      {
+        name: "url",
+        control,
+        rules: {
+          required: { value: true, message: import_core6.FormStrings.required },
+          pattern: { value: import_core6.FormConstants.urlRegex, message: import_core6.FormStrings.urlRequired }
+        },
+        render: ({ field, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { marginBottom: "8px" }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          import_material13.TextField,
+          {
+            label: linkUrlLabel,
+            value: field.value,
+            onChange: onLinkUrlChange,
+            required: true,
+            size: "small",
+            fullWidth: true,
+            error: !!error,
+            helperText: error?.message,
+            inputProps: {
+              "data-testid": `${GetFieldDataTestId(fieldName, programName, entityType, entityId)}-link-url`
+            }
+          }
+        ) })
+      }
+    )
+  ] }) }) : addNewLink ? null : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_material13.ListItem,
+    {
+      className: "document-link-item",
+      disableGutters: true,
+      secondaryAction: !readOnly ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { display: "flex", gap: "2px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Tooltip, { title: edit, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.IconButton, { size: "small", "aria-label": edit, onClick: onEditDocumentLink, children: "\u270E" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Tooltip, { title: deleteLabel, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.IconButton, { size: "small", "aria-label": deleteLabel, onClick: onDelete, children: "\u{1F5D1}" }) })
+      ] }) : void 0,
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        import_material13.ListItemText,
+        {
+          primary: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("a", { className: "link", href: url, target: "_blank", rel: "noopener noreferrer", children: title })
+        }
+      )
+    }
+  );
+};
+var DocumentLinks = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, setFieldValue } = props;
+  const { watch } = (0, import_react_hook_form2.useFormContext)();
+  const documentLinks = watch(`${fieldName}`);
+  const [addNewLink, setAddNewLink] = import_react4.default.useState(false);
+  const [deleteLinkIndex, setDeleteLinkIndex] = import_react4.default.useState(void 0);
+  const onUpdateLinks = (newLink, addNew, index) => {
+    let newDocumentLinks = [];
+    if (addNew && !documentLinks) {
+      newDocumentLinks = [newLink];
+    } else if (addNew) {
+      newDocumentLinks = [...documentLinks, newLink];
+    } else {
+      newDocumentLinks = [...documentLinks];
+      newDocumentLinks[index] = newLink;
+    }
+    setFieldValue(fieldName, newDocumentLinks);
+  };
+  const onDeleteLink = (index) => {
+    const newDocumentLinks = [...documentLinks];
+    newDocumentLinks.splice(index, 1);
+    setFieldValue(fieldName, newDocumentLinks);
+  };
+  const onAddNewLink = () => setAddNewLink(true);
+  const onCancelAddLink = () => setAddNewLink(false);
+  const onConfirmDeleteLink = (index) => setDeleteLinkIndex(index);
+  const onCloseDeleteDialog = () => setDeleteLinkIndex(void 0);
+  const commitDeleteLink = () => {
+    onDeleteLink(deleteLinkIndex);
+    setDeleteLinkIndex(void 0);
+  };
+  const saveLinks = (newLink, addNew, index) => {
+    onUpdateLinks(newLink, addNew, index);
+    setAddNewLink(false);
+  };
+  const links = value;
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: FieldClassName("hook-document-links", readOnly ? void 0 : error), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.List, { disablePadding: true, children: links?.length > 0 ? links.map((link, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      DocumentLinkItem,
+      {
+        fieldName,
+        programName,
+        entityType,
+        entityId,
+        index,
+        title: link.title,
+        url: link.url,
+        saveLinks,
+        onConfirmDeleteLink,
+        readOnly
+      },
+      `${link.url}-${index}`
+    )) : null }),
+    addNewLink ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      DocumentLinkItem,
+      {
+        fieldName,
+        programName,
+        entityType,
+        entityId,
+        addNewLink: true,
+        saveLinks,
+        onCancelAddLink
+      }
+    ) : !readOnly ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "add-link", style: { marginTop: "8px" }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Tooltip, { title: DocumentLinksStrings.addAnotherLink, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      import_material13.Button,
+      {
+        variant: "outlined",
+        size: "small",
+        onClick: onAddNewLink,
+        "data-testid": `${GetFieldDataTestId(fieldName, programName, entityType, entityId)}-add-link`,
+        children: links?.length > 0 ? DocumentLinksStrings.addAnotherLink : DocumentLinksStrings.addLink
+      }
+    ) }) }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material13.Dialog, { open: deleteLinkIndex !== void 0, onClose: onCloseDeleteDialog, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.DialogTitle, { children: DocumentLinksStrings.deleteLink }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.DialogContent, { children: `${DocumentLinksStrings.confirmDeleteLink} ${links?.[deleteLinkIndex]?.title || ""}?` }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material13.DialogActions, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Button, { variant: "outlined", onClick: onCloseDeleteDialog, children: DocumentLinksStrings.cancel }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Button, { variant: "contained", onClick: commitDeleteLink, children: DocumentLinksStrings.delete })
+      ] })
+    ] })
+  ] });
+};
+var DocumentLinks_default = DocumentLinks;
+
+// src/fields/StatusDropdown.tsx
+var import_material14 = require("@mui/material");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var StatusDot = ({ color }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  "span",
+  {
+    className: "status-color",
+    style: {
+      display: "inline-block",
+      backgroundColor: color || "transparent",
+      width: "12px",
+      height: "12px",
+      borderRadius: "50%",
+      flexShrink: 0,
+      marginRight: "8px"
+    }
+  }
+);
+var StatusDropdown = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, config, options, setFieldValue } = props;
+  const statusColors = config?.statusColors ?? {};
+  const onChange = (event) => {
+    setFieldValue(fieldName, event.target.value);
+  };
+  return readOnly ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "hook-read-only-status-dropdown", style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(StatusDot, { color: statusColors && value ? statusColors[value] : void 0 }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ReadOnlyText, { fieldName, value })
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: FieldClassName("hook-status-dropdown", error), style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(StatusDot, { color: statusColors && value ? statusColors[value] : void 0 }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material14.FormControl, { fullWidth: true, size: "small", error: !!error, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      import_material14.Select,
+      {
+        value: value ? String(value) : "",
+        onChange,
+        displayEmpty: true,
+        "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId),
+        renderValue: (selected) => {
+          const option = options?.find((o) => String(o.value) === selected);
+          return option?.label ?? "";
+        },
+        children: options?.map((option) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_material14.MenuItem, { value: String(option.value), disabled: option.disabled, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(StatusDot, { color: statusColors[String(option.value)] }),
+          option.label
+        ] }, String(option.value)))
+      }
+    ) })
+  ] });
+};
+var StatusDropdown_default = StatusDropdown;
+
+// src/fields/readonly/ReadOnly.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var ReadOnly = (props) => {
+  const { fieldName, value, config } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ReadOnlyText, { fieldName, value, ...config });
+};
+var ReadOnly_default = ReadOnly;
+
+// src/fields/readonly/ReadOnlyArray.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var ReadOnlyArray = (props) => {
+  const { fieldName, value, config } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, { children: value?.map((v, i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ReadOnlyText, { fieldName, value: v, ...config }, i)) });
+};
+var ReadOnlyArray_default = ReadOnlyArray;
+
+// src/fields/readonly/ReadOnlyDateTime.tsx
+var import_material15 = require("@mui/material");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var ReadOnlyDateTime = (props) => {
+  const { config, value } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children: value ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material15.Typography, { variant: "body2", className: "hook-read-only-date-time", component: "span", children: formatDateTime(value, { hideTimestamp: config?.hidetimeStamp }) }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children: "-" }) });
+};
+var ReadOnlyDateTime_default = ReadOnlyDateTime;
+
+// src/fields/readonly/ReadOnlyCumulativeNumber.tsx
+var import_core7 = require("@form-eng/core");
+var import_react5 = __toESM(require("react"));
+var import_react_hook_form3 = require("react-hook-form");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var ReadOnlyCumulativeNumber = (props) => {
+  const { fieldName, config } = props;
+  const { formState, getValues } = (0, import_react_hook_form3.useFormContext)();
+  const [value, setValue] = import_react5.default.useState();
+  const { dependencyFields } = config || {};
+  import_react5.default.useEffect(() => {
+    const formValues = getValues();
+    if (!(0, import_core7.isEmpty)(dependencyFields)) {
+      let totalCount = 0;
+      dependencyFields.map((fn) => {
+        totalCount += Number(formValues[fn]) || 0;
+      });
+      setValue(totalCount);
+    }
+  }, [formState]);
+  return fieldName ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ReadOnlyText, { fieldName, value: String(value), ...config }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, {});
+};
+var ReadOnlyCumulativeNumber_default = ReadOnlyCumulativeNumber;
+
+// src/fields/readonly/ReadOnlyRichText.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var ReadOnlyRichText = (props) => {
+  const { value } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    "div",
+    {
+      className: "hook-read-only-rich-text-editor",
+      dangerouslySetInnerHTML: { __html: value || "" }
+    }
+  );
+};
+var ReadOnlyRichText_default = ReadOnlyRichText;
+
+// src/fields/readonly/ReadOnlyWithButton.tsx
+var import_material16 = require("@mui/material");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var ReadOnlyWithButton = (props) => {
+  const { fieldName, value, config } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, className: config?.containerClassName, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ReadOnlyText, { fieldName, value: `${value}` }),
+    config?.buttonText && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_material16.Button, { variant: "outlined", size: "small", onClick: config.onButtonClick, children: config.buttonText })
+  ] });
+};
+var ReadOnlyWithButton_default = ReadOnlyWithButton;
+
+// src/components/FormLoading.tsx
+var import_core8 = require("@form-eng/core");
+var import_material17 = require("@mui/material");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var FormLoading = (props) => {
+  const { loadingShimmerCount, loadingFieldShimmerHeight, inPanel, hideTitleShimmer } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: `fe-loading ${inPanel ? "in-panel" : ""}`, children: [...Array(loadingShimmerCount || import_core8.FormConstants.loadingShimmerCount)].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "form-field-loading", style: { marginBottom: "16px" }, children: [
+    !hideTitleShimmer && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_material17.Skeleton, { variant: "text", width: "33%" }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      import_material17.Skeleton,
+      {
+        variant: "rectangular",
+        height: loadingFieldShimmerHeight || import_core8.FormConstants.loadingFieldShimmerHeight
+      }
+    )
+  ] }, `fe-loading-${i}`)) });
+};
+
+// src/registry.ts
+var import_core9 = require("@form-eng/core");
+var import_react6 = __toESM(require("react"));
+function createMuiFieldRegistry() {
+  return {
+    [import_core9.ComponentTypes.Textbox]: import_react6.default.createElement(Textbox_default),
+    [import_core9.ComponentTypes.Number]: import_react6.default.createElement(Number_default),
+    [import_core9.ComponentTypes.Toggle]: import_react6.default.createElement(Toggle_default),
+    [import_core9.ComponentTypes.Dropdown]: import_react6.default.createElement(Dropdown_default),
+    [import_core9.ComponentTypes.MultiSelect]: import_react6.default.createElement(MultiSelect_default),
+    [import_core9.ComponentTypes.DateControl]: import_react6.default.createElement(DateControl_default),
+    [import_core9.ComponentTypes.Slider]: import_react6.default.createElement(Slider_default),
+    [import_core9.ComponentTypes.Fragment]: import_react6.default.createElement(DynamicFragment_default),
+    [import_core9.ComponentTypes.SimpleDropdown]: import_react6.default.createElement(SimpleDropdown_default),
+    [import_core9.ComponentTypes.MultiSelectSearch]: import_react6.default.createElement(MultiSelectSearch_default),
+    [import_core9.ComponentTypes.Textarea]: import_react6.default.createElement(PopOutEditor_default),
+    [import_core9.ComponentTypes.DocumentLinks]: import_react6.default.createElement(DocumentLinks_default),
+    [import_core9.ComponentTypes.StatusDropdown]: import_react6.default.createElement(StatusDropdown_default),
+    [import_core9.ComponentTypes.ReadOnly]: import_react6.default.createElement(ReadOnly_default),
+    [import_core9.ComponentTypes.ReadOnlyArray]: import_react6.default.createElement(ReadOnlyArray_default),
+    [import_core9.ComponentTypes.ReadOnlyDateTime]: import_react6.default.createElement(ReadOnlyDateTime_default),
+    [import_core9.ComponentTypes.ReadOnlyCumulativeNumber]: import_react6.default.createElement(ReadOnlyCumulativeNumber_default),
+    [import_core9.ComponentTypes.ReadOnlyRichText]: import_react6.default.createElement(ReadOnlyRichText_default),
+    [import_core9.ComponentTypes.ReadOnlyWithButton]: import_react6.default.createElement(ReadOnlyWithButton_default)
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DateControl,
+  DocumentLinks,
+  DocumentLinksStrings,
+  Dropdown,
+  DynamicFragment,
+  FieldClassName,
+  FormLoading,
+  GetFieldDataTestId,
+  MultiSelect,
+  MultiSelectSearch,
+  Number,
+  PopOutEditor,
+  ReadOnly,
+  ReadOnlyArray,
+  ReadOnlyCumulativeNumber,
+  ReadOnlyDateTime,
+  ReadOnlyRichText,
+  ReadOnlyText,
+  ReadOnlyWithButton,
+  SimpleDropdown,
+  Slider,
+  StatusDropdown,
+  StatusMessage,
+  Textbox,
+  Toggle,
+  createMuiFieldRegistry,
+  formatDateTime
+});
+//# sourceMappingURL=index.js.map