formik-form-components 0.2.26 → 0.2.28

package/dist/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var formik = require('formik');
-var react = require('react');
+var React4 = require('react');
 var material = require('@mui/material');
 var DatePicker = require('@mui/x-date-pickers/DatePicker');
 var LocalizationProvider = require('@mui/x-date-pickers/LocalizationProvider');
@@ -12,11 +12,10 @@ var jsxRuntime = require('react/jsx-runtime');
 var DateTimePicker = require('@mui/x-date-pickers/DateTimePicker');
 var Autocomplete3 = require('@mui/material/Autocomplete');
 var Typography9 = require('@mui/material/Typography');
-var react$1 = require('@iconify/react');
-var Select = require('@mui/material/Select');
+var react = require('@iconify/react');
 var PhoneInput = require('react-phone-number-input');
 require('react-phone-number-input/style.css');
-var react$2 = require('@tiptap/react');
+var react$1 = require('@tiptap/react');
 var StarterKit = require('@tiptap/starter-kit');
 var Link = require('@tiptap/extension-link');
 var TextAlign = require('@tiptap/extension-text-align');
@@ -42,11 +41,11 @@ var reactI18next = require('react-i18next');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
+var React4__default = /*#__PURE__*/_interopDefault(React4);
 var CalendarMonthIcon__default = /*#__PURE__*/_interopDefault(CalendarMonthIcon);
 var _19__default = /*#__PURE__*/_interopDefault(_19);
 var Autocomplete3__default = /*#__PURE__*/_interopDefault(Autocomplete3);
 var Typography9__default = /*#__PURE__*/_interopDefault(Typography9);
-var Select__default = /*#__PURE__*/_interopDefault(Select);
 var PhoneInput__default = /*#__PURE__*/_interopDefault(PhoneInput);
 var StarterKit__default = /*#__PURE__*/_interopDefault(StarterKit);
 var Link__default = /*#__PURE__*/_interopDefault(Link);
@@ -67,7 +66,7 @@ var CloudUploadIcon__default = /*#__PURE__*/_interopDefault(CloudUploadIcon);
 var CloseIcon__default = /*#__PURE__*/_interopDefault(CloseIcon);
 
 // src/Form/index.tsx
-var AppDatePicker = react.forwardRef(
+var AppDatePicker = React4.forwardRef(
   ({
     name,
     label,
@@ -111,7 +110,7 @@ var AppDatePicker = react.forwardRef(
 );
 AppDatePicker.displayName = "AppDatePicker";
 var AppDatePicker_default = AppDatePicker;
-var AppDateAndTimePicker = react.forwardRef((props, ref) => {
+var AppDateAndTimePicker = React4.forwardRef((props, ref) => {
   const {
     name,
     label,
@@ -368,7 +367,7 @@ function AppFormErrorMessage({
   return null;
 }
 var AppFormErrorMessage_default = AppFormErrorMessage;
-var AppTextArea = react.forwardRef(({
+var AppTextArea = React4.forwardRef(({
   name,
   label,
   placeholder = "Enter text...",
@@ -574,7 +573,7 @@ function AppTagsCreator({
               flexWrap: "wrap",
               gap: 0.5,
               ...chipContainerSx
-            }, children: value == null ? void 0 : value.map((option, index) => /* @__PURE__ */ react.createElement(
+            }, children: value == null ? void 0 : value.map((option, index) => /* @__PURE__ */ React4.createElement(
               material.Chip,
               {
                 variant: "outlined",
@@ -679,25 +678,30 @@ function AppSwitchInput({
     material.Box,
     {
       className,
-      sx: [{
-        display: "flex",
-        flexDirection: labelPlacement === "start" || labelPlacement === "end" ? "row" : "column",
-        alignItems: labelPlacement === "start" || labelPlacement === "end" ? "center" : "flex-start",
-        justifyContent: labelPlacement === "start" || labelPlacement === "end" ? "space-between" : "center",
-        gap: 1,
-        my: 1,
-        ...containerSx
-      }, sx],
+      sx: [
+        {
+          display: "flex",
+          flexDirection: labelPlacement === "start" || labelPlacement === "end" ? "row" : "column",
+          alignItems: labelPlacement === "start" || labelPlacement === "end" ? "center" : "flex-start",
+          justifyContent: labelPlacement === "start" || labelPlacement === "end" ? "space-between" : "center",
+          gap: 1,
+          my: 1,
+          ...containerSx
+        },
+        sx
+      ],
       children: [
         label && /* @__PURE__ */ jsxRuntime.jsx(
           material.Typography,
           {
             variant: "body2",
-            sx: [{
-              color: "text.primary",
-              order: labelPlacement === "start" ? 0 : 1,
-              ...labelSx
-            }],
+            sx: [
+              {
+                color: "text.primary",
+                order: labelPlacement === "start" ? 0 : 1,
+                ...labelSx
+              }
+            ],
             children: label
           }
         ),
@@ -710,25 +714,27 @@ function AppSwitchInput({
             onChange: () => {
               setFieldValue(name, !values[name], true);
             },
-            sx: [{
-              "& .MuiSwitch-switchBase": {
-                color: "text.secondary",
-                "&.Mui-checked": {
-                  color: "primary.main",
-                  "& + .MuiSwitch-track": {
-                    backgroundColor: "primary.main",
-                    opacity: 0.5
+            sx: [
+              {
+                "& .MuiSwitch-switchBase": {
+                  color: "text.secondary",
+                  "&.Mui-checked": {
+                    color: "primary.main",
+                    "& + .MuiSwitch-track": {
+                      backgroundColor: "primary.main",
+                      opacity: 0.5
+                    }
+                  },
+                  "&.Mui-disabled": {
+                    color: "action.disabled",
+                    "& + .MuiSwitch-track": {
+                      backgroundColor: "action.disabledBackground"
+                    }
                   }
                 },
-                "&.Mui-disabled": {
-                  color: "action.disabled",
-                  "& + .MuiSwitch-track": {
-                    backgroundColor: "action.disabledBackground"
-                  }
-                }
-              },
-              ...switchSx
-            }],
+                ...switchSx
+              }
+            ],
             ...otherProps
           }
         ),
@@ -736,12 +742,14 @@ function AppSwitchInput({
           material.Typography,
           {
             variant: "caption",
-            sx: [{
-              color: "error.main",
-              display: "block",
-              mt: 0.5,
-              ...errorSx
-            }],
+            sx: [
+              {
+                color: "error.main",
+                display: "block",
+                mt: 0.5,
+                ...errorSx
+              }
+            ],
             gutterBottom: true,
             children: fieldError
           }
@@ -773,21 +781,26 @@ function AppSwitch({
       alignItems: labelPlacement === "start" || labelPlacement === "end" ? "center" : "flex-start",
       justifyContent: labelPlacement === "start" || labelPlacement === "end" ? "space-between" : "center",
       spacing: 1,
-      sx: [{
-        width: "100%",
-        ...labelPlacement === "top" || labelPlacement === "bottom" ? { alignItems: "flex-start" } : {},
-        ...containerSx
-      }, sx],
+      sx: [
+        {
+          width: "100%",
+          ...labelPlacement === "top" || labelPlacement === "bottom" ? { alignItems: "flex-start" } : {},
+          ...containerSx
+        },
+        sx
+      ],
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           material.Typography,
           {
             variant: "body2",
-            sx: [{
-              color: "text.primary",
-              order: labelPlacement === "start" ? 0 : 1,
-              ...labelSx
-            }],
+            sx: [
+              {
+                color: "text.primary",
+                order: labelPlacement === "start" ? 0 : 1,
+                ...labelSx
+              }
+            ],
             children: label
           }
         ),
@@ -799,25 +812,27 @@ function AppSwitch({
             onChange: () => {
               setFieldValue(name, !fieldValue, true);
             },
-            sx: [{
-              "& .MuiSwitch-switchBase": {
-                color: "text.secondary",
-                "&.Mui-checked": {
-                  color: "primary.main",
-                  "& + .MuiSwitch-track": {
-                    backgroundColor: "primary.main",
-                    opacity: 0.5
+            sx: [
+              {
+                "& .MuiSwitch-switchBase": {
+                  color: "text.secondary",
+                  "&.Mui-checked": {
+                    color: "primary.main",
+                    "& + .MuiSwitch-track": {
+                      backgroundColor: "primary.main",
+                      opacity: 0.5
+                    }
+                  },
+                  "&.Mui-disabled": {
+                    color: "action.disabled",
+                    "& + .MuiSwitch-track": {
+                      backgroundColor: "action.disabledBackground"
+                    }
                   }
                 },
-                "&.Mui-disabled": {
-                  color: "action.disabled",
-                  "& + .MuiSwitch-track": {
-                    backgroundColor: "action.disabledBackground"
-                  }
-                }
-              },
-              ...switchSx
-            }],
+                ...switchSx
+              }
+            ],
             ...otherProps
           }
         ),
@@ -825,12 +840,14 @@ function AppSwitch({
           material.Typography,
           {
             variant: "caption",
-            sx: [{
-              color: "error.main",
-              display: "block",
-              mt: 0.5,
-              ...errorSx
-            }],
+            sx: [
+              {
+                color: "error.main",
+                display: "block",
+                mt: 0.5,
+                ...errorSx
+              }
+            ],
             gutterBottom: true,
             children: fieldError
           }
@@ -875,7 +892,7 @@ function AppAutoComplete({
         id: "tags-filled",
         options,
         freeSolo: true,
-        renderTags: (value, getTagProps) => value.map((option, index) => /* @__PURE__ */ react.createElement(
+        renderTags: (value, getTagProps) => value.map((option, index) => /* @__PURE__ */ React4.createElement(
           material.Chip,
           {
             variant: "outlined",
@@ -953,7 +970,7 @@ function AppAutoCompleter({
         onChange: (_20, newValue) => {
           setFieldValue(name, newValue ? newValue.value : null);
         },
-        renderOption: (props, option) => /* @__PURE__ */ react.createElement(material.Box, { component: "li", ...props, key: option.value, sx: listboxSx }, option.label),
+        renderOption: (props, option) => /* @__PURE__ */ React4.createElement(material.Box, { component: "li", ...props, key: option.value, sx: listboxSx }, option.label),
         renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(
           material.TextField,
           {
@@ -1143,11 +1160,11 @@ var AppCheckBox = ({
   );
 };
 var AppCheckBox_default = AppCheckBox;
-var Iconify = react.forwardRef(({ icon, width = 20, color, sx, ...other }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var Iconify = React4.forwardRef(({ icon, width = 20, color, sx, ...other }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   material.Box,
   {
     ref,
-    component: react$1.Icon,
+    component: react.Icon,
     icon,
     sx: { width, height: width, flexShrink: 0, color: color || "text.secondary", ...sx || {} },
     ...other
@@ -1167,7 +1184,7 @@ function AppInputField({
   const { errors, getFieldProps, touched } = formik.useFormikContext();
   const fieldError = _19__default.default.get(errors, name);
   const isTouched = _19__default.default.get(touched, name);
-  const [showPassword, setShowPassword] = react.useState(false);
+  const [showPassword, setShowPassword] = React4.useState(false);
   const handleShowPassword = () => {
     setShowPassword(!showPassword);
   };
@@ -1225,282 +1242,323 @@ function AppInputField({
     }
   );
 }
-var AppMultiSelector = react.forwardRef(
+var AppMultiSelector = React4.forwardRef(
   ({
-    multiple = true,
     name,
     label,
+    mode = "autocomplete",
     options = [],
     required = false,
-    variant = "outlined",
     disabled = false,
     maxSelections,
     showSelectedCount = true,
-    showHelperText = false,
     helperText,
+    variant = "outlined",
+    placeholder = "Select options...",
+    onSearchChange,
+    onChange: externalOnChange,
+    onMaxSelectionsReached,
     sx,
     formControlSx,
-    selectSx,
     labelSx,
     chipSx,
     checkboxSx,
-    menuItemSx,
-    errorSx,
-    helperTextSx,
-    iconSx,
-    onChange: externalOnChange,
-    onOpen,
-    onClose,
-    renderValue: externalRenderValue,
-    renderMenuItem,
-    ...otherProps
+    searchDebounce = 300,
+    clearable = true
   }, ref) => {
     const theme = material.useTheme();
-    const { errors, touched, values, setFieldValue, setFieldTouched } = formik.useFormikContext();
+    const { values, setFieldValue, errors, touched, setFieldTouched } = formik.useFormikContext();
     const fieldError = _19__default.default.get(errors, name);
-    const isTouched = _19__default.default.get(touched, name);
-    const val = _19__default.default.get(values, name);
-    const selectedValues = Array.isArray(val) ? val : [];
-    const handleChange = (event, child) => {
-      const newValue = event.target.value;
-      if (maxSelections && newValue.length > maxSelections) {
+    const isTouched = Boolean(_19__default.default.get(touched, name));
+    const hasError = Boolean(fieldError) && isTouched;
+    const currentValue = _19__default.default.get(values, name);
+    const selectedValues = Array.isArray(currentValue) ? currentValue : [];
+    const selectedCount = selectedValues.length;
+    const isMaxReached = maxSelections ? selectedCount >= maxSelections : false;
+    const handleValueChange = (newValues) => {
+      if (maxSelections && newValues.length > maxSelections) {
+        if (onMaxSelectionsReached) {
+          onMaxSelectionsReached(maxSelections);
+        }
         return;
       }
-      setFieldValue(name, newValue, true);
+      setFieldValue(name, newValues, true);
       if (externalOnChange) {
-        externalOnChange(event, child);
+        externalOnChange(newValues);
       }
     };
     const handleBlur = () => {
       setFieldTouched(name, true, true);
     };
-    const defaultRenderValue = (selected) => /* @__PURE__ */ jsxRuntime.jsx(
-      material.Box,
-      {
-        sx: { display: "flex", flexWrap: "wrap", gap: 0.5, minHeight: "24px" },
-        children: selected.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", color: "text.secondary", children: "Select options..." }) : selected.map((value) => {
-          const option = options.find((obj) => obj.value === value);
-          return option ? /* @__PURE__ */ jsxRuntime.jsx(
-            material.Chip,
-            {
-              label: option.label,
-              size: "small",
-              sx: [
-                {
-                  height: "24px",
-                  borderRadius: "4px",
-                  backgroundColor: "action.selected",
-                  "& .MuiChip-label": {
-                    px: 1
-                  },
-                  ...option.disabled && {
-                    opacity: 0.6
-                  }
-                },
-                chipSx
-              ]
-            },
-            value
-          ) : null;
-        })
-      }
-    );
-    const defaultRenderMenuItem = (option, isSelected) => /* @__PURE__ */ jsxRuntime.jsxs(
-      material.MenuItem,
-      {
-        value: option.value,
-        disabled: option.disabled,
-        sx: [
-          {
-            "&.Mui-selected": {
-              backgroundColor: "action.selected",
-              "&:hover": {
-                backgroundColor: "action.hover"
-              }
-            },
-            "&.Mui-disabled": {
-              opacity: 0.5
-            },
-            ...option.sx
-          },
-          menuItemSx
-        ],
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            material.Checkbox,
-            {
-              checked: isSelected,
-              disabled: option.disabled,
-              sx: [
-                {
-                  color: "text.secondary",
-                  "&.Mui-checked": {
-                    color: "primary.main"
-                  },
-                  ...option.disabled && {
-                    color: "action.disabled"
-                  }
+    const getSelectedOptions = () => {
+      return options.filter((opt) => selectedValues.includes(opt.value));
+    };
+    if (mode === "autocomplete") {
+      const debouncedSearch = React4__default.default.useRef();
+      const handleSearchChange = (query) => {
+        if (debouncedSearch.current) {
+          clearTimeout(debouncedSearch.current);
+        }
+        debouncedSearch.current = setTimeout(() => {
+          if (onSearchChange) {
+            onSearchChange(query);
+          }
+        }, searchDebounce);
+      };
+      const filterOptions = (options2, { inputValue }) => {
+        if (!inputValue)
+          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));
+          }
+        );
+      };
+      const selectedOptions = getSelectedOptions();
+      return /* @__PURE__ */ jsxRuntime.jsx(material.Box, { ref, sx, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        material.FormControl,
+        {
+          fullWidth: true,
+          error: hasError,
+          disabled,
+          sx: formControlSx,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              material.Autocomplete,
+              {
+                multiple: true,
+                options,
+                value: selectedOptions,
+                onChange: (event, newValues) => {
+                  const values2 = newValues.map((opt) => opt.value);
+                  handleValueChange(values2);
                 },
-                checkboxSx
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            material.Typography,
-            {
-              variant: "body2",
-              sx: [
-                {
-                  color: option.disabled ? "text.disabled" : "text.primary",
-                  ...option.textSx
-                }
-              ],
-              children: option.label || String(option.value)
-            }
-          )
-        ]
-      },
-      option.value
-    );
-    const displayLabel = showSelectedCount && selectedValues.length > 0 ? `${label} (${selectedValues.length} selected)` : label;
-    return /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx, ref, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      material.FormControl,
-      {
-        fullWidth: true,
-        variant,
-        error: isTouched && Boolean(fieldError),
-        disabled,
-        sx: [
-          {
-            "& .MuiInputLabel-root": {
-              "&.Mui-focused": {
-                color: "primary.main"
-              },
-              "&.Mui-error": {
-                color: "error.main"
-              },
-              "&.Mui-disabled": {
-                color: "text.disabled"
-              }
-            }
-          },
-          formControlSx
-        ],
-        children: [
-          label && /* @__PURE__ */ jsxRuntime.jsxs(
-            material.InputLabel,
-            {
-              id: `select-${name}`,
-              sx: [
-                {
-                  color: "text.secondary",
-                  "&.Mui-focused": {
-                    color: "primary.main"
-                  },
-                  "&.Mui-disabled": {
-                    color: "text.disabled"
+                onInputChange: (event, value, reason) => {
+                  if (reason === "input" && onSearchChange) {
+                    handleSearchChange(value);
                   }
                 },
-                labelSx
-              ],
-              children: [
-                displayLabel,
-                required && /* @__PURE__ */ jsxRuntime.jsx(
-                  material.Typography,
+                filterOptions,
+                onBlur: handleBlur,
+                disabled: disabled || isMaxReached,
+                disableCloseOnSelect: true,
+                clearOnBlur: false,
+                clearOnEscape: true,
+                disableClearable: !clearable,
+                getOptionLabel: (option) => option.label,
+                isOptionEqualToValue: (option, value) => option.value === value.value,
+                getOptionDisabled: (option) => !!option.disabled,
+                renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(
+                  material.TextField,
                   {
-                    component: "span",
-                    sx: {
-                      color: "error.main",
-                      ml: 0.5
-                    },
-                    children: "*"
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Select__default.default,
-            {
-              multiple,
-              variant: "outlined",
-              labelId: label ? `select-${name}` : void 0,
-              label: label || void 0,
-              value: selectedValues,
-              onChange: handleChange,
-              onBlur: handleBlur,
-              onOpen,
-              onClose,
-              renderValue: externalRenderValue || defaultRenderValue,
-              MenuProps: {
-                PaperProps: {
-                  sx: {
-                    mt: 1,
-                    boxShadow: theme.shadows[3],
-                    "& .MuiMenuItem-root": {
-                      px: 2,
-                      py: 1
+                    ...params,
+                    label: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      label,
+                      required && /* @__PURE__ */ jsxRuntime.jsx(
+                        material.Typography,
+                        {
+                          sx: { color: "error.main" },
+                          component: "span",
+                          children: " *"
+                        }
+                      )
+                    ] }),
+                    variant,
+                    placeholder,
+                    error: hasError,
+                    helperText: hasError ? fieldError : helperText,
+                    FormHelperTextProps: {
+                      sx: { mx: 0, mt: 0.5 }
                     }
                   }
-                }
-              },
-              sx: [
-                {
-                  backgroundColor: "background.paper",
-                  color: "text.primary",
-                  "& .MuiSvgIcon-root": {
-                    color: "text.secondary",
-                    ...iconSx
-                  },
-                  "& .MuiSelect-icon": {
-                    color: "text.secondary"
-                  },
-                  "& .MuiOutlinedInput-notchedOutline": {
-                    borderColor: "divider"
-                  },
-                  "&:hover .MuiOutlinedInput-notchedOutline": {
-                    borderColor: "primary.main"
-                  },
-                  "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-                    borderColor: "primary.main"
-                  },
-                  "&.Mui-error .MuiOutlinedInput-notchedOutline": {
-                    borderColor: "error.main"
-                  },
-                  "&.Mui-disabled": {
-                    backgroundColor: "action.disabledBackground",
-                    "& .MuiOutlinedInput-notchedOutline": {
-                      borderColor: "action.disabled"
+                ),
+                renderOption: (props, option, { selected }) => /* @__PURE__ */ jsxRuntime.jsxs("li", { ...props, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    material.Checkbox,
+                    {
+                      checked: selected,
+                      disabled: option.disabled || isMaxReached && !selected,
+                      sx: checkboxSx
                     }
-                  },
-                  ...selectSx
-                }
-              ],
-              error: Boolean(fieldError) && isTouched,
-              ...otherProps,
-              children: options.map((option) => {
-                const isSelected = selectedValues.includes(option.value);
-                return renderMenuItem ? renderMenuItem(option, isSelected) : defaultRenderMenuItem(option, isSelected);
-              })
-            }
-          ),
-          (showHelperText || isTouched && fieldError) && /* @__PURE__ */ jsxRuntime.jsx(
-            material.FormHelperText,
-            {
-              sx: [
-                {
-                  mx: 0,
+                  ),
+                  option.icon,
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    material.Typography,
+                    {
+                      variant: "body2",
+                      sx: {
+                        color: option.disabled ? "text.disabled" : "text.primary",
+                        ...option.textSx
+                      },
+                      children: option.label
+                    }
+                  )
+                ] }),
+                renderTags: (value, getTagProps) => /* @__PURE__ */ jsxRuntime.jsx(
+                  material.Box,
+                  {
+                    sx: { display: "flex", flexWrap: "wrap", gap: 0.5, mt: 0.5 },
+                    children: value.map((option, index) => /* @__PURE__ */ React4.createElement(
+                      material.Chip,
+                      {
+                        ...getTagProps({ index }),
+                        key: option.value,
+                        label: option.label,
+                        disabled: disabled || option.disabled,
+                        sx: chipSx,
+                        onDelete: !disabled && !option.disabled ? () => {
+                          const newValues = selectedValues.filter(
+                            (v) => v !== option.value
+                          );
+                          handleValueChange(newValues);
+                        } : void 0
+                      }
+                    ))
+                  }
+                )
+              }
+            ),
+            showSelectedCount && /* @__PURE__ */ jsxRuntime.jsxs(
+              material.Typography,
+              {
+                variant: "caption",
+                sx: {
                   mt: 0.5,
-                  color: isTouched && fieldError ? "error.main" : "text.secondary",
-                  ...isTouched && fieldError ? errorSx : helperTextSx
-                }
-              ],
-              children: isTouched && fieldError ? fieldError : helperText
-            }
-          )
-        ]
-      }
-    ) });
+                  color: isMaxReached ? "error.main" : "text.secondary"
+                },
+                children: [
+                  selectedCount,
+                  " selected",
+                  maxSelections ? ` (max ${maxSelections})` : ""
+                ]
+              }
+            )
+          ]
+        }
+      ) });
+    }
+    if (mode === "dropdown") {
+      const handleSelectChange = (event) => {
+        const {
+          target: { value }
+        } = event;
+        const newValues = typeof value === "string" ? value.split(",") : value;
+        handleValueChange(newValues);
+      };
+      return /* @__PURE__ */ jsxRuntime.jsx(material.Box, { ref, sx, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        material.FormControl,
+        {
+          fullWidth: true,
+          variant,
+          error: hasError,
+          disabled,
+          sx: formControlSx,
+          children: [
+            label && /* @__PURE__ */ jsxRuntime.jsxs(
+              material.Typography,
+              {
+                variant: "body2",
+                sx: {
+                  mb: 1,
+                  color: hasError ? "error.main" : "text.secondary",
+                  ...labelSx
+                },
+                children: [
+                  label,
+                  required && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { color: "error.main" }, component: "span", children: " *" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              material.Select,
+              {
+                multiple: true,
+                value: selectedValues,
+                onChange: handleSelectChange,
+                onBlur: handleBlur,
+                displayEmpty: true,
+                renderValue: (selected) => {
+                  if (selected.length === 0) {
+                    return /* @__PURE__ */ jsxRuntime.jsx("em", { children: placeholder });
+                  }
+                  return /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5 }, children: selected.map((value) => {
+                    const option = options.find((opt) => opt.value === value);
+                    return option ? /* @__PURE__ */ jsxRuntime.jsx(
+                      material.Chip,
+                      {
+                        label: option.label,
+                        size: "small",
+                        sx: chipSx
+                      },
+                      value
+                    ) : null;
+                  }) });
+                },
+                MenuProps: {
+                  PaperProps: {
+                    sx: {
+                      mt: 1,
+                      boxShadow: theme.shadows[3],
+                      maxHeight: 300
+                    }
+                  }
+                },
+                children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
+                  material.MenuItem,
+                  {
+                    value: option.value,
+                    disabled: option.disabled || isMaxReached && !selectedValues.includes(option.value),
+                    sx: option.sx,
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        material.Checkbox,
+                        {
+                          checked: selectedValues.includes(option.value),
+                          disabled: option.disabled,
+                          sx: checkboxSx
+                        }
+                      ),
+                      option.icon,
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        material.Typography,
+                        {
+                          variant: "body2",
+                          sx: {
+                            color: option.disabled ? "text.disabled" : "text.primary",
+                            ...option.textSx
+                          },
+                          children: option.label
+                        }
+                      )
+                    ]
+                  },
+                  option.value
+                ))
+              }
+            ),
+            (helperText || hasError) && /* @__PURE__ */ jsxRuntime.jsx(material.FormHelperText, { error: hasError, sx: { mx: 0, mt: 0.5 }, children: hasError ? fieldError : helperText }),
+            showSelectedCount && /* @__PURE__ */ jsxRuntime.jsxs(
+              material.Typography,
+              {
+                variant: "caption",
+                sx: {
+                  mt: 0.5,
+                  color: isMaxReached ? "error.main" : "text.secondary"
+                },
+                children: [
+                  selectedCount,
+                  " selected",
+                  maxSelections ? ` (max ${maxSelections})` : ""
+                ]
+              }
+            )
+          ]
+        }
+      ) });
+    }
+    return null;
   }
 );
 AppMultiSelector.displayName = "AppMultiSelector";
@@ -1520,8 +1578,8 @@ var AppPhoneNoInput = ({
   withCountryCallingCode = true
 }) => {
   const { values, errors, touched, setFieldValue, setFieldTouched } = formik.useFormikContext();
-  const fieldError = react.useMemo(() => _19__default.default.get(errors, name), [errors, name]);
-  const isTouched = react.useMemo(() => _19__default.default.get(touched, name), [touched, name]);
+  const fieldError = React4.useMemo(() => _19__default.default.get(errors, name), [errors, name]);
+  const isTouched = React4.useMemo(() => _19__default.default.get(touched, name), [touched, name]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     material.Box,
     {
@@ -1612,7 +1670,7 @@ var AppPhoneNoInput = ({
   );
 };
 var AppPhoneNoInput_default = AppPhoneNoInput;
-var AppRadioGroup = react.forwardRef(({
+var AppRadioGroup = React4.forwardRef(({
   name,
   options = [],
   label,
@@ -1772,7 +1830,7 @@ var AppRadioGroup = react.forwardRef(({
 });
 AppRadioGroup.displayName = "AppRadioGroup";
 var AppRadioGroup_default = AppRadioGroup;
-var AppRating = react.forwardRef(
+var AppRating = React4.forwardRef(
   ({
     name,
     label,
@@ -2159,7 +2217,7 @@ function findDiffEnd(a, b, posA, posB) {
     posB -= size;
   }
 }
-var Fragment2 = class {
+var Fragment3 = class {
   /**
   @internal
   */
@@ -2227,7 +2285,7 @@ var Fragment2 = class {
     }
     for (; i < other.content.length; i++)
       content.push(other.content[i]);
-    return new Fragment2(content, this.size + other.size);
+    return new Fragment3(content, this.size + other.size);
   }
   /**
   Cut out the sub-fragment between the two given positions.
@@ -2251,17 +2309,17 @@ var Fragment2 = class {
         }
         pos = end;
       }
-    return new Fragment2(result, size);
+    return new Fragment3(result, size);
   }
   /**
   @internal
   */
   cutByIndex(from, to) {
     if (from == to)
-      return Fragment2.empty;
+      return Fragment3.empty;
     if (from == 0 && to == this.content.length)
       return this;
-    return new Fragment2(this.content.slice(from, to));
+    return new Fragment3(this.content.slice(from, to));
   }
   /**
   Create a new fragment in which the node at the given index is
@@ -2274,21 +2332,21 @@ var Fragment2 = class {
     let copy2 = this.content.slice();
     let size = this.size + node.nodeSize - current.nodeSize;
     copy2[index] = node;
-    return new Fragment2(copy2, size);
+    return new Fragment3(copy2, size);
   }
   /**
   Create a new fragment by prepending the given node to this
   fragment.
   */
   addToStart(node) {
-    return new Fragment2([node].concat(this.content), this.size + node.nodeSize);
+    return new Fragment3([node].concat(this.content), this.size + node.nodeSize);
   }
   /**
   Create a new fragment by appending the given node to this
   fragment.
   */
   addToEnd(node) {
-    return new Fragment2(this.content.concat(node), this.size + node.nodeSize);
+    return new Fragment3(this.content.concat(node), this.size + node.nodeSize);
   }
   /**
   Compare this fragment to another one.
@@ -2407,10 +2465,10 @@ var Fragment2 = class {
   */
   static fromJSON(schema, value) {
     if (!value)
-      return Fragment2.empty;
+      return Fragment3.empty;
     if (!Array.isArray(value))
       throw new RangeError("Invalid input for Fragment.fromJSON");
-    return new Fragment2(value.map(schema.nodeFromJSON));
+    return new Fragment3(value.map(schema.nodeFromJSON));
   }
   /**
   Build a fragment from an array of nodes. Ensures that adjacent
@@ -2418,7 +2476,7 @@ var Fragment2 = class {
   */
   static fromArray(array) {
     if (!array.length)
-      return Fragment2.empty;
+      return Fragment3.empty;
     let joined, size = 0;
     for (let i = 0; i < array.length; i++) {
       let node = array[i];
@@ -2431,7 +2489,7 @@ var Fragment2 = class {
         joined.push(node);
       }
     }
-    return new Fragment2(joined || array, size);
+    return new Fragment3(joined || array, size);
   }
   /**
   Create a fragment from something that can be interpreted as a
@@ -2441,17 +2499,17 @@ var Fragment2 = class {
   */
   static from(nodes) {
     if (!nodes)
-      return Fragment2.empty;
-    if (nodes instanceof Fragment2)
+      return Fragment3.empty;
+    if (nodes instanceof Fragment3)
       return nodes;
     if (Array.isArray(nodes))
       return this.fromArray(nodes);
     if (nodes.attrs)
-      return new Fragment2([nodes], nodes.nodeSize);
+      return new Fragment3([nodes], nodes.nodeSize);
     throw new RangeError("Can not convert " + nodes + " to a Fragment" + (nodes.nodesBetween ? " (looks like multiple versions of prosemirror-model were loaded)" : ""));
   }
 };
-Fragment2.empty = new Fragment2([], 0);
+Fragment3.empty = new Fragment3([], 0);
 var found = { index: 0, offset: 0 };
 function retIndex(index, offset) {
   found.index = index;
@@ -2676,7 +2734,7 @@ var Slice = class {
     let openStart = json.openStart || 0, openEnd = json.openEnd || 0;
     if (typeof openStart != "number" || typeof openEnd != "number")
       throw new RangeError("Invalid input for Slice.fromJSON");
-    return new Slice(Fragment2.fromJSON(schema, json.content), openStart, openEnd);
+    return new Slice(Fragment3.fromJSON(schema, json.content), openStart, openEnd);
   }
   /**
   Create a slice from a fragment by taking the maximum possible
@@ -2691,7 +2749,7 @@ var Slice = class {
     return new Slice(fragment, openStart, openEnd);
   }
 };
-Slice.empty = new Slice(Fragment2.empty, 0, 0);
+Slice.empty = new Slice(Fragment3.empty, 0, 0);
 function removeRange(content, from, to) {
   let { index, offset } = content.findIndex(from), child = content.maybeChild(index);
   let { index: indexTo, offset: offsetTo } = content.findIndex(to);
@@ -2789,7 +2847,7 @@ function replaceThreeWay($from, $start, $end, $to, depth) {
       addNode(close(openEnd, replaceTwoWay($end, $to, depth + 1)), content);
   }
   addRange($to, null, depth, content);
-  return new Fragment2(content);
+  return new Fragment3(content);
 }
 function replaceTwoWay($from, $to, depth) {
   let content = [];
@@ -2799,13 +2857,13 @@ function replaceTwoWay($from, $to, depth) {
     addNode(close(type, replaceTwoWay($from, $to, depth + 1)), content);
   }
   addRange($to, null, depth, content);
-  return new Fragment2(content);
+  return new Fragment3(content);
 }
 function prepareSliceForReplace(slice, $along) {
   let extra = $along.depth - slice.openStart, parent = $along.node(extra);
   let node = parent.copy(slice.content);
   for (let i = extra - 1; i >= 0; i--)
-    node = $along.node(i).copy(Fragment2.from(node));
+    node = $along.node(i).copy(Fragment3.from(node));
   return {
     start: node.resolveNoCache(slice.openStart + extra),
     end: node.resolveNoCache(node.content.size - slice.openEnd - extra)
@@ -3144,7 +3202,7 @@ var Node = class {
     this.type = type;
     this.attrs = attrs;
     this.marks = marks;
-    this.content = content || Fragment2.empty;
+    this.content = content || Fragment3.empty;
   }
   /**
   The array of this node's child nodes.
@@ -3449,7 +3507,7 @@ var Node = class {
   can optionally pass `start` and `end` indices into the
   replacement fragment.
   */
-  canReplace(from, to, replacement = Fragment2.empty, start = 0, end = replacement.childCount) {
+  canReplace(from, to, replacement = Fragment3.empty, start = 0, end = replacement.childCount) {
     let one = this.contentMatchAt(from).matchFragment(replacement, start, end);
     let two = one && one.matchFragment(this.content, to);
     if (!two || !two.validEnd)
@@ -3531,7 +3589,7 @@ var Node = class {
         throw new RangeError("Invalid text node in JSON");
       return schema.text(json.text, marks);
     }
-    let content = Fragment2.fromJSON(schema, json.content);
+    let content = Fragment3.fromJSON(schema, json.content);
     let node = schema.nodeType(json.type).create(json.attrs, content, marks);
     node.type.checkAttrs(node.attrs);
     return node;
@@ -3673,7 +3731,7 @@ var ContentMatch = class {
     function search(match, types) {
       let finished = match.matchFragment(after, startIndex);
       if (finished && (!toEnd || finished.validEnd))
-        return Fragment2.from(types.map((tp) => tp.createAndFill()));
+        return Fragment3.from(types.map((tp) => tp.createAndFill()));
       for (let i = 0; i < match.next.length; i++) {
         let { type, next } = match.next[i];
         if (!(type.isText || type.hasRequiredAttrs()) && seen.indexOf(next) == -1) {
@@ -4125,7 +4183,7 @@ var NodeType = class {
   create(attrs = null, content, marks) {
     if (this.isText)
       throw new Error("NodeType.create can't construct text nodes");
-    return new Node(this, this.computeAttrs(attrs), Fragment2.from(content), Mark.setFrom(marks));
+    return new Node(this, this.computeAttrs(attrs), Fragment3.from(content), Mark.setFrom(marks));
   }
   /**
   Like [`create`](https://prosemirror.net/docs/ref/#model.NodeType.create), but check the given content
@@ -4133,7 +4191,7 @@ var NodeType = class {
   if it doesn't match.
   */
   createChecked(attrs = null, content, marks) {
-    content = Fragment2.from(content);
+    content = Fragment3.from(content);
     this.checkContent(content);
     return new Node(this, this.computeAttrs(attrs), content, Mark.setFrom(marks));
   }
@@ -4147,7 +4205,7 @@ var NodeType = class {
   */
   createAndFill(attrs = null, content, marks) {
     attrs = this.computeAttrs(attrs);
-    content = Fragment2.from(content);
+    content = Fragment3.from(content);
     if (content.size) {
       let before = this.contentMatch.fillBefore(content);
       if (!before)
@@ -4155,7 +4213,7 @@ var NodeType = class {
       content = before.append(content);
     }
     let matched = this.contentMatch.matchFragment(content);
-    let after = matched && matched.fillBefore(Fragment2.empty, true);
+    let after = matched && matched.fillBefore(Fragment3.empty, true);
     if (!after)
       return null;
     return new Node(this, attrs, content.append(after), Mark.setFrom(marks));
@@ -4619,7 +4677,7 @@ var NodeContext = class {
     if (!this.match) {
       if (!this.type)
         return [];
-      let fill = this.type.contentMatch.fillBefore(Fragment2.from(node));
+      let fill = this.type.contentMatch.fillBefore(Fragment3.from(node));
       if (fill) {
         this.match = this.type.contentMatch.matchFragment(fill);
       } else {
@@ -4645,9 +4703,9 @@ var NodeContext = class {
           this.content[this.content.length - 1] = text.withText(text.text.slice(0, text.text.length - m2[0].length));
       }
     }
-    let content = Fragment2.from(this.content);
+    let content = Fragment3.from(this.content);
     if (!openEnd && this.match)
-      content = content.append(this.match.fillBefore(Fragment2.empty, true));
+      content = content.append(this.match.fillBefore(Fragment3.empty, true));
     return this.type ? this.type.create(this.attrs, content, this.marks) : content;
   }
   inlineContext(node) {
@@ -5464,7 +5522,7 @@ function mapFragment(fragment, f, parent) {
       child = f(child, parent, i);
     mapped.push(child);
   }
-  return Fragment2.fromArray(mapped);
+  return Fragment3.fromArray(mapped);
 }
 var AddMarkStep = class extends Step {
   /**
@@ -5581,7 +5639,7 @@ var AddNodeMarkStep = class extends Step {
     if (!node)
       return StepResult.fail("No node at mark step's position");
     let updated = node.type.create(node.attrs, null, this.mark.addToSet(node.marks));
-    return StepResult.fromReplace(doc2, this.pos, this.pos + 1, new Slice(Fragment2.from(updated), 0, node.isLeaf ? 0 : 1));
+    return StepResult.fromReplace(doc2, this.pos, this.pos + 1, new Slice(Fragment3.from(updated), 0, node.isLeaf ? 0 : 1));
   }
   invert(doc2) {
     let node = doc2.nodeAt(this.pos);
@@ -5627,7 +5685,7 @@ var RemoveNodeMarkStep = class extends Step {
     if (!node)
       return StepResult.fail("No node at mark step's position");
     let updated = node.type.create(node.attrs, null, this.mark.removeFromSet(node.marks));
-    return StepResult.fromReplace(doc2, this.pos, this.pos + 1, new Slice(Fragment2.from(updated), 0, node.isLeaf ? 0 : 1));
+    return StepResult.fromReplace(doc2, this.pos, this.pos + 1, new Slice(Fragment3.from(updated), 0, node.isLeaf ? 0 : 1));
   }
   invert(doc2) {
     let node = doc2.nodeAt(this.pos);
@@ -5892,7 +5950,7 @@ function clearIncompatible(tr, pos, parentType, match = parentType.contentMatch,
         let m2, newline = /\r?\n|\r/g, slice;
         while (m2 = newline.exec(child.text)) {
           if (!slice)
-            slice = new Slice(Fragment2.from(parentType.schema.text(" ", parentType.allowedMarks(child.marks))), 0, 0);
+            slice = new Slice(Fragment3.from(parentType.schema.text(" ", parentType.allowedMarks(child.marks))), 0, 0);
           replSteps.push(new ReplaceStep(cur + m2.index, cur + m2.index + m2[0].length, slice));
         }
       }
@@ -5900,7 +5958,7 @@ function clearIncompatible(tr, pos, parentType, match = parentType.contentMatch,
     cur = end;
   }
   if (!match.validEnd) {
-    let fill = match.fillBefore(Fragment2.empty, true);
+    let fill = match.fillBefore(Fragment3.empty, true);
     tr.replace(cur, cur, new Slice(fill, 0, 0));
   }
   for (let i = replSteps.length - 1; i >= 0; i--)
@@ -5930,20 +5988,20 @@ function lift(tr, range, target) {
   let { $from, $to, depth } = range;
   let gapStart = $from.before(depth + 1), gapEnd = $to.after(depth + 1);
   let start = gapStart, end = gapEnd;
-  let before = Fragment2.empty, openStart = 0;
+  let before = Fragment3.empty, openStart = 0;
   for (let d = depth, splitting = false; d > target; d--)
     if (splitting || $from.index(d) > 0) {
       splitting = true;
-      before = Fragment2.from($from.node(d).copy(before));
+      before = Fragment3.from($from.node(d).copy(before));
       openStart++;
     } else {
       start--;
     }
-  let after = Fragment2.empty, openEnd = 0;
+  let after = Fragment3.empty, openEnd = 0;
   for (let d = depth, splitting = false; d > target; d--)
     if (splitting || $to.after(d + 1) < $to.end(d)) {
       splitting = true;
-      after = Fragment2.from($to.node(d).copy(after));
+      after = Fragment3.from($to.node(d).copy(after));
       openEnd++;
     } else {
       end++;
@@ -5983,14 +6041,14 @@ function findWrappingInside(range, type) {
   return inside;
 }
 function wrap(tr, range, wrappers) {
-  let content = Fragment2.empty;
+  let content = Fragment3.empty;
   for (let i = wrappers.length - 1; i >= 0; i--) {
     if (content.size) {
       let match = wrappers[i].type.contentMatch.matchFragment(content);
       if (!match || !match.validEnd)
         throw new RangeError("Wrapper type given to Transform.wrap does not form valid content of its parent wrapper");
     }
-    content = Fragment2.from(wrappers[i].type.create(wrappers[i].attrs, content));
+    content = Fragment3.from(wrappers[i].type.create(wrappers[i].attrs, content));
   }
   let start = range.start, end = range.end;
   tr.step(new ReplaceAroundStep(start, end, start, end, new Slice(content, 0, 0), wrappers.length, true));
@@ -6015,7 +6073,7 @@ function setBlockType(tr, from, to, type, attrs) {
       clearIncompatible(tr, tr.mapping.slice(mapFrom).map(pos, 1), type, void 0, convertNewlines === null);
       let mapping = tr.mapping.slice(mapFrom);
       let startM = mapping.map(pos, 1), endM = mapping.map(pos + node.nodeSize, 1);
-      tr.step(new ReplaceAroundStep(startM, endM, startM + 1, endM - 1, new Slice(Fragment2.from(type.create(attrsHere, null, node.marks)), 0, 0), 1, true));
+      tr.step(new ReplaceAroundStep(startM, endM, startM + 1, endM - 1, new Slice(Fragment3.from(type.create(attrsHere, null, node.marks)), 0, 0), 1, true));
       if (convertNewlines === true)
         replaceNewlines(tr, node, pos, mapFrom);
       return false;
@@ -6056,7 +6114,7 @@ function setNodeMarkup(tr, pos, type, attrs, marks) {
     return tr.replaceWith(pos, pos + node.nodeSize, newNode);
   if (!type.validContent(node.content))
     throw new RangeError("Invalid content for node type " + type.name);
-  tr.step(new ReplaceAroundStep(pos, pos + node.nodeSize, pos + 1, pos + node.nodeSize - 1, new Slice(Fragment2.from(newNode), 0, 0), 1, true));
+  tr.step(new ReplaceAroundStep(pos, pos + node.nodeSize, pos + 1, pos + node.nodeSize - 1, new Slice(Fragment3.from(newNode), 0, 0), 1, true));
 }
 function canSplit(doc2, pos, depth = 1, typesAfter) {
   let $pos = doc2.resolve(pos), base2 = $pos.depth - depth;
@@ -6080,11 +6138,11 @@ function canSplit(doc2, pos, depth = 1, typesAfter) {
   return $pos.node(base2).canReplaceWith(index, index, baseType ? baseType.type : $pos.node(base2 + 1).type);
 }
 function split(tr, pos, depth = 1, typesAfter) {
-  let $pos = tr.doc.resolve(pos), before = Fragment2.empty, after = Fragment2.empty;
+  let $pos = tr.doc.resolve(pos), before = Fragment3.empty, after = Fragment3.empty;
   for (let d = $pos.depth, e = $pos.depth - depth, i = depth - 1; d > e; d--, i--) {
-    before = Fragment2.from($pos.node(d).copy(before));
+    before = Fragment3.from($pos.node(d).copy(before));
     let typeAfter = typesAfter && typesAfter[i];
-    after = Fragment2.from(typeAfter ? typeAfter.type.create(typeAfter.attrs, after) : $pos.node(d).copy(after));
+    after = Fragment3.from(typeAfter ? typeAfter.type.create(typeAfter.attrs, after) : $pos.node(d).copy(after));
   }
   tr.step(new ReplaceStep(pos, pos, new Slice(before.append(after), depth, depth), true));
 }
@@ -6199,7 +6257,7 @@ var Fitter = class {
     this.$to = $to;
     this.unplaced = unplaced;
     this.frontier = [];
-    this.placed = Fragment2.empty;
+    this.placed = Fragment3.empty;
     for (let i = 0; i <= $from.depth; i++) {
       let node = $from.node(i);
       this.frontier.push({
@@ -6208,7 +6266,7 @@ var Fitter = class {
       });
     }
     for (let i = $from.depth; i > 0; i--)
-      this.placed = Fragment2.from($from.node(i).copy(this.placed));
+      this.placed = Fragment3.from($from.node(i).copy(this.placed));
   }
   get depth() {
     return this.frontier.length - 1;
@@ -6265,7 +6323,7 @@ var Fitter = class {
         let first2 = fragment.firstChild;
         for (let frontierDepth = this.depth; frontierDepth >= 0; frontierDepth--) {
           let { type, match } = this.frontier[frontierDepth], wrap2, inject = null;
-          if (pass == 1 && (first2 ? match.matchType(first2.type) || (inject = match.fillBefore(Fragment2.from(first2), false)) : parent && type.compatibleContent(parent.type)))
+          if (pass == 1 && (first2 ? match.matchType(first2.type) || (inject = match.fillBefore(Fragment3.from(first2), false)) : parent && type.compatibleContent(parent.type)))
             return { sliceDepth, frontierDepth, parent, inject };
           else if (pass == 2 && first2 && (wrap2 = match.findWrapping(first2.type)))
             return { sliceDepth, frontierDepth, parent, wrap: wrap2 };
@@ -6325,7 +6383,7 @@ var Fitter = class {
     let toEnd = taken == fragment.childCount;
     if (!toEnd)
       openEndCount = -1;
-    this.placed = addToFragment(this.placed, frontierDepth, Fragment2.from(add));
+    this.placed = addToFragment(this.placed, frontierDepth, Fragment3.from(add));
     this.frontier[frontierDepth].match = match;
     if (toEnd && openEndCount < 0 && parent && parent.type == this.frontier[this.depth].type && this.frontier.length > 1)
       this.closeFrontierNode();
@@ -6382,12 +6440,12 @@ var Fitter = class {
   openFrontierNode(type, attrs = null, content) {
     let top = this.frontier[this.depth];
     top.match = top.match.matchType(type);
-    this.placed = addToFragment(this.placed, this.depth, Fragment2.from(type.create(attrs, content)));
+    this.placed = addToFragment(this.placed, this.depth, Fragment3.from(type.create(attrs, content)));
     this.frontier.push({ type, match: type.contentMatch });
   }
   closeFrontierNode() {
     let open = this.frontier.pop();
-    let add = open.match.fillBefore(Fragment2.empty, true);
+    let add = open.match.fillBefore(Fragment3.empty, true);
     if (add.childCount)
       this.placed = addToFragment(this.placed, this.frontier.length, add);
   }
@@ -6416,7 +6474,7 @@ function closeNodeStart(node, openStart, openEnd) {
   if (openStart > 0) {
     frag = node.type.contentMatch.fillBefore(frag).append(frag);
     if (openEnd <= 0)
-      frag = frag.append(node.type.contentMatch.matchFragment(frag).fillBefore(Fragment2.empty, true));
+      frag = frag.append(node.type.contentMatch.matchFragment(frag).fillBefore(Fragment3.empty, true));
   }
   return node.copy(frag);
 }
@@ -6508,7 +6566,7 @@ function closeFragment(fragment, depth, oldOpen, newOpen, parent) {
   if (depth > newOpen) {
     let match = parent.contentMatchAt(0);
     let start = match.fillBefore(fragment).append(fragment);
-    fragment = start.append(match.matchFragment(start).fillBefore(Fragment2.empty, true));
+    fragment = start.append(match.matchFragment(start).fillBefore(Fragment3.empty, true));
   }
   return fragment;
 }
@@ -6518,7 +6576,7 @@ function replaceRangeWith(tr, from, to, node) {
     if (point != null)
       from = to = point;
   }
-  tr.replaceRange(from, to, new Slice(Fragment2.from(node), 0, 0));
+  tr.replaceRange(from, to, new Slice(Fragment3.from(node), 0, 0));
 }
 function deleteRange(tr, from, to) {
   let $from = tr.doc.resolve(from), $to = tr.doc.resolve(to);
@@ -6566,7 +6624,7 @@ var AttrStep = class extends Step {
       attrs[name] = node.attrs[name];
     attrs[this.attr] = this.value;
     let updated = node.type.create(attrs, null, node.marks);
-    return StepResult.fromReplace(doc2, this.pos, this.pos + 1, new Slice(Fragment2.from(updated), 0, node.isLeaf ? 0 : 1));
+    return StepResult.fromReplace(doc2, this.pos, this.pos + 1, new Slice(Fragment3.from(updated), 0, node.isLeaf ? 0 : 1));
   }
   getMap() {
     return StepMap.empty;
@@ -6701,7 +6759,7 @@ var Transform = class {
   fragment, node, or array of nodes.
   */
   replaceWith(from, to, content) {
-    return this.replace(from, to, new Slice(Fragment2.from(content), 0, 0));
+    return this.replace(from, to, new Slice(Fragment3.from(content), 0, 0));
   }
   /**
   Delete the content between the given positions.
@@ -7203,7 +7261,7 @@ var NodeSelection = class extends Selection {
     return new NodeSelection($pos);
   }
   content() {
-    return new Slice(Fragment2.from(this.node), 0, 0);
+    return new Slice(Fragment3.from(this.node), 0, 0);
   }
   eq(other) {
     return other instanceof NodeSelection && other.anchor == this.anchor;
@@ -7761,10 +7819,10 @@ function deleteBarrier(state, $cut, dispatch, dir) {
   let canDelAfter = !isolated && $cut.parent.canReplace($cut.index(), $cut.index() + 1);
   if (canDelAfter && (conn = (match = before.contentMatchAt(before.childCount)).findWrapping(after.type)) && match.matchType(conn[0] || after.type).validEnd) {
     if (dispatch) {
-      let end = $cut.pos + after.nodeSize, wrap2 = Fragment2.empty;
+      let end = $cut.pos + after.nodeSize, wrap2 = Fragment3.empty;
       for (let i = conn.length - 1; i >= 0; i--)
-        wrap2 = Fragment2.from(conn[i].create(null, wrap2));
-      wrap2 = Fragment2.from(before.copy(wrap2));
+        wrap2 = Fragment3.from(conn[i].create(null, wrap2));
+      wrap2 = Fragment3.from(before.copy(wrap2));
       let tr = state.tr.step(new ReplaceAroundStep($cut.pos - 1, end, $cut.pos, end, new Slice(wrap2, 1, 0), conn.length, true));
       let $joinAt = tr.doc.resolve(end + 2 * conn.length);
       if ($joinAt.nodeAfter && $joinAt.nodeAfter.type == before.type && canJoin(tr.doc, $joinAt.pos))
@@ -7793,9 +7851,9 @@ function deleteBarrier(state, $cut, dispatch, dir) {
       afterDepth++;
     if (at.canReplace(at.childCount, at.childCount, afterText.content)) {
       if (dispatch) {
-        let end = Fragment2.empty;
+        let end = Fragment3.empty;
         for (let i = wrap2.length - 1; i >= 0; i--)
-          end = Fragment2.from(wrap2[i].copy(end));
+          end = Fragment3.from(wrap2[i].copy(end));
         let tr = state.tr.step(new ReplaceAroundStep($cut.pos - wrap2.length, $cut.pos + after.nodeSize, $cut.pos + afterDepth, $cut.pos + after.nodeSize - afterDepth, new Slice(end, wrap2.length, 0), 0, true));
         dispatch(tr.scrollIntoView());
       }
@@ -7900,9 +7958,9 @@ function wrapRangeInList(tr, range, listType, attrs = null) {
   return true;
 }
 function doWrapInList(tr, range, wrappers, joinBefore, listType) {
-  let content = Fragment2.empty;
+  let content = Fragment3.empty;
   for (let i = wrappers.length - 1; i >= 0; i--)
-    content = Fragment2.from(wrappers[i].type.create(wrappers[i].attrs, content));
+    content = Fragment3.from(wrappers[i].type.create(wrappers[i].attrs, content));
   tr.step(new ReplaceAroundStep(range.start - (joinBefore ? 2 : 0), range.end, range.start, range.end, new Slice(content, 0, 0), wrappers.length, true));
   let found2 = 0;
   for (let i = 0; i < wrappers.length; i++)
@@ -7936,7 +7994,7 @@ function liftListItem(itemType) {
 function liftToOuterList(state, dispatch, itemType, range) {
   let tr = state.tr, end = range.end, endOfList = range.$to.end(range.depth);
   if (end < endOfList) {
-    tr.step(new ReplaceAroundStep(end - 1, endOfList, end, endOfList, new Slice(Fragment2.from(itemType.create(null, range.parent.copy())), 1, 0), 1, true));
+    tr.step(new ReplaceAroundStep(end - 1, endOfList, end, endOfList, new Slice(Fragment3.from(itemType.create(null, range.parent.copy())), 1, 0), 1, true));
     range = new NodeRange(tr.doc.resolve(range.$from.pos), tr.doc.resolve(endOfList), range.depth);
   }
   const target = liftTarget(range);
@@ -7960,10 +8018,10 @@ function liftOutOfList(state, dispatch, range) {
     return false;
   let atStart = range.startIndex == 0, atEnd = range.endIndex == list.childCount;
   let parent = $start.node(-1), indexBefore = $start.index(-1);
-  if (!parent.canReplace(indexBefore + (atStart ? 0 : 1), indexBefore + 1, item.content.append(atEnd ? Fragment2.empty : Fragment2.from(list))))
+  if (!parent.canReplace(indexBefore + (atStart ? 0 : 1), indexBefore + 1, item.content.append(atEnd ? Fragment3.empty : Fragment3.from(list))))
     return false;
   let start = $start.pos, end = start + item.nodeSize;
-  tr.step(new ReplaceAroundStep(start - (atStart ? 1 : 0), end + (atEnd ? 1 : 0), start + 1, end - 1, new Slice((atStart ? Fragment2.empty : Fragment2.from(list.copy(Fragment2.empty))).append(atEnd ? Fragment2.empty : Fragment2.from(list.copy(Fragment2.empty))), atStart ? 0 : 1, atEnd ? 0 : 1), atStart ? 0 : 1));
+  tr.step(new ReplaceAroundStep(start - (atStart ? 1 : 0), end + (atEnd ? 1 : 0), start + 1, end - 1, new Slice((atStart ? Fragment3.empty : Fragment3.from(list.copy(Fragment3.empty))).append(atEnd ? Fragment3.empty : Fragment3.from(list.copy(Fragment3.empty))), atStart ? 0 : 1, atEnd ? 0 : 1), atStart ? 0 : 1));
   dispatch(tr.scrollIntoView());
   return true;
 }
@@ -7981,8 +8039,8 @@ function sinkListItem(itemType) {
       return false;
     if (dispatch) {
       let nestedBefore = nodeBefore.lastChild && nodeBefore.lastChild.type == parent.type;
-      let inner = Fragment2.from(nestedBefore ? itemType.create() : null);
-      let slice = new Slice(Fragment2.from(itemType.create(null, Fragment2.from(parent.type.create(null, inner)))), nestedBefore ? 3 : 1, 0);
+      let inner = Fragment3.from(nestedBefore ? itemType.create() : null);
+      let slice = new Slice(Fragment3.from(itemType.create(null, Fragment3.from(parent.type.create(null, inner)))), nestedBefore ? 3 : 1, 0);
       let before = range.start, after = range.end;
       dispatch(state.tr.step(new ReplaceAroundStep(before - (nestedBefore ? 3 : 1), after, before, after, slice, 1, true)).scrollIntoView());
     }
@@ -8601,7 +8659,7 @@ function elementFromString(value) {
   return removeWhitespaces(html);
 }
 function createNodeFromContent(content, schema, options) {
-  if (content instanceof Node || content instanceof Fragment2) {
+  if (content instanceof Node || content instanceof Fragment3) {
     return content;
   }
   options = {
@@ -8615,7 +8673,7 @@ function createNodeFromContent(content, schema, options) {
     try {
       const isArrayContent = Array.isArray(content) && content.length > 0;
       if (isArrayContent) {
-        return Fragment2.fromArray(content.map((item) => schema.nodeFromJSON(item)));
+        return Fragment3.fromArray(content.map((item) => schema.nodeFromJSON(item)));
       }
       const node = schema.nodeFromJSON(content);
       if (options.errorOnInvalidContent) {
@@ -8762,7 +8820,7 @@ var insertContentAt = (position, value, options) => ({ tr, dispatch, editor }) =
     if (isOnlyTextContent) {
       if (Array.isArray(value)) {
         newContent = value.map((v) => v.text || "").join("");
-      } else if (value instanceof Fragment2) {
+      } else if (value instanceof Fragment3) {
         let text = "";
         value.forEach((node) => {
           if (node.text) {
@@ -9633,10 +9691,10 @@ var splitListItem = (typeOrName, overrideAttrs = {}) => ({ tr, state, dispatch,
       return false;
     }
     if (dispatch) {
-      let wrap2 = Fragment2.empty;
+      let wrap2 = Fragment3.empty;
       const depthBefore = $from.index(-1) ? 1 : $from.index(-2) ? 2 : 3;
       for (let d = $from.depth - depthBefore; d >= $from.depth - 3; d -= 1) {
-        wrap2 = Fragment2.from($from.node(d).copy(wrap2));
+        wrap2 = Fragment3.from($from.node(d).copy(wrap2));
       }
       const depthAfter = (
         // eslint-disable-next-line no-nested-ternary
@@ -9647,7 +9705,7 @@ var splitListItem = (typeOrName, overrideAttrs = {}) => ({ tr, state, dispatch,
         ...overrideAttrs
       };
       const nextType2 = ((_a = type.contentMatch.defaultType) == null ? void 0 : _a.createAndFill(newNextTypeAttributes2)) || void 0;
-      wrap2 = wrap2.append(Fragment2.from(type.createAndFill(null, nextType2) || void 0));
+      wrap2 = wrap2.append(Fragment3.from(type.createAndFill(null, nextType2) || void 0));
       const start = $from.before($from.depth - (depthBefore - 1));
       tr.replace(start, $from.after(-depthAfter), new Slice(wrap2, 4 - depthBefore, 0));
       let sel = -1;
@@ -11087,9 +11145,9 @@ var AppRichTextEditor = ({
 }) => {
   material.useTheme();
   const { values, setFieldValue } = formik.useFormikContext();
-  const [linkDialogOpen, setLinkDialogOpen] = react.useState(false);
-  const [linkUrl, setLinkUrl] = react.useState("");
-  const editor = react$2.useEditor({
+  const [linkDialogOpen, setLinkDialogOpen] = React4.useState(false);
+  const [linkUrl, setLinkUrl] = React4.useState("");
+  const editor = react$1.useEditor({
     extensions: [
       StarterKit__default.default,
       index_default,
@@ -11101,7 +11159,7 @@ var AppRichTextEditor = ({
       setFieldValue(name, editor2.getHTML());
     }
   });
-  react.useEffect(() => {
+  React4.useEffect(() => {
     if (editor && values[name] !== editor.getHTML()) {
       editor.commands.setContent(values[name] || "");
     }
@@ -11359,7 +11417,7 @@ var AppRichTextEditor = ({
           ...editorSx
         },
         children: /* @__PURE__ */ jsxRuntime.jsx(
-          react$2.EditorContent,
+          react$1.EditorContent,
           {
             editor,
             placeholder: placeholder || "Start typing..."
@@ -11433,7 +11491,7 @@ var AppRichTextEditor = ({
   ] });
 };
 var AppRichTextEditor_default = AppRichTextEditor;
-var AppSearchableMultiSelector = react.forwardRef(
+var AppSearchableMultiSelector = React4.forwardRef(
   ({
     name,
     label,
@@ -11613,7 +11671,7 @@ var AppSearchableMultiSelector = react.forwardRef(
         ...textFieldProps
       }
     );
-    const defaultRenderOption = (props, option, { selected }) => /* @__PURE__ */ react.createElement(
+    const defaultRenderOption = (props, option, { selected }) => /* @__PURE__ */ React4.createElement(
       "li",
       {
         ...props,
@@ -11662,7 +11720,7 @@ var AppSearchableMultiSelector = react.forwardRef(
     );
     const defaultRenderTags = (value, getTagProps) => /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5, mt: 0.5 }, children: value.map((option, index) => {
       const { key, ...tagProps } = getTagProps({ index });
-      return /* @__PURE__ */ react.createElement(
+      return /* @__PURE__ */ React4.createElement(
         material.Chip,
         {
           ...tagProps,
@@ -11868,743 +11926,324 @@ var AppSearchableMultiSelector = react.forwardRef(
 );
 AppSearchableMultiSelector.displayName = "AppSearchableMultiSelector";
 var AppSearchableMultiSelector_default = AppSearchableMultiSelector;
-var AppSearchableMultiSelector2 = react.forwardRef((props, ref) => {
-  const {
+function AppSearchableSelectInput({
+  name,
+  label,
+  options = [],
+  required = false,
+  variant = "outlined",
+  placeholder,
+  setSearchQuery,
+  isResetRequired,
+  ...otherProps
+}) {
+  const { errors, touched, setFieldValue, values } = formik.useFormikContext();
+  const fieldError = _19__default.default.get(errors, name);
+  const isTouched = _19__default.default.get(touched, name);
+  const val = _19__default.default.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__ */ jsxRuntime.jsx(
+    material.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__ */ jsxRuntime.jsx(
+        material.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__ */ jsxRuntime.jsx(
+            material.TextField,
+            {
+              ...params,
+              onChange: handleSearchChange,
+              label: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                label,
+                required && /* @__PURE__ */ jsxRuntime.jsx(material.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 = React4.forwardRef(
+  ({
     name,
     label,
-    multiple = true,
+    mode = "autocomplete",
     options = [],
-    setSearchQuery,
     required = false,
-    variant = "outlined",
     disabled = false,
-    readOnly = false,
-    showHelperText = false,
+    showNoneOption = false,
+    noneOptionText = "None",
     helperText,
-    maxSelections,
-    showSelectedCount = false,
+    variant = "outlined",
+    placeholder,
+    onSearchChange,
+    onChange: externalOnChange,
     sx,
     formControlSx,
     labelSx,
-    inputSx,
-    textFieldSx,
-    autocompleteSx,
-    listboxSx,
-    optionSx,
-    chipSx,
-    errorSx,
-    helperTextSx,
-    selectedCountSx,
-    renderInput: externalRenderInput,
-    renderOption: externalRenderOption,
-    renderTags: externalRenderTags,
-    renderGroup: externalRenderGroup,
-    labelComponent: LabelComponent = material.InputLabel,
-    inputComponent: InputComponent = "input",
-    errorComponent: ErrorComponent = material.Typography,
-    helperTextComponent: HelperTextComponent = material.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
-  } = props;
-  material.useTheme();
-  const { values, setFieldValue, errors, touched, setFieldTouched } = formik.useFormikContext();
-  const fieldError = _19__default.default.get(errors, name);
-  const isTouched = Boolean(_19__default.default.get(touched, name));
-  const hasError = Boolean(fieldError) && isTouched;
-  const val = _19__default.default.get(values, name);
-  const selectedValues = Array.isArray(val) ? val : [];
-  const selectedCount = selectedValues.length;
-  const handleChange = react.useCallback(
-    (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) {
-        onMaxSelectionsReached == null ? void 0 : 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)
-        );
-        added.forEach((item) => onAdd == null ? void 0 : onAdd(item));
-        removed.forEach((item) => onRemove == null ? void 0 : onRemove(item));
+    searchDebounce = 300,
+    clearable = true
+  }, ref) => {
+    const theme = material.useTheme();
+    const { values, setFieldValue, errors, touched, setFieldTouched } = formik.useFormikContext();
+    const fieldError = _19__default.default.get(errors, name);
+    const isTouched = Boolean(_19__default.default.get(touched, name));
+    const hasError = Boolean(fieldError) && isTouched;
+    const currentValue = _19__default.default.get(values, name);
+    const handleValueChange = (newValue) => {
+      setFieldValue(name, newValue, true);
+      if (externalOnChange) {
+        externalOnChange(newValue);
       }
-      setFieldValue(name, normalizedValue, true);
-      externalOnChange == null ? void 0 : externalOnChange(event, normalizedValue, reason);
-    },
-    [
-      maxSelections,
-      selectedValues,
-      setFieldValue,
-      name,
-      onMaxSelectionsReached,
-      onAdd,
-      onRemove,
-      externalOnChange
-    ]
-  );
-  const handleInputChange = react.useCallback(
-    (event, value, reason) => {
-      setSearchQuery == null ? void 0 : setSearchQuery(value);
-      externalOnInputChange == null ? void 0 : externalOnInputChange(event, value, reason);
-    },
-    [setSearchQuery, externalOnInputChange]
-  );
-  const handleBlur = react.useCallback(
-    (event) => {
+    };
+    const handleBlur = () => {
       setFieldTouched(name, true, true);
-      externalOnBlur == null ? void 0 : externalOnBlur(event);
-    },
-    [name, setFieldTouched, externalOnBlur]
-  );
-  const handleFocus = react.useCallback(
-    (event) => {
-      externalOnFocus == null ? void 0 : externalOnFocus(event);
-    },
-    [externalOnFocus]
-  );
-  const filterOptions = react.useCallback(
-    (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 selectedOption = options.find((opt) => opt.value === currentValue) || null;
+    if (mode === "autocomplete") {
+      const debouncedSearch = React4__default.default.useRef();
+      const handleSearchChange = (query) => {
+        if (debouncedSearch.current) {
+          clearTimeout(debouncedSearch.current);
         }
-      );
-    },
-    []
-  );
-  const defaultRenderInput = react.useCallback(
-    (params) => /* @__PURE__ */ jsxRuntime.jsx(
-      material.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"
-              }
-            }
-          },
-          ...Array.isArray(textFieldSx) ? textFieldSx : textFieldSx ? [textFieldSx] : []
-        ],
-        ...textFieldProps
-      }
-    ),
-    [
-      variant,
-      hasError,
-      inputProps,
-      inputClassName,
-      textFieldProps,
-      textFieldClassName,
-      textFieldSx
-    ]
-  );
-  const defaultRenderOption = react.useCallback(
-    (props2, option, { selected }) => /* @__PURE__ */ react.createElement(
-      "li",
-      {
-        ...props2,
-        key: option.value,
-        className: `${props2.className || ""} ${optionClassName}`.trim(),
-        style: {
-          ...props2.style,
-          opacity: option.disabled ? 0.5 : 1,
-          pointerEvents: option.disabled ? "none" : "auto"
-        }
-      },
-      /* @__PURE__ */ jsxRuntime.jsx(
-        material.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__ */ jsxRuntime.jsx(material.Box, { component: "span", sx: { mr: 1 }, children: option.icon }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        material.Typography,
-        {
-          variant: "body2",
-          sx: [
-            {
-              color: option.disabled ? "text.disabled" : "text.primary",
-              ...option.textSx
-            },
-            ...Array.isArray(optionSx) ? optionSx : [optionSx]
-          ],
-          children: option.label
-        }
-      )
-    ),
-    [optionClassName, checkboxProps, optionSx]
-  );
-  const defaultRenderTags = react.useCallback(
-    (value, getTagProps) => /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5, mt: 0.5 }, children: value.map((option, index) => {
-      const { key, ...tagProps } = getTagProps({ index });
-      return /* @__PURE__ */ react.createElement(
-        material.Chip,
+        debouncedSearch.current = setTimeout(() => {
+          if (onSearchChange) {
+            onSearchChange(query);
+          }
+        }, searchDebounce);
+      };
+      const filterOptions = (options2, { inputValue }) => {
+        if (!inputValue)
+          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));
+          }
+        );
+      };
+      return /* @__PURE__ */ jsxRuntime.jsx(material.Box, { ref, sx, children: /* @__PURE__ */ jsxRuntime.jsx(
+        material.FormControl,
         {
-          ...tagProps,
-          key: option.value,
-          label: option.label,
-          disabled: disabled || option.disabled,
-          sx: [
+          fullWidth: true,
+          error: hasError,
+          disabled,
+          sx: formControlSx,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            material.Autocomplete,
             {
-              height: "24px",
-              borderRadius: "4px",
-              "& .MuiChip-deleteIcon": {
-                color: "text.secondary",
-                "&:hover": {
-                  color: "text.primary"
+              options,
+              value: selectedOption,
+              onChange: (event, newValue) => {
+                handleValueChange((newValue == null ? void 0 : newValue.value) || "");
+              },
+              onInputChange: (event, value, reason) => {
+                if (reason === "input" && onSearchChange) {
+                  handleSearchChange(value);
                 }
-              }
-            },
-            ...Array.isArray(chipSx) ? chipSx : [chipSx]
-          ],
-          className: `${chipClassName} ${option.disabled ? "Mui-disabled" : ""}`.trim(),
-          ...chipProps
+              },
+              filterOptions,
+              onBlur: handleBlur,
+              disabled,
+              clearOnBlur: false,
+              clearOnEscape: true,
+              disableClearable: !clearable,
+              getOptionLabel: (option) => option.label,
+              isOptionEqualToValue: (option, value) => option.value === value.value,
+              getOptionDisabled: (option) => !!option.disabled,
+              renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(
+                material.TextField,
+                {
+                  ...params,
+                  label: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    label,
+                    required && /* @__PURE__ */ jsxRuntime.jsx(
+                      material.Typography,
+                      {
+                        sx: { color: "error.main" },
+                        component: "span",
+                        children: " *"
+                      }
+                    )
+                  ] }),
+                  variant,
+                  placeholder,
+                  error: hasError,
+                  helperText: hasError ? fieldError : helperText,
+                  FormHelperTextProps: {
+                    sx: { mx: 0, mt: 0.5 }
+                  }
+                }
+              ),
+              renderOption: (props, option) => /* @__PURE__ */ jsxRuntime.jsxs("li", { ...props, children: [
+                option.icon,
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  material.Typography,
+                  {
+                    variant: "body2",
+                    sx: {
+                      color: option.disabled ? "text.disabled" : "text.primary",
+                      ...option.textSx
+                    },
+                    children: option.label
+                  }
+                )
+              ] })
+            }
+          )
         }
-      );
-    }) }),
-    [disabled, chipSx, chipClassName, chipProps]
-  );
-  const renderSelectedCount = react.useCallback(() => {
-    if (!showSelectedCount || !multiple)
-      return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      material.Typography,
-      {
-        variant: "caption",
-        sx: [
-          {
-            mt: 0.5,
-            color: "text.secondary"
-          },
-          ...Array.isArray(selectedCountSx) ? selectedCountSx : [selectedCountSx]
-        ],
-        children: [
-          `${selectedCount} selected`,
-          maxSelections ? ` (max ${maxSelections})` : ""
-        ]
-      }
-    );
-  }, [
-    showSelectedCount,
-    multiple,
-    selectedCount,
-    maxSelections,
-    selectedCountSx
-  ]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    material.Box,
-    {
-      ref,
-      className: `app-searchable-multi-selector ${className}`.trim(),
-      sx: [{ width: "100%" }, ...Array.isArray(sx) ? sx : sx ? [sx] : []],
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
+      ) });
+    }
+    if (mode === "dropdown") {
+      const handleSelectChange = (event) => {
+        const newValue = event.target.value;
+        handleValueChange(newValue);
+      };
+      return /* @__PURE__ */ jsxRuntime.jsx(material.Box, { ref, sx, children: /* @__PURE__ */ jsxRuntime.jsxs(
         material.FormControl,
         {
           fullWidth: true,
+          variant,
           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] : []
-          ],
+          sx: formControlSx,
           children: [
             label && /* @__PURE__ */ jsxRuntime.jsxs(
-              LabelComponent,
+              material.Typography,
               {
-                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,
+                variant: "body2",
+                sx: {
+                  mb: 1,
+                  color: hasError ? "error.main" : "text.secondary",
+                  ...labelSx
+                },
                 children: [
                   label,
-                  required && /* @__PURE__ */ jsxRuntime.jsx(material.Box, { component: "span", sx: { color: "error.main", ml: 0.5 }, children: "*" })
+                  required && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { color: "error.main" }, component: "span", children: " *" })
                 ]
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              material.Autocomplete,
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              material.Select,
               {
-                multiple,
-                id: `autocomplete-${name}`,
-                options,
-                value: selectedValues,
-                filterOptions,
-                onInputChange: handleInputChange,
-                onChange: handleChange,
-                onOpen,
-                onClose,
+                value: currentValue != null ? currentValue : "",
+                onChange: handleSelectChange,
                 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] : []
-                  ]
+                displayEmpty: true,
+                renderValue: (selected) => {
+                  if (selected === "") {
+                    return /* @__PURE__ */ jsxRuntime.jsx("em", { children: placeholder || noneOptionText });
+                  }
+                  const option = options.find((opt) => opt.value === selected);
+                  return (option == null ? void 0 : option.label) || String(selected);
                 },
-                className: `app-searchable-multi-selector-autocomplete ${autocompleteClassName}`.trim(),
-                sx: [
-                  {
-                    "& .MuiAutocomplete-tag": {
-                      margin: 0,
-                      height: "auto"
-                    },
-                    "& .MuiAutocomplete-endAdornment": {
-                      right: 8
+                MenuProps: {
+                  PaperProps: {
+                    sx: {
+                      mt: 1,
+                      boxShadow: theme.shadows[3],
+                      maxHeight: 300
                     }
-                  },
-                  ...Array.isArray(autocompleteSx) ? autocompleteSx : autocompleteSx ? [autocompleteSx] : []
-                ],
-                ...autocompleteProps,
-                ...otherProps
-              }
-            ),
-            (showHelperText || hasError) && /* @__PURE__ */ jsxRuntime.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
+                },
+                children: [
+                  showNoneOption && /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: "", children: /* @__PURE__ */ jsxRuntime.jsx("em", { children: noneOptionText }) }),
+                  options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
+                    material.MenuItem,
+                    {
+                      value: option.value,
+                      disabled: option.disabled,
+                      sx: option.sx,
+                      children: [
+                        option.icon,
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          material.Typography,
+                          {
+                            variant: "body2",
+                            sx: {
+                              color: option.disabled ? "text.disabled" : "text.primary",
+                              ...option.textSx
+                            },
+                            children: option.label
+                          }
+                        )
+                      ]
+                    },
+                    option.value
+                  ))
+                ]
               }
             ),
-            renderSelectedCount()
+            (helperText || hasError) && /* @__PURE__ */ jsxRuntime.jsx(material.FormHelperText, { error: hasError, sx: { mx: 0, mt: 0.5 }, children: hasError ? fieldError : helperText })
           ]
         }
-      )
+      ) });
     }
-  );
-});
-AppSearchableMultiSelector2.displayName = "AppSearchableMultiSelector";
-var AppSearchableSelect_default = AppSearchableMultiSelector2;
-var AppSelectInput = react.forwardRef(
-  ({
-    name,
-    variant = "outlined",
-    label,
-    fullWidth = true,
-    required = false,
-    disabled = false,
-    readOnly = false,
-    options = [],
-    showNoneOption = false,
-    noneOptionText = "None",
-    showHelperText = false,
-    helperText,
-    sx,
-    formControlSx,
-    selectSx,
-    inputSx,
-    labelSx,
-    menuPaperSx,
-    menuItemSx,
-    selectedMenuItemSx,
-    errorSx,
-    helperTextSx,
-    iconSx,
-    labelComponent: LabelComponent = material.InputLabel,
-    errorComponent: ErrorComponent = material.Typography,
-    helperTextComponent: HelperTextComponent = material.FormHelperText,
-    onChange: externalOnChange,
-    onOpen,
-    onClose,
-    onBlur: externalOnBlur,
-    renderValue,
-    renderMenuItem,
-    MenuProps,
-    inputProps,
-    ...otherProps
-  }, ref) => {
-    const theme = material.useTheme();
-    const { errors, touched, values, setFieldValue, setFieldTouched } = formik.useFormikContext();
-    const fieldError = _19__default.default.get(errors, name);
-    const isTouched = _19__default.default.get(touched, name);
-    const hasError = Boolean(fieldError) && isTouched;
-    const value = _19__default.default.get(values, name);
-    const handleChange = (event, child) => {
-      setFieldValue(name, event.target.value, true);
-      if (externalOnChange) {
-        externalOnChange(event, child);
-      }
-    };
-    const handleBlur = (event) => {
-      setFieldTouched(name, true, true);
-      if (externalOnBlur) {
-        externalOnBlur(event);
-      }
-    };
-    const renderDefaultMenuItem = (option, index) => {
-      const MenuItemComponent = option.component || material.MenuItem;
-      const menuItemProps = option.component ? option.componentProps : {};
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        MenuItemComponent,
-        {
-          value: option.value,
-          disabled: option.disabled,
-          ...menuItemProps,
-          sx: [
-            {
-              color: "text.primary",
-              "&.Mui-selected": {
-                backgroundColor: "action.selected",
-                "&:hover": {
-                  backgroundColor: "action.hover"
-                },
-                ...selectedMenuItemSx
-              },
-              "&.Mui-disabled": {
-                opacity: 0.5,
-                pointerEvents: "none"
-              },
-              ...option.sx
-            },
-            ...Array.isArray(menuItemSx) ? menuItemSx : [menuItemSx]
-          ],
-          children: [
-            option.icon && /* @__PURE__ */ jsxRuntime.jsx(material.Box, { component: "span", sx: { mr: 1 }, children: option.icon }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              material.Typography,
-              {
-                variant: "body2",
-                sx: [
-                  {
-                    color: option.disabled ? "text.disabled" : "text.primary",
-                    ...option.textSx
-                  }
-                ],
-                children: option.label
-              }
-            )
-          ]
-        },
-        `${option.value}-${index}`
-      );
-    };
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      material.Box,
-      {
-        ref,
-        className: "app-select-input",
-        sx: [
-          {
-            width: fullWidth ? "100%" : "auto"
-          },
-          ...Array.isArray(sx) ? sx : [sx].filter(Boolean)
-        ],
-        children: /* @__PURE__ */ jsxRuntime.jsxs(
-          material.FormControl,
-          {
-            fullWidth,
-            variant,
-            error: hasError,
-            disabled,
-            className: "app-select-form-control",
-            sx: [
-              {
-                position: "relative",
-                "& .MuiOutlinedInput-notchedOutline": {
-                  borderWidth: "1px"
-                },
-                "& .MuiInputLabel-root": {
-                  position: "relative",
-                  transform: "none",
-                  fontSize: "0.875rem",
-                  mb: 1,
-                  "&.Mui-focused": {
-                    color: hasError ? "error.main" : "primary.main"
-                  },
-                  "&.Mui-disabled": {
-                    color: "text.disabled"
-                  }
-                },
-                "& .MuiInputLabel-shrink": {
-                  transform: "none"
-                }
-              },
-              ...Array.isArray(formControlSx) ? formControlSx : formControlSx ? [formControlSx] : []
-            ],
-            children: [
-              label && /* @__PURE__ */ jsxRuntime.jsxs(
-                LabelComponent,
-                {
-                  id: `select-${name}-label`,
-                  htmlFor: `select-${name}`,
-                  className: "app-select-label",
-                  shrink: false,
-                  sx: [
-                    {
-                      position: "relative",
-                      transform: "none",
-                      fontSize: "0.875rem",
-                      fontWeight: 500,
-                      color: hasError ? "error.main" : "text.secondary",
-                      mb: 1,
-                      "&.Mui-focused": {
-                        color: hasError ? "error.main" : "primary.main"
-                      },
-                      "&.Mui-disabled": {
-                        color: "text.disabled"
-                      }
-                    },
-                    ...Array.isArray(labelSx) ? labelSx : [labelSx].filter(Boolean)
-                  ],
-                  children: [
-                    label,
-                    required && /* @__PURE__ */ jsxRuntime.jsx(
-                      material.Box,
-                      {
-                        component: "span",
-                        sx: {
-                          color: "error.main",
-                          ml: 0.5
-                        },
-                        children: "*"
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                Select__default.default,
-                {
-                  variant: "outlined",
-                  labelId: label ? `select-${name}-label` : void 0,
-                  id: `select-${name}`,
-                  name,
-                  value: value != null ? value : "",
-                  onChange: handleChange,
-                  onBlur: handleBlur,
-                  onOpen,
-                  onClose,
-                  renderValue,
-                  label: void 0,
-                  displayEmpty: true,
-                  inputProps: {
-                    readOnly,
-                    ...inputProps
-                  },
-                  MenuProps: {
-                    PaperProps: {
-                      sx: [
-                        {
-                          mt: 1,
-                          boxShadow: theme.shadows[3],
-                          maxHeight: 300,
-                          "& .MuiMenuItem-root": {
-                            px: 2,
-                            py: 1,
-                            "&.Mui-selected": {
-                              backgroundColor: "action.selected",
-                              "&:hover": {
-                                backgroundColor: "action.hover"
-                              }
-                            }
-                          },
-                          ...Array.isArray(menuPaperSx) ? menuPaperSx : [menuPaperSx]
-                        }
-                      ]
-                    },
-                    ...MenuProps
-                  },
-                  sx: [
-                    {
-                      "& .MuiSelect-select": {
-                        minHeight: "1.4375em",
-                        padding: "16.5px 14px",
-                        "&.MuiInputBase-input": {
-                          padding: "16.5px 14px"
-                        }
-                      },
-                      "&.MuiOutlinedInput-root": {
-                        "& fieldset": {
-                          borderWidth: "1px"
-                        },
-                        "&:hover fieldset": {
-                          borderWidth: "1px"
-                        },
-                        "&.Mui-focused fieldset": {
-                          borderWidth: "2px"
-                        }
-                      },
-                      "&.Mui-disabled": {
-                        backgroundColor: "action.disabledBackground",
-                        "& .MuiOutlinedInput-notchedOutline": {
-                          borderColor: "action.disabled"
-                        },
-                        "& .MuiSelect-icon": {
-                          color: "action.disabled"
-                        }
-                      }
-                    },
-                    ...Array.isArray(selectSx) ? selectSx : selectSx ? [selectSx] : []
-                  ],
-                  ...otherProps,
-                  children: [
-                    showNoneOption && /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: "", children: /* @__PURE__ */ jsxRuntime.jsx("em", { children: noneOptionText }) }),
-                    options.map(
-                      (option, index) => renderMenuItem ? renderMenuItem(option, index) : renderDefaultMenuItem(option, index)
-                    )
-                  ]
-                }
-              ),
-              (showHelperText || hasError) && /* @__PURE__ */ jsxRuntime.jsx(
-                HelperTextComponent,
-                {
-                  error: hasError,
-                  sx: [
-                    {
-                      mx: 0,
-                      mt: 0.5,
-                      fontSize: "0.75rem",
-                      ...hasError ? {
-                        color: "error.main",
-                        ...errorSx
-                      } : {
-                        color: "text.secondary",
-                        ...helperTextSx
-                      }
-                    }
-                  ],
-                  children: hasError ? fieldError : helperText
-                }
-              )
-            ]
-          }
-        )
-      }
-    );
+    return null;
   }
 );
 AppSelectInput.displayName = "AppSelectInput";
@@ -13022,7 +12661,7 @@ function getRatio(ratio = "1/1") {
   }[ratio];
 }
 var TRANSPARENT_PNG = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AApIBgX6cJqkAAAAASUVORK5CYII=";
-var Image = react.forwardRef(
+var Image = React4.forwardRef(
   ({
     ratio,
     disabledEffect = false,
@@ -13200,8 +12839,8 @@ function MultiFilePreview({
   if ((files == null ? void 0 : files.length) == null) {
     return null;
   }
-  const [anchorEl, setAnchorEl] = react.useState(null);
-  const [selectedFile, setSelectedFile] = react.useState(null);
+  const [anchorEl, setAnchorEl] = React4.useState(null);
+  const [selectedFile, setSelectedFile] = React4.useState(null);
   const canViewPrivate = true;
   return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, children: files.map((file) => {
     const typedFile = file;
@@ -13482,7 +13121,7 @@ function BackgroundIllustration() {
     )
   ] });
 }
-var BackgroundIllustration_default = react.memo(BackgroundIllustration);
+var BackgroundIllustration_default = React4.memo(BackgroundIllustration);
 function UploadIllustration({ ...other }) {
   const theme = styles.useTheme();
   const PRIMARY_MAIN = theme.palette.primary.main;
@@ -14036,7 +13675,7 @@ function UploadIllustration({ ...other }) {
     )
   ] }) });
 }
-var UploadIllustration_default = react.memo(UploadIllustration);
+var UploadIllustration_default = React4.memo(UploadIllustration);
 var StyledDropZone = styles.styled("div")(({ theme }) => ({
   outline: "none",
   cursor: "pointer",
@@ -14314,7 +13953,7 @@ var SubmitButton = ({
   ...rest
 }) => {
   const { submitForm, isSubmitting } = formik.useFormikContext();
-  const [isLoading, setIsLoading] = react.useState(false);
+  const [isLoading, setIsLoading] = React4.useState(false);
   const handleClick = async () => {
     try {
       setIsLoading(true);
@@ -14382,7 +14021,7 @@ exports.AppRadioGroup = AppRadioGroup_default;
 exports.AppRating = AppRating_default;
 exports.AppRichTextEditor = AppRichTextEditor_default;
 exports.AppSearchableMultiSelector = AppSearchableMultiSelector_default;
-exports.AppSearchableSelectInput = AppSearchableSelect_default;
+exports.AppSearchableSelectInput = AppSearchableSelectInput;
 exports.AppSelectInput = AppSelectInput_default;
 exports.AppSimpleUploadFile = AppSimpleUploadFile_default;
 exports.AppSwitch = AppSwitch;