@aatulwork/customform-renderer 1.0.0

package/dist/index.mjs

@@ -0,0 +1,1796 @@
+import { useMemo, useState, useEffect, useRef, useCallback } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { FormControl, FormLabel, TextField as TextField$1, InputLabel, Select, MenuItem, Box, Chip, CircularProgress, OutlinedInput, FormHelperText, FormControlLabel, Checkbox, RadioGroup, Radio, Typography, Switch, Input, useTheme, alpha, useMediaQuery, Tooltip, IconButton, Accordion, AccordionSummary, AccordionDetails, Alert, Stepper, Step, StepLabel, Button, Stack } from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import DoubleArrowOutlinedIcon from '@mui/icons-material/DoubleArrowOutlined';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { CKEditor } from '@ckeditor/ckeditor5-react';
+import dayjs2 from 'dayjs';
+import CloseIcon from '@mui/icons-material/Close';
+import CloudUploadIcon from '@mui/icons-material/CloudUpload';
+import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import { TimePicker } from '@mui/x-date-pickers/TimePicker';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+
+// src/components/FormRenderer.tsx
+
+// src/utils/formHelpers.ts
+var getAllFields = (formSchema) => {
+  return formSchema.sections ? formSchema.sections.flatMap((section) => section.fields) : formSchema.fields || [];
+};
+var normalizeInitialValues = (values, formSchema) => {
+  if (!values) return values;
+  const normalized = { ...values };
+  const allFields = getAllFields(formSchema);
+  allFields.forEach((field) => {
+    const fieldValue = normalized[field.name];
+    if (field.type === "select" || field.type === "formReference" || field.type === "apiReference") {
+      if (field.allowMultiple) {
+        if (fieldValue !== null && fieldValue !== void 0 && fieldValue !== "") {
+          if (!Array.isArray(fieldValue)) {
+            normalized[field.name] = [fieldValue];
+          }
+        } else {
+          normalized[field.name] = [];
+        }
+      } else {
+        if (Array.isArray(fieldValue) && fieldValue.length > 0) {
+          normalized[field.name] = fieldValue[0];
+        } else if (Array.isArray(fieldValue) && fieldValue.length === 0) {
+          normalized[field.name] = "";
+        }
+      }
+    }
+    if (field.type === "file") {
+      if (field.allowMultiple) {
+        if (fieldValue !== null && fieldValue !== void 0) {
+          if (!Array.isArray(fieldValue)) {
+            normalized[field.name] = [fieldValue];
+          }
+        } else {
+          normalized[field.name] = [];
+        }
+      } else {
+        if (Array.isArray(fieldValue) && fieldValue.length > 0) {
+          normalized[field.name] = fieldValue[0];
+        } else if (Array.isArray(fieldValue) && fieldValue.length === 0) {
+          normalized[field.name] = null;
+        }
+      }
+    }
+  });
+  return normalized;
+};
+var getDefaultValue = (field) => {
+  switch (field.type) {
+    case "checkbox":
+    case "toggle":
+      return false;
+    case "datepicker":
+      return null;
+    case "file":
+      return field.allowMultiple ? [] : null;
+    case "select":
+    case "formReference":
+    case "apiReference":
+      return field.allowMultiple ? [] : "";
+    case "text":
+    case "email":
+    case "number":
+    case "radio":
+    case "ckeditor":
+    default:
+      return "";
+  }
+};
+var transformFormValues = (data, formSchema) => {
+  const allFields = getAllFields(formSchema);
+  const fieldTypeMap = /* @__PURE__ */ new Map();
+  allFields.forEach((field) => {
+    fieldTypeMap.set(field.name, field.type);
+  });
+  const transformedData = {};
+  Object.keys(data).forEach((key) => {
+    const fieldType = fieldTypeMap.get(key);
+    const value = data[key];
+    if (value === null || value === void 0) {
+      transformedData[key] = value;
+      return;
+    }
+    switch (fieldType) {
+      case "number":
+        if (value === "" || value === null || value === void 0) {
+          transformedData[key] = null;
+        } else {
+          const numValue = Number(value);
+          transformedData[key] = isNaN(numValue) ? value : numValue;
+        }
+        break;
+      case "checkbox":
+      case "toggle":
+        transformedData[key] = Boolean(value);
+        break;
+      case "datepicker":
+      case "file":
+      default:
+        transformedData[key] = value;
+    }
+  });
+  return transformedData;
+};
+var TextField = ({ field, control, defaultValue, rules, errors }) => {
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name: field.name,
+      control,
+      defaultValue,
+      rules,
+      render: ({ field: formField }) => /* @__PURE__ */ jsxs(
+        FormControl,
+        {
+          fullWidth: true,
+          required: field.required,
+          error: !!errors[field.name],
+          children: [
+            /* @__PURE__ */ jsxs(FormLabel, { children: [
+              " ",
+              field.label
+            ] }),
+            /* @__PURE__ */ jsx(
+              TextField$1,
+              {
+                ...formField,
+                type: field.type === "number" ? "number" : field.type,
+                placeholder: field.placeholder || "Enter value",
+                fullWidth: true,
+                size: "small",
+                required: field.required,
+                error: !!errors[field.name],
+                helperText: errors[field.name]?.message,
+                inputProps: field.type === "number" ? {
+                  min: field.validation?.min,
+                  max: field.validation?.max
+                } : void 0
+              }
+            )
+          ]
+        }
+      )
+    },
+    field.name
+  );
+};
+
+// src/utils/fieldHelpers.ts
+var formatFileSize = (bytes) => {
+  if (bytes === 0) return "0 Bytes";
+  const k = 1024;
+  const sizes = ["Bytes", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return Math.round(bytes / Math.pow(k, i) * 100) / 100 + " " + sizes[i];
+};
+var validateFile = (file, field) => {
+  if (field.validation?.allowedFileTypes && field.validation.allowedFileTypes.length > 0) {
+    const fileExtension = file.name.split(".").pop()?.toLowerCase();
+    const allowedTypes = field.validation.allowedFileTypes.map((t) => t.toLowerCase().replace(".", ""));
+    if (!fileExtension || !allowedTypes.includes(fileExtension)) {
+      return `File type not allowed. Allowed types: ${field.validation.allowedFileTypes.join(", ")}`;
+    }
+  }
+  if (field.validation?.maxFileSize) {
+    if (file.size > field.validation.maxFileSize) {
+      const maxSizeFormatted = formatFileSize(field.validation.maxFileSize);
+      return `File size exceeds maximum allowed size of ${maxSizeFormatted}`;
+    }
+  }
+  return true;
+};
+var buildFieldRules = (field) => {
+  const rules = {};
+  if (field.required) {
+    rules.required = `${field.label} is required`;
+  }
+  if (field.type === "file") {
+    rules.validate = (value) => {
+      if (field.required) {
+        if (field.allowMultiple) {
+          const files = Array.isArray(value) ? value : [];
+          if (files.length === 0) {
+            return `${field.label} is required`;
+          }
+          const hasValidFiles = files.some(
+            (file) => file && typeof file === "object" && ("fileName" in file || "fileUrl" in file)
+          );
+          if (!hasValidFiles) {
+            return `${field.label} is required`;
+          }
+        } else {
+          if (!value || typeof value === "object" && !("fileName" in value || "fileUrl" in value)) {
+            return `${field.label} is required`;
+          }
+        }
+      }
+      return true;
+    };
+  }
+  if ((field.type === "select" || field.type === "formReference" || field.type === "apiReference") && field.allowMultiple) {
+    rules.validate = (value) => {
+      const values = value;
+      if (!values || values.length === 0) {
+        if (field.required) {
+          return `${field.label} is required`;
+        }
+        return true;
+      }
+      return true;
+    };
+  }
+  return rules;
+};
+var normalizeOptions = (options) => {
+  if (!options) return [];
+  return options.map((opt) => {
+    if (typeof opt === "string") {
+      return { label: opt, value: opt };
+    }
+    return opt;
+  });
+};
+var SimpleSelect = ({
+  label,
+  value,
+  onChange,
+  options,
+  placeholder,
+  helperText,
+  fullWidth = true,
+  size = "small",
+  required = false,
+  error = false,
+  disabled = false,
+  multiple = false,
+  isLoading = false
+}) => {
+  const handleChange = (event) => {
+    const val = event.target.value;
+    onChange(val);
+  };
+  return /* @__PURE__ */ jsxs(FormControl, { fullWidth, size, required, error, disabled, children: [
+    /* @__PURE__ */ jsx(InputLabel, { children: label }),
+    /* @__PURE__ */ jsx(
+      Select,
+      {
+        value: value ?? (multiple ? [] : ""),
+        onChange: handleChange,
+        input: /* @__PURE__ */ jsx(OutlinedInput, { label }),
+        multiple,
+        disabled: disabled || isLoading,
+        endAdornment: isLoading ? /* @__PURE__ */ jsx(CircularProgress, { size: 20 }) : void 0,
+        renderValue: (selected) => {
+          if (multiple) {
+            const selectedValues = selected;
+            if (selectedValues.length === 0) {
+              return /* @__PURE__ */ jsx("em", { children: placeholder || "Select..." });
+            }
+            return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5 }, children: selectedValues.map((val) => {
+              const option2 = options.find((opt) => opt.value === val);
+              return /* @__PURE__ */ jsx(
+                Chip,
+                {
+                  label: option2?.label || val,
+                  size: "small"
+                },
+                val
+              );
+            }) });
+          }
+          const option = options.find((opt) => opt.value === selected);
+          return option?.label || selected || /* @__PURE__ */ jsx("em", { children: placeholder || "Select..." });
+        },
+        children: options.map((option) => /* @__PURE__ */ jsx(MenuItem, { value: option.value, children: option.label }, option.value))
+      }
+    ),
+    helperText && /* @__PURE__ */ jsx(FormHelperText, { children: helperText })
+  ] });
+};
+var SelectField = ({ field, control, defaultValue, rules, errors, services }) => {
+  const isMultiple = field.allowMultiple || false;
+  const normalizedOptions = normalizeOptions(field.options);
+  const selectOptions = useMemo(() => {
+    return normalizedOptions.map((opt) => ({
+      value: String(opt.value),
+      label: opt.label
+    }));
+  }, [normalizedOptions]);
+  const SelectComponent = services?.SelectComponent || SimpleSelect;
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name: field.name,
+      control,
+      defaultValue,
+      rules,
+      render: ({ field: formField }) => {
+        return /* @__PURE__ */ jsx(
+          SelectComponent,
+          {
+            label: field.label,
+            value: formField.value,
+            onChange: (value) => {
+              formField.onChange(value);
+            },
+            options: selectOptions,
+            placeholder: field.placeholder || "Select...",
+            helperText: errors[field.name]?.message,
+            fullWidth: true,
+            size: "small",
+            required: field.required,
+            error: !!errors[field.name],
+            disabled: false,
+            multiple: isMultiple
+          }
+        );
+      }
+    },
+    field.name
+  );
+};
+var CheckboxField = ({ field, control, defaultValue, rules }) => {
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name: field.name,
+      control,
+      defaultValue,
+      rules,
+      render: ({ field: formField }) => /* @__PURE__ */ jsx(
+        FormControlLabel,
+        {
+          control: /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              ...formField,
+              checked: formField.value || false,
+              size: "small"
+            }
+          ),
+          label: field.label
+        }
+      )
+    },
+    field.name
+  );
+};
+var RadioField = ({ field, control, defaultValue, rules, errors }) => {
+  const normalizedOptions = normalizeOptions(field.options);
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name: field.name,
+      control,
+      defaultValue,
+      rules,
+      render: ({ field: formField }) => /* @__PURE__ */ jsxs(FormControl, { component: "fieldset", required: field.required, error: !!errors[field.name], children: [
+        /* @__PURE__ */ jsx(FormLabel, { required: field.required, error: !!errors[field.name], children: field.label }),
+        /* @__PURE__ */ jsx(RadioGroup, { ...formField, row: true, children: normalizedOptions.map((option, index) => /* @__PURE__ */ jsx(
+          FormControlLabel,
+          {
+            value: option.value,
+            control: /* @__PURE__ */ jsx(Radio, { size: "small" }),
+            label: option.label
+          },
+          index
+        )) })
+      ] })
+    },
+    field.name
+  );
+};
+var ToggleField = ({ field, control, defaultValue, rules, errors }) => {
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name: field.name,
+      control,
+      defaultValue,
+      rules,
+      render: ({ field: formField }) => /* @__PURE__ */ jsx(
+        FormControlLabel,
+        {
+          control: /* @__PURE__ */ jsx(
+            Switch,
+            {
+              ...formField,
+              checked: formField.value || false,
+              size: "medium"
+            }
+          ),
+          label: /* @__PURE__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
+              field.label,
+              " ",
+              field.required && "*"
+            ] }),
+            errors[field.name] && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "error", sx: { display: "block", mt: 0.5 }, children: errors[field.name]?.message })
+          ] })
+        }
+      )
+    },
+    field.name
+  );
+};
+var ColorField = ({ field, control, defaultValue, rules, errors }) => {
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name: field.name,
+      control,
+      defaultValue,
+      rules,
+      render: ({ field: formField }) => /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 2, width: "100%" }, children: [
+        /* @__PURE__ */ jsx(
+          FormLabel,
+          {
+            required: field.required,
+            error: !!errors[field.name],
+            children: field.label
+          }
+        ),
+        /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", flex: 1, maxWidth: 200 }, children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              ...formField,
+              type: "color",
+              sx: {
+                width: "20%",
+                height: "40px",
+                cursor: "pointer",
+                border: errors[field.name] ? "1px solid red" : "1px solid rgba(0, 0, 0, 0.23)",
+                borderRadius: "4px",
+                padding: "1px"
+              },
+              inputProps: {
+                style: {
+                  height: "100%",
+                  cursor: "pointer"
+                }
+              }
+            }
+          ),
+          errors[field.name] && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "error", sx: { mt: 0.5 }, children: errors[field.name]?.message })
+        ] })
+      ] })
+    },
+    field.name
+  );
+};
+var defaultFileUploadService = {
+  uploadFiles: async () => {
+    throw new Error("File upload service not provided. Please provide a fileUpload service in FormServices.");
+  }
+};
+var defaultFormReferenceService = {
+  fetchOptions: async () => {
+    throw new Error("Form reference service not provided. Please provide a formReference service in FormServices.");
+  }
+};
+var defaultApiReferenceService = {
+  fetchOptions: async () => {
+    throw new Error("API reference service not provided. Please provide an apiReference service in FormServices.");
+  }
+};
+var defaultDateFormatterService = {
+  format: (value, options) => {
+    if (!value) return "\u2014";
+    const mode = options?.datePickerMode || "date";
+    const date = dayjs2(value);
+    if (!date.isValid()) return String(value);
+    switch (mode) {
+      case "date":
+        return date.format("DD/MM/YYYY");
+      case "time":
+        return date.format("hh:mm A");
+      case "datetime":
+        return date.format("DD/MM/YYYY hh:mm A");
+      default:
+        return date.format("DD/MM/YYYY");
+    }
+  }
+};
+
+// src/utils/ckeditorLoader.ts
+var loadCKEditor = (scriptPath = "/lib/ckeditor/ckeditor.js") => {
+  return new Promise((resolve, reject) => {
+    if (window.ClassicEditor) {
+      resolve();
+      return;
+    }
+    const existingScript = document.querySelector(`script[src="${scriptPath}"]`);
+    if (existingScript) {
+      existingScript.addEventListener("load", () => {
+        if (window.ClassicEditor) {
+          resolve();
+        } else {
+          reject(new Error("CKEditor script loaded but ClassicEditor not found on window"));
+        }
+      });
+      existingScript.addEventListener("error", () => {
+        reject(new Error("Failed to load CKEditor script"));
+      });
+      return;
+    }
+    const script = document.createElement("script");
+    script.src = scriptPath;
+    script.async = true;
+    script.onload = () => {
+      const checkInterval = setInterval(() => {
+        if (window.ClassicEditor) {
+          clearInterval(checkInterval);
+          resolve();
+        }
+      }, 100);
+      setTimeout(() => {
+        clearInterval(checkInterval);
+        if (!window.ClassicEditor) {
+          reject(new Error("CKEditor script loaded but ClassicEditor not found on window after 10 seconds"));
+        }
+      }, 1e4);
+    };
+    script.onerror = () => {
+      reject(new Error(`Failed to load CKEditor from ${scriptPath}`));
+    };
+    document.head.appendChild(script);
+  });
+};
+var isCKEditorAvailable = () => {
+  return typeof window !== "undefined" && typeof window.ClassicEditor !== "undefined";
+};
+var waitForCKEditor = (timeout = 1e4) => {
+  return new Promise((resolve, reject) => {
+    if (isCKEditorAvailable()) {
+      resolve();
+      return;
+    }
+    const startTime = Date.now();
+    const checkInterval = setInterval(() => {
+      if (isCKEditorAvailable()) {
+        clearInterval(checkInterval);
+        resolve();
+      } else if (Date.now() - startTime > timeout) {
+        clearInterval(checkInterval);
+        reject(new Error("CKEditor not available after timeout"));
+      }
+    }, 100);
+  });
+};
+
+// src/hooks/useCKEditor.ts
+var useCKEditor = (options = {}) => {
+  const {
+    scriptPath = "/lib/ckeditor/ckeditor.js",
+    autoLoad = true,
+    timeout = 1e4
+  } = options;
+  const [isReady, setIsReady] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const load = async () => {
+    if (isCKEditorAvailable()) {
+      setIsReady(true);
+      setIsLoading(false);
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
+      await loadCKEditor(scriptPath);
+      setIsReady(true);
+    } catch (err) {
+      const error2 = err instanceof Error ? err : new Error("Failed to load CKEditor");
+      setError(error2);
+      setIsReady(false);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  useEffect(() => {
+    if (isCKEditorAvailable()) {
+      setIsReady(true);
+      return;
+    }
+    if (autoLoad) {
+      load();
+    } else {
+      waitForCKEditor(timeout).then(() => setIsReady(true)).catch((err) => setError(err instanceof Error ? err : new Error("CKEditor not available")));
+    }
+  }, [scriptPath, autoLoad, timeout]);
+  return {
+    isReady,
+    isLoading,
+    error,
+    load
+  };
+};
+var CKEditorField = ({ field, control, defaultValue, rules, errors, setValue, formSchema, services }) => {
+  const theme = useTheme();
+  const editorContainerRef = useRef(null);
+  const fileUploadService = services?.fileUpload || defaultFileUploadService;
+  const fileBaseUrl = services?.fileBaseUrl || "";
+  const licenseKey = services?.ckEditorLicenseKey || "";
+  const ckEditorScriptPath = services?.ckEditorScriptPath || "/lib/ckeditor/ckeditor.js";
+  const { isReady: isCKEditorReady, isLoading: isCKEditorLoading, error: ckEditorError } = useCKEditor({
+    scriptPath: ckEditorScriptPath,
+    autoLoad: true
+  });
+  const createCustomUploadAdapter = useCallback((loader) => {
+    return {
+      upload: async () => {
+        if (!formSchema?.name) {
+          throw new Error("Form schema name is required for image uploads");
+        }
+        try {
+          const file = await loader.file;
+          if (!file) {
+            throw new Error("No file provided");
+          }
+          if (!file.type.startsWith("image/")) {
+            throw new Error("Only image files are allowed");
+          }
+          const uploadedFiles = await fileUploadService.uploadFiles(
+            formSchema.name,
+            field.name,
+            [file]
+          );
+          if (uploadedFiles && uploadedFiles.length > 0 && uploadedFiles[0].fileUrl) {
+            const fileUrl = uploadedFiles[0].fileUrl;
+            const isFullUrl = fileUrl.startsWith("http://") || fileUrl.startsWith("https://");
+            const url = isFullUrl ? fileUrl : fileBaseUrl + fileUrl;
+            return {
+              default: url
+            };
+          }
+          throw new Error("Upload failed: No file URL returned");
+        } catch (error) {
+          console.error("Upload error:", error);
+          const errorMessage = error.response?.data?.message || error.message || "Upload failed";
+          throw new Error(errorMessage);
+        }
+      },
+      abort: () => {
+        console.log("Upload aborted");
+      }
+    };
+  }, [formSchema?.name, field.name, fileUploadService, fileBaseUrl]);
+  if (isCKEditorLoading) {
+    return /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(FormLabel, { required: field.required, error: !!errors[field.name], children: field.label }),
+      /* @__PURE__ */ jsx(Box, { sx: { p: 2, textAlign: "center", color: "text.secondary" }, children: "Loading editor..." })
+    ] });
+  }
+  if (ckEditorError || !isCKEditorReady) {
+    return /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(FormLabel, { required: field.required, error: !!errors[field.name], children: field.label }),
+      /* @__PURE__ */ jsx(Box, { sx: { p: 2, border: "1px solid", borderColor: "error.main", borderRadius: 1 }, children: /* @__PURE__ */ jsx(FormHelperText, { error: true, children: ckEditorError?.message || "CKEditor failed to load. Please ensure the CKEditor script is loaded." }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name: field.name,
+      control,
+      defaultValue: defaultValue || "",
+      rules,
+      render: ({ field: formField }) => /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(
+          FormLabel,
+          {
+            required: field.required,
+            error: !!errors[field.name],
+            children: field.label
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            ref: editorContainerRef,
+            sx: {
+              "& .ck-editor": {
+                borderRadius: "4px",
+                "& .ck-toolbar": {
+                  width: "100%",
+                  maxWidth: "100%",
+                  overflow: "visible",
+                  display: "flex",
+                  flexWrap: "wrap",
+                  "& .ck-toolbar__items": {
+                    display: "flex",
+                    flexWrap: "wrap !important",
+                    width: "100%",
+                    maxWidth: "100%",
+                    "& > *": {
+                      flexShrink: 0
+                    }
+                  }
+                },
+                "& .ck-editor__editable": {
+                  minHeight: "100px"
+                },
+                "&:hover": {
+                  borderColor: errors[field.name] ? theme.palette.error.main : theme.palette.mode === "dark" ? "rgba(255, 255, 255, 0.87)" : theme.palette.primary.main
+                },
+                "& .ck-focused": {
+                  border: errors[field.name] ? `1px solid ${theme.palette.error.main} !important` : `1px solid ${theme.palette.mode === "dark" ? "rgba(255, 255, 255, 0.23)" : `${theme.palette.primary.main}`} !important`,
+                  boxShadow: errors[field.name] ? `0 0 0 1px ${theme.palette.error.main}` : `0 0 0 1px ${alpha(theme.palette.primary.main, 0.5)} !important`
+                }
+              }
+            },
+            children: window.ClassicEditor && isCKEditorReady && /* @__PURE__ */ jsx(
+              CKEditor,
+              {
+                editor: window.ClassicEditor,
+                config: {
+                  licenseKey,
+                  initialData: formField.value || ""
+                },
+                data: formField.value || "",
+                onReady: (editor) => {
+                  if (formSchema?.name) {
+                    try {
+                      const fileRepository = editor.plugins.get("FileRepository");
+                      if (fileRepository) {
+                        fileRepository.createUploadAdapter = (loader) => {
+                          return createCustomUploadAdapter(loader);
+                        };
+                      } else {
+                        console.warn("FileRepository plugin not found");
+                      }
+                    } catch (error) {
+                      console.error("Error setting up upload adapter:", error);
+                    }
+                  } else {
+                    console.warn("Form schema name not available, upload adapter not set");
+                  }
+                  if (defaultValue && !formField.value) {
+                    editor.setData(defaultValue);
+                    setValue?.(field.name, defaultValue);
+                  }
+                },
+                onChange: (_event, editor) => {
+                  const data = editor.getData();
+                  formField.onChange(data);
+                },
+                onBlur: () => {
+                  formField.onBlur();
+                }
+              }
+            )
+          }
+        ),
+        errors[field.name] && /* @__PURE__ */ jsx(FormHelperText, { error: true, sx: { mt: 0.5, mx: 0 }, children: errors[field.name]?.message })
+      ] })
+    },
+    field.name
+  );
+};
+var FileField = ({
+  field,
+  control,
+  defaultValue,
+  rules,
+  errors,
+  formSchema,
+  uploadingFiles = {},
+  setUploadingFiles,
+  setError,
+  clearErrors,
+  services
+}) => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
+  const acceptTypes = field.validation?.allowedFileTypes ? field.validation.allowedFileTypes.map((type) => `.${type.replace(".", "")}`).join(",") : void 0;
+  const isMultiple = field.allowMultiple || false;
+  const fileUploadService = services?.fileUpload || defaultFileUploadService;
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name: field.name,
+      control,
+      defaultValue,
+      rules,
+      render: ({ field: formField }) => {
+        const isUploading = uploadingFiles[field.name] || false;
+        let files = [];
+        if (isMultiple) {
+          files = Array.isArray(formField.value) ? formField.value : [];
+        } else {
+          files = formField.value ? [formField.value] : [];
+        }
+        const hasFiles = files.length > 0;
+        return /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsx(
+            FormLabel,
+            {
+              required: field.required,
+              error: !!errors[field.name],
+              children: field.label
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              component: "label",
+              htmlFor: `file-input-${field.name}`,
+              sx: {
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                border: "1px dashed",
+                borderColor: errors[field.name] ? "error.main" : isUploading ? "primary.main" : hasFiles ? "primary.main" : "divider",
+                p: 1,
+                cursor: isUploading ? "wait" : "pointer",
+                transition: "all 0.2s ease-in-out",
+                backgroundColor: isUploading || hasFiles ? "action.hover" : "background.paper",
+                opacity: isUploading ? 0.7 : 1,
+                pointerEvents: isUploading ? "none" : "auto",
+                "&:hover": {
+                  borderColor: isUploading ? "primary.main" : "primary.main",
+                  backgroundColor: "action.hover"
+                }
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    id: `file-input-${field.name}`,
+                    type: "file",
+                    hidden: true,
+                    multiple: isMultiple,
+                    accept: acceptTypes,
+                    onChange: async (e) => {
+                      const fileList = e.target.files;
+                      if (!fileList || fileList.length === 0) return;
+                      const newFiles = Array.from(fileList);
+                      const isUploading2 = uploadingFiles[field.name] || false;
+                      if (isUploading2) {
+                        e.target.value = "";
+                        return;
+                      }
+                      for (const file of newFiles) {
+                        const validationResult = validateFile(file, field);
+                        if (validationResult !== true) {
+                          setError?.(field.name, {
+                            type: "manual",
+                            message: validationResult
+                          });
+                          e.target.value = "";
+                          return;
+                        }
+                      }
+                      try {
+                        setUploadingFiles?.((prev) => ({ ...prev, [field.name]: true }));
+                        clearErrors?.(field.name);
+                        if (!formSchema?.name) {
+                          throw new Error("Form schema name is required for file uploads");
+                        }
+                        const uploadedFiles = await fileUploadService.uploadFiles(
+                          formSchema.name,
+                          field.name,
+                          newFiles
+                        );
+                        if (isMultiple) {
+                          const currentValue = formField.value;
+                          const existingFiles = Array.isArray(currentValue) ? currentValue.filter((item) => item && typeof item === "object" && "fileName" in item) : [];
+                          const allUploadedFiles = [...existingFiles, ...uploadedFiles];
+                          formField.onChange(allUploadedFiles);
+                        } else {
+                          formField.onChange(uploadedFiles[0] || null);
+                        }
+                      } catch (error) {
+                        console.error(`Failed to upload files for field ${field.name}:`, error);
+                        const errorMessage = error.response?.data?.message || error.message || "Failed to upload files";
+                        setError?.(field.name, {
+                          type: "manual",
+                          message: `Failed to upload files: ${errorMessage}`
+                        });
+                      } finally {
+                        setUploadingFiles?.((prev) => ({ ...prev, [field.name]: false }));
+                        e.target.value = "";
+                      }
+                    },
+                    disabled: uploadingFiles[field.name] || false
+                  }
+                ),
+                isUploading ? /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", alignItems: "center", gap: 1, py: 3, width: "100%" }, children: [
+                  /* @__PURE__ */ jsx(CircularProgress, { size: 40 }),
+                  /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "primary.main", sx: { fontWeight: 500 }, children: "Uploading files..." }),
+                  /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: "Please wait while files are being uploaded" })
+                ] }) : !hasFiles ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(CloudUploadIcon, { sx: { fontSize: 40, color: "text.secondary", mb: 1 } }),
+                  /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "text.secondary", children: [
+                    "Click to upload or drag and drop",
+                    isMultiple && " (multiple files allowed)"
+                  ] }),
+                  field.validation?.allowedFileTypes && field.validation.allowedFileTypes.length > 0 && /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "text.secondary", sx: { mt: 0.5 }, children: [
+                    "Allowed: ",
+                    field.validation.allowedFileTypes.join(", ")
+                  ] }),
+                  field.validation?.maxFileSize && /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "text.secondary", sx: { mt: 0.5 }, children: [
+                    "Max size: ",
+                    formatFileSize(field.validation.maxFileSize),
+                    " per file"
+                  ] })
+                ] }) : /* @__PURE__ */ jsxs(Box, { sx: { width: "100%" }, children: [
+                  isMultiple && /* @__PURE__ */ jsxs(Typography, { variant: "body2", sx: { fontWeight: 500, mb: 1.5 }, children: [
+                    files.length,
+                    " file",
+                    files.length !== 1 ? "s" : "",
+                    " uploaded"
+                  ] }),
+                  files.length === 1 && !isMultiple ? /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 2, width: "100%" }, children: [
+                    /* @__PURE__ */ jsx(InsertDriveFileIcon, { sx: { fontSize: 40, color: "primary.main" } }),
+                    /* @__PURE__ */ jsxs(Box, { sx: { flexGrow: 1, minWidth: 0 }, children: [
+                      /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis", maxWidth: isMobile ? "200px" : "300px" }, children: files[0] instanceof File ? files[0].name : files[0].originalName || files[0].fileName }),
+                      /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: formatFileSize(files[0].size || 0) })
+                    ] }),
+                    /* @__PURE__ */ jsx(Tooltip, { title: "Remove file", placement: "bottom", arrow: true, children: /* @__PURE__ */ jsx(
+                      IconButton,
+                      {
+                        size: "small",
+                        onClick: (e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          formField.onChange(null);
+                          const fileInput = document.getElementById(`file-input-${field.name}`);
+                          if (fileInput) {
+                            fileInput.value = "";
+                          }
+                        },
+                        sx: { color: "error.main" },
+                        children: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" })
+                      }
+                    ) })
+                  ] }) : /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexDirection: "column", gap: 1, width: "100%" }, children: files.map((file, index) => {
+                    const fileName = file instanceof File ? file.name : file.originalName || file.fileName;
+                    return /* @__PURE__ */ jsxs(
+                      Box,
+                      {
+                        sx: {
+                          display: "flex",
+                          alignItems: "center",
+                          gap: 1.5,
+                          p: 1,
+                          borderRadius: 1,
+                          backgroundColor: "background.default",
+                          border: "1px solid",
+                          borderColor: "divider"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(InsertDriveFileIcon, { sx: { fontSize: 32, color: "primary.main" } }),
+                          /* @__PURE__ */ jsxs(Box, { sx: { flexGrow: 1, minWidth: 0 }, children: [
+                            /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis" }, children: fileName }),
+                            /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: formatFileSize(file.size || 0) })
+                          ] }),
+                          /* @__PURE__ */ jsx(Tooltip, { title: "Remove file", placement: "bottom", arrow: true, children: /* @__PURE__ */ jsx(
+                            IconButton,
+                            {
+                              size: "small",
+                              onClick: (e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                if (isMultiple) {
+                                  const updatedFiles = files.filter((_, i) => i !== index);
+                                  formField.onChange(updatedFiles.length > 0 ? updatedFiles : []);
+                                } else {
+                                  formField.onChange(null);
+                                }
+                              },
+                              sx: { color: "error.main" },
+                              children: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" })
+                            }
+                          ) })
+                        ]
+                      },
+                      `${fileName}-${index}`
+                    );
+                  }) })
+                ] })
+              ]
+            }
+          ),
+          errors[field.name] && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "error", sx: { mt: 1, display: "block" }, children: errors[field.name]?.message })
+        ] });
+      }
+    },
+    field.name
+  );
+};
+var FormReferenceField = ({ field, control, defaultValue, rules, errors, services }) => {
+  const isMultiple = field.allowMultiple || false;
+  const [options, setOptions] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const formReferenceService = services?.formReference || defaultFormReferenceService;
+  useEffect(() => {
+    if (!field.referenceFormName || !field.referenceFieldName) return;
+    setIsLoading(true);
+    formReferenceService.fetchOptions(field.referenceFormName, field.referenceFieldName).then((opts) => {
+      setOptions(opts);
+    }).catch((error) => {
+      console.error("Failed to fetch form reference options:", error);
+      setOptions([]);
+    }).finally(() => {
+      setIsLoading(false);
+    });
+  }, [field.referenceFormName, field.referenceFieldName, formReferenceService]);
+  const selectOptions = useMemo(() => {
+    return options.map((opt) => ({
+      value: String(opt.value),
+      label: opt.label
+    }));
+  }, [options]);
+  const fieldDefaultValue = defaultValue ?? getDefaultValue(field);
+  const fieldRules = rules ?? buildFieldRules(field);
+  const isDisabled = !field.referenceFormName || !field.referenceFieldName;
+  const SelectComponent = services?.SelectComponent || SimpleSelect;
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name: field.name,
+      control,
+      defaultValue: fieldDefaultValue,
+      rules: fieldRules,
+      render: ({ field: formField }) => {
+        return /* @__PURE__ */ jsx(
+          SelectComponent,
+          {
+            label: field.label,
+            value: formField.value,
+            onChange: (value) => {
+              formField.onChange(value);
+            },
+            options: selectOptions,
+            placeholder: field.placeholder || "Search and select...",
+            helperText: errors[field.name]?.message,
+            fullWidth: true,
+            size: "small",
+            required: field.required,
+            error: !!errors[field.name],
+            disabled: isDisabled || isLoading,
+            multiple: isMultiple,
+            isLoading
+          }
+        );
+      }
+    },
+    field.name
+  );
+};
+var ApiReferenceField = ({ field, control, defaultValue, rules, errors, services }) => {
+  const isMultiple = field.allowMultiple || false;
+  const [options, setOptions] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const apiReferenceService = services?.apiReference || defaultApiReferenceService;
+  useEffect(() => {
+    if (!field.apiEndpoint || !field.apiLabelField) return;
+    setIsLoading(true);
+    apiReferenceService.fetchOptions(field.apiEndpoint, field.apiLabelField, field.apiValueField || "_id").then((opts) => {
+      setOptions(opts);
+    }).catch((error) => {
+      console.error("Failed to fetch API reference options:", error);
+      setOptions([]);
+    }).finally(() => {
+      setIsLoading(false);
+    });
+  }, [field.apiEndpoint, field.apiLabelField, field.apiValueField, apiReferenceService]);
+  const selectOptions = useMemo(() => {
+    return options.map((opt) => ({
+      value: String(opt.value),
+      label: opt.label
+    }));
+  }, [options]);
+  const fieldDefaultValue = defaultValue ?? getDefaultValue(field);
+  const fieldRules = rules ?? buildFieldRules(field);
+  const isDisabled = !field.apiEndpoint || !field.apiLabelField;
+  const SelectComponent = services?.SelectComponent || SimpleSelect;
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name: field.name,
+      control,
+      defaultValue: fieldDefaultValue,
+      rules: fieldRules,
+      render: ({ field: formField }) => {
+        return /* @__PURE__ */ jsx(
+          SelectComponent,
+          {
+            label: field.label,
+            value: formField.value,
+            onChange: (value) => {
+              formField.onChange(value);
+            },
+            options: selectOptions,
+            placeholder: field.placeholder || "Search and select...",
+            helperText: errors[field.name]?.message,
+            fullWidth: true,
+            size: "small",
+            required: field.required,
+            error: !!errors[field.name],
+            disabled: isDisabled || isLoading,
+            multiple: isMultiple,
+            isLoading
+          }
+        );
+      }
+    },
+    field.name
+  );
+};
+var textFieldSlotProps = (field, errors) => ({
+  fullWidth: true,
+  size: "small",
+  required: field.required,
+  error: !!errors[field.name],
+  helperText: errors[field.name]?.message
+});
+function resolveDatePickerMode(field) {
+  if (field.datePickerMode) return field.datePickerMode;
+  return field?.displayTime ? "datetime" : "date";
+}
+var DateTimePickerField = ({ field, control, defaultValue, rules, errors }) => {
+  const mode = resolveDatePickerMode(field);
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name: field.name,
+      control,
+      defaultValue,
+      rules,
+      render: ({ field: formField }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          FormLabel,
+          {
+            required: field.required,
+            error: !!errors[field.name],
+            children: field.label
+          }
+        ),
+        /* @__PURE__ */ jsxs(LocalizationProvider, { dateAdapter: AdapterDayjs, children: [
+          mode === "date" && /* @__PURE__ */ jsx(
+            DatePicker,
+            {
+              format: "DD-MM-YYYY",
+              value: formField.value ? dayjs2(formField.value) : null,
+              onChange: (date) => formField.onChange(date?.toISOString() ?? null),
+              slotProps: { textField: textFieldSlotProps(field, errors) }
+            }
+          ),
+          mode === "datetime" && /* @__PURE__ */ jsx(
+            DateTimePicker,
+            {
+              format: "DD-MM-YYYY  hh:mm A",
+              value: formField.value ? dayjs2(formField.value) : null,
+              onChange: (date) => formField.onChange(date?.toISOString() ?? null),
+              slotProps: { textField: textFieldSlotProps(field, errors) }
+            }
+          ),
+          mode === "time" && /* @__PURE__ */ jsx(
+            TimePicker,
+            {
+              format: "hh:mm A",
+              value: formField.value ? dayjs2(formField.value) : null,
+              onChange: (date) => formField.onChange(date?.toISOString() ?? null),
+              slotProps: { textField: textFieldSlotProps(field, errors) }
+            }
+          )
+        ] })
+      ] })
+    },
+    field.name
+  );
+};
+var FieldRenderer = (props) => {
+  const { field, formSchema, uploadingFiles, setUploadingFiles, setError, clearErrors, services } = props;
+  const rules = buildFieldRules(field);
+  const defaultValue = getDefaultValue(field);
+  const commonProps = {
+    field,
+    control: props.control,
+    defaultValue,
+    rules,
+    errors: props.errors,
+    setValue: props.setValue,
+    formSchema,
+    services
+  };
+  switch (field.type) {
+    case "text":
+    case "email":
+    case "number":
+      return /* @__PURE__ */ jsx(TextField, { ...commonProps });
+    case "select":
+      return /* @__PURE__ */ jsx(SelectField, { ...commonProps, services });
+    case "checkbox":
+      return /* @__PURE__ */ jsx(CheckboxField, { ...commonProps });
+    case "radio":
+      return /* @__PURE__ */ jsx(RadioField, { ...commonProps });
+    case "datepicker":
+      return /* @__PURE__ */ jsx(DateTimePickerField, { ...commonProps });
+    case "toggle":
+      return /* @__PURE__ */ jsx(ToggleField, { ...commonProps });
+    case "color":
+      return /* @__PURE__ */ jsx(ColorField, { ...commonProps });
+    case "ckeditor":
+      return /* @__PURE__ */ jsx(CKEditorField, { ...commonProps, formSchema, setValue: props.setValue });
+    case "file":
+      return /* @__PURE__ */ jsx(
+        FileField,
+        {
+          ...commonProps,
+          uploadingFiles,
+          setUploadingFiles,
+          setError,
+          clearErrors
+        }
+      );
+    case "formReference":
+      return /* @__PURE__ */ jsx(FormReferenceField, { ...commonProps, services });
+    case "apiReference":
+      return /* @__PURE__ */ jsx(ApiReferenceField, { ...commonProps, services });
+    default:
+      return null;
+  }
+};
+var FieldView = ({ field, value, services }) => {
+  const dateFormatter = services?.dateFormatter || defaultDateFormatterService;
+  const FileDisplayComponent = services?.FileDisplayComponent;
+  const CKEditorDisplayComponent = services?.CKEditorDisplayComponent;
+  const formattedValue = formatFieldValue(field, value, dateFormatter);
+  if (field.type === "file") {
+    if (FileDisplayComponent) {
+      return /* @__PURE__ */ jsxs(
+        Box,
+        {
+          sx: {
+            display: "flex",
+            flexDirection: "column",
+            gap: 0.5,
+            py: 1.5,
+            px: 1,
+            borderColor: "divider"
+          },
+          children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { fontWeight: 500 }, children: field.label }),
+            /* @__PURE__ */ jsx(FileDisplayComponent, { fieldValue: value })
+          ]
+        },
+        field.name
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          gap: 0.5,
+          py: 1.5,
+          px: 1,
+          borderColor: "divider"
+        },
+        children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { fontWeight: 500 }, children: field.label }),
+          /* @__PURE__ */ jsx(Typography, { variant: "body1", sx: { color: "text.secondary" }, children: value ? Array.isArray(value) ? `${value.length} file(s)` : "1 file" : "\u2014" })
+        ]
+      },
+      field.name
+    );
+  }
+  if (field.type === "ckeditor") {
+    if (CKEditorDisplayComponent) {
+      return /* @__PURE__ */ jsxs(
+        Box,
+        {
+          sx: {
+            display: "flex",
+            flexDirection: "column",
+            gap: 0.5,
+            py: 1.5,
+            px: 1,
+            borderColor: "divider"
+          },
+          children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { fontWeight: 500 }, children: field.label }),
+            /* @__PURE__ */ jsx(
+              CKEditorDisplayComponent,
+              {
+                content: value || "",
+                maxLength: 150,
+                showViewButton: true
+              }
+            )
+          ]
+        },
+        field.name
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          gap: 0.5,
+          py: 1.5,
+          px: 1,
+          borderColor: "divider"
+        },
+        children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { fontWeight: 500 }, children: field.label }),
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "body1",
+              sx: {
+                color: formattedValue === "\u2014" ? "text.disabled" : "text.primary",
+                fontStyle: formattedValue === "\u2014" ? "italic" : "normal"
+              },
+              dangerouslySetInnerHTML: { __html: value || "" }
+            }
+          )
+        ]
+      },
+      field.name
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 0.5,
+        py: 1.5,
+        px: 1,
+        borderColor: "divider"
+      },
+      children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { fontWeight: 500 }, children: field.label }),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "body1",
+            sx: {
+              color: formattedValue === "\u2014" ? "text.disabled" : "text.primary",
+              fontStyle: formattedValue === "\u2014" ? "italic" : "normal",
+              fontWeight: 400,
+              fontSize: "0.875rem",
+              lineHeight: 1.5
+            },
+            children: formattedValue
+          }
+        )
+      ]
+    },
+    field.name
+  );
+};
+var formatFieldValue = (field, value, dateFormatter, services) => {
+  if (value === null || value === void 0 || value === "") {
+    return "\u2014";
+  }
+  switch (field.type) {
+    case "checkbox":
+    case "toggle":
+      return value ? "Yes" : "No";
+    case "datepicker":
+      return dateFormatter?.format(value, { datePickerMode: field.datePickerMode }) || String(value);
+    case "select":
+    case "formReference":
+    case "apiReference":
+      let values;
+      if (field.allowMultiple) {
+        values = Array.isArray(value) ? value : value ? [value] : [];
+      } else {
+        if (Array.isArray(value)) {
+          values = value.length > 0 ? [value[0]] : [];
+        } else {
+          values = value ? [value] : [];
+        }
+      }
+      if (values.length === 0) {
+        return "\u2014";
+      }
+      const getLabelForValue = (val) => {
+        if (field.options) {
+          const normalizedOptions = normalizeOptions(field.options);
+          const option = normalizedOptions.find((opt) => {
+            return opt.value === val || String(opt.value) === String(val);
+          });
+          if (option) {
+            return option.label;
+          }
+        }
+        return String(val);
+      };
+      if (values.length > 1 || field.allowMultiple) {
+        const labels = values.map((val) => getLabelForValue(val));
+        return labels.join(", ");
+      }
+      return getLabelForValue(values[0]);
+    case "radio":
+      if (field.options) {
+        const normalizedOptions = normalizeOptions(field.options);
+        const option = normalizedOptions.find((opt) => {
+          return opt.value === value;
+        });
+        if (option) {
+          return option.label;
+        }
+      }
+      return String(value);
+    default:
+      return String(value);
+  }
+};
+var FormViewMode = ({ formSchema, initialValues, hideTitle = false, services }) => {
+  const fieldsToRender = getAllFields(formSchema);
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
+  return /* @__PURE__ */ jsxs(Box, { sx: { maxWidth: 600, mx: "auto", width: "100%" }, children: [
+    !hideTitle && /* @__PURE__ */ jsx(Typography, { variant: "h6", gutterBottom: true, sx: { mb: 2, fontWeight: 600 }, children: formSchema.title }),
+    formSchema.sections && formSchema.sections.length > 0 ? /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexDirection: "column", gap: 1.5 }, children: formSchema.sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs(Accordion, { defaultExpanded: sectionIndex === 0, children: [
+      /* @__PURE__ */ jsx(
+        AccordionSummary,
+        {
+          expandIcon: /* @__PURE__ */ jsx(ExpandMoreIcon, {}),
+          "aria-controls": `panel-${section.id}-content`,
+          id: `panel-${section.id}-header`,
+          children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+            /* @__PURE__ */ jsx(DoubleArrowOutlinedIcon, { fontSize: "small", color: "primary" }),
+            /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", sx: { fontWeight: 600 }, color: "primary", children: section.title })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxs(AccordionDetails, { children: [
+        section.description && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", sx: { mb: 1.5, display: "block" }, children: section.description }),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              display: "grid",
+              gridTemplateColumns: isMobile ? "repeat(1, 1fr)" : "repeat(2, 1fr)",
+              gap: 1
+            },
+            children: section.fields.map((field) => /* @__PURE__ */ jsx(FieldView, { field, value: initialValues?.[field.name], services }, field.name))
+          }
+        )
+      ] })
+    ] }, section.id)) }) : /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: {
+          display: "grid",
+          gridTemplateColumns: "repeat(2, 1fr)",
+          gap: 1
+        },
+        children: fieldsToRender.map((field) => /* @__PURE__ */ jsx(FieldView, { field, value: initialValues?.[field.name], services }, field.name))
+      }
+    )
+  ] });
+};
+var FormRenderer = ({
+  formSchema,
+  onSubmit,
+  onCancel,
+  isLoading = false,
+  onSuccess,
+  initialValues,
+  hideTitle = false,
+  allowResetOnValuesChange = false,
+  mode = "edit",
+  services
+}) => {
+  const {
+    control,
+    handleSubmit,
+    reset,
+    clearErrors,
+    setValue,
+    setError,
+    formState: { errors }
+  } = useForm({
+    defaultValues: initialValues || {}
+  });
+  const [submitError, setSubmitError] = useState(null);
+  const prevInitialValuesRef = useRef(initialValues);
+  const isFormInitializedRef = useRef(false);
+  const [uploadingFiles, setUploadingFiles] = useState({});
+  const [activeStep, setActiveStep] = useState(0);
+  useEffect(() => {
+    setActiveStep(0);
+  }, [formSchema]);
+  useEffect(() => {
+    const wasUndefined = prevInitialValuesRef.current === void 0;
+    const isNowDefined = initialValues !== void 0;
+    if (initialValues) {
+      const normalizedValues = normalizeInitialValues(initialValues, formSchema);
+      if (allowResetOnValuesChange) {
+        const prevValues = prevInitialValuesRef.current;
+        const valuesChanged = !prevValues || JSON.stringify(prevValues) !== JSON.stringify(normalizedValues);
+        if (valuesChanged) {
+          reset(normalizedValues);
+          setSubmitError(null);
+          isFormInitializedRef.current = true;
+        }
+      } else if (wasUndefined && isNowDefined) {
+        reset(normalizedValues);
+        setSubmitError(null);
+        isFormInitializedRef.current = true;
+      }
+    } else if (initialValues === void 0 && prevInitialValuesRef.current !== void 0) {
+      setSubmitError(null);
+      isFormInitializedRef.current = false;
+    }
+    prevInitialValuesRef.current = initialValues;
+  }, [initialValues, reset, allowResetOnValuesChange, formSchema]);
+  const fieldsToRender = useMemo(() => getAllFields(formSchema), [formSchema]);
+  useMemo(() => {
+    return fieldsToRender.filter(
+      (field) => field.type === "formReference" && field.referenceFormName && field.referenceFieldName
+    );
+  }, [fieldsToRender]);
+  useMemo(() => {
+    return fieldsToRender.filter(
+      (field) => field.type === "apiReference" && field.apiEndpoint && field.apiLabelField
+    );
+  }, [fieldsToRender]);
+  const handleFormSubmit = async (data) => {
+    setSubmitError(null);
+    const transformedData = transformFormValues(data, formSchema);
+    if (onSubmit) {
+      try {
+        await onSubmit(transformedData);
+        if (onSuccess) {
+          reset(initialValues || {});
+          onSuccess();
+        }
+      } catch (error) {
+        console.error("Form submission error:", error);
+        let errorMessage = "Form submission failed. Please try again.";
+        if (error?.response?.data) {
+          const errorData = error.response.data;
+          errorMessage = errorData.message || errorData.error || errorData.errors?.message || (Array.isArray(errorData.errors) ? errorData.errors.join(", ") : null) || errorData.msg || errorMessage;
+        } else if (error?.message) {
+          errorMessage = error.message;
+        }
+        setSubmitError(errorMessage);
+      }
+    } else {
+      console.log("Form Data:", transformedData);
+    }
+  };
+  if (mode === "view") {
+    return /* @__PURE__ */ jsx(FormViewMode, { formSchema, initialValues, hideTitle, services });
+  }
+  return /* @__PURE__ */ jsxs(Box, { component: "form", onSubmit: handleSubmit(handleFormSubmit), sx: { mx: "auto", width: "100%" }, children: [
+    !hideTitle && /* @__PURE__ */ jsx(Typography, { variant: "h6", gutterBottom: true, sx: { mb: 2, fontWeight: 600 }, children: formSchema.title }),
+    submitError && /* @__PURE__ */ jsx(Alert, { severity: "error", sx: { mb: 2 }, onClose: () => setSubmitError(null), children: submitError }),
+    formSchema.sections && formSchema.sections.length > 0 ? (() => {
+      const sectionDisplayMode = formSchema.settings?.sectionDisplayMode || "panel";
+      const fieldsPerRow = formSchema.settings?.fieldsPerRow || 1;
+      const gridColumns = Math.min(Math.max(1, fieldsPerRow), 3);
+      const fullWidthFieldTypes = ["ckeditor"];
+      const renderFieldsGrid = (section) => /* @__PURE__ */ jsx(
+        Box,
+        {
+          sx: {
+            display: "grid",
+            gridTemplateColumns: {
+              xs: "1fr",
+              sm: gridColumns === 1 ? "1fr" : gridColumns === 2 ? "repeat(2, 1fr)" : "repeat(3, 1fr)"
+            },
+            gap: "10px"
+          },
+          children: section.fields.map((field) => {
+            const shouldTakeFullWidth = fullWidthFieldTypes.includes(field.type);
+            return /* @__PURE__ */ jsx(
+              Box,
+              {
+                sx: {
+                  gridColumn: shouldTakeFullWidth ? {
+                    xs: "1 / -1",
+                    sm: "1 / -1"
+                  } : "auto"
+                },
+                children: /* @__PURE__ */ jsx(
+                  FieldRenderer,
+                  {
+                    field,
+                    control,
+                    errors,
+                    setValue,
+                    formSchema,
+                    uploadingFiles,
+                    setUploadingFiles,
+                    setError,
+                    clearErrors,
+                    services
+                  }
+                )
+              },
+              field.name
+            );
+          })
+        }
+      );
+      if (sectionDisplayMode === "stepper") {
+        return /* @__PURE__ */ jsxs(Box, { sx: { border: "1px solid", borderColor: "divider", p: 5, backgroundColor: "background.paper" }, children: [
+          /* @__PURE__ */ jsx(Stepper, { activeStep, orientation: "horizontal", children: formSchema.sections.map((section) => /* @__PURE__ */ jsx(Step, { children: /* @__PURE__ */ jsx(StepLabel, { children: /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", sx: { fontWeight: 600 }, children: section.title }) }) }, section.id)) }),
+          /* @__PURE__ */ jsx(Box, { sx: { mt: 5 }, children: formSchema.sections.map((section, sectionIndex) => {
+            const sectionsLength = formSchema.sections?.length || 0;
+            return /* @__PURE__ */ jsxs(
+              Box,
+              {
+                sx: {
+                  display: activeStep === sectionIndex ? "block" : "none"
+                },
+                children: [
+                  section.description && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", sx: { mb: 1.5, display: "block" }, children: section.description }),
+                  renderFieldsGrid(section),
+                  /* @__PURE__ */ jsxs(Box, { sx: { mt: 2, display: "flex", gap: 1, borderTop: "1px solid", pt: 2, borderColor: "divider", justifyContent: "center" }, children: [
+                    sectionIndex > 0 && /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        size: "small",
+                        variant: "outlined",
+                        color: "success",
+                        startIcon: /* @__PURE__ */ jsx(ArrowBackIcon, {}),
+                        onClick: () => setActiveStep(sectionIndex - 1),
+                        children: "Previous"
+                      }
+                    ),
+                    sectionIndex < sectionsLength - 1 && /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        variant: "outlined",
+                        size: "small",
+                        color: "warning",
+                        endIcon: /* @__PURE__ */ jsx(ArrowForwardIcon, {}),
+                        onClick: () => {
+                          if (sectionIndex < sectionsLength - 1) {
+                            setActiveStep(sectionIndex + 1);
+                          }
+                        },
+                        children: "Next"
+                      }
+                    )
+                  ] })
+                ]
+              },
+              section.id
+            );
+          }) })
+        ] });
+      }
+      return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexDirection: "column", gap: 1.5 }, children: formSchema.sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs(Accordion, { defaultExpanded: sectionIndex === 0, children: [
+        /* @__PURE__ */ jsx(
+          AccordionSummary,
+          {
+            expandIcon: /* @__PURE__ */ jsx(ExpandMoreIcon, {}),
+            "aria-controls": `panel-${section.id}-content`,
+            id: `panel-${section.id}-header`,
+            children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+              /* @__PURE__ */ jsx(DoubleArrowOutlinedIcon, { fontSize: "small", color: "primary" }),
+              /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", color: "primary", sx: { fontWeight: 600 }, children: section.title })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxs(AccordionDetails, { children: [
+          section.description && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", sx: { mb: 1.5, display: "block" }, children: section.description }),
+          renderFieldsGrid(section)
+        ] })
+      ] }, section.id)) });
+    })() : (() => {
+      const fieldsPerRow = formSchema.settings?.fieldsPerRow || 1;
+      const gridColumns = Math.min(Math.max(1, fieldsPerRow), 3);
+      const fullWidthFieldTypes = ["ckeditor"];
+      return /* @__PURE__ */ jsx(
+        Box,
+        {
+          sx: {
+            display: "grid",
+            gridTemplateColumns: {
+              xs: "1fr",
+              sm: gridColumns === 1 ? "1fr" : gridColumns === 2 ? "repeat(2, 1fr)" : "repeat(3, 1fr)"
+            },
+            gap: 3
+          },
+          children: fieldsToRender.map((field) => {
+            const shouldTakeFullWidth = fullWidthFieldTypes.includes(field.type);
+            return /* @__PURE__ */ jsx(
+              Box,
+              {
+                sx: {
+                  gridColumn: shouldTakeFullWidth ? {
+                    xs: "1 / -1",
+                    sm: "1 / -1"
+                  } : "auto"
+                },
+                children: /* @__PURE__ */ jsx(
+                  FieldRenderer,
+                  {
+                    field,
+                    control,
+                    errors,
+                    setValue,
+                    formSchema,
+                    uploadingFiles,
+                    setUploadingFiles,
+                    setError,
+                    clearErrors,
+                    services
+                  }
+                )
+              },
+              field.name
+            );
+          })
+        }
+      );
+    })(),
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 2, sx: { mt: 3 }, justifyContent: "space-between", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "submit",
+          variant: "contained",
+          size: "small",
+          sx: { minWidth: 120 },
+          disabled: isLoading,
+          children: isLoading ? "Submitting..." : "Submit"
+        }
+      ),
+      /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 2, children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outlined",
+            size: "small",
+            onClick: () => {
+              reset();
+              clearErrors();
+              setSubmitError(null);
+              const sectionDisplayMode = formSchema.settings?.sectionDisplayMode || "panel";
+              if (sectionDisplayMode === "stepper") {
+                setActiveStep(0);
+              }
+            },
+            disabled: isLoading,
+            children: "Reset form"
+          }
+        ),
+        onCancel && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outlined",
+            size: "small",
+            onClick: onCancel,
+            disabled: isLoading,
+            children: "Cancel"
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+
+export { ApiReferenceField, CKEditorField, CheckboxField, ColorField, DateTimePickerField, FieldRenderer, FieldView, FileField, FormReferenceField, FormRenderer, FormViewMode, RadioField, SelectField, SimpleSelect, TextField, ToggleField, buildFieldRules, defaultApiReferenceService, defaultDateFormatterService, defaultFileUploadService, defaultFormReferenceService, formatFileSize, getAllFields, getDefaultValue, isCKEditorAvailable, loadCKEditor, normalizeInitialValues, normalizeOptions, transformFormValues, useCKEditor, validateFile, waitForCKEditor };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map