@gnwebsoft/ui 2.18.47 → 2.18.48

package/dist/index.mjs

@@ -11,10 +11,10 @@ import {
   SimpleToolbar_default
 } from "./chunk-FSU3H777.mjs";
 import "./chunk-2JFL7TS5.mjs";
+import "./chunk-EVPUCTZA.mjs";
 import {
   Field_default
 } from "./chunk-7HVI5RBL.mjs";
-import "./chunk-EVPUCTZA.mjs";
 import {
   Field_default as Field_default2
 } from "./chunk-5HOGPCEO.mjs";
@@ -32,12 +32,1893 @@ 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,
   ClearButton_default as ClearButton,
   Field_default as Field,
   Field_default2 as Field2,
+  Field_default3 as Field3,
   FilterButton_default as FilterButton,
   FilterWrapper_default as FilterWrapper,
   FormWrapper_default as FormWrapper,