@form-eng/fluent 1.0.0

package/dist/index.js

@@ -0,0 +1,1034 @@
+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,
+  DocumentLink: () => DocumentLink_default,
+  DocumentLinks: () => DocumentLinks_default,
+  DocumentLinksField: () => DocumentLinks_default2,
+  DocumentLinksStrings: () => DocumentLinksStrings,
+  DropdownField: () => Dropdown_default,
+  FieldClassName: () => FieldClassName,
+  FormLoading: () => FormLoading,
+  Fragment: () => DynamicFragment_default,
+  GetFieldDataTestId: () => GetFieldDataTestId,
+  MultiSelect: () => MultiSelect_default,
+  MultiSelectSearch: () => MultiSelectSearch_default,
+  NumberField: () => 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,
+  SliderField: () => Slider_default,
+  StatusColor: () => StatusColor_default,
+  StatusDropdown: () => StatusDropdown_default,
+  StatusDropdownField: () => StatusDropdown_default2,
+  StatusMessage: () => StatusMessage,
+  Textbox: () => Textbox_default,
+  Toggle: () => Toggle_default,
+  createFluentFieldRegistry: () => createFluentFieldRegistry,
+  formatDateTime: () => formatDateTime
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/fields/Textbox.tsx
+var import_react_components2 = require("@fluentui/react-components");
+
+// src/components/ReadOnlyText.tsx
+var import_react_components = require("@fluentui/react-components");
+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_react_components.Label, { id: `${fieldName}-read-only`, className: classNameValue, title: value, 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_react_components2.Input,
+    {
+      className: FieldClassName("hook-textbox", error),
+      autoComplete: "off",
+      value: value ?? "",
+      onChange,
+      placeholder,
+      "aria-invalid": !!error,
+      "aria-required": required,
+      "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId)
+    }
+  );
+};
+var Textbox_default = Textbox;
+
+// src/fields/Number.tsx
+var import_core = require("@form-eng/core");
+var import_react_components3 = require("@fluentui/react-components");
+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_react_components3.Input,
+    {
+      className: FieldClassName("hook-number", error),
+      autoComplete: "off",
+      type: "number",
+      value: !(0, import_core.isNull)(value) ? String(value) : "",
+      onChange,
+      "aria-invalid": !!error,
+      "aria-required": required,
+      "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId)
+    }
+  );
+};
+var Number_default = NumberField;
+
+// src/fields/Toggle.tsx
+var import_core2 = require("@form-eng/core");
+var import_react_components4 = require("@fluentui/react-components");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Toggle = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, setFieldValue } = props;
+  const onChange = (_, data) => {
+    setFieldValue(fieldName, data.checked);
+  };
+  return readOnly ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ReadOnlyText, { fieldName, value: (0, import_core2.convertBooleanToYesOrNoText)(value) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_react_components4.Switch,
+    {
+      className: "hook-toggle",
+      checked: value,
+      onChange,
+      "aria-invalid": !!error,
+      "aria-required": required,
+      "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId)
+    }
+  );
+};
+var Toggle_default = Toggle;
+
+// src/fields/Dropdown.tsx
+var import_react_components5 = require("@fluentui/react-components");
+var import_react = __toESM(require("react"));
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var DropdownField = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, config, error, required, placeholder, options, setFieldValue } = props;
+  const onOptionSelect = (_, data) => {
+    setFieldValue(fieldName, data.optionValue);
+  };
+  import_react.default.useEffect(() => {
+    if (!value && !readOnly && config?.setDefaultKeyIfOnlyOneOption && options?.length === 1) {
+      setFieldValue(fieldName, String(options[0].value));
+    }
+  }, [options]);
+  const selectedText = options?.find((o) => String(o.value) === String(value))?.label;
+  return readOnly ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ReadOnlyText, { fieldName, value }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_react_components5.Dropdown,
+    {
+      className: FieldClassName("hook-dropdown", error),
+      value: selectedText ?? "",
+      selectedOptions: value ? [String(value)] : [],
+      onOptionSelect,
+      placeholder,
+      "aria-invalid": !!error,
+      "aria-required": required,
+      "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId),
+      children: options?.map((option) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_components5.Option, { value: String(option.value), disabled: option.disabled, children: option.label }, String(option.value)))
+    }
+  );
+};
+var Dropdown_default = DropdownField;
+
+// src/fields/MultiSelect.tsx
+var import_react_components6 = require("@fluentui/react-components");
+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 onOptionSelect = (_, data) => {
+    setFieldValue(fieldName, data.selectedOptions, 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_react_components6.Dropdown,
+    {
+      className: "hook-multi-select-read-only",
+      multiselect: true,
+      value: value.join(", "),
+      selectedOptions: value,
+      children: value.map((v) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_components6.Option, { value: v, children: v }, v))
+    }
+  ) : null }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_react_components6.Dropdown,
+    {
+      className: FieldClassName("hook-multi-select", error),
+      multiselect: true,
+      value: selectedOptions.join(", "),
+      selectedOptions,
+      onOptionSelect,
+      "aria-invalid": !!error,
+      "aria-required": required,
+      "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId),
+      children: options?.map((option) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_components6.Option, { 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_react_components7 = require("@fluentui/react-components");
+var import_react_icons = require("@fluentui/react-icons");
+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_react_components7.Input,
+      {
+        className: FieldClassName("hook-date-control", error),
+        type: "date",
+        value: dateInputValue,
+        onChange,
+        "aria-invalid": !!error,
+        "aria-required": required,
+        "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId)
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_react_components7.Button,
+      {
+        appearance: "subtle",
+        icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_icons.DismissRegular, {}),
+        onClick: onClearDate,
+        title: import_core3.FormStrings.clickToClear,
+        "aria-label": `${fieldName} ${import_core3.FormStrings.clear}`
+      }
+    ),
+    error?.message && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hook-date-control-error", role: "alert", style: { color: "var(--colorPaletteRedForeground1, #bc2f32)", fontSize: "12px" }, children: error.message })
+  ] });
+};
+var DateControl_default = DateControl;
+
+// src/fields/Slider.tsx
+var import_react_components8 = require("@fluentui/react-components");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var SliderField = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, config, error, required, setFieldValue } = props;
+  const onChange = (_, data) => {
+    setFieldValue(fieldName, data.value);
+  };
+  return readOnly ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ReadOnlyText, { fieldName, value: String(value) }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_react_components8.Slider,
+    {
+      className: FieldClassName("hook-slider", error),
+      value: value ?? 0,
+      onChange,
+      max: config?.max,
+      min: config?.min,
+      step: config?.step,
+      "aria-invalid": !!error,
+      "aria-required": required,
+      "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId)
+    }
+  );
+};
+var Slider_default = SliderField;
+
+// src/fields/DynamicFragment.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Fragment4 = (props) => {
+  const { value } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("input", { type: "hidden", value });
+};
+var DynamicFragment_default = Fragment4;
+
+// src/fields/SimpleDropdown.tsx
+var import_react_components9 = require("@fluentui/react-components");
+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 onOptionSelect = (_, data) => {
+    setFieldValue(fieldName, data.optionValue);
+  };
+  return readOnly ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ReadOnlyText, { fieldName, value }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    import_react_components9.Dropdown,
+    {
+      className: FieldClassName("hook-dropdown", error),
+      value: value ?? "",
+      selectedOptions: value ? [String(value)] : [],
+      onOptionSelect,
+      placeholder,
+      "aria-invalid": !!error,
+      "aria-required": required,
+      "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId),
+      children: simpleOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_components9.Option, { value: option, children: option }, option))
+    }
+  );
+};
+var SimpleDropdown_default = SimpleDropdown;
+
+// src/fields/MultiSelectSearch.tsx
+var import_react_components10 = require("@fluentui/react-components");
+var import_react_components11 = require("@fluentui/react-components");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var MultiSelectSearch = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, options, setFieldValue } = props;
+  const onOptionSelect = (_, data) => {
+    setFieldValue(fieldName, data.selectedOptions, 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_react_components11.Dropdown,
+    {
+      className: "hook-multi-select-search-read-only",
+      multiselect: true,
+      value: value.join(", "),
+      selectedOptions: value,
+      children: value.map((v) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_components10.Option, { value: v, children: v }, v))
+    }
+  ) : null }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    import_react_components10.Combobox,
+    {
+      className: FieldClassName("hook-multi-select-search", error),
+      multiselect: true,
+      freeform: true,
+      value: void 0,
+      selectedOptions: value ?? [],
+      onOptionSelect,
+      "aria-invalid": !!error,
+      "aria-required": required,
+      "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId),
+      children: options?.map((option) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_components10.Option, { value: String(option.value), children: option.label }, String(option.value)))
+    }
+  );
+};
+var MultiSelectSearch_default = MultiSelectSearch;
+
+// src/fields/PopOutEditor.tsx
+var import_core5 = require("@form-eng/core");
+var import_react_components13 = require("@fluentui/react-components");
+var import_react_icons3 = require("@fluentui/react-icons");
+var import_react2 = require("react");
+
+// src/components/StatusMessage.tsx
+var import_core4 = require("@form-eng/core");
+var import_react_components12 = require("@fluentui/react-components");
+var import_react_icons2 = require("@fluentui/react-icons");
+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)(import_react_icons2.ErrorCircleRegular, { className: "error-icon" }),
+    /* @__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)(import_react_icons2.WarningRegular, { className: "warning-icon" }),
+    /* @__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_react_components12.Spinner, { size: "tiny" }),
+    /* @__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_react2.useState)();
+  const [modalVisible, setModalVisible] = (0, import_react2.useState)(false);
+  const [dialogVisible, setDialogVisible] = (0, import_react2.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_react_components13.Textarea,
+        {
+          className: FieldClassName("hook-text-area", error),
+          resize: "none",
+          autoComplete: "off",
+          value: modalVisible ? `${modalValue}` : value ? `${value}` : "",
+          onChange,
+          "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId),
+          rows: config?.numberOfRows ?? 4
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        import_react_components13.Button,
+        {
+          className: "expand-button",
+          appearance: "secondary",
+          icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_icons3.FullScreenMaximizeRegular, {}),
+          onClick: onExpandButtonClick,
+          "aria-label": import_core5.FormStrings.openExpandedTextEditor,
+          children: import_core5.FormStrings.expand
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_components13.Dialog, { open: modalVisible, onOpenChange: (_, data) => {
+      if (!data.open) onCancelButtonClick();
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_components13.DialogSurface, { className: "hook-expanded-textarea", style: { maxWidth: "90vw", width: "800px" }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_components13.DialogBody, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+        import_react_components13.DialogTitle,
+        {
+          action: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            import_react_components13.Button,
+            {
+              appearance: "subtle",
+              icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_icons3.DismissRegular, {}),
+              onClick: onCancelButtonClick,
+              "aria-label": import_core5.FormStrings.closeExpandedTextEditor
+            }
+          ),
+          children: [
+            label,
+            required && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "required-indicator", children: " *" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_components13.DialogContent, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        import_react_components13.Textarea,
+        {
+          className: FieldClassName("hook-text-area", error),
+          resize: "vertical",
+          autoComplete: "off",
+          value: modalVisible ? `${modalValue}` : value ? `${value}` : "",
+          onChange,
+          rows: 12,
+          style: { width: "100%" }
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_components13.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_react_components13.Button, { appearance: "secondary", onClick: onCancelButtonClick, children: import_core5.FormStrings.cancel }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          import_react_components13.Button,
+          {
+            appearance: "primary",
+            onClick: onSaveButtonClick,
+            disabled: !config?.saveCallback && modalValue === value,
+            "data-testid": `${programName}-${entityType}-${entityId}-save-note`,
+            children: config?.saveCallback ? import_core5.FormStrings.save : import_core5.FormStrings.save
+          }
+        )
+      ] })
+    ] }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_components13.Dialog, { open: dialogVisible, onOpenChange: (_, data) => {
+      if (!data.open) setDialogVisible(false);
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_components13.DialogSurface, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_components13.DialogBody, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_components13.DialogTitle, { children: import_core5.FormStrings.unsavedChanges }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_components13.DialogContent, { children: import_core5.FormStrings.saveChangesTo(label) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_components13.DialogActions, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_components13.Button, { appearance: "secondary", onClick: onCancelButtonClick, children: import_core5.FormStrings.dontSave }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_components13.Button, { appearance: "primary", onClick: onSaveButtonClick, children: import_core5.FormStrings.save })
+      ] })
+    ] }) }) })
+  ] });
+};
+var PopOutEditor_default = PopOutEditor;
+
+// src/fields/DocumentLinks.tsx
+var import_react_hook_form3 = require("react-hook-form");
+
+// src/components/DocumentLinks/DocumentLinks.tsx
+var import_react_components15 = require("@fluentui/react-components");
+var import_react_icons5 = require("@fluentui/react-icons");
+var import_react4 = __toESM(require("react"));
+
+// src/components/DocumentLinks/DocumentLink.tsx
+var import_core6 = require("@form-eng/core");
+var import_react_components14 = require("@fluentui/react-components");
+var import_react_icons4 = require("@fluentui/react-icons");
+var import_react3 = __toESM(require("react"));
+var import_react_hook_form2 = require("react-hook-form");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var DocumentLink = (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_react3.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_react3.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" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "header-label", 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_react_components14.Button, { appearance: "subtle", icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_icons4.CheckmarkRegular, {}), "aria-label": confirm, onClick: handleSubmit(onSubmit) }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_components14.Button, { appearance: "subtle", icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_icons4.DismissRegular, {}), "aria-label": cancel, onClick: onCancelFormChanges })
+      ] })
+    ] }),
+    /* @__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.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("label", { children: linkTitleLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            import_react_components14.Input,
+            {
+              value: field.value,
+              onChange: onLinkTitleChange,
+              required: true,
+              "data-testid": `${GetFieldDataTestId(fieldName, programName, entityType, entityId)}-link-title`
+            }
+          ),
+          error && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "error-message", children: error.message })
+        ] })
+      }
+    ),
+    /* @__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.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("label", { children: linkUrlLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            import_react_components14.Input,
+            {
+              value: field.value,
+              onChange: onLinkUrlChange,
+              required: true,
+              "data-testid": `${GetFieldDataTestId(fieldName, programName, entityType, entityId)}-link-url`
+            }
+          ),
+          error && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "error-message", children: error.message })
+        ] })
+      }
+    )
+  ] }) }) : addNewLink ? null : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "document-link-item", style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("a", { className: "link", href: url, target: "_blank", rel: "noopener noreferrer", children: title }),
+    !readOnly && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { display: "flex", gap: "2px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_components14.Tooltip, { content: edit, relationship: "label", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_components14.Button, { appearance: "subtle", icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_icons4.EditRegular, {}), "aria-label": edit, onClick: onEditDocumentLink }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_components14.Tooltip, { content: deleteLabel, relationship: "label", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_components14.Button, { appearance: "subtle", icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_icons4.DeleteRegular, {}), "aria-label": deleteLabel, onClick: onDelete }) })
+    ] })
+  ] });
+};
+var DocumentLink_default = DocumentLink;
+
+// src/components/DocumentLinks/DocumentLinks.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var DocumentLinks = (props) => {
+  const { fieldName, programName, entityType, entityId, className, readOnly, links, onUpdateLinks, onDeleteLink } = props;
+  const [addNewLink, setAddNewLink] = import_react4.default.useState(false);
+  const [deleteLinkIndex, setDeleteLinkIndex] = import_react4.default.useState(void 0);
+  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);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className, children: [
+    links?.length > 0 ? links.map((link, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      DocumentLink_default,
+      {
+        fieldName,
+        programName,
+        entityType,
+        entityId,
+        index,
+        title: link.title,
+        url: link.url,
+        saveLinks,
+        onConfirmDeleteLink,
+        readOnly
+      },
+      `${link.url}-${index}`
+    )) : null,
+    addNewLink ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      DocumentLink_default,
+      {
+        fieldName,
+        programName,
+        entityType,
+        entityId,
+        addNewLink: true,
+        saveLinks,
+        onCancelAddLink
+      }
+    ) : !readOnly ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "add-link", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_components15.Tooltip, { content: DocumentLinksStrings.addAnotherLink, relationship: "label", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      import_react_components15.Button,
+      {
+        appearance: "secondary",
+        icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_icons5.AddRegular, {}),
+        onClick: onAddNewLink,
+        "data-testid": `${GetFieldDataTestId(fieldName, programName, entityType, entityId)}-add-link`,
+        children: links?.length > 0 ? DocumentLinksStrings.addAnotherLink : DocumentLinksStrings.addLink
+      }
+    ) }) }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_components15.Dialog, { open: deleteLinkIndex !== void 0, onOpenChange: (_, data) => {
+      if (!data.open) onCloseDeleteDialog();
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_components15.DialogSurface, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_components15.DialogBody, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_components15.DialogTitle, { children: DocumentLinksStrings.deleteLink }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_components15.DialogContent, { children: `${DocumentLinksStrings.confirmDeleteLink} ${links?.[deleteLinkIndex]?.title || ""}?` }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_components15.DialogActions, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_components15.Button, { appearance: "secondary", onClick: onCloseDeleteDialog, children: DocumentLinksStrings.cancel }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_components15.Button, { appearance: "primary", onClick: commitDeleteLink, children: DocumentLinksStrings.delete })
+      ] })
+    ] }) }) })
+  ] });
+};
+var DocumentLinks_default = DocumentLinks;
+
+// src/fields/DocumentLinks.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var DocumentLinksField = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, setFieldValue } = props;
+  const { watch } = (0, import_react_hook_form3.useFormContext)();
+  const documentLinks = watch(`${fieldName}`);
+  const onUpdateLinks = (newLink, addNewLink, index) => {
+    let newDocumentLinks = [];
+    if (addNewLink && !documentLinks) {
+      newDocumentLinks = [newLink];
+    } else if (addNewLink) {
+      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);
+  };
+  return readOnly ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    DocumentLinks_default,
+    {
+      fieldName,
+      programName,
+      entityType,
+      entityId,
+      className: "hook-document-links",
+      links: value,
+      readOnly: true
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    DocumentLinks_default,
+    {
+      fieldName,
+      programName,
+      entityType,
+      entityId,
+      className: FieldClassName("hook-document-links", error),
+      links: value,
+      onUpdateLinks,
+      onDeleteLink
+    }
+  );
+};
+var DocumentLinks_default2 = DocumentLinksField;
+
+// src/components/StatusDropdown/StatusColor.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var StatusColor = (props) => {
+  const { statusColors, status } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    "div",
+    {
+      className: "status-color",
+      style: {
+        backgroundColor: statusColors && status && statusColors[status],
+        width: "12px",
+        height: "12px",
+        borderRadius: "50%",
+        flexShrink: 0
+      }
+    }
+  );
+};
+var StatusColor_default = StatusColor;
+
+// src/components/StatusDropdown/StatusDropdown.tsx
+var import_react_components16 = require("@fluentui/react-components");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var StatusDropdown = (props) => {
+  const { fieldName, programName, entityType, entityId, className, status, meta, dropdownOptions, onOptionSelect } = props;
+  const statusColors = meta?.statusColors ?? {};
+  const selectedText = dropdownOptions?.find((o) => String(o.value) === status)?.label;
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className, style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(StatusColor_default, { statusColors, status }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      import_react_components16.Dropdown,
+      {
+        value: selectedText ?? "",
+        selectedOptions: status ? [status] : [],
+        onOptionSelect,
+        "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId),
+        children: dropdownOptions?.map((option) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_components16.Option, { value: String(option.value), disabled: option.disabled, children: option.label }, String(option.value)))
+      }
+    )
+  ] });
+};
+var StatusDropdown_default = StatusDropdown;
+
+// src/fields/StatusDropdown.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var StatusDropdownField = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, config, options, setFieldValue } = props;
+  const onOptionSelect = (_, data) => {
+    setFieldValue(fieldName, data.optionValue);
+  };
+  return readOnly ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "hook-read-only-status-dropdown", style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(StatusColor_default, { statusColors: config?.statusColors, status: value }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ReadOnlyText, { fieldName, value })
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    StatusDropdown_default,
+    {
+      className: FieldClassName("hook-status-dropdown", error),
+      fieldName,
+      programName,
+      entityType,
+      entityId,
+      dropdownOptions: options,
+      status: value,
+      onOptionSelect,
+      meta: config
+    }
+  );
+};
+var StatusDropdown_default2 = StatusDropdownField;
+
+// src/fields/readonly/ReadOnly.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var ReadOnly = (props) => {
+  const { fieldName, value, config } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ReadOnlyText, { fieldName, value, ...config });
+};
+var ReadOnly_default = ReadOnly;
+
+// src/fields/readonly/ReadOnlyArray.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var ReadOnlyArray = (props) => {
+  const { fieldName, value, config } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, { children: value?.map((v, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ReadOnlyText, { fieldName, value: v, ...config }, i)) });
+};
+var ReadOnlyArray_default = ReadOnlyArray;
+
+// src/fields/readonly/ReadOnlyDateTime.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var ReadOnlyDateTime = (props) => {
+  const { config, value } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, { children: value ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "hook-read-only-date-time", children: formatDateTime(value, { hideTimestamp: config?.hidetimeStamp }) }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.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_form4 = require("react-hook-form");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var ReadOnlyCumulativeNumber = (props) => {
+  const { fieldName, config } = props;
+  const { formState, getValues } = (0, import_react_hook_form4.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_runtime23.jsx)(ReadOnlyText, { fieldName, value: String(value), ...config }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_jsx_runtime23.Fragment, {});
+};
+var ReadOnlyCumulativeNumber_default = ReadOnlyCumulativeNumber;
+
+// src/fields/readonly/ReadOnlyRichText.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var ReadOnlyRichText = (props) => {
+  const { value } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    "div",
+    {
+      className: "hook-read-only-rich-text-editor",
+      dangerouslySetInnerHTML: { __html: value || "" }
+    }
+  );
+};
+var ReadOnlyRichText_default = ReadOnlyRichText;
+
+// src/fields/readonly/ReadOnlyWithButton.tsx
+var import_react_components17 = require("@fluentui/react-components");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var ReadOnlyWithButton = (props) => {
+  const { fieldName, value, config } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, className: config?.containerClassName, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ReadOnlyText, { fieldName, value: `${value}` }),
+    config?.buttonText && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_components17.Button, { onClick: config.onButtonClick, children: config.buttonText })
+  ] });
+};
+var ReadOnlyWithButton_default = ReadOnlyWithButton;
+
+// src/components/FormLoading.tsx
+var import_core8 = require("@form-eng/core");
+var import_react_components18 = require("@fluentui/react-components");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var FormLoading = (props) => {
+  const { loadingShimmerCount, loadingFieldShimmerHeight, inPanel, hideTitleShimmer } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: `fe-loading ${inPanel ? "in-panel" : ""}`, children: [...Array(loadingShimmerCount || import_core8.FormConstants.loadingShimmerCount)].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "form-field-loading", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react_components18.Skeleton, { children: [
+    !hideTitleShimmer && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_components18.SkeletonItem, { style: { width: "33%" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_components18.SkeletonItem, { style: { height: `${loadingFieldShimmerHeight || import_core8.FormConstants.loadingFieldShimmerHeight}px` } })
+  ] }) }, `fe-loading-${i}`)) });
+};
+
+// src/registry.ts
+var import_core9 = require("@form-eng/core");
+var import_react6 = __toESM(require("react"));
+function createFluentFieldRegistry() {
+  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_default2),
+    [import_core9.ComponentTypes.StatusDropdown]: import_react6.default.createElement(StatusDropdown_default2),
+    [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,
+  DocumentLink,
+  DocumentLinks,
+  DocumentLinksField,
+  DocumentLinksStrings,
+  DropdownField,
+  FieldClassName,
+  FormLoading,
+  Fragment,
+  GetFieldDataTestId,
+  MultiSelect,
+  MultiSelectSearch,
+  NumberField,
+  PopOutEditor,
+  ReadOnly,
+  ReadOnlyArray,
+  ReadOnlyCumulativeNumber,
+  ReadOnlyDateTime,
+  ReadOnlyRichText,
+  ReadOnlyText,
+  ReadOnlyWithButton,
+  SimpleDropdown,
+  SliderField,
+  StatusColor,
+  StatusDropdown,
+  StatusDropdownField,
+  StatusMessage,
+  Textbox,
+  Toggle,
+  createFluentFieldRegistry,
+  formatDateTime
+});
+//# sourceMappingURL=index.js.map