@gnwebsoft/ui 2.17.0

package/dist/chunk-XMOYASC5.js

@@ -0,0 +1,1288 @@
+"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 _chunkDFFDICTBjs = require('./chunk-DFFDICTB.js');
+
+// src/wrappers/DatePickerElement/DatePickerElement.tsx
+
+
+var _reacthookform = require('react-hook-form');
+var _material = require('@mui/material');
+
+
+var _xdatepickers = require('@mui/x-date-pickers');
+var _internals = require('@mui/x-date-pickers/internals');
+var _jsxruntime = require('react/jsx-runtime');
+var Component = function DatePickerElement(props) {
+  const {
+    parseError,
+    name,
+    required,
+    rules = {},
+    inputProps,
+    control,
+    textReadOnly,
+    gridProps,
+    slotProps,
+    transform,
+    datePickerProps = {},
+    ...rest
+  } = props;
+  const adapter = _internals.useLocalizationContext.call(void 0, );
+  const { disabled, inputRef, onClose } = datePickerProps;
+  const {
+    field,
+    fieldState: { error }
+  } = _reacthookform.useController.call(void 0, {
+    name,
+    control,
+    disabled,
+    defaultValue: null
+  });
+  const { value, onChange } = _chunk6JZ35VQJjs.useTransform.call(void 0, {
+    value: field.value,
+    onChange: field.onChange,
+    transform: {
+      input: typeof _optionalChain([transform, 'optionalAccess', _3 => _3.input]) === "function" ? transform.input : (newValue) => _chunkDFFDICTBjs.readValueAsDate.call(void 0, adapter, newValue),
+      output: typeof _optionalChain([transform, 'optionalAccess', _4 => _4.output]) === "function" ? transform.output : (newValue) => newValue
+    }
+  });
+  const handleInputRef = _material.useForkRef.call(void 0, field.ref, inputRef);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _xdatepickers.DatePicker,
+    {
+      ...rest,
+      ...field,
+      value,
+      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);
+        }
+      },
+      slotProps: {
+        ...slotProps,
+        textField: {
+          ...inputProps,
+          required,
+          fullWidth: true,
+          onBlur: (event) => {
+            field.onBlur();
+            if (typeof _optionalChain([inputProps, 'optionalAccess', _5 => _5.onBlur]) === "function") {
+              inputProps.onBlur(event);
+            }
+          },
+          error: !!error,
+          helperText: error ? error.message : _optionalChain([inputProps, 'optionalAccess', _6 => _6.helperText]) || rest.helperText,
+          inputProps: {
+            readOnly: !!textReadOnly,
+            ..._optionalChain([inputProps, 'optionalAccess', _7 => _7.inputProps])
+          }
+        }
+      }
+    }
+  );
+};
+var DatePickerElement2 = ({
+  gridProps,
+  ...props
+}) => {
+  if (gridProps) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Grid2, { ...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/wrappers/PasswordElement/PasswordElement.tsx
+var _react = require('react'); var React = _interopRequireWildcard(_react);
+
+
+
+
+
+
+
+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', _8 => _8.input])
+          }
+        }
+      },
+      error: !!error,
+      helperText: error ? error.message : ""
+    }
+  );
+};
+var PasswordElement = ({
+  gridProps,
+  ...props
+}) => {
+  if (gridProps) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Grid2, { ...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/wrappers/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', _9 => _9.input]) === "function" ? transform.input : (value2) => {
+        return value2 || "";
+      },
+      output: typeof _optionalChain([transform, 'optionalAccess', _10 => _10.output]) === "function" ? _optionalChain([transform, 'optionalAccess', _11 => _11.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', _12 => _12[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,
+  ...props
+}) => {
+  if (gridProps) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Grid2, { ...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/wrappers/TextFieldElement/TextFieldElement.tsx
+
+
+
+
+
+
+
+
+
+var Component4 = function TextFieldElement(props) {
+  const {
+    rules = {},
+    parseError,
+    name,
+    control,
+    component: TextFieldComponent = _material.TextField,
+    gridProps,
+    transform,
+    textFieldProps = {},
+    ...rest
+  } = props;
+  const { type, required, helperText, inputRef, onBlur, disabled } = textFieldProps;
+  const {
+    field,
+    fieldState: { error }
+  } = _reacthookform.useController.call(void 0, {
+    name,
+    control,
+    disabled
+  });
+  const { value, onChange } = _chunk6JZ35VQJjs.useTransform.call(void 0, {
+    value: field.value,
+    onChange: field.onChange,
+    transform: {
+      input: typeof _optionalChain([transform, 'optionalAccess', _13 => _13.input]) === "function" ? transform.input : (value2) => {
+        return _nullishCoalesce(value2, () => ( ""));
+      },
+      output: typeof _optionalChain([transform, 'optionalAccess', _14 => _14.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,
+      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);
+        }
+      },
+      fullWidth: true,
+      required,
+      type,
+      error: !!error,
+      helperText: error ? error.message : helperText,
+      inputRef: handleInputRef
+    }
+  );
+};
+var TextFieldElement2 = ({
+  gridProps,
+  ...props
+}) => {
+  if (gridProps) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Grid2, { ...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/wrappers/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', _15 => _15.input]) === "function" ? transform.input : (newValue) => _chunkDFFDICTBjs.readValueAsDate.call(void 0, adapter, newValue),
+      output: typeof _optionalChain([transform, 'optionalAccess', _16 => _16.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', _17 => _17.helperText]) || rest.helperText,
+          inputProps: {
+            readOnly: textReadOnly,
+            ..._optionalChain([inputProps, 'optionalAccess', _18 => _18.inputProps])
+          }
+        }
+      }
+    }
+  );
+};
+var TimePickerElement2 = ({
+  gridProps,
+  ...props
+}) => {
+  if (gridProps) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Grid2, { ...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/wrappers/AsyncSelect/AsyncSelect.tsx
+
+var _TextField = require('@mui/material/TextField'); var _TextField2 = _interopRequireDefault(_TextField);
+var _Autocomplete = require('@mui/material/Autocomplete'); var _Autocomplete2 = _interopRequireDefault(_Autocomplete);
+var _utils = require('@mui/material/utils');
+
+
+
+
+
+
+
+
+
+
+
+var Component6 = function AsyncSelectElement(props) {
+  const {
+    name,
+    onBlur,
+    disabled,
+    control,
+    gridProps,
+    placeholder,
+    initialValue,
+    label,
+    queryFn,
+    ...rest
+  } = props;
+  const {
+    field,
+    fieldState: { error }
+  } = _reacthookform.useController.call(void 0, {
+    name,
+    control,
+    disabled
+  });
+  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, 
+    (inputValue3) => setInputValue(inputValue3),
+    []
+  );
+  const [options, setOptions] = _react.useState.call(void 0, []);
+  const initialValueLoaded = _react.useRef.call(void 0, 
+    !initialValue ? true : !(initialValue != null && initialValue > 0)
+  );
+  const fieldValue = _react.useRef.call(void 0, field.value);
+  console.log(initialValue, 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', _19 => _19.filter, 'call', _20 => _20((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] : []);
+      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, selectedOption2, reason) => {
+    if (reason === "clear") {
+      setSelectedOption(null);
+      field.onChange(null);
+    } else if (reason === "selectOption" || reason === "removeOption") {
+      if (selectedOption2) {
+        setSelectedOption(selectedOption2);
+        field.onChange(selectedOption2.value);
+        fieldValue.current = selectedOption2.value;
+      }
+    }
+    setOptions([]);
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _Autocomplete2.default,
+    {
+      ...rest,
+      ref: selectRef,
+      fullWidth: true,
+      loading,
+      getOptionLabel: (option) => option.label,
+      getOptionKey: (option) => option.value,
+      isOptionEqualToValue: (option, val) => option.value === val.value,
+      autoComplete: true,
+      includeInputInList: true,
+      options,
+      value: selectedOption,
+      filterSelectedOptions: true,
+      onChange: handleChange,
+      onInputChange: (_2, newInputValue) => {
+        setInputValue2(newInputValue);
+      },
+      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
+              ] })
+            }
+          }
+        }
+      ),
+      renderOption: (props2, option) => {
+        const { key, ...optionProps } = props2;
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { ...optionProps, children: option.label }, key);
+      }
+    }
+  );
+};
+var AsyncSelectElement2 = ({
+  gridProps,
+  ...props
+}) => {
+  if (gridProps) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Grid2, { ...gridProps, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component6, { ...props }) });
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component6, { ...props });
+};
+AsyncSelectElement2.displayName = "AsyncSelectElement";
+var AsyncSelect_default = AsyncSelectElement2;
+
+// src/wrappers/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,
+    ...rest
+  } = props;
+  const {
+    field,
+    fieldState: { error }
+  } = _reacthookform.useController.call(void 0, {
+    name,
+    control,
+    disabled
+  });
+  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,
+      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
+              ] })
+            }
+          }
+        }
+      ),
+      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, { ...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/wrappers/SelectElement/SelectElement.tsx
+
+
+
+
+
+
+
+
+
+var Component8 = function SelectElement(props) {
+  const {
+    name,
+    onBlur,
+    onChange,
+    disabled,
+    options,
+    control,
+    gridProps,
+    loading = false,
+    placeholder,
+    label,
+    ...rest
+  } = props;
+  const {
+    field,
+    fieldState: { error }
+  } = _reacthookform.useController.call(void 0, {
+    name,
+    control,
+    disabled
+  });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _material.Autocomplete,
+    {
+      ...rest,
+      value: field.value ? _nullishCoalesce(options.find((option) => {
+        return field.value === option.value;
+      }), () => ( null)) : null,
+      loading,
+      options,
+      getOptionLabel: (c) => c.label,
+      isOptionEqualToValue: (option, value) => option.value === value.value,
+      ref: field.ref,
+      disabled: field.disabled,
+      onChange: (event, newValue, reason) => {
+        field.onChange(newValue ? newValue.value : null);
+        if (onChange && typeof onChange === "function") {
+          onChange(event, newValue, reason);
+        }
+      },
+      onBlur: (event) => {
+        field.onBlur();
+        if (typeof onBlur === "function") {
+          onBlur(event);
+        }
+      },
+      fullWidth: true,
+      renderInput: (params) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _material.TextField,
+        {
+          ...params,
+          fullWidth: true,
+          error: !!error,
+          helperText: error ? error.message : "",
+          placeholder,
+          label,
+          variant: "outlined"
+        }
+      )
+    }
+  );
+};
+var SelectElement2 = ({
+  gridProps,
+  ...props
+}) => {
+  if (gridProps) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Grid2, { ...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/wrappers/SelectMultiElement/SelectMultiElement.tsx
+
+
+
+
+
+
+
+
+
+
+
+var Component9 = function SelectMultiElement(props) {
+  const {
+    name,
+    onBlur,
+    disabled,
+    options,
+    control,
+    loading = false,
+    placeholder,
+    label,
+    ...rest
+  } = props;
+  const {
+    field,
+    fieldState: { error }
+  } = _reacthookform.useController.call(void 0, {
+    name,
+    control,
+    disabled
+  });
+  const [selectedOptions, setSelectedOptions] = _react.useState.call(void 0, []);
+  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));
+    }
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _material.Autocomplete,
+    {
+      multiple: true,
+      value: selectedOptions,
+      loading,
+      options,
+      getOptionLabel: (c) => c.label,
+      isOptionEqualToValue: (option, value) => option.value === value.value,
+      filterSelectedOptions: true,
+      ref: field.ref,
+      disabled: field.disabled,
+      onChange: handleChange,
+      onBlur: (event) => {
+        field.onBlur();
+        if (typeof onBlur === "function") {
+          onBlur(event);
+        }
+      },
+      fullWidth: true,
+      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
+              ] })
+            }
+          }
+        }
+      ),
+      ...rest
+    }
+  );
+};
+var SelectMultiElement2 = ({
+  gridProps,
+  ...props
+}) => {
+  if (gridProps) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Grid2, { ...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/wrappers/SelectCascadeElement/SelectCascadeElement.tsx
+
+
+
+
+
+
+
+
+
+
+var Component10 = function SelectCascadeElement(props) {
+  const {
+    name,
+    onBlur,
+    onChange,
+    disabled,
+    options,
+    control,
+    gridProps,
+    loading = false,
+    placeholder,
+    label,
+    dependsOn,
+    ...rest
+  } = props;
+  const {
+    field,
+    fieldState: { error }
+  } = _reacthookform.useController.call(void 0, {
+    name,
+    control,
+    disabled
+  });
+  const { field: dependentField } = _reacthookform.useController.call(void 0, {
+    name: dependsOn,
+    control,
+    disabled
+  });
+  const parentValueRef = _react.useRef.call(void 0, _nullishCoalesce(dependentField.value, () => ( null)));
+  _react.useEffect.call(void 0, () => {
+    if (!!dependentField.value && _optionalChain([parentValueRef, 'optionalAccess', _21 => _21.current, 'optionalAccess', _22 => _22.value]) !== dependentField.value || dependentField.value === null) {
+      field.onChange(null);
+    }
+  }, [dependentField.value]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _material.Autocomplete,
+    {
+      ...rest,
+      value: field.value !== null ? _nullishCoalesce(options.find((option) => {
+        return field.value === option.value;
+      }), () => ( null)) : null,
+      size: "small",
+      loading,
+      options,
+      getOptionLabel: (c) => c.label,
+      isOptionEqualToValue: (option, value) => option.value === value.value,
+      ref: field.ref,
+      disabled: field.disabled,
+      onChange: (event, newValue, reason) => {
+        field.onChange(newValue ? newValue.value : null);
+        if (onChange && typeof onChange === "function") {
+          onChange(event, newValue, reason);
+        }
+      },
+      onBlur: (event) => {
+        field.onBlur();
+        if (typeof onBlur === "function") {
+          onBlur(event);
+        }
+      },
+      fullWidth: true,
+      renderInput: (params) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _material.TextField,
+        {
+          ...params,
+          fullWidth: true,
+          error: !!error,
+          helperText: error ? error.message : "",
+          placeholder,
+          label,
+          variant: "outlined",
+          sx: { "& .MuiInputBase-input": { color: "#3598dc" } }
+        }
+      )
+    }
+  );
+};
+var SelectCascadeElement2 = ({
+  gridProps,
+  ...props
+}) => {
+  if (gridProps) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Grid2, { ...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/wrappers/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, { ...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/wrappers/Field/index.ts
+var Field = {
+  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: AsyncSelect_default,
+  AsyncMultiSelect: AsyncMultiSelect_default
+};
+var Field_default = Field;
+
+
+
+exports.Field_default = Field_default;