@form-eng/chakra 1.1.1

package/dist/index.js

@@ -0,0 +1,832 @@
+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, {
+  CheckboxGroup: () => CheckboxGroup_default,
+  DateControl: () => DateControl_default,
+  DocumentLinksStrings: () => import_core.DocumentLinksStrings,
+  Dropdown: () => Dropdown_default,
+  DynamicFragment: () => DynamicFragment_default,
+  FieldClassName: () => import_core.FieldClassName,
+  FormLoading: () => FormLoading,
+  GetFieldDataTestId: () => import_core.GetFieldDataTestId,
+  MultiSelect: () => MultiSelect_default,
+  Number: () => Number_default,
+  RadioGroup: () => RadioGroup_default,
+  ReadOnly: () => ReadOnly_default,
+  ReadOnlyText: () => ReadOnlyText,
+  SimpleDropdown: () => SimpleDropdown_default,
+  Slider: () => Slider_default,
+  StatusMessage: () => StatusMessage,
+  Textarea: () => Textarea_default,
+  Textbox: () => Textbox_default,
+  Toggle: () => Toggle_default,
+  createChakraFieldRegistry: () => createChakraFieldRegistry,
+  formatDateTime: () => import_core.formatDateTime,
+  getFieldState: () => import_core.getFieldState
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/fields/Textbox.tsx
+var import_react = require("@chakra-ui/react");
+
+// src/components/ReadOnlyText.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var ReadOnlyText = (props) => {
+  const { value, fieldName, ellipsifyTextCharacters } = props;
+  const cutoff = (ellipsifyTextCharacters || 0) - 3;
+  const displayValue = value ? ellipsifyTextCharacters && value.length > ellipsifyTextCharacters ? `${value.substring(0, cutoff)}...` : value : "-";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      id: `${fieldName}-read-only`,
+      className: "fe-read-only-text",
+      title: value,
+      children: displayValue
+    }
+  );
+};
+
+// src/helpers.ts
+var import_core = require("@form-eng/core");
+
+// 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);
+  };
+  if (readOnly) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      ReadOnlyText,
+      {
+        fieldName,
+        value,
+        ellipsifyTextCharacters: config?.ellipsifyTextCharacters
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react.Input,
+    {
+      type: "text",
+      autoComplete: "off",
+      value: value ?? "",
+      onChange,
+      placeholder: placeholder ?? config?.placeHolder,
+      "aria-invalid": !!error,
+      "aria-required": required,
+      "data-field-type": "Textbox",
+      "data-field-state": (0, import_core.getFieldState)({ error, required, readOnly }),
+      "data-testid": (0, import_core.GetFieldDataTestId)(fieldName, programName, entityType, entityId)
+    }
+  );
+};
+var Textbox_default = Textbox;
+
+// src/fields/Number.tsx
+var import_core2 = require("@form-eng/core");
+var import_react2 = require("@chakra-ui/react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var NumberField = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, setFieldValue } = props;
+  const onChange = (event) => {
+    const number = Number(event.target.value);
+    if (!isNaN(number)) {
+      setFieldValue(fieldName, number, false, 1500);
+    }
+  };
+  if (readOnly) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ReadOnlyText, { fieldName, value: String(value) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_react2.Input,
+    {
+      type: "number",
+      autoComplete: "off",
+      value: !(0, import_core2.isNull)(value) ? String(value) : "",
+      onChange,
+      "aria-invalid": !!error,
+      "aria-required": required,
+      "data-field-type": "Number",
+      "data-field-state": (0, import_core.getFieldState)({ error, required, readOnly }),
+      "data-testid": (0, import_core.GetFieldDataTestId)(fieldName, programName, entityType, entityId)
+    }
+  );
+};
+var Number_default = NumberField;
+
+// src/fields/Toggle.tsx
+var import_core3 = require("@form-eng/core");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Toggle = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, label, setFieldValue } = props;
+  const onChange = (event) => {
+    setFieldValue(fieldName, event.target.checked);
+  };
+  if (readOnly) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ReadOnlyText, { fieldName, value: (0, import_core3.convertBooleanToYesOrNoText)(value) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "label",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "8px",
+        cursor: "pointer"
+      },
+      "data-field-type": "Toggle",
+      "data-field-state": (0, import_core.getFieldState)({ error, required, readOnly }),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "input",
+          {
+            type: "checkbox",
+            role: "switch",
+            checked: !!value,
+            onChange,
+            "aria-invalid": !!error,
+            "aria-required": required,
+            "data-testid": (0, import_core.GetFieldDataTestId)(fieldName, programName, entityType, entityId),
+            style: { accentColor: "var(--chakra-colors-blue-500, #3182CE)" }
+          }
+        ),
+        label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { fontSize: "var(--chakra-fontSizes-md, 16px)" }, children: label })
+      ]
+    }
+  );
+};
+var Toggle_default = Toggle;
+
+// src/fields/Dropdown.tsx
+var import_react3 = require("@chakra-ui/react");
+var import_react4 = __toESM(require("react"));
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Dropdown = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, config, error, required, options, placeholder, setFieldValue } = props;
+  const onChange = (event) => {
+    setFieldValue(fieldName, event.target.value);
+  };
+  import_react4.default.useEffect(() => {
+    if (!value && !readOnly && config?.setDefaultKeyIfOnlyOneOption && options?.length === 1) {
+      setFieldValue(fieldName, String(options[0].value));
+    }
+  }, [options]);
+  if (readOnly) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ReadOnlyText, { fieldName, value });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    import_react3.NativeSelect.Root,
+    {
+      "data-field-type": "Dropdown",
+      "data-field-state": (0, import_core.getFieldState)({ error, required, readOnly }),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          import_react3.NativeSelect.Field,
+          {
+            value: value ?? "",
+            onChange,
+            "aria-invalid": !!error,
+            "aria-required": required,
+            "data-testid": (0, import_core.GetFieldDataTestId)(fieldName, programName, entityType, entityId),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "", children: placeholder ?? config?.placeHolder ?? "" }),
+              options?.map((option) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: String(option.value), disabled: option.disabled, children: option.label }, String(option.value)))
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react3.NativeSelect.Indicator, {})
+      ]
+    }
+  );
+};
+var Dropdown_default = Dropdown;
+
+// src/fields/SimpleDropdown.tsx
+var import_react5 = require("@chakra-ui/react");
+var import_jsx_runtime6 = 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);
+  };
+  if (readOnly) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ReadOnlyText, { fieldName, value });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    import_react5.NativeSelect.Root,
+    {
+      "data-field-type": "SimpleDropdown",
+      "data-field-state": (0, import_core.getFieldState)({ error, required, readOnly }),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          import_react5.NativeSelect.Field,
+          {
+            value: value ?? "",
+            onChange,
+            "aria-invalid": !!error,
+            "aria-required": required,
+            "data-testid": (0, import_core.GetFieldDataTestId)(fieldName, programName, entityType, entityId),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "", children: placeholder ?? config?.placeHolder ?? "" }),
+              simpleOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: option, children: option }, option))
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react5.NativeSelect.Indicator, {})
+      ]
+    }
+  );
+};
+var SimpleDropdown_default = SimpleDropdown;
+
+// src/fields/MultiSelect.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var MultiSelect = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, options, setFieldValue } = props;
+  const selectedValues = value ?? [];
+  const onChange = (event) => {
+    const selected = Array.from(event.target.selectedOptions, (opt) => opt.value);
+    setFieldValue(fieldName, selected, false, 1500);
+  };
+  if (readOnly) {
+    return selectedValues.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "ul",
+      {
+        style: { listStyle: "none", padding: 0, margin: 0 },
+        "data-field-type": "MultiSelect",
+        "data-field-state": "readonly",
+        children: selectedValues.map((v, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("li", { style: { padding: "2px 0" }, children: v }, i))
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "fe-read-only-text", children: "-" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "select",
+    {
+      multiple: true,
+      style: {
+        width: "100%",
+        minHeight: "80px",
+        padding: "8px",
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderColor: error ? "var(--chakra-colors-red-500, #E53E3E)" : "var(--chakra-colors-gray-200, #E2E8F0)",
+        borderRadius: "var(--chakra-radii-md, 6px)",
+        fontSize: "var(--chakra-fontSizes-md, 16px)",
+        background: "var(--chakra-colors-white, #FFFFFF)"
+      },
+      value: selectedValues,
+      onChange,
+      "aria-invalid": !!error,
+      "aria-required": required,
+      "data-field-type": "MultiSelect",
+      "data-field-state": (0, import_core.getFieldState)({ error, required, readOnly }),
+      "data-testid": (0, import_core.GetFieldDataTestId)(fieldName, programName, entityType, entityId),
+      children: options?.map((option) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: String(option.value), disabled: option.disabled, children: option.label }, String(option.value)))
+    }
+  );
+};
+var MultiSelect_default = MultiSelect;
+
+// src/fields/DateControl.tsx
+var import_core4 = require("@form-eng/core");
+var import_react6 = require("@chakra-ui/react");
+var import_jsx_runtime8 = 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 onClear = () => {
+    setFieldValue(fieldName, null);
+  };
+  const dateInputValue = value ? new Date(value).toISOString().split("T")[0] : "";
+  if (readOnly) {
+    return value ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "time",
+      {
+        className: "fe-read-only-date",
+        dateTime: value,
+        "data-field-type": "DateControl",
+        "data-field-state": "readonly",
+        children: (0, import_core.formatDateTime)(value, { hideTimestamp: true })
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "fe-read-only-text", children: "-" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "div",
+    {
+      style: { display: "flex", alignItems: "center", gap: "8px" },
+      "data-field-type": "DateControl",
+      "data-field-state": (0, import_core.getFieldState)({ error, required, readOnly }),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          import_react6.Input,
+          {
+            type: "date",
+            value: dateInputValue,
+            onChange,
+            "aria-invalid": !!error,
+            "aria-required": required,
+            "data-testid": (0, import_core.GetFieldDataTestId)(fieldName, programName, entityType, entityId)
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: onClear,
+            title: import_core4.FormStrings.clickToClear,
+            "aria-label": `${fieldName} ${import_core4.FormStrings.clear}`,
+            style: {
+              background: "none",
+              border: "none",
+              cursor: "pointer",
+              fontSize: "18px",
+              color: "var(--chakra-colors-gray-500, #718096)",
+              padding: "4px 8px"
+            },
+            children: "\xD7"
+          }
+        )
+      ]
+    }
+  );
+};
+var DateControl_default = DateControl;
+
+// src/fields/Slider.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Slider = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, config, error, required, setFieldValue } = props;
+  const onChange = (event) => {
+    setFieldValue(fieldName, Number(event.target.value));
+  };
+  if (readOnly) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ReadOnlyText, { fieldName, value: String(value) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "div",
+    {
+      style: { display: "flex", alignItems: "center", gap: "12px" },
+      "data-field-type": "Slider",
+      "data-field-state": (0, import_core.getFieldState)({ error, required, readOnly }),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "input",
+          {
+            type: "range",
+            style: {
+              flex: 1,
+              accentColor: "var(--chakra-colors-blue-500, #3182CE)"
+            },
+            value: value ?? 0,
+            onChange,
+            max: config?.max ?? 100,
+            min: config?.min ?? 0,
+            step: config?.step ?? 1,
+            "aria-invalid": !!error,
+            "aria-required": required,
+            "aria-valuenow": value ?? 0,
+            "aria-valuemin": config?.min ?? 0,
+            "aria-valuemax": config?.max ?? 100,
+            "data-testid": (0, import_core.GetFieldDataTestId)(fieldName, programName, entityType, entityId)
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("output", { style: { minWidth: "32px", textAlign: "center", fontSize: "var(--chakra-fontSizes-md, 16px)" }, children: String(value) })
+      ]
+    }
+  );
+};
+var Slider_default = Slider;
+
+// src/fields/RadioGroup.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var RadioGroup = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, options, setFieldValue } = props;
+  const onChange = (event) => {
+    setFieldValue(fieldName, event.target.value);
+  };
+  if (readOnly) {
+    const label = options?.find((o) => String(o.value) === String(value))?.label ?? value;
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ReadOnlyText, { fieldName, value: label });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "div",
+    {
+      role: "radiogroup",
+      style: { display: "flex", flexDirection: "column", gap: "8px" },
+      "aria-invalid": !!error,
+      "aria-required": required,
+      "data-field-type": "RadioGroup",
+      "data-field-state": (0, import_core.getFieldState)({ error, required, readOnly }),
+      "data-testid": (0, import_core.GetFieldDataTestId)(fieldName, programName, entityType, entityId),
+      children: options?.map((option) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        "label",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            cursor: option.disabled ? "not-allowed" : "pointer",
+            opacity: option.disabled ? 0.5 : 1,
+            fontSize: "var(--chakra-fontSizes-md, 16px)"
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              "input",
+              {
+                type: "radio",
+                name: fieldName,
+                value: String(option.value),
+                checked: String(value) === String(option.value),
+                onChange,
+                disabled: option.disabled,
+                style: { accentColor: "var(--chakra-colors-blue-500, #3182CE)" }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: option.label })
+          ]
+        },
+        String(option.value)
+      ))
+    }
+  );
+};
+var RadioGroup_default = RadioGroup;
+
+// src/fields/CheckboxGroup.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var CheckboxGroup = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, options, setFieldValue } = props;
+  const selected = Array.isArray(value) ? value : [];
+  const onChange = (optionValue) => (event) => {
+    const next = event.target.checked ? [...selected, optionValue] : selected.filter((v) => v !== optionValue);
+    setFieldValue(fieldName, next);
+  };
+  if (readOnly) {
+    const labels = options?.filter((o) => selected.includes(String(o.value))).map((o) => o.label).join(", ");
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ReadOnlyText, { fieldName, value: labels ?? "" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "div",
+    {
+      style: { display: "flex", flexDirection: "column", gap: "8px" },
+      "aria-invalid": !!error,
+      "aria-required": required,
+      "data-field-type": "CheckboxGroup",
+      "data-field-state": (0, import_core.getFieldState)({ error, required, readOnly }),
+      "data-testid": (0, import_core.GetFieldDataTestId)(fieldName, programName, entityType, entityId),
+      children: options?.map((option) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+        "label",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            cursor: option.disabled ? "not-allowed" : "pointer",
+            opacity: option.disabled ? 0.5 : 1,
+            fontSize: "var(--chakra-fontSizes-md, 16px)"
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              "input",
+              {
+                type: "checkbox",
+                value: String(option.value),
+                checked: selected.includes(String(option.value)),
+                onChange: onChange(String(option.value)),
+                disabled: option.disabled,
+                style: { accentColor: "var(--chakra-colors-blue-500, #3182CE)" }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: option.label })
+          ]
+        },
+        String(option.value)
+      ))
+    }
+  );
+};
+var CheckboxGroup_default = CheckboxGroup;
+
+// src/fields/Textarea.tsx
+var import_core6 = require("@form-eng/core");
+var import_react7 = require("@chakra-ui/react");
+var import_react8 = __toESM(require("react"));
+
+// src/components/StatusMessage.tsx
+var import_core5 = require("@form-eng/core");
+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: "fe-status-message", children: error ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { id, role: "alert", style: { color: "var(--chakra-colors-red-500, #E53E3E)" }, children: error.message || "Error" }) : savePending ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { id, role: "alert", style: { color: "var(--chakra-colors-orange-500, #DD6B20)" }, children: [
+    import_core5.FormStrings.autoSavePending,
+    " (",
+    errorCount,
+    " ",
+    import_core5.FormStrings.remaining,
+    ")"
+  ] }) : saving ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { id, role: "status", style: { color: "var(--chakra-colors-gray-500, #718096)" }, children: import_core5.FormStrings.saving }) : null });
+};
+
+// src/fields/Textarea.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Textarea = (props) => {
+  const {
+    error,
+    fieldName,
+    programName,
+    entityType,
+    entityId,
+    config,
+    readOnly,
+    required,
+    savePending,
+    saving,
+    value,
+    label,
+    setFieldValue
+  } = props;
+  const [modalValue, setModalValue] = (0, import_react8.useState)();
+  const [modalVisible, setModalVisible] = (0, import_react8.useState)(false);
+  const [confirmVisible, setConfirmVisible] = (0, import_react8.useState)(false);
+  const dialogRef = import_react8.default.useRef(null);
+  const confirmRef = import_react8.default.useRef(null);
+  const onChange = (event) => {
+    const newValue = event.target.value;
+    modalVisible ? setModalValue(newValue) : setFieldValue(fieldName, newValue, false, 3e3);
+  };
+  const onExpand = () => {
+    setModalVisible(true);
+    setModalValue(value ? `${value}` : "");
+    dialogRef.current?.showModal();
+  };
+  const onSave = () => {
+    setFieldValue(fieldName, modalValue, false);
+    setConfirmVisible(false);
+    setModalVisible(false);
+    dialogRef.current?.close();
+    confirmRef.current?.close();
+    config?.saveCallback?.();
+  };
+  const onCancel = () => {
+    if (confirmVisible) {
+      setConfirmVisible(false);
+      setModalVisible(false);
+      dialogRef.current?.close();
+      confirmRef.current?.close();
+    } else if (modalValue !== value) {
+      setConfirmVisible(true);
+      confirmRef.current?.showModal();
+    } else {
+      setModalVisible(false);
+      dialogRef.current?.close();
+    }
+  };
+  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",
+      {
+        "data-field-type": "Textarea",
+        "data-field-state": (0, import_core.getFieldState)({ error, required, readOnly }),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            import_react7.Textarea,
+            {
+              autoComplete: "off",
+              value: modalVisible ? `${modalValue}` : value ? `${value}` : "",
+              onChange,
+              rows: config?.numberOfRows ?? 4,
+              "aria-invalid": !!error,
+              "aria-required": required,
+              "data-testid": (0, import_core.GetFieldDataTestId)(fieldName, programName, entityType, entityId)
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: onExpand,
+              "aria-label": import_core6.FormStrings.openExpandedTextEditor,
+              style: {
+                marginTop: "4px",
+                background: "none",
+                border: "none",
+                cursor: "pointer",
+                color: "var(--chakra-colors-blue-500, #3182CE)",
+                fontSize: "var(--chakra-fontSizes-sm, 14px)",
+                padding: "2px 0"
+              },
+              children: import_core6.FormStrings.expand
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("dialog", { ref: dialogRef, style: { padding: "24px", borderRadius: "8px", border: "1px solid var(--chakra-colors-gray-200, #E2E8F0)", maxWidth: "640px", width: "100%" }, "aria-label": `${label} editor`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("header", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "16px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("h2", { style: { margin: 0, fontSize: "18px" }, children: [
+          label,
+          required && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { color: "var(--chakra-colors-red-500, #E53E3E)" }, children: " *" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: onCancel,
+            "aria-label": import_core6.FormStrings.closeExpandedTextEditor,
+            style: { background: "none", border: "none", cursor: "pointer", fontSize: "20px" },
+            children: "\xD7"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { marginBottom: "16px" }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        import_react7.Textarea,
+        {
+          autoComplete: "off",
+          value: modalVisible ? `${modalValue}` : value ? `${value}` : "",
+          onChange,
+          rows: 12,
+          "aria-invalid": !!error
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("footer", { style: { display: "flex", justifyContent: "flex-end", alignItems: "center", gap: "8px" }, children: [
+        config?.renderExtraModalFooter && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { children: config.renderExtraModalFooter() }),
+        (savePending || saving) && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StatusMessage, { savePending: !error ? savePending : void 0, saving, error }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: onCancel,
+            style: { padding: "6px 16px", borderRadius: "6px", border: "1px solid var(--chakra-colors-gray-200, #E2E8F0)", background: "white", cursor: "pointer" },
+            children: import_core6.FormStrings.cancel
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: onSave,
+            disabled: !config?.saveCallback && modalValue === value,
+            style: { padding: "6px 16px", borderRadius: "6px", border: "none", background: "var(--chakra-colors-blue-500, #3182CE)", color: "white", cursor: "pointer" },
+            "data-testid": `${programName}-${entityType}-${entityId}-save-note`,
+            children: import_core6.FormStrings.save
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("dialog", { ref: confirmRef, style: { padding: "24px", borderRadius: "8px", border: "1px solid var(--chakra-colors-gray-200, #E2E8F0)" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h2", { style: { margin: "0 0 8px 0", fontSize: "18px" }, children: import_core6.FormStrings.unsavedChanges }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { children: import_core6.FormStrings.saveChangesTo(label) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("footer", { style: { display: "flex", justifyContent: "flex-end", gap: "8px", marginTop: "16px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: onCancel,
+            style: { padding: "6px 16px", borderRadius: "6px", border: "1px solid var(--chakra-colors-gray-200, #E2E8F0)", background: "white", cursor: "pointer" },
+            children: import_core6.FormStrings.dontSave
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: onSave,
+            style: { padding: "6px 16px", borderRadius: "6px", border: "none", background: "var(--chakra-colors-blue-500, #3182CE)", color: "white", cursor: "pointer" },
+            children: import_core6.FormStrings.save
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+var Textarea_default = Textarea;
+
+// src/fields/DynamicFragment.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var DynamicFragment = (props) => {
+  const { value } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("input", { type: "hidden", value });
+};
+var DynamicFragment_default = DynamicFragment;
+
+// src/fields/readonly/ReadOnly.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var ReadOnly = (props) => {
+  const { fieldName, value, config } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ReadOnlyText, { fieldName, value, ...config });
+};
+var ReadOnly_default = ReadOnly;
+
+// src/components/FormLoading.tsx
+var import_core7 = require("@form-eng/core");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var FormLoading = (props) => {
+  const { loadingShimmerCount, loadingFieldShimmerHeight, inPanel, hideTitleShimmer } = props;
+  const count = loadingShimmerCount || import_core7.FormConstants.loadingShimmerCount;
+  const height = loadingFieldShimmerHeight || import_core7.FormConstants.loadingFieldShimmerHeight;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "div",
+    {
+      className: `fe-form-loading ${inPanel ? "fe-form-loading--panel" : ""}`,
+      role: "status",
+      "aria-label": "Loading form",
+      children: [...Array(count)].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { marginBottom: 16 }, children: [
+        !hideTitleShimmer && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "fe-skeleton", style: { width: "33%", height: 16, marginBottom: 8, background: "var(--chakra-colors-gray-200, #E2E8F0)", borderRadius: 4 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "fe-skeleton", style: { width: "100%", height, background: "var(--chakra-colors-gray-200, #E2E8F0)", borderRadius: 4 } })
+      ] }, `fe-loading-${i}`))
+    }
+  );
+};
+
+// src/registry.ts
+var import_core8 = require("@form-eng/core");
+var import_react9 = __toESM(require("react"));
+function createChakraFieldRegistry() {
+  return {
+    [import_core8.ComponentTypes.Textbox]: import_react9.default.createElement(Textbox_default),
+    [import_core8.ComponentTypes.Number]: import_react9.default.createElement(Number_default),
+    [import_core8.ComponentTypes.Toggle]: import_react9.default.createElement(Toggle_default),
+    [import_core8.ComponentTypes.Dropdown]: import_react9.default.createElement(Dropdown_default),
+    [import_core8.ComponentTypes.SimpleDropdown]: import_react9.default.createElement(SimpleDropdown_default),
+    [import_core8.ComponentTypes.MultiSelect]: import_react9.default.createElement(MultiSelect_default),
+    [import_core8.ComponentTypes.DateControl]: import_react9.default.createElement(DateControl_default),
+    [import_core8.ComponentTypes.Slider]: import_react9.default.createElement(Slider_default),
+    [import_core8.ComponentTypes.RadioGroup]: import_react9.default.createElement(RadioGroup_default),
+    [import_core8.ComponentTypes.CheckboxGroup]: import_react9.default.createElement(CheckboxGroup_default),
+    [import_core8.ComponentTypes.Textarea]: import_react9.default.createElement(Textarea_default),
+    [import_core8.ComponentTypes.Fragment]: import_react9.default.createElement(DynamicFragment_default),
+    [import_core8.ComponentTypes.ReadOnly]: import_react9.default.createElement(ReadOnly_default)
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CheckboxGroup,
+  DateControl,
+  DocumentLinksStrings,
+  Dropdown,
+  DynamicFragment,
+  FieldClassName,
+  FormLoading,
+  GetFieldDataTestId,
+  MultiSelect,
+  Number,
+  RadioGroup,
+  ReadOnly,
+  ReadOnlyText,
+  SimpleDropdown,
+  Slider,
+  StatusMessage,
+  Textarea,
+  Textbox,
+  Toggle,
+  createChakraFieldRegistry,
+  formatDateTime,
+  getFieldState
+});
+//# sourceMappingURL=index.js.map