formik-form-components 0.2.28 → 0.2.29

package/dist/index.mjs

@@ -1,11 +1,11 @@
 import { useFormikContext, Formik, Form as Form$1, ErrorMessage } from 'formik';
 import React4, { forwardRef, createElement, memo, useState, useMemo, useEffect } from 'react';
-import { Box, useTheme, FormControl, Typography, FormHelperText, TextField, Autocomplete, Checkbox, Chip, Select, MenuItem, FormLabel, RadioGroup, FormControlLabel, Radio, Stack, Rating, InputLabel, Switch, InputAdornment, IconButton, Tooltip, Dialog, DialogTitle, DialogContent, DialogActions, Button, CircularProgress, Paper, Menu } from '@mui/material';
+import { Box, useTheme, FormControl, Typography, FormHelperText, TextField, Autocomplete, Checkbox, Chip, Select, MenuItem, FormLabel, RadioGroup, FormControlLabel, Radio, Stack, Rating, Switch, InputAdornment, IconButton, Tooltip, Dialog, DialogTitle, DialogContent, DialogActions, Button, CircularProgress, Paper, Menu } from '@mui/material';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
-import _19, { get } from 'lodash';
+import _17, { get } from 'lodash';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 import Autocomplete3 from '@mui/material/Autocomplete';
@@ -49,9 +49,9 @@ var AppDatePicker = forwardRef(
     ...otherProps
   }, ref) => {
     const { values, setFieldValue, touched, errors, setFieldTouched } = useFormikContext();
-    const fieldValue = _19.get(values, name);
-    const fieldError = _19.get(errors, name);
-    const isTouched = _19.get(touched, name);
+    const fieldValue = _17.get(values, name);
+    const fieldError = _17.get(errors, name);
+    const isTouched = _17.get(touched, name);
     const handleChange = (newValue) => {
       setFieldValue(name, newValue);
     };
@@ -285,8 +285,8 @@ function AppFormErrorMessage({
   textSx
 }) {
   const { errors, touched } = useFormikContext();
-  const fieldError = _19.get(errors, name);
-  const isTouched = _19.get(touched, name);
+  const fieldError = _17.get(errors, name);
+  const isTouched = _17.get(touched, name);
   const showError = fieldError && typeof fieldError === "string";
   if (alwaysShow) {
     return showError ? /* @__PURE__ */ jsx(
@@ -363,9 +363,9 @@ var AppTextArea = forwardRef(({
 }, ref) => {
   var _a, _b, _c, _d;
   const { errors, getFieldProps, touched, setFieldValue } = useFormikContext();
-  const fieldError = _19.get(errors, name);
-  const isTouched = _19.get(touched, name);
-  const value = _19.get(getFieldProps(name), "value", "");
+  const fieldError = _17.get(errors, name);
+  const isTouched = _17.get(touched, name);
+  const value = _17.get(getFieldProps(name), "value", "");
   const handleChange = (e) => {
     const newValue = e.target.value;
     if (maxLength && newValue.length > maxLength)
@@ -519,9 +519,9 @@ function AppTagsCreator({
   inputSx
 }) {
   const { errors, touched, getFieldProps, values, setFieldValue, setTouched } = useFormikContext();
-  const fieldError = _19.get(errors, name);
-  const isTouched = _19.get(touched, name);
-  const val = _19.get(values, name);
+  const fieldError = _17.get(errors, name);
+  const isTouched = _17.get(touched, name);
+  const val = _17.get(values, name);
   return /* @__PURE__ */ jsxs(
     FormControl,
     {
@@ -644,8 +644,8 @@ function AppSwitchInput({
   ...otherProps
 }) {
   const { errors, touched, setFieldValue, values } = useFormikContext();
-  const fieldError = _19.get(errors, name);
-  const isTouched = _19.get(touched, name);
+  const fieldError = _17.get(errors, name);
+  const isTouched = _17.get(touched, name);
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -743,9 +743,9 @@ function AppSwitch({
   ...otherProps
 }) {
   const { errors, touched, setFieldValue, values } = useFormikContext();
-  const fieldValue = _19.get(values, name);
-  const fieldError = _19.get(errors, name);
-  const isTouched = _19.get(touched, name);
+  const fieldValue = _17.get(values, name);
+  const fieldError = _17.get(errors, name);
+  const isTouched = _17.get(touched, name);
   return /* @__PURE__ */ jsxs(
     Stack,
     {
@@ -851,9 +851,9 @@ function AppAutoComplete({
   errorSx
 }) {
   const { errors, touched, getFieldProps, values, setFieldValue } = useFormikContext();
-  const fieldError = _19.get(errors, name);
-  const isTouched = _19.get(touched, name);
-  const formikValue = _19.get(values, name);
+  const fieldError = _17.get(errors, name);
+  const isTouched = _17.get(touched, name);
+  const formikValue = _17.get(values, name);
   const val = propValue !== void 0 ? propValue : formikValue || [];
   return /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, variant: "filled", sx: formControlSx, children: [
     /* @__PURE__ */ jsx(
@@ -925,9 +925,9 @@ function AppAutoCompleter({
   errorSx
 }) {
   const { errors, touched, values, setFieldValue } = useFormikContext();
-  const fieldError = _19.get(errors, name);
-  const isTouched = _19.get(touched, name);
-  const value = _19.get(values, name);
+  const fieldError = _17.get(errors, name);
+  const isTouched = _17.get(touched, name);
+  const value = _17.get(values, name);
   const selectedOption = options.find((opt) => opt.value === value) || null;
   return /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, variant: "filled", sx: formControlSx, children: [
     /* @__PURE__ */ jsx(
@@ -939,7 +939,7 @@ function AppAutoCompleter({
         getOptionLabel: (option) => (option == null ? void 0 : option.label) || "",
         isOptionEqualToValue: (option, value2) => option.value === value2.value,
         autoHighlight: true,
-        onChange: (_20, newValue) => {
+        onChange: (_18, newValue) => {
           setFieldValue(name, newValue ? newValue.value : null);
         },
         renderOption: (props, option) => /* @__PURE__ */ createElement(Box, { component: "li", ...props, key: option.value, sx: listboxSx }, option.label),
@@ -990,8 +990,8 @@ var AppCheckBox = ({
   ...rest
 }) => {
   const { getFieldProps, setFieldValue, touched, errors } = useFormikContext();
-  const fieldError = _19.get(errors, name);
-  const isTouched = _19.get(touched, name);
+  const fieldError = _17.get(errors, name);
+  const isTouched = _17.get(touched, name);
   useTheme();
   const value = getFieldProps(name).value;
   const checkedValues = (() => {
@@ -1154,8 +1154,8 @@ function AppInputField({
   ...otherProps
 }) {
   const { errors, getFieldProps, touched } = useFormikContext();
-  const fieldError = _19.get(errors, name);
-  const isTouched = _19.get(touched, name);
+  const fieldError = _17.get(errors, name);
+  const isTouched = _17.get(touched, name);
   const [showPassword, setShowPassword] = useState(false);
   const handleShowPassword = () => {
     setShowPassword(!showPassword);
@@ -1240,10 +1240,10 @@ var AppMultiSelector = forwardRef(
   }, ref) => {
     const theme = useTheme();
     const { values, setFieldValue, errors, touched, setFieldTouched } = useFormikContext();
-    const fieldError = _19.get(errors, name);
-    const isTouched = Boolean(_19.get(touched, name));
+    const fieldError = _17.get(errors, name);
+    const isTouched = Boolean(_17.get(touched, name));
     const hasError = Boolean(fieldError) && isTouched;
-    const currentValue = _19.get(values, name);
+    const currentValue = _17.get(values, name);
     const selectedValues = Array.isArray(currentValue) ? currentValue : [];
     const selectedCount = selectedValues.length;
     const isMaxReached = maxSelections ? selectedCount >= maxSelections : false;
@@ -1282,10 +1282,7 @@ var AppMultiSelector = forwardRef(
           return options2;
         const inputValueLower = inputValue.toLowerCase();
         return options2.filter(
-          (option) => {
-            var _a, _b, _c;
-            return option.label.toLowerCase().includes(inputValueLower) || String(option.value).toLowerCase().includes(inputValueLower) || ((_a = option.searchAbleValue1) == null ? void 0 : _a.toLowerCase().includes(inputValueLower)) || ((_b = option.searchAbleValue2) == null ? void 0 : _b.toLowerCase().includes(inputValueLower)) || ((_c = option.searchAbleValue3) == null ? void 0 : _c.toLowerCase().includes(inputValueLower));
-          }
+          (option) => option.label.toLowerCase().includes(inputValueLower) || String(option.value).toLowerCase().includes(inputValueLower)
         );
       };
       const selectedOptions = getSelectedOptions();
@@ -1346,28 +1343,31 @@ var AppMultiSelector = forwardRef(
                     }
                   }
                 ),
-                renderOption: (props, option, { selected }) => /* @__PURE__ */ jsxs("li", { ...props, children: [
-                  /* @__PURE__ */ jsx(
-                    Checkbox,
-                    {
-                      checked: selected,
-                      disabled: option.disabled || isMaxReached && !selected,
-                      sx: checkboxSx
-                    }
-                  ),
-                  option.icon,
-                  /* @__PURE__ */ jsx(
-                    Typography,
-                    {
-                      variant: "body2",
-                      sx: {
-                        color: option.disabled ? "text.disabled" : "text.primary",
-                        ...option.textSx
-                      },
-                      children: option.label
-                    }
-                  )
-                ] }),
+                renderOption: (props, option, { selected }) => {
+                  const { key, ...restProps } = props;
+                  return /* @__PURE__ */ jsxs("li", { ...restProps, children: [
+                    /* @__PURE__ */ jsx(
+                      Checkbox,
+                      {
+                        checked: selected,
+                        disabled: option.disabled || isMaxReached && !selected,
+                        sx: checkboxSx
+                      }
+                    ),
+                    option.icon,
+                    /* @__PURE__ */ jsx(
+                      Typography,
+                      {
+                        variant: "body2",
+                        sx: {
+                          color: option.disabled ? "text.disabled" : "text.primary",
+                          ...option.textSx
+                        },
+                        children: option.label
+                      }
+                    )
+                  ] }, key);
+                },
                 renderTags: (value, getTagProps) => /* @__PURE__ */ jsx(
                   Box,
                   {
@@ -1550,8 +1550,8 @@ var AppPhoneNoInput = ({
   withCountryCallingCode = true
 }) => {
   const { values, errors, touched, setFieldValue, setFieldTouched } = useFormikContext();
-  const fieldError = useMemo(() => _19.get(errors, name), [errors, name]);
-  const isTouched = useMemo(() => _19.get(touched, name), [touched, name]);
+  const fieldError = useMemo(() => _17.get(errors, name), [errors, name]);
+  const isTouched = useMemo(() => _17.get(touched, name), [touched, name]);
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -1661,9 +1661,9 @@ var AppRadioGroup = forwardRef(({
   ...rest
 }, ref) => {
   const { errors, touched, getFieldProps, setFieldValue } = useFormikContext();
-  const fieldError = _19.get(errors, name);
-  const isTouched = _19.get(touched, name);
-  const value = _19.get(getFieldProps(name), "value");
+  const fieldError = _17.get(errors, name);
+  const isTouched = _17.get(touched, name);
+  const value = _17.get(getFieldProps(name), "value");
   const handleChange = (event) => {
     const newValue = event.target.value;
     setFieldValue(name, newValue);
@@ -1842,9 +1842,9 @@ var AppRating = forwardRef(
   }, ref) => {
     useTheme();
     const { errors, touched, setFieldValue, values, setFieldTouched } = useFormikContext();
-    const val = _19.get(values, name);
-    const fieldError = _19.get(errors, name);
-    const isTouched = _19.get(touched, name);
+    const val = _17.get(values, name);
+    const fieldError = _17.get(errors, name);
+    const isTouched = _17.get(touched, name);
     const hasError = Boolean(fieldError) && isTouched;
     const handleChange = (event, newValue) => {
       setFieldValue(name, newValue);
@@ -2586,7 +2586,7 @@ var Mark = class {
   */
   toJSON() {
     let obj = { type: this.type.name };
-    for (let _20 in this.attrs) {
+    for (let _18 in this.attrs) {
       obj.attrs = this.attrs;
       break;
     }
@@ -3534,7 +3534,7 @@ var Node = class {
   */
   toJSON() {
     let obj = { type: this.type.name };
-    for (let _20 in this.attrs) {
+    for (let _18 in this.attrs) {
       obj.attrs = this.attrs;
       break;
     }
@@ -4263,7 +4263,7 @@ var NodeType = class {
       throw new RangeError("Schema is missing its top node type ('" + topType + "')");
     if (!result.text)
       throw new RangeError("Every schema needs a 'text' type");
-    for (let _20 in result.text.attrs)
+    for (let _18 in result.text.attrs)
       throw new RangeError("The text node type should not have attributes");
     return result;
   }
@@ -9272,7 +9272,7 @@ function removeDuplicates(array, by = JSON.stringify) {
 function simplifyChangedRanges(changes) {
   const uniqueChanges = removeDuplicates(changes);
   return uniqueChanges.length === 1 ? uniqueChanges : uniqueChanges.filter((change, index) => {
-    const rest = uniqueChanges.filter((_20, i) => i !== index);
+    const rest = uniqueChanges.filter((_18, i) => i !== index);
     return !rest.some((otherChange) => {
       return change.oldRange.from >= otherChange.oldRange.from && change.oldRange.to <= otherChange.oldRange.to && change.newRange.from >= otherChange.newRange.from && change.newRange.to <= otherChange.newRange.to;
     });
@@ -10297,7 +10297,7 @@ var Drop = Extension.create({
       new Plugin({
         key: new PluginKey("tiptapDrop"),
         props: {
-          handleDrop: (_20, e, slice, moved) => {
+          handleDrop: (_18, e, slice, moved) => {
             this.editor.emit("drop", {
               editor: this.editor,
               event: e,
@@ -11463,541 +11463,6 @@ var AppRichTextEditor = ({
   ] });
 };
 var AppRichTextEditor_default = AppRichTextEditor;
-var AppSearchableMultiSelector = forwardRef(
-  ({
-    name,
-    label,
-    multiple = true,
-    options = [],
-    setSearchQuery,
-    required = false,
-    variant = "outlined",
-    disabled = false,
-    readOnly = false,
-    showHelperText = false,
-    helperText,
-    maxSelections,
-    showSelectedCount = false,
-    sx,
-    formControlSx,
-    labelSx,
-    inputSx,
-    textFieldSx,
-    autocompleteSx,
-    listboxSx,
-    optionSx,
-    chipSx,
-    errorSx,
-    helperTextSx,
-    selectedCountSx,
-    renderInput: externalRenderInput,
-    renderOption: externalRenderOption,
-    renderTags: externalRenderTags,
-    renderGroup: externalRenderGroup,
-    labelComponent: LabelComponent = InputLabel,
-    inputComponent: InputComponent = "input",
-    errorComponent: ErrorComponent = Typography,
-    helperTextComponent: HelperTextComponent = FormHelperText,
-    labelProps = {},
-    inputProps = {},
-    textFieldProps = {},
-    autocompleteProps = {},
-    checkboxProps = {},
-    chipProps = {},
-    errorProps = {},
-    helperTextProps = {},
-    className = "",
-    formControlClassName = "",
-    labelClassName = "",
-    inputClassName = "",
-    textFieldClassName = "",
-    autocompleteClassName = "",
-    listboxClassName = "",
-    optionClassName = "",
-    chipClassName = "",
-    errorClassName = "",
-    helperTextClassName = "",
-    onInputChange: externalOnInputChange,
-    onChange: externalOnChange,
-    onOpen,
-    onClose,
-    onBlur: externalOnBlur,
-    onFocus: externalOnFocus,
-    onClear,
-    onMaxSelectionsReached,
-    onRemove,
-    onAdd,
-    ...otherProps
-  }, ref) => {
-    useTheme();
-    const { values, setFieldValue, errors, touched, setFieldTouched } = useFormikContext();
-    const fieldError = _19.get(errors, name);
-    const isTouched = Boolean(_19.get(touched, name));
-    const hasError = Boolean(fieldError) && isTouched;
-    const val = _19.get(values, name);
-    const selectedValues = Array.isArray(val) ? val : [];
-    const selectedCount = selectedValues.length;
-    const handleChange = (event, value, reason, details) => {
-      const normalizedValue = (() => {
-        if (value === null)
-          return [];
-        const arr = Array.isArray(value) ? value : [value];
-        return arr.map(
-          (item) => typeof item === "string" ? { value: item, label: item } : item
-        );
-      })();
-      if (maxSelections && normalizedValue.length > maxSelections) {
-        if (onMaxSelectionsReached) {
-          onMaxSelectionsReached(maxSelections);
-        }
-        return;
-      }
-      if (reason === "selectOption" || reason === "removeOption") {
-        const added = normalizedValue.filter(
-          (item) => !selectedValues.some((v) => v.value === item.value)
-        );
-        const removed = selectedValues.filter(
-          (item) => !normalizedValue.some((v) => v.value === item.value)
-        );
-        if (added.length > 0 && onAdd) {
-          added.forEach((item) => onAdd(item));
-        }
-        if (removed.length > 0 && onRemove) {
-          removed.forEach((item) => onRemove(item));
-        }
-      }
-      setFieldValue(name, normalizedValue, true);
-      if (externalOnChange) {
-        externalOnChange(event, normalizedValue, reason);
-      }
-    };
-    const handleInputChange = (event, value, reason) => {
-      if (setSearchQuery) {
-        setSearchQuery(value);
-      }
-      if (externalOnInputChange) {
-        externalOnInputChange(event, value, reason);
-      }
-    };
-    const handleBlur = (event) => {
-      setFieldTouched(name, true, true);
-      if (externalOnBlur) {
-        externalOnBlur(event);
-      }
-    };
-    const handleFocus = (event) => {
-      if (externalOnFocus) {
-        externalOnFocus(event);
-      }
-    };
-    const filterOptions = (options2, { inputValue }) => {
-      if (!inputValue)
-        return options2;
-      const inputValueLower = inputValue.toLowerCase();
-      return options2.filter(
-        (option) => {
-          var _a, _b, _c, _d;
-          return ((_a = option == null ? void 0 : option.label) == null ? void 0 : _a.toLowerCase().includes(inputValueLower)) || String(option.value).toLowerCase().includes(inputValueLower) || ((_b = option == null ? void 0 : option.searchAbleValue1) == null ? void 0 : _b.toLowerCase().includes(inputValueLower)) || ((_c = option == null ? void 0 : option.searchAbleValue2) == null ? void 0 : _c.toLowerCase().includes(inputValueLower)) || ((_d = option == null ? void 0 : option.searchAbleValue3) == null ? void 0 : _d.toLowerCase().includes(inputValueLower));
-        }
-      );
-    };
-    const defaultRenderInput = (params) => /* @__PURE__ */ jsx(
-      TextField,
-      {
-        ...params,
-        variant,
-        error: hasError,
-        helperText: "",
-        placeholder: "",
-        inputRef: inputProps.ref,
-        inputProps: {
-          ...params.inputProps,
-          ...inputProps,
-          className: `${params.inputProps.className || ""} ${inputClassName}`.trim()
-        },
-        InputProps: {
-          ...params.InputProps,
-          ...textFieldProps.InputProps,
-          className: `${params.InputProps.className || ""} ${textFieldClassName}`.trim()
-        },
-        sx: [
-          {
-            "& .MuiOutlinedInput-root": {
-              borderRadius: "8px",
-              "& fieldset": {
-                borderColor: hasError ? "error.main" : "divider"
-              },
-              "&:hover fieldset": {
-                borderColor: hasError ? "error.main" : "text.primary"
-              },
-              "&.Mui-focused fieldset": {
-                borderColor: hasError ? "error.main" : "primary.main"
-              },
-              "& .MuiInputLabel-root": {
-                // Your label styles here
-              }
-            }
-          },
-          ...Array.isArray(sx) ? sx : sx ? [sx] : []
-        ],
-        ...textFieldProps
-      }
-    );
-    const defaultRenderOption = (props, option, { selected }) => /* @__PURE__ */ createElement(
-      "li",
-      {
-        ...props,
-        key: option.value,
-        className: `${props.className || ""} ${optionClassName}`.trim(),
-        style: {
-          ...props.style,
-          opacity: option.disabled ? 0.5 : 1,
-          pointerEvents: option.disabled ? "none" : "auto"
-        }
-      },
-      /* @__PURE__ */ jsx(
-        Checkbox,
-        {
-          checked: selected,
-          disabled: option.disabled,
-          sx: {
-            color: "text.secondary",
-            "&.Mui-checked": {
-              color: "primary.main"
-            },
-            "&.Mui-disabled": {
-              color: "text.disabled"
-            },
-            mr: 1,
-            ...checkboxProps.sx
-          },
-          ...checkboxProps
-        }
-      ),
-      option.icon && /* @__PURE__ */ jsx(Box, { component: "span", sx: { mr: 1 }, children: option.icon }),
-      /* @__PURE__ */ jsx(
-        Typography,
-        {
-          variant: "body2",
-          sx: [
-            {
-              color: option.disabled ? "text.disabled" : "text.primary",
-              ...option.textSx
-            },
-            ...Array.isArray(optionSx) ? optionSx : [optionSx]
-          ],
-          children: option.label
-        }
-      )
-    );
-    const defaultRenderTags = (value, getTagProps) => /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5, mt: 0.5 }, children: value.map((option, index) => {
-      const { key, ...tagProps } = getTagProps({ index });
-      return /* @__PURE__ */ createElement(
-        Chip,
-        {
-          ...tagProps,
-          key: option.value,
-          label: option.label,
-          disabled: disabled || option.disabled,
-          sx: [
-            {
-              height: "24px",
-              borderRadius: "4px",
-              "& .MuiChip-deleteIcon": {
-                color: "text.secondary",
-                "&:hover": {
-                  color: "text.primary"
-                }
-              },
-              ...chipSx
-            },
-            ...Array.isArray(chipSx) ? chipSx : [chipSx]
-          ],
-          className: `${chipClassName} ${option.disabled ? "Mui-disabled" : ""}`.trim(),
-          ...chipProps
-        }
-      );
-    }) });
-    const renderSelectedCount = () => {
-      if (!showSelectedCount || !multiple)
-        return null;
-      return /* @__PURE__ */ jsxs(
-        Typography,
-        {
-          variant: "caption",
-          sx: [
-            {
-              mt: 0.5,
-              color: "text.secondary",
-              ...selectedCountSx
-            },
-            ...Array.isArray(selectedCountSx) ? selectedCountSx : [selectedCountSx]
-          ],
-          children: [
-            `${selectedCount} selected`,
-            maxSelections ? ` (max ${maxSelections})` : ""
-          ]
-        }
-      );
-    };
-    return /* @__PURE__ */ jsx(
-      Box,
-      {
-        ref,
-        className: `app-searchable-multi-selector ${className}`.trim(),
-        sx: [
-          {
-            width: "100%"
-          },
-          ...Array.isArray(sx) ? sx : sx ? [sx] : []
-        ],
-        children: /* @__PURE__ */ jsxs(
-          FormControl,
-          {
-            fullWidth: true,
-            error: hasError,
-            disabled,
-            className: `app-searchable-multi-selector-form-control ${formControlClassName}`.trim(),
-            sx: [
-              {
-                "& .MuiAutocomplete-root": {
-                  "& .MuiOutlinedInput-root": {
-                    padding: "4px"
-                  },
-                  "& .MuiAutocomplete-input": {
-                    padding: "8.5px 4px"
-                  }
-                }
-              },
-              ...Array.isArray(formControlSx) ? formControlSx : formControlSx ? [formControlSx] : []
-            ],
-            children: [
-              label && /* @__PURE__ */ jsxs(
-                LabelComponent,
-                {
-                  shrink: true,
-                  htmlFor: `autocomplete-${name}`,
-                  className: `app-searchable-multi-selector-label ${labelClassName}`.trim(),
-                  sx: [
-                    {
-                      mb: 1,
-                      color: hasError ? "error.main" : "text.primary",
-                      "&.Mui-focused": {
-                        color: hasError ? "error.main" : "primary.main"
-                      },
-                      ...Array.isArray(labelSx) ? labelSx : [labelSx]
-                    }
-                  ],
-                  ...labelProps,
-                  children: [
-                    label,
-                    required && /* @__PURE__ */ jsx(
-                      Box,
-                      {
-                        component: "span",
-                        sx: {
-                          color: "error.main",
-                          ml: 0.5
-                        },
-                        children: "*"
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Autocomplete,
-                {
-                  multiple,
-                  id: `autocomplete-${name}`,
-                  options,
-                  value: selectedValues,
-                  filterOptions,
-                  onInputChange: handleInputChange,
-                  onChange: handleChange,
-                  onOpen,
-                  onClose,
-                  onBlur: handleBlur,
-                  onFocus: handleFocus,
-                  disableCloseOnSelect: multiple,
-                  readOnly,
-                  disabled,
-                  isOptionEqualToValue: (option, value) => option.value === value.value,
-                  getOptionLabel: (option) => typeof option === "string" ? option : option.label,
-                  getOptionDisabled: (option) => !!option.disabled,
-                  renderInput: externalRenderInput || defaultRenderInput,
-                  renderOption: externalRenderOption || defaultRenderOption,
-                  renderTags: externalRenderTags || defaultRenderTags,
-                  renderGroup: externalRenderGroup,
-                  ListboxProps: {
-                    className: `app-searchable-multi-selector-listbox ${listboxClassName}`.trim(),
-                    sx: {
-                      "& .MuiAutocomplete-option": {
-                        px: 2,
-                        py: 1,
-                        '&[aria-selected="true"]': {
-                          backgroundColor: "action.selected",
-                          "&.Mui-focused": {
-                            backgroundColor: "action.hover"
-                          }
-                        },
-                        "&.Mui-focused": {
-                          backgroundColor: "action.hover"
-                        }
-                      },
-                      ...Array.isArray(optionSx) ? optionSx : optionSx ? [optionSx] : [],
-                      ...Array.isArray(listboxSx) ? listboxSx : listboxSx ? [listboxSx] : []
-                    }
-                  },
-                  className: `app-searchable-multi-selector-autocomplete ${autocompleteClassName}`.trim(),
-                  sx: [
-                    {
-                      "& .MuiAutocomplete-tag": {
-                        margin: 0,
-                        height: "auto"
-                      },
-                      "& .MuiAutocomplete-endAdornment": {
-                        right: 8
-                      }
-                    },
-                    ...Array.isArray(autocompleteSx) ? autocompleteSx : autocompleteSx ? [autocompleteSx] : []
-                  ],
-                  ...autocompleteProps,
-                  ...otherProps
-                }
-              ),
-              (showHelperText || hasError) && /* @__PURE__ */ jsx(
-                HelperTextComponent,
-                {
-                  error: hasError,
-                  sx: [
-                    {
-                      mx: 0,
-                      mt: 0.5,
-                      ...hasError ? {
-                        color: "error.main",
-                        ...errorSx
-                      } : {
-                        color: "text.secondary",
-                        ...helperTextSx
-                      }
-                    }
-                  ],
-                  className: `app-searchable-multi-selector-helper-text ${helperTextClassName} ${hasError ? "Mui-error" : ""}`.trim(),
-                  ...helperTextProps,
-                  children: hasError ? fieldError : helperText
-                }
-              ),
-              renderSelectedCount()
-            ]
-          }
-        )
-      }
-    );
-  }
-);
-AppSearchableMultiSelector.displayName = "AppSearchableMultiSelector";
-var AppSearchableMultiSelector_default = AppSearchableMultiSelector;
-function AppSearchableSelectInput({
-  name,
-  label,
-  options = [],
-  required = false,
-  variant = "outlined",
-  placeholder,
-  setSearchQuery,
-  isResetRequired,
-  ...otherProps
-}) {
-  const { errors, touched, setFieldValue, values } = useFormikContext();
-  const fieldError = _19.get(errors, name);
-  const isTouched = _19.get(touched, name);
-  const val = _19.get(values, name);
-  const selectedOption = options.find((option) => option.value === val) || null;
-  const handleChange = (event, newValue) => {
-    setFieldValue(name, newValue ? newValue.value : "");
-  };
-  const handleSearchChange = (event) => {
-    const { value } = event.target;
-    if (setSearchQuery) {
-      setSearchQuery(value);
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    FormControl,
-    {
-      fullWidth: true,
-      variant,
-      error: isTouched && Boolean(fieldError),
-      sx: {
-        padding: "0px !important",
-        ".MuiAutocomplete-endAdornment": { right: "0 !important" },
-        ".MuiInputBase-root": {
-          padding: "0px !important",
-          pr: "39px !important",
-          pl: "10px !important"
-        },
-        ".MuiOutlinedInput-root": {
-          backgroundColor: (theme) => `${theme.palette.common.white} !important`
-        }
-      },
-      children: /* @__PURE__ */ jsx(
-        Autocomplete,
-        {
-          options,
-          getOptionLabel: (option) => option.label || String(option.value),
-          isOptionEqualToValue: (option, value) => option.value === value.value,
-          value: selectedOption,
-          onChange: handleChange,
-          filterOptions: (options2, { inputValue }) => {
-            return options2.filter(
-              (option) => {
-                var _a, _b, _c, _d;
-                return ((_a = option == null ? void 0 : option.label) == null ? void 0 : _a.toLowerCase().includes(inputValue.toLowerCase())) || String(option.value).toLowerCase().includes(inputValue.toLowerCase()) || ((_b = option == null ? void 0 : option.searchAbleValue1) == null ? void 0 : _b.toLowerCase().includes(inputValue.toLowerCase())) || ((_c = option == null ? void 0 : option.searchAbleValue2) == null ? void 0 : _c.toLowerCase().includes(inputValue.toLowerCase())) || ((_d = option == null ? void 0 : option.searchAbleValue3) == null ? void 0 : _d.toLowerCase().includes(inputValue.toLowerCase()));
-              }
-            );
-          },
-          renderInput: (params) => /* @__PURE__ */ jsx(
-            TextField,
-            {
-              ...params,
-              onChange: handleSearchChange,
-              label: /* @__PURE__ */ jsxs(Fragment, { children: [
-                label,
-                required && /* @__PURE__ */ jsx(Typography, { sx: { color: "red" }, component: "span", children: " *" })
-              ] }),
-              variant,
-              placeholder,
-              error: Boolean(fieldError) && isTouched,
-              helperText: isTouched && fieldError ? fieldError : "",
-              FormHelperTextProps: {
-                sx: { color: "#FF5630" }
-              },
-              sx: {
-                "& .MuiInputLabel-root": {
-                  color: "text.primary"
-                },
-                "& .MuiInputLabel-root.Mui-focused": {
-                  color: "text.primary"
-                },
-                "& .MuiOutlinedInput-input": {
-                  color: "common.black"
-                },
-                "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
-                  borderColor: "common.white"
-                },
-                "& .MuiSvgIcon-root": {
-                  color: "common.black"
-                }
-              }
-            }
-          ),
-          ...otherProps
-        }
-      )
-    }
-  );
-}
 var AppSelectInput = forwardRef(
   ({
     name,
@@ -12021,10 +11486,10 @@ var AppSelectInput = forwardRef(
   }, ref) => {
     const theme = useTheme();
     const { values, setFieldValue, errors, touched, setFieldTouched } = useFormikContext();
-    const fieldError = _19.get(errors, name);
-    const isTouched = Boolean(_19.get(touched, name));
+    const fieldError = _17.get(errors, name);
+    const isTouched = Boolean(_17.get(touched, name));
     const hasError = Boolean(fieldError) && isTouched;
-    const currentValue = _19.get(values, name);
+    const currentValue = _17.get(values, name);
     const handleValueChange = (newValue) => {
       setFieldValue(name, newValue, true);
       if (externalOnChange) {
@@ -12052,10 +11517,7 @@ var AppSelectInput = forwardRef(
           return options2;
         const inputValueLower = inputValue.toLowerCase();
         return options2.filter(
-          (option) => {
-            var _a, _b, _c;
-            return option.label.toLowerCase().includes(inputValueLower) || String(option.value).toLowerCase().includes(inputValueLower) || ((_a = option.searchAbleValue1) == null ? void 0 : _a.toLowerCase().includes(inputValueLower)) || ((_b = option.searchAbleValue2) == null ? void 0 : _b.toLowerCase().includes(inputValueLower)) || ((_c = option.searchAbleValue3) == null ? void 0 : _c.toLowerCase().includes(inputValueLower));
-          }
+          (option) => option.label.toLowerCase().includes(inputValueLower) || String(option.value).toLowerCase().includes(inputValueLower)
         );
       };
       return /* @__PURE__ */ jsx(Box, { ref, sx, children: /* @__PURE__ */ jsx(
@@ -12111,20 +11573,23 @@ var AppSelectInput = forwardRef(
                   }
                 }
               ),
-              renderOption: (props, option) => /* @__PURE__ */ jsxs("li", { ...props, children: [
-                option.icon,
-                /* @__PURE__ */ jsx(
-                  Typography,
-                  {
-                    variant: "body2",
-                    sx: {
-                      color: option.disabled ? "text.disabled" : "text.primary",
-                      ...option.textSx
-                    },
-                    children: option.label
-                  }
-                )
-              ] })
+              renderOption: (props, option) => {
+                const { key, ...restProps } = props;
+                return /* @__PURE__ */ jsxs("li", { ...restProps, children: [
+                  option.icon,
+                  /* @__PURE__ */ jsx(
+                    Typography,
+                    {
+                      variant: "body2",
+                      sx: {
+                        color: option.disabled ? "text.disabled" : "text.primary",
+                        ...option.textSx
+                      },
+                      children: option.label
+                    }
+                  )
+                ] }, key);
+              }
             }
           )
         }
@@ -12238,8 +11703,8 @@ var AppSimpleUploadFile = ({
   onError
 }) => {
   const { setFieldValue, values, errors, touched } = useFormikContext();
-  const fieldValue = _19.get(values, name);
-  const fieldError = _19.get(touched, name) ? _19.get(errors, name) : void 0;
+  const fieldValue = _17.get(values, name);
+  const fieldError = _17.get(touched, name) ? _17.get(errors, name) : void 0;
   const handleChange = (event) => {
     const files = event.target.files;
     if (!files || files.length === 0)
@@ -12266,7 +11731,7 @@ var AppSimpleUploadFile = ({
     if (!fieldValue || index < 0 || index >= fieldValue.length)
       return;
     const fileToRemove = fieldValue[index];
-    const newFiles = fieldValue.filter((_20, i) => i !== index);
+    const newFiles = fieldValue.filter((_18, i) => i !== index);
     setFieldValue(name, newFiles);
     onRemove == null ? void 0 : onRemove(fileToRemove);
     if (fileToRemove.preview) {
@@ -13818,12 +13283,12 @@ function Placeholder({ sx, ...other }) {
 var AppUploadFile = ({ name, ...rest }) => {
   var _a, _b, _c;
   const { errors, touched, setFieldValue, values } = useFormikContext();
-  const fieldError = _19.get(errors, name);
-  const isTouched = _19.get(touched, name);
-  let val = _19.get(values, name);
+  const fieldError = _17.get(errors, name);
+  const isTouched = _17.get(touched, name);
+  let val = _17.get(values, name);
   if (((_a = rest.multiple) != null ? _a : false) && typeof val === "string") {
     val = val ? [val] : [];
-  } else if (!((_b = rest.multiple) != null ? _b : false) && _19.isArray(val)) {
+  } else if (!((_b = rest.multiple) != null ? _b : false) && _17.isArray(val)) {
     val = val[0];
   }
   ((_c = rest.multiple) != null ? _c : false) ? (val != null ? val : []).map((__) => (__ == null ? void 0 : __.file) ? __ == null ? void 0 : __.file : __) : val;
@@ -13980,6 +13445,6 @@ var SubmitButton = ({
 };
 var SubmitButton_default = SubmitButton;
 
-export { AppAutoComplete, AppAutoCompleter, AppCheckBox_default as AppCheckBox, AppDateAndTimePicker_default as AppDateAndTimePicker, AppDatePicker_default as AppDatePicker, AppFormErrorMessage_default as AppFormErrorMessage, AppInputField, AppMultiSelector_default as AppMultiSelector, AppPhoneNoInput_default as AppPhoneNoInput, AppRadioGroup_default as AppRadioGroup, AppRating_default as AppRating, AppRichTextEditor_default as AppRichTextEditor, AppSearchableMultiSelector_default as AppSearchableMultiSelector, AppSearchableSelectInput, AppSelectInput_default as AppSelectInput, AppSimpleUploadFile_default as AppSimpleUploadFile, AppSwitch, AppSwitchInput, AppTagsCreator, AppTextArea_default as AppTextArea, AppUploadFile_default as AppUploadFile, Form_default as Form, Iconify_default as Iconify, SubmitButton_default as SubmitButton };
+export { AppAutoComplete, AppAutoCompleter, AppCheckBox_default as AppCheckBox, AppDateAndTimePicker_default as AppDateAndTimePicker, AppDatePicker_default as AppDatePicker, AppFormErrorMessage_default as AppFormErrorMessage, AppInputField, AppMultiSelector_default as AppMultiSelector, AppPhoneNoInput_default as AppPhoneNoInput, AppRadioGroup_default as AppRadioGroup, AppRating_default as AppRating, AppRichTextEditor_default as AppRichTextEditor, AppSelectInput_default as AppSelectInput, AppSimpleUploadFile_default as AppSimpleUploadFile, AppSwitch, AppSwitchInput, AppTagsCreator, AppTextArea_default as AppTextArea, AppUploadFile_default as AppUploadFile, Form_default as Form, Iconify_default as Iconify, SubmitButton_default as SubmitButton };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.mjs.map