formik-form-components 0.2.26 → 0.2.28

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { useFormikContext, Formik, Form as Form$1, ErrorMessage } from 'formik';
-import { forwardRef, useCallback, createElement, memo, useState, useMemo, useEffect } from 'react';
-import { Box, useTheme, FormControl, Typography, FormHelperText, TextField, InputLabel, FormLabel, RadioGroup, FormControlLabel, Radio, Stack, Rating, Autocomplete, Checkbox, Chip, MenuItem, Switch, InputAdornment, IconButton, Tooltip, Dialog, DialogTitle, DialogContent, DialogActions, Button, CircularProgress, Paper, Menu } from '@mui/material';
+import React4, { forwardRef, createElement, memo, useState, useMemo, useEffect } from 'react';
+import { Box, useTheme, FormControl, Typography, FormHelperText, TextField, Autocomplete, Checkbox, Chip, Select, MenuItem, FormLabel, RadioGroup, FormControlLabel, Radio, Stack, Rating, InputLabel, Switch, InputAdornment, IconButton, Tooltip, Dialog, DialogTitle, DialogContent, DialogActions, Button, CircularProgress, Paper, Menu } from '@mui/material';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
@@ -11,7 +11,6 @@ import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 import Autocomplete3 from '@mui/material/Autocomplete';
 import Typography9 from '@mui/material/Typography';
 import { Icon } from '@iconify/react';
-import Select from '@mui/material/Select';
 import PhoneInput from 'react-phone-number-input';
 import 'react-phone-number-input/style.css';
 import { useEditor, EditorContent } from '@tiptap/react';
@@ -651,25 +650,30 @@ function AppSwitchInput({
     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__ */ jsx(
           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
           }
         ),
@@ -682,25 +686,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
           }
         ),
@@ -708,12 +714,14 @@ function AppSwitchInput({
           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
           }
@@ -745,21 +753,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__ */ jsx(
           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
           }
         ),
@@ -771,25 +784,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
           }
         ),
@@ -797,12 +812,14 @@ function AppSwitch({
           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
           }
@@ -1199,280 +1216,321 @@ function AppInputField({
 }
 var AppMultiSelector = 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 = useTheme();
-    const { errors, touched, values, setFieldValue, setFieldTouched } = useFormikContext();
+    const { values, setFieldValue, errors, touched, setFieldTouched } = useFormikContext();
     const fieldError = _19.get(errors, name);
-    const isTouched = _19.get(touched, name);
-    const val = _19.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.get(touched, name));
+    const hasError = Boolean(fieldError) && isTouched;
+    const currentValue = _19.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__ */ jsx(
-      Box,
-      {
-        sx: { display: "flex", flexWrap: "wrap", gap: 0.5, minHeight: "24px" },
-        children: selected.length === 0 ? /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: "Select options..." }) : selected.map((value) => {
-          const option = options.find((obj) => obj.value === value);
-          return option ? /* @__PURE__ */ jsx(
-            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__ */ jsxs(
-      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__ */ jsx(
-            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.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__ */ jsx(Box, { ref, sx, children: /* @__PURE__ */ jsxs(
+        FormControl,
+        {
+          fullWidth: true,
+          error: hasError,
+          disabled,
+          sx: formControlSx,
+          children: [
+            /* @__PURE__ */ jsx(
+              Autocomplete,
+              {
+                multiple: true,
+                options,
+                value: selectedOptions,
+                onChange: (event, newValues) => {
+                  const values2 = newValues.map((opt) => opt.value);
+                  handleValueChange(values2);
                 },
-                checkboxSx
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            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__ */ jsx(Box, { sx, ref, children: /* @__PURE__ */ jsxs(
-      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__ */ jsxs(
-            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__ */ jsx(
-                  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__ */ jsx(
+                  TextField,
                   {
-                    component: "span",
-                    sx: {
-                      color: "error.main",
-                      ml: 0.5
-                    },
-                    children: "*"
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Select,
-            {
-              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__ */ jsxs(Fragment, { children: [
+                      label,
+                      required && /* @__PURE__ */ jsx(
+                        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__ */ jsxs("li", { ...props, children: [
+                  /* @__PURE__ */ jsx(
+                    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__ */ jsx(
-            FormHelperText,
-            {
-              sx: [
-                {
-                  mx: 0,
+                  ),
+                  option.icon,
+                  /* @__PURE__ */ jsx(
+                    Typography,
+                    {
+                      variant: "body2",
+                      sx: {
+                        color: option.disabled ? "text.disabled" : "text.primary",
+                        ...option.textSx
+                      },
+                      children: option.label
+                    }
+                  )
+                ] }),
+                renderTags: (value, getTagProps) => /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    sx: { display: "flex", flexWrap: "wrap", gap: 0.5, mt: 0.5 },
+                    children: value.map((option, index) => /* @__PURE__ */ createElement(
+                      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__ */ jsxs(
+              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__ */ jsx(Box, { ref, sx, children: /* @__PURE__ */ jsxs(
+        FormControl,
+        {
+          fullWidth: true,
+          variant,
+          error: hasError,
+          disabled,
+          sx: formControlSx,
+          children: [
+            label && /* @__PURE__ */ jsxs(
+              Typography,
+              {
+                variant: "body2",
+                sx: {
+                  mb: 1,
+                  color: hasError ? "error.main" : "text.secondary",
+                  ...labelSx
+                },
+                children: [
+                  label,
+                  required && /* @__PURE__ */ jsx(Typography, { sx: { color: "error.main" }, component: "span", children: " *" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Select,
+              {
+                multiple: true,
+                value: selectedValues,
+                onChange: handleSelectChange,
+                onBlur: handleBlur,
+                displayEmpty: true,
+                renderValue: (selected) => {
+                  if (selected.length === 0) {
+                    return /* @__PURE__ */ jsx("em", { children: placeholder });
+                  }
+                  return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5 }, children: selected.map((value) => {
+                    const option = options.find((opt) => opt.value === value);
+                    return option ? /* @__PURE__ */ jsx(
+                      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__ */ jsxs(
+                  MenuItem,
+                  {
+                    value: option.value,
+                    disabled: option.disabled || isMaxReached && !selectedValues.includes(option.value),
+                    sx: option.sx,
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        Checkbox,
+                        {
+                          checked: selectedValues.includes(option.value),
+                          disabled: option.disabled,
+                          sx: checkboxSx
+                        }
+                      ),
+                      option.icon,
+                      /* @__PURE__ */ jsx(
+                        Typography,
+                        {
+                          variant: "body2",
+                          sx: {
+                            color: option.disabled ? "text.disabled" : "text.primary",
+                            ...option.textSx
+                          },
+                          children: option.label
+                        }
+                      )
+                    ]
+                  },
+                  option.value
+                ))
+              }
+            ),
+            (helperText || hasError) && /* @__PURE__ */ jsx(FormHelperText, { error: hasError, sx: { mx: 0, mt: 0.5 }, children: hasError ? fieldError : helperText }),
+            showSelectedCount && /* @__PURE__ */ jsxs(
+              Typography,
+              {
+                variant: "caption",
+                sx: {
+                  mt: 0.5,
+                  color: isMaxReached ? "error.main" : "text.secondary"
+                },
+                children: [
+                  selectedCount,
+                  " selected",
+                  maxSelections ? ` (max ${maxSelections})` : ""
+                ]
+              }
+            )
+          ]
+        }
+      ) });
+    }
+    return null;
   }
 );
 AppMultiSelector.displayName = "AppMultiSelector";
@@ -2131,7 +2189,7 @@ function findDiffEnd(a, b, posA, posB) {
     posB -= size;
   }
 }
-var Fragment2 = class {
+var Fragment3 = class {
   /**
   @internal
   */
@@ -2199,7 +2257,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.
@@ -2223,17 +2281,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
@@ -2246,21 +2304,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.
@@ -2379,10 +2437,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
@@ -2390,7 +2448,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];
@@ -2403,7 +2461,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
@@ -2413,17 +2471,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;
@@ -2648,7 +2706,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
@@ -2663,7 +2721,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);
@@ -2761,7 +2819,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 = [];
@@ -2771,13 +2829,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)
@@ -3116,7 +3174,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.
@@ -3421,7 +3479,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)
@@ -3503,7 +3561,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;
@@ -3645,7 +3703,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) {
@@ -4097,7 +4155,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
@@ -4105,7 +4163,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));
   }
@@ -4119,7 +4177,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)
@@ -4127,7 +4185,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));
@@ -4591,7 +4649,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 {
@@ -4617,9 +4675,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) {
@@ -5436,7 +5494,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 {
   /**
@@ -5553,7 +5611,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);
@@ -5599,7 +5657,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);
@@ -5864,7 +5922,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));
         }
       }
@@ -5872,7 +5930,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--)
@@ -5902,20 +5960,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++;
@@ -5955,14 +6013,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));
@@ -5987,7 +6045,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;
@@ -6028,7 +6086,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;
@@ -6052,11 +6110,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));
 }
@@ -6171,7 +6229,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({
@@ -6180,7 +6238,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;
@@ -6237,7 +6295,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 };
@@ -6297,7 +6355,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();
@@ -6354,12 +6412,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);
   }
@@ -6388,7 +6446,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);
 }
@@ -6480,7 +6538,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;
 }
@@ -6490,7 +6548,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);
@@ -6538,7 +6596,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;
@@ -6673,7 +6731,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.
@@ -7175,7 +7233,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;
@@ -7733,10 +7791,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))
@@ -7765,9 +7823,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());
       }
@@ -7872,9 +7930,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++)
@@ -7908,7 +7966,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);
@@ -7932,10 +7990,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;
 }
@@ -7953,8 +8011,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());
     }
@@ -8573,7 +8631,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 = {
@@ -8587,7 +8645,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) {
@@ -8734,7 +8792,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) {
@@ -9605,10 +9663,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
@@ -9619,7 +9677,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;
@@ -11840,743 +11898,324 @@ var AppSearchableMultiSelector = forwardRef(
 );
 AppSearchableMultiSelector.displayName = "AppSearchableMultiSelector";
 var AppSearchableMultiSelector_default = AppSearchableMultiSelector;
-var AppSearchableMultiSelector2 = forwardRef((props, ref) => {
-  const {
+function AppSearchableSelectInput({
+  name,
+  label,
+  options = [],
+  required = false,
+  variant = "outlined",
+  placeholder,
+  setSearchQuery,
+  isResetRequired,
+  ...otherProps
+}) {
+  const { errors, touched, setFieldValue, values } = useFormikContext();
+  const fieldError = _19.get(errors, name);
+  const isTouched = _19.get(touched, name);
+  const val = _19.get(values, name);
+  const selectedOption = options.find((option) => option.value === val) || null;
+  const handleChange = (event, newValue) => {
+    setFieldValue(name, newValue ? newValue.value : "");
+  };
+  const handleSearchChange = (event) => {
+    const { value } = event.target;
+    if (setSearchQuery) {
+      setSearchQuery(value);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    FormControl,
+    {
+      fullWidth: true,
+      variant,
+      error: isTouched && Boolean(fieldError),
+      sx: {
+        padding: "0px !important",
+        ".MuiAutocomplete-endAdornment": { right: "0 !important" },
+        ".MuiInputBase-root": {
+          padding: "0px !important",
+          pr: "39px !important",
+          pl: "10px !important"
+        },
+        ".MuiOutlinedInput-root": {
+          backgroundColor: (theme) => `${theme.palette.common.white} !important`
+        }
+      },
+      children: /* @__PURE__ */ jsx(
+        Autocomplete,
+        {
+          options,
+          getOptionLabel: (option) => option.label || String(option.value),
+          isOptionEqualToValue: (option, value) => option.value === value.value,
+          value: selectedOption,
+          onChange: handleChange,
+          filterOptions: (options2, { inputValue }) => {
+            return options2.filter(
+              (option) => {
+                var _a, _b, _c, _d;
+                return ((_a = option == null ? void 0 : option.label) == null ? void 0 : _a.toLowerCase().includes(inputValue.toLowerCase())) || String(option.value).toLowerCase().includes(inputValue.toLowerCase()) || ((_b = option == null ? void 0 : option.searchAbleValue1) == null ? void 0 : _b.toLowerCase().includes(inputValue.toLowerCase())) || ((_c = option == null ? void 0 : option.searchAbleValue2) == null ? void 0 : _c.toLowerCase().includes(inputValue.toLowerCase())) || ((_d = option == null ? void 0 : option.searchAbleValue3) == null ? void 0 : _d.toLowerCase().includes(inputValue.toLowerCase()));
+              }
+            );
+          },
+          renderInput: (params) => /* @__PURE__ */ jsx(
+            TextField,
+            {
+              ...params,
+              onChange: handleSearchChange,
+              label: /* @__PURE__ */ jsxs(Fragment, { children: [
+                label,
+                required && /* @__PURE__ */ jsx(Typography, { sx: { color: "red" }, component: "span", children: " *" })
+              ] }),
+              variant,
+              placeholder,
+              error: Boolean(fieldError) && isTouched,
+              helperText: isTouched && fieldError ? fieldError : "",
+              FormHelperTextProps: {
+                sx: { color: "#FF5630" }
+              },
+              sx: {
+                "& .MuiInputLabel-root": {
+                  color: "text.primary"
+                },
+                "& .MuiInputLabel-root.Mui-focused": {
+                  color: "text.primary"
+                },
+                "& .MuiOutlinedInput-input": {
+                  color: "common.black"
+                },
+                "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
+                  borderColor: "common.white"
+                },
+                "& .MuiSvgIcon-root": {
+                  color: "common.black"
+                }
+              }
+            }
+          ),
+          ...otherProps
+        }
+      )
+    }
+  );
+}
+var AppSelectInput = forwardRef(
+  ({
     name,
     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 = InputLabel,
-    inputComponent: InputComponent = "input",
-    errorComponent: ErrorComponent = Typography,
-    helperTextComponent: HelperTextComponent = FormHelperText,
-    labelProps = {},
-    inputProps = {},
-    textFieldProps = {},
-    autocompleteProps = {},
-    checkboxProps = {},
-    chipProps = {},
-    errorProps = {},
-    helperTextProps = {},
-    className = "",
-    formControlClassName = "",
-    labelClassName = "",
-    inputClassName = "",
-    textFieldClassName = "",
-    autocompleteClassName = "",
-    listboxClassName = "",
-    optionClassName = "",
-    chipClassName = "",
-    errorClassName = "",
-    helperTextClassName = "",
-    onInputChange: externalOnInputChange,
-    onChange: externalOnChange,
-    onOpen,
-    onClose,
-    onBlur: externalOnBlur,
-    onFocus: externalOnFocus,
-    onClear,
-    onMaxSelectionsReached,
-    onRemove,
-    onAdd,
-    ...otherProps
-  } = props;
-  useTheme();
-  const { values, setFieldValue, errors, touched, setFieldTouched } = useFormikContext();
-  const fieldError = _19.get(errors, name);
-  const isTouched = Boolean(_19.get(touched, name));
-  const hasError = Boolean(fieldError) && isTouched;
-  const val = _19.get(values, name);
-  const selectedValues = Array.isArray(val) ? val : [];
-  const selectedCount = selectedValues.length;
-  const handleChange = 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 = useTheme();
+    const { values, setFieldValue, errors, touched, setFieldTouched } = useFormikContext();
+    const fieldError = _19.get(errors, name);
+    const isTouched = Boolean(_19.get(touched, name));
+    const hasError = Boolean(fieldError) && isTouched;
+    const currentValue = _19.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 = useCallback(
-    (event, value, reason) => {
-      setSearchQuery == null ? void 0 : setSearchQuery(value);
-      externalOnInputChange == null ? void 0 : externalOnInputChange(event, value, reason);
-    },
-    [setSearchQuery, externalOnInputChange]
-  );
-  const handleBlur = useCallback(
-    (event) => {
+    };
+    const handleBlur = () => {
       setFieldTouched(name, true, true);
-      externalOnBlur == null ? void 0 : externalOnBlur(event);
-    },
-    [name, setFieldTouched, externalOnBlur]
-  );
-  const handleFocus = useCallback(
-    (event) => {
-      externalOnFocus == null ? void 0 : externalOnFocus(event);
-    },
-    [externalOnFocus]
-  );
-  const filterOptions = 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.useRef();
+      const handleSearchChange = (query) => {
+        if (debouncedSearch.current) {
+          clearTimeout(debouncedSearch.current);
         }
-      );
-    },
-    []
-  );
-  const defaultRenderInput = useCallback(
-    (params) => /* @__PURE__ */ jsx(
-      TextField,
-      {
-        ...params,
-        variant,
-        error: hasError,
-        helperText: "",
-        placeholder: "",
-        inputRef: inputProps.ref,
-        inputProps: {
-          ...params.inputProps,
-          ...inputProps,
-          className: `${params.inputProps.className || ""} ${inputClassName}`.trim()
-        },
-        InputProps: {
-          ...params.InputProps,
-          ...textFieldProps.InputProps,
-          className: `${params.InputProps.className || ""} ${textFieldClassName}`.trim()
-        },
-        sx: [
-          {
-            "& .MuiOutlinedInput-root": {
-              borderRadius: "8px",
-              "& fieldset": {
-                borderColor: hasError ? "error.main" : "divider"
-              },
-              "&:hover fieldset": {
-                borderColor: hasError ? "error.main" : "text.primary"
-              },
-              "&.Mui-focused fieldset": {
-                borderColor: hasError ? "error.main" : "primary.main"
-              }
-            }
-          },
-          ...Array.isArray(textFieldSx) ? textFieldSx : textFieldSx ? [textFieldSx] : []
-        ],
-        ...textFieldProps
-      }
-    ),
-    [
-      variant,
-      hasError,
-      inputProps,
-      inputClassName,
-      textFieldProps,
-      textFieldClassName,
-      textFieldSx
-    ]
-  );
-  const defaultRenderOption = useCallback(
-    (props2, option, { selected }) => /* @__PURE__ */ 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__ */ jsx(
-        Checkbox,
-        {
-          checked: selected,
-          disabled: option.disabled,
-          sx: {
-            color: "text.secondary",
-            "&.Mui-checked": {
-              color: "primary.main"
-            },
-            "&.Mui-disabled": {
-              color: "text.disabled"
-            },
-            mr: 1,
-            ...checkboxProps.sx
-          },
-          ...checkboxProps
-        }
-      ),
-      option.icon && /* @__PURE__ */ jsx(Box, { component: "span", sx: { mr: 1 }, children: option.icon }),
-      /* @__PURE__ */ jsx(
-        Typography,
-        {
-          variant: "body2",
-          sx: [
-            {
-              color: option.disabled ? "text.disabled" : "text.primary",
-              ...option.textSx
-            },
-            ...Array.isArray(optionSx) ? optionSx : [optionSx]
-          ],
-          children: option.label
-        }
-      )
-    ),
-    [optionClassName, checkboxProps, optionSx]
-  );
-  const defaultRenderTags = useCallback(
-    (value, getTagProps) => /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5, mt: 0.5 }, children: value.map((option, index) => {
-      const { key, ...tagProps } = getTagProps({ index });
-      return /* @__PURE__ */ createElement(
-        Chip,
+        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__ */ jsx(Box, { ref, sx, children: /* @__PURE__ */ jsx(
+        FormControl,
         {
-          ...tagProps,
-          key: option.value,
-          label: option.label,
-          disabled: disabled || option.disabled,
-          sx: [
+          fullWidth: true,
+          error: hasError,
+          disabled,
+          sx: formControlSx,
+          children: /* @__PURE__ */ jsx(
+            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__ */ jsx(
+                TextField,
+                {
+                  ...params,
+                  label: /* @__PURE__ */ jsxs(Fragment, { children: [
+                    label,
+                    required && /* @__PURE__ */ jsx(
+                      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__ */ jsxs("li", { ...props, children: [
+                option.icon,
+                /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    variant: "body2",
+                    sx: {
+                      color: option.disabled ? "text.disabled" : "text.primary",
+                      ...option.textSx
+                    },
+                    children: option.label
+                  }
+                )
+              ] })
+            }
+          )
         }
-      );
-    }) }),
-    [disabled, chipSx, chipClassName, chipProps]
-  );
-  const renderSelectedCount = useCallback(() => {
-    if (!showSelectedCount || !multiple)
-      return null;
-    return /* @__PURE__ */ jsxs(
-      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__ */ jsx(
-    Box,
-    {
-      ref,
-      className: `app-searchable-multi-selector ${className}`.trim(),
-      sx: [{ width: "100%" }, ...Array.isArray(sx) ? sx : sx ? [sx] : []],
-      children: /* @__PURE__ */ jsxs(
+      ) });
+    }
+    if (mode === "dropdown") {
+      const handleSelectChange = (event) => {
+        const newValue = event.target.value;
+        handleValueChange(newValue);
+      };
+      return /* @__PURE__ */ jsx(Box, { ref, sx, children: /* @__PURE__ */ jsxs(
         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__ */ jsxs(
-              LabelComponent,
+              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__ */ jsx(Box, { component: "span", sx: { color: "error.main", ml: 0.5 }, children: "*" })
+                  required && /* @__PURE__ */ jsx(Typography, { sx: { color: "error.main" }, component: "span", children: " *" })
                 ]
               }
             ),
-            /* @__PURE__ */ jsx(
-              Autocomplete,
+            /* @__PURE__ */ jsxs(
+              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__ */ 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__ */ 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__ */ jsx(MenuItem, { value: "", children: /* @__PURE__ */ jsx("em", { children: noneOptionText }) }),
+                  options.map((option) => /* @__PURE__ */ jsxs(
+                    MenuItem,
+                    {
+                      value: option.value,
+                      disabled: option.disabled,
+                      sx: option.sx,
+                      children: [
+                        option.icon,
+                        /* @__PURE__ */ jsx(
+                          Typography,
+                          {
+                            variant: "body2",
+                            sx: {
+                              color: option.disabled ? "text.disabled" : "text.primary",
+                              ...option.textSx
+                            },
+                            children: option.label
+                          }
+                        )
+                      ]
+                    },
+                    option.value
+                  ))
+                ]
               }
             ),
-            renderSelectedCount()
+            (helperText || hasError) && /* @__PURE__ */ jsx(FormHelperText, { error: hasError, sx: { mx: 0, mt: 0.5 }, children: hasError ? fieldError : helperText })
           ]
         }
-      )
+      ) });
     }
-  );
-});
-AppSearchableMultiSelector2.displayName = "AppSearchableMultiSelector";
-var AppSearchableSelect_default = AppSearchableMultiSelector2;
-var AppSelectInput = 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 = InputLabel,
-    errorComponent: ErrorComponent = Typography,
-    helperTextComponent: HelperTextComponent = FormHelperText,
-    onChange: externalOnChange,
-    onOpen,
-    onClose,
-    onBlur: externalOnBlur,
-    renderValue,
-    renderMenuItem,
-    MenuProps,
-    inputProps,
-    ...otherProps
-  }, ref) => {
-    const theme = useTheme();
-    const { errors, touched, values, setFieldValue, setFieldTouched } = useFormikContext();
-    const fieldError = _19.get(errors, name);
-    const isTouched = _19.get(touched, name);
-    const hasError = Boolean(fieldError) && isTouched;
-    const value = _19.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 || MenuItem;
-      const menuItemProps = option.component ? option.componentProps : {};
-      return /* @__PURE__ */ 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__ */ jsx(Box, { component: "span", sx: { mr: 1 }, children: option.icon }),
-            /* @__PURE__ */ jsx(
-              Typography,
-              {
-                variant: "body2",
-                sx: [
-                  {
-                    color: option.disabled ? "text.disabled" : "text.primary",
-                    ...option.textSx
-                  }
-                ],
-                children: option.label
-              }
-            )
-          ]
-        },
-        `${option.value}-${index}`
-      );
-    };
-    return /* @__PURE__ */ jsx(
-      Box,
-      {
-        ref,
-        className: "app-select-input",
-        sx: [
-          {
-            width: fullWidth ? "100%" : "auto"
-          },
-          ...Array.isArray(sx) ? sx : [sx].filter(Boolean)
-        ],
-        children: /* @__PURE__ */ jsxs(
-          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__ */ 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__ */ jsx(
-                      Box,
-                      {
-                        component: "span",
-                        sx: {
-                          color: "error.main",
-                          ml: 0.5
-                        },
-                        children: "*"
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                Select,
-                {
-                  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__ */ jsx(MenuItem, { value: "", children: /* @__PURE__ */ jsx("em", { children: noneOptionText }) }),
-                    options.map(
-                      (option, index) => renderMenuItem ? renderMenuItem(option, index) : renderDefaultMenuItem(option, index)
-                    )
-                  ]
-                }
-              ),
-              (showHelperText || hasError) && /* @__PURE__ */ 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";
@@ -14341,6 +13980,6 @@ var SubmitButton = ({
 };
 var SubmitButton_default = SubmitButton;
 
-export { AppAutoComplete, AppAutoCompleter, AppCheckBox_default as AppCheckBox, AppDateAndTimePicker_default as AppDateAndTimePicker, AppDatePicker_default as AppDatePicker, AppFormErrorMessage_default as AppFormErrorMessage, AppInputField, AppMultiSelector_default as AppMultiSelector, AppPhoneNoInput_default as AppPhoneNoInput, AppRadioGroup_default as AppRadioGroup, AppRating_default as AppRating, AppRichTextEditor_default as AppRichTextEditor, AppSearchableMultiSelector_default as AppSearchableMultiSelector, AppSearchableSelect_default as AppSearchableSelectInput, AppSelectInput_default as AppSelectInput, AppSimpleUploadFile_default as AppSimpleUploadFile, AppSwitch, AppSwitchInput, AppTagsCreator, AppTextArea_default as AppTextArea, AppUploadFile_default as AppUploadFile, Form_default as Form, Iconify_default as Iconify, SubmitButton_default as SubmitButton };
+export { AppAutoComplete, AppAutoCompleter, AppCheckBox_default as AppCheckBox, AppDateAndTimePicker_default as AppDateAndTimePicker, AppDatePicker_default as AppDatePicker, AppFormErrorMessage_default as AppFormErrorMessage, AppInputField, AppMultiSelector_default as AppMultiSelector, AppPhoneNoInput_default as AppPhoneNoInput, AppRadioGroup_default as AppRadioGroup, AppRating_default as AppRating, AppRichTextEditor_default as AppRichTextEditor, AppSearchableMultiSelector_default as AppSearchableMultiSelector, AppSearchableSelectInput, AppSelectInput_default as AppSelectInput, AppSimpleUploadFile_default as AppSimpleUploadFile, AppSwitch, AppSwitchInput, AppTagsCreator, AppTextArea_default as AppTextArea, AppUploadFile_default as AppUploadFile, Form_default as Form, Iconify_default as Iconify, SubmitButton_default as SubmitButton };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.mjs.map