@startdownnotez404/ui 1.0.0 → 1.3.5

package/dist/chunk-24XDGNJ6.mjs

@@ -0,0 +1,1450 @@
+import {
+  FieldHelperText,
+  getHelperText
+} from "./chunk-MI64T62E.mjs";
+import {
+  Explanation_default,
+  FIELD_TYPEs,
+  collectFields,
+  collectRows,
+  getDefaultValues,
+  getFieldExplanation,
+  getFormFieldsSignature,
+  isEmptyFormValue,
+  mergeFieldSx,
+  validateFormSchema
+} from "./chunk-UTVSYS6S.mjs";
+import {
+  StandardStepper_default
+} from "./chunk-V26V2S3W.mjs";
+import {
+  MuiSwitch
+} from "./chunk-T34IULP5.mjs";
+import {
+  ToggleButtonGroup
+} from "./chunk-2ZZJTBTE.mjs";
+import {
+  MuiSelect_default
+} from "./chunk-UGMRJMFZ.mjs";
+import {
+  default as default14
+} from "./chunk-EW4DTFH3.mjs";
+import {
+  MuiModal
+} from "./chunk-UDREPVEY.mjs";
+import {
+  default as default15
+} from "./chunk-VYD3PDBB.mjs";
+import {
+  CheckboxGroup
+} from "./chunk-BGB7JHIU.mjs";
+import {
+  MuiFormLabel,
+  default as default12,
+  default3 as default13
+} from "./chunk-T4X375IG.mjs";
+import {
+  CircularProgress
+} from "./chunk-WYYP3Y34.mjs";
+import {
+  Button,
+  IconButton_default
+} from "./chunk-JIU5GVM7.mjs";
+import {
+  default125 as default10,
+  default126 as default11,
+  default13 as default4,
+  default53 as default5,
+  default54 as default6,
+  default67 as default7,
+  default69 as default8,
+  default82 as default9
+} from "./chunk-ZVFYOXDE.mjs";
+import {
+  default as default2,
+  default2 as default3,
+  mergeSx
+} from "./chunk-S6EZVRZC.mjs";
+
+// src/components/compound/UseForm/src/useHooks.ts
+import { useForm } from "react-hook-form";
+import { useEffect, useMemo, useRef } from "react";
+
+// src/components/compound/UseForm/src/_utils/resolver.ts
+var toError = (message, type) => ({
+  type,
+  message
+});
+var runFieldValidate = async (field, value, values) => {
+  if (field.type === FIELD_TYPEs.tel && typeof value === "string" && value.trim() !== "") {
+    const { isValidPhoneNumber } = await import("react-phone-number-input");
+    if (!isValidPhoneNumber(value)) {
+      return "Invalid phone number";
+    }
+  }
+  if (field.type === FIELD_TYPEs.fileUpload) {
+    const maxFiles = field.slotProps?.maxFiles ?? 1;
+    if (Array.isArray(value) && value.length > maxFiles) {
+      return `Cannot exceed ${maxFiles} file${maxFiles > 1 ? "s" : ""}`;
+    }
+  }
+  if (!field.validate) return true;
+  const result = await field.validate(value, values);
+  if (result === true) return true;
+  if (typeof result === "string" && result.length > 0) return result;
+  return field.errorMsg || "Invalid";
+};
+function createFormResolver(config) {
+  const fields = collectFields(config);
+  const fieldByName = new Map(fields.map((field) => [String(field.name), field]));
+  return async (values, _context, options) => {
+    const names = options?.names;
+    const nameList = names == null ? null : Array.from(names);
+    const fieldsToCheck = nameList && nameList.length > 0 ? nameList.map((name) => fieldByName.get(String(name))).filter((field) => field != null) : fields;
+    const errors = {};
+    const valuesRecord = values;
+    for (const field of fieldsToCheck) {
+      const name = String(field.name);
+      const value = valuesRecord[name];
+      if (field.required && isEmptyFormValue(value)) {
+        errors[name] = toError(field.errorMsg || "Required", "required");
+        continue;
+      }
+      if (isEmptyFormValue(value) && !field.validate) {
+        continue;
+      }
+      const result = await runFieldValidate(field, value, values);
+      if (result !== true) {
+        errors[name] = toError(result, "validate");
+      }
+    }
+    const hasErrors = Object.keys(errors).length > 0;
+    return {
+      values: hasErrors ? {} : values,
+      errors
+    };
+  };
+}
+
+// src/components/compound/UseForm/src/useHooks.ts
+var schemaSignature = (config) => {
+  const fields = collectFields(config);
+  return JSON.stringify({
+    mode: config.mode ?? "onSubmit",
+    defaults: config.defaultValues ?? null,
+    fields: fields.map((field) => [field.name, field.type, field.defaultValue])
+  });
+};
+var useConfiguredForm = ({
+  config
+}) => {
+  const { resolvedConfig, configError } = useMemo(() => {
+    try {
+      return {
+        resolvedConfig: validateFormSchema(config),
+        configError: void 0
+      };
+    } catch (error) {
+      const configError2 = error instanceof Error ? error : new Error(String(error));
+      console.error("[useConfiguredForm] invalid form schema", configError2);
+      return {
+        resolvedConfig: { schema: [] },
+        configError: configError2
+      };
+    }
+  }, [config]);
+  const defaultValues = useMemo(
+    () => getDefaultValues(resolvedConfig, false),
+    [resolvedConfig]
+  );
+  const resolver = useMemo(
+    () => createFormResolver(resolvedConfig),
+    [resolvedConfig]
+  );
+  const methods = useForm({
+    defaultValues,
+    resolver,
+    mode: resolvedConfig.mode ?? "onSubmit",
+    shouldUnregister: false
+  });
+  const signature = useMemo(
+    () => schemaSignature(resolvedConfig),
+    [resolvedConfig]
+  );
+  const defaultValuesRef = useRef(defaultValues);
+  defaultValuesRef.current = defaultValues;
+  const isFirstMount = useRef(true);
+  useEffect(() => {
+    if (isFirstMount.current) {
+      isFirstMount.current = false;
+      return;
+    }
+    methods.reset(defaultValuesRef.current);
+  }, [signature, methods]);
+  return {
+    methods,
+    config: resolvedConfig,
+    configError
+  };
+};
+var useForm2 = useConfiguredForm;
+
+// src/components/compound/UseForm/src/FormRenderer/Layout.tsx
+import React4 from "react";
+import { FormProvider } from "react-hook-form";
+
+// src/components/compound/UseForm/src/FormRenderer/StepperSection.tsx
+import * as React2 from "react";
+import { useFormState } from "react-hook-form";
+
+// src/components/compound/UseForm/src/store/FormContext.tsx
+import React from "react";
+
+// src/components/compound/UseForm/src/store/methods.ts
+var getNames = (schema) => {
+  const names = [];
+  schema.forEach((row) => row.fields.forEach((field) => names.push(String(field.name))));
+  return names;
+};
+var getFieldNamesInRange = (steps, fromStep, toStep) => {
+  const start = Math.min(fromStep, toStep);
+  const end = Math.max(fromStep, toStep);
+  const names = steps.slice(start, end + 1).flatMap((step) => getNames(step.schema));
+  return Array.from(new Set(names));
+};
+var createFormStoreMethods = ({
+  methods,
+  config,
+  steps,
+  getCurrentStep,
+  setCurrentStep
+}) => {
+  const validateNames = async (names) => {
+    if (names.length === 0) {
+      return methods.trigger();
+    }
+    return methods.trigger(names);
+  };
+  const handleStepChange = async (destinationStep) => {
+    const currentStep = getCurrentStep();
+    if (destinationStep === currentStep) return true;
+    if (destinationStep < currentStep) {
+      setCurrentStep(destinationStep);
+      return true;
+    }
+    const namesToTrigger = getFieldNamesInRange(steps, 0, currentStep);
+    const isValid = await validateNames(namesToTrigger);
+    if (!isValid) return false;
+    setCurrentStep(destinationStep);
+    return true;
+  };
+  const undo = () => {
+    methods.reset();
+  };
+  const clear = () => {
+    const emptyValues = getDefaultValues(config, true);
+    methods.reset(emptyValues, { keepDefaultValues: true });
+    methods.trigger();
+  };
+  const submit = async (onSubmit) => {
+    const namesToTrigger = getFieldNamesInRange(steps, 0, Math.max(steps.length - 1, 0));
+    const isValid = await validateNames(namesToTrigger);
+    if (!isValid) return;
+    await methods.handleSubmit(onSubmit)();
+  };
+  return {
+    handleStepChange,
+    submit,
+    undo,
+    clear
+  };
+};
+
+// src/components/compound/UseForm/src/store/FormContext.tsx
+import { jsx } from "react/jsx-runtime";
+var FormStateContext = React.createContext(null);
+var FormActionsContext = React.createContext(null);
+var FormMethodsContext = React.createContext(null);
+var useFormStateContext = () => {
+  const ctx = React.useContext(FormStateContext);
+  if (!ctx) {
+    throw new Error("useFormStateContext must be used within a FormContextProvider");
+  }
+  return ctx;
+};
+var useFormActionsContext = () => {
+  const ctx = React.useContext(FormActionsContext);
+  if (!ctx) {
+    throw new Error("useFormActionsContext must be used within a FormContextProvider");
+  }
+  return ctx;
+};
+var useFormMethodsContext = () => {
+  const ctx = React.useContext(FormMethodsContext);
+  if (!ctx) {
+    throw new Error("useFormMethodsContext must be used within a FormContextProvider");
+  }
+  return ctx;
+};
+var FormContextProvider = ({
+  config,
+  useFormMethods,
+  children
+}) => {
+  const steps = React.useMemo(() => {
+    if ("steps" in config && config.steps) {
+      return config.steps;
+    }
+    if ("schema" in config && config.schema) {
+      return [{ schema: config.schema }];
+    }
+    return [];
+  }, [config]);
+  const [currentStep, setCurrentStep] = React.useState(0);
+  const currentStepRef = React.useRef(currentStep);
+  currentStepRef.current = currentStep;
+  React.useEffect(() => {
+    setCurrentStep(0);
+  }, [steps]);
+  const storeMethods = React.useMemo(
+    () => createFormStoreMethods({
+      methods: useFormMethods,
+      config,
+      steps,
+      getCurrentStep: () => currentStepRef.current,
+      setCurrentStep
+    }),
+    [useFormMethods, config, steps]
+  );
+  const stateValue = React.useMemo(
+    () => ({
+      currentStep,
+      steps
+    }),
+    [currentStep, steps]
+  );
+  const actionsValue = React.useMemo(
+    () => ({
+      setCurrentStep,
+      ...storeMethods
+    }),
+    [setCurrentStep, storeMethods]
+  );
+  const methodsValue = React.useMemo(
+    () => ({
+      useFormMethods
+    }),
+    [useFormMethods]
+  );
+  return /* @__PURE__ */ jsx(FormStateContext.Provider, { value: stateValue, children: /* @__PURE__ */ jsx(FormActionsContext.Provider, { value: actionsValue, children: /* @__PURE__ */ jsx(FormMethodsContext.Provider, { value: methodsValue, children }) }) });
+};
+
+// src/components/compound/UseForm/src/FormRenderer/StepperSection.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var getNames2 = (schema) => {
+  const names = [];
+  schema.forEach((r) => r.fields.forEach((f) => names.push(String(f.name))));
+  return names;
+};
+var StepperSection = () => {
+  const { steps, currentStep } = useFormStateContext();
+  const { handleStepChange } = useFormActionsContext();
+  const { useFormMethods: methods } = useFormMethodsContext();
+  const { errors } = useFormState({ control: methods.control });
+  const stepData = React2.useMemo(() => {
+    const errorMap = errors;
+    return steps.map((step, idx) => {
+      const hasError = getNames2(step.schema).some((name) => Boolean(errorMap[name]));
+      return {
+        title: step.title ?? `Step ${idx + 1}`,
+        icon: step.icon ?? idx + 1,
+        error: hasError
+      };
+    });
+  }, [steps, errors]);
+  return /* @__PURE__ */ jsx2(
+    StandardStepper_default,
+    {
+      activeStep: currentStep,
+      onChange: handleStepChange,
+      steps: stepData
+    }
+  );
+};
+var StepperSection_default = StepperSection;
+
+// src/components/compound/UseForm/src/FormRenderer/RowRenderer.tsx
+import React3, { Suspense } from "react";
+
+// src/components/compound/UseForm/src/Fields/TextField.tsx
+import { Controller, useFormContext } from "react-hook-form";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var TextField = ({ field }) => {
+  const { control, getValues } = useFormContext();
+  const {
+    name,
+    label,
+    required,
+    disabled,
+    sx,
+    size,
+    slotProps,
+    errorMsg,
+    defaultValue
+  } = field;
+  const textSlotProps = slotProps;
+  return /* @__PURE__ */ jsx3(
+    Controller,
+    {
+      control,
+      name,
+      defaultValue,
+      render: ({ field: { onChange, value, ...restField }, fieldState: { error } }) => /* @__PURE__ */ jsxs(default2, { sx: mergeSx({
+        display: "flex",
+        alignItems: "flex-start",
+        gap: 1
+      }, mergeFieldSx(size, sx)), children: [
+        /* @__PURE__ */ jsx3(
+          default15,
+          {
+            ...restField,
+            value: value ?? "",
+            onChange: (e) => {
+              onChange(e);
+              textSlotProps?.onChange?.(e);
+              const newValue = e?.target?.value ?? "";
+              field.onChange?.(newValue, getValues());
+            },
+            label,
+            required,
+            disabled,
+            error: !!error,
+            helperText: getHelperText(error, errorMsg, field.helperText),
+            fullWidth: true,
+            size: "small",
+            sx: { flex: 1 },
+            multiline: textSlotProps?.multiline,
+            rows: textSlotProps?.rows,
+            placeholder: textSlotProps?.placeholder,
+            type: "text",
+            slotProps: {
+              htmlInput: {
+                maxLength: textSlotProps?.maxLength
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx3(Explanation_default, { alignToInput: true, explanation: getFieldExplanation(field) })
+      ] })
+    }
+  );
+};
+
+// src/components/compound/UseForm/src/Fields/SelectField.tsx
+import { Controller as Controller2, useFormContext as useFormContext2 } from "react-hook-form";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var SelectField = ({ field }) => {
+  const selectSlotProps = field.slotProps;
+  if (selectSlotProps?.useOptions) {
+    return /* @__PURE__ */ jsx4(SelectFieldWithOptions, { field, useOptions: selectSlotProps.useOptions });
+  }
+  return /* @__PURE__ */ jsx4(SelectFieldView, { field, options: selectSlotProps?.options ?? [] });
+};
+var SelectFieldWithOptions = ({
+  field,
+  useOptions
+}) => {
+  const { options = [] } = useOptions();
+  return /* @__PURE__ */ jsx4(SelectFieldView, { field, options });
+};
+var SelectFieldView = ({
+  field,
+  options
+}) => {
+  const { control, getValues } = useFormContext2();
+  const {
+    name,
+    label,
+    required,
+    disabled,
+    sx,
+    size,
+    slotProps,
+    errorMsg,
+    defaultValue
+  } = field;
+  return /* @__PURE__ */ jsx4(
+    Controller2,
+    {
+      control,
+      name,
+      defaultValue,
+      render: ({ field: { onChange, value, ...restField }, fieldState: { error } }) => /* @__PURE__ */ jsxs2(default2, { sx: mergeSx({
+        display: "flex",
+        alignItems: "flex-start",
+        gap: 1
+      }, mergeFieldSx(size, sx)), children: [
+        /* @__PURE__ */ jsx4(
+          MuiSelect_default,
+          {
+            ...restField,
+            value: value ?? (slotProps?.multiple ? [] : ""),
+            onChange: (e, child) => {
+              const newValue = e?.target?.value;
+              onChange(newValue);
+              slotProps?.onChange?.(e, child);
+              field.onChange?.(newValue, getValues());
+            },
+            label,
+            required,
+            disabled,
+            error: !!error,
+            helperText: getHelperText(error, errorMsg, field.helperText),
+            options,
+            multiple: slotProps?.multiple,
+            sx: { flex: 1 },
+            slotProps: {
+              formControl: {
+                size: "small",
+                disabled,
+                sx: {
+                  width: "100%"
+                }
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx4(Explanation_default, { alignToInput: true, explanation: getFieldExplanation(field) })
+      ] })
+    }
+  );
+};
+
+// src/components/compound/UseForm/src/Fields/SliderField.tsx
+import { Controller as Controller3, useFormContext as useFormContext3 } from "react-hook-form";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var SliderField = ({ field }) => {
+  const { control, getValues } = useFormContext3();
+  const {
+    name,
+    label,
+    required,
+    disabled,
+    sx,
+    size,
+    slotProps,
+    errorMsg,
+    defaultValue
+  } = field;
+  const sliderSlotProps = slotProps;
+  return /* @__PURE__ */ jsx5(
+    Controller3,
+    {
+      control,
+      name,
+      defaultValue,
+      render: ({ field: { onChange, value, ...restField }, fieldState: { error } }) => /* @__PURE__ */ jsxs3(
+        default12,
+        {
+          disabled,
+          required,
+          error: !!error,
+          fullWidth: true,
+          size: "small",
+          sx: mergeFieldSx(size, sx),
+          children: [
+            /* @__PURE__ */ jsxs3(default2, { sx: { display: "flex", alignItems: "center", justifyContent: "flex-start" }, children: [
+              /* @__PURE__ */ jsx5(MuiFormLabel, { component: "legend", children: label }),
+              /* @__PURE__ */ jsx5(Explanation_default, { explanation: getFieldExplanation(field) })
+            ] }),
+            /* @__PURE__ */ jsx5(default2, { sx: { px: 4 }, children: /* @__PURE__ */ jsx5(
+              default14,
+              {
+                ...restField,
+                value: typeof value === "number" || Array.isArray(value) ? value : sliderSlotProps?.min ?? 0,
+                onChange: (event, newValue, activeThumb) => {
+                  const normalized = Array.isArray(newValue) ? newValue[0] : newValue;
+                  onChange(normalized);
+                  sliderSlotProps?.onChange?.(event, newValue, activeThumb);
+                  field.onChange?.(normalized, getValues());
+                },
+                min: sliderSlotProps?.min,
+                max: sliderSlotProps?.max,
+                step: sliderSlotProps?.step,
+                marks: sliderSlotProps?.marks,
+                valueLabelDisplay: sliderSlotProps?.valueLabelDisplay || "auto",
+                orientation: sliderSlotProps?.orientation,
+                disableSwap: sliderSlotProps?.disableSwap,
+                track: sliderSlotProps?.track
+              }
+            ) }),
+            /* @__PURE__ */ jsx5(FieldHelperText, { error, errorMsg, helpers: [field.helperText] })
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/components/compound/UseForm/src/Fields/CheckField.tsx
+import { Controller as Controller4, useFormContext as useFormContext4 } from "react-hook-form";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var CheckField = ({ field }) => {
+  const checkSlot = field.slotProps;
+  if (checkSlot?.useOptions) {
+    return /* @__PURE__ */ jsx6(CheckFieldWithOptions, { field, useOptions: checkSlot.useOptions });
+  }
+  return /* @__PURE__ */ jsx6(CheckFieldView, { field, options: checkSlot?.options ?? [] });
+};
+var CheckFieldWithOptions = ({
+  field,
+  useOptions
+}) => {
+  const { options = [] } = useOptions();
+  return /* @__PURE__ */ jsx6(CheckFieldView, { field, options });
+};
+var CheckFieldView = ({
+  field,
+  options
+}) => {
+  const { control, getValues } = useFormContext4();
+  const {
+    name,
+    required,
+    slotProps,
+    label,
+    defaultValue
+  } = field;
+  const checkSlot = slotProps;
+  const helperText = checkSlot?.helperText;
+  const explanation = getFieldExplanation(field);
+  return /* @__PURE__ */ jsx6(default2, { children: /* @__PURE__ */ jsx6(
+    Controller4,
+    {
+      control,
+      name,
+      defaultValue,
+      render: ({ field: controllerField, fieldState: { error } }) => {
+        const { onChange, value } = controllerField;
+        const checkedIds = Array.isArray(value) ? value.filter((id) => options.some((o) => o.id === id)) : [];
+        return /* @__PURE__ */ jsx6(
+          CheckboxGroup,
+          {
+            ...checkSlot,
+            slotProps: {
+              ...checkSlot?.slotProps ?? {},
+              group: {
+                sx: { fontSize: "14px" }
+              }
+            },
+            options,
+            title: label,
+            titleSuffix: explanation ? /* @__PURE__ */ jsx6(default2, { sx: { display: "inline-flex" }, children: /* @__PURE__ */ jsx6(Explanation_default, { explanation }) }) : void 0,
+            checkedIds,
+            setCheckedIds: (next) => {
+              const currentIds = checkedIds;
+              const newIds = typeof next === "function" ? next(currentIds) : next;
+              const idsArray = newIds ?? [];
+              onChange(idsArray);
+              field.onChange?.(idsArray, getValues());
+            },
+            error: !!error,
+            helperText,
+            errorText: error ? typeof error.message === "string" ? error.message : void 0 : void 0,
+            required
+          }
+        );
+      }
+    }
+  ) });
+};
+
+// src/components/compound/UseForm/src/Fields/ToggleButtonField.tsx
+import { Controller as Controller5, useFormContext as useFormContext5 } from "react-hook-form";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+var ToggleButtonField = ({ field }) => {
+  const { control, getValues } = useFormContext5();
+  const {
+    name,
+    label,
+    required,
+    disabled,
+    sx,
+    size,
+    slotProps,
+    errorMsg,
+    defaultValue
+  } = field;
+  const toggleSlot = slotProps;
+  return /* @__PURE__ */ jsx7(
+    Controller5,
+    {
+      control,
+      name,
+      defaultValue,
+      render: ({ field: { onChange, value }, fieldState: { error } }) => {
+        const helperTextNode = /* @__PURE__ */ jsx7(FieldHelperText, { error, errorMsg, helpers: [field.helperText] });
+        return /* @__PURE__ */ jsxs4(
+          default12,
+          {
+            disabled,
+            required,
+            error: !!error,
+            fullWidth: true,
+            size: "small",
+            sx: mergeFieldSx(size, sx),
+            children: [
+              /* @__PURE__ */ jsxs4(default2, { sx: { display: "flex", alignItems: "center", justifyContent: "flex-start", mb: 0.5 }, children: [
+                /* @__PURE__ */ jsx7(MuiFormLabel, { component: "legend", sx: { mr: 1 }, children: label }),
+                /* @__PURE__ */ jsx7(default2, { sx: { display: "inline-flex" }, children: /* @__PURE__ */ jsx7(Explanation_default, { explanation: getFieldExplanation(field) }) })
+              ] }),
+              /* @__PURE__ */ jsx7(default2, { sx: { px: 4, py: 1 }, children: /* @__PURE__ */ jsx7(
+                ToggleButtonGroup,
+                {
+                  value: typeof value === "string" ? value : toggleSlot?.options?.[0]?.value ?? "",
+                  onChange: (e, newValue) => {
+                    onChange(newValue ?? null);
+                    field.onChange?.(newValue ?? null, getValues());
+                  },
+                  options: toggleSlot?.options ?? [],
+                  color: toggleSlot?.color
+                }
+              ) }),
+              helperTextNode
+            ]
+          }
+        );
+      }
+    }
+  );
+};
+
+// src/components/compound/UseForm/src/Fields/SwitchField.tsx
+import { Controller as Controller6, useFormContext as useFormContext6 } from "react-hook-form";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var SwitchField = ({ field }) => {
+  const { control, getValues } = useFormContext6();
+  const {
+    name,
+    label,
+    required,
+    disabled,
+    sx,
+    size,
+    slotProps,
+    errorMsg,
+    defaultValue
+  } = field;
+  const switchSlot = slotProps;
+  return /* @__PURE__ */ jsx8(
+    Controller6,
+    {
+      control,
+      name,
+      defaultValue: defaultValue ?? false,
+      render: ({ field: { onChange, value }, fieldState: { error } }) => /* @__PURE__ */ jsxs5(
+        default12,
+        {
+          disabled,
+          required,
+          error: !!error,
+          fullWidth: true,
+          size: "small",
+          sx: mergeFieldSx(size, sx),
+          children: [
+            /* @__PURE__ */ jsxs5(default3, { direction: "row", alignItems: "center", gap: 1, children: [
+              /* @__PURE__ */ jsx8(MuiFormLabel, { component: "legend", sx: { fontSize: "12px", userSelect: "none", color: "var(--useform-label-color)" }, children: label }),
+              /* @__PURE__ */ jsx8(
+                MuiSwitch,
+                {
+                  ...switchSlot,
+                  helperText: void 0,
+                  label: void 0,
+                  checked: !!value,
+                  onChange: (e, checked) => {
+                    onChange(checked);
+                    field.onChange?.(checked, getValues());
+                    switchSlot?.onChange?.(e, checked);
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx8(default2, { sx: { "& > span > button.MuiButtonBase-root.MuiIconButton-root": { m: 0, p: 0 } }, children: /* @__PURE__ */ jsx8(Explanation_default, { explanation: getFieldExplanation(field) }) })
+            ] }),
+            /* @__PURE__ */ jsx8(FieldHelperText, { error, errorMsg, helpers: [field.helperText] })
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/components/compound/UseForm/src/Fields/CustomField.tsx
+import { Controller as Controller7, useFormContext as useFormContext7 } from "react-hook-form";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var CustomField = ({ field }) => {
+  const { control, getValues } = useFormContext7();
+  const {
+    name,
+    label,
+    required,
+    disabled,
+    sx,
+    size,
+    slotProps,
+    errorMsg,
+    defaultValue
+  } = field;
+  const customSlot = slotProps;
+  return /* @__PURE__ */ jsx9(
+    Controller7,
+    {
+      control,
+      name,
+      defaultValue,
+      render: ({ field: { onChange, value }, fieldState: { error } }) => {
+        const handleChange = (v) => {
+          onChange(v);
+          field.onChange?.(v, getValues());
+        };
+        return /* @__PURE__ */ jsxs6(
+          default12,
+          {
+            disabled,
+            required,
+            error: !!error,
+            fullWidth: true,
+            size: "small",
+            sx: mergeFieldSx(size, sx),
+            children: [
+              /* @__PURE__ */ jsxs6(default2, { sx: { display: "flex", alignItems: "center", justifyContent: "flex-start" }, children: [
+                /* @__PURE__ */ jsx9(MuiFormLabel, { component: "legend", children: label }),
+                /* @__PURE__ */ jsx9(Explanation_default, { explanation: getFieldExplanation(field) })
+              ] }),
+              /* @__PURE__ */ jsx9(default2, { sx: { py: 1 }, children: typeof customSlot?.render === "function" ? customSlot.render({ value, onChange: handleChange, error: !!error, helperText: customSlot?.helperText, getValues: () => getValues() }) : (
+                // fallback simple input
+                /* @__PURE__ */ jsx9(
+                  "input",
+                  {
+                    value: value ?? "",
+                    onChange: (e) => handleChange(e.target.value),
+                    style: { width: "100%", padding: 8, boxSizing: "border-box" }
+                  }
+                )
+              ) }),
+              /* @__PURE__ */ jsx9(FieldHelperText, { error, errorMsg, helpers: [String(customSlot?.helperText ?? "")] })
+            ]
+          }
+        );
+      }
+    }
+  );
+};
+
+// src/components/compound/UseForm/src/Fields/TextArrayField.tsx
+import { Controller as Controller8, useFormContext as useFormContext8 } from "react-hook-form";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+var TextArrayField = ({ field }) => {
+  const { control, getValues } = useFormContext8();
+  const {
+    name,
+    label,
+    required,
+    disabled,
+    slotProps,
+    errorMsg,
+    defaultValue
+  } = field;
+  const taSlot = slotProps;
+  const minItems = taSlot?.minItems ?? 0;
+  const maxItems = taSlot?.maxItems ?? Infinity;
+  return /* @__PURE__ */ jsx10(
+    Controller8,
+    {
+      control,
+      name,
+      defaultValue: defaultValue ?? [],
+      render: ({ field: controllerField, fieldState: { error } }) => {
+        const { onChange, value } = controllerField;
+        const items = Array.isArray(value) ? value : [];
+        const setItems = (next) => {
+          onChange(next);
+          if (field?.onChange) {
+            field.onChange(next, getValues());
+          }
+        };
+        const addItem = () => {
+          if (items.length >= maxItems) return;
+          setItems([...items, ""]);
+        };
+        const removeItem = (index) => {
+          if (items.length <= minItems) return;
+          const next = items.slice(0, index).concat(items.slice(index + 1));
+          setItems(next);
+        };
+        const updateItem = (index, v) => {
+          const next = items.slice();
+          next[index] = v;
+          setItems(next);
+        };
+        return /* @__PURE__ */ jsxs7(
+          default12,
+          {
+            disabled,
+            required,
+            error: !!error,
+            fullWidth: true,
+            size: "small",
+            sx: mergeFieldSx(field.size, field.sx),
+            children: [
+              /* @__PURE__ */ jsxs7(default2, { sx: { display: "flex", alignItems: "center", justifyContent: "flex-start" }, children: [
+                /* @__PURE__ */ jsx10(MuiFormLabel, { component: "legend", children: label }),
+                /* @__PURE__ */ jsx10(Explanation_default, { explanation: getFieldExplanation(field) })
+              ] }),
+              /* @__PURE__ */ jsxs7(default2, { sx: { py: 1, display: "flex", flexDirection: "column", gap: 1 }, children: [
+                items.map((it, idx) => /* @__PURE__ */ jsxs7(default2, { sx: { display: "flex", gap: 1, alignItems: "center" }, children: [
+                  /* @__PURE__ */ jsx10(
+                    default15,
+                    {
+                      size: "small",
+                      value: it,
+                      onChange: (e) => updateItem(idx, e.target.value),
+                      placeholder: taSlot?.itemProps?.placeholder,
+                      sx: { flex: 1 },
+                      slotProps: {
+                        htmlInput: {
+                          maxLength: taSlot?.itemProps?.maxLength
+                        }
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx10(IconButton_default, { size: "small", onClick: () => removeItem(idx), disabled: items.length <= minItems, children: /* @__PURE__ */ jsx10(default7, { fontSize: "small" }) })
+                ] }, idx)),
+                /* @__PURE__ */ jsx10(default2, { children: /* @__PURE__ */ jsx10(Button, { size: "small", startIcon: /* @__PURE__ */ jsx10(default5, {}), onClick: addItem, disabled: items.length >= maxItems, children: taSlot?.addButtonLabel ?? "Add" }) })
+              ] }),
+              /* @__PURE__ */ jsx10(FieldHelperText, { error, errorMsg, helpers: [field.helperText] })
+            ]
+          }
+        );
+      }
+    }
+  );
+};
+
+// src/components/compound/UseForm/src/Fields/NumberField.tsx
+import { Controller as Controller9, useFormContext as useFormContext9 } from "react-hook-form";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+var NumberField = ({ field }) => {
+  const { control, getValues } = useFormContext9();
+  const { name, label, required, disabled, sx, size, slotProps, errorMsg, defaultValue } = field;
+  const numSlot = slotProps;
+  return /* @__PURE__ */ jsx11(
+    Controller9,
+    {
+      control,
+      name,
+      defaultValue: defaultValue ?? numSlot?.min ?? 0,
+      render: ({ field: controllerField, fieldState: { error } }) => {
+        const { onChange, value } = controllerField;
+        const update = (next) => {
+          onChange(next);
+          field.onChange?.(next, getValues());
+        };
+        const handleMinus = () => {
+          const s = numSlot?.step ?? 1;
+          const cur = value ?? (numSlot?.min ?? 0);
+          let next = cur - s;
+          if (typeof numSlot?.min === "number") next = Math.max(next, numSlot.min);
+          update(next);
+        };
+        const handlePlus = () => {
+          const s = numSlot?.step ?? 1;
+          const cur = value ?? (numSlot?.min ?? 0);
+          let next = cur + s;
+          if (typeof numSlot?.max === "number") next = Math.min(next, numSlot.max);
+          update(next);
+        };
+        return /* @__PURE__ */ jsx11(
+          default12,
+          {
+            disabled,
+            required,
+            error: !!error,
+            fullWidth: true,
+            size: "small",
+            sx: mergeSx(mergeFieldSx(size, sx), { maxWidth: "200px" }),
+            children: /* @__PURE__ */ jsxs8(default2, { sx: { display: "flex", alignItems: "flex-start", gap: 1 }, children: [
+              /* @__PURE__ */ jsx11(
+                default15,
+                {
+                  fullWidth: true,
+                  size: "small",
+                  type: "number",
+                  label,
+                  required,
+                  error: !!error,
+                  helperText: getHelperText(error, errorMsg, field.helperText),
+                  value: value ?? "",
+                  sx: {
+                    flex: 1,
+                    minWidth: 0,
+                    "& input[type=number]::-webkit-outer-spin-button": {
+                      WebkitAppearance: "none",
+                      margin: 0
+                    },
+                    "& input[type=number]::-webkit-inner-spin-button": {
+                      WebkitAppearance: "none",
+                      margin: 0
+                    },
+                    "& input[type=number]": {
+                      MozAppearance: "textfield",
+                      WebkitAppearance: "textfield",
+                      appearance: "textfield"
+                    }
+                  },
+                  onChange: (e) => {
+                    const s = e.target.value;
+                    const parsed = s === "" ? null : Number(s);
+                    onChange(parsed);
+                    field.onChange?.(parsed, getValues());
+                  },
+                  slotProps: {
+                    ...numSlot?.slotProps,
+                    htmlInput: {
+                      ...numSlot?.slotProps?.htmlInput ?? {},
+                      min: numSlot?.min,
+                      max: numSlot?.max,
+                      step: numSlot?.step,
+                      style: { textAlign: "center" }
+                    },
+                    input: {
+                      ...numSlot?.slotProps?.input ?? {},
+                      startAdornment: /* @__PURE__ */ jsx11(default13, { position: "start", children: /* @__PURE__ */ jsx11(IconButton_default, { size: "small", onClick: handleMinus, disabled: typeof value === "number" && typeof numSlot?.min === "number" ? value <= numSlot.min : false, children: /* @__PURE__ */ jsx11(default4, { fontSize: "small" }) }) }),
+                      endAdornment: /* @__PURE__ */ jsx11(default13, { position: "end", children: /* @__PURE__ */ jsx11(IconButton_default, { size: "small", onClick: handlePlus, disabled: typeof value === "number" && typeof numSlot?.max === "number" ? value >= numSlot.max : false, children: /* @__PURE__ */ jsx11(default5, { fontSize: "small" }) }) })
+                    }
+                  },
+                  disabled
+                }
+              ),
+              /* @__PURE__ */ jsx11(Explanation_default, { alignToInput: true, explanation: getFieldExplanation(field) })
+            ] })
+          }
+        );
+      }
+    }
+  );
+};
+
+// src/components/compound/UseForm/src/FormRenderer/RowRenderer.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+var DateField = React3.lazy(
+  () => import("./DateField-ZYMZFHL4.mjs").then((m) => ({
+    default: m.DateField
+  }))
+);
+var DateTimeField = React3.lazy(
+  () => import("./DateTimeField-TPTJ7YIZ.mjs").then((m) => ({
+    default: m.DateTimeField
+  }))
+);
+var TelField = React3.lazy(
+  () => import("./TelField-LOGRVZ4I.mjs").then((m) => ({
+    default: m.TelField
+  }))
+);
+var FileUploadField = React3.lazy(
+  () => import("./FileUploadField-NTMWBJER.mjs").then((m) => ({
+    default: m.FileUploadField
+  }))
+);
+var AvatarField = React3.lazy(
+  () => import("./AvatarField-SAODT3CZ.mjs").then((m) => ({
+    default: m.AvatarField
+  }))
+);
+var JSONEditorField = React3.lazy(
+  () => import("./JSONEditorField-TMRWGXVR.mjs").then((m) => ({
+    default: m.JSONEditorField
+  }))
+);
+var AutocompleteField = React3.lazy(
+  () => import("./AutocompleteField-ZKNU2IRR.mjs").then((m) => ({
+    default: m.AutocompleteField
+  }))
+);
+var lazyFieldFallback = /* @__PURE__ */ jsx12(default2, { sx: { minHeight: 40 } });
+var LazyField = ({ children }) => /* @__PURE__ */ jsx12(Suspense, { fallback: lazyFieldFallback, children });
+var FieldRenderer = ({ field }) => {
+  switch (field.type) {
+    case FIELD_TYPEs.text:
+      return /* @__PURE__ */ jsx12(TextField, { field });
+    case FIELD_TYPEs.select:
+      return /* @__PURE__ */ jsx12(SelectField, { field });
+    case FIELD_TYPEs.slider:
+      return /* @__PURE__ */ jsx12(SliderField, { field });
+    case FIELD_TYPEs.check:
+      return /* @__PURE__ */ jsx12(CheckField, { field });
+    case FIELD_TYPEs.date:
+      return /* @__PURE__ */ jsx12(LazyField, { children: /* @__PURE__ */ jsx12(DateField, { field }) });
+    case FIELD_TYPEs.dateTime:
+      return /* @__PURE__ */ jsx12(LazyField, { children: /* @__PURE__ */ jsx12(DateTimeField, { field }) });
+    case FIELD_TYPEs.toggleButton:
+      return /* @__PURE__ */ jsx12(ToggleButtonField, { field });
+    case FIELD_TYPEs.autocomplete:
+      return /* @__PURE__ */ jsx12(LazyField, { children: /* @__PURE__ */ jsx12(AutocompleteField, { field }) });
+    case FIELD_TYPEs.switch:
+      return /* @__PURE__ */ jsx12(SwitchField, { field });
+    case FIELD_TYPEs.number:
+      return /* @__PURE__ */ jsx12(NumberField, { field });
+    case FIELD_TYPEs.json:
+      return /* @__PURE__ */ jsx12(LazyField, { children: /* @__PURE__ */ jsx12(JSONEditorField, { field }) });
+    case FIELD_TYPEs.tel:
+      return /* @__PURE__ */ jsx12(LazyField, { children: /* @__PURE__ */ jsx12(TelField, { field }) });
+    case FIELD_TYPEs.fileUpload:
+      return /* @__PURE__ */ jsx12(LazyField, { children: /* @__PURE__ */ jsx12(FileUploadField, { field }) });
+    case FIELD_TYPEs.avatar:
+      return /* @__PURE__ */ jsx12(LazyField, { children: /* @__PURE__ */ jsx12(AvatarField, { field }) });
+    case FIELD_TYPEs.textArray:
+      return /* @__PURE__ */ jsx12(TextArrayField, { field });
+    case FIELD_TYPEs.custom:
+      return /* @__PURE__ */ jsx12(CustomField, { field });
+    default:
+      return /* @__PURE__ */ jsx12("div", { children: "Unknown Field Type" });
+  }
+};
+var RowFieldFrame = ({
+  field,
+  hidden
+}) => {
+  return /* @__PURE__ */ jsx12(
+    default2,
+    {
+      sx: {
+        flex: field.size?.width || 1,
+        minWidth: field.size?.width || "auto",
+        ...hidden && { display: "none" },
+        "& > *": {
+          minWidth: 200
+        }
+      },
+      children: /* @__PURE__ */ jsx12(FieldRenderer, { field })
+    }
+  );
+};
+var RowFieldWithHide = ({
+  field,
+  useHide
+}) => {
+  const hidden = useHide();
+  return /* @__PURE__ */ jsx12(RowFieldFrame, { field, hidden });
+};
+var RowField = ({ field }) => {
+  if (field.useHide) {
+    return /* @__PURE__ */ jsx12(RowFieldWithHide, { field, useHide: field.useHide });
+  }
+  return /* @__PURE__ */ jsx12(RowFieldFrame, { field, hidden: false });
+};
+var RowRenderer = ({ row }) => {
+  return /* @__PURE__ */ jsx12(
+    default2,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "row",
+        gap: 2,
+        justifyContent: "space-between",
+        flexWrap: "wrap",
+        marginBottom: 1,
+        pt: 1,
+        ...row.sx
+      },
+      children: row.fields.map((field) => /* @__PURE__ */ jsx12(RowField, { field }, String(field.name)))
+    }
+  );
+};
+var RowRenderer_default = RowRenderer;
+
+// src/components/compound/UseForm/src/FormRenderer/Navigation.tsx
+import { useFormContext as useFormContext10, useFormState as useFormState2 } from "react-hook-form";
+import { Fragment, jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+var Navigation = ({
+  isMulti,
+  currentStep,
+  isLastStep,
+  handleBack,
+  handleNext,
+  onSubmit,
+  undo,
+  clear,
+  extraButtons
+}) => {
+  const { control } = useFormContext10();
+  const { isSubmitting } = useFormState2({ control });
+  return /* @__PURE__ */ jsxs9(
+    default2,
+    {
+      sx: {
+        padding: "4px 0",
+        display: "flex",
+        justifyContent: "flex-end",
+        gap: 1
+      },
+      children: [
+        extraButtons,
+        undo && /* @__PURE__ */ jsx13(IconButton_default, { onClick: undo, size: "small", disabled: isSubmitting, "aria-label": "Undo", children: /* @__PURE__ */ jsx13(default9, { fontSize: "small" }) }),
+        clear && /* @__PURE__ */ jsx13(IconButton_default, { onClick: clear, size: "small", disabled: isSubmitting, "aria-label": "Clear", children: /* @__PURE__ */ jsx13(default7, { fontSize: "small" }) }),
+        isMulti ? /* @__PURE__ */ jsxs9(Fragment, { children: [
+          /* @__PURE__ */ jsx13(IconButton_default, { onClick: handleBack, disabled: currentStep === 0 || isSubmitting, size: "small", "aria-label": "Back", children: /* @__PURE__ */ jsx13(default10, { fontSize: "small" }) }),
+          /* @__PURE__ */ jsx13(IconButton_default, { onClick: handleNext, size: "small", color: isLastStep ? "success" : void 0, disabled: isSubmitting, "aria-label": isLastStep ? "Submit" : "Next", children: isLastStep ? isSubmitting ? /* @__PURE__ */ jsx13(CircularProgress, { size: 18, color: "inherit" }) : /* @__PURE__ */ jsx13(default8, { fontSize: "small" }) : /* @__PURE__ */ jsx13(default11, { fontSize: "small" }) })
+        ] }) : /* @__PURE__ */ jsx13(IconButton_default, { onClick: onSubmit, size: "small", color: "success", disabled: isSubmitting, "aria-label": "Submit", children: isSubmitting ? /* @__PURE__ */ jsx13(CircularProgress, { size: 18, color: "inherit" }) : /* @__PURE__ */ jsx13(default8, { fontSize: "small" }) })
+      ]
+    }
+  );
+};
+var Navigation_default = Navigation;
+
+// src/components/compound/UseForm/src/hooks/useRegisterFields.ts
+import { useEffect as useEffect2, useMemo as useMemo3 } from "react";
+function useRegisterFields(methods, config) {
+  const signature = useMemo3(() => getFormFieldsSignature(config), [config]);
+  useEffect2(() => {
+    const rows = collectRows(config);
+    rows.forEach((row) => {
+      row.fields.forEach((field) => {
+        const name = field.name;
+        methods.register(name, {
+          shouldUnregister: false
+        });
+        if (field.defaultValue !== void 0) {
+          const alreadyProvided = config.defaultValues && Object.prototype.hasOwnProperty.call(config.defaultValues, name);
+          if (!alreadyProvided) {
+            methods.setValue(name, field.defaultValue, { shouldDirty: false });
+          }
+        } else {
+          const current = methods.getValues(name);
+          if (current === void 0) {
+            methods.setValue(name, null, { shouldDirty: false });
+          }
+        }
+      });
+    });
+  }, [methods, signature]);
+}
+var useRegisterFields_default = useRegisterFields;
+
+// src/components/compound/UseForm/src/theme.ts
+var useFormRootSx = {
+  "--useform-error": "var(--mui-palette-error-main)",
+  "--useform-error-hover": "var(--mui-palette-error-dark)",
+  "--useform-label-color": "var(--mui-palette-text-grey-1)",
+  "--useform-warning": "var(--mui-palette-warning-main)"
+};
+
+// src/components/compound/UseForm/src/FormRenderer/Layout.tsx
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+var FormRenderer = (props) => {
+  const {
+    methods: propMethods,
+    config,
+    onSubmit,
+    showUndo = true,
+    showClear = true,
+    children,
+    extraButtons
+  } = props;
+  const { steps, currentStep } = useFormStateContext();
+  const { setCurrentStep, handleStepChange, submit, undo, clear } = useFormActionsContext();
+  const { useFormMethods: ctxMethods } = useFormMethodsContext();
+  const methods = propMethods ?? ctxMethods;
+  useRegisterFields_default(methods, config);
+  const isMulti = steps.length > 1;
+  const isLastStep = currentStep === steps.length - 1;
+  const sortedSchema = React4.useMemo(() => {
+    const currentSchema = steps[currentStep]?.schema || [];
+    const compare = (a, b) => {
+      const an = Number(a.row);
+      const bn = Number(b.row);
+      const aIsNum = !Number.isNaN(an);
+      const bIsNum = !Number.isNaN(bn);
+      if (aIsNum && bIsNum) return an - bn;
+      if (aIsNum) return -1;
+      if (bIsNum) return 1;
+      return String(a.row).localeCompare(String(b.row));
+    };
+    return [...currentSchema].slice().sort(compare);
+  }, [steps, currentStep]);
+  const handleNext = async () => {
+    if (isLastStep) {
+      await submit(onSubmit);
+      return;
+    }
+    await handleStepChange(currentStep + 1);
+  };
+  const handleBack = () => {
+    if (currentStep > 0) setCurrentStep((s) => s - 1);
+  };
+  const handleFormSubmit = methods.handleSubmit(async () => {
+    await submit(onSubmit);
+  });
+  return /* @__PURE__ */ jsx14(FormProvider, { ...methods, children: /* @__PURE__ */ jsxs10(default2, { sx: mergeSx(useFormRootSx, {
+    display: "flex",
+    flexDirection: "column",
+    gap: "4px",
+    overflow: "hidden",
+    px: 1.5,
+    py: 1
+  }), children: [
+    isMulti && /* @__PURE__ */ jsx14(StepperSection_default, {}),
+    /* @__PURE__ */ jsx14(default2, { sx: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "8px",
+      flex: 1,
+      overflow: "auto"
+    }, children: /* @__PURE__ */ jsx14(default2, { sx: { flex: 1 }, children: /* @__PURE__ */ jsxs10("form", { onSubmit: handleFormSubmit, children: [
+      sortedSchema.map((row, idx) => /* @__PURE__ */ jsx14(RowRenderer_default, { row }, `${row.row}-${idx}`)),
+      children
+    ] }) }) }),
+    /* @__PURE__ */ jsx14(
+      Navigation_default,
+      {
+        isMulti,
+        currentStep,
+        isLastStep,
+        handleBack,
+        handleNext,
+        onSubmit: handleFormSubmit,
+        undo: showUndo ? undo : void 0,
+        clear: showClear ? clear : void 0,
+        extraButtons
+      }
+    )
+  ] }) });
+};
+
+// src/components/compound/UseForm/src/FormModalRenderer.tsx
+import React6 from "react";
+
+// src/components/compound/UseForm/src/FormTree.tsx
+import React5 from "react";
+import { jsx as jsx15 } from "react/jsx-runtime";
+function FormTreeInner({
+  methods,
+  config,
+  livePropsRef,
+  showUndo = true,
+  showClear = true
+}) {
+  const extraButtons = livePropsRef.current.extraButtons;
+  const extraButtonsElement = typeof extraButtons === "function" ? extraButtons(methods) : extraButtons;
+  const onSubmit = React5.useCallback((data) => {
+    livePropsRef.current.onSubmit(data);
+  }, [livePropsRef]);
+  return /* @__PURE__ */ jsx15(FormContextProvider, { config, useFormMethods: methods, children: /* @__PURE__ */ jsx15(
+    FormRenderer,
+    {
+      methods,
+      config,
+      onSubmit,
+      extraButtons: extraButtonsElement,
+      showUndo,
+      showClear,
+      children: livePropsRef.current.children
+    }
+  ) });
+}
+function formTreePropsAreEqual(prev, next) {
+  return prev.methods === next.methods && prev.config === next.config && prev.livePropsRef === next.livePropsRef && (prev.showUndo ?? true) === (next.showUndo ?? true) && (prev.showClear ?? true) === (next.showClear ?? true);
+}
+var FormTreeMemo = React5.memo(FormTreeInner, formTreePropsAreEqual);
+var FormTree = FormTreeMemo;
+
+// src/components/compound/UseForm/src/FormModalRenderer.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+function FormModalRenderer(p) {
+  const {
+    openProps,
+    title,
+    methods,
+    config,
+    onSubmit,
+    extraButtons,
+    children,
+    maxWidth = "600px",
+    closeOnBackdropClick = true,
+    showCloseButton = true,
+    showUndo = true,
+    showClear = true,
+    slotProps
+  } = p;
+  const [, setOpen] = openProps;
+  const livePropsRef = React6.useRef({ onSubmit, extraButtons, children });
+  livePropsRef.current = { onSubmit, extraButtons, children };
+  const handleClose = (event, reason) => {
+    if (reason === "backdropClick" && !closeOnBackdropClick) return;
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsx16(
+    MuiModal,
+    {
+      openProps,
+      title,
+      maxWidth,
+      onClose: handleClose,
+      closeButton: showCloseButton ? /* @__PURE__ */ jsx16(default2, { sx: useFormRootSx, children: /* @__PURE__ */ jsx16(IconButton_default, { onClick: () => setOpen(false), sx: {
+        backgroundColor: "transparent",
+        color: "var(--useform-error)",
+        "&:hover": {
+          color: "var(--useform-error-hover)",
+          borderColor: "transparent"
+        }
+      }, children: /* @__PURE__ */ jsx16(default6, { sx: { fontSize: 16 } }) }) }) : null,
+      ...slotProps?.modal,
+      children: /* @__PURE__ */ jsx16(
+        FormTree,
+        {
+          methods,
+          config,
+          livePropsRef,
+          showUndo,
+          showClear
+        }
+      )
+    }
+  );
+}
+
+// src/components/compound/UseForm/src/UseForm.tsx
+import React7 from "react";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import { jsx as jsx17 } from "react/jsx-runtime";
+function UseForm({
+  config,
+  onSubmit,
+  showUndo = true,
+  showClear = true,
+  extraButtons
+}) {
+  const { methods, config: resolvedConfig } = useConfiguredForm({ config });
+  const livePropsRef = React7.useRef({ onSubmit, extraButtons });
+  livePropsRef.current = { onSubmit, extraButtons };
+  return /* @__PURE__ */ jsx17(LocalizationProvider, { dateAdapter: AdapterDayjs, children: /* @__PURE__ */ jsx17(
+    FormTree,
+    {
+      methods,
+      config: resolvedConfig,
+      livePropsRef,
+      showUndo,
+      showClear
+    }
+  ) });
+}
+
+export {
+  useConfiguredForm,
+  useForm2,
+  FormRenderer,
+  FormModalRenderer,
+  UseForm
+};
+//# sourceMappingURL=chunk-24XDGNJ6.mjs.map