@omnitron-dev/prism 0.1.1

package/dist/chunk-LAEY5USO.js

@@ -0,0 +1,2621 @@
+import { forwardRef, useState, useRef, useEffect, useId, useCallback, useMemo } from 'react';
+import InputBase from '@mui/material/InputBase';
+import InputAdornment from '@mui/material/InputAdornment';
+import Tooltip from '@mui/material/Tooltip';
+import Box7 from '@mui/material/Box';
+import { useTheme, alpha } from '@mui/material/styles';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useFormContext, Controller } from 'react-hook-form';
+import TextField from '@mui/material/TextField';
+import MenuItem from '@mui/material/MenuItem';
+import Checkbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import FormControl8 from '@mui/material/FormControl';
+import FormHelperText9 from '@mui/material/FormHelperText';
+import Switch from '@mui/material/Switch';
+import FormLabel6 from '@mui/material/FormLabel';
+import Radio from '@mui/material/Radio';
+import RadioGroup from '@mui/material/RadioGroup';
+import Autocomplete from '@mui/material/Autocomplete';
+import Chip from '@mui/material/Chip';
+import Rating from '@mui/material/Rating';
+import Slider from '@mui/material/Slider';
+import Typography2 from '@mui/material/Typography';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import dayjs from 'dayjs';
+import { TimePicker } from '@mui/x-date-pickers/TimePicker';
+import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import FormGroup from '@mui/material/FormGroup';
+import { useDropzone } from 'react-dropzone';
+import Stack from '@mui/material/Stack';
+import IconButton from '@mui/material/IconButton';
+import Avatar from '@mui/material/Avatar';
+import Menu from '@mui/material/Menu';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+
+function SearchIcon({ size = 18 }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
+        /* @__PURE__ */ jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+      ]
+    }
+  );
+}
+function ClearIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+      ]
+    }
+  );
+}
+var SearchInput = forwardRef(function SearchInput2({
+  value: controlledValue,
+  onChange,
+  placeholder = "Search...",
+  debounce = 0,
+  compact = false,
+  fullWidth = true,
+  width,
+  minWidth,
+  clearTooltip = "Clear",
+  autoFocus,
+  onFocus,
+  onBlur,
+  onKeyDown,
+  sx
+}, ref) {
+  const theme = useTheme();
+  const [localValue, setLocalValue] = useState(controlledValue ?? "");
+  const timerRef = useRef(void 0);
+  useEffect(() => {
+    if (controlledValue !== void 0) {
+      setLocalValue(controlledValue);
+    }
+  }, [controlledValue]);
+  const displayValue = controlledValue !== void 0 && debounce === 0 ? controlledValue : localValue;
+  const handleChange = (e) => {
+    const val = e.target.value;
+    setLocalValue(val);
+    if (debounce > 0) {
+      clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(() => onChange?.(val), debounce);
+    } else {
+      onChange?.(val);
+    }
+  };
+  const handleClear = () => {
+    setLocalValue("");
+    clearTimeout(timerRef.current);
+    onChange?.("");
+  };
+  useEffect(() => () => clearTimeout(timerRef.current), []);
+  const py = compact ? 0.625 : 0.75;
+  const px = compact ? 1.25 : 1.5;
+  const inputPy = compact ? "3px" : "4px";
+  return /* @__PURE__ */ jsx(
+    InputBase,
+    {
+      ref,
+      fullWidth,
+      placeholder,
+      value: displayValue,
+      onChange: handleChange,
+      autoFocus,
+      onFocus,
+      onBlur,
+      onKeyDown,
+      startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", sx: { color: "text.disabled", mr: compact ? 0.75 : 1 }, children: /* @__PURE__ */ jsx(SearchIcon, { size: compact ? 16 : 18 }) }),
+      endAdornment: displayValue ? /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(Tooltip, { title: clearTooltip, children: /* @__PURE__ */ jsx(
+        Box7,
+        {
+          component: "button",
+          type: "button",
+          onClick: handleClear,
+          sx: {
+            p: 0.25,
+            border: "none",
+            background: "none",
+            cursor: "pointer",
+            color: "text.disabled",
+            display: "flex",
+            alignItems: "center",
+            borderRadius: "50%",
+            "&:hover": { color: "text.secondary" }
+          },
+          children: /* @__PURE__ */ jsx(ClearIcon, {})
+        }
+      ) }) }) : null,
+      sx: {
+        px,
+        py,
+        borderRadius: 1,
+        fontSize: "0.875rem",
+        bgcolor: alpha(theme.palette.grey[500], 0.08),
+        transition: theme.transitions.create(["background-color"], {
+          duration: theme.transitions.duration.shorter
+        }),
+        "&:hover": {
+          bgcolor: alpha(theme.palette.grey[500], 0.12)
+        },
+        "&.Mui-focused": {
+          bgcolor: alpha(theme.palette.grey[500], 0.16)
+        },
+        "& .MuiInputBase-input": {
+          py: inputPy,
+          px: 0,
+          overflow: "visible",
+          "&::placeholder": {
+            opacity: 0.64
+          }
+        },
+        ...width != null && { width },
+        ...minWidth != null && { minWidth },
+        ...!fullWidth && { width: width ?? "auto" },
+        ...Array.isArray(sx) ? Object.assign({}, ...sx) : sx
+      }
+    }
+  );
+});
+function FieldText({
+  name,
+  helperText,
+  rules,
+  required,
+  slotProps,
+  multiline,
+  ...other
+}) {
+  const { control } = useFormContext();
+  const id = useId();
+  const inputId = `field-text-${id}`;
+  const helperId = `field-text-helper-${id}`;
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      rules,
+      render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(
+        TextField,
+        {
+          ...field,
+          id: inputId,
+          fullWidth: true,
+          multiline,
+          value: field.value ?? "",
+          error: !!error,
+          helperText: error?.message ?? helperText,
+          required,
+          slotProps: {
+            formHelperText: {
+              id: helperId
+            },
+            htmlInput: {
+              "aria-describedby": error?.message || helperText ? helperId : void 0,
+              "aria-invalid": !!error,
+              "aria-required": required
+            },
+            // Shrink label for multiline fields to prevent overlap with textarea content
+            ...multiline ? { inputLabel: { shrink: true } } : {},
+            ...slotProps
+          },
+          ...other
+        }
+      )
+    }
+  );
+}
+function FieldSelect({
+  name,
+  options,
+  helperText,
+  placeholder,
+  rules,
+  required,
+  slotProps,
+  ...other
+}) {
+  const { control } = useFormContext();
+  const id = useId();
+  const inputId = `field-select-${id}`;
+  const helperId = `field-select-helper-${id}`;
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      rules,
+      render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsxs(
+        TextField,
+        {
+          ...field,
+          id: inputId,
+          select: true,
+          fullWidth: true,
+          value: field.value ?? "",
+          error: !!error,
+          helperText: error?.message ?? helperText,
+          required,
+          slotProps: {
+            formHelperText: {
+              id: helperId
+            },
+            select: {
+              "aria-describedby": error?.message || helperText ? helperId : void 0,
+              "aria-invalid": !!error,
+              "aria-required": required
+            },
+            ...slotProps
+          },
+          ...other,
+          children: [
+            placeholder && /* @__PURE__ */ jsx(MenuItem, { value: "", disabled: true, "aria-hidden": "true", children: placeholder }),
+            options.map((option) => /* @__PURE__ */ jsx(
+              MenuItem,
+              {
+                value: option.value,
+                disabled: option.disabled,
+                "aria-disabled": option.disabled,
+                children: option.label
+              },
+              option.value
+            ))
+          ]
+        }
+      )
+    }
+  );
+}
+function FieldCheckbox({
+  name,
+  label,
+  helperText,
+  rules,
+  required,
+  indeterminate,
+  ...other
+}) {
+  const { control } = useFormContext();
+  const id = useId();
+  const inputId = `field-checkbox-${id}`;
+  const helperId = `field-checkbox-helper-${id}`;
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      rules,
+      render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsxs(FormControl8, { error: !!error, required, children: [
+        /* @__PURE__ */ jsx(
+          FormControlLabel,
+          {
+            control: /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                ...field,
+                id: inputId,
+                checked: !!field.value,
+                indeterminate,
+                inputProps: {
+                  "aria-describedby": error?.message || helperText ? helperId : void 0,
+                  "aria-invalid": !!error,
+                  "aria-required": required,
+                  ...indeterminate && { "aria-checked": "mixed" }
+                },
+                ...other
+              }
+            ),
+            label,
+            htmlFor: inputId
+          }
+        ),
+        (error?.message || helperText) && /* @__PURE__ */ jsx(FormHelperText9, { id: helperId, children: error?.message ?? helperText })
+      ] })
+    }
+  );
+}
+function FieldSwitch({
+  name,
+  label,
+  helperText,
+  labelPlacement = "end",
+  rules,
+  required,
+  ...other
+}) {
+  const { control } = useFormContext();
+  const id = useId();
+  const inputId = `field-switch-${id}`;
+  const helperId = `field-switch-helper-${id}`;
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      rules,
+      render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsxs(FormControl8, { error: !!error, required, children: [
+        /* @__PURE__ */ jsx(
+          FormControlLabel,
+          {
+            control: /* @__PURE__ */ jsx(
+              Switch,
+              {
+                ...field,
+                id: inputId,
+                checked: !!field.value,
+                inputProps: {
+                  "aria-describedby": error?.message || helperText ? helperId : void 0,
+                  "aria-invalid": !!error,
+                  "aria-required": required
+                },
+                ...other
+              }
+            ),
+            label,
+            labelPlacement,
+            htmlFor: inputId
+          }
+        ),
+        (error?.message || helperText) && /* @__PURE__ */ jsx(FormHelperText9, { id: helperId, children: error?.message ?? helperText })
+      ] })
+    }
+  );
+}
+
+// src/utils/transform-number.ts
+function parseNumber(value, options = {}) {
+  const { allowNegative = true } = options;
+  const trimmed = value.trim();
+  if (trimmed === "" || trimmed === "-" || trimmed === ".") {
+    return void 0;
+  }
+  if (!allowNegative && trimmed.startsWith("-")) {
+    return void 0;
+  }
+  const num = parseFloat(trimmed);
+  return Number.isNaN(num) ? void 0 : num;
+}
+function clampNumber(value, options = {}) {
+  const { min, max } = options;
+  let result = value;
+  if (min !== void 0 && result < min) {
+    result = min;
+  }
+  if (max !== void 0 && result > max) {
+    result = max;
+  }
+  return result;
+}
+function roundToDecimals(value, decimals) {
+  const factor = Math.pow(10, decimals);
+  return Math.round(value * factor) / factor;
+}
+function transformOnChange(value, options = {}) {
+  const { allowNegative = true, decimals } = options;
+  if (value === "") return "";
+  if (allowNegative && value === "-") return "-";
+  if (value.endsWith(".") && decimals !== 0) {
+    const withoutDot = value.slice(0, -1);
+    const num2 = parseNumber(withoutDot, options);
+    if (num2 !== void 0) return value;
+  }
+  if (decimals !== 0 && value.includes(".")) {
+    const parts = value.split(".");
+    if (parts.length === 2 && /^0*$/.test(parts[1])) {
+      const num2 = parseNumber(parts[0], options);
+      if (num2 !== void 0) return value;
+    }
+  }
+  const num = parseNumber(value, options);
+  if (num === void 0) {
+    return "";
+  }
+  return value;
+}
+function transformOnBlur(value, options = {}) {
+  const { min, max, decimals, defaultValue = 0 } = options;
+  const num = parseNumber(value, options);
+  if (num === void 0) {
+    return defaultValue;
+  }
+  let result = num;
+  if (decimals !== void 0) {
+    result = roundToDecimals(result, decimals);
+  }
+  result = clampNumber(result, { min, max });
+  return result;
+}
+function transformForDisplay(value, options = {}) {
+  if (value === null || value === void 0) {
+    return "";
+  }
+  const { decimals } = options;
+  if (decimals !== void 0) {
+    return value.toFixed(decimals);
+  }
+  return String(value);
+}
+function createNumberInputHandlers(config) {
+  const { value, onChange, options = {} } = config;
+  let intermediateValue = null;
+  return {
+    displayValue: intermediateValue ?? transformForDisplay(value, options),
+    handleChange: (newValue) => {
+      const transformed = transformOnChange(newValue, options);
+      intermediateValue = transformed;
+      const num = parseNumber(transformed, options);
+      if (num !== void 0) {
+        onChange(num);
+      }
+    },
+    handleBlur: () => {
+      const finalValue = transformOnBlur(intermediateValue ?? String(value), options);
+      intermediateValue = null;
+      onChange(finalValue);
+    }
+  };
+}
+function NumberInput({
+  field,
+  error,
+  options,
+  helperText,
+  inputId,
+  helperId,
+  required,
+  slotProps,
+  ...other
+}) {
+  const [displayValue, setDisplayValue] = useState(
+    () => transformForDisplay(field.value ?? options.defaultValue ?? 0, options)
+  );
+  useEffect(() => {
+    const formatted = transformForDisplay(field.value ?? options.defaultValue ?? 0, options);
+    setDisplayValue(formatted);
+  }, [field.value, options]);
+  const handleChange = useCallback(
+    (e) => {
+      const transformed = transformOnChange(e.target.value, options);
+      setDisplayValue(transformed);
+      const num = parseFloat(transformed);
+      if (!isNaN(num)) {
+        field.onChange(num);
+      } else if (transformed === "" || transformed === "-") {
+        field.onChange(options.defaultValue ?? 0);
+      }
+    },
+    [field, options]
+  );
+  const handleBlur = useCallback(() => {
+    const finalValue = transformOnBlur(displayValue || String(field.value ?? options.defaultValue ?? 0), options);
+    field.onChange(finalValue);
+    setDisplayValue(transformForDisplay(finalValue, options));
+    field.onBlur();
+  }, [displayValue, field, options]);
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      ...other,
+      id: inputId,
+      fullWidth: true,
+      value: displayValue,
+      onChange: handleChange,
+      onBlur: handleBlur,
+      error: !!error,
+      helperText: error?.message ?? helperText,
+      required,
+      slotProps: {
+        formHelperText: {
+          id: helperId
+        },
+        htmlInput: {
+          inputMode: options.decimals === 0 ? "numeric" : "decimal",
+          "aria-describedby": error?.message || helperText ? helperId : void 0,
+          "aria-invalid": !!error,
+          "aria-required": required,
+          "aria-valuemin": options.min,
+          "aria-valuemax": options.max,
+          "aria-valuenow": field.value ?? options.defaultValue ?? 0
+        },
+        ...slotProps
+      }
+    }
+  );
+}
+function FieldNumber({
+  name,
+  min,
+  max,
+  decimals,
+  allowNegative = true,
+  defaultValue = 0,
+  rules,
+  error: _error,
+  ...other
+}) {
+  const { control } = useFormContext();
+  const id = useId();
+  const inputId = `field-number-${id}`;
+  const helperId = `field-number-helper-${id}`;
+  const options = {
+    min,
+    max,
+    decimals,
+    allowNegative,
+    defaultValue
+  };
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      rules,
+      render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(NumberInput, { field, error, options, inputId, helperId, ...other })
+    }
+  );
+}
+function FieldRadio({
+  name,
+  options,
+  label,
+  helperText,
+  row = false,
+  rules,
+  required,
+  ...other
+}) {
+  const { control } = useFormContext();
+  const id = useId();
+  const groupId = `field-radio-${id}`;
+  const labelId = `field-radio-label-${id}`;
+  const helperId = `field-radio-helper-${id}`;
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      rules,
+      render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsxs(FormControl8, { error: !!error, required, ...other, children: [
+        label && /* @__PURE__ */ jsx(FormLabel6, { id: labelId, htmlFor: groupId, children: label }),
+        /* @__PURE__ */ jsx(
+          RadioGroup,
+          {
+            ...field,
+            id: groupId,
+            row,
+            value: field.value ?? "",
+            "aria-labelledby": label ? labelId : void 0,
+            "aria-describedby": error?.message || helperText ? helperId : void 0,
+            "aria-invalid": !!error,
+            "aria-required": required,
+            children: options.map((option, index) => /* @__PURE__ */ jsx(
+              FormControlLabel,
+              {
+                value: option.value,
+                control: /* @__PURE__ */ jsx(
+                  Radio,
+                  {
+                    id: `${groupId}-option-${index}`,
+                    inputProps: {
+                      "aria-label": option.label
+                    }
+                  }
+                ),
+                label: option.label,
+                disabled: option.disabled
+              },
+              String(option.value)
+            ))
+          }
+        ),
+        (error?.message || helperText) && /* @__PURE__ */ jsx(FormHelperText9, { id: helperId, children: error?.message ?? helperText })
+      ] })
+    }
+  );
+}
+function FieldAutocomplete({
+  name,
+  options,
+  label,
+  placeholder,
+  helperText,
+  textFieldProps,
+  disableClearable,
+  disableCloseOnSelect,
+  loading,
+  loadingText,
+  noOptionsText,
+  disabled,
+  readOnly,
+  fullWidth = true,
+  size
+}) {
+  const { control, setValue } = useFormContext();
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      render: ({ field, fieldState: { error } }) => {
+        const selectedOption = options.find((opt) => opt.value === field.value) ?? null;
+        return /* @__PURE__ */ jsx(
+          Autocomplete,
+          {
+            options,
+            value: selectedOption,
+            disableClearable,
+            disableCloseOnSelect,
+            loading,
+            loadingText,
+            noOptionsText,
+            disabled,
+            readOnly,
+            fullWidth,
+            size,
+            getOptionLabel: (option) => option.label,
+            getOptionDisabled: (option) => !!option.disabled,
+            isOptionEqualToValue: (option, value) => option.value === value.value,
+            groupBy: options.some((opt) => opt.group) ? (option) => option.group ?? "" : void 0,
+            onChange: (_event, newValue) => {
+              setValue(name, newValue?.value ?? "", { shouldValidate: true });
+            },
+            renderInput: (params) => /* @__PURE__ */ jsx(
+              TextField,
+              {
+                ...params,
+                label,
+                placeholder,
+                error: !!error,
+                helperText: error?.message ?? helperText,
+                ...textFieldProps
+              }
+            )
+          }
+        );
+      }
+    }
+  );
+}
+function FieldMultiSelect({
+  name,
+  options,
+  label,
+  placeholder,
+  helperText,
+  textFieldProps,
+  maxSelections,
+  chipVariant = "filled",
+  chipColor = "primary",
+  disableClearable,
+  disableCloseOnSelect,
+  loading,
+  loadingText,
+  noOptionsText,
+  disabled,
+  readOnly,
+  fullWidth = true,
+  size,
+  limitTags
+}) {
+  const { control, setValue } = useFormContext();
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      render: ({ field, fieldState: { error } }) => {
+        const values = field.value ?? [];
+        const selectedOptions = values.map((val) => options.find((opt) => opt.value === val)).filter((opt) => opt !== void 0);
+        const isMaxReached = maxSelections !== void 0 && selectedOptions.length >= maxSelections;
+        return /* @__PURE__ */ jsx(
+          Autocomplete,
+          {
+            multiple: true,
+            options,
+            value: selectedOptions,
+            disableClearable,
+            disableCloseOnSelect,
+            loading,
+            loadingText,
+            noOptionsText,
+            disabled,
+            readOnly,
+            fullWidth,
+            size,
+            limitTags,
+            getOptionLabel: (option) => option.label,
+            getOptionDisabled: (option) => {
+              if (option.disabled) return true;
+              if (isMaxReached) {
+                const isSelected = selectedOptions.some((sel) => sel.value === option.value);
+                return !isSelected;
+              }
+              return false;
+            },
+            isOptionEqualToValue: (option, value) => option.value === value.value,
+            groupBy: options.some((opt) => opt.group) ? (option) => option.group ?? "" : void 0,
+            onChange: (_event, newValue) => {
+              const newValues = newValue.map((item) => item.value);
+              setValue(name, newValues, { shouldValidate: true });
+            },
+            renderTags: (value, getTagProps) => value.map((option, index) => {
+              const { key, ...tagProps } = getTagProps({ index });
+              return /* @__PURE__ */ jsx(
+                Chip,
+                {
+                  label: option.label,
+                  variant: chipVariant,
+                  color: chipColor,
+                  size: "small",
+                  ...tagProps
+                },
+                key
+              );
+            }),
+            renderInput: (params) => /* @__PURE__ */ jsx(
+              TextField,
+              {
+                ...params,
+                label,
+                placeholder: selectedOptions.length === 0 ? placeholder : void 0,
+                error: !!error,
+                helperText: error?.message ?? (maxSelections ? `${selectedOptions.length}/${maxSelections} selected${helperText ? ` - ${helperText}` : ""}` : helperText),
+                ...textFieldProps
+              }
+            )
+          }
+        );
+      }
+    }
+  );
+}
+function FieldRating({
+  name,
+  label,
+  helperText,
+  formControlProps,
+  showValue = false,
+  max = 5,
+  precision = 1,
+  size = "medium",
+  ...other
+}) {
+  const { control } = useFormContext();
+  const id = useId();
+  const helperId = `field-rating-helper-${id}`;
+  const labelId = `field-rating-label-${id}`;
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      render: ({ field, fieldState: { error } }) => {
+        const hasHelper = !!(error?.message || helperText);
+        return /* @__PURE__ */ jsxs(FormControl8, { error: !!error, ...formControlProps, children: [
+          label && /* @__PURE__ */ jsx(FormLabel6, { id: labelId, sx: { mb: 1 }, children: label }),
+          /* @__PURE__ */ jsxs(Box7, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+            /* @__PURE__ */ jsx(
+              Rating,
+              {
+                ...other,
+                ...field,
+                value: field.value ?? 0,
+                max,
+                precision,
+                size,
+                onChange: (_event, newValue) => {
+                  field.onChange(newValue);
+                },
+                "aria-labelledby": label ? labelId : void 0,
+                "aria-describedby": hasHelper ? helperId : void 0,
+                "aria-invalid": !!error
+              }
+            ),
+            showValue && /* @__PURE__ */ jsxs(
+              Box7,
+              {
+                component: "span",
+                sx: {
+                  color: "text.secondary",
+                  fontSize: size === "small" ? "0.75rem" : size === "large" ? "1rem" : "0.875rem"
+                },
+                children: [
+                  field.value ?? 0,
+                  "/",
+                  max
+                ]
+              }
+            )
+          ] }),
+          hasHelper && /* @__PURE__ */ jsx(FormHelperText9, { id: helperId, children: error?.message ?? helperText })
+        ] });
+      }
+    }
+  );
+}
+function FieldSlider({
+  name,
+  label,
+  helperText,
+  formControlProps,
+  showValue = false,
+  formatValue,
+  unit,
+  min = 0,
+  max = 100,
+  step = 1,
+  ...other
+}) {
+  const { control } = useFormContext();
+  const id = useId();
+  const helperId = `field-slider-helper-${id}`;
+  const labelId = `field-slider-label-${id}`;
+  const defaultFormatValue = (value) => {
+    if (Array.isArray(value)) {
+      return `${value[0]}${unit ?? ""} - ${value[1]}${unit ?? ""}`;
+    }
+    return `${value}${unit ?? ""}`;
+  };
+  const displayValue = formatValue ?? defaultFormatValue;
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      render: ({ field, fieldState: { error } }) => {
+        const hasHelper = !!(error?.message || helperText);
+        return /* @__PURE__ */ jsxs(FormControl8, { error: !!error, fullWidth: true, ...formControlProps, children: [
+          (label || showValue) && /* @__PURE__ */ jsxs(Box7, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1 }, children: [
+            label && /* @__PURE__ */ jsx(FormLabel6, { id: labelId, children: label }),
+            showValue && /* @__PURE__ */ jsx(Typography2, { variant: "body2", color: "text.secondary", children: displayValue(field.value ?? (Array.isArray(other.defaultValue) ? [min, max] : min)) })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Slider,
+            {
+              ...other,
+              ...field,
+              value: field.value ?? (Array.isArray(other.defaultValue) ? [min, max] : min),
+              min,
+              max,
+              step,
+              onChange: (_event, newValue) => {
+                field.onChange(newValue);
+              },
+              valueLabelDisplay: other.valueLabelDisplay ?? "auto",
+              valueLabelFormat: (value) => `${value}${unit ?? ""}`,
+              "aria-labelledby": label ? labelId : void 0,
+              "aria-describedby": hasHelper ? helperId : void 0,
+              "aria-invalid": !!error
+            }
+          ),
+          hasHelper && /* @__PURE__ */ jsx(FormHelperText9, { id: helperId, children: error?.message ?? helperText })
+        ] });
+      }
+    }
+  );
+}
+function normalizeValue(value) {
+  if (value === null || value === void 0 || value === "") return null;
+  if (dayjs.isDayjs(value)) return value.isValid() ? value : null;
+  if (value instanceof Date) {
+    const parsed2 = dayjs(value);
+    return parsed2.isValid() ? parsed2 : null;
+  }
+  const parsed = dayjs(value);
+  return parsed.isValid() ? parsed : null;
+}
+function FieldDatePicker({
+  name,
+  label,
+  helperText,
+  textFieldProps,
+  disabled,
+  readOnly,
+  minDate,
+  maxDate,
+  disablePast,
+  disableFuture,
+  views,
+  openTo,
+  format
+}) {
+  const { control } = useFormContext();
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      render: ({ field, fieldState: { error } }) => {
+        const normalizedValue = normalizeValue(field.value);
+        return /* @__PURE__ */ jsx(
+          DatePicker,
+          {
+            label,
+            value: normalizedValue,
+            onChange: (newValue) => {
+              field.onChange(newValue?.toISOString() ?? null);
+            },
+            disabled,
+            readOnly,
+            minDate,
+            maxDate,
+            disablePast,
+            disableFuture,
+            views,
+            openTo,
+            format,
+            slotProps: {
+              textField: {
+                fullWidth: true,
+                error: !!error,
+                helperText: error?.message ?? helperText,
+                ...textFieldProps
+              }
+            }
+          }
+        );
+      }
+    }
+  );
+}
+function normalizeValue2(value) {
+  if (value === null || value === void 0 || value === "") {
+    return null;
+  }
+  if (dayjs.isDayjs(value)) {
+    return value.isValid() ? value : null;
+  }
+  if (value instanceof Date) {
+    const parsed2 = dayjs(value);
+    return parsed2.isValid() ? parsed2 : null;
+  }
+  const parsed = dayjs(value);
+  return parsed.isValid() ? parsed : null;
+}
+function FieldTimePicker({
+  name,
+  label,
+  helperText,
+  textFieldProps,
+  disabled,
+  readOnly,
+  minutesStep,
+  ampm,
+  minTime,
+  maxTime,
+  views,
+  openTo,
+  format
+}) {
+  const { control } = useFormContext();
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      render: ({ field, fieldState: { error } }) => {
+        const normalizedValue = normalizeValue2(field.value);
+        return /* @__PURE__ */ jsx(
+          TimePicker,
+          {
+            label,
+            value: normalizedValue,
+            onChange: (newValue) => {
+              field.onChange(newValue?.toISOString() ?? null);
+            },
+            disabled,
+            readOnly,
+            minutesStep,
+            ampm,
+            minTime,
+            maxTime,
+            views,
+            openTo,
+            format,
+            slotProps: {
+              textField: {
+                fullWidth: true,
+                error: !!error,
+                helperText: error?.message ?? helperText,
+                ...textFieldProps
+              }
+            }
+          }
+        );
+      }
+    }
+  );
+}
+function normalizeValue3(value) {
+  if (value === null || value === void 0 || value === "") {
+    return null;
+  }
+  if (dayjs.isDayjs(value)) {
+    return value.isValid() ? value : null;
+  }
+  if (value instanceof Date) {
+    const parsed2 = dayjs(value);
+    return parsed2.isValid() ? parsed2 : null;
+  }
+  const parsed = dayjs(value);
+  return parsed.isValid() ? parsed : null;
+}
+function FieldDateTimePicker({
+  name,
+  label,
+  helperText,
+  textFieldProps,
+  disabled,
+  readOnly,
+  minutesStep,
+  ampm,
+  minDateTime,
+  maxDateTime,
+  disablePast,
+  disableFuture,
+  views,
+  openTo,
+  format
+}) {
+  const { control } = useFormContext();
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      render: ({ field, fieldState: { error } }) => {
+        const normalizedValue = normalizeValue3(field.value);
+        return /* @__PURE__ */ jsx(
+          DateTimePicker,
+          {
+            label,
+            value: normalizedValue,
+            onChange: (newValue) => {
+              field.onChange(newValue?.toISOString() ?? null);
+            },
+            disabled,
+            readOnly,
+            minutesStep,
+            ampm,
+            minDateTime,
+            maxDateTime,
+            disablePast,
+            disableFuture,
+            views,
+            openTo,
+            format,
+            slotProps: {
+              textField: {
+                fullWidth: true,
+                error: !!error,
+                helperText: error?.message ?? helperText,
+                ...textFieldProps
+              }
+            }
+          }
+        );
+      }
+    }
+  );
+}
+function FieldMultiCheckbox({
+  name,
+  label,
+  options,
+  helperText,
+  slotProps,
+  row,
+  ...other
+}) {
+  const { control } = useFormContext();
+  const id = useId();
+  const helperId = `field-multi-checkbox-helper-${id}`;
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      render: ({ field, fieldState: { error } }) => {
+        const selectedValues = Array.isArray(field.value) ? field.value : [];
+        const hasHelper = !!(error?.message || helperText);
+        const handleToggle = (optionValue) => {
+          const isSelected = selectedValues.includes(optionValue);
+          const newValues = isSelected ? selectedValues.filter((v) => v !== optionValue) : [...selectedValues, optionValue];
+          field.onChange(newValues);
+        };
+        return /* @__PURE__ */ jsxs(
+          FormControl8,
+          {
+            component: "fieldset",
+            error: !!error,
+            "aria-describedby": hasHelper ? helperId : void 0,
+            ...slotProps?.wrapper,
+            children: [
+              label && /* @__PURE__ */ jsx(
+                FormLabel6,
+                {
+                  component: "legend",
+                  ...slotProps?.formLabel,
+                  sx: {
+                    mb: 1,
+                    ...slotProps?.formLabel?.sx
+                  },
+                  children: label
+                }
+              ),
+              /* @__PURE__ */ jsx(Box7, { ...slotProps?.container, children: /* @__PURE__ */ jsx(FormGroup, { row, ...other, children: options.map((option) => /* @__PURE__ */ jsx(
+                FormControlLabel,
+                {
+                  label: option.label,
+                  disabled: option.disabled,
+                  control: /* @__PURE__ */ jsx(
+                    Checkbox,
+                    {
+                      checked: selectedValues.includes(option.value),
+                      onChange: () => handleToggle(option.value),
+                      ...slotProps?.checkbox
+                    }
+                  )
+                },
+                option.value
+              )) }) }),
+              hasHelper && /* @__PURE__ */ jsx(FormHelperText9, { id: helperId, error: !!error, ...slotProps?.helperText, children: error?.message ?? helperText })
+            ]
+          }
+        );
+      }
+    }
+  );
+}
+function FieldMultiSwitch({
+  name,
+  label,
+  options,
+  helperText,
+  slotProps,
+  row,
+  ...other
+}) {
+  const { control } = useFormContext();
+  const id = useId();
+  const helperId = `field-multi-switch-helper-${id}`;
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      render: ({ field, fieldState: { error } }) => {
+        const selectedValues = Array.isArray(field.value) ? field.value : [];
+        const hasHelper = !!(error?.message || helperText);
+        const handleToggle = (optionValue) => {
+          const isSelected = selectedValues.includes(optionValue);
+          const newValues = isSelected ? selectedValues.filter((v) => v !== optionValue) : [...selectedValues, optionValue];
+          field.onChange(newValues);
+        };
+        return /* @__PURE__ */ jsxs(
+          FormControl8,
+          {
+            component: "fieldset",
+            error: !!error,
+            "aria-describedby": hasHelper ? helperId : void 0,
+            ...slotProps?.wrapper,
+            children: [
+              label && /* @__PURE__ */ jsx(
+                FormLabel6,
+                {
+                  component: "legend",
+                  ...slotProps?.formLabel,
+                  sx: {
+                    mb: 1,
+                    ...slotProps?.formLabel?.sx
+                  },
+                  children: label
+                }
+              ),
+              /* @__PURE__ */ jsx(Box7, { ...slotProps?.container, children: /* @__PURE__ */ jsx(FormGroup, { row, ...other, children: options.map((option) => /* @__PURE__ */ jsx(
+                FormControlLabel,
+                {
+                  label: option.label,
+                  disabled: option.disabled,
+                  control: /* @__PURE__ */ jsx(
+                    Switch,
+                    {
+                      checked: selectedValues.includes(option.value),
+                      onChange: () => handleToggle(option.value),
+                      ...slotProps?.switch
+                    }
+                  )
+                },
+                option.value
+              )) }) }),
+              hasHelper && /* @__PURE__ */ jsx(FormHelperText9, { id: helperId, error: !!error, ...slotProps?.helperText, children: error?.message ?? helperText })
+            ]
+          }
+        );
+      }
+    }
+  );
+}
+function FieldCode({
+  name,
+  length = 6,
+  placeholder = "-",
+  helperText,
+  autoFocus = false,
+  disabled = false,
+  type = "text",
+  gap = 1.5,
+  inputWidth = 48,
+  slotProps
+}) {
+  const { control } = useFormContext();
+  const inputRefs = useRef([]);
+  const id = useId();
+  const helperId = `field-code-helper-${id}`;
+  const focusInput = useCallback((index) => {
+    const input = inputRefs.current[index];
+    if (input) {
+      input.focus();
+      input.select();
+    }
+  }, []);
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      render: ({ field, fieldState: { error } }) => {
+        const valueString = String(field.value ?? "").slice(0, length);
+        const digits = Array.from({ length }, (_, i) => valueString[i] ?? "");
+        const updateValue = (newDigits) => {
+          const newValue = newDigits.join("");
+          field.onChange(newValue);
+        };
+        const handleChange = (index) => (e) => {
+          const inputValue = e.target.value;
+          if (inputValue.length <= 1) {
+            const newDigits = [...digits];
+            newDigits[index] = inputValue;
+            updateValue(newDigits);
+            if (inputValue && index < length - 1) {
+              focusInput(index + 1);
+            }
+          }
+        };
+        const handleKeyDown = (index) => (e) => {
+          const key = e.key;
+          if (key === "Backspace") {
+            e.preventDefault();
+            const newDigits = [...digits];
+            if (digits[index]) {
+              newDigits[index] = "";
+              updateValue(newDigits);
+            } else if (index > 0) {
+              newDigits[index - 1] = "";
+              updateValue(newDigits);
+              focusInput(index - 1);
+            }
+          }
+          if (key === "ArrowLeft" && index > 0) {
+            e.preventDefault();
+            focusInput(index - 1);
+          }
+          if (key === "ArrowRight" && index < length - 1) {
+            e.preventDefault();
+            focusInput(index + 1);
+          }
+          if (key === "Delete") {
+            e.preventDefault();
+            const newDigits = [...digits];
+            newDigits[index] = "";
+            updateValue(newDigits);
+          }
+        };
+        const handlePaste = (e) => {
+          e.preventDefault();
+          const pastedData = e.clipboardData.getData("text").slice(0, length);
+          const validChars = type === "number" ? pastedData.replace(/\D/g, "") : pastedData;
+          if (validChars) {
+            const newDigits = Array.from({ length }, (_, i) => validChars[i] ?? "");
+            updateValue(newDigits);
+            const focusIndex = Math.min(validChars.length, length - 1);
+            focusInput(focusIndex);
+          }
+        };
+        const hasHelper = !!(error?.message || helperText);
+        return /* @__PURE__ */ jsxs(Box7, { role: "group", "aria-label": `${name} code input`, ...slotProps?.wrapper, children: [
+          /* @__PURE__ */ jsx(
+            Box7,
+            {
+              sx: {
+                display: "flex",
+                gap,
+                justifyContent: "center"
+              },
+              children: digits.map((digit, index) => /* @__PURE__ */ jsx(
+                TextField,
+                {
+                  inputRef: (el) => {
+                    inputRefs.current[index] = el;
+                  },
+                  value: digit,
+                  onChange: handleChange(index),
+                  onKeyDown: handleKeyDown(index),
+                  onPaste: handlePaste,
+                  onFocus: (e) => e.target.select(),
+                  disabled,
+                  error: !!error,
+                  autoFocus: autoFocus && index === 0,
+                  placeholder,
+                  slotProps: {
+                    htmlInput: {
+                      maxLength: 1,
+                      "aria-label": `Digit ${index + 1} of ${length}`,
+                      "aria-describedby": hasHelper ? helperId : void 0,
+                      "aria-invalid": !!error,
+                      style: {
+                        textAlign: "center",
+                        fontSize: "1.25rem",
+                        fontWeight: 600,
+                        padding: "12px 0"
+                      },
+                      inputMode: type === "number" ? "numeric" : "text",
+                      autoComplete: "one-time-code"
+                    }
+                  },
+                  sx: {
+                    width: inputWidth,
+                    "& .MuiInputBase-input": {
+                      p: 0,
+                      height: inputWidth
+                    }
+                  },
+                  ...slotProps?.textField
+                },
+                index
+              ))
+            }
+          ),
+          hasHelper && /* @__PURE__ */ jsx(
+            FormHelperText9,
+            {
+              id: helperId,
+              error: !!error,
+              sx: { textAlign: "center", mt: 1 },
+              ...slotProps?.helperText,
+              children: error?.message ?? helperText
+            }
+          )
+        ] });
+      }
+    }
+  );
+}
+function 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 `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+}
+function getPreviewUrl(file) {
+  if (typeof file === "string") return file;
+  if (file instanceof File && file.type.startsWith("image/")) {
+    return URL.createObjectURL(file);
+  }
+  return null;
+}
+function getFileName(file) {
+  if (typeof file === "string") {
+    return file.split("/").pop() ?? "file";
+  }
+  return file.name;
+}
+function UploadPlaceholder({ isDragActive, disabled }) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      spacing: 1,
+      alignItems: "center",
+      justifyContent: "center",
+      sx: {
+        p: 3,
+        textAlign: "center",
+        color: disabled ? "text.disabled" : "text.secondary"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Box7,
+          {
+            component: "span",
+            sx: {
+              width: 48,
+              height: 48,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              borderRadius: "50%",
+              bgcolor: alpha(theme.palette.primary.main, 0.08),
+              color: "primary.main",
+              fontSize: 24
+            },
+            children: "\u{1F4C1}"
+          }
+        ),
+        /* @__PURE__ */ jsx(Typography2, { variant: "body2", component: "span", children: isDragActive ? "Drop files here" : /* @__PURE__ */ jsxs(Fragment, { children: [
+          "Drag & drop files here, or",
+          " ",
+          /* @__PURE__ */ jsx(Typography2, { component: "span", variant: "body2", sx: { color: "primary.main", textDecoration: "underline" }, children: "browse" })
+        ] }) })
+      ]
+    }
+  );
+}
+function FilePreview({ files, thumbnail, onRemove }) {
+  if (files.length === 0) return null;
+  return /* @__PURE__ */ jsx(Stack, { spacing: 1, sx: { mt: 2 }, children: files.map((file, index) => {
+    const previewUrl = thumbnail ? getPreviewUrl(file) : null;
+    const fileName = getFileName(file);
+    const fileSize = file instanceof File ? formatFileSize(file.size) : "";
+    return /* @__PURE__ */ jsxs(
+      Box7,
+      {
+        sx: {
+          p: 1,
+          display: "flex",
+          alignItems: "center",
+          gap: 1.5,
+          borderRadius: 1,
+          bgcolor: "background.neutral",
+          border: "1px solid",
+          borderColor: "divider"
+        },
+        children: [
+          previewUrl && /* @__PURE__ */ jsx(
+            Box7,
+            {
+              component: "img",
+              src: previewUrl,
+              alt: fileName,
+              sx: {
+                width: 40,
+                height: 40,
+                borderRadius: 0.5,
+                objectFit: "cover",
+                flexShrink: 0
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs(Box7, { sx: { flexGrow: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx(Typography2, { variant: "body2", noWrap: true, children: fileName }),
+            fileSize && /* @__PURE__ */ jsx(Typography2, { variant: "caption", color: "text.secondary", children: fileSize })
+          ] }),
+          onRemove && /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => onRemove(file), sx: { flexShrink: 0 }, children: "\u2715" })
+        ]
+      },
+      `${fileName}-${index}`
+    );
+  }) });
+}
+function RejectionFiles({ rejections }) {
+  if (rejections.length === 0) return null;
+  return /* @__PURE__ */ jsx(Box7, { sx: { mt: 2 }, children: rejections.map(({ file, errors }) => /* @__PURE__ */ jsxs(
+    Box7,
+    {
+      sx: {
+        p: 1,
+        mb: 1,
+        borderRadius: 1,
+        bgcolor: "error.lighter",
+        border: "1px solid",
+        borderColor: "error.light"
+      },
+      children: [
+        /* @__PURE__ */ jsx(Typography2, { variant: "body2", color: "error", children: file.name }),
+        errors.map((error) => /* @__PURE__ */ jsx(Typography2, { variant: "caption", color: "error", children: error.message }, error.code))
+      ]
+    },
+    file.name
+  )) });
+}
+function FieldUploadInner({
+  value,
+  error,
+  multiple,
+  thumbnail,
+  disabled,
+  helperText,
+  placeholder,
+  onRemove,
+  onRemoveAll,
+  slotProps,
+  sx,
+  dropzoneOptions,
+  setValue,
+  name
+}) {
+  const theme = useTheme();
+  const [rejections, setRejections] = useState([]);
+  const files = useMemo(() => {
+    if (!value) return [];
+    return Array.isArray(value) ? value : [value];
+  }, [value]);
+  const onDrop = useCallback(
+    (acceptedFiles, fileRejections) => {
+      setRejections(fileRejections);
+      if (acceptedFiles.length === 0) return;
+      if (multiple) {
+        setValue(name, [...files, ...acceptedFiles], { shouldValidate: true });
+      } else {
+        setValue(name, acceptedFiles[0], { shouldValidate: true });
+      }
+    },
+    [files, multiple, name, setValue]
+  );
+  const handleRemove = useCallback(
+    (file) => {
+      const newFiles = files.filter((f) => f !== file);
+      setValue(name, multiple ? newFiles : null, { shouldValidate: true });
+      onRemove?.(file);
+    },
+    [files, multiple, name, onRemove, setValue]
+  );
+  const handleRemoveAll = useCallback(() => {
+    setValue(name, multiple ? [] : null, { shouldValidate: true });
+    onRemoveAll?.();
+  }, [multiple, name, onRemoveAll, setValue]);
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    ...dropzoneOptions,
+    multiple,
+    disabled,
+    onDrop
+  });
+  const hasError = !!error;
+  const hasFiles = files.length > 0;
+  return /* @__PURE__ */ jsxs(Box7, { ...slotProps?.wrapper, children: [
+    /* @__PURE__ */ jsxs(
+      Box7,
+      {
+        ...getRootProps(),
+        sx: {
+          p: 0,
+          outline: "none",
+          borderRadius: 1,
+          cursor: disabled ? "default" : "pointer",
+          overflow: "hidden",
+          border: "1px dashed",
+          borderColor: hasError ? "error.main" : isDragActive ? "primary.main" : "divider",
+          bgcolor: isDragActive ? alpha(theme.palette.primary.main, 0.08) : "background.paper",
+          transition: theme.transitions.create(["border-color", "background-color"]),
+          "&:hover": {
+            borderColor: disabled ? "divider" : "primary.main",
+            bgcolor: disabled ? "background.paper" : alpha(theme.palette.primary.main, 0.04)
+          },
+          ...sx
+        },
+        children: [
+          /* @__PURE__ */ jsx("input", { ...getInputProps() }),
+          placeholder ?? /* @__PURE__ */ jsx(UploadPlaceholder, { isDragActive, disabled })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(RejectionFiles, { rejections }),
+    /* @__PURE__ */ jsx(FilePreview, { files, thumbnail, onRemove: handleRemove }),
+    hasFiles && multiple && onRemoveAll && /* @__PURE__ */ jsx(Box7, { sx: { mt: 1, textAlign: "right" }, children: /* @__PURE__ */ jsx(
+      Typography2,
+      {
+        component: "button",
+        variant: "caption",
+        onClick: handleRemoveAll,
+        sx: {
+          color: "error.main",
+          cursor: "pointer",
+          border: "none",
+          bgcolor: "transparent",
+          "&:hover": { textDecoration: "underline" }
+        },
+        children: "Remove all"
+      }
+    ) }),
+    (error?.message || helperText) && /* @__PURE__ */ jsx(FormHelperText9, { error: hasError, sx: { mt: 1 }, children: error?.message ?? helperText })
+  ] });
+}
+function FieldUpload({
+  name,
+  multiple = false,
+  thumbnail = false,
+  disabled,
+  helperText,
+  placeholder,
+  onRemove,
+  onRemoveAll,
+  slotProps,
+  sx,
+  ...dropzoneOptions
+}) {
+  const { control, setValue } = useFormContext();
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(
+        FieldUploadInner,
+        {
+          value: field.value,
+          error,
+          multiple,
+          thumbnail,
+          disabled,
+          helperText,
+          placeholder,
+          onRemove,
+          onRemoveAll,
+          slotProps,
+          sx,
+          dropzoneOptions,
+          setValue,
+          name
+        }
+      )
+    }
+  );
+}
+function FieldUploadBoxInner({
+  value,
+  error,
+  size,
+  disabled,
+  helperText,
+  sx,
+  dropzoneOptions,
+  setValue,
+  name
+}) {
+  const theme = useTheme();
+  const onDrop = useCallback(
+    (acceptedFiles) => {
+      if (acceptedFiles.length > 0) {
+        setValue(name, acceptedFiles[0], { shouldValidate: true });
+      }
+    },
+    [name, setValue]
+  );
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    ...dropzoneOptions,
+    multiple: false,
+    disabled,
+    onDrop
+  });
+  const previewUrl = value ? getPreviewUrl(value) : null;
+  const hasError = !!error;
+  return /* @__PURE__ */ jsxs(Box7, { children: [
+    /* @__PURE__ */ jsxs(
+      Box7,
+      {
+        ...getRootProps(),
+        sx: {
+          width: size,
+          height: size,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          borderRadius: 1,
+          cursor: disabled ? "default" : "pointer",
+          border: "1px dashed",
+          borderColor: hasError ? "error.main" : isDragActive ? "primary.main" : "divider",
+          bgcolor: isDragActive ? alpha(theme.palette.primary.main, 0.08) : "background.paper",
+          backgroundImage: previewUrl ? `url(${previewUrl})` : "none",
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+          transition: theme.transitions.create(["border-color", "background-color"]),
+          "&:hover": {
+            borderColor: disabled ? "divider" : "primary.main"
+          },
+          ...sx
+        },
+        children: [
+          /* @__PURE__ */ jsx("input", { ...getInputProps() }),
+          !previewUrl && /* @__PURE__ */ jsx(
+            Typography2,
+            {
+              sx: {
+                fontSize: size / 3,
+                color: isDragActive ? "primary.main" : "text.disabled"
+              },
+              children: "+"
+            }
+          )
+        ]
+      }
+    ),
+    (error?.message || helperText) && /* @__PURE__ */ jsx(FormHelperText9, { error: hasError, sx: { mt: 0.5 }, children: error?.message ?? helperText })
+  ] });
+}
+function FieldUploadBox({
+  name,
+  size = 64,
+  disabled,
+  helperText,
+  sx,
+  ...dropzoneOptions
+}) {
+  const { control, setValue } = useFormContext();
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(
+        FieldUploadBoxInner,
+        {
+          value: field.value,
+          error,
+          size,
+          disabled,
+          helperText,
+          sx,
+          dropzoneOptions,
+          setValue,
+          name
+        }
+      )
+    }
+  );
+}
+function FieldUploadAvatarInner({
+  value,
+  error,
+  size,
+  disabled,
+  helperText,
+  sx,
+  dropzoneOptions,
+  setValue,
+  name
+}) {
+  const theme = useTheme();
+  const onDrop = useCallback(
+    (acceptedFiles) => {
+      if (acceptedFiles.length > 0) {
+        setValue(name, acceptedFiles[0], { shouldValidate: true });
+      }
+    },
+    [name, setValue]
+  );
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    ...dropzoneOptions,
+    multiple: false,
+    disabled,
+    accept: dropzoneOptions.accept ?? { "image/*": [] },
+    onDrop
+  });
+  const previewUrl = value ? getPreviewUrl(value) : null;
+  const hasError = !!error;
+  return /* @__PURE__ */ jsxs(Box7, { sx: { display: "inline-flex", flexDirection: "column", alignItems: "center" }, children: [
+    /* @__PURE__ */ jsxs(
+      Box7,
+      {
+        ...getRootProps(),
+        sx: {
+          width: size,
+          height: size,
+          borderRadius: "50%",
+          cursor: disabled ? "default" : "pointer",
+          position: "relative",
+          overflow: "hidden",
+          border: "1px dashed",
+          borderColor: hasError ? "error.main" : isDragActive ? "primary.main" : "divider",
+          transition: theme.transitions.create(["border-color"]),
+          "&:hover .upload-overlay": {
+            opacity: disabled ? 0 : 1
+          },
+          ...sx
+        },
+        children: [
+          /* @__PURE__ */ jsx("input", { ...getInputProps() }),
+          /* @__PURE__ */ jsx(
+            Avatar,
+            {
+              src: previewUrl ?? void 0,
+              sx: {
+                width: "100%",
+                height: "100%",
+                bgcolor: "background.neutral"
+              },
+              children: !previewUrl && /* @__PURE__ */ jsx(Typography2, { sx: { fontSize: size / 4, color: "text.disabled" }, children: "\u{1F4F7}" })
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Box7,
+            {
+              className: "upload-overlay",
+              sx: {
+                position: "absolute",
+                inset: 0,
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                bgcolor: alpha(theme.palette.grey[900], 0.64),
+                color: "common.white",
+                opacity: isDragActive ? 1 : 0,
+                transition: theme.transitions.create("opacity")
+              },
+              children: [
+                /* @__PURE__ */ jsx(Typography2, { sx: { fontSize: size / 6 }, children: "\u{1F4F7}" }),
+                /* @__PURE__ */ jsx(Typography2, { variant: "caption", children: previewUrl ? "Update" : "Upload" })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    (error?.message || helperText) && /* @__PURE__ */ jsx(FormHelperText9, { error: hasError, sx: { mt: 1, textAlign: "center" }, children: error?.message ?? helperText })
+  ] });
+}
+function FieldUploadAvatar({
+  name,
+  size = 144,
+  disabled,
+  helperText,
+  sx,
+  ...dropzoneOptions
+}) {
+  const { control, setValue } = useFormContext();
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(
+        FieldUploadAvatarInner,
+        {
+          value: field.value,
+          error,
+          size,
+          disabled,
+          helperText,
+          sx,
+          dropzoneOptions,
+          setValue,
+          name
+        }
+      )
+    }
+  );
+}
+var DEFAULT_COUNTRIES = [
+  { code: "US", name: "United States", dialCode: "+1", flag: "\u{1F1FA}\u{1F1F8}" },
+  { code: "GB", name: "United Kingdom", dialCode: "+44", flag: "\u{1F1EC}\u{1F1E7}" },
+  { code: "CA", name: "Canada", dialCode: "+1", flag: "\u{1F1E8}\u{1F1E6}" },
+  { code: "AU", name: "Australia", dialCode: "+61", flag: "\u{1F1E6}\u{1F1FA}" },
+  { code: "DE", name: "Germany", dialCode: "+49", flag: "\u{1F1E9}\u{1F1EA}" },
+  { code: "FR", name: "France", dialCode: "+33", flag: "\u{1F1EB}\u{1F1F7}" },
+  { code: "IT", name: "Italy", dialCode: "+39", flag: "\u{1F1EE}\u{1F1F9}" },
+  { code: "ES", name: "Spain", dialCode: "+34", flag: "\u{1F1EA}\u{1F1F8}" },
+  { code: "JP", name: "Japan", dialCode: "+81", flag: "\u{1F1EF}\u{1F1F5}" },
+  { code: "CN", name: "China", dialCode: "+86", flag: "\u{1F1E8}\u{1F1F3}" },
+  { code: "KR", name: "South Korea", dialCode: "+82", flag: "\u{1F1F0}\u{1F1F7}" },
+  { code: "IN", name: "India", dialCode: "+91", flag: "\u{1F1EE}\u{1F1F3}" },
+  { code: "BR", name: "Brazil", dialCode: "+55", flag: "\u{1F1E7}\u{1F1F7}" },
+  { code: "MX", name: "Mexico", dialCode: "+52", flag: "\u{1F1F2}\u{1F1FD}" },
+  { code: "RU", name: "Russia", dialCode: "+7", flag: "\u{1F1F7}\u{1F1FA}" },
+  { code: "NL", name: "Netherlands", dialCode: "+31", flag: "\u{1F1F3}\u{1F1F1}" },
+  { code: "BE", name: "Belgium", dialCode: "+32", flag: "\u{1F1E7}\u{1F1EA}" },
+  { code: "CH", name: "Switzerland", dialCode: "+41", flag: "\u{1F1E8}\u{1F1ED}" },
+  { code: "AT", name: "Austria", dialCode: "+43", flag: "\u{1F1E6}\u{1F1F9}" },
+  { code: "SE", name: "Sweden", dialCode: "+46", flag: "\u{1F1F8}\u{1F1EA}" },
+  { code: "NO", name: "Norway", dialCode: "+47", flag: "\u{1F1F3}\u{1F1F4}" },
+  { code: "DK", name: "Denmark", dialCode: "+45", flag: "\u{1F1E9}\u{1F1F0}" },
+  { code: "FI", name: "Finland", dialCode: "+358", flag: "\u{1F1EB}\u{1F1EE}" },
+  { code: "PL", name: "Poland", dialCode: "+48", flag: "\u{1F1F5}\u{1F1F1}" },
+  { code: "PT", name: "Portugal", dialCode: "+351", flag: "\u{1F1F5}\u{1F1F9}" },
+  { code: "GR", name: "Greece", dialCode: "+30", flag: "\u{1F1EC}\u{1F1F7}" },
+  { code: "IE", name: "Ireland", dialCode: "+353", flag: "\u{1F1EE}\u{1F1EA}" },
+  { code: "NZ", name: "New Zealand", dialCode: "+64", flag: "\u{1F1F3}\u{1F1FF}" },
+  { code: "SG", name: "Singapore", dialCode: "+65", flag: "\u{1F1F8}\u{1F1EC}" },
+  { code: "HK", name: "Hong Kong", dialCode: "+852", flag: "\u{1F1ED}\u{1F1F0}" },
+  { code: "AE", name: "UAE", dialCode: "+971", flag: "\u{1F1E6}\u{1F1EA}" },
+  { code: "SA", name: "Saudi Arabia", dialCode: "+966", flag: "\u{1F1F8}\u{1F1E6}" },
+  { code: "IL", name: "Israel", dialCode: "+972", flag: "\u{1F1EE}\u{1F1F1}" },
+  { code: "TR", name: "Turkey", dialCode: "+90", flag: "\u{1F1F9}\u{1F1F7}" },
+  { code: "ZA", name: "South Africa", dialCode: "+27", flag: "\u{1F1FF}\u{1F1E6}" },
+  { code: "EG", name: "Egypt", dialCode: "+20", flag: "\u{1F1EA}\u{1F1EC}" },
+  { code: "NG", name: "Nigeria", dialCode: "+234", flag: "\u{1F1F3}\u{1F1EC}" },
+  { code: "KE", name: "Kenya", dialCode: "+254", flag: "\u{1F1F0}\u{1F1EA}" },
+  { code: "AR", name: "Argentina", dialCode: "+54", flag: "\u{1F1E6}\u{1F1F7}" },
+  { code: "CL", name: "Chile", dialCode: "+56", flag: "\u{1F1E8}\u{1F1F1}" },
+  { code: "CO", name: "Colombia", dialCode: "+57", flag: "\u{1F1E8}\u{1F1F4}" },
+  { code: "PE", name: "Peru", dialCode: "+51", flag: "\u{1F1F5}\u{1F1EA}" },
+  { code: "VE", name: "Venezuela", dialCode: "+58", flag: "\u{1F1FB}\u{1F1EA}" },
+  { code: "TH", name: "Thailand", dialCode: "+66", flag: "\u{1F1F9}\u{1F1ED}" },
+  { code: "VN", name: "Vietnam", dialCode: "+84", flag: "\u{1F1FB}\u{1F1F3}" },
+  { code: "MY", name: "Malaysia", dialCode: "+60", flag: "\u{1F1F2}\u{1F1FE}" },
+  { code: "ID", name: "Indonesia", dialCode: "+62", flag: "\u{1F1EE}\u{1F1E9}" },
+  { code: "PH", name: "Philippines", dialCode: "+63", flag: "\u{1F1F5}\u{1F1ED}" },
+  { code: "PK", name: "Pakistan", dialCode: "+92", flag: "\u{1F1F5}\u{1F1F0}" },
+  { code: "BD", name: "Bangladesh", dialCode: "+880", flag: "\u{1F1E7}\u{1F1E9}" },
+  { code: "UA", name: "Ukraine", dialCode: "+380", flag: "\u{1F1FA}\u{1F1E6}" },
+  { code: "CZ", name: "Czech Republic", dialCode: "+420", flag: "\u{1F1E8}\u{1F1FF}" },
+  { code: "RO", name: "Romania", dialCode: "+40", flag: "\u{1F1F7}\u{1F1F4}" },
+  { code: "HU", name: "Hungary", dialCode: "+36", flag: "\u{1F1ED}\u{1F1FA}" }
+];
+function formatPhoneNumber(value) {
+  return value.replace(/[^\d+]/g, "");
+}
+function detectCountryFromNumber(phoneNumber, countries) {
+  if (!phoneNumber.startsWith("+")) return null;
+  const sortedCountries = [...countries].sort((a, b) => b.dialCode.length - a.dialCode.length);
+  for (const country of sortedCountries) {
+    if (phoneNumber.startsWith(country.dialCode)) {
+      return country;
+    }
+  }
+  return null;
+}
+function FieldPhone({
+  name,
+  label,
+  helperText,
+  defaultCountry = "US",
+  preferredCountries = [],
+  hideCountrySelect = false,
+  countries: customCountries,
+  disabled,
+  ...other
+}) {
+  const { control } = useFormContext();
+  const countries = customCountries ?? DEFAULT_COUNTRIES;
+  const anchorRef = useRef(null);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const defaultCountryData = useMemo(
+    () => countries.find((c) => c.code === defaultCountry) ?? countries[0],
+    [countries, defaultCountry]
+  );
+  const sortedCountries = useMemo(() => {
+    if (preferredCountries.length === 0) return countries;
+    const preferred = preferredCountries.map((code) => countries.find((c) => c.code === code)).filter(Boolean);
+    const rest = countries.filter((c) => !preferredCountries.includes(c.code));
+    return [...preferred, ...rest];
+  }, [countries, preferredCountries]);
+  const handleOpenMenu = useCallback(() => {
+    if (!disabled) {
+      setMenuOpen(true);
+    }
+  }, [disabled]);
+  const handleCloseMenu = useCallback(() => {
+    setMenuOpen(false);
+  }, []);
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      render: ({ field, fieldState: { error } }) => {
+        const detectedCountry = field.value ? detectCountryFromNumber(field.value, countries) : null;
+        const selectedCountry = detectedCountry ?? defaultCountryData;
+        const handleCountrySelect = (country) => {
+          const currentNumber = field.value ?? "";
+          const numberWithoutCode = currentNumber.replace(/^\+\d+\s*/, "");
+          field.onChange(`${country.dialCode}${numberWithoutCode}`);
+          handleCloseMenu();
+        };
+        const handleInputChange = (e) => {
+          const rawValue = e.target.value;
+          const formatted = formatPhoneNumber(rawValue);
+          if (formatted && !formatted.startsWith("+")) {
+            field.onChange(`${selectedCountry.dialCode}${formatted}`);
+          } else {
+            field.onChange(formatted);
+          }
+        };
+        const displayValue = field.value ?? "";
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            TextField,
+            {
+              ...other,
+              label,
+              value: displayValue,
+              onChange: handleInputChange,
+              disabled,
+              error: !!error,
+              helperText: error?.message ?? helperText,
+              fullWidth: true,
+              slotProps: {
+                input: {
+                  startAdornment: !hideCountrySelect && /* @__PURE__ */ jsxs(InputAdornment, { position: "start", children: [
+                    /* @__PURE__ */ jsx(
+                      IconButton,
+                      {
+                        ref: anchorRef,
+                        onClick: handleOpenMenu,
+                        disabled,
+                        size: "small",
+                        edge: "start",
+                        "aria-label": `Select country, current: ${selectedCountry.name}`,
+                        "aria-haspopup": "listbox",
+                        "aria-expanded": menuOpen,
+                        sx: { mr: -0.5 },
+                        children: /* @__PURE__ */ jsx(
+                          Box7,
+                          {
+                            component: "span",
+                            sx: {
+                              fontSize: "1.25rem",
+                              lineHeight: 1,
+                              display: "flex",
+                              alignItems: "center"
+                            },
+                            children: selectedCountry.flag
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(Typography2, { variant: "body2", color: "text.secondary", sx: { mr: 0.5, minWidth: 40 }, children: selectedCountry.dialCode })
+                  ] })
+                },
+                htmlInput: {
+                  inputMode: "tel",
+                  autoComplete: "tel"
+                }
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Menu,
+            {
+              anchorEl: anchorRef.current,
+              open: menuOpen,
+              onClose: handleCloseMenu,
+              slotProps: {
+                paper: {
+                  sx: {
+                    maxHeight: 300,
+                    minWidth: 280
+                  }
+                }
+              },
+              children: sortedCountries.map((country, index) => /* @__PURE__ */ jsxs(
+                MenuItem,
+                {
+                  selected: country.code === selectedCountry.code,
+                  onClick: () => handleCountrySelect(country),
+                  divider: preferredCountries.length > 0 && index === preferredCountries.length - 1,
+                  children: [
+                    /* @__PURE__ */ jsx(ListItemIcon, { sx: { fontSize: "1.25rem", minWidth: 36 }, children: country.flag }),
+                    /* @__PURE__ */ jsx(ListItemText, { primary: country.name, secondary: country.dialCode })
+                  ]
+                },
+                country.code
+              ))
+            }
+          )
+        ] });
+      }
+    }
+  );
+}
+var DEFAULT_COUNTRIES2 = [
+  { code: "AD", label: "Andorra", phone: "+376", flag: "\u{1F1E6}\u{1F1E9}" },
+  { code: "AE", label: "United Arab Emirates", phone: "+971", flag: "\u{1F1E6}\u{1F1EA}" },
+  { code: "AF", label: "Afghanistan", phone: "+93", flag: "\u{1F1E6}\u{1F1EB}" },
+  { code: "AG", label: "Antigua and Barbuda", phone: "+1-268", flag: "\u{1F1E6}\u{1F1EC}" },
+  { code: "AI", label: "Anguilla", phone: "+1-264", flag: "\u{1F1E6}\u{1F1EE}" },
+  { code: "AL", label: "Albania", phone: "+355", flag: "\u{1F1E6}\u{1F1F1}" },
+  { code: "AM", label: "Armenia", phone: "+374", flag: "\u{1F1E6}\u{1F1F2}" },
+  { code: "AO", label: "Angola", phone: "+244", flag: "\u{1F1E6}\u{1F1F4}" },
+  { code: "AR", label: "Argentina", phone: "+54", flag: "\u{1F1E6}\u{1F1F7}" },
+  { code: "AT", label: "Austria", phone: "+43", flag: "\u{1F1E6}\u{1F1F9}" },
+  { code: "AU", label: "Australia", phone: "+61", flag: "\u{1F1E6}\u{1F1FA}" },
+  { code: "AZ", label: "Azerbaijan", phone: "+994", flag: "\u{1F1E6}\u{1F1FF}" },
+  { code: "BA", label: "Bosnia and Herzegovina", phone: "+387", flag: "\u{1F1E7}\u{1F1E6}" },
+  { code: "BB", label: "Barbados", phone: "+1-246", flag: "\u{1F1E7}\u{1F1E7}" },
+  { code: "BD", label: "Bangladesh", phone: "+880", flag: "\u{1F1E7}\u{1F1E9}" },
+  { code: "BE", label: "Belgium", phone: "+32", flag: "\u{1F1E7}\u{1F1EA}" },
+  { code: "BF", label: "Burkina Faso", phone: "+226", flag: "\u{1F1E7}\u{1F1EB}" },
+  { code: "BG", label: "Bulgaria", phone: "+359", flag: "\u{1F1E7}\u{1F1EC}" },
+  { code: "BH", label: "Bahrain", phone: "+973", flag: "\u{1F1E7}\u{1F1ED}" },
+  { code: "BI", label: "Burundi", phone: "+257", flag: "\u{1F1E7}\u{1F1EE}" },
+  { code: "BJ", label: "Benin", phone: "+229", flag: "\u{1F1E7}\u{1F1EF}" },
+  { code: "BN", label: "Brunei", phone: "+673", flag: "\u{1F1E7}\u{1F1F3}" },
+  { code: "BO", label: "Bolivia", phone: "+591", flag: "\u{1F1E7}\u{1F1F4}" },
+  { code: "BR", label: "Brazil", phone: "+55", flag: "\u{1F1E7}\u{1F1F7}" },
+  { code: "BS", label: "Bahamas", phone: "+1-242", flag: "\u{1F1E7}\u{1F1F8}" },
+  { code: "BT", label: "Bhutan", phone: "+975", flag: "\u{1F1E7}\u{1F1F9}" },
+  { code: "BW", label: "Botswana", phone: "+267", flag: "\u{1F1E7}\u{1F1FC}" },
+  { code: "BY", label: "Belarus", phone: "+375", flag: "\u{1F1E7}\u{1F1FE}" },
+  { code: "BZ", label: "Belize", phone: "+501", flag: "\u{1F1E7}\u{1F1FF}" },
+  { code: "CA", label: "Canada", phone: "+1", flag: "\u{1F1E8}\u{1F1E6}" },
+  { code: "CH", label: "Switzerland", phone: "+41", flag: "\u{1F1E8}\u{1F1ED}" },
+  { code: "CL", label: "Chile", phone: "+56", flag: "\u{1F1E8}\u{1F1F1}" },
+  { code: "CN", label: "China", phone: "+86", flag: "\u{1F1E8}\u{1F1F3}" },
+  { code: "CO", label: "Colombia", phone: "+57", flag: "\u{1F1E8}\u{1F1F4}" },
+  { code: "CR", label: "Costa Rica", phone: "+506", flag: "\u{1F1E8}\u{1F1F7}" },
+  { code: "CU", label: "Cuba", phone: "+53", flag: "\u{1F1E8}\u{1F1FA}" },
+  { code: "CY", label: "Cyprus", phone: "+357", flag: "\u{1F1E8}\u{1F1FE}" },
+  { code: "CZ", label: "Czech Republic", phone: "+420", flag: "\u{1F1E8}\u{1F1FF}" },
+  { code: "DE", label: "Germany", phone: "+49", flag: "\u{1F1E9}\u{1F1EA}" },
+  { code: "DJ", label: "Djibouti", phone: "+253", flag: "\u{1F1E9}\u{1F1EF}" },
+  { code: "DK", label: "Denmark", phone: "+45", flag: "\u{1F1E9}\u{1F1F0}" },
+  { code: "DM", label: "Dominica", phone: "+1-767", flag: "\u{1F1E9}\u{1F1F2}" },
+  { code: "DO", label: "Dominican Republic", phone: "+1-809", flag: "\u{1F1E9}\u{1F1F4}" },
+  { code: "DZ", label: "Algeria", phone: "+213", flag: "\u{1F1E9}\u{1F1FF}" },
+  { code: "EC", label: "Ecuador", phone: "+593", flag: "\u{1F1EA}\u{1F1E8}" },
+  { code: "EE", label: "Estonia", phone: "+372", flag: "\u{1F1EA}\u{1F1EA}" },
+  { code: "EG", label: "Egypt", phone: "+20", flag: "\u{1F1EA}\u{1F1EC}" },
+  { code: "ES", label: "Spain", phone: "+34", flag: "\u{1F1EA}\u{1F1F8}" },
+  { code: "ET", label: "Ethiopia", phone: "+251", flag: "\u{1F1EA}\u{1F1F9}" },
+  { code: "FI", label: "Finland", phone: "+358", flag: "\u{1F1EB}\u{1F1EE}" },
+  { code: "FJ", label: "Fiji", phone: "+679", flag: "\u{1F1EB}\u{1F1EF}" },
+  { code: "FR", label: "France", phone: "+33", flag: "\u{1F1EB}\u{1F1F7}" },
+  { code: "GA", label: "Gabon", phone: "+241", flag: "\u{1F1EC}\u{1F1E6}" },
+  { code: "GB", label: "United Kingdom", phone: "+44", flag: "\u{1F1EC}\u{1F1E7}" },
+  { code: "GE", label: "Georgia", phone: "+995", flag: "\u{1F1EC}\u{1F1EA}" },
+  { code: "GH", label: "Ghana", phone: "+233", flag: "\u{1F1EC}\u{1F1ED}" },
+  { code: "GR", label: "Greece", phone: "+30", flag: "\u{1F1EC}\u{1F1F7}" },
+  { code: "GT", label: "Guatemala", phone: "+502", flag: "\u{1F1EC}\u{1F1F9}" },
+  { code: "GY", label: "Guyana", phone: "+592", flag: "\u{1F1EC}\u{1F1FE}" },
+  { code: "HK", label: "Hong Kong", phone: "+852", flag: "\u{1F1ED}\u{1F1F0}" },
+  { code: "HN", label: "Honduras", phone: "+504", flag: "\u{1F1ED}\u{1F1F3}" },
+  { code: "HR", label: "Croatia", phone: "+385", flag: "\u{1F1ED}\u{1F1F7}" },
+  { code: "HT", label: "Haiti", phone: "+509", flag: "\u{1F1ED}\u{1F1F9}" },
+  { code: "HU", label: "Hungary", phone: "+36", flag: "\u{1F1ED}\u{1F1FA}" },
+  { code: "ID", label: "Indonesia", phone: "+62", flag: "\u{1F1EE}\u{1F1E9}" },
+  { code: "IE", label: "Ireland", phone: "+353", flag: "\u{1F1EE}\u{1F1EA}" },
+  { code: "IL", label: "Israel", phone: "+972", flag: "\u{1F1EE}\u{1F1F1}" },
+  { code: "IN", label: "India", phone: "+91", flag: "\u{1F1EE}\u{1F1F3}" },
+  { code: "IQ", label: "Iraq", phone: "+964", flag: "\u{1F1EE}\u{1F1F6}" },
+  { code: "IR", label: "Iran", phone: "+98", flag: "\u{1F1EE}\u{1F1F7}" },
+  { code: "IS", label: "Iceland", phone: "+354", flag: "\u{1F1EE}\u{1F1F8}" },
+  { code: "IT", label: "Italy", phone: "+39", flag: "\u{1F1EE}\u{1F1F9}" },
+  { code: "JM", label: "Jamaica", phone: "+1-876", flag: "\u{1F1EF}\u{1F1F2}" },
+  { code: "JO", label: "Jordan", phone: "+962", flag: "\u{1F1EF}\u{1F1F4}" },
+  { code: "JP", label: "Japan", phone: "+81", flag: "\u{1F1EF}\u{1F1F5}" },
+  { code: "KE", label: "Kenya", phone: "+254", flag: "\u{1F1F0}\u{1F1EA}" },
+  { code: "KG", label: "Kyrgyzstan", phone: "+996", flag: "\u{1F1F0}\u{1F1EC}" },
+  { code: "KH", label: "Cambodia", phone: "+855", flag: "\u{1F1F0}\u{1F1ED}" },
+  { code: "KR", label: "South Korea", phone: "+82", flag: "\u{1F1F0}\u{1F1F7}" },
+  { code: "KW", label: "Kuwait", phone: "+965", flag: "\u{1F1F0}\u{1F1FC}" },
+  { code: "KZ", label: "Kazakhstan", phone: "+7", flag: "\u{1F1F0}\u{1F1FF}" },
+  { code: "LA", label: "Laos", phone: "+856", flag: "\u{1F1F1}\u{1F1E6}" },
+  { code: "LB", label: "Lebanon", phone: "+961", flag: "\u{1F1F1}\u{1F1E7}" },
+  { code: "LK", label: "Sri Lanka", phone: "+94", flag: "\u{1F1F1}\u{1F1F0}" },
+  { code: "LR", label: "Liberia", phone: "+231", flag: "\u{1F1F1}\u{1F1F7}" },
+  { code: "LT", label: "Lithuania", phone: "+370", flag: "\u{1F1F1}\u{1F1F9}" },
+  { code: "LU", label: "Luxembourg", phone: "+352", flag: "\u{1F1F1}\u{1F1FA}" },
+  { code: "LV", label: "Latvia", phone: "+371", flag: "\u{1F1F1}\u{1F1FB}" },
+  { code: "LY", label: "Libya", phone: "+218", flag: "\u{1F1F1}\u{1F1FE}" },
+  { code: "MA", label: "Morocco", phone: "+212", flag: "\u{1F1F2}\u{1F1E6}" },
+  { code: "MC", label: "Monaco", phone: "+377", flag: "\u{1F1F2}\u{1F1E8}" },
+  { code: "MD", label: "Moldova", phone: "+373", flag: "\u{1F1F2}\u{1F1E9}" },
+  { code: "ME", label: "Montenegro", phone: "+382", flag: "\u{1F1F2}\u{1F1EA}" },
+  { code: "MG", label: "Madagascar", phone: "+261", flag: "\u{1F1F2}\u{1F1EC}" },
+  { code: "MK", label: "North Macedonia", phone: "+389", flag: "\u{1F1F2}\u{1F1F0}" },
+  { code: "ML", label: "Mali", phone: "+223", flag: "\u{1F1F2}\u{1F1F1}" },
+  { code: "MM", label: "Myanmar", phone: "+95", flag: "\u{1F1F2}\u{1F1F2}" },
+  { code: "MN", label: "Mongolia", phone: "+976", flag: "\u{1F1F2}\u{1F1F3}" },
+  { code: "MO", label: "Macau", phone: "+853", flag: "\u{1F1F2}\u{1F1F4}" },
+  { code: "MT", label: "Malta", phone: "+356", flag: "\u{1F1F2}\u{1F1F9}" },
+  { code: "MU", label: "Mauritius", phone: "+230", flag: "\u{1F1F2}\u{1F1FA}" },
+  { code: "MV", label: "Maldives", phone: "+960", flag: "\u{1F1F2}\u{1F1FB}" },
+  { code: "MW", label: "Malawi", phone: "+265", flag: "\u{1F1F2}\u{1F1FC}" },
+  { code: "MX", label: "Mexico", phone: "+52", flag: "\u{1F1F2}\u{1F1FD}" },
+  { code: "MY", label: "Malaysia", phone: "+60", flag: "\u{1F1F2}\u{1F1FE}" },
+  { code: "MZ", label: "Mozambique", phone: "+258", flag: "\u{1F1F2}\u{1F1FF}" },
+  { code: "NA", label: "Namibia", phone: "+264", flag: "\u{1F1F3}\u{1F1E6}" },
+  { code: "NE", label: "Niger", phone: "+227", flag: "\u{1F1F3}\u{1F1EA}" },
+  { code: "NG", label: "Nigeria", phone: "+234", flag: "\u{1F1F3}\u{1F1EC}" },
+  { code: "NI", label: "Nicaragua", phone: "+505", flag: "\u{1F1F3}\u{1F1EE}" },
+  { code: "NL", label: "Netherlands", phone: "+31", flag: "\u{1F1F3}\u{1F1F1}" },
+  { code: "NO", label: "Norway", phone: "+47", flag: "\u{1F1F3}\u{1F1F4}" },
+  { code: "NP", label: "Nepal", phone: "+977", flag: "\u{1F1F3}\u{1F1F5}" },
+  { code: "NZ", label: "New Zealand", phone: "+64", flag: "\u{1F1F3}\u{1F1FF}" },
+  { code: "OM", label: "Oman", phone: "+968", flag: "\u{1F1F4}\u{1F1F2}" },
+  { code: "PA", label: "Panama", phone: "+507", flag: "\u{1F1F5}\u{1F1E6}" },
+  { code: "PE", label: "Peru", phone: "+51", flag: "\u{1F1F5}\u{1F1EA}" },
+  { code: "PG", label: "Papua New Guinea", phone: "+675", flag: "\u{1F1F5}\u{1F1EC}" },
+  { code: "PH", label: "Philippines", phone: "+63", flag: "\u{1F1F5}\u{1F1ED}" },
+  { code: "PK", label: "Pakistan", phone: "+92", flag: "\u{1F1F5}\u{1F1F0}" },
+  { code: "PL", label: "Poland", phone: "+48", flag: "\u{1F1F5}\u{1F1F1}" },
+  { code: "PT", label: "Portugal", phone: "+351", flag: "\u{1F1F5}\u{1F1F9}" },
+  { code: "PY", label: "Paraguay", phone: "+595", flag: "\u{1F1F5}\u{1F1FE}" },
+  { code: "QA", label: "Qatar", phone: "+974", flag: "\u{1F1F6}\u{1F1E6}" },
+  { code: "RO", label: "Romania", phone: "+40", flag: "\u{1F1F7}\u{1F1F4}" },
+  { code: "RS", label: "Serbia", phone: "+381", flag: "\u{1F1F7}\u{1F1F8}" },
+  { code: "RU", label: "Russia", phone: "+7", flag: "\u{1F1F7}\u{1F1FA}" },
+  { code: "RW", label: "Rwanda", phone: "+250", flag: "\u{1F1F7}\u{1F1FC}" },
+  { code: "SA", label: "Saudi Arabia", phone: "+966", flag: "\u{1F1F8}\u{1F1E6}" },
+  { code: "SD", label: "Sudan", phone: "+249", flag: "\u{1F1F8}\u{1F1E9}" },
+  { code: "SE", label: "Sweden", phone: "+46", flag: "\u{1F1F8}\u{1F1EA}" },
+  { code: "SG", label: "Singapore", phone: "+65", flag: "\u{1F1F8}\u{1F1EC}" },
+  { code: "SI", label: "Slovenia", phone: "+386", flag: "\u{1F1F8}\u{1F1EE}" },
+  { code: "SK", label: "Slovakia", phone: "+421", flag: "\u{1F1F8}\u{1F1F0}" },
+  { code: "SL", label: "Sierra Leone", phone: "+232", flag: "\u{1F1F8}\u{1F1F1}" },
+  { code: "SN", label: "Senegal", phone: "+221", flag: "\u{1F1F8}\u{1F1F3}" },
+  { code: "SO", label: "Somalia", phone: "+252", flag: "\u{1F1F8}\u{1F1F4}" },
+  { code: "SR", label: "Suriname", phone: "+597", flag: "\u{1F1F8}\u{1F1F7}" },
+  { code: "SV", label: "El Salvador", phone: "+503", flag: "\u{1F1F8}\u{1F1FB}" },
+  { code: "SY", label: "Syria", phone: "+963", flag: "\u{1F1F8}\u{1F1FE}" },
+  { code: "TH", label: "Thailand", phone: "+66", flag: "\u{1F1F9}\u{1F1ED}" },
+  { code: "TJ", label: "Tajikistan", phone: "+992", flag: "\u{1F1F9}\u{1F1EF}" },
+  { code: "TM", label: "Turkmenistan", phone: "+993", flag: "\u{1F1F9}\u{1F1F2}" },
+  { code: "TN", label: "Tunisia", phone: "+216", flag: "\u{1F1F9}\u{1F1F3}" },
+  { code: "TR", label: "Turkey", phone: "+90", flag: "\u{1F1F9}\u{1F1F7}" },
+  { code: "TT", label: "Trinidad and Tobago", phone: "+1-868", flag: "\u{1F1F9}\u{1F1F9}" },
+  { code: "TW", label: "Taiwan", phone: "+886", flag: "\u{1F1F9}\u{1F1FC}" },
+  { code: "TZ", label: "Tanzania", phone: "+255", flag: "\u{1F1F9}\u{1F1FF}" },
+  { code: "UA", label: "Ukraine", phone: "+380", flag: "\u{1F1FA}\u{1F1E6}" },
+  { code: "UG", label: "Uganda", phone: "+256", flag: "\u{1F1FA}\u{1F1EC}" },
+  { code: "US", label: "United States", phone: "+1", flag: "\u{1F1FA}\u{1F1F8}" },
+  { code: "UY", label: "Uruguay", phone: "+598", flag: "\u{1F1FA}\u{1F1FE}" },
+  { code: "UZ", label: "Uzbekistan", phone: "+998", flag: "\u{1F1FA}\u{1F1FF}" },
+  { code: "VE", label: "Venezuela", phone: "+58", flag: "\u{1F1FB}\u{1F1EA}" },
+  { code: "VN", label: "Vietnam", phone: "+84", flag: "\u{1F1FB}\u{1F1F3}" },
+  { code: "YE", label: "Yemen", phone: "+967", flag: "\u{1F1FE}\u{1F1EA}" },
+  { code: "ZA", label: "South Africa", phone: "+27", flag: "\u{1F1FF}\u{1F1E6}" },
+  { code: "ZM", label: "Zambia", phone: "+260", flag: "\u{1F1FF}\u{1F1F2}" },
+  { code: "ZW", label: "Zimbabwe", phone: "+263", flag: "\u{1F1FF}\u{1F1FC}" }
+];
+function FieldCountrySelect({
+  name,
+  label,
+  placeholder,
+  helperText,
+  getValue = "full",
+  countries: customCountries,
+  textFieldProps,
+  multiple,
+  disabled,
+  ...other
+}) {
+  const { control } = useFormContext();
+  const countries = customCountries ?? DEFAULT_COUNTRIES2;
+  const countryMap = useMemo(() => {
+    const byCode = /* @__PURE__ */ new Map();
+    const byLabel = /* @__PURE__ */ new Map();
+    for (const country of countries) {
+      byCode.set(country.code, country);
+      byLabel.set(country.label, country);
+    }
+    return { byCode, byLabel };
+  }, [countries]);
+  const findCountry = (v) => {
+    if (v === null || v === void 0) return null;
+    if (typeof v === "object" && v !== null && "code" in v) {
+      return v;
+    }
+    if (typeof v === "string") {
+      return countryMap.byCode.get(v) ?? countryMap.byLabel.get(v) ?? null;
+    }
+    return null;
+  };
+  const valueToCountry = (value) => {
+    if (value === null || value === void 0) {
+      return multiple ? [] : null;
+    }
+    if (multiple) {
+      const values = Array.isArray(value) ? value : [value];
+      return values.map(findCountry).filter((c) => c !== null);
+    }
+    return findCountry(value);
+  };
+  const countryToValue = (country) => {
+    if (country === null) {
+      return multiple ? [] : null;
+    }
+    if (multiple && Array.isArray(country)) {
+      if (getValue === "code") return country.map((c) => c.code);
+      if (getValue === "label") return country.map((c) => c.label);
+      return country;
+    }
+    if (!Array.isArray(country)) {
+      if (getValue === "code") return country.code;
+      if (getValue === "label") return country.label;
+      return country;
+    }
+    return null;
+  };
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      render: ({ field, fieldState: { error } }) => {
+        const currentValue = valueToCountry(field.value);
+        return /* @__PURE__ */ jsx(
+          Autocomplete,
+          {
+            ...other,
+            multiple,
+            disabled,
+            options: countries,
+            value: currentValue,
+            onChange: (_event, newValue) => {
+              field.onChange(countryToValue(newValue));
+            },
+            getOptionLabel: (option) => option.label,
+            isOptionEqualToValue: (option, value) => option.code === value.code,
+            renderOption: (props, option) => {
+              const { key, ...optionProps } = props;
+              return /* @__PURE__ */ jsxs(Box7, { component: "li", sx: { "& > span": { mr: 1.5, flexShrink: 0 } }, ...optionProps, children: [
+                /* @__PURE__ */ jsx("span", { style: { fontSize: "1.25rem" }, children: option.flag }),
+                option.label,
+                " (",
+                option.code,
+                ")"
+              ] }, key);
+            },
+            renderInput: (params) => /* @__PURE__ */ jsx(
+              TextField,
+              {
+                ...params,
+                ...textFieldProps,
+                label,
+                placeholder,
+                error: !!error,
+                helperText: error?.message ?? helperText,
+                slotProps: {
+                  ...textFieldProps?.slotProps,
+                  htmlInput: {
+                    ...params.inputProps,
+                    autoComplete: "country-name"
+                  }
+                }
+              }
+            )
+          }
+        );
+      }
+    }
+  );
+}
+var DEFAULT_EDITOR_TOOLBAR = {
+  bold: true,
+  italic: true,
+  underline: true,
+  headings: [1, 2, 3],
+  bulletList: true,
+  orderedList: true,
+  link: true,
+  history: true
+};
+function BasicEditor({
+  value,
+  onChange,
+  onBlur,
+  error,
+  name,
+  disabled,
+  readOnly,
+  placeholder,
+  minHeight = 200,
+  maxHeight,
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedBy
+}) {
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      multiline: true,
+      fullWidth: true,
+      minRows: 6,
+      maxRows: maxHeight ? 20 : void 0,
+      value,
+      onChange: (e) => onChange(e.target.value),
+      onBlur,
+      error,
+      disabled,
+      slotProps: {
+        input: {
+          readOnly
+        },
+        htmlInput: {
+          "aria-label": ariaLabel || name,
+          "aria-describedby": ariaDescribedBy
+        }
+      },
+      placeholder,
+      sx: {
+        "& .MuiOutlinedInput-root": {
+          minHeight,
+          maxHeight,
+          alignItems: "flex-start"
+        },
+        "& .MuiInputBase-input": {
+          resize: "vertical"
+        }
+      }
+    }
+  );
+}
+function FieldEditor({
+  name,
+  label,
+  helperText,
+  rules,
+  placeholder,
+  disabled,
+  readOnly,
+  toolbar = DEFAULT_EDITOR_TOOLBAR,
+  minHeight = 200,
+  maxHeight,
+  required,
+  fullWidth = true,
+  renderEditor,
+  sx,
+  "aria-label": ariaLabel
+}) {
+  const { control } = useFormContext();
+  const errorId = `${name}-error`;
+  const helperId = `${name}-helper`;
+  const describedBy = [helperText ? helperId : null, errorId].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      rules,
+      render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsxs(FormControl8, { fullWidth, error: !!error, disabled, required, sx, children: [
+        label && /* @__PURE__ */ jsx(FormLabel6, { htmlFor: name, sx: { mb: 1, fontWeight: 500 }, children: label }),
+        renderEditor ? (
+          // Custom editor implementation
+          renderEditor({
+            value: field.value ?? "",
+            onChange: field.onChange,
+            onBlur: field.onBlur,
+            error: !!error,
+            name,
+            disabled,
+            readOnly,
+            placeholder,
+            toolbar,
+            minHeight,
+            maxHeight,
+            "aria-label": ariaLabel || label || name,
+            "aria-describedby": describedBy
+          })
+        ) : (
+          // Basic textarea fallback
+          /* @__PURE__ */ jsx(
+            BasicEditor,
+            {
+              value: field.value ?? "",
+              onChange: field.onChange,
+              onBlur: field.onBlur,
+              error: !!error,
+              name,
+              disabled,
+              readOnly,
+              placeholder,
+              toolbar,
+              minHeight,
+              maxHeight,
+              "aria-label": ariaLabel || label || name,
+              "aria-describedby": describedBy
+            }
+          )
+        ),
+        (error?.message || helperText) && /* @__PURE__ */ jsx(FormHelperText9, { id: error ? errorId : helperId, error: !!error, children: error?.message ?? helperText })
+      ] })
+    }
+  );
+}
+function FieldCustomEditor({
+  name,
+  label,
+  helperText,
+  rules,
+  required,
+  fullWidth = true,
+  disabled,
+  sx,
+  children
+}) {
+  const { control } = useFormContext();
+  const errorId = `${name}-error`;
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      rules,
+      render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsxs(FormControl8, { fullWidth, error: !!error, disabled, required, sx, children: [
+        label && /* @__PURE__ */ jsx(FormLabel6, { htmlFor: name, sx: { mb: 1, fontWeight: 500 }, children: label }),
+        children({
+          value: field.value ?? "",
+          onChange: field.onChange,
+          onBlur: field.onBlur,
+          error: !!error,
+          errorMessage: error?.message,
+          name,
+          disabled
+        }),
+        (error?.message || helperText) && /* @__PURE__ */ jsx(FormHelperText9, { id: errorId, error: !!error, children: error?.message ?? helperText })
+      ] })
+    }
+  );
+}
+
+// src/components/field/index.ts
+var Field = {
+  // Base fields
+  /** Text input field */
+  Text: FieldText,
+  /** Select dropdown field */
+  Select: FieldSelect,
+  /** Checkbox field */
+  Checkbox: FieldCheckbox,
+  /** Switch toggle field */
+  Switch: FieldSwitch,
+  /** Number input field */
+  Number: FieldNumber,
+  /** Radio button group field */
+  Radio: FieldRadio,
+  /** Autocomplete with search field */
+  Autocomplete: FieldAutocomplete,
+  /** Multiple selection with chips field */
+  MultiSelect: FieldMultiSelect,
+  /** Star rating field */
+  Rating: FieldRating,
+  /** Range slider field */
+  Slider: FieldSlider,
+  /** Date picker field (MUI X) */
+  DatePicker: FieldDatePicker,
+  // New fields (v0.4.0)
+  /** Time picker field (MUI X) */
+  TimePicker: FieldTimePicker,
+  /** Combined date-time picker field (MUI X) */
+  DateTimePicker: FieldDateTimePicker,
+  /** Multiple checkbox group field */
+  MultiCheckbox: FieldMultiCheckbox,
+  /** Multiple switch group field */
+  MultiSwitch: FieldMultiSwitch,
+  /** OTP/PIN code input field */
+  Code: FieldCode,
+  /** File upload with dropzone */
+  Upload: FieldUpload,
+  /** Compact file upload box */
+  UploadBox: FieldUploadBox,
+  /** Circular avatar upload */
+  UploadAvatar: FieldUploadAvatar,
+  /** International phone input */
+  Phone: FieldPhone,
+  /** Country selector with flags */
+  CountrySelect: FieldCountrySelect,
+  // Editor fields (v0.4.0)
+  /** Rich text editor (with textarea fallback or custom editor) */
+  Editor: FieldEditor,
+  /** Headless editor field with render prop */
+  CustomEditor: FieldCustomEditor
+};
+
+export { Field, FieldAutocomplete, FieldCheckbox, FieldCode, FieldCountrySelect, FieldCustomEditor, FieldDatePicker, FieldDateTimePicker, FieldEditor, FieldMultiCheckbox, FieldMultiSelect, FieldMultiSwitch, FieldNumber, FieldPhone, FieldRadio, FieldRating, FieldSelect, FieldSlider, FieldSwitch, FieldText, FieldTimePicker, FieldUpload, FieldUploadAvatar, FieldUploadBox, SearchInput, clampNumber, createNumberInputHandlers, parseNumber, roundToDecimals, transformForDisplay, transformOnBlur, transformOnChange };
+//# sourceMappingURL=chunk-LAEY5USO.js.map
+//# sourceMappingURL=chunk-LAEY5USO.js.map