@form-eng/chakra 1.1.1

package/dist/index.mjs

@@ -0,0 +1,781 @@
+// src/fields/Textbox.tsx
+import { Input } from "@chakra-ui/react";
+
+// src/components/ReadOnlyText.tsx
+import { jsx } from "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__ */ jsx(
+    "span",
+    {
+      id: `${fieldName}-read-only`,
+      className: "fe-read-only-text",
+      title: value,
+      children: displayValue
+    }
+  );
+};
+
+// src/helpers.ts
+import {
+  FieldClassName,
+  GetFieldDataTestId,
+  getFieldState,
+  formatDateTime,
+  DocumentLinksStrings
+} from "@form-eng/core";
+
+// src/fields/Textbox.tsx
+import { jsx as jsx2 } from "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__ */ jsx2(
+      ReadOnlyText,
+      {
+        fieldName,
+        value,
+        ellipsifyTextCharacters: config?.ellipsifyTextCharacters
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx2(
+    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": getFieldState({ error, required, readOnly }),
+      "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId)
+    }
+  );
+};
+var Textbox_default = Textbox;
+
+// src/fields/Number.tsx
+import { isNull } from "@form-eng/core";
+import { Input as Input2 } from "@chakra-ui/react";
+import { jsx as jsx3 } from "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__ */ jsx3(ReadOnlyText, { fieldName, value: String(value) });
+  }
+  return /* @__PURE__ */ jsx3(
+    Input2,
+    {
+      type: "number",
+      autoComplete: "off",
+      value: !isNull(value) ? String(value) : "",
+      onChange,
+      "aria-invalid": !!error,
+      "aria-required": required,
+      "data-field-type": "Number",
+      "data-field-state": getFieldState({ error, required, readOnly }),
+      "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId)
+    }
+  );
+};
+var Number_default = NumberField;
+
+// src/fields/Toggle.tsx
+import { convertBooleanToYesOrNoText } from "@form-eng/core";
+import { jsx as jsx4, jsxs } from "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__ */ jsx4(ReadOnlyText, { fieldName, value: convertBooleanToYesOrNoText(value) });
+  }
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "8px",
+        cursor: "pointer"
+      },
+      "data-field-type": "Toggle",
+      "data-field-state": getFieldState({ error, required, readOnly }),
+      children: [
+        /* @__PURE__ */ jsx4(
+          "input",
+          {
+            type: "checkbox",
+            role: "switch",
+            checked: !!value,
+            onChange,
+            "aria-invalid": !!error,
+            "aria-required": required,
+            "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId),
+            style: { accentColor: "var(--chakra-colors-blue-500, #3182CE)" }
+          }
+        ),
+        label && /* @__PURE__ */ jsx4("span", { style: { fontSize: "var(--chakra-fontSizes-md, 16px)" }, children: label })
+      ]
+    }
+  );
+};
+var Toggle_default = Toggle;
+
+// src/fields/Dropdown.tsx
+import { NativeSelect } from "@chakra-ui/react";
+import React from "react";
+import { jsx as jsx5, jsxs as jsxs2 } from "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);
+  };
+  React.useEffect(() => {
+    if (!value && !readOnly && config?.setDefaultKeyIfOnlyOneOption && options?.length === 1) {
+      setFieldValue(fieldName, String(options[0].value));
+    }
+  }, [options]);
+  if (readOnly) {
+    return /* @__PURE__ */ jsx5(ReadOnlyText, { fieldName, value });
+  }
+  return /* @__PURE__ */ jsxs2(
+    NativeSelect.Root,
+    {
+      "data-field-type": "Dropdown",
+      "data-field-state": getFieldState({ error, required, readOnly }),
+      children: [
+        /* @__PURE__ */ jsxs2(
+          NativeSelect.Field,
+          {
+            value: value ?? "",
+            onChange,
+            "aria-invalid": !!error,
+            "aria-required": required,
+            "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId),
+            children: [
+              /* @__PURE__ */ jsx5("option", { value: "", children: placeholder ?? config?.placeHolder ?? "" }),
+              options?.map((option) => /* @__PURE__ */ jsx5("option", { value: String(option.value), disabled: option.disabled, children: option.label }, String(option.value)))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx5(NativeSelect.Indicator, {})
+      ]
+    }
+  );
+};
+var Dropdown_default = Dropdown;
+
+// src/fields/SimpleDropdown.tsx
+import { NativeSelect as NativeSelect2 } from "@chakra-ui/react";
+import { jsx as jsx6, jsxs as jsxs3 } from "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__ */ jsx6(ReadOnlyText, { fieldName, value });
+  }
+  return /* @__PURE__ */ jsxs3(
+    NativeSelect2.Root,
+    {
+      "data-field-type": "SimpleDropdown",
+      "data-field-state": getFieldState({ error, required, readOnly }),
+      children: [
+        /* @__PURE__ */ jsxs3(
+          NativeSelect2.Field,
+          {
+            value: value ?? "",
+            onChange,
+            "aria-invalid": !!error,
+            "aria-required": required,
+            "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId),
+            children: [
+              /* @__PURE__ */ jsx6("option", { value: "", children: placeholder ?? config?.placeHolder ?? "" }),
+              simpleOptions.map((option) => /* @__PURE__ */ jsx6("option", { value: option, children: option }, option))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx6(NativeSelect2.Indicator, {})
+      ]
+    }
+  );
+};
+var SimpleDropdown_default = SimpleDropdown;
+
+// src/fields/MultiSelect.tsx
+import { jsx as jsx7 } from "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__ */ jsx7(
+      "ul",
+      {
+        style: { listStyle: "none", padding: 0, margin: 0 },
+        "data-field-type": "MultiSelect",
+        "data-field-state": "readonly",
+        children: selectedValues.map((v, i) => /* @__PURE__ */ jsx7("li", { style: { padding: "2px 0" }, children: v }, i))
+      }
+    ) : /* @__PURE__ */ jsx7("span", { className: "fe-read-only-text", children: "-" });
+  }
+  return /* @__PURE__ */ jsx7(
+    "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": getFieldState({ error, required, readOnly }),
+      "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId),
+      children: options?.map((option) => /* @__PURE__ */ jsx7("option", { value: String(option.value), disabled: option.disabled, children: option.label }, String(option.value)))
+    }
+  );
+};
+var MultiSelect_default = MultiSelect;
+
+// src/fields/DateControl.tsx
+import { FormStrings } from "@form-eng/core";
+import { Input as Input3 } from "@chakra-ui/react";
+import { jsx as jsx8, jsxs as jsxs4 } from "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__ */ jsx8(
+      "time",
+      {
+        className: "fe-read-only-date",
+        dateTime: value,
+        "data-field-type": "DateControl",
+        "data-field-state": "readonly",
+        children: formatDateTime(value, { hideTimestamp: true })
+      }
+    ) : /* @__PURE__ */ jsx8("span", { className: "fe-read-only-text", children: "-" });
+  }
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      style: { display: "flex", alignItems: "center", gap: "8px" },
+      "data-field-type": "DateControl",
+      "data-field-state": getFieldState({ error, required, readOnly }),
+      children: [
+        /* @__PURE__ */ jsx8(
+          Input3,
+          {
+            type: "date",
+            value: dateInputValue,
+            onChange,
+            "aria-invalid": !!error,
+            "aria-required": required,
+            "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId)
+          }
+        ),
+        /* @__PURE__ */ jsx8(
+          "button",
+          {
+            type: "button",
+            onClick: onClear,
+            title: FormStrings.clickToClear,
+            "aria-label": `${fieldName} ${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
+import { jsx as jsx9, jsxs as jsxs5 } from "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__ */ jsx9(ReadOnlyText, { fieldName, value: String(value) });
+  }
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      style: { display: "flex", alignItems: "center", gap: "12px" },
+      "data-field-type": "Slider",
+      "data-field-state": getFieldState({ error, required, readOnly }),
+      children: [
+        /* @__PURE__ */ jsx9(
+          "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": GetFieldDataTestId(fieldName, programName, entityType, entityId)
+          }
+        ),
+        /* @__PURE__ */ jsx9("output", { style: { minWidth: "32px", textAlign: "center", fontSize: "var(--chakra-fontSizes-md, 16px)" }, children: String(value) })
+      ]
+    }
+  );
+};
+var Slider_default = Slider;
+
+// src/fields/RadioGroup.tsx
+import { jsx as jsx10, jsxs as jsxs6 } from "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__ */ jsx10(ReadOnlyText, { fieldName, value: label });
+  }
+  return /* @__PURE__ */ jsx10(
+    "div",
+    {
+      role: "radiogroup",
+      style: { display: "flex", flexDirection: "column", gap: "8px" },
+      "aria-invalid": !!error,
+      "aria-required": required,
+      "data-field-type": "RadioGroup",
+      "data-field-state": getFieldState({ error, required, readOnly }),
+      "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId),
+      children: options?.map((option) => /* @__PURE__ */ jsxs6(
+        "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__ */ jsx10(
+              "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__ */ jsx10("span", { children: option.label })
+          ]
+        },
+        String(option.value)
+      ))
+    }
+  );
+};
+var RadioGroup_default = RadioGroup;
+
+// src/fields/CheckboxGroup.tsx
+import { jsx as jsx11, jsxs as jsxs7 } from "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__ */ jsx11(ReadOnlyText, { fieldName, value: labels ?? "" });
+  }
+  return /* @__PURE__ */ jsx11(
+    "div",
+    {
+      style: { display: "flex", flexDirection: "column", gap: "8px" },
+      "aria-invalid": !!error,
+      "aria-required": required,
+      "data-field-type": "CheckboxGroup",
+      "data-field-state": getFieldState({ error, required, readOnly }),
+      "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId),
+      children: options?.map((option) => /* @__PURE__ */ jsxs7(
+        "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__ */ jsx11(
+              "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__ */ jsx11("span", { children: option.label })
+          ]
+        },
+        String(option.value)
+      ))
+    }
+  );
+};
+var CheckboxGroup_default = CheckboxGroup;
+
+// src/fields/Textarea.tsx
+import { FormStrings as FormStrings3 } from "@form-eng/core";
+import { Textarea as ChakraTextarea } from "@chakra-ui/react";
+import React2, { useState } from "react";
+
+// src/components/StatusMessage.tsx
+import { FormStrings as FormStrings2 } from "@form-eng/core";
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+var StatusMessage = (props) => {
+  const { id, error, errorCount, savePending, saving } = props;
+  return /* @__PURE__ */ jsx12("div", { className: "fe-status-message", children: error ? /* @__PURE__ */ jsx12("span", { id, role: "alert", style: { color: "var(--chakra-colors-red-500, #E53E3E)" }, children: error.message || "Error" }) : savePending ? /* @__PURE__ */ jsxs8("span", { id, role: "alert", style: { color: "var(--chakra-colors-orange-500, #DD6B20)" }, children: [
+    FormStrings2.autoSavePending,
+    " (",
+    errorCount,
+    " ",
+    FormStrings2.remaining,
+    ")"
+  ] }) : saving ? /* @__PURE__ */ jsx12("span", { id, role: "status", style: { color: "var(--chakra-colors-gray-500, #718096)" }, children: FormStrings2.saving }) : null });
+};
+
+// src/fields/Textarea.tsx
+import { Fragment, jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+var Textarea = (props) => {
+  const {
+    error,
+    fieldName,
+    programName,
+    entityType,
+    entityId,
+    config,
+    readOnly,
+    required,
+    savePending,
+    saving,
+    value,
+    label,
+    setFieldValue
+  } = props;
+  const [modalValue, setModalValue] = useState();
+  const [modalVisible, setModalVisible] = useState(false);
+  const [confirmVisible, setConfirmVisible] = useState(false);
+  const dialogRef = React2.useRef(null);
+  const confirmRef = React2.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__ */ jsx13(
+      ReadOnlyText,
+      {
+        fieldName,
+        value: value ? `${value}` : "",
+        ellipsifyTextCharacters: config?.ellipsifyTextCharacters
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs9(Fragment, { children: [
+    /* @__PURE__ */ jsxs9(
+      "div",
+      {
+        "data-field-type": "Textarea",
+        "data-field-state": getFieldState({ error, required, readOnly }),
+        children: [
+          /* @__PURE__ */ jsx13(
+            ChakraTextarea,
+            {
+              autoComplete: "off",
+              value: modalVisible ? `${modalValue}` : value ? `${value}` : "",
+              onChange,
+              rows: config?.numberOfRows ?? 4,
+              "aria-invalid": !!error,
+              "aria-required": required,
+              "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId)
+            }
+          ),
+          /* @__PURE__ */ jsx13(
+            "button",
+            {
+              type: "button",
+              onClick: onExpand,
+              "aria-label": FormStrings3.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: FormStrings3.expand
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs9("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__ */ jsxs9("header", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "16px" }, children: [
+        /* @__PURE__ */ jsxs9("h2", { style: { margin: 0, fontSize: "18px" }, children: [
+          label,
+          required && /* @__PURE__ */ jsx13("span", { style: { color: "var(--chakra-colors-red-500, #E53E3E)" }, children: " *" })
+        ] }),
+        /* @__PURE__ */ jsx13(
+          "button",
+          {
+            type: "button",
+            onClick: onCancel,
+            "aria-label": FormStrings3.closeExpandedTextEditor,
+            style: { background: "none", border: "none", cursor: "pointer", fontSize: "20px" },
+            children: "\xD7"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx13("div", { style: { marginBottom: "16px" }, children: /* @__PURE__ */ jsx13(
+        ChakraTextarea,
+        {
+          autoComplete: "off",
+          value: modalVisible ? `${modalValue}` : value ? `${value}` : "",
+          onChange,
+          rows: 12,
+          "aria-invalid": !!error
+        }
+      ) }),
+      /* @__PURE__ */ jsxs9("footer", { style: { display: "flex", justifyContent: "flex-end", alignItems: "center", gap: "8px" }, children: [
+        config?.renderExtraModalFooter && /* @__PURE__ */ jsx13("div", { children: config.renderExtraModalFooter() }),
+        (savePending || saving) && /* @__PURE__ */ jsx13(StatusMessage, { savePending: !error ? savePending : void 0, saving, error }),
+        /* @__PURE__ */ jsx13(
+          "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: FormStrings3.cancel
+          }
+        ),
+        /* @__PURE__ */ jsx13(
+          "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: FormStrings3.save
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs9("dialog", { ref: confirmRef, style: { padding: "24px", borderRadius: "8px", border: "1px solid var(--chakra-colors-gray-200, #E2E8F0)" }, children: [
+      /* @__PURE__ */ jsx13("h2", { style: { margin: "0 0 8px 0", fontSize: "18px" }, children: FormStrings3.unsavedChanges }),
+      /* @__PURE__ */ jsx13("p", { children: FormStrings3.saveChangesTo(label) }),
+      /* @__PURE__ */ jsxs9("footer", { style: { display: "flex", justifyContent: "flex-end", gap: "8px", marginTop: "16px" }, children: [
+        /* @__PURE__ */ jsx13(
+          "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: FormStrings3.dontSave
+          }
+        ),
+        /* @__PURE__ */ jsx13(
+          "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: FormStrings3.save
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+var Textarea_default = Textarea;
+
+// src/fields/DynamicFragment.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+var DynamicFragment = (props) => {
+  const { value } = props;
+  return /* @__PURE__ */ jsx14("input", { type: "hidden", value });
+};
+var DynamicFragment_default = DynamicFragment;
+
+// src/fields/readonly/ReadOnly.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+var ReadOnly = (props) => {
+  const { fieldName, value, config } = props;
+  return /* @__PURE__ */ jsx15(ReadOnlyText, { fieldName, value, ...config });
+};
+var ReadOnly_default = ReadOnly;
+
+// src/components/FormLoading.tsx
+import { FormConstants } from "@form-eng/core";
+import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+var FormLoading = (props) => {
+  const { loadingShimmerCount, loadingFieldShimmerHeight, inPanel, hideTitleShimmer } = props;
+  const count = loadingShimmerCount || FormConstants.loadingShimmerCount;
+  const height = loadingFieldShimmerHeight || FormConstants.loadingFieldShimmerHeight;
+  return /* @__PURE__ */ jsx16(
+    "div",
+    {
+      className: `fe-form-loading ${inPanel ? "fe-form-loading--panel" : ""}`,
+      role: "status",
+      "aria-label": "Loading form",
+      children: [...Array(count)].map((_, i) => /* @__PURE__ */ jsxs10("div", { style: { marginBottom: 16 }, children: [
+        !hideTitleShimmer && /* @__PURE__ */ jsx16("div", { className: "fe-skeleton", style: { width: "33%", height: 16, marginBottom: 8, background: "var(--chakra-colors-gray-200, #E2E8F0)", borderRadius: 4 } }),
+        /* @__PURE__ */ jsx16("div", { className: "fe-skeleton", style: { width: "100%", height, background: "var(--chakra-colors-gray-200, #E2E8F0)", borderRadius: 4 } })
+      ] }, `fe-loading-${i}`))
+    }
+  );
+};
+
+// src/registry.ts
+import { ComponentTypes } from "@form-eng/core";
+import React3 from "react";
+function createChakraFieldRegistry() {
+  return {
+    [ComponentTypes.Textbox]: React3.createElement(Textbox_default),
+    [ComponentTypes.Number]: React3.createElement(Number_default),
+    [ComponentTypes.Toggle]: React3.createElement(Toggle_default),
+    [ComponentTypes.Dropdown]: React3.createElement(Dropdown_default),
+    [ComponentTypes.SimpleDropdown]: React3.createElement(SimpleDropdown_default),
+    [ComponentTypes.MultiSelect]: React3.createElement(MultiSelect_default),
+    [ComponentTypes.DateControl]: React3.createElement(DateControl_default),
+    [ComponentTypes.Slider]: React3.createElement(Slider_default),
+    [ComponentTypes.RadioGroup]: React3.createElement(RadioGroup_default),
+    [ComponentTypes.CheckboxGroup]: React3.createElement(CheckboxGroup_default),
+    [ComponentTypes.Textarea]: React3.createElement(Textarea_default),
+    [ComponentTypes.Fragment]: React3.createElement(DynamicFragment_default),
+    [ComponentTypes.ReadOnly]: React3.createElement(ReadOnly_default)
+  };
+}
+export {
+  CheckboxGroup_default as CheckboxGroup,
+  DateControl_default as DateControl,
+  DocumentLinksStrings,
+  Dropdown_default as Dropdown,
+  DynamicFragment_default as DynamicFragment,
+  FieldClassName,
+  FormLoading,
+  GetFieldDataTestId,
+  MultiSelect_default as MultiSelect,
+  Number_default as Number,
+  RadioGroup_default as RadioGroup,
+  ReadOnly_default as ReadOnly,
+  ReadOnlyText,
+  SimpleDropdown_default as SimpleDropdown,
+  Slider_default as Slider,
+  StatusMessage,
+  Textarea_default as Textarea,
+  Textbox_default as Textbox,
+  Toggle_default as Toggle,
+  createChakraFieldRegistry,
+  formatDateTime,
+  getFieldState
+};
+//# sourceMappingURL=index.mjs.map