@gnwebsoft/ui 2.18.48 → 2.18.49

package/dist/chunk-TFNX5LRO.js

@@ -0,0 +1,1890 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _chunk6JZ35VQJjs = require('./chunk-6JZ35VQJ.js');
+
+
+var _chunkI7EIUZKKjs = require('./chunk-I7EIUZKK.js');
+
+// src/wrappers3/DatePickerElement/DatePickerElement.tsx
+var _react = require('react'); var React = _interopRequireWildcard(_react);
+var _reacthookform = require('react-hook-form');
+var _xdatepickers = require('@mui/x-date-pickers');
+var _material = require('@mui/material');
+var _internals = require('@mui/x-date-pickers/internals');
+var _jsxruntime = require('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 _optionalChain([options, 'access', _3 => _3.transform, 'optionalAccess', _4 => _4.input]) === "function" ? options.transform.input(options.value) : options.value;
+  const onChange = _react.useCallback.call(void 0, 
+    (...event) => {
+      if (typeof _optionalChain([options, 'access', _5 => _5.transform, 'optionalAccess', _6 => _6.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 = _internals.useLocalizationContext.call(void 0, );
+  const theme = _material.useTheme.call(void 0, );
+  const { disabled, inputRef, onClose, ...restDatePickerProps } = datePickerProps;
+  const {
+    field,
+    fieldState: { error }
+  } = _reacthookform.useController.call(void 0, {
+    name,
+    control,
+    defaultValue: null
+  });
+  const { value, onChange } = useTransform2({
+    value: field.value,
+    onChange: field.onChange,
+    transform: {
+      input: typeof _optionalChain([transform, 'optionalAccess', _7 => _7.input]) === "function" ? transform.input : (newValue) => readValueAsDate2(adapter, newValue),
+      output: (outputValue, context) => {
+        if (outputValue === null) return null;
+        return outputValue;
+      }
+    }
+  });
+  const handleInputRef = _material.useForkRef.call(void 0, field.ref, inputRef);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _xdatepickers.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 _optionalChain([inputProps, 'optionalAccess', _8 => _8.onBlur]) === "function") {
+              inputProps.onBlur(event);
+            }
+          },
+          error: !!error,
+          helperText: error ? error.message : _optionalChain([inputProps, 'optionalAccess', _9 => _9.helperText]) || rest.helperText,
+          inputProps: {
+            readOnly: !!textReadOnly,
+            ..._optionalChain([inputProps, 'optionalAccess', _10 => _10.inputProps])
+          }
+        }
+      }
+    }
+  );
+};
+var DatePickerElement2 = ({
+  gridProps = { size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 } },
+  ...props
+}) => {
+  if (gridProps) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _material.Grid2,
+      {
+        ...{ size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }, ...gridProps },
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component, { ...props })
+      }
+    );
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component, { ...props });
+};
+DatePickerElement2.displayName = "DatePickerElement";
+var DatePickerElement_default = DatePickerElement2;
+
+// src/wrappers3/PasswordElement/PasswordElement.tsx
+
+
+
+
+
+
+
+
+var _Visibility = require('@mui/icons-material/Visibility'); var _Visibility2 = _interopRequireDefault(_Visibility);
+var _VisibilityOff = require('@mui/icons-material/VisibilityOff'); var _VisibilityOff2 = _interopRequireDefault(_VisibilityOff);
+
+
+
+
+var Component2 = function PasswordEl(props) {
+  const {
+    type,
+    required,
+    iconColor,
+    renderIcon = (password2) => password2 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Visibility2.default, {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _VisibilityOff2.default, {}),
+    slotProps,
+    name,
+    control,
+    component: TextFieldComponent = _material.TextField,
+    inputRef,
+    onBlur,
+    ...rest
+  } = props;
+  const [password, setPassword] = _react.useState.call(void 0, true);
+  const endAdornment = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.InputAdornment, { position: "end", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _material.IconButton,
+    {
+      onMouseDown: (e) => e.preventDefault(),
+      onClick: () => setPassword(!password),
+      tabIndex: -1,
+      color: _nullishCoalesce(iconColor, () => ( "default")),
+      children: renderIcon(password)
+    }
+  ) });
+  const {
+    field,
+    fieldState: { error }
+  } = _reacthookform.useController.call(void 0, {
+    name,
+    control
+  });
+  const handleInputRef = _material.useForkRef.call(void 0, field.ref, inputRef);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _material.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,
+            ..._optionalChain([slotProps, 'optionalAccess', _11 => _11.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__ */ _jsxruntime.jsx.call(void 0, 
+      _material.Grid2,
+      {
+        ...{ size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }, ...gridProps },
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component2, { ...props })
+      }
+    );
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component2, { ...props });
+};
+PasswordElement.displayName = "PasswordElement";
+var PasswordElement_default = PasswordElement;
+
+// src/wrappers3/RadioButtonGroup/RadioButtonGroup.tsx
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+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 = _material.useTheme.call(void 0, );
+  const {
+    field,
+    fieldState: { error }
+  } = _reacthookform.useController.call(void 0, {
+    name,
+    disabled,
+    control
+  });
+  const { value, onChange } = _chunk6JZ35VQJjs.useTransform.call(void 0, {
+    value: field.value,
+    onChange: field.onChange,
+    transform: {
+      input: typeof _optionalChain([transform, 'optionalAccess', _12 => _12.input]) === "function" ? transform.input : (value2) => {
+        return value2 || "";
+      },
+      output: typeof _optionalChain([transform, 'optionalAccess', _13 => _13.output]) === "function" ? _optionalChain([transform, 'optionalAccess', _14 => _14.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__ */ _jsxruntime.jsxs.call(void 0, _material.FormControl, { error: !!error, children: [
+    label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.FormLabel, { ...formLabelProps, required, error: !!error, children: label }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.RadioGroup, { onChange: onRadioChange, name, row, value, children: [
+      emptyOptionLabel && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _material.FormControlLabel,
+        {
+          ...labelProps,
+          control: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _material.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 ? _optionalChain([value, 'optionalAccess', _15 => _15[valueKey]]) : value;
+        if (type === "number") {
+          val = Number(val);
+        }
+        const isChecked = val === optionKey;
+        return /* @__PURE__ */ _react.createElement.call(void 0, 
+          _material.FormControlLabel,
+          {
+            ...labelProps,
+            control: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _material.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__ */ _jsxruntime.jsx.call(void 0, _material.FormHelperText, { children: error.message })
+  ] });
+};
+var RadioButtonGroup2 = ({
+  gridProps = { size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 } },
+  ...props
+}) => {
+  if (gridProps) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _material.Grid2,
+      {
+        ...{ size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }, ...gridProps },
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component3, { ...props })
+      }
+    );
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component3, { ...props });
+};
+RadioButtonGroup2.displayName = "RadioButtonGroup";
+var RadioButtonGroup_default = RadioButtonGroup2;
+
+// src/wrappers3/TextFieldElement/TextFieldElement.tsx
+
+
+
+
+
+
+
+
+
+
+var Component4 = function TextFieldElement(props) {
+  const {
+    rules = {},
+    parseError,
+    name,
+    control,
+    component: TextFieldComponent = _material.TextField,
+    gridProps,
+    transform,
+    label,
+    placeholder,
+    textFieldProps = {},
+    variant,
+    sx,
+    ...rest
+  } = props;
+  const {
+    type,
+    required,
+    helperText,
+    inputRef,
+    onBlur,
+    disabled,
+    ...restTextProps
+  } = textFieldProps;
+  const {
+    field,
+    fieldState: { error }
+  } = _reacthookform.useController.call(void 0, {
+    name,
+    control
+  });
+  const theme = _material.useTheme.call(void 0, );
+  const { value, onChange } = _chunk6JZ35VQJjs.useTransform.call(void 0, {
+    value: field.value,
+    onChange: field.onChange,
+    transform: {
+      input: typeof _optionalChain([transform, 'optionalAccess', _16 => _16.input]) === "function" ? transform.input : (value2) => {
+        return _nullishCoalesce(value2, () => ( ""));
+      },
+      output: typeof _optionalChain([transform, 'optionalAccess', _17 => _17.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 = _material.useForkRef.call(void 0, field.ref, inputRef);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    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__ */ _jsxruntime.jsx.call(void 0, 
+      _material.Grid2,
+      {
+        ...{ size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }, ...gridProps },
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component4, { ...props })
+      }
+    );
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component4, { ...props });
+};
+TextFieldElement2.displayName = "TextFieldElement";
+var TextFieldElement_default = TextFieldElement2;
+
+// src/wrappers3/TimePickerElement/TimePickerElement.tsx
+
+
+
+
+
+
+
+
+
+var Component5 = function TimePickerElement(props) {
+  const {
+    parseError,
+    name,
+    required,
+    rules = {},
+    inputProps,
+    control,
+    textReadOnly,
+    slotProps,
+    inputRef,
+    transform,
+    ...rest
+  } = props;
+  const adapter = _internals.useLocalizationContext.call(void 0, );
+  const {
+    field,
+    fieldState: { error }
+  } = _reacthookform.useController.call(void 0, {
+    name,
+    control,
+    disabled: rest.disabled,
+    defaultValue: null
+  });
+  const { value, onChange } = _chunk6JZ35VQJjs.useTransform.call(void 0, {
+    value: field.value,
+    onChange: field.onChange,
+    transform: {
+      input: typeof _optionalChain([transform, 'optionalAccess', _18 => _18.input]) === "function" ? transform.input : (newValue) => _chunkI7EIUZKKjs.readValueAsDate.call(void 0, adapter, newValue),
+      output: typeof _optionalChain([transform, 'optionalAccess', _19 => _19.output]) === "function" ? transform.output : (newValue) => newValue
+    }
+  });
+  const handleInputRef = _material.useForkRef.call(void 0, field.ref, inputRef);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _xdatepickers.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 : _optionalChain([inputProps, 'optionalAccess', _20 => _20.helperText]) || rest.helperText,
+          inputProps: {
+            readOnly: textReadOnly,
+            ..._optionalChain([inputProps, 'optionalAccess', _21 => _21.inputProps])
+          }
+        }
+      }
+    }
+  );
+};
+var TimePickerElement2 = ({
+  gridProps = { size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 } },
+  ...props
+}) => {
+  if (gridProps) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _material.Grid2,
+      {
+        ...{ size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }, ...gridProps },
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component5, { ...props })
+      }
+    );
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component5, { ...props });
+};
+TimePickerElement2.displayName = "TimePickerElement";
+var TimePickerElement_default = TimePickerElement2;
+
+// src/wrappers3/AsyncSelect/AsyncSelectElement.tsx
+
+
+
+
+
+
+
+
+
+
+var _utils = require('@mui/material/utils');
+var _TextField = require('@mui/material/TextField'); var _TextField2 = _interopRequireDefault(_TextField);
+var _Autocomplete = require('@mui/material/Autocomplete'); var _Autocomplete2 = _interopRequireDefault(_Autocomplete);
+
+
+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 }
+  } = _reacthookform.useController.call(void 0, {
+    name,
+    control
+  });
+  const theme = _material.useTheme.call(void 0, );
+  const [loading, setLoading] = _react.useState.call(void 0, false);
+  const [selectedOption, setSelectedOption] = _react.useState.call(void 0, null);
+  const [inputValue, setInputValue] = _react.useState.call(void 0, "");
+  const inputValue2 = _react.useMemo.call(void 0, () => inputValue, [inputValue]);
+  const setInputValue2 = _react.useCallback.call(void 0, 
+    (newValue) => setInputValue(newValue),
+    []
+  );
+  const [options, setOptions] = _react.useState.call(void 0, []);
+  const initialValueLoaded = _react.useRef.call(void 0, 
+    !initialValue ? true : !(initialValue != null)
+  );
+  const fieldValue = _react.useRef.call(void 0, field.value);
+  const fetchData = _react.useMemo.call(void 0, 
+    () => _utils.debounce.call(void 0, 
+      (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);
+  };
+  _react.useEffect.call(void 0, () => {
+    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(_optionalChain([results, 'optionalAccess', _22 => _22.filter, 'call', _23 => _23((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 = _react.useRef.call(void 0, 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);
+  };
+  _react.useEffect.call(void 0, () => {
+    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__ */ _jsxruntime.jsx.call(void 0, 
+    _Autocomplete2.default,
+    {
+      ...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__ */ _jsxruntime.jsx.call(void 0, 
+        _TextField2.default,
+        {
+          ...params,
+          label,
+          error: !!error,
+          helperText: error ? error.message : "",
+          placeholder,
+          slotProps: {
+            input: {
+              ...params.InputProps,
+              endAdornment: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react.Fragment, { children: [
+                loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.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__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, 
+      _material.Grid2,
+      {
+        ...{ size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }, ...gridProps },
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component6, { ...props })
+      }
+    );
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component6, { ...props });
+};
+AsyncSelectElement2.displayName = "AsyncSelectElement";
+var AsyncSelectElement_default = AsyncSelectElement2;
+
+// src/wrappers3/AsyncMultiSelect/AsyncMultiSelect.tsx
+var _lodash = require('lodash'); var _lodash2 = _interopRequireDefault(_lodash);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _match = require('autosuggest-highlight/match'); var _match2 = _interopRequireDefault(_match);
+var _parse = require('autosuggest-highlight/parse'); var _parse2 = _interopRequireDefault(_parse);
+
+var Component7 = function AsyncSelectMultiElement(props) {
+  const {
+    name,
+    onBlur,
+    disabled,
+    control,
+    gridProps,
+    placeholder,
+    initialValues,
+    label,
+    queryFn,
+    variant,
+    sx,
+    ...rest
+  } = props;
+  const {
+    field,
+    fieldState: { error }
+  } = _reacthookform.useController.call(void 0, {
+    name,
+    control
+  });
+  const theme = _material.useTheme.call(void 0, );
+  const multiSelectRef = _react.useRef.call(void 0, null);
+  const [selectedOptions, setSelectedOptions] = _react.useState.call(void 0, []);
+  const [inputValue, setInputValue] = _react.useState.call(void 0, "");
+  const [options, setOptions] = _react.useState.call(void 0, []);
+  const [loading, setLoading] = _react.useState.call(void 0, false);
+  const initialValuesLoaded = _react.useRef.call(void 0, 
+    !(initialValues && initialValues.length > 0)
+  );
+  const inputValue2 = _react.useMemo.call(void 0, () => inputValue, [inputValue]);
+  const setInputValue2 = _react.useCallback.call(void 0, 
+    (inputValue3) => setInputValue(inputValue3),
+    []
+  );
+  const fetchData = _react.useMemo.call(void 0, 
+    () => _lodash.debounce.call(void 0, 
+      (payload, callback) => {
+        queryFn(payload).then((c) => callback(c));
+      },
+      400
+    ),
+    []
+  );
+  const fillOptions = (results) => {
+    let newOptions = [];
+    if (selectedOptions) {
+      newOptions = [...selectedOptions];
+    }
+    if (results) {
+      const newlyAdded = _lodash2.default.differenceBy(
+        results,
+        selectedOptions,
+        (c) => c.Value
+      );
+      newOptions = [...newOptions, ...newlyAdded];
+    }
+    setOptions(newOptions);
+    setLoading(false);
+  };
+  _react.useEffect.call(void 0, () => {
+    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]);
+  _react.useEffect.call(void 0, () => {
+    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__ */ _jsxruntime.jsx.call(void 0, 
+    _material.Autocomplete,
+    {
+      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__ */ _jsxruntime.jsx.call(void 0, 
+        _material.TextField,
+        {
+          ...params,
+          label,
+          error: !!error,
+          helperText: error ? error.message : "",
+          placeholder,
+          slotProps: {
+            input: {
+              ...params.InputProps,
+              endAdornment: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react.Fragment, { children: [
+                loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.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: (props2, option, { inputValue: inputValue3 }) => {
+        const { key, ...optionProps } = props2;
+        const matches = _match2.default.call(void 0, option.Label, inputValue3, { insideWords: true });
+        const parts = _parse2.default.call(void 0, option.Label, matches);
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { ...optionProps, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: parts.map((part, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "span",
+          {
+            style: {
+              fontWeight: part.highlight ? 700 : 400
+            },
+            children: part.text
+          },
+          index
+        )) }) }, key);
+      },
+      ...rest
+    }
+  );
+};
+var AsyncSelectMultiElement2 = ({
+  gridProps,
+  ...props
+}) => {
+  if (gridProps) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _material.Grid2,
+      {
+        ...{ size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }, ...gridProps },
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component7, { ...props })
+      }
+    );
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component7, { ...props });
+};
+AsyncSelectMultiElement2.displayName = "AsyncSelectMulti";
+var AsyncMultiSelect_default = AsyncSelectMultiElement2;
+
+// src/wrappers3/SelectElement/SelectElement.tsx
+
+
+
+
+
+
+
+
+
+
+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 }
+  } = _reacthookform.useController.call(void 0, {
+    name,
+    control,
+    defaultValue: initialValue
+  });
+  const theme = _material.useTheme.call(void 0, );
+  const getOptionValue = _react.useCallback.call(void 0, 
+    (option) => {
+      if (typeof option === "string") return option;
+      return option ? option[valueKey] : null;
+    },
+    [valueKey]
+  );
+  const getOptionLabel = _react.useCallback.call(void 0, 
+    (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);
+    _optionalChain([onChange, 'optionalCall', _24 => _24(event, newValue, reason)]);
+  };
+  _react.useEffect.call(void 0, () => {
+    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 = _react.useMemo.call(void 0, () => {
+    if (!field.value) return null;
+    return _nullishCoalesce(options.find((option) => getOptionValue(option) === field.value), () => ( null));
+  }, [field.value, options, getOptionValue]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _material.Autocomplete,
+    {
+      ...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__ */ _jsxruntime.jsx.call(void 0, 
+        _material.TextField,
+        {
+          ...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__ */ _jsxruntime.jsx.call(void 0, 
+      _material.Grid2,
+      {
+        ...{ size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }, ...gridProps },
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component8, { ...props })
+      }
+    );
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component8, { ...props });
+};
+SelectElement2.displayName = "SelectElement";
+var SelectElement_default = SelectElement2;
+
+// src/wrappers3/SelectMultiElement/SelectMultiElement.tsx
+
+
+var _Chip = require('@mui/material/Chip'); var _Chip2 = _interopRequireDefault(_Chip);
+var _CheckBox = require('@mui/icons-material/CheckBox'); var _CheckBox2 = _interopRequireDefault(_CheckBox);
+var _CheckBoxOutlineBlank = require('@mui/icons-material/CheckBoxOutlineBlank'); var _CheckBoxOutlineBlank2 = _interopRequireDefault(_CheckBoxOutlineBlank);
+
+
+
+
+
+
+
+
+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 }
+  } = _reacthookform.useController.call(void 0, {
+    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))) : [] : _nullishCoalesce(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__ */ _jsxruntime.jsx.call(void 0, _CheckBoxOutlineBlank2.default, { fontSize: "small" });
+  const checkedIcon = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CheckBox2.default, { fontSize: "small" });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _material.Autocomplete,
+    {
+      multiple,
+      value: selectedValue,
+      loading,
+      options,
+      getOptionLabel: (option) => getOptionLabel(option),
+      isOptionEqualToValue: (option, value) => getOptionValue(option) === getOptionValue(value),
+      filterSelectedOptions: multiple,
+      disableCloseOnSelect: multiple,
+      ref: field.ref,
+      disabled: _nullishCoalesce(disabled, () => ( field.disabled)),
+      onChange: handleChange,
+      onBlur: (event) => {
+        field.onBlur();
+        if (typeof onBlur === "function") {
+          onBlur(event);
+        }
+      },
+      fullWidth: true,
+      renderOption: (props1, option, { selected }) => multiple ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "li", { ...props1, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _material.Checkbox,
+          {
+            icon,
+            checkedIcon,
+            checked: selected
+          }
+        ),
+        getOptionLabel(option)
+      ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { ...props1, children: getOptionLabel(option) }),
+      renderTags: (tagValue, getTagProps) => tagValue.map((option, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _Chip2.default,
+        {
+          ...getTagProps({ index }),
+          label: getOptionLabel(option),
+          size: "small",
+          variant: "filled"
+        }
+      )),
+      renderInput: (params) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _material.TextField,
+        {
+          ...params,
+          label,
+          error: !!error,
+          helperText: error ? error.message : "",
+          placeholder,
+          slotProps: {
+            input: {
+              ...params.InputProps,
+              endAdornment: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react.Fragment, { children: [
+                loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.CircularProgress, { 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__ */ _jsxruntime.jsx.call(void 0, 
+      _material.Grid2,
+      {
+        ...{ size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }, ...gridProps },
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component9, { ...props })
+      }
+    );
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component9, { ...props });
+};
+SelectMultiElement2.displayName = "SelectMultiElement";
+var SelectMultiElement_default = SelectMultiElement2;
+
+// src/wrappers3/SelectCascadeElement/SelectCascadeElement.tsx
+
+
+
+
+
+
+
+
+
+
+
+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 = _react.useCallback.call(void 0, 
+    (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 = _react.useCallback.call(void 0, 
+    (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 }
+  } = _reacthookform.useController.call(void 0, {
+    name,
+    control,
+    defaultValue: initialValue
+  });
+  const theme = _material.useTheme.call(void 0, );
+  const { field: dependentField } = _reacthookform.useController.call(void 0, {
+    name: dependsOn,
+    control
+  });
+  const parentValueRef = _react.useRef.call(void 0, _nullishCoalesce(dependentField.value, () => ( null)));
+  const [hasAutoSelected, setHasAutoSelected] = _react.useState.call(void 0, false);
+  _react.useEffect.call(void 0, () => {
+    if (parentValueRef.current !== dependentField.value) {
+      parentValueRef.current = dependentField.value;
+      field.onChange(null);
+      setHasAutoSelected(false);
+    }
+  }, [dependentField.value, field]);
+  _react.useEffect.call(void 0, () => {
+    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 = _nullishCoalesce(options.find((opt) => getOptionKey(opt) === field.value), () => ( null));
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _material.Autocomplete,
+    {
+      ...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__ */ _jsxruntime.jsx.call(void 0, 
+        _material.TextField,
+        {
+          ...params,
+          fullWidth: true,
+          error: !!error,
+          required,
+          helperText: error ? error.message : "",
+          placeholder,
+          label,
+          variant: _nullishCoalesce(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__ */ _jsxruntime.jsx.call(void 0, 
+      _material.Grid2,
+      {
+        ...{ size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }, ...gridProps },
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component10, { ...props })
+      }
+    );
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component10, { ...props });
+};
+SelectCascadeElement2.displayName = "SelectCascadeElement";
+var SelectCascadeElement_default = SelectCascadeElement2;
+
+// src/wrappers3/CheckboxElement/CheckboxElement.tsx
+
+
+
+
+
+
+
+
+
+
+
+
+var Component11 = function CheckboxElement(props) {
+  const { name, control, label, labelProps, inputRef, ...rest } = props;
+  const {
+    field,
+    fieldState: { error }
+  } = _reacthookform.useController.call(void 0, {
+    name,
+    control,
+    disabled: rest.disabled
+  });
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.FormControl, { error: !!error, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.FormGroup, { row: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _material.FormControlLabel,
+      {
+        label: label || "",
+        ...labelProps,
+        control: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _material.Checkbox,
+          {
+            ...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__ */ _jsxruntime.jsx.call(void 0, _material.FormHelperText, { error: !!error, children: error.message })
+  ] });
+};
+var CheckboxElement2 = ({
+  gridProps,
+  ...props
+}) => {
+  if (gridProps) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Grid2, { ...{ size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }, ...gridProps }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component11, { ...props }) });
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component11, { ...props });
+};
+CheckboxElement2.displayName = "CheckboxElement";
+var CheckboxElement_default = CheckboxElement2;
+
+// src/wrappers3/CheckboxGroup/CheckboxGroup.tsx
+
+
+
+
+
+
+
+
+
+
+
+
+
+var Component12 = function CheckboxGroup(props) {
+  const { name, control, label, labelProps, inputRef, options, ...rest } = props;
+  const {
+    field,
+    fieldState: { error }
+  } = _reacthookform.useController.call(void 0, {
+    name,
+    control,
+    disabled: rest.disabled
+  });
+  const [selectedValues, setSelectedValues] = _react.useState.call(void 0, 
+    options.filter((c) => _optionalChain([field, 'access', _25 => _25.value, 'optionalAccess', _26 => _26.includes, 'call', _27 => _27(c.Value)])).map((c) => c.Value) || []
+  );
+  _react.useEffect.call(void 0, () => {
+    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__ */ _jsxruntime.jsxs.call(void 0, _material.FormControl, { error: !!error, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.FormGroup, { row: true, children: options.map((option) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _material.FormControlLabel,
+      {
+        label: option.Label,
+        ...labelProps,
+        control: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _material.Checkbox,
+          {
+            ...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__ */ _jsxruntime.jsx.call(void 0, _material.FormHelperText, { error: !!error, children: error.message })
+  ] });
+};
+var CheckboxGroup2 = ({
+  gridProps,
+  ...props
+}) => {
+  if (gridProps) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Grid2, { ...{ size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }, ...gridProps }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component12, { ...props }) });
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component12, { ...props });
+};
+CheckboxGroup2.displayName = "CheckboxGroup";
+var CheckboxGroup_default = CheckboxGroup2;
+
+// src/wrappers3/SelectMultiCascadeElement/SelectMultiCascadeElement.tsx
+
+
+
+
+
+
+
+
+
+
+
+
+
+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 }
+  } = _reacthookform.useController.call(void 0, {
+    name,
+    control,
+    defaultValue: initialValue
+  });
+  const { field: dependentField } = _reacthookform.useController.call(void 0, {
+    name: dependsOn,
+    control
+  });
+  const parentValueRef = _react.useRef.call(void 0, _nullishCoalesce(dependentField.value, () => ( null)));
+  const [hasAutoSelected, setHasAutoSelected] = _react.useState.call(void 0, false);
+  const getOptionValue = _react.useCallback.call(void 0, 
+    (option) => {
+      if (typeof option === "string") return option;
+      return option ? option[valueKey] : null;
+    },
+    [valueKey]
+  );
+  const getOptionLabel = _react.useCallback.call(void 0, 
+    (option) => {
+      if (typeof option === "string") return option;
+      return option ? option[labelKey] : "";
+    },
+    [labelKey]
+  );
+  _react.useEffect.call(void 0, () => {
+    if (parentValueRef.current !== dependentField.value) {
+      parentValueRef.current = dependentField.value;
+      field.onChange(multiple ? [] : null);
+      setHasAutoSelected(false);
+    }
+  }, [dependentField.value, field, multiple]);
+  _react.useEffect.call(void 0, () => {
+    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))) : [] : _nullishCoalesce(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__ */ _jsxruntime.jsx.call(void 0, _CheckBoxOutlineBlank2.default, { fontSize: "small" });
+  const checkedIcon = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CheckBox2.default, { fontSize: "small" });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _material.Autocomplete,
+    {
+      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__ */ _jsxruntime.jsxs.call(void 0, "li", { ...props1, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _material.Checkbox,
+          {
+            icon,
+            checkedIcon,
+            checked: selected
+          }
+        ),
+        getOptionLabel(option)
+      ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { ...props1, children: getOptionLabel(option) }),
+      renderTags: (tagValue, getTagProps) => tagValue.map((option, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _material.Chip,
+        {
+          ...getTagProps({ index }),
+          label: getOptionLabel(option),
+          size: "small",
+          variant: "filled"
+        }
+      )),
+      renderInput: (params) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _material.TextField,
+        {
+          ...params,
+          label,
+          error: !!error,
+          helperText: error ? error.message : "",
+          placeholder,
+          slotProps: {
+            input: {
+              ...params.InputProps,
+              endAdornment: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react.Fragment, { children: [
+                loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.CircularProgress, { 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__ */ _jsxruntime.jsx.call(void 0, 
+      _material.Grid2,
+      {
+        ...{ size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }, ...gridProps },
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component13, { ...props })
+      }
+    );
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 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_default = Field3;
+
+
+
+exports.Field_default = Field_default;