formik-form-components 0.2.27 → 0.2.29

package/dist/index.mjs

@@ -1,17 +1,16 @@
 import { useFormikContext, Formik, Form as Form$1, ErrorMessage } from 'formik';
-import { forwardRef, memo, createElement, useState, useMemo, useEffect } from 'react';
-import { Box, useTheme, FormControl, Typography, FormHelperText, TextField, InputLabel, FormLabel, RadioGroup, FormControlLabel, Radio, Stack, Rating, Autocomplete, MenuItem, Chip, Switch, InputAdornment, IconButton, Checkbox, 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, Switch, InputAdornment, IconButton, Tooltip, Dialog, DialogTitle, DialogContent, DialogActions, Button, CircularProgress, Paper, Menu } from '@mui/material';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
-import _19, { get } from 'lodash';
+import _17, { get } from 'lodash';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 import Autocomplete3 from '@mui/material/Autocomplete';
 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';
@@ -50,9 +49,9 @@ var AppDatePicker = forwardRef(
     ...otherProps
   }, ref) => {
     const { values, setFieldValue, touched, errors, setFieldTouched } = useFormikContext();
-    const fieldValue = _19.get(values, name);
-    const fieldError = _19.get(errors, name);
-    const isTouched = _19.get(touched, name);
+    const fieldValue = _17.get(values, name);
+    const fieldError = _17.get(errors, name);
+    const isTouched = _17.get(touched, name);
     const handleChange = (newValue) => {
       setFieldValue(name, newValue);
     };
@@ -286,8 +285,8 @@ function AppFormErrorMessage({
   textSx
 }) {
   const { errors, touched } = useFormikContext();
-  const fieldError = _19.get(errors, name);
-  const isTouched = _19.get(touched, name);
+  const fieldError = _17.get(errors, name);
+  const isTouched = _17.get(touched, name);
   const showError = fieldError && typeof fieldError === "string";
   if (alwaysShow) {
     return showError ? /* @__PURE__ */ jsx(
@@ -364,9 +363,9 @@ var AppTextArea = forwardRef(({
 }, ref) => {
   var _a, _b, _c, _d;
   const { errors, getFieldProps, touched, setFieldValue } = useFormikContext();
-  const fieldError = _19.get(errors, name);
-  const isTouched = _19.get(touched, name);
-  const value = _19.get(getFieldProps(name), "value", "");
+  const fieldError = _17.get(errors, name);
+  const isTouched = _17.get(touched, name);
+  const value = _17.get(getFieldProps(name), "value", "");
   const handleChange = (e) => {
     const newValue = e.target.value;
     if (maxLength && newValue.length > maxLength)
@@ -520,9 +519,9 @@ function AppTagsCreator({
   inputSx
 }) {
   const { errors, touched, getFieldProps, values, setFieldValue, setTouched } = useFormikContext();
-  const fieldError = _19.get(errors, name);
-  const isTouched = _19.get(touched, name);
-  const val = _19.get(values, name);
+  const fieldError = _17.get(errors, name);
+  const isTouched = _17.get(touched, name);
+  const val = _17.get(values, name);
   return /* @__PURE__ */ jsxs(
     FormControl,
     {
@@ -645,8 +644,8 @@ function AppSwitchInput({
   ...otherProps
 }) {
   const { errors, touched, setFieldValue, values } = useFormikContext();
-  const fieldError = _19.get(errors, name);
-  const isTouched = _19.get(touched, name);
+  const fieldError = _17.get(errors, name);
+  const isTouched = _17.get(touched, name);
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -744,9 +743,9 @@ function AppSwitch({
   ...otherProps
 }) {
   const { errors, touched, setFieldValue, values } = useFormikContext();
-  const fieldValue = _19.get(values, name);
-  const fieldError = _19.get(errors, name);
-  const isTouched = _19.get(touched, name);
+  const fieldValue = _17.get(values, name);
+  const fieldError = _17.get(errors, name);
+  const isTouched = _17.get(touched, name);
   return /* @__PURE__ */ jsxs(
     Stack,
     {
@@ -852,9 +851,9 @@ function AppAutoComplete({
   errorSx
 }) {
   const { errors, touched, getFieldProps, values, setFieldValue } = useFormikContext();
-  const fieldError = _19.get(errors, name);
-  const isTouched = _19.get(touched, name);
-  const formikValue = _19.get(values, name);
+  const fieldError = _17.get(errors, name);
+  const isTouched = _17.get(touched, name);
+  const formikValue = _17.get(values, name);
   const val = propValue !== void 0 ? propValue : formikValue || [];
   return /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, variant: "filled", sx: formControlSx, children: [
     /* @__PURE__ */ jsx(
@@ -926,9 +925,9 @@ function AppAutoCompleter({
   errorSx
 }) {
   const { errors, touched, values, setFieldValue } = useFormikContext();
-  const fieldError = _19.get(errors, name);
-  const isTouched = _19.get(touched, name);
-  const value = _19.get(values, name);
+  const fieldError = _17.get(errors, name);
+  const isTouched = _17.get(touched, name);
+  const value = _17.get(values, name);
   const selectedOption = options.find((opt) => opt.value === value) || null;
   return /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, variant: "filled", sx: formControlSx, children: [
     /* @__PURE__ */ jsx(
@@ -940,7 +939,7 @@ function AppAutoCompleter({
         getOptionLabel: (option) => (option == null ? void 0 : option.label) || "",
         isOptionEqualToValue: (option, value2) => option.value === value2.value,
         autoHighlight: true,
-        onChange: (_20, newValue) => {
+        onChange: (_18, newValue) => {
           setFieldValue(name, newValue ? newValue.value : null);
         },
         renderOption: (props, option) => /* @__PURE__ */ createElement(Box, { component: "li", ...props, key: option.value, sx: listboxSx }, option.label),
@@ -991,8 +990,8 @@ var AppCheckBox = ({
   ...rest
 }) => {
   const { getFieldProps, setFieldValue, touched, errors } = useFormikContext();
-  const fieldError = _19.get(errors, name);
-  const isTouched = _19.get(touched, name);
+  const fieldError = _17.get(errors, name);
+  const isTouched = _17.get(touched, name);
   useTheme();
   const value = getFieldProps(name).value;
   const checkedValues = (() => {
@@ -1155,8 +1154,8 @@ function AppInputField({
   ...otherProps
 }) {
   const { errors, getFieldProps, touched } = useFormikContext();
-  const fieldError = _19.get(errors, name);
-  const isTouched = _19.get(touched, name);
+  const fieldError = _17.get(errors, name);
+  const isTouched = _17.get(touched, name);
   const [showPassword, setShowPassword] = useState(false);
   const handleShowPassword = () => {
     setShowPassword(!showPassword);
@@ -1217,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 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 { values, setFieldValue, errors, touched, setFieldTouched } = useFormikContext();
+    const fieldError = _17.get(errors, name);
+    const isTouched = Boolean(_17.get(touched, name));
+    const hasError = Boolean(fieldError) && isTouched;
+    const currentValue = _17.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
-                  }
+    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) => option.label.toLowerCase().includes(inputValueLower) || String(option.value).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);
                 },
-                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"
+                onInputChange: (event, value, reason) => {
+                  if (reason === "input" && onSearchChange) {
+                    handleSearchChange(value);
                   }
                 },
-                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"
+                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,
+                  {
+                    ...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, { selected }) => {
+                  const { key, ...restProps } = props;
+                  return /* @__PURE__ */ jsxs("li", { ...restProps, children: [
+                    /* @__PURE__ */ jsx(
+                      Checkbox,
+                      {
+                        checked: selected,
+                        disabled: option.disabled || isMaxReached && !selected,
+                        sx: checkboxSx
+                      }
+                    ),
+                    option.icon,
+                    /* @__PURE__ */ jsx(
+                      Typography,
+                      {
+                        variant: "body2",
+                        sx: {
+                          color: option.disabled ? "text.disabled" : "text.primary",
+                          ...option.textSx
+                        },
+                        children: option.label
+                      }
+                    )
+                  ] }, key);
                 },
-                labelSx
-              ],
-              children: [
-                displayLabel,
-                required && /* @__PURE__ */ jsx(
-                  Typography,
+                renderTags: (value, getTagProps) => /* @__PURE__ */ jsx(
+                  Box,
                   {
-                    component: "span",
-                    sx: {
-                      color: "error.main",
-                      ml: 0.5
-                    },
-                    children: "*"
+                    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
+                      }
+                    ))
                   }
                 )
-              ]
-            }
-          ),
-          /* @__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
-                    }
+              }
+            ),
+            showSelectedCount && /* @__PURE__ */ jsxs(
+              Typography,
+              {
+                variant: "caption",
+                sx: {
+                  mt: 0.5,
+                  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 });
                   }
-                }
-              },
-              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"
+                  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
+                        }
+                      )
+                    ]
                   },
-                  ...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.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: 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})` : ""
+                ]
+              }
+            )
+          ]
+        }
+      ) });
+    }
+    return null;
   }
 );
 AppMultiSelector.displayName = "AppMultiSelector";
@@ -1510,8 +1550,8 @@ var AppPhoneNoInput = ({
   withCountryCallingCode = true
 }) => {
   const { values, errors, touched, setFieldValue, setFieldTouched } = useFormikContext();
-  const fieldError = useMemo(() => _19.get(errors, name), [errors, name]);
-  const isTouched = useMemo(() => _19.get(touched, name), [touched, name]);
+  const fieldError = useMemo(() => _17.get(errors, name), [errors, name]);
+  const isTouched = useMemo(() => _17.get(touched, name), [touched, name]);
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -1621,9 +1661,9 @@ var AppRadioGroup = forwardRef(({
   ...rest
 }, ref) => {
   const { errors, touched, getFieldProps, setFieldValue } = useFormikContext();
-  const fieldError = _19.get(errors, name);
-  const isTouched = _19.get(touched, name);
-  const value = _19.get(getFieldProps(name), "value");
+  const fieldError = _17.get(errors, name);
+  const isTouched = _17.get(touched, name);
+  const value = _17.get(getFieldProps(name), "value");
   const handleChange = (event) => {
     const newValue = event.target.value;
     setFieldValue(name, newValue);
@@ -1802,9 +1842,9 @@ var AppRating = forwardRef(
   }, ref) => {
     useTheme();
     const { errors, touched, setFieldValue, values, setFieldTouched } = useFormikContext();
-    const val = _19.get(values, name);
-    const fieldError = _19.get(errors, name);
-    const isTouched = _19.get(touched, name);
+    const val = _17.get(values, name);
+    const fieldError = _17.get(errors, name);
+    const isTouched = _17.get(touched, name);
     const hasError = Boolean(fieldError) && isTouched;
     const handleChange = (event, newValue) => {
       setFieldValue(name, newValue);
@@ -2149,7 +2189,7 @@ function findDiffEnd(a, b, posA, posB) {
     posB -= size;
   }
 }
-var Fragment2 = class {
+var Fragment3 = class {
   /**
   @internal
   */
@@ -2217,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.
@@ -2241,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
@@ -2264,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.
@@ -2397,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
@@ -2408,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];
@@ -2421,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
@@ -2431,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;
@@ -2546,7 +2586,7 @@ var Mark = class {
   */
   toJSON() {
     let obj = { type: this.type.name };
-    for (let _20 in this.attrs) {
+    for (let _18 in this.attrs) {
       obj.attrs = this.attrs;
       break;
     }
@@ -2666,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
@@ -2681,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);
@@ -2779,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 = [];
@@ -2789,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)
@@ -3134,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.
@@ -3439,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)
@@ -3494,7 +3534,7 @@ var Node = class {
   */
   toJSON() {
     let obj = { type: this.type.name };
-    for (let _20 in this.attrs) {
+    for (let _18 in this.attrs) {
       obj.attrs = this.attrs;
       break;
     }
@@ -3521,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;
@@ -3663,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) {
@@ -4115,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
@@ -4123,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));
   }
@@ -4137,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)
@@ -4145,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));
@@ -4223,7 +4263,7 @@ var NodeType = class {
       throw new RangeError("Schema is missing its top node type ('" + topType + "')");
     if (!result.text)
       throw new RangeError("Every schema needs a 'text' type");
-    for (let _20 in result.text.attrs)
+    for (let _18 in result.text.attrs)
       throw new RangeError("The text node type should not have attributes");
     return result;
   }
@@ -4609,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 {
@@ -4635,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) {
@@ -5454,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 {
   /**
@@ -5571,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);
@@ -5617,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);
@@ -5882,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));
         }
       }
@@ -5890,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--)
@@ -5920,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++;
@@ -5973,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));
@@ -6005,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;
@@ -6046,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;
@@ -6070,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));
 }
@@ -6189,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({
@@ -6198,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;
@@ -6255,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 };
@@ -6315,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();
@@ -6372,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);
   }
@@ -6406,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);
 }
@@ -6498,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;
 }
@@ -6508,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);
@@ -6556,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;
@@ -6691,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.
@@ -7193,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;
@@ -7751,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))
@@ -7783,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());
       }
@@ -7890,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++)
@@ -7926,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);
@@ -7950,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;
 }
@@ -7971,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());
     }
@@ -8591,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 = {
@@ -8605,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) {
@@ -8752,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) {
@@ -9232,7 +9272,7 @@ function removeDuplicates(array, by = JSON.stringify) {
 function simplifyChangedRanges(changes) {
   const uniqueChanges = removeDuplicates(changes);
   return uniqueChanges.length === 1 ? uniqueChanges : uniqueChanges.filter((change, index) => {
-    const rest = uniqueChanges.filter((_20, i) => i !== index);
+    const rest = uniqueChanges.filter((_18, i) => i !== index);
     return !rest.some((otherChange) => {
       return change.oldRange.from >= otherChange.oldRange.from && change.oldRange.to <= otherChange.oldRange.to && change.newRange.from >= otherChange.newRange.from && change.newRange.to <= otherChange.newRange.to;
     });
@@ -9623,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
@@ -9637,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;
@@ -10257,7 +10297,7 @@ var Drop = Extension.create({
       new Plugin({
         key: new PluginKey("tiptapDrop"),
         props: {
-          handleDrop: (_20, e, slice, moved) => {
+          handleDrop: (_18, e, slice, moved) => {
             this.editor.emit("drop", {
               editor: this.editor,
               event: e,
@@ -11423,804 +11463,224 @@ var AppRichTextEditor = ({
   ] });
 };
 var AppRichTextEditor_default = AppRichTextEditor;
-var AppSearchableMultiSelector = forwardRef(
+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
+    searchDebounce = 300,
+    clearable = true
   }, ref) => {
-    useTheme();
+    const theme = useTheme();
     const { values, setFieldValue, errors, touched, setFieldTouched } = useFormikContext();
-    const fieldError = _19.get(errors, name);
-    const isTouched = Boolean(_19.get(touched, name));
+    const fieldError = _17.get(errors, name);
+    const isTouched = Boolean(_17.get(touched, name));
     const hasError = Boolean(fieldError) && isTouched;
-    const val = _19.get(values, name);
-    const selectedValues = Array.isArray(val) ? val : [];
-    const selectedCount = selectedValues.length;
-    const handleChange = (event, value, reason, details) => {
-      const normalizedValue = (() => {
-        if (value === null)
-          return [];
-        const arr = Array.isArray(value) ? value : [value];
-        return arr.map(
-          (item) => typeof item === "string" ? { value: item, label: item } : item
-        );
-      })();
-      if (maxSelections && normalizedValue.length > maxSelections) {
-        if (onMaxSelectionsReached) {
-          onMaxSelectionsReached(maxSelections);
-        }
-        return;
-      }
-      if (reason === "selectOption" || reason === "removeOption") {
-        const added = normalizedValue.filter(
-          (item) => !selectedValues.some((v) => v.value === item.value)
-        );
-        const removed = selectedValues.filter(
-          (item) => !normalizedValue.some((v) => v.value === item.value)
-        );
-        if (added.length > 0 && onAdd) {
-          added.forEach((item) => onAdd(item));
-        }
-        if (removed.length > 0 && onRemove) {
-          removed.forEach((item) => onRemove(item));
-        }
-      }
-      setFieldValue(name, normalizedValue, true);
+    const currentValue = _17.get(values, name);
+    const handleValueChange = (newValue) => {
+      setFieldValue(name, newValue, true);
       if (externalOnChange) {
-        externalOnChange(event, normalizedValue, reason);
+        externalOnChange(newValue);
       }
     };
-    const handleInputChange = (event, value, reason) => {
-      if (setSearchQuery) {
-        setSearchQuery(value);
-      }
-      if (externalOnInputChange) {
-        externalOnInputChange(event, value, reason);
-      }
-    };
-    const handleBlur = (event) => {
+    const handleBlur = () => {
       setFieldTouched(name, true, true);
-      if (externalOnBlur) {
-        externalOnBlur(event);
-      }
-    };
-    const handleFocus = (event) => {
-      if (externalOnFocus) {
-        externalOnFocus(event);
-      }
     };
-    const filterOptions = (options2, { inputValue }) => {
-      if (!inputValue)
-        return options2;
-      const inputValueLower = inputValue.toLowerCase();
-      return options2.filter(
-        (option) => {
-          var _a, _b, _c, _d;
-          return ((_a = option == null ? void 0 : option.label) == null ? void 0 : _a.toLowerCase().includes(inputValueLower)) || String(option.value).toLowerCase().includes(inputValueLower) || ((_b = option == null ? void 0 : option.searchAbleValue1) == null ? void 0 : _b.toLowerCase().includes(inputValueLower)) || ((_c = option == null ? void 0 : option.searchAbleValue2) == null ? void 0 : _c.toLowerCase().includes(inputValueLower)) || ((_d = option == null ? void 0 : option.searchAbleValue3) == null ? void 0 : _d.toLowerCase().includes(inputValueLower));
-        }
-      );
-    };
-    const defaultRenderInput = (params) => /* @__PURE__ */ jsx(
-      TextField,
-      {
-        ...params,
-        variant,
-        error: hasError,
-        helperText: "",
-        placeholder: "",
-        inputRef: inputProps.ref,
-        inputProps: {
-          ...params.inputProps,
-          ...inputProps,
-          className: `${params.inputProps.className || ""} ${inputClassName}`.trim()
-        },
-        InputProps: {
-          ...params.InputProps,
-          ...textFieldProps.InputProps,
-          className: `${params.InputProps.className || ""} ${textFieldClassName}`.trim()
-        },
-        sx: [
-          {
-            "& .MuiOutlinedInput-root": {
-              borderRadius: "8px",
-              "& fieldset": {
-                borderColor: hasError ? "error.main" : "divider"
-              },
-              "&:hover fieldset": {
-                borderColor: hasError ? "error.main" : "text.primary"
-              },
-              "&.Mui-focused fieldset": {
-                borderColor: hasError ? "error.main" : "primary.main"
-              },
-              "& .MuiInputLabel-root": {
-                // Your label styles here
-              }
-            }
-          },
-          ...Array.isArray(sx) ? sx : sx ? [sx] : []
-        ],
-        ...textFieldProps
-      }
-    );
-    const defaultRenderOption = (props, option, { selected }) => /* @__PURE__ */ createElement(
-      "li",
-      {
-        ...props,
-        key: option.value,
-        className: `${props.className || ""} ${optionClassName}`.trim(),
-        style: {
-          ...props.style,
-          opacity: option.disabled ? 0.5 : 1,
-          pointerEvents: option.disabled ? "none" : "auto"
-        }
-      },
-      /* @__PURE__ */ jsx(
-        Checkbox,
-        {
-          checked: selected,
-          disabled: option.disabled,
-          sx: {
-            color: "text.secondary",
-            "&.Mui-checked": {
-              color: "primary.main"
-            },
-            "&.Mui-disabled": {
-              color: "text.disabled"
-            },
-            mr: 1,
-            ...checkboxProps.sx
-          },
-          ...checkboxProps
-        }
-      ),
-      option.icon && /* @__PURE__ */ jsx(Box, { component: "span", sx: { mr: 1 }, children: option.icon }),
-      /* @__PURE__ */ jsx(
-        Typography,
-        {
-          variant: "body2",
-          sx: [
-            {
-              color: option.disabled ? "text.disabled" : "text.primary",
-              ...option.textSx
-            },
-            ...Array.isArray(optionSx) ? optionSx : [optionSx]
-          ],
-          children: option.label
+    const 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 defaultRenderTags = (value, getTagProps) => /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5, mt: 0.5 }, children: value.map((option, index) => {
-      const { key, ...tagProps } = getTagProps({ index });
-      return /* @__PURE__ */ createElement(
-        Chip,
+        debouncedSearch.current = setTimeout(() => {
+          if (onSearchChange) {
+            onSearchChange(query);
+          }
+        }, searchDebounce);
+      };
+      const filterOptions = (options2, { inputValue }) => {
+        if (!inputValue)
+          return options2;
+        const inputValueLower = inputValue.toLowerCase();
+        return options2.filter(
+          (option) => option.label.toLowerCase().includes(inputValueLower) || String(option.value).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) || "");
               },
-              ...chipSx
-            },
-            ...Array.isArray(chipSx) ? chipSx : [chipSx]
-          ],
-          className: `${chipClassName} ${option.disabled ? "Mui-disabled" : ""}`.trim(),
-          ...chipProps
-        }
-      );
-    }) });
-    const renderSelectedCount = () => {
-      if (!showSelectedCount || !multiple)
-        return null;
-      return /* @__PURE__ */ jsxs(
-        Typography,
-        {
-          variant: "caption",
-          sx: [
-            {
-              mt: 0.5,
-              color: "text.secondary",
-              ...selectedCountSx
-            },
-            ...Array.isArray(selectedCountSx) ? selectedCountSx : [selectedCountSx]
-          ],
-          children: [
-            `${selectedCount} selected`,
-            maxSelections ? ` (max ${maxSelections})` : ""
-          ]
-        }
-      );
-    };
-    return /* @__PURE__ */ jsx(
-      Box,
-      {
-        ref,
-        className: `app-searchable-multi-selector ${className}`.trim(),
-        sx: [
-          {
-            width: "100%"
-          },
-          ...Array.isArray(sx) ? sx : sx ? [sx] : []
-        ],
-        children: /* @__PURE__ */ jsxs(
-          FormControl,
-          {
-            fullWidth: true,
-            error: hasError,
-            disabled,
-            className: `app-searchable-multi-selector-form-control ${formControlClassName}`.trim(),
-            sx: [
-              {
-                "& .MuiAutocomplete-root": {
-                  "& .MuiOutlinedInput-root": {
-                    padding: "4px"
-                  },
-                  "& .MuiAutocomplete-input": {
-                    padding: "8.5px 4px"
-                  }
+              onInputChange: (event, value, reason) => {
+                if (reason === "input" && onSearchChange) {
+                  handleSearchChange(value);
                 }
               },
-              ...Array.isArray(formControlSx) ? formControlSx : formControlSx ? [formControlSx] : []
-            ],
-            children: [
-              label && /* @__PURE__ */ jsxs(
-                LabelComponent,
+              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,
                 {
-                  shrink: true,
-                  htmlFor: `autocomplete-${name}`,
-                  className: `app-searchable-multi-selector-label ${labelClassName}`.trim(),
-                  sx: [
-                    {
-                      mb: 1,
-                      color: hasError ? "error.main" : "text.primary",
-                      "&.Mui-focused": {
-                        color: hasError ? "error.main" : "primary.main"
-                      },
-                      ...Array.isArray(labelSx) ? labelSx : [labelSx]
-                    }
-                  ],
-                  ...labelProps,
-                  children: [
+                  ...params,
+                  label: /* @__PURE__ */ jsxs(Fragment, { children: [
                     label,
                     required && /* @__PURE__ */ jsx(
-                      Box,
+                      Typography,
                       {
+                        sx: { color: "error.main" },
                         component: "span",
-                        sx: {
-                          color: "error.main",
-                          ml: 0.5
-                        },
-                        children: "*"
+                        children: " *"
                       }
                     )
-                  ]
+                  ] }),
+                  variant,
+                  placeholder,
+                  error: hasError,
+                  helperText: hasError ? fieldError : helperText,
+                  FormHelperTextProps: {
+                    sx: { mx: 0, mt: 0.5 }
+                  }
                 }
               ),
-              /* @__PURE__ */ jsx(
-                Autocomplete,
-                {
-                  multiple,
-                  id: `autocomplete-${name}`,
-                  options,
-                  value: selectedValues,
-                  filterOptions,
-                  onInputChange: handleInputChange,
-                  onChange: handleChange,
-                  onOpen,
-                  onClose,
-                  onBlur: handleBlur,
-                  onFocus: handleFocus,
-                  disableCloseOnSelect: multiple,
-                  readOnly,
-                  disabled,
-                  isOptionEqualToValue: (option, value) => option.value === value.value,
-                  getOptionLabel: (option) => typeof option === "string" ? option : option.label,
-                  getOptionDisabled: (option) => !!option.disabled,
-                  renderInput: externalRenderInput || defaultRenderInput,
-                  renderOption: externalRenderOption || defaultRenderOption,
-                  renderTags: externalRenderTags || defaultRenderTags,
-                  renderGroup: externalRenderGroup,
-                  ListboxProps: {
-                    className: `app-searchable-multi-selector-listbox ${listboxClassName}`.trim(),
-                    sx: {
-                      "& .MuiAutocomplete-option": {
-                        px: 2,
-                        py: 1,
-                        '&[aria-selected="true"]': {
-                          backgroundColor: "action.selected",
-                          "&.Mui-focused": {
-                            backgroundColor: "action.hover"
-                          }
-                        },
-                        "&.Mui-focused": {
-                          backgroundColor: "action.hover"
-                        }
-                      },
-                      ...Array.isArray(optionSx) ? optionSx : optionSx ? [optionSx] : [],
-                      ...Array.isArray(listboxSx) ? listboxSx : listboxSx ? [listboxSx] : []
-                    }
-                  },
-                  className: `app-searchable-multi-selector-autocomplete ${autocompleteClassName}`.trim(),
-                  sx: [
+              renderOption: (props, option) => {
+                const { key, ...restProps } = props;
+                return /* @__PURE__ */ jsxs("li", { ...restProps, children: [
+                  option.icon,
+                  /* @__PURE__ */ jsx(
+                    Typography,
                     {
-                      "& .MuiAutocomplete-tag": {
-                        margin: 0,
-                        height: "auto"
+                      variant: "body2",
+                      sx: {
+                        color: option.disabled ? "text.disabled" : "text.primary",
+                        ...option.textSx
                       },
-                      "& .MuiAutocomplete-endAdornment": {
-                        right: 8
-                      }
-                    },
-                    ...Array.isArray(autocompleteSx) ? autocompleteSx : autocompleteSx ? [autocompleteSx] : []
-                  ],
-                  ...autocompleteProps,
-                  ...otherProps
-                }
-              ),
-              (showHelperText || hasError) && /* @__PURE__ */ jsx(
-                HelperTextComponent,
-                {
-                  error: hasError,
-                  sx: [
-                    {
-                      mx: 0,
-                      mt: 0.5,
-                      ...hasError ? {
-                        color: "error.main",
-                        ...errorSx
-                      } : {
-                        color: "text.secondary",
-                        ...helperTextSx
-                      }
+                      children: option.label
                     }
-                  ],
-                  className: `app-searchable-multi-selector-helper-text ${helperTextClassName} ${hasError ? "Mui-error" : ""}`.trim(),
-                  ...helperTextProps,
-                  children: hasError ? fieldError : helperText
-                }
-              ),
-              renderSelectedCount()
-            ]
-          }
-        )
-      }
-    );
-  }
-);
-AppSearchableMultiSelector.displayName = "AppSearchableMultiSelector";
-var AppSearchableMultiSelector_default = AppSearchableMultiSelector;
-function AppSearchableSelectInput({
-  name,
-  label,
-  options = [],
-  required = false,
-  variant = "outlined",
-  placeholder,
-  setSearchQuery,
-  isResetRequired,
-  ...otherProps
-}) {
-  const { errors, touched, setFieldValue, values } = useFormikContext();
-  const fieldError = _19.get(errors, name);
-  const isTouched = _19.get(touched, name);
-  const val = _19.get(values, name);
-  const selectedOption = options.find((option) => option.value === val) || null;
-  const handleChange = (event, newValue) => {
-    setFieldValue(name, newValue ? newValue.value : "");
-  };
-  const handleSearchChange = (event) => {
-    const { value } = event.target;
-    if (setSearchQuery) {
-      setSearchQuery(value);
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    FormControl,
-    {
-      fullWidth: true,
-      variant,
-      error: isTouched && Boolean(fieldError),
-      sx: {
-        padding: "0px !important",
-        ".MuiAutocomplete-endAdornment": { right: "0 !important" },
-        ".MuiInputBase-root": {
-          padding: "0px !important",
-          pr: "39px !important",
-          pl: "10px !important"
-        },
-        ".MuiOutlinedInput-root": {
-          backgroundColor: (theme) => `${theme.palette.common.white} !important`
-        }
-      },
-      children: /* @__PURE__ */ jsx(
-        Autocomplete,
-        {
-          options,
-          getOptionLabel: (option) => option.label || String(option.value),
-          isOptionEqualToValue: (option, value) => option.value === value.value,
-          value: selectedOption,
-          onChange: handleChange,
-          filterOptions: (options2, { inputValue }) => {
-            return options2.filter(
-              (option) => {
-                var _a, _b, _c, _d;
-                return ((_a = option == null ? void 0 : option.label) == null ? void 0 : _a.toLowerCase().includes(inputValue.toLowerCase())) || String(option.value).toLowerCase().includes(inputValue.toLowerCase()) || ((_b = option == null ? void 0 : option.searchAbleValue1) == null ? void 0 : _b.toLowerCase().includes(inputValue.toLowerCase())) || ((_c = option == null ? void 0 : option.searchAbleValue2) == null ? void 0 : _c.toLowerCase().includes(inputValue.toLowerCase())) || ((_d = option == null ? void 0 : option.searchAbleValue3) == null ? void 0 : _d.toLowerCase().includes(inputValue.toLowerCase()));
-              }
-            );
-          },
-          renderInput: (params) => /* @__PURE__ */ jsx(
-            TextField,
-            {
-              ...params,
-              onChange: handleSearchChange,
-              label: /* @__PURE__ */ jsxs(Fragment, { children: [
-                label,
-                required && /* @__PURE__ */ jsx(Typography, { sx: { color: "red" }, component: "span", children: " *" })
-              ] }),
-              variant,
-              placeholder,
-              error: Boolean(fieldError) && isTouched,
-              helperText: isTouched && fieldError ? fieldError : "",
-              FormHelperTextProps: {
-                sx: { color: "#FF5630" }
-              },
-              sx: {
-                "& .MuiInputLabel-root": {
-                  color: "text.primary"
-                },
-                "& .MuiInputLabel-root.Mui-focused": {
-                  color: "text.primary"
-                },
-                "& .MuiOutlinedInput-input": {
-                  color: "common.black"
-                },
-                "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
-                  borderColor: "common.white"
-                },
-                "& .MuiSvgIcon-root": {
-                  color: "common.black"
-                }
+                  )
+                ] }, key);
               }
             }
-          ),
-          ...otherProps
+          )
         }
-      )
+      ) });
     }
-  );
-}
-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,
+    if (mode === "dropdown") {
+      const handleSelectChange = (event) => {
+        const newValue = event.target.value;
+        handleValueChange(newValue);
+      };
+      return /* @__PURE__ */ jsx(Box, { ref, sx, children: /* @__PURE__ */ jsxs(
+        FormControl,
         {
-          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]
-          ],
+          fullWidth: true,
+          variant,
+          error: hasError,
+          disabled,
+          sx: formControlSx,
           children: [
-            option.icon && /* @__PURE__ */ jsx(Box, { component: "span", sx: { mr: 1 }, children: option.icon }),
-            /* @__PURE__ */ jsx(
+            label && /* @__PURE__ */ jsxs(
               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: [
-          {
-            "& .MuiInputLabel-root": {
-              "&.Mui-focused": {
-                color: hasError ? "error.main" : "primary.main"
-              },
-              "&.Mui-disabled": {
-                color: "text.disabled"
+                sx: {
+                  mb: 1,
+                  color: hasError ? "error.main" : "text.secondary",
+                  ...labelSx
+                },
+                children: [
+                  label,
+                  required && /* @__PURE__ */ jsx(Typography, { sx: { color: "error.main" }, component: "span", children: " *" })
+                ]
               }
-            }
-          },
-          ...Array.isArray(formControlSx) ? formControlSx : [formControlSx].filter(Boolean)
-        ],
-        children: /* @__PURE__ */ jsxs(
-          FormControl,
-          {
-            fullWidth,
-            variant,
-            error: hasError,
-            disabled,
-            className: "app-select-form-control",
-            sx: [
+            ),
+            /* @__PURE__ */ jsxs(
+              Select,
               {
-                "& .MuiInputLabel-root": {
-                  "&.Mui-focused": {
-                    color: hasError ? "error.main" : "primary.main"
-                  },
-                  "&.Mui-disabled": {
-                    color: "text.disabled"
+                value: currentValue != null ? currentValue : "",
+                onChange: handleSelectChange,
+                onBlur: handleBlur,
+                displayEmpty: true,
+                renderValue: (selected) => {
+                  if (selected === "") {
+                    return /* @__PURE__ */ jsx("em", { children: placeholder || noneOptionText });
                   }
-                }
-              },
-              ...Array.isArray(formControlSx) ? formControlSx : formControlSx ? [formControlSx] : []
-            ],
-            children: [
-              label && /* @__PURE__ */ jsxs(
-                LabelComponent,
-                {
-                  id: `select-${name}-label`,
-                  htmlFor: `select-${name}`,
-                  className: "app-select-label",
-                  sx: [
-                    {
-                      color: hasError ? "error.main" : "text.secondary",
-                      "&.Mui-focused": {
-                        color: hasError ? "error.main" : "primary.main"
-                      },
-                      mb: 1,
-                      ...Array.isArray(labelSx) ? labelSx : [labelSx]
+                  const option = options.find((opt) => opt.value === selected);
+                  return (option == null ? void 0 : option.label) || String(selected);
+                },
+                MenuProps: {
+                  PaperProps: {
+                    sx: {
+                      mt: 1,
+                      boxShadow: theme.shadows[3],
+                      maxHeight: 300
                     }
-                  ],
-                  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,
-                  inputProps: {
-                    readOnly,
-                    ...inputProps
-                  },
-                  MenuProps: {
-                    PaperProps: {
-                      sx: [
-                        {
-                          mt: 1,
-                          boxShadow: theme.shadows[3],
-                          "& .MuiMenuItem-root": {
-                            px: 2,
-                            py: 1,
-                            "&.Mui-selected": {
-                              backgroundColor: "action.selected",
-                              "&:hover": {
-                                backgroundColor: "action.hover"
-                              }
-                            }
-                          },
-                          ...Array.isArray(menuPaperSx) ? menuPaperSx : [menuPaperSx]
-                        }
-                      ]
-                    },
-                    ...MenuProps
-                  },
-                  sx: [
+                  }
+                },
+                children: [
+                  showNoneOption && /* @__PURE__ */ jsx(MenuItem, { value: "", children: /* @__PURE__ */ jsx("em", { children: noneOptionText }) }),
+                  options.map((option) => /* @__PURE__ */ jsxs(
+                    MenuItem,
                     {
-                      // Your base styles here
-                      "&.Mui-disabled": {
-                        backgroundColor: "action.disabledBackground",
-                        "& .MuiOutlinedInput-notchedOutline": {
-                          borderColor: "action.disabled"
-                        },
-                        "& .MuiSelect-icon": {
-                          color: "action.disabled"
-                        }
-                      }
+                      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
+                          }
+                        )
+                      ]
                     },
-                    ...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,
-                      ...hasError ? {
-                        color: "error.main",
-                        ...errorSx
-                      } : {
-                        color: "text.secondary",
-                        ...helperTextSx
-                      }
-                    }
-                  ],
-                  children: hasError ? fieldError : helperText
-                }
-              )
-            ]
-          }
-        )
-      }
-    );
+                    option.value
+                  ))
+                ]
+              }
+            ),
+            (helperText || hasError) && /* @__PURE__ */ jsx(FormHelperText, { error: hasError, sx: { mx: 0, mt: 0.5 }, children: hasError ? fieldError : helperText })
+          ]
+        }
+      ) });
+    }
+    return null;
   }
 );
 AppSelectInput.displayName = "AppSelectInput";
@@ -12243,8 +11703,8 @@ var AppSimpleUploadFile = ({
   onError
 }) => {
   const { setFieldValue, values, errors, touched } = useFormikContext();
-  const fieldValue = _19.get(values, name);
-  const fieldError = _19.get(touched, name) ? _19.get(errors, name) : void 0;
+  const fieldValue = _17.get(values, name);
+  const fieldError = _17.get(touched, name) ? _17.get(errors, name) : void 0;
   const handleChange = (event) => {
     const files = event.target.files;
     if (!files || files.length === 0)
@@ -12271,7 +11731,7 @@ var AppSimpleUploadFile = ({
     if (!fieldValue || index < 0 || index >= fieldValue.length)
       return;
     const fileToRemove = fieldValue[index];
-    const newFiles = fieldValue.filter((_20, i) => i !== index);
+    const newFiles = fieldValue.filter((_18, i) => i !== index);
     setFieldValue(name, newFiles);
     onRemove == null ? void 0 : onRemove(fileToRemove);
     if (fileToRemove.preview) {
@@ -13823,12 +13283,12 @@ function Placeholder({ sx, ...other }) {
 var AppUploadFile = ({ name, ...rest }) => {
   var _a, _b, _c;
   const { errors, touched, setFieldValue, values } = useFormikContext();
-  const fieldError = _19.get(errors, name);
-  const isTouched = _19.get(touched, name);
-  let val = _19.get(values, name);
+  const fieldError = _17.get(errors, name);
+  const isTouched = _17.get(touched, name);
+  let val = _17.get(values, name);
   if (((_a = rest.multiple) != null ? _a : false) && typeof val === "string") {
     val = val ? [val] : [];
-  } else if (!((_b = rest.multiple) != null ? _b : false) && _19.isArray(val)) {
+  } else if (!((_b = rest.multiple) != null ? _b : false) && _17.isArray(val)) {
     val = val[0];
   }
   ((_c = rest.multiple) != null ? _c : false) ? (val != null ? val : []).map((__) => (__ == null ? void 0 : __.file) ? __ == null ? void 0 : __.file : __) : val;
@@ -13985,6 +13445,6 @@ var SubmitButton = ({
 };
 var SubmitButton_default = SubmitButton;
 
-export { AppAutoComplete, AppAutoCompleter, AppCheckBox_default as AppCheckBox, AppDateAndTimePicker_default as AppDateAndTimePicker, AppDatePicker_default as AppDatePicker, AppFormErrorMessage_default as AppFormErrorMessage, AppInputField, AppMultiSelector_default as AppMultiSelector, AppPhoneNoInput_default as AppPhoneNoInput, AppRadioGroup_default as AppRadioGroup, AppRating_default as AppRating, AppRichTextEditor_default as AppRichTextEditor, AppSearchableMultiSelector_default as AppSearchableMultiSelector, AppSearchableSelectInput, AppSelectInput_default as AppSelectInput, AppSimpleUploadFile_default as AppSimpleUploadFile, AppSwitch, AppSwitchInput, AppTagsCreator, AppTextArea_default as AppTextArea, AppUploadFile_default as AppUploadFile, Form_default as Form, Iconify_default as Iconify, SubmitButton_default as SubmitButton };
+export { AppAutoComplete, AppAutoCompleter, AppCheckBox_default as AppCheckBox, AppDateAndTimePicker_default as AppDateAndTimePicker, AppDatePicker_default as AppDatePicker, AppFormErrorMessage_default as AppFormErrorMessage, AppInputField, AppMultiSelector_default as AppMultiSelector, AppPhoneNoInput_default as AppPhoneNoInput, AppRadioGroup_default as AppRadioGroup, AppRating_default as AppRating, AppRichTextEditor_default as AppRichTextEditor, AppSelectInput_default as AppSelectInput, AppSimpleUploadFile_default as AppSimpleUploadFile, AppSwitch, AppSwitchInput, AppTagsCreator, AppTextArea_default as AppTextArea, AppUploadFile_default as AppUploadFile, Form_default as Form, Iconify_default as Iconify, SubmitButton_default as SubmitButton };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.mjs.map