@form-eng/react-aria 1.5.3 → 1.6.0

package/dist/index.js

@@ -29,19 +29,35 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  Autocomplete: () => Autocomplete_default,
   CheckboxGroup: () => CheckboxGroup_default,
+  ColorPicker: () => ColorPicker_default,
   DateControl: () => DateControl_default,
+  DateRange: () => DateRange_default,
+  DateTime: () => DateTime_default,
+  DocumentLinks: () => DocumentLinks_default,
+  DocumentLinksStrings: () => import_adapter_utils.DocumentLinksStrings,
   Dropdown: () => Dropdown_default,
   DynamicFragment: () => DynamicFragment_default,
+  FileUpload: () => FileUpload_default,
   FormLoading: () => FormLoading,
   GetFieldDataTestId: () => import_adapter_utils.GetFieldDataTestId,
   MultiSelect: () => MultiSelect_default,
+  MultiSelectSearch: () => MultiSelectSearch_default,
   Number: () => Number_default,
+  PhoneInput: () => PhoneInput_default,
   RadioGroup: () => RadioGroup_default,
+  Rating: () => Rating_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,
   Textarea: () => Textarea_default,
   Textbox: () => Textbox_default,
@@ -648,71 +664,567 @@ var CheckboxGroup = (props) => {
 };
 var CheckboxGroup_default = CheckboxGroup;
 
-// src/fields/readonly/ReadOnly.tsx
+// src/fields/Rating.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
+var Rating = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, config, setFieldValue } = props;
+  const max = config?.max ?? 5;
+  const rating = value ?? 0;
+  if (readOnly) {
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ReadOnlyText, { fieldName, value: String(rating) });
+  }
+  const stars = Array.from({ length: max }, (_, i) => i + 1);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "div",
+    {
+      className: "df-rating",
+      role: "radiogroup",
+      "aria-label": `Rating, ${rating} of ${max}`,
+      "aria-invalid": !!error,
+      "aria-required": required,
+      "data-field-type": "Rating",
+      "data-field-state": (0, import_adapter_utils.getFieldState)({ error, required, readOnly }),
+      "data-testid": (0, import_adapter_utils.GetFieldDataTestId)(fieldName, programName, entityType, entityId),
+      children: stars.map((star) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: "df-rating__star-label", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          "input",
+          {
+            type: "radio",
+            className: "df-rating__input",
+            name: fieldName,
+            value: String(star),
+            checked: rating === star,
+            onChange: () => setFieldValue(fieldName, star),
+            "aria-label": `${star} star${star !== 1 ? "s" : ""}`
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: `df-rating__star${star <= rating ? " df-rating__star--filled" : ""}`, "aria-hidden": "true", children: star <= rating ? "\u2605" : "\u2606" })
+      ] }, star))
+    }
+  );
+};
+var Rating_default = Rating;
+
+// src/fields/Autocomplete.tsx
+var import_react_aria_components10 = require("react-aria-components");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var Autocomplete = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, placeholder, options, setFieldValue } = props;
+  const selectedLabel = options?.find((o) => String(o.value) === String(value))?.label ?? value ?? "";
+  if (readOnly) {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ReadOnlyText, { fieldName, value: selectedLabel });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    import_react_aria_components10.ComboBox,
+    {
+      className: "df-autocomplete",
+      "aria-label": fieldName,
+      defaultInputValue: selectedLabel,
+      onSelectionChange: (key) => {
+        if (key !== null) setFieldValue(fieldName, String(key));
+      },
+      onInputChange: (text) => {
+        const match = options?.find((o) => o.label.toLowerCase() === text.toLowerCase());
+        setFieldValue(fieldName, match ? String(match.value) : text);
+      },
+      "data-testid": (0, import_adapter_utils.GetFieldDataTestId)(fieldName, programName, entityType, entityId),
+      isRequired: required,
+      isInvalid: !!error,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_aria_components10.Input, { className: "df-autocomplete__input", placeholder }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_aria_components10.Button, { className: "df-autocomplete__button", children: "\u25BC" }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_aria_components10.Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_aria_components10.ListBox, { className: "df-autocomplete__listbox", children: options?.map((option) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_aria_components10.ListBoxItem, { id: String(option.value), children: option.label }, String(option.value))) }) })
+      ]
+    }
+  );
+};
+var Autocomplete_default = Autocomplete;
+
+// src/fields/DateTime.tsx
+var import_core4 = require("@form-eng/core");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var DateTime = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, config, setFieldValue } = props;
+  const minDateTime = config?.minDateTime;
+  const maxDateTime = config?.maxDateTime;
+  if (readOnly) {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ReadOnlyText, { fieldName, value: (0, import_core4.formatDateTimeValue)(value) });
+  }
+  const onChange = (event) => {
+    setFieldValue(fieldName, event.target.value || null);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    "input",
+    {
+      type: "datetime-local",
+      className: "df-date-time",
+      "data-field-type": "DateTime",
+      "data-field-state": (0, import_adapter_utils.getFieldState)({ error, required, readOnly }),
+      value: value ?? "",
+      min: minDateTime,
+      max: maxDateTime,
+      onChange,
+      "aria-invalid": !!error,
+      "aria-required": required,
+      "data-testid": (0, import_adapter_utils.GetFieldDataTestId)(fieldName, programName, entityType, entityId)
+    }
+  );
+};
+var DateTime_default = DateTime;
+
+// src/fields/DateRange.tsx
+var import_core5 = require("@form-eng/core");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var DateRange = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, config, setFieldValue } = props;
+  const rangeValue = value ?? { start: "", end: "" };
+  const minDate = config?.minDate;
+  const maxDate = config?.maxDate;
+  const rangeError = rangeValue.start && rangeValue.end && rangeValue.start > rangeValue.end ? "Start date must be on or before end date." : void 0;
+  if (readOnly) {
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ReadOnlyText, { fieldName, value: (0, import_core5.formatDateRange)(value) });
+  }
+  const onStartChange = (event) => {
+    setFieldValue(fieldName, { ...rangeValue, start: event.target.value });
+  };
+  const onEndChange = (event) => {
+    setFieldValue(fieldName, { ...rangeValue, end: event.target.value });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    "div",
+    {
+      className: "fe-date-range",
+      "data-field-type": "DateRange",
+      "data-field-state": (0, import_adapter_utils.getFieldState)({ error, required, readOnly }),
+      "data-testid": (0, import_adapter_utils.GetFieldDataTestId)(fieldName, programName, entityType, entityId),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "fe-date-range__inputs", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "fe-date-range__from", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { htmlFor: `${fieldName}-start`, className: "fe-date-range__label", children: "From" }),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              "input",
+              {
+                id: `${fieldName}-start`,
+                type: "date",
+                className: "fe-date-range__input fe-date-range__input--start",
+                value: rangeValue.start,
+                min: minDate,
+                max: rangeValue.end || maxDate,
+                onChange: onStartChange,
+                "aria-invalid": !!error,
+                "aria-required": required,
+                "aria-label": "Start date"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "fe-date-range__to", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { htmlFor: `${fieldName}-end`, className: "fe-date-range__label", children: "To" }),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              "input",
+              {
+                id: `${fieldName}-end`,
+                type: "date",
+                className: "fe-date-range__input fe-date-range__input--end",
+                value: rangeValue.end,
+                min: rangeValue.start || minDate,
+                max: maxDate,
+                onChange: onEndChange,
+                "aria-label": "End date"
+              }
+            )
+          ] })
+        ] }),
+        rangeError && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "fe-date-range__range-error", role: "alert", children: rangeError })
+      ]
+    }
+  );
+};
+var DateRange_default = DateRange;
+
+// src/fields/PhoneInput.tsx
+var import_core6 = require("@form-eng/core");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var PhoneInput = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, config, setFieldValue } = props;
+  const format = config?.format ?? "us";
+  if (readOnly) {
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ReadOnlyText, { fieldName, value: value ?? "" });
+  }
+  const onChange = (event) => {
+    const digits = (0, import_core6.extractDigits)(event.target.value);
+    const formatted = (0, import_core6.formatPhone)(digits, format);
+    setFieldValue(fieldName, formatted);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    "input",
+    {
+      type: "tel",
+      className: "fe-phone-input",
+      "data-field-type": "PhoneInput",
+      "data-field-state": (0, import_adapter_utils.getFieldState)({ error, required, readOnly }),
+      value: value ?? "",
+      onChange,
+      "aria-invalid": !!error,
+      "aria-required": required,
+      "data-testid": (0, import_adapter_utils.GetFieldDataTestId)(fieldName, programName, entityType, entityId)
+    }
+  );
+};
+var PhoneInput_default = PhoneInput;
+
+// src/fields/FileUpload.tsx
+var import_core7 = require("@form-eng/core");
+var import_react3 = __toESM(require("react"));
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var FileUpload = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, config, setFieldValue } = props;
+  const inputRef = (0, import_react3.useRef)(null);
+  const multiple = config?.multiple ?? false;
+  const accept = config?.accept;
+  const maxSizeMb = config?.maxSizeMb ?? import_core7.MAX_FILE_SIZE_MB_DEFAULT;
+  const maxSizeBytes = maxSizeMb * 1024 * 1024;
+  const [sizeError, setSizeError] = import_react3.default.useState(void 0);
+  if (readOnly) {
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ReadOnlyText, { fieldName, value: (0, import_core7.getFileNames)(value) });
+  }
+  const onChange = (event) => {
+    const files = event.target.files;
+    if (!files || files.length === 0) {
+      setFieldValue(fieldName, null);
+      setSizeError(void 0);
+      return;
+    }
+    const oversized = Array.from(files).find((f) => f.size > maxSizeBytes);
+    if (oversized) {
+      setSizeError(`"${oversized.name}" exceeds the ${maxSizeMb} MB size limit.`);
+      event.target.value = "";
+      setFieldValue(fieldName, null);
+      return;
+    }
+    setSizeError(void 0);
+    setFieldValue(fieldName, multiple ? Array.from(files) : files[0]);
+  };
+  const fileNames = (0, import_core7.getFileNames)(value);
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    "div",
+    {
+      className: "fe-file-upload",
+      "data-field-type": "FileUpload",
+      "data-field-state": (0, import_adapter_utils.getFieldState)({ error, required, readOnly }),
+      "data-testid": (0, import_adapter_utils.GetFieldDataTestId)(fieldName, programName, entityType, entityId),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            className: "fe-file-upload__input",
+            multiple,
+            accept,
+            onChange,
+            "aria-invalid": !!error,
+            "aria-required": required,
+            style: { display: "none" },
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "fe-file-upload__button",
+            onClick: () => inputRef.current?.click(),
+            children: fileNames ? "Change file" : "Choose file"
+          }
+        ),
+        fileNames && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fe-file-upload__filenames", children: fileNames }),
+        sizeError && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fe-file-upload__size-error", role: "alert", children: sizeError })
+      ]
+    }
+  );
+};
+var FileUpload_default = FileUpload;
+
+// src/fields/ColorPicker.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var ColorPicker = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, setFieldValue } = props;
+  const color = value ?? "#000000";
+  const onChange = (event) => {
+    setFieldValue(fieldName, event.target.value);
+  };
+  if (readOnly) {
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ReadOnlyText, { fieldName, value: color });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "fe-color-picker", "data-field-type": "ColorPicker", "data-field-state": (0, import_adapter_utils.getFieldState)({ error, required, readOnly }), style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("input", { type: "color", className: "fe-color-picker__input", value: color, onChange, "aria-invalid": !!error, "aria-required": required, "data-testid": (0, import_adapter_utils.GetFieldDataTestId)(fieldName, programName, entityType, entityId) }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "fe-color-picker__value", children: color })
+  ] });
+};
+var ColorPicker_default = ColorPicker;
+
+// src/fields/MultiSelectSearch.tsx
+var import_react4 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var MultiSelectSearch = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, options, setFieldValue } = props;
+  const [searchTerm, setSearchTerm] = (0, import_react4.useState)("");
+  const selectedValues = value ?? [];
+  const filteredOptions = (0, import_react4.useMemo)(() => {
+    if (!searchTerm) return options ?? [];
+    const lower = searchTerm.toLowerCase();
+    return (options ?? []).filter((o) => o.label.toLowerCase().includes(lower));
+  }, [options, searchTerm]);
+  const onCheckChange = (optionValue, checked) => {
+    const updated = checked ? [...selectedValues, optionValue] : selectedValues.filter((v) => v !== optionValue);
+    setFieldValue(fieldName, updated, false, 3e3);
+  };
+  if (readOnly) {
+    return selectedValues.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("ul", { className: "fe-multi-select-search-readonly", "data-field-type": "MultiSelectSearch", "data-field-state": "readonly", children: selectedValues.map((v, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("li", { children: v }, i)) }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "fe-read-only-text", children: "-" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "fe-multi-select-search", "data-field-type": "MultiSelectSearch", "data-field-state": (0, import_adapter_utils.getFieldState)({ error, required, readOnly }), "data-testid": (0, import_adapter_utils.GetFieldDataTestId)(fieldName, programName, entityType, entityId), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("input", { type: "search", className: "fe-multi-select-search__input", placeholder: "Search...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), "aria-label": `Search options for ${fieldName}` }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("fieldset", { className: "fe-multi-select-search__options", "aria-invalid": !!error, "aria-required": required, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("legend", { className: "fe-sr-only", children: "Options" }),
+      filteredOptions.map((option) => {
+        const optVal = String(option.value);
+        const isChecked = selectedValues.includes(optVal);
+        return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("label", { className: "fe-multi-select-search__option", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("input", { type: "checkbox", checked: isChecked, disabled: option.disabled, onChange: (e) => onCheckChange(optVal, e.target.checked) }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: option.label })
+        ] }, optVal);
+      })
+    ] })
+  ] });
+};
+var MultiSelectSearch_default = MultiSelectSearch;
+
+// src/fields/StatusDropdown.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var StatusDropdown = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, config, options, placeholder, setFieldValue } = props;
+  const onChange = (event) => {
+    setFieldValue(fieldName, event.target.value);
+  };
+  const statusColor = config?.statusColors?.[value];
+  if (readOnly) {
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "fe-status-dropdown fe-status-dropdown--readonly", "data-field-type": "StatusDropdown", "data-field-state": "readonly", children: [
+      statusColor && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "fe-status-dropdown__indicator", style: { backgroundColor: statusColor }, "aria-hidden": "true" }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ReadOnlyText, { fieldName, value })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "fe-status-dropdown", "data-field-type": "StatusDropdown", "data-field-state": (0, import_adapter_utils.getFieldState)({ error, required, readOnly }), children: [
+    statusColor && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "fe-status-dropdown__indicator", style: { backgroundColor: statusColor }, "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("select", { className: "fe-status-dropdown__select", value: value ?? "", onChange, "aria-invalid": !!error, "aria-required": required, "data-testid": (0, import_adapter_utils.GetFieldDataTestId)(fieldName, programName, entityType, entityId), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: "", children: placeholder ?? config?.placeHolder ?? "" }),
+      options?.map((option) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: String(option.value), disabled: option.disabled, children: option.label }, String(option.value)))
+    ] })
+  ] });
+};
+var StatusDropdown_default = StatusDropdown;
+
+// src/fields/DocumentLinks.tsx
+var import_react5 = require("react");
+var import_react_hook_form = require("react-hook-form");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var DocumentLinks = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, setFieldValue } = props;
+  const { watch } = (0, import_react_hook_form.useFormContext)();
+  const documentLinks = watch(`${fieldName}`) ?? [];
+  const [newUrl, setNewUrl] = (0, import_react5.useState)("");
+  const [newText, setNewText] = (0, import_react5.useState)("");
+  const onAddLink = () => {
+    if (!newUrl) return;
+    const link = { url: newUrl, title: newText || newUrl };
+    setFieldValue(fieldName, [...documentLinks, link]);
+    setNewUrl("");
+    setNewText("");
+  };
+  const onDeleteLink = (index) => {
+    const updated = [...documentLinks];
+    updated.splice(index, 1);
+    setFieldValue(fieldName, updated);
+  };
+  if (readOnly) {
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("ul", { className: "fe-document-links fe-document-links--readonly", "data-field-type": "DocumentLinks", "data-field-state": "readonly", children: value?.map((link, i) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("li", { className: "fe-document-links__item", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("a", { href: link.url, target: "_blank", rel: "noopener noreferrer", children: link.title || link.url }) }, i)) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "fe-document-links", "data-field-type": "DocumentLinks", "data-field-state": (0, import_adapter_utils.getFieldState)({ error, required, readOnly }), "data-testid": (0, import_adapter_utils.GetFieldDataTestId)(fieldName, programName, entityType, entityId), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("ul", { className: "fe-document-links__list", children: documentLinks.map((link, i) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("li", { className: "fe-document-links__item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("a", { href: link.url, target: "_blank", rel: "noopener noreferrer", children: link.title || link.url }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { type: "button", className: "fe-document-links__delete", onClick: () => onDeleteLink(i), "aria-label": `${import_adapter_utils.DocumentLinksStrings.deleteLink}: ${link.title || link.url}`, children: "\xD7" })
+    ] }, i)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "fe-document-links__add", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("input", { type: "url", className: "fe-document-links__url-input", placeholder: "URL", value: newUrl, onChange: (e) => setNewUrl(e.target.value), "aria-label": import_adapter_utils.DocumentLinksStrings.link }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("input", { type: "text", className: "fe-document-links__text-input", placeholder: "Label (optional)", value: newText, onChange: (e) => setNewText(e.target.value), "aria-label": "Link label" }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { type: "button", className: "fe-btn fe-btn--secondary", onClick: onAddLink, disabled: !newUrl, children: documentLinks.length > 0 ? import_adapter_utils.DocumentLinksStrings.addAnotherLink : import_adapter_utils.DocumentLinksStrings.addLink })
+    ] })
+  ] });
+};
+var DocumentLinks_default = DocumentLinks;
+
+// src/fields/readonly/ReadOnly.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var ReadOnly = (props) => {
   const { fieldName, value, config } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ReadOnlyText, { fieldName, value, ...config });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ReadOnlyText, { fieldName, value, ...config });
 };
 var ReadOnly_default = ReadOnly;
 
+// src/fields/readonly/ReadOnlyArray.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var ReadOnlyArray = (props) => {
+  const { fieldName, value } = props;
+  const items = value ?? [];
+  if (items.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "fe-read-only-text", "data-field-type": "ReadOnlyArray", children: "-" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("ul", { className: "fe-read-only-array", "data-field-type": "ReadOnlyArray", "data-field-state": "readonly", id: `${fieldName}-read-only`, children: items.map((v, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("li", { children: v }, i)) });
+};
+var ReadOnlyArray_default = ReadOnlyArray;
+
+// src/fields/readonly/ReadOnlyDateTime.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var ReadOnlyDateTime = (props) => {
+  const { config, value } = props;
+  if (!value) {
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "fe-read-only-text", "data-field-type": "ReadOnlyDateTime", children: "-" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("time", { className: "fe-read-only-date-time", dateTime: value, "data-field-type": "ReadOnlyDateTime", "data-field-state": "readonly", children: (0, import_adapter_utils.formatDateTime)(value, { hideTimestamp: config?.hidetimeStamp }) });
+};
+var ReadOnlyDateTime_default = ReadOnlyDateTime;
+
+// src/fields/readonly/ReadOnlyCumulativeNumber.tsx
+var import_core8 = require("@form-eng/core");
+var import_react6 = __toESM(require("react"));
+var import_react_hook_form2 = require("react-hook-form");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var ReadOnlyCumulativeNumber = (props) => {
+  const { fieldName, config } = props;
+  const { formState, getValues } = (0, import_react_hook_form2.useFormContext)();
+  const [value, setValue] = import_react6.default.useState();
+  const { dependencyFields } = config || {};
+  import_react6.default.useEffect(() => {
+    const formValues = getValues();
+    if (!(0, import_core8.isEmpty)(dependencyFields)) {
+      let totalCount = 0;
+      dependencyFields.map((fn) => {
+        totalCount += Number(formValues[fn]) || 0;
+      });
+      setValue(totalCount);
+    }
+  }, [formState]);
+  if (!fieldName) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { "data-field-type": "ReadOnlyCumulativeNumber", "data-field-state": "readonly", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ReadOnlyText, { fieldName, value: String(value), ...config }) });
+};
+var ReadOnlyCumulativeNumber_default = ReadOnlyCumulativeNumber;
+
+// src/fields/readonly/ReadOnlyRichText.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var ReadOnlyRichText = (props) => {
+  const { value } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "fe-read-only-rich-text", "data-field-type": "ReadOnlyRichText", "data-field-state": "readonly", dangerouslySetInnerHTML: { __html: value || "" } });
+};
+var ReadOnlyRichText_default = ReadOnlyRichText;
+
+// src/fields/readonly/ReadOnlyWithButton.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var ReadOnlyWithButton = (props) => {
+  const { fieldName, value, config } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: `fe-read-only-with-button ${config?.containerClassName ?? ""}`, "data-field-type": "ReadOnlyWithButton", "data-field-state": "readonly", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ReadOnlyText, { fieldName, value: `${value}` }),
+    config?.buttonText && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("button", { type: "button", className: "fe-btn fe-btn--secondary", onClick: config.onButtonClick, children: config.buttonText })
+  ] });
+};
+var ReadOnlyWithButton_default = ReadOnlyWithButton;
+
 // src/components/FormLoading.tsx
-var import_core4 = require("@form-eng/core");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_core9 = require("@form-eng/core");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var FormLoading = (props) => {
   const { loadingShimmerCount, loadingFieldShimmerHeight, inPanel, hideTitleShimmer } = props;
-  const count = loadingShimmerCount || import_core4.FormConstants.loadingShimmerCount;
-  const height = loadingFieldShimmerHeight || import_core4.FormConstants.loadingFieldShimmerHeight;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  const count = loadingShimmerCount || import_core9.FormConstants.loadingShimmerCount;
+  const height = loadingFieldShimmerHeight || import_core9.FormConstants.loadingFieldShimmerHeight;
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "div",
     {
       className: `df-form-loading ${inPanel ? "df-form-loading--panel" : ""}`,
       "data-field-type": "FormLoading",
       role: "status",
       "aria-label": "Loading form",
-      children: [...Array(count)].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "df-form-loading__field", children: [
-        !hideTitleShimmer && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "df-skeleton df-skeleton--label", style: { width: "33%" } }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "df-skeleton df-skeleton--input", style: { height: `${height}px` } })
+      children: [...Array(count)].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "df-form-loading__field", children: [
+        !hideTitleShimmer && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "df-skeleton df-skeleton--label", style: { width: "33%" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "df-skeleton df-skeleton--input", style: { height: `${height}px` } })
       ] }, `df-loading-${i}`))
     }
   );
 };
 
 // src/registry.ts
-var import_core5 = require("@form-eng/core");
-var import_react3 = __toESM(require("react"));
+var import_core10 = require("@form-eng/core");
+var import_react7 = __toESM(require("react"));
 function createReactAriaFieldRegistry() {
   return {
-    [import_core5.ComponentTypes.Textbox]: import_react3.default.createElement(Textbox_default),
-    [import_core5.ComponentTypes.Number]: import_react3.default.createElement(Number_default),
-    [import_core5.ComponentTypes.Toggle]: import_react3.default.createElement(Toggle_default),
-    [import_core5.ComponentTypes.Dropdown]: import_react3.default.createElement(Dropdown_default),
-    [import_core5.ComponentTypes.MultiSelect]: import_react3.default.createElement(MultiSelect_default),
-    [import_core5.ComponentTypes.DateControl]: import_react3.default.createElement(DateControl_default),
-    [import_core5.ComponentTypes.Slider]: import_react3.default.createElement(Slider_default),
-    [import_core5.ComponentTypes.Fragment]: import_react3.default.createElement(DynamicFragment_default),
-    [import_core5.ComponentTypes.SimpleDropdown]: import_react3.default.createElement(SimpleDropdown_default),
-    [import_core5.ComponentTypes.Textarea]: import_react3.default.createElement(Textarea_default),
-    [import_core5.ComponentTypes.RadioGroup]: import_react3.default.createElement(RadioGroup_default),
-    [import_core5.ComponentTypes.CheckboxGroup]: import_react3.default.createElement(CheckboxGroup_default),
-    [import_core5.ComponentTypes.ReadOnly]: import_react3.default.createElement(ReadOnly_default)
+    [import_core10.ComponentTypes.Textbox]: import_react7.default.createElement(Textbox_default),
+    [import_core10.ComponentTypes.Number]: import_react7.default.createElement(Number_default),
+    [import_core10.ComponentTypes.Toggle]: import_react7.default.createElement(Toggle_default),
+    [import_core10.ComponentTypes.Dropdown]: import_react7.default.createElement(Dropdown_default),
+    [import_core10.ComponentTypes.MultiSelect]: import_react7.default.createElement(MultiSelect_default),
+    [import_core10.ComponentTypes.DateControl]: import_react7.default.createElement(DateControl_default),
+    [import_core10.ComponentTypes.Slider]: import_react7.default.createElement(Slider_default),
+    [import_core10.ComponentTypes.Fragment]: import_react7.default.createElement(DynamicFragment_default),
+    [import_core10.ComponentTypes.SimpleDropdown]: import_react7.default.createElement(SimpleDropdown_default),
+    [import_core10.ComponentTypes.Textarea]: import_react7.default.createElement(Textarea_default),
+    [import_core10.ComponentTypes.RadioGroup]: import_react7.default.createElement(RadioGroup_default),
+    [import_core10.ComponentTypes.CheckboxGroup]: import_react7.default.createElement(CheckboxGroup_default),
+    [import_core10.ComponentTypes.Rating]: import_react7.default.createElement(Rating_default),
+    [import_core10.ComponentTypes.Autocomplete]: import_react7.default.createElement(Autocomplete_default),
+    [import_core10.ComponentTypes.DateTime]: import_react7.default.createElement(DateTime_default),
+    [import_core10.ComponentTypes.DateRange]: import_react7.default.createElement(DateRange_default),
+    [import_core10.ComponentTypes.PhoneInput]: import_react7.default.createElement(PhoneInput_default),
+    [import_core10.ComponentTypes.FileUpload]: import_react7.default.createElement(FileUpload_default),
+    [import_core10.ComponentTypes.ReadOnly]: import_react7.default.createElement(ReadOnly_default),
+    [import_core10.ComponentTypes.ColorPicker]: import_react7.default.createElement(ColorPicker_default),
+    [import_core10.ComponentTypes.MultiSelectSearch]: import_react7.default.createElement(MultiSelectSearch_default),
+    [import_core10.ComponentTypes.StatusDropdown]: import_react7.default.createElement(StatusDropdown_default),
+    [import_core10.ComponentTypes.DocumentLinks]: import_react7.default.createElement(DocumentLinks_default),
+    [import_core10.ComponentTypes.ReadOnlyArray]: import_react7.default.createElement(ReadOnlyArray_default),
+    [import_core10.ComponentTypes.ReadOnlyDateTime]: import_react7.default.createElement(ReadOnlyDateTime_default),
+    [import_core10.ComponentTypes.ReadOnlyCumulativeNumber]: import_react7.default.createElement(ReadOnlyCumulativeNumber_default),
+    [import_core10.ComponentTypes.ReadOnlyRichText]: import_react7.default.createElement(ReadOnlyRichText_default),
+    [import_core10.ComponentTypes.ReadOnlyWithButton]: import_react7.default.createElement(ReadOnlyWithButton_default)
   };
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Autocomplete,
   CheckboxGroup,
+  ColorPicker,
   DateControl,
+  DateRange,
+  DateTime,
+  DocumentLinks,
+  DocumentLinksStrings,
   Dropdown,
   DynamicFragment,
+  FileUpload,
   FormLoading,
   GetFieldDataTestId,
   MultiSelect,
+  MultiSelectSearch,
   Number,
+  PhoneInput,
   RadioGroup,
+  Rating,
   ReadOnly,
+  ReadOnlyArray,
+  ReadOnlyCumulativeNumber,
+  ReadOnlyDateTime,
+  ReadOnlyRichText,
   ReadOnlyText,
+  ReadOnlyWithButton,
   SimpleDropdown,
   Slider,
+  StatusDropdown,
   StatusMessage,
   Textarea,
   Textbox,