@gnwebsoft/ui 2.18.48 → 2.18.49

package/dist/index.mjs

@@ -18,6 +18,9 @@ import {
 import {
   Field_default as Field_default2
 } from "./chunk-5HOGPCEO.mjs";
+import {
+  Field_default as Field_default3
+} from "./chunk-7E3IFHIS.mjs";
 import {
   useTransform
 } from "./chunk-GFSTK7KN.mjs";
@@ -32,1886 +35,6 @@ import {
   removeLeadingTrailingSlashes,
   schemaTools
 } from "./chunk-RQS44YC7.mjs";
-
-// src/wrappers3/DatePickerElement/DatePickerElement.tsx
-import { useCallback } from "react";
-import { useController } from "react-hook-form";
-import { DatePicker } from "@mui/x-date-pickers";
-import { Grid2, useForkRef, useTheme } from "@mui/material";
-import { useLocalizationContext } from "@mui/x-date-pickers/internals";
-import { jsx } from "react/jsx-runtime";
-function readValueAsDate2(adapter, value) {
-  if (typeof value === "string") {
-    if (value === "") {
-      return null;
-    }
-    return adapter.utils.date(value);
-  }
-  return value;
-}
-function useTransform2(options) {
-  const value = typeof options.transform?.input === "function" ? options.transform.input(options.value) : options.value;
-  const onChange = useCallback(
-    (...event) => {
-      if (typeof options.transform?.output === "function") {
-        options.onChange(options.transform.output(...event));
-      } else {
-        options.onChange(...event);
-      }
-    },
-    [options]
-  );
-  return {
-    value,
-    onChange
-  };
-}
-var Component = function DatePickerElement(props) {
-  const {
-    name,
-    required,
-    inputProps,
-    control,
-    textReadOnly,
-    label,
-    placeholder,
-    slotProps,
-    datePickerProps = {},
-    transform,
-    sx,
-    ...rest
-  } = props;
-  const adapter = useLocalizationContext();
-  const theme = useTheme();
-  const { disabled, inputRef, onClose, ...restDatePickerProps } = datePickerProps;
-  const {
-    field,
-    fieldState: { error }
-  } = useController({
-    name,
-    control,
-    defaultValue: null
-  });
-  const { value, onChange } = useTransform2({
-    value: field.value,
-    onChange: field.onChange,
-    transform: {
-      input: typeof transform?.input === "function" ? transform.input : (newValue) => readValueAsDate2(adapter, newValue),
-      output: (outputValue, context) => {
-        if (outputValue === null) return null;
-        return outputValue;
-      }
-    }
-  });
-  const handleInputRef = useForkRef(field.ref, inputRef);
-  return /* @__PURE__ */ jsx(
-    DatePicker,
-    {
-      ...rest,
-      ...restDatePickerProps,
-      ...field,
-      value,
-      label,
-      disabled,
-      ...datePickerProps,
-      inputRef: handleInputRef,
-      onClose: (...args) => {
-        field.onBlur();
-        if (onClose) {
-          onClose(...args);
-        }
-      },
-      onChange: (newValue, context) => {
-        onChange(newValue, context);
-        if (typeof datePickerProps.onChange === "function") {
-          datePickerProps.onChange(newValue, context);
-        }
-      },
-      sx: {
-        "& .MuiOutlinedInput-root": {
-          bgcolor: disabled ? theme.palette.action.disabledBackground : "transparent"
-        },
-        "& .MuiInputLabel-asterisk": { color: "red" },
-        "& .MuiInputBase-input": {
-          cursor: disabled ? "not-allowed" : "default"
-        },
-        ...sx
-      },
-      slotProps: {
-        ...slotProps,
-        actionBar: {
-          actions: ["clear", "today", "cancel", "accept"]
-        },
-        textField: {
-          ...inputProps,
-          required,
-          placeholder,
-          fullWidth: true,
-          onBlur: (event) => {
-            field.onBlur();
-            if (typeof inputProps?.onBlur === "function") {
-              inputProps.onBlur(event);
-            }
-          },
-          error: !!error,
-          helperText: error ? error.message : inputProps?.helperText || rest.helperText,
-          inputProps: {
-            readOnly: !!textReadOnly,
-            ...inputProps?.inputProps
-          }
-        }
-      }
-    }
-  );
-};
-var DatePickerElement2 = ({
-  gridProps = { size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 } },
-  ...props
-}) => {
-  if (gridProps) {
-    return /* @__PURE__ */ jsx(
-      Grid2,
-      {
-        ...{ size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }, ...gridProps },
-        children: /* @__PURE__ */ jsx(Component, { ...props })
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(Component, { ...props });
-};
-DatePickerElement2.displayName = "DatePickerElement";
-var DatePickerElement_default = DatePickerElement2;
-
-// src/wrappers3/PasswordElement/PasswordElement.tsx
-import { useState } from "react";
-import {
-  IconButton,
-  InputAdornment,
-  TextField,
-  useForkRef as useForkRef2,
-  Grid2 as Grid22
-} from "@mui/material";
-import Visibility from "@mui/icons-material/Visibility";
-import VisibilityOff from "@mui/icons-material/VisibilityOff";
-import {
-  useController as useController2
-} from "react-hook-form";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var Component2 = function PasswordEl(props) {
-  const {
-    type,
-    required,
-    iconColor,
-    renderIcon = (password2) => password2 ? /* @__PURE__ */ jsx2(Visibility, {}) : /* @__PURE__ */ jsx2(VisibilityOff, {}),
-    slotProps,
-    name,
-    control,
-    component: TextFieldComponent = TextField,
-    inputRef,
-    onBlur,
-    ...rest
-  } = props;
-  const [password, setPassword] = useState(true);
-  const endAdornment = /* @__PURE__ */ jsx2(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx2(
-    IconButton,
-    {
-      onMouseDown: (e) => e.preventDefault(),
-      onClick: () => setPassword(!password),
-      tabIndex: -1,
-      color: iconColor ?? "default",
-      children: renderIcon(password)
-    }
-  ) });
-  const {
-    field,
-    fieldState: { error }
-  } = useController2({
-    name,
-    control
-  });
-  const handleInputRef = useForkRef2(field.ref, inputRef);
-  return /* @__PURE__ */ jsx2(
-    TextField,
-    {
-      ...rest,
-      inputRef: handleInputRef,
-      type: password ? "password" : "text",
-      value: field.value,
-      fullWidth: true,
-      onChange: (event) => {
-        field.onChange(event);
-        if (typeof rest.onChange === "function") {
-          rest.onChange(event);
-        }
-      },
-      onBlur: (event) => {
-        field.onBlur();
-        if (typeof onBlur === "function") {
-          onBlur(event);
-        }
-      },
-      ...typeof slotProps === "undefined" ? {
-        InputProps: {
-          endAdornment
-        }
-      } : {
-        slotProps: {
-          ...slotProps,
-          input: {
-            endAdornment,
-            ...slotProps?.input
-          }
-        }
-      },
-      error: !!error,
-      helperText: error ? error.message : ""
-    }
-  );
-};
-var PasswordElement = ({
-  gridProps = { size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 } },
-  ...props
-}) => {
-  if (gridProps) {
-    return /* @__PURE__ */ jsx2(
-      Grid22,
-      {
-        ...{ size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }, ...gridProps },
-        children: /* @__PURE__ */ jsx2(Component2, { ...props })
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx2(Component2, { ...props });
-};
-PasswordElement.displayName = "PasswordElement";
-var PasswordElement_default = PasswordElement;
-
-// src/wrappers3/RadioButtonGroup/RadioButtonGroup.tsx
-import {
-  useController as useController3
-} from "react-hook-form";
-import {
-  FormControl,
-  FormControlLabel,
-  FormHelperText,
-  FormLabel,
-  Radio,
-  RadioGroup,
-  useTheme as useTheme2,
-  Grid2 as Grid23
-} from "@mui/material";
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-import { createElement } from "react";
-var Component3 = function RadioButtonGroup(props) {
-  const {
-    helperText,
-    options,
-    label,
-    name,
-    parseError,
-    labelKey = "label",
-    valueKey = "id",
-    disabledKey = "disabled",
-    required,
-    emptyOptionLabel,
-    returnObject,
-    row,
-    control,
-    type,
-    labelProps,
-    disabled,
-    formLabelProps,
-    radioProps,
-    transform,
-    rules = {},
-    ...rest
-  } = props;
-  const theme = useTheme2();
-  const {
-    field,
-    fieldState: { error }
-  } = useController3({
-    name,
-    disabled,
-    control
-  });
-  const { value, onChange } = useTransform({
-    value: field.value,
-    onChange: field.onChange,
-    transform: {
-      input: typeof transform?.input === "function" ? transform.input : (value2) => {
-        return value2 || "";
-      },
-      output: typeof transform?.output === "function" ? transform?.output : (_event, value2) => {
-        if (value2 && type === "number") {
-          return Number(value2);
-        }
-        return value2;
-      }
-    }
-  });
-  const onRadioChange = (event, radioValue) => {
-    const returnValue = returnObject ? options.find((items) => items[valueKey] === radioValue) : radioValue;
-    onChange(event, returnValue);
-    if (typeof rest.onChange === "function") {
-      rest.onChange(returnValue);
-    }
-  };
-  return /* @__PURE__ */ jsxs(FormControl, { error: !!error, children: [
-    label && /* @__PURE__ */ jsx3(FormLabel, { ...formLabelProps, required, error: !!error, children: label }),
-    /* @__PURE__ */ jsxs(RadioGroup, { onChange: onRadioChange, name, row, value, children: [
-      emptyOptionLabel && /* @__PURE__ */ jsx3(
-        FormControlLabel,
-        {
-          ...labelProps,
-          control: /* @__PURE__ */ jsx3(
-            Radio,
-            {
-              ...radioProps,
-              sx: {
-                color: error ? theme.palette.error.main : void 0
-              },
-              checked: !value
-            }
-          ),
-          label: emptyOptionLabel,
-          value: ""
-        }
-      ),
-      options.map((option) => {
-        const optionKey = option[valueKey];
-        const optionDisabled = option[disabledKey] || false;
-        if (optionKey === void 0) {
-          console.error(
-            `RadioButtonGroup: valueKey ${valueKey} does not exist on option`,
-            option
-          );
-        }
-        let val = returnObject ? value?.[valueKey] : value;
-        if (type === "number") {
-          val = Number(val);
-        }
-        const isChecked = val === optionKey;
-        return /* @__PURE__ */ createElement(
-          FormControlLabel,
-          {
-            ...labelProps,
-            control: /* @__PURE__ */ jsx3(
-              Radio,
-              {
-                ...radioProps,
-                sx: {
-                  color: error ? theme.palette.error.main : void 0
-                },
-                disabled: disabled || optionDisabled,
-                checked: isChecked
-              }
-            ),
-            value: optionKey,
-            label: option[labelKey],
-            key: optionKey
-          }
-        );
-      })
-    ] }),
-    error && /* @__PURE__ */ jsx3(FormHelperText, { children: error.message })
-  ] });
-};
-var RadioButtonGroup2 = ({
-  gridProps = { size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 } },
-  ...props
-}) => {
-  if (gridProps) {
-    return /* @__PURE__ */ jsx3(
-      Grid23,
-      {
-        ...{ size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }, ...gridProps },
-        children: /* @__PURE__ */ jsx3(Component3, { ...props })
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx3(Component3, { ...props });
-};
-RadioButtonGroup2.displayName = "RadioButtonGroup";
-var RadioButtonGroup_default = RadioButtonGroup2;
-
-// src/wrappers3/TextFieldElement/TextFieldElement.tsx
-import {
-  Grid2 as Grid24,
-  TextField as TextField2,
-  useForkRef as useForkRef3,
-  useTheme as useTheme3
-} from "@mui/material";
-import {
-  useController as useController4
-} from "react-hook-form";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var Component4 = function TextFieldElement(props) {
-  const {
-    rules = {},
-    parseError,
-    name,
-    control,
-    component: TextFieldComponent = TextField2,
-    gridProps,
-    transform,
-    label,
-    placeholder,
-    textFieldProps = {},
-    variant,
-    sx,
-    ...rest
-  } = props;
-  const {
-    type,
-    required,
-    helperText,
-    inputRef,
-    onBlur,
-    disabled,
-    ...restTextProps
-  } = textFieldProps;
-  const {
-    field,
-    fieldState: { error }
-  } = useController4({
-    name,
-    control
-  });
-  const theme = useTheme3();
-  const { value, onChange } = useTransform({
-    value: field.value,
-    onChange: field.onChange,
-    transform: {
-      input: typeof transform?.input === "function" ? transform.input : (value2) => {
-        return value2 ?? "";
-      },
-      output: typeof transform?.output === "function" ? transform.output : (event) => {
-        const value2 = event.target.value;
-        if (type !== "number") {
-          return value2;
-        }
-        if (value2 === "") {
-          return null;
-        }
-        if (value2 == null) {
-          return value2;
-        }
-        return Number(value2);
-      }
-    }
-  });
-  const handleInputRef = useForkRef3(field.ref, inputRef);
-  return /* @__PURE__ */ jsx4(
-    TextFieldComponent,
-    {
-      ...rest,
-      ...restTextProps,
-      name: field.name,
-      value,
-      onChange: (event) => {
-        field.onChange(event);
-        if (typeof onChange === "function") {
-          onChange(event);
-        }
-      },
-      onBlur: (event) => {
-        field.onBlur();
-        if (typeof onBlur === "function") {
-          onBlur(event);
-        }
-      },
-      disabled,
-      label,
-      placeholder,
-      fullWidth: true,
-      required,
-      type,
-      error: !!error,
-      helperText: error ? error.message : helperText,
-      inputRef: handleInputRef,
-      variant: variant ? variant : "outlined",
-      size: "small",
-      sx: {
-        "& .MuiInputLabel-asterisk": { color: "red" },
-        "& .MuiInputBase-input": {
-          cursor: disabled ? "not-allowed" : "default"
-        },
-        bgcolor: disabled ? theme.palette.action.disabledBackground : "transparent",
-        ...sx
-      }
-    }
-  );
-};
-var TextFieldElement2 = ({
-  gridProps = { size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 } },
-  ...props
-}) => {
-  if (gridProps) {
-    return /* @__PURE__ */ jsx4(
-      Grid24,
-      {
-        ...{ size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }, ...gridProps },
-        children: /* @__PURE__ */ jsx4(Component4, { ...props })
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx4(Component4, { ...props });
-};
-TextFieldElement2.displayName = "TextFieldElement";
-var TextFieldElement_default = TextFieldElement2;
-
-// src/wrappers3/TimePickerElement/TimePickerElement.tsx
-import {
-  TimePicker
-} from "@mui/x-date-pickers";
-import {
-  useController as useController5
-} from "react-hook-form";
-import { useForkRef as useForkRef4, Grid2 as Grid25 } from "@mui/material";
-import { useLocalizationContext as useLocalizationContext2 } from "@mui/x-date-pickers/internals";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var Component5 = function TimePickerElement(props) {
-  const {
-    parseError,
-    name,
-    required,
-    rules = {},
-    inputProps,
-    control,
-    textReadOnly,
-    slotProps,
-    inputRef,
-    transform,
-    ...rest
-  } = props;
-  const adapter = useLocalizationContext2();
-  const {
-    field,
-    fieldState: { error }
-  } = useController5({
-    name,
-    control,
-    disabled: rest.disabled,
-    defaultValue: null
-  });
-  const { value, onChange } = useTransform({
-    value: field.value,
-    onChange: field.onChange,
-    transform: {
-      input: typeof transform?.input === "function" ? transform.input : (newValue) => readValueAsDate(adapter, newValue),
-      output: typeof transform?.output === "function" ? transform.output : (newValue) => newValue
-    }
-  });
-  const handleInputRef = useForkRef4(field.ref, inputRef);
-  return /* @__PURE__ */ jsx5(
-    TimePicker,
-    {
-      ...rest,
-      ...field,
-      value,
-      inputRef: handleInputRef,
-      onClose: (...args) => {
-        field.onBlur();
-        if (rest.onClose) {
-          rest.onClose(...args);
-        }
-      },
-      onChange: (value2, context) => {
-        onChange(value2, context);
-        if (typeof rest.onChange === "function") {
-          rest.onChange(value2, context);
-        }
-      },
-      slotProps: {
-        ...slotProps,
-        textField: {
-          ...inputProps,
-          required,
-          fullWidth: true,
-          error: !!error,
-          helperText: error ? error.message : inputProps?.helperText || rest.helperText,
-          inputProps: {
-            readOnly: textReadOnly,
-            ...inputProps?.inputProps
-          }
-        }
-      }
-    }
-  );
-};
-var TimePickerElement2 = ({
-  gridProps = { size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 } },
-  ...props
-}) => {
-  if (gridProps) {
-    return /* @__PURE__ */ jsx5(
-      Grid25,
-      {
-        ...{ size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }, ...gridProps },
-        children: /* @__PURE__ */ jsx5(Component5, { ...props })
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx5(Component5, { ...props });
-};
-TimePickerElement2.displayName = "TimePickerElement";
-var TimePickerElement_default = TimePickerElement2;
-
-// src/wrappers3/AsyncSelect/AsyncSelectElement.tsx
-import * as React from "react";
-import { useController as useController6 } from "react-hook-form";
-import {
-  useRef,
-  useMemo,
-  Fragment,
-  useState as useState2,
-  useEffect as useEffect2,
-  useCallback as useCallback2
-} from "react";
-import { debounce } from "@mui/material/utils";
-import TextField3 from "@mui/material/TextField";
-import Autocomplete from "@mui/material/Autocomplete";
-import { Grid2 as Grid26, useTheme as useTheme4, CircularProgress } from "@mui/material";
-import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
-var Component6 = function AsyncSelectElement(props) {
-  const {
-    name,
-    onBlur,
-    disabled,
-    control,
-    gridProps,
-    placeholder,
-    initialValue,
-    label,
-    queryFn,
-    variant,
-    labelKey = "Label",
-    valueKey = "Value",
-    sx,
-    ...rest
-  } = props;
-  const {
-    field,
-    fieldState: { error }
-  } = useController6({
-    name,
-    control
-  });
-  const theme = useTheme4();
-  const [loading, setLoading] = useState2(false);
-  const [selectedOption, setSelectedOption] = useState2(null);
-  const [inputValue, setInputValue] = useState2("");
-  const inputValue2 = useMemo(() => inputValue, [inputValue]);
-  const setInputValue2 = useCallback2(
-    (newValue) => setInputValue(newValue),
-    []
-  );
-  const [options, setOptions] = useState2([]);
-  const initialValueLoaded = useRef(
-    !initialValue ? true : !(initialValue != null)
-  );
-  const fieldValue = useRef(field.value);
-  const fetchData = useMemo(
-    () => debounce(
-      (payload, callback) => {
-        queryFn(payload).then((c) => callback(c));
-      },
-      400
-    ),
-    []
-  );
-  const fillOptions = (results) => {
-    let newOptions = [];
-    if (selectedOption) {
-      newOptions = [selectedOption];
-    }
-    if (results) {
-      newOptions = [...newOptions, ...results];
-    }
-    setOptions(newOptions);
-    setLoading(false);
-  };
-  useEffect2(() => {
-    if (initialValueLoaded.current) return void 0;
-    let active = true;
-    const payload = {
-      query: null,
-      initialValue
-    };
-    setLoading(true);
-    fetchData(payload, (results) => {
-      if (active) {
-        if (!!results && results.length > 0) {
-          fillOptions(results?.filter((c) => c.Value == initialValue));
-          setSelectedOption(results[0]);
-          field.onChange(results[0].Value);
-          fieldValue.current = results[0].Value;
-        }
-        initialValueLoaded.current = true;
-        setLoading(false);
-      }
-    });
-    return () => {
-      active = false;
-    };
-  }, [initialValue]);
-  React.useEffect(() => {
-    let active = true;
-    if (inputValue2 === "" || initialValueLoaded.current === false) {
-      setOptions(selectedOption ? [selectedOption] : []);
-      setLoading(false);
-      return void 0;
-    }
-    if (fieldValue.current) {
-      if (field.value === fieldValue.current) {
-        return void 0;
-      }
-    }
-    setLoading(true);
-    const payload = {
-      query: inputValue2,
-      initialValue: null
-    };
-    fetchData(payload, (results) => {
-      if (active) {
-        fillOptions(results);
-      }
-    });
-    return () => {
-      active = false;
-    };
-  }, [initialValue, inputValue2, fetchData]);
-  const selectRef = useRef(null);
-  const handleChange = (_2, newSelectedOption, reason) => {
-    if (reason === "clear") {
-      setSelectedOption(null);
-      field.onChange(null);
-      setLoading(false);
-    } else if (reason === "selectOption" || reason === "removeOption") {
-      if (newSelectedOption) {
-        setSelectedOption(newSelectedOption);
-        field.onChange(newSelectedOption.Value);
-        fieldValue.current = newSelectedOption.Value;
-        setLoading(false);
-      }
-    }
-    setOptions([]);
-    setLoading(false);
-  };
-  useEffect2(() => {
-    if (!field.value) {
-      setInputValue("");
-      setSelectedOption(null);
-      setLoading(false);
-    }
-  }, [field.value]);
-  const getOptionValue = (option) => {
-    if (typeof option === "string") return option;
-    return option ? option[valueKey] : null;
-  };
-  const getOptionLabel = (option) => {
-    if (typeof option === "string") return option;
-    return option ? option[labelKey] : "";
-  };
-  return /* @__PURE__ */ jsx6(
-    Autocomplete,
-    {
-      ...rest,
-      ref: selectRef,
-      fullWidth: true,
-      loading,
-      getOptionLabel,
-      getOptionKey: getOptionValue,
-      isOptionEqualToValue: (option, value) => getOptionValue(option) === getOptionValue(value),
-      autoComplete: true,
-      disabled,
-      includeInputInList: true,
-      options,
-      filterOptions: (x) => x,
-      value: selectedOption,
-      filterSelectedOptions: true,
-      onChange: handleChange,
-      onInputChange: (_2, newInputValue) => {
-        setInputValue2(newInputValue);
-      },
-      noOptionsText: "Type Something...",
-      renderInput: (params) => /* @__PURE__ */ jsx6(
-        TextField3,
-        {
-          ...params,
-          label,
-          error: !!error,
-          helperText: error ? error.message : "",
-          placeholder,
-          slotProps: {
-            input: {
-              ...params.InputProps,
-              endAdornment: /* @__PURE__ */ jsxs2(Fragment, { children: [
-                loading ? /* @__PURE__ */ jsx6(CircularProgress, { color: "inherit", size: 20 }) : null,
-                params.InputProps.endAdornment
-              ] })
-            }
-          },
-          variant: variant ? variant : "outlined",
-          sx: {
-            "& .MuiInputBase-input": {
-              cursor: disabled ? "not-allowed" : "default"
-            },
-            bgcolor: disabled ? theme.palette.action.disabledBackground : "transparent",
-            ...sx
-          }
-        }
-      ),
-      renderOption: (renderProps, option) => {
-        const { key, ...optionProps } = renderProps;
-        return /* @__PURE__ */ jsx6("li", { ...optionProps, children: option.Label }, key);
-      }
-    }
-  );
-};
-var AsyncSelectElement2 = ({
-  gridProps = { size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 } },
-  ...props
-}) => {
-  if (gridProps) {
-    return /* @__PURE__ */ jsx6(
-      Grid26,
-      {
-        ...{ size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }, ...gridProps },
-        children: /* @__PURE__ */ jsx6(Component6, { ...props })
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx6(Component6, { ...props });
-};
-AsyncSelectElement2.displayName = "AsyncSelectElement";
-var AsyncSelectElement_default = AsyncSelectElement2;
-
-// src/wrappers3/AsyncMultiSelect/AsyncMultiSelect.tsx
-import _ from "lodash";
-import {
-  useState as useState3,
-  useRef as useRef2,
-  useMemo as useMemo2,
-  useEffect as useEffect3,
-  useCallback as useCallback3,
-  Fragment as Fragment2
-} from "react";
-import { debounce as debounce2 } from "lodash";
-import {
-  Autocomplete as Autocomplete2,
-  CircularProgress as CircularProgress2,
-  Grid2 as Grid27,
-  TextField as TextField4,
-  useTheme as useTheme5
-} from "@mui/material";
-import { useController as useController7 } from "react-hook-form";
-import match from "autosuggest-highlight/match";
-import parse from "autosuggest-highlight/parse";
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
-var Component7 = function AsyncSelectMultiElement(props) {
-  const {
-    name,
-    onBlur,
-    disabled,
-    control,
-    gridProps,
-    placeholder,
-    initialValues,
-    label,
-    queryFn,
-    variant,
-    sx,
-    ...rest
-  } = props;
-  const {
-    field,
-    fieldState: { error }
-  } = useController7({
-    name,
-    control
-  });
-  const theme = useTheme5();
-  const multiSelectRef = useRef2(null);
-  const [selectedOptions, setSelectedOptions] = useState3([]);
-  const [inputValue, setInputValue] = useState3("");
-  const [options, setOptions] = useState3([]);
-  const [loading, setLoading] = useState3(false);
-  const initialValuesLoaded = useRef2(
-    !(initialValues && initialValues.length > 0)
-  );
-  const inputValue2 = useMemo2(() => inputValue, [inputValue]);
-  const setInputValue2 = useCallback3(
-    (inputValue3) => setInputValue(inputValue3),
-    []
-  );
-  const fetchData = useMemo2(
-    () => debounce2(
-      (payload, callback) => {
-        queryFn(payload).then((c) => callback(c));
-      },
-      400
-    ),
-    []
-  );
-  const fillOptions = (results) => {
-    let newOptions = [];
-    if (selectedOptions) {
-      newOptions = [...selectedOptions];
-    }
-    if (results) {
-      const newlyAdded = _.differenceBy(
-        results,
-        selectedOptions,
-        (c) => c.Value
-      );
-      newOptions = [...newOptions, ...newlyAdded];
-    }
-    setOptions(newOptions);
-    setLoading(false);
-  };
-  useEffect3(() => {
-    if (initialValuesLoaded.current) return void 0;
-    let active = true;
-    const payload = {
-      query: null,
-      initialValues
-    };
-    setLoading(true);
-    fetchData(payload, (results) => {
-      if (active) {
-        setSelectedOptions([...results]);
-        field.onChange([...results.map((c) => c.Value)]);
-        initialValuesLoaded.current = true;
-        setLoading(false);
-      }
-    });
-    return () => {
-      active = false;
-    };
-  }, [initialValues]);
-  useEffect3(() => {
-    let active = true;
-    if (inputValue2 === "" || initialValuesLoaded.current === false) {
-      setOptions(selectedOptions ? [...selectedOptions] : []);
-      return void 0;
-    }
-    setLoading(true);
-    const payload = {
-      query: inputValue2,
-      initialValues: null
-    };
-    fetchData(payload, (results) => {
-      if (active) {
-        fillOptions(results);
-      }
-    });
-    return () => {
-      active = false;
-    };
-  }, [initialValues, inputValue2, fetchData]);
-  const handleChange = (_2, selectedOptions2, reason) => {
-    if (reason === "clear") {
-      setSelectedOptions([]);
-      field.onChange([]);
-    } else if (reason === "selectOption" || reason === "removeOption") {
-      setSelectedOptions(selectedOptions2);
-      field.onChange(selectedOptions2.map((c) => c.Value));
-    }
-    setOptions([]);
-  };
-  return /* @__PURE__ */ jsx7(
-    Autocomplete2,
-    {
-      ref: multiSelectRef,
-      multiple: true,
-      loading,
-      getOptionLabel: (option) => option.Label,
-      getOptionKey: (option) => option.Value,
-      isOptionEqualToValue: (option, val) => option.Value === val.Value,
-      options,
-      value: selectedOptions,
-      disabled,
-      filterSelectedOptions: true,
-      onChange: handleChange,
-      onInputChange: (_2, newInputValue) => {
-        setInputValue2(newInputValue);
-      },
-      renderInput: (params) => /* @__PURE__ */ jsx7(
-        TextField4,
-        {
-          ...params,
-          label,
-          error: !!error,
-          helperText: error ? error.message : "",
-          placeholder,
-          slotProps: {
-            input: {
-              ...params.InputProps,
-              endAdornment: /* @__PURE__ */ jsxs3(Fragment2, { children: [
-                loading ? /* @__PURE__ */ jsx7(CircularProgress2, { color: "inherit", size: 20 }) : null,
-                params.InputProps.endAdornment
-              ] })
-            }
-          },
-          variant: variant ? variant : "outlined",
-          sx: {
-            "& .MuiInputBase-input": {
-              cursor: disabled ? "not-allowed" : "default"
-            },
-            bgcolor: disabled ? theme.palette.action.disabledBackground : "transparent",
-            ...sx
-          }
-        }
-      ),
-      renderOption: (props2, option, { inputValue: inputValue3 }) => {
-        const { key, ...optionProps } = props2;
-        const matches = match(option.Label, inputValue3, { insideWords: true });
-        const parts = parse(option.Label, matches);
-        return /* @__PURE__ */ jsx7("li", { ...optionProps, children: /* @__PURE__ */ jsx7("div", { children: parts.map((part, index) => /* @__PURE__ */ jsx7(
-          "span",
-          {
-            style: {
-              fontWeight: part.highlight ? 700 : 400
-            },
-            children: part.text
-          },
-          index
-        )) }) }, key);
-      },
-      ...rest
-    }
-  );
-};
-var AsyncSelectMultiElement2 = ({
-  gridProps,
-  ...props
-}) => {
-  if (gridProps) {
-    return /* @__PURE__ */ jsx7(
-      Grid27,
-      {
-        ...{ size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }, ...gridProps },
-        children: /* @__PURE__ */ jsx7(Component7, { ...props })
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx7(Component7, { ...props });
-};
-AsyncSelectMultiElement2.displayName = "AsyncSelectMulti";
-var AsyncMultiSelect_default = AsyncSelectMultiElement2;
-
-// src/wrappers3/SelectElement/SelectElement.tsx
-import {
-  useMemo as useMemo3,
-  useEffect as useEffect4,
-  useCallback as useCallback4
-} from "react";
-import {
-  useController as useController8
-} from "react-hook-form";
-import { Grid2 as Grid28, useTheme as useTheme6, TextField as TextField5, Autocomplete as Autocomplete3 } from "@mui/material";
-import { jsx as jsx8 } from "react/jsx-runtime";
-var Component8 = function SelectElement(props) {
-  const {
-    name,
-    control,
-    onChange,
-    isEdit,
-    options,
-    label,
-    sx,
-    variant,
-    disabled,
-    initialValue,
-    labelKey = "Label",
-    valueKey = "Value",
-    placeholder,
-    textFieldProps = {},
-    ...rest
-  } = props;
-  const { required } = textFieldProps;
-  const {
-    field,
-    fieldState: { error }
-  } = useController8({
-    name,
-    control,
-    defaultValue: initialValue
-  });
-  const theme = useTheme6();
-  const getOptionValue = useCallback4(
-    (option) => {
-      if (typeof option === "string") return option;
-      return option ? option[valueKey] : null;
-    },
-    [valueKey]
-  );
-  const getOptionLabel = useCallback4(
-    (option) => {
-      if (typeof option === "string") return option;
-      return option ? String(option[labelKey]) : "";
-    },
-    [labelKey]
-  );
-  const handleChange = (event, newValue, reason) => {
-    const option = newValue;
-    field.onChange(option ? getOptionValue(option) : null);
-    onChange?.(event, newValue, reason);
-  };
-  useEffect4(() => {
-    if (!isEdit && options.length === 1 && (field.value == null || field.value === "")) {
-      const defaultOption = options[0];
-      field.onChange(getOptionValue(defaultOption));
-    }
-    if (isEdit) {
-      if (field.value == null || field.value === "") {
-        return;
-      }
-    }
-  }, [isEdit, options, field.value, getOptionValue, field.onChange]);
-  const autocompleteValue = useMemo3(() => {
-    if (!field.value) return null;
-    return options.find((option) => getOptionValue(option) === field.value) ?? null;
-  }, [field.value, options, getOptionValue]);
-  return /* @__PURE__ */ jsx8(
-    Autocomplete3,
-    {
-      ...rest,
-      filterSelectedOptions: false,
-      options,
-      value: autocompleteValue,
-      onChange: handleChange,
-      disabled,
-      getOptionLabel: (option) => getOptionLabel(option),
-      ref: field.ref,
-      isOptionEqualToValue: (option, value) => getOptionValue(option) === getOptionValue(value),
-      renderInput: (params) => /* @__PURE__ */ jsx8(
-        TextField5,
-        {
-          ...params,
-          fullWidth: true,
-          required,
-          error: !!error,
-          helperText: error ? error.message : "",
-          label,
-          placeholder,
-          variant: variant ? variant : "outlined",
-          sx: {
-            "& .MuiOutlinedInput-root": {
-              bgcolor: disabled ? theme.palette.action.disabledBackground : "transparent"
-            },
-            "& .MuiInputLabel-asterisk": { color: "red" },
-            "& .MuiInputBase-input": {
-              cursor: disabled ? "not-allowed" : "default"
-            },
-            ...sx
-          }
-        }
-      )
-    }
-  );
-};
-var SelectElement2 = ({
-  gridProps,
-  ...props
-}) => {
-  if (gridProps) {
-    return /* @__PURE__ */ jsx8(
-      Grid28,
-      {
-        ...{ size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }, ...gridProps },
-        children: /* @__PURE__ */ jsx8(Component8, { ...props })
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx8(Component8, { ...props });
-};
-SelectElement2.displayName = "SelectElement";
-var SelectElement_default = SelectElement2;
-
-// src/wrappers3/SelectMultiElement/SelectMultiElement.tsx
-import { Fragment as Fragment3 } from "react";
-import { useController as useController9 } from "react-hook-form";
-import Chip from "@mui/material/Chip";
-import CheckBoxIcon from "@mui/icons-material/CheckBox";
-import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
-import {
-  Grid2 as Grid29,
-  Checkbox,
-  TextField as TextField6,
-  Autocomplete as Autocomplete4,
-  CircularProgress as CircularProgress3
-} from "@mui/material";
-import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
-var Component9 = function SelectMultiElement(props) {
-  const {
-    name,
-    control,
-    onBlur,
-    disabled,
-    options,
-    loading = false,
-    placeholder,
-    label,
-    variant,
-    sx,
-    labelKey = "Label",
-    valueKey = "Value",
-    multiple = true,
-    ...rest
-  } = props;
-  const {
-    field,
-    fieldState: { error }
-  } = useController9({
-    name,
-    control
-  });
-  const getOptionValue = (option) => {
-    if (typeof option === "string") return option;
-    return option ? option[valueKey] : null;
-  };
-  const getOptionLabel = (option) => {
-    if (typeof option === "string") return option;
-    return option ? option[labelKey] : "";
-  };
-  const selectedValue = multiple ? Array.isArray(field.value) ? options.filter((option) => field.value.includes(getOptionValue(option))) : [] : options.find((option) => getOptionValue(option) === field.value) ?? null;
-  const handleChange = (_2, selected, reason) => {
-    if (multiple) {
-      if (reason === "clear") {
-        field.onChange([]);
-      } else {
-        const newValues = selected.map(
-          (option) => getOptionValue(option)
-        );
-        field.onChange(newValues);
-      }
-    } else {
-      field.onChange(selected ? getOptionValue(selected) : null);
-    }
-  };
-  const icon = /* @__PURE__ */ jsx9(CheckBoxOutlineBlankIcon, { fontSize: "small" });
-  const checkedIcon = /* @__PURE__ */ jsx9(CheckBoxIcon, { fontSize: "small" });
-  return /* @__PURE__ */ jsx9(
-    Autocomplete4,
-    {
-      multiple,
-      value: selectedValue,
-      loading,
-      options,
-      getOptionLabel: (option) => getOptionLabel(option),
-      isOptionEqualToValue: (option, value) => getOptionValue(option) === getOptionValue(value),
-      filterSelectedOptions: multiple,
-      disableCloseOnSelect: multiple,
-      ref: field.ref,
-      disabled: disabled ?? field.disabled,
-      onChange: handleChange,
-      onBlur: (event) => {
-        field.onBlur();
-        if (typeof onBlur === "function") {
-          onBlur(event);
-        }
-      },
-      fullWidth: true,
-      renderOption: (props1, option, { selected }) => multiple ? /* @__PURE__ */ jsxs4("li", { ...props1, children: [
-        /* @__PURE__ */ jsx9(
-          Checkbox,
-          {
-            icon,
-            checkedIcon,
-            checked: selected
-          }
-        ),
-        getOptionLabel(option)
-      ] }) : /* @__PURE__ */ jsx9("li", { ...props1, children: getOptionLabel(option) }),
-      renderTags: (tagValue, getTagProps) => tagValue.map((option, index) => /* @__PURE__ */ jsx9(
-        Chip,
-        {
-          ...getTagProps({ index }),
-          label: getOptionLabel(option),
-          size: "small",
-          variant: "filled"
-        }
-      )),
-      renderInput: (params) => /* @__PURE__ */ jsx9(
-        TextField6,
-        {
-          ...params,
-          label,
-          error: !!error,
-          helperText: error ? error.message : "",
-          placeholder,
-          slotProps: {
-            input: {
-              ...params.InputProps,
-              endAdornment: /* @__PURE__ */ jsxs4(Fragment3, { children: [
-                loading ? /* @__PURE__ */ jsx9(CircularProgress3, { color: "inherit", size: 20 }) : null,
-                params.InputProps.endAdornment
-              ] })
-            }
-          },
-          variant: variant ? variant : "outlined",
-          sx: {
-            ...sx
-          }
-        }
-      ),
-      ...rest
-    }
-  );
-};
-var SelectMultiElement2 = ({
-  gridProps = { size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 } },
-  ...props
-}) => {
-  if (gridProps) {
-    return /* @__PURE__ */ jsx9(
-      Grid29,
-      {
-        ...{ size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }, ...gridProps },
-        children: /* @__PURE__ */ jsx9(Component9, { ...props })
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx9(Component9, { ...props });
-};
-SelectMultiElement2.displayName = "SelectMultiElement";
-var SelectMultiElement_default = SelectMultiElement2;
-
-// src/wrappers3/SelectCascadeElement/SelectCascadeElement.tsx
-import { useRef as useRef3, useState as useState4, useEffect as useEffect5, useCallback as useCallback5 } from "react";
-import {
-  useController as useController10
-} from "react-hook-form";
-import {
-  Grid2 as Grid210,
-  useTheme as useTheme7,
-  TextField as TextField7,
-  Autocomplete as Autocomplete5
-} from "@mui/material";
-import { jsx as jsx10 } from "react/jsx-runtime";
-var Component10 = function SelectCascadeElement(props) {
-  const {
-    labelKey = "Label",
-    valueKey = "Value",
-    name,
-    onBlur,
-    onChange,
-    disabled,
-    options,
-    control,
-    loading = false,
-    placeholder,
-    label,
-    dependsOn,
-    initialValue,
-    textFieldProps = {},
-    variant,
-    sx,
-    isEdit = false,
-    ...rest
-  } = props;
-  const { required } = textFieldProps;
-  const getOptionKey = useCallback5(
-    (option) => {
-      if (typeof option === "string" || typeof option === "number")
-        return option;
-      const key = option ? option[valueKey] : void 0;
-      if (key === void 0 || key === null) {
-        return "";
-      }
-      if (typeof key === "string" || typeof key === "number") {
-        return key;
-      }
-      return String(key);
-    },
-    [valueKey]
-  );
-  const getOptionLabel = useCallback5(
-    (option) => {
-      if (typeof option === "string") return option;
-      return option ? String(option[labelKey]) : "";
-    },
-    [labelKey]
-  );
-  const isOptionEqualToValue = (option, value) => getOptionKey(option) === getOptionKey(value);
-  const {
-    field,
-    fieldState: { error }
-  } = useController10({
-    name,
-    control,
-    defaultValue: initialValue
-  });
-  const theme = useTheme7();
-  const { field: dependentField } = useController10({
-    name: dependsOn,
-    control
-  });
-  const parentValueRef = useRef3(dependentField.value ?? null);
-  const [hasAutoSelected, setHasAutoSelected] = useState4(false);
-  useEffect5(() => {
-    if (parentValueRef.current !== dependentField.value) {
-      parentValueRef.current = dependentField.value;
-      field.onChange(null);
-      setHasAutoSelected(false);
-    }
-  }, [dependentField.value, field]);
-  useEffect5(() => {
-    if (!dependentField.value) return;
-    if (isEdit) {
-      if (field.value) return;
-      if (options.length === 1 && !hasAutoSelected) {
-        field.onChange(getOptionKey(options[0]));
-        setHasAutoSelected(true);
-      }
-    } else {
-      if (options.length === 1 && !field.value && !hasAutoSelected) {
-        field.onChange(getOptionKey(options[0]));
-        setHasAutoSelected(true);
-      }
-    }
-  }, [
-    isEdit,
-    options,
-    field.value,
-    dependentField.value,
-    getOptionKey,
-    hasAutoSelected,
-    field
-  ]);
-  const autocompleteValue = options.find((opt) => getOptionKey(opt) === field.value) ?? null;
-  return /* @__PURE__ */ jsx10(
-    Autocomplete5,
-    {
-      ...rest,
-      value: autocompleteValue,
-      size: "small",
-      loading,
-      options,
-      getOptionLabel,
-      isOptionEqualToValue,
-      ref: field.ref,
-      disabled: !dependentField.value || disabled,
-      onChange: (event, newValue, reason) => {
-        field.onChange(newValue ? getOptionKey(newValue) : null);
-        if (onChange && typeof onChange === "function") {
-          onChange(event, newValue, reason);
-        }
-      },
-      onBlur: (event) => {
-        field.onBlur();
-        if (typeof onBlur === "function") {
-          onBlur(event);
-        }
-      },
-      renderInput: (params) => /* @__PURE__ */ jsx10(
-        TextField7,
-        {
-          ...params,
-          fullWidth: true,
-          error: !!error,
-          required,
-          helperText: error ? error.message : "",
-          placeholder,
-          label,
-          variant: variant ?? "outlined",
-          sx: {
-            "& .MuiOutlinedInput-root": {
-              bgcolor: disabled || !dependentField.value ? theme.palette.action.disabledBackground : "transparent"
-            },
-            "& .MuiInputLabel-asterisk": { color: "red" },
-            "& .MuiInputBase-input": {
-              cursor: disabled || !dependentField.value ? "not-allowed" : "default"
-            },
-            ...sx
-          }
-        }
-      )
-    }
-  );
-};
-var SelectCascadeElement2 = ({
-  gridProps = { size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 } },
-  ...props
-}) => {
-  if (gridProps) {
-    return /* @__PURE__ */ jsx10(
-      Grid210,
-      {
-        ...{ size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }, ...gridProps },
-        children: /* @__PURE__ */ jsx10(Component10, { ...props })
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx10(Component10, { ...props });
-};
-SelectCascadeElement2.displayName = "SelectCascadeElement";
-var SelectCascadeElement_default = SelectCascadeElement2;
-
-// src/wrappers3/CheckboxElement/CheckboxElement.tsx
-import {
-  Checkbox as Checkbox2,
-  FormControl as FormControl2,
-  FormControlLabel as FormControlLabel2,
-  FormGroup,
-  FormHelperText as FormHelperText2,
-  Grid2 as Grid211
-} from "@mui/material";
-import {
-  useController as useController11
-} from "react-hook-form";
-import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
-var Component11 = function CheckboxElement(props) {
-  const { name, control, label, labelProps, inputRef, ...rest } = props;
-  const {
-    field,
-    fieldState: { error }
-  } = useController11({
-    name,
-    control,
-    disabled: rest.disabled
-  });
-  return /* @__PURE__ */ jsxs5(FormControl2, { error: !!error, children: [
-    /* @__PURE__ */ jsx11(FormGroup, { row: true, children: /* @__PURE__ */ jsx11(
-      FormControlLabel2,
-      {
-        label: label || "",
-        ...labelProps,
-        control: /* @__PURE__ */ jsx11(
-          Checkbox2,
-          {
-            ...rest,
-            color: rest.color || "primary",
-            sx: [
-              ...Array.isArray(rest.sx) ? rest.sx : [rest.sx],
-              {
-                color: error ? "error.main" : void 0
-              }
-            ],
-            value: field.value,
-            checked: !!field.value,
-            onChange: (event, newValue) => {
-              field.onChange(event, newValue);
-              if (typeof rest.onChange === "function") {
-                rest.onChange(event, newValue);
-              }
-            }
-          }
-        )
-      }
-    ) }),
-    error && /* @__PURE__ */ jsx11(FormHelperText2, { error: !!error, children: error.message })
-  ] });
-};
-var CheckboxElement2 = ({
-  gridProps,
-  ...props
-}) => {
-  if (gridProps) {
-    return /* @__PURE__ */ jsx11(Grid211, { ...{ size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }, ...gridProps }, children: /* @__PURE__ */ jsx11(Component11, { ...props }) });
-  }
-  return /* @__PURE__ */ jsx11(Component11, { ...props });
-};
-CheckboxElement2.displayName = "CheckboxElement";
-var CheckboxElement_default = CheckboxElement2;
-
-// src/wrappers3/CheckboxGroup/CheckboxGroup.tsx
-import {
-  Checkbox as Checkbox3,
-  FormControl as FormControl3,
-  FormControlLabel as FormControlLabel3,
-  FormGroup as FormGroup2,
-  FormHelperText as FormHelperText3,
-  Grid2 as Grid212
-} from "@mui/material";
-import { useEffect as useEffect6, useState as useState5 } from "react";
-import {
-  useController as useController12
-} from "react-hook-form";
-import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
-var Component12 = function CheckboxGroup(props) {
-  const { name, control, label, labelProps, inputRef, options, ...rest } = props;
-  const {
-    field,
-    fieldState: { error }
-  } = useController12({
-    name,
-    control,
-    disabled: rest.disabled
-  });
-  const [selectedValues, setSelectedValues] = useState5(
-    options.filter((c) => field.value?.includes(c.Value)).map((c) => c.Value) || []
-  );
-  useEffect6(() => {
-    field.onChange(selectedValues ? [...selectedValues] : []);
-  }, [selectedValues]);
-  const handleChange = (event) => {
-    const value = parseInt(event.target.value, 10);
-    if (event.target.checked) {
-      setSelectedValues([...selectedValues, value]);
-    } else {
-      setSelectedValues(selectedValues.filter((item) => item !== value));
-    }
-  };
-  return /* @__PURE__ */ jsxs6(FormControl3, { error: !!error, children: [
-    /* @__PURE__ */ jsx12(FormGroup2, { row: true, children: options.map((option) => /* @__PURE__ */ jsx12(
-      FormControlLabel3,
-      {
-        label: option.Label,
-        ...labelProps,
-        control: /* @__PURE__ */ jsx12(
-          Checkbox3,
-          {
-            ...rest,
-            color: rest.color || "primary",
-            sx: [
-              ...Array.isArray(rest.sx) ? rest.sx : [rest.sx],
-              {
-                color: error ? "error.main" : void 0
-              }
-            ],
-            value: option.Value,
-            checked: selectedValues.includes(option.Value),
-            onChange: handleChange
-          }
-        )
-      },
-      `${option.Value}`
-    )) }),
-    error && /* @__PURE__ */ jsx12(FormHelperText3, { error: !!error, children: error.message })
-  ] });
-};
-var CheckboxGroup2 = ({
-  gridProps,
-  ...props
-}) => {
-  if (gridProps) {
-    return /* @__PURE__ */ jsx12(Grid212, { ...{ size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }, ...gridProps }, children: /* @__PURE__ */ jsx12(Component12, { ...props }) });
-  }
-  return /* @__PURE__ */ jsx12(Component12, { ...props });
-};
-CheckboxGroup2.displayName = "CheckboxGroup";
-var CheckboxGroup_default = CheckboxGroup2;
-
-// src/wrappers3/SelectMultiCascadeElement/SelectMultiCascadeElement.tsx
-import { useController as useController13 } from "react-hook-form";
-import { useRef as useRef4, Fragment as Fragment4, useState as useState6, useEffect as useEffect7, useCallback as useCallback6 } from "react";
-import CheckBoxIcon2 from "@mui/icons-material/CheckBox";
-import CheckBoxOutlineBlankIcon2 from "@mui/icons-material/CheckBoxOutlineBlank";
-import {
-  Chip as Chip2,
-  Grid2 as Grid213,
-  Checkbox as Checkbox4,
-  TextField as TextField8,
-  Autocomplete as Autocomplete6,
-  CircularProgress as CircularProgress4
-} from "@mui/material";
-import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
-var Component13 = function SelectMultiCascadeElement(props) {
-  const {
-    name,
-    control,
-    dependsOn,
-    onBlur,
-    disabled,
-    options,
-    loading = false,
-    placeholder,
-    label,
-    variant,
-    sx,
-    labelKey = "Label",
-    valueKey = "Value",
-    multiple = true,
-    isEdit = false,
-    initialValue,
-    ...rest
-  } = props;
-  const {
-    field,
-    fieldState: { error }
-  } = useController13({
-    name,
-    control,
-    defaultValue: initialValue
-  });
-  const { field: dependentField } = useController13({
-    name: dependsOn,
-    control
-  });
-  const parentValueRef = useRef4(dependentField.value ?? null);
-  const [hasAutoSelected, setHasAutoSelected] = useState6(false);
-  const getOptionValue = useCallback6(
-    (option) => {
-      if (typeof option === "string") return option;
-      return option ? option[valueKey] : null;
-    },
-    [valueKey]
-  );
-  const getOptionLabel = useCallback6(
-    (option) => {
-      if (typeof option === "string") return option;
-      return option ? option[labelKey] : "";
-    },
-    [labelKey]
-  );
-  useEffect7(() => {
-    if (parentValueRef.current !== dependentField.value) {
-      parentValueRef.current = dependentField.value;
-      field.onChange(multiple ? [] : null);
-      setHasAutoSelected(false);
-    }
-  }, [dependentField.value, field, multiple]);
-  useEffect7(() => {
-    if (!dependentField.value) return;
-    if (isEdit) {
-      if (field.value && (multiple ? field.value.length > 0 : field.value))
-        return;
-      if (options.length === 1 && !hasAutoSelected) {
-        field.onChange(
-          multiple ? [getOptionValue(options[0])] : getOptionValue(options[0])
-        );
-        setHasAutoSelected(true);
-      }
-    } else {
-      if (options.length === 1 && (!field.value || field.value.length === 0) && !hasAutoSelected) {
-        field.onChange(
-          multiple ? [getOptionValue(options[0])] : getOptionValue(options[0])
-        );
-        setHasAutoSelected(true);
-      }
-    }
-  }, [
-    isEdit,
-    options,
-    field.value,
-    dependentField.value,
-    multiple,
-    getOptionValue,
-    hasAutoSelected,
-    field
-  ]);
-  const selectedValue = multiple ? Array.isArray(field.value) ? options.filter((opt) => field.value.includes(getOptionValue(opt))) : [] : options.find((opt) => getOptionValue(opt) === field.value) ?? null;
-  const handleChange = (_2, selected, reason) => {
-    if (multiple) {
-      if (reason === "clear") {
-        field.onChange([]);
-      } else {
-        const newValues = selected.map((opt) => getOptionValue(opt));
-        field.onChange(newValues);
-      }
-    } else {
-      field.onChange(selected ? getOptionValue(selected) : null);
-    }
-  };
-  const icon = /* @__PURE__ */ jsx13(CheckBoxOutlineBlankIcon2, { fontSize: "small" });
-  const checkedIcon = /* @__PURE__ */ jsx13(CheckBoxIcon2, { fontSize: "small" });
-  return /* @__PURE__ */ jsx13(
-    Autocomplete6,
-    {
-      multiple,
-      value: selectedValue,
-      loading,
-      options,
-      getOptionLabel,
-      isOptionEqualToValue: (option, value) => getOptionValue(option) === getOptionValue(value),
-      filterSelectedOptions: multiple,
-      disableCloseOnSelect: multiple,
-      ref: field.ref,
-      disabled: !dependentField.value || disabled,
-      onChange: handleChange,
-      onBlur: (event) => {
-        field.onBlur();
-        if (typeof onBlur === "function") {
-          onBlur(event);
-        }
-      },
-      fullWidth: true,
-      renderOption: (props1, option, { selected }) => multiple ? /* @__PURE__ */ jsxs7("li", { ...props1, children: [
-        /* @__PURE__ */ jsx13(
-          Checkbox4,
-          {
-            icon,
-            checkedIcon,
-            checked: selected
-          }
-        ),
-        getOptionLabel(option)
-      ] }) : /* @__PURE__ */ jsx13("li", { ...props1, children: getOptionLabel(option) }),
-      renderTags: (tagValue, getTagProps) => tagValue.map((option, index) => /* @__PURE__ */ jsx13(
-        Chip2,
-        {
-          ...getTagProps({ index }),
-          label: getOptionLabel(option),
-          size: "small",
-          variant: "filled"
-        }
-      )),
-      renderInput: (params) => /* @__PURE__ */ jsx13(
-        TextField8,
-        {
-          ...params,
-          label,
-          error: !!error,
-          helperText: error ? error.message : "",
-          placeholder,
-          slotProps: {
-            input: {
-              ...params.InputProps,
-              endAdornment: /* @__PURE__ */ jsxs7(Fragment4, { children: [
-                loading ? /* @__PURE__ */ jsx13(CircularProgress4, { color: "inherit", size: 20 }) : null,
-                params.InputProps.endAdornment
-              ] })
-            }
-          },
-          variant: variant ? variant : "outlined",
-          sx: {
-            ...sx
-          }
-        }
-      ),
-      ...rest
-    }
-  );
-};
-var SelectMultiCascadeElement2 = ({
-  gridProps = { size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 } },
-  ...props
-}) => {
-  if (gridProps) {
-    return /* @__PURE__ */ jsx13(
-      Grid213,
-      {
-        ...{ size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }, ...gridProps },
-        children: /* @__PURE__ */ jsx13(Component13, { ...props })
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx13(Component13, { ...props });
-};
-SelectMultiCascadeElement2.displayName = "SelectMultiCascadeElement";
-var SelectMultiCascadeElement_default = SelectMultiCascadeElement2;
-
-// src/wrappers3/Field/index.ts
-var Field3 = {
-  Text: TextFieldElement_default,
-  Checkbox: CheckboxElement_default,
-  Date: DatePickerElement_default,
-  RadioGroup: RadioButtonGroup_default,
-  Password: PasswordElement_default,
-  Time: TimePickerElement_default,
-  Select: SelectElement_default,
-  SelectMulti: SelectMultiElement_default,
-  SelectCascade: SelectCascadeElement_default,
-  AsyncSelect: AsyncSelectElement_default,
-  AsyncMultiSelect: AsyncMultiSelect_default,
-  CheckboxGroup: CheckboxGroup_default,
-  SelectMultiCascadeElement: SelectMultiCascadeElement_default
-};
-var Field_default3 = Field3;
 export {
   AuthorizedView_default as AuthorizedView,
   CancelButton_default as CancelButton,