formik-form-components 0.2.28 → 0.2.30

package/dist/index.js

@@ -1,17 +1,15 @@
 'use strict';
 
 var formik = require('formik');
-var React4 = require('react');
+var React3 = require('react');
 var material = require('@mui/material');
 var DatePicker = require('@mui/x-date-pickers/DatePicker');
 var LocalizationProvider = require('@mui/x-date-pickers/LocalizationProvider');
 var AdapterDayjs = require('@mui/x-date-pickers/AdapterDayjs');
 var CalendarMonthIcon = require('@mui/icons-material/CalendarMonth');
-var _19 = require('lodash');
+var _17 = require('lodash');
 var jsxRuntime = require('react/jsx-runtime');
 var DateTimePicker = require('@mui/x-date-pickers/DateTimePicker');
-var Autocomplete3 = require('@mui/material/Autocomplete');
-var Typography9 = require('@mui/material/Typography');
 var react = require('@iconify/react');
 var PhoneInput = require('react-phone-number-input');
 require('react-phone-number-input/style.css');
@@ -41,11 +39,9 @@ var reactI18next = require('react-i18next');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React4__default = /*#__PURE__*/_interopDefault(React4);
+var React3__default = /*#__PURE__*/_interopDefault(React3);
 var CalendarMonthIcon__default = /*#__PURE__*/_interopDefault(CalendarMonthIcon);
-var _19__default = /*#__PURE__*/_interopDefault(_19);
-var Autocomplete3__default = /*#__PURE__*/_interopDefault(Autocomplete3);
-var Typography9__default = /*#__PURE__*/_interopDefault(Typography9);
+var _17__default = /*#__PURE__*/_interopDefault(_17);
 var PhoneInput__default = /*#__PURE__*/_interopDefault(PhoneInput);
 var StarterKit__default = /*#__PURE__*/_interopDefault(StarterKit);
 var Link__default = /*#__PURE__*/_interopDefault(Link);
@@ -66,20 +62,21 @@ var CloudUploadIcon__default = /*#__PURE__*/_interopDefault(CloudUploadIcon);
 var CloseIcon__default = /*#__PURE__*/_interopDefault(CloseIcon);
 
 // src/Form/index.tsx
-var AppDatePicker = React4.forwardRef(
+var AppDatePicker = React3.forwardRef(
   ({
     name,
     label,
     disabled = false,
+    disablePast = false,
     format = "DD/MM/YYYY",
     sx,
     textFieldSx,
     ...otherProps
   }, ref) => {
-    const { values, setFieldValue, touched, errors, setFieldTouched } = formik.useFormikContext();
-    const fieldValue = _19__default.default.get(values, name);
-    const fieldError = _19__default.default.get(errors, name);
-    const isTouched = _19__default.default.get(touched, name);
+    const { values, setFieldValue, touched, errors } = formik.useFormikContext();
+    const fieldValue = _17__default.default.get(values, name);
+    const fieldError = _17__default.default.get(errors, name);
+    const isTouched = _17__default.default.get(touched, name);
     const handleChange = (newValue) => {
       setFieldValue(name, newValue);
     };
@@ -89,10 +86,10 @@ var AppDatePicker = React4.forwardRef(
         label,
         value: fieldValue,
         onChange: handleChange,
-        format,
         disabled,
+        disablePast,
         slots: {
-          openPickerIcon: CalendarMonthIcon__default.default
+          openPickerIcon: () => /* @__PURE__ */ jsxRuntime.jsx(CalendarMonthIcon__default.default, {})
         },
         slotProps: {
           textField: {
@@ -100,7 +97,8 @@ var AppDatePicker = React4.forwardRef(
             fullWidth: true,
             error: isTouched && Boolean(fieldError),
             helperText: isTouched && fieldError ? fieldError : void 0,
-            sx: textFieldSx
+            sx: textFieldSx,
+            inputFormat: format
           }
         },
         ...otherProps
@@ -110,7 +108,7 @@ var AppDatePicker = React4.forwardRef(
 );
 AppDatePicker.displayName = "AppDatePicker";
 var AppDatePicker_default = AppDatePicker;
-var AppDateAndTimePicker = React4.forwardRef((props, ref) => {
+var AppDateAndTimePicker = React3.forwardRef((props, ref) => {
   const {
     name,
     label,
@@ -135,9 +133,9 @@ var AppDateAndTimePicker = React4.forwardRef((props, ref) => {
   } = props;
   const theme = material.useTheme();
   const { errors, touched, values, setFieldValue, setFieldTouched } = formik.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);
   const handleChange = (value) => {
     setFieldValue(name, value);
     if (externalOnChange) {
@@ -313,27 +311,32 @@ function AppFormErrorMessage({
   textSx
 }) {
   const { errors, touched } = formik.useFormikContext();
-  const fieldError = _19__default.default.get(errors, name);
-  const isTouched = _19__default.default.get(touched, name);
+  const fieldError = _17__default.default.get(errors, name);
+  const isTouched = _17__default.default.get(touched, name);
   const showError = fieldError && typeof fieldError === "string";
   if (alwaysShow) {
     return showError ? /* @__PURE__ */ jsxRuntime.jsx(
       material.Box,
       {
-        sx: [{
-          mt: 0.5,
-          ...containerSx
-        }, sx],
+        sx: [
+          {
+            mt: 0.5,
+            ...containerSx
+          },
+          sx
+        ],
         children: /* @__PURE__ */ jsxRuntime.jsx(
           material.Typography,
           {
             variant: "caption",
             color: "error",
-            sx: [{
-              fontSize: "0.75rem",
-              display: "block",
-              ...textSx
-            }],
+            sx: [
+              {
+                fontSize: "0.75rem",
+                display: "block",
+                ...textSx
+              }
+            ],
             children: fieldError
           }
         )
@@ -344,20 +347,25 @@ function AppFormErrorMessage({
     return /* @__PURE__ */ jsxRuntime.jsx(
       material.Box,
       {
-        sx: [{
-          mt: 0.5,
-          ...containerSx
-        }, sx],
+        sx: [
+          {
+            mt: 0.5,
+            ...containerSx
+          },
+          sx
+        ],
         children: /* @__PURE__ */ jsxRuntime.jsx(
           material.Typography,
           {
             variant: "caption",
             color: "error",
-            sx: [{
-              fontSize: "0.75rem",
-              display: "block",
-              ...textSx
-            }],
+            sx: [
+              {
+                fontSize: "0.75rem",
+                display: "block",
+                ...textSx
+              }
+            ],
             children: fieldError
           }
         )
@@ -367,7 +375,7 @@ function AppFormErrorMessage({
   return null;
 }
 var AppFormErrorMessage_default = AppFormErrorMessage;
-var AppTextArea = React4.forwardRef(({
+var AppTextArea = React3.forwardRef(({
   name,
   label,
   placeholder = "Enter text...",
@@ -391,9 +399,9 @@ var AppTextArea = React4.forwardRef(({
 }, ref) => {
   var _a, _b, _c, _d;
   const { errors, getFieldProps, touched, setFieldValue } = formik.useFormikContext();
-  const fieldError = _19__default.default.get(errors, name);
-  const isTouched = _19__default.default.get(touched, name);
-  const value = _19__default.default.get(getFieldProps(name), "value", "");
+  const fieldError = _17__default.default.get(errors, name);
+  const isTouched = _17__default.default.get(touched, name);
+  const value = _17__default.default.get(getFieldProps(name), "value", "");
   const handleChange = (e) => {
     const newValue = e.target.value;
     if (maxLength && newValue.length > maxLength)
@@ -547,9 +555,9 @@ function AppTagsCreator({
   inputSx
 }) {
   const { errors, touched, getFieldProps, values, setFieldValue, setTouched } = formik.useFormikContext();
-  const fieldError = _19__default.default.get(errors, name);
-  const isTouched = _19__default.default.get(touched, name);
-  const val = _19__default.default.get(values, name);
+  const fieldError = _17__default.default.get(errors, name);
+  const isTouched = _17__default.default.get(touched, name);
+  const val = _17__default.default.get(values, name);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     material.FormControl,
     {
@@ -573,7 +581,7 @@ function AppTagsCreator({
               flexWrap: "wrap",
               gap: 0.5,
               ...chipContainerSx
-            }, children: value == null ? void 0 : value.map((option, index) => /* @__PURE__ */ React4.createElement(
+            }, children: value == null ? void 0 : value.map((option, index) => /* @__PURE__ */ React3.createElement(
               material.Chip,
               {
                 variant: "outlined",
@@ -672,8 +680,8 @@ function AppSwitchInput({
   ...otherProps
 }) {
   const { errors, touched, setFieldValue, values } = formik.useFormikContext();
-  const fieldError = _19__default.default.get(errors, name);
-  const isTouched = _19__default.default.get(touched, name);
+  const fieldError = _17__default.default.get(errors, name);
+  const isTouched = _17__default.default.get(touched, name);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     material.Box,
     {
@@ -771,9 +779,9 @@ function AppSwitch({
   ...otherProps
 }) {
   const { errors, touched, setFieldValue, values } = formik.useFormikContext();
-  const fieldValue = _19__default.default.get(values, name);
-  const fieldError = _19__default.default.get(errors, name);
-  const isTouched = _19__default.default.get(touched, name);
+  const fieldValue = _17__default.default.get(values, name);
+  const fieldError = _17__default.default.get(errors, name);
+  const isTouched = _17__default.default.get(touched, name);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     material.Stack,
     {
@@ -879,9 +887,9 @@ function AppAutoComplete({
   errorSx
 }) {
   const { errors, touched, getFieldProps, values, setFieldValue } = formik.useFormikContext();
-  const fieldError = _19__default.default.get(errors, name);
-  const isTouched = _19__default.default.get(touched, name);
-  const formikValue = _19__default.default.get(values, name);
+  const fieldError = _17__default.default.get(errors, name);
+  const isTouched = _17__default.default.get(touched, name);
+  const formikValue = _17__default.default.get(values, name);
   const val = propValue !== void 0 ? propValue : formikValue || [];
   return /* @__PURE__ */ jsxRuntime.jsxs(material.FormControl, { fullWidth: true, variant: "filled", sx: formControlSx, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -892,7 +900,7 @@ function AppAutoComplete({
         id: "tags-filled",
         options,
         freeSolo: true,
-        renderTags: (value, getTagProps) => value.map((option, index) => /* @__PURE__ */ React4.createElement(
+        renderTags: (value, getTagProps) => value.map((option, index) => /* @__PURE__ */ React3.createElement(
           material.Chip,
           {
             variant: "outlined",
@@ -941,64 +949,88 @@ function AppAutoComplete({
   ] });
 }
 function AppAutoCompleter({
-  placeholder,
   name,
   label,
+  placeholder,
   options,
-  disabled,
+  multiple = false,
+  freeSolo = false,
   sx,
   formControlSx,
   textFieldSx,
-  listboxSx,
-  errorSx
+  chipSx,
+  errorSx,
+  ...rest
 }) {
   const { errors, touched, values, setFieldValue } = formik.useFormikContext();
-  const fieldError = _19__default.default.get(errors, name);
-  const isTouched = _19__default.default.get(touched, name);
-  const value = _19__default.default.get(values, name);
-  const selectedOption = options.find((opt) => opt.value === value) || null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(material.FormControl, { fullWidth: true, variant: "filled", sx: formControlSx, children: [
+  const fieldError = _17__default.default.get(errors, name);
+  const isTouched = _17__default.default.get(touched, name);
+  const formikValue = _17__default.default.get(values, name);
+  const isObjectOption = typeof options[0] === "object";
+  const resolvedValue = React3__default.default.useMemo(() => {
+    var _a;
+    if (!isObjectOption)
+      return formikValue != null ? formikValue : multiple ? [] : null;
+    if (multiple) {
+      return options.filter(
+        (opt) => (formikValue != null ? formikValue : []).includes(opt.value)
+      );
+    }
+    return (_a = options.find((opt) => opt.value === formikValue)) != null ? _a : null;
+  }, [formikValue, options, multiple, isObjectOption]);
+  const handleChange = (event, newValue, reason) => {
+    var _a, _b;
+    if (!isObjectOption) {
+      setFieldValue(name, newValue);
+      return;
+    }
+    if (multiple) {
+      setFieldValue(
+        name,
+        (_a = newValue == null ? void 0 : newValue.map((v) => v.value)) != null ? _a : []
+      );
+    } else {
+      setFieldValue(name, (_b = newValue == null ? void 0 : newValue.value) != null ? _b : null);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(material.FormControl, { fullWidth: true, sx: formControlSx, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      Autocomplete3__default.default,
+      material.Autocomplete,
       {
-        id: `${name}-autocomplete`,
+        multiple,
+        freeSolo,
         options,
-        value: selectedOption,
-        getOptionLabel: (option) => (option == null ? void 0 : option.label) || "",
-        isOptionEqualToValue: (option, value2) => option.value === value2.value,
-        autoHighlight: true,
-        onChange: (_20, newValue) => {
-          setFieldValue(name, newValue ? newValue.value : null);
-        },
-        renderOption: (props, option) => /* @__PURE__ */ React4.createElement(material.Box, { component: "li", ...props, key: option.value, sx: listboxSx }, option.label),
+        value: resolvedValue,
+        onChange: handleChange,
+        getOptionLabel: (option) => typeof option === "string" ? option : option.label,
+        isOptionEqualToValue: (option, value) => typeof option === "string" || typeof value === "string" ? option === value : option.value === value.value,
+        renderTags: (value, getTagProps) => value.map((option, index) => {
+          const tagProps = getTagProps({ index });
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            material.Chip,
+            {
+              ...tagProps,
+              label: typeof option === "string" ? option : option.label,
+              sx: chipSx
+            }
+          );
+        }),
         renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(
           material.TextField,
           {
             ...params,
             label,
             placeholder,
-            error: Boolean(fieldError) && isTouched,
+            error: Boolean(fieldError && isTouched),
             helperText: isTouched && fieldError,
             sx: textFieldSx
           }
         ),
-        disabled,
-        sx
+        sx,
+        ...rest
       }
     ),
-    fieldError != null && isTouched === true && /* @__PURE__ */ jsxRuntime.jsx(
-      material.Typography,
-      {
-        variant: "caption",
-        display: "block",
-        gutterBottom: true,
-        sx: {
-          color: "#FF5630",
-          ...errorSx
-        },
-        children: fieldError
-      }
-    )
+    fieldError && isTouched && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", sx: { color: "#FF5630", ...errorSx }, children: fieldError })
   ] });
 }
 var AppCheckBox = ({
@@ -1015,19 +1047,17 @@ var AppCheckBox = ({
   containerSx,
   iconSx,
   checkedSx,
-  ...rest
+  checkboxProps
 }) => {
   const { getFieldProps, setFieldValue, touched, errors } = formik.useFormikContext();
-  const fieldError = _19__default.default.get(errors, name);
-  const isTouched = _19__default.default.get(touched, name);
-  material.useTheme();
+  const fieldError = _17__default.default.get(errors, name);
+  const isTouched = _17__default.default.get(touched, name);
   const value = getFieldProps(name).value;
-  const checkedValues = (() => {
-    if (Array.isArray(value)) {
+  const checkedValues = React3__default.default.useMemo(() => {
+    if (Array.isArray(value))
       return value.map(String);
-    }
     return value ? [String(value)] : [];
-  })();
+  }, [value]);
   const handleChange = (itemValue, isChecked) => {
     if (option.length === 1) {
       setFieldValue(name, isChecked ? itemValue : false);
@@ -1039,119 +1069,109 @@ var AppCheckBox = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     material.Box,
     {
-      sx: [{
-        width: "100%",
-        ...disabled && {
-          opacity: 0.7,
-          pointerEvents: "none"
-        }
-      }, ...Array.isArray(sx) ? sx : [sx]],
+      sx: [
+        {
+          width: "100%",
+          ...disabled && { opacity: 0.7, pointerEvents: "none" }
+        },
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
       children: [
         label && /* @__PURE__ */ jsxRuntime.jsx(
-          Typography9__default.default,
+          material.Typography,
           {
             variant: "subtitle2",
             gutterBottom: true,
-            sx: [{
-              color: "text.primary",
-              fontWeight: "medium",
-              ...required && {
-                "&:after": {
-                  content: '" *"',
-                  color: "error.main"
-                }
+            sx: [
+              {
+                color: "text.primary",
+                fontWeight: "medium",
+                ...required && {
+                  "&:after": { content: '" *"', color: "error.main" }
+                },
+                ...disabled && { color: "text.disabled" }
               },
-              ...disabled && {
-                color: "text.disabled"
-              }
-            }, ...Array.isArray(labelSx) ? labelSx : [labelSx]],
+              ...Array.isArray(labelSx) ? labelSx : [labelSx]
+            ],
             children: label
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
           material.Box,
           {
-            sx: [{
-              display: "flex",
-              flexDirection: row ? "row" : "column",
-              flexWrap: row ? "wrap" : "nowrap",
-              gap: 2,
-              ...row ? {
-                "& > *": {
-                  minWidth: "fit-content"
-                }
-              } : {}
-            }, ...Array.isArray(containerSx) ? containerSx : [containerSx]],
-            children: option.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
-              material.Box,
+            sx: [
               {
-                sx: [{
-                  display: "flex",
-                  alignItems: "center",
-                  borderRadius: 1,
-                  transition: "background-color 0.2s",
-                  "&:hover": {
-                    backgroundColor: !disabled ? "action.hover" : "transparent"
-                  },
-                  px: 2,
-                  py: 1,
-                  ...disabled && {
-                    color: "text.disabled"
-                  }
-                }],
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    material.Checkbox,
-                    {
-                      name: `${name}.${item.name}`,
-                      checked: option.length === 1 ? getFieldProps(name).value === item.value : checkedValues.includes(String(item.value)),
-                      onChange: (e) => handleChange(item.value, e.target.checked),
-                      disabled: disabled || item.disabled,
-                      sx: [{
-                        color: "primary.main",
-                        "&.Mui-checked": {
-                          color: "primary.main",
-                          ...checkedSx
-                        },
-                        "& .MuiSvgIcon-root": {
-                          fontSize: 24,
-                          ...iconSx
-                        },
-                        "&.Mui-disabled": {
-                          color: "action.disabled"
-                        }
-                      }, ...Array.isArray(checkboxSx) ? checkboxSx : [checkboxSx]],
-                      ...rest
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    Typography9__default.default,
-                    {
-                      variant: "body2",
-                      sx: [{
-                        color: disabled ? "text.disabled" : "text.primary",
-                        ...disabled && {
-                          color: "text.disabled"
-                        }
-                      }, ...Array.isArray(labelSx) ? labelSx : [labelSx]],
-                      children: item.label
-                    }
-                  )
-                ]
+                display: "flex",
+                flexDirection: row ? "row" : "column",
+                flexWrap: row ? "wrap" : "nowrap",
+                gap: 2,
+                ...row && { "& > *": { minWidth: "fit-content" } }
               },
-              item.name
-            ))
+              ...Array.isArray(containerSx) ? containerSx : [containerSx]
+            ],
+            children: option.map((item) => {
+              const isChecked = option.length === 1 ? getFieldProps(name).value === item.value : checkedValues.includes(String(item.value));
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                material.Box,
+                {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    borderRadius: 1,
+                    transition: "background-color 0.2s",
+                    "&:hover": {
+                      backgroundColor: !disabled ? "action.hover" : "transparent"
+                    },
+                    px: 2,
+                    py: 1,
+                    ...disabled && { color: "text.disabled" }
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      material.Checkbox,
+                      {
+                        name: `${name}.${item.name}`,
+                        checked: isChecked,
+                        onChange: (e) => handleChange(item.value, e.target.checked),
+                        disabled: disabled || item.disabled,
+                        sx: [
+                          {
+                            color: "primary.main",
+                            "&.Mui-checked": { color: "primary.main", ...checkedSx },
+                            "& .MuiSvgIcon-root": { fontSize: 24, ...iconSx },
+                            "&.Mui-disabled": { color: "action.disabled" }
+                          },
+                          ...Array.isArray(checkboxSx) ? checkboxSx : [checkboxSx]
+                        ],
+                        ...checkboxProps
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      material.Typography,
+                      {
+                        variant: "body2",
+                        sx: [
+                          { color: disabled ? "text.disabled" : "text.primary" },
+                          ...Array.isArray(labelSx) ? labelSx : [labelSx]
+                        ],
+                        children: item.label
+                      }
+                    )
+                  ]
+                },
+                item.name
+              );
+            })
           }
         ),
         isTouched && fieldError && /* @__PURE__ */ jsxRuntime.jsx(
-          Typography9__default.default,
+          material.Typography,
           {
             variant: "caption",
-            sx: [{
-              display: "block",
-              mt: 0.5,
-              color: "error.main"
-            }, ...Array.isArray(errorSx) ? errorSx : [errorSx]],
+            sx: [
+              { display: "block", mt: 0.5, color: "error.main" },
+              ...Array.isArray(errorSx) ? errorSx : [errorSx]
+            ],
             children: fieldError
           }
         )
@@ -1160,7 +1180,7 @@ var AppCheckBox = ({
   );
 };
 var AppCheckBox_default = AppCheckBox;
-var Iconify = React4.forwardRef(({ icon, width = 20, color, sx, ...other }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var Iconify = React3.forwardRef(({ icon, width = 20, color, sx, ...other }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   material.Box,
   {
     ref,
@@ -1176,63 +1196,27 @@ function AppInputField({
   name,
   label,
   type,
-  InputProps,
   required,
   variant = "outlined",
+  InputProps,
   ...otherProps
 }) {
   const { errors, getFieldProps, touched } = formik.useFormikContext();
-  const fieldError = _19__default.default.get(errors, name);
-  const isTouched = _19__default.default.get(touched, name);
-  const [showPassword, setShowPassword] = React4.useState(false);
-  const handleShowPassword = () => {
-    setShowPassword(!showPassword);
-  };
+  const fieldError = _17__default.default.get(errors, name);
+  const isTouched = _17__default.default.get(touched, name);
+  const [showPassword, setShowPassword] = React3.useState(false);
+  const handleShowPassword = () => setShowPassword(!showPassword);
   return /* @__PURE__ */ jsxRuntime.jsx(
     material.TextField,
     {
       ...getFieldProps(name),
       fullWidth: true,
       variant,
-      label: required === true ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      label: required ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         label,
         /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { color: "red", pl: 0.5 }, component: "span", children: "*" })
       ] }) : label,
       error: Boolean(fieldError) && isTouched,
-      sx: {
-        ".Mui-error": {
-          m: 0,
-          mt: 0
-        },
-        ".MuiFormLabel-root": {
-          top: "-10px",
-          color: "text.primary"
-        },
-        ".MuiInputLabel-root.Mui-focused": {
-          color: "text.primary"
-        },
-        ".MuiInputLabel-shrink": {
-          top: 0
-        },
-        ".MuiFormLabel-asterisk": {
-          color: "red"
-        },
-        "& .MuiInputBase-input.MuiOutlinedInput-input": {
-          color: "common.black"
-        },
-        ".MuiOutlinedInput-root": {
-          backgroundColor: (theme) => `${theme.palette.common.white} !important`
-        },
-        "react-tel-input": {
-          backgroundColor: (theme) => `${theme.palette.common.white} !important`
-        },
-        "& input:-webkit-autofill": {
-          WebkitBoxShadow: "0 0 0 1000px transparent inset !important",
-          WebkitTextFillColor: "inherit !important",
-          transition: "background-color 9999s ease-in-out 0s !important",
-          caretColor: "inherit"
-        }
-      },
       helperText: isTouched && fieldError,
       type: type === "password" ? showPassword ? "text" : "password" : type,
       InputProps: type === "password" ? {
@@ -1242,7 +1226,7 @@ function AppInputField({
     }
   );
 }
-var AppMultiSelector = React4.forwardRef(
+var AppMultiSelector = React3.forwardRef(
   ({
     name,
     label,
@@ -1268,10 +1252,10 @@ var AppMultiSelector = React4.forwardRef(
   }, ref) => {
     const theme = material.useTheme();
     const { values, setFieldValue, errors, touched, setFieldTouched } = formik.useFormikContext();
-    const fieldError = _19__default.default.get(errors, name);
-    const isTouched = Boolean(_19__default.default.get(touched, name));
+    const fieldError = _17__default.default.get(errors, name);
+    const isTouched = Boolean(_17__default.default.get(touched, name));
     const hasError = Boolean(fieldError) && isTouched;
-    const currentValue = _19__default.default.get(values, name);
+    const currentValue = _17__default.default.get(values, name);
     const selectedValues = Array.isArray(currentValue) ? currentValue : [];
     const selectedCount = selectedValues.length;
     const isMaxReached = maxSelections ? selectedCount >= maxSelections : false;
@@ -1294,7 +1278,7 @@ var AppMultiSelector = React4.forwardRef(
       return options.filter((opt) => selectedValues.includes(opt.value));
     };
     if (mode === "autocomplete") {
-      const debouncedSearch = React4__default.default.useRef();
+      const debouncedSearch = React3__default.default.useRef();
       const handleSearchChange = (query) => {
         if (debouncedSearch.current) {
           clearTimeout(debouncedSearch.current);
@@ -1310,10 +1294,7 @@ var AppMultiSelector = React4.forwardRef(
           return options2;
         const inputValueLower = inputValue.toLowerCase();
         return options2.filter(
-          (option) => {
-            var _a, _b, _c;
-            return option.label.toLowerCase().includes(inputValueLower) || String(option.value).toLowerCase().includes(inputValueLower) || ((_a = option.searchAbleValue1) == null ? void 0 : _a.toLowerCase().includes(inputValueLower)) || ((_b = option.searchAbleValue2) == null ? void 0 : _b.toLowerCase().includes(inputValueLower)) || ((_c = option.searchAbleValue3) == null ? void 0 : _c.toLowerCase().includes(inputValueLower));
-          }
+          (option) => option.label.toLowerCase().includes(inputValueLower) || String(option.value).toLowerCase().includes(inputValueLower)
         );
       };
       const selectedOptions = getSelectedOptions();
@@ -1374,33 +1355,36 @@ var AppMultiSelector = React4.forwardRef(
                     }
                   }
                 ),
-                renderOption: (props, option, { selected }) => /* @__PURE__ */ jsxRuntime.jsxs("li", { ...props, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    material.Checkbox,
-                    {
-                      checked: selected,
-                      disabled: option.disabled || isMaxReached && !selected,
-                      sx: checkboxSx
-                    }
-                  ),
-                  option.icon,
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    material.Typography,
-                    {
-                      variant: "body2",
-                      sx: {
-                        color: option.disabled ? "text.disabled" : "text.primary",
-                        ...option.textSx
-                      },
-                      children: option.label
-                    }
-                  )
-                ] }),
+                renderOption: (props, option, { selected }) => {
+                  const { key, ...restProps } = props;
+                  return /* @__PURE__ */ jsxRuntime.jsxs("li", { ...restProps, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      material.Checkbox,
+                      {
+                        checked: selected,
+                        disabled: option.disabled || isMaxReached && !selected,
+                        sx: checkboxSx
+                      }
+                    ),
+                    option.icon,
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      material.Typography,
+                      {
+                        variant: "body2",
+                        sx: {
+                          color: option.disabled ? "text.disabled" : "text.primary",
+                          ...option.textSx
+                        },
+                        children: option.label
+                      }
+                    )
+                  ] }, key);
+                },
                 renderTags: (value, getTagProps) => /* @__PURE__ */ jsxRuntime.jsx(
                   material.Box,
                   {
                     sx: { display: "flex", flexWrap: "wrap", gap: 0.5, mt: 0.5 },
-                    children: value.map((option, index) => /* @__PURE__ */ React4.createElement(
+                    children: value.map((option, index) => /* @__PURE__ */ React3.createElement(
                       material.Chip,
                       {
                         ...getTagProps({ index }),
@@ -1578,8 +1562,8 @@ var AppPhoneNoInput = ({
   withCountryCallingCode = true
 }) => {
   const { values, errors, touched, setFieldValue, setFieldTouched } = formik.useFormikContext();
-  const fieldError = React4.useMemo(() => _19__default.default.get(errors, name), [errors, name]);
-  const isTouched = React4.useMemo(() => _19__default.default.get(touched, name), [touched, name]);
+  const fieldError = React3.useMemo(() => _17__default.default.get(errors, name), [errors, name]);
+  const isTouched = React3.useMemo(() => _17__default.default.get(touched, name), [touched, name]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     material.Box,
     {
@@ -1670,167 +1654,186 @@ var AppPhoneNoInput = ({
   );
 };
 var AppPhoneNoInput_default = AppPhoneNoInput;
-var AppRadioGroup = React4.forwardRef(({
-  name,
-  options = [],
-  label,
-  required = false,
-  disabled = false,
-  row = false,
-  sx,
-  formControlSx,
-  radioGroupSx,
-  formLabelSx,
-  radioSx,
-  labelSx,
-  errorSx,
-  onChange,
-  onBlur,
-  ...rest
-}, ref) => {
-  const { errors, touched, getFieldProps, setFieldValue } = formik.useFormikContext();
-  const fieldError = _19__default.default.get(errors, name);
-  const isTouched = _19__default.default.get(touched, name);
-  const value = _19__default.default.get(getFieldProps(name), "value");
-  const handleChange = (event) => {
-    const newValue = event.target.value;
-    setFieldValue(name, newValue);
-    if (onChange) {
-      onChange(event, newValue);
-    }
-  };
-  const handleBlur = (event) => {
-    if (onBlur) {
-      onBlur(event);
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx, ref, children: /* @__PURE__ */ jsxRuntime.jsxs(
-    material.FormControl,
-    {
-      component: "fieldset",
-      error: Boolean(fieldError) && isTouched,
-      disabled,
-      sx: [{
-        width: "100%",
-        "& .MuiFormGroup-root": {
-          mt: 1
-        }
-      }, ...Array.isArray(formControlSx) ? formControlSx : [formControlSx]],
-      children: [
-        label && /* @__PURE__ */ jsxRuntime.jsxs(
-          material.FormLabel,
+var AppRadioGroup = React3.forwardRef(
+  ({
+    name,
+    options = [],
+    label,
+    required = false,
+    disabled = false,
+    row = false,
+    sx,
+    formControlSx,
+    radioGroupSx,
+    formLabelSx,
+    radioSx,
+    labelSx,
+    errorSx,
+    onChange,
+    onBlur,
+    ...rest
+  }, ref) => {
+    const { errors, touched, getFieldProps, setFieldValue } = formik.useFormikContext();
+    const fieldError = _17__default.default.get(errors, name);
+    const isTouched = _17__default.default.get(touched, name);
+    const value = _17__default.default.get(getFieldProps(name), "value");
+    const handleChange = (event) => {
+      const newValue = event.target.value;
+      setFieldValue(name, newValue);
+      if (onChange) {
+        onChange(event, newValue);
+      }
+    };
+    const handleBlur = (event) => {
+      if (onBlur) {
+        onBlur(event);
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx, ref, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      material.FormControl,
+      {
+        component: "fieldset",
+        error: Boolean(fieldError) && isTouched,
+        disabled,
+        sx: [
           {
-            component: "legend",
-            sx: [{
-              color: "text.primary",
-              mb: 1,
-              "&.Mui-focused": {
-                color: "text.primary"
-              },
-              "&.Mui-disabled": {
-                color: "text.disabled"
-              }
-            }, ...Array.isArray(formLabelSx) ? formLabelSx : [formLabelSx]],
-            children: [
-              label,
-              required && /* @__PURE__ */ jsxRuntime.jsx(
-                material.Typography,
+            width: "100%",
+            "& .MuiFormGroup-root": {
+              mt: 1
+            }
+          },
+          ...Array.isArray(formControlSx) ? formControlSx : [formControlSx]
+        ],
+        children: [
+          label && /* @__PURE__ */ jsxRuntime.jsxs(
+            material.FormLabel,
+            {
+              component: "legend",
+              sx: [
                 {
-                  component: "span",
-                  sx: {
-                    color: "error.main",
-                    ml: 0.5
+                  color: "text.primary",
+                  mb: 1,
+                  "&.Mui-focused": {
+                    color: "text.primary"
                   },
-                  children: "*"
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          material.RadioGroup,
-          {
-            ...getFieldProps(name),
-            value: value != null ? value : "",
-            onChange: handleChange,
-            onBlur: handleBlur,
-            row,
-            sx: [{
-              "& .MuiFormControlLabel-root": {
-                mr: row ? 3 : 0,
-                mb: row ? 0 : 1,
-                "&:last-of-type": {
-                  mb: 0
-                }
-              }
-            }, ...Array.isArray(radioGroupSx) ? radioGroupSx : [radioGroupSx]],
-            ...rest,
-            children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
-              material.FormControlLabel,
-              {
-                value: option.value,
-                disabled: disabled || option.disabled,
-                control: /* @__PURE__ */ jsxRuntime.jsx(
-                  material.Radio,
-                  {
-                    sx: [{
-                      color: "primary.main",
-                      "&.Mui-checked": {
-                        color: "primary.main"
-                      },
-                      "&.Mui-disabled": {
-                        color: "action.disabled"
-                      },
-                      ...radioSx,
-                      ...option.radioSx
-                    }]
+                  "&.Mui-disabled": {
+                    color: "text.disabled"
                   }
-                ),
-                label: /* @__PURE__ */ jsxRuntime.jsx(
+                },
+                ...Array.isArray(formLabelSx) ? formLabelSx : [formLabelSx]
+              ],
+              children: [
+                label,
+                required && /* @__PURE__ */ jsxRuntime.jsx(
                   material.Typography,
                   {
-                    variant: "body2",
-                    sx: [{
-                      color: disabled || option.disabled ? "text.disabled" : "text.primary",
-                      ...labelSx,
-                      ...option.labelSx
-                    }],
-                    children: option.label
+                    component: "span",
+                    sx: {
+                      color: "error.main",
+                      ml: 0.5
+                    },
+                    children: "*"
                   }
-                ),
-                sx: [{
-                  m: 0,
-                  mr: row ? 3 : 0,
-                  mb: row ? 0 : 1,
-                  "&:last-of-type": {
-                    mb: 0
-                  },
-                  ...option.sx
-                }]
-              },
-              option.value
-            ))
-          }
-        ),
-        isTouched && fieldError && /* @__PURE__ */ jsxRuntime.jsx(
-          material.FormHelperText,
-          {
-            sx: [{
-              color: "error.main",
-              mx: 0,
-              mt: 0.5,
-              ...errorSx
-            }],
-            children: fieldError
-          }
-        )
-      ]
-    }
-  ) });
-});
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.RadioGroup,
+            {
+              ...getFieldProps(name),
+              value: value != null ? value : "",
+              onChange: handleChange,
+              onBlur: handleBlur,
+              row,
+              sx: [
+                {
+                  "& .MuiFormControlLabel-root": {
+                    mr: row ? 3 : 0,
+                    mb: row ? 0 : 1,
+                    "&:last-of-type": {
+                      mb: 0
+                    }
+                  }
+                },
+                ...Array.isArray(radioGroupSx) ? radioGroupSx : [radioGroupSx]
+              ],
+              ...rest,
+              children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+                material.FormControlLabel,
+                {
+                  value: option.value,
+                  disabled: disabled || option.disabled,
+                  control: /* @__PURE__ */ jsxRuntime.jsx(
+                    material.Radio,
+                    {
+                      sx: [
+                        {
+                          color: "primary.main",
+                          "&.Mui-checked": {
+                            color: "primary.main"
+                          },
+                          "&.Mui-disabled": {
+                            color: "action.disabled"
+                          },
+                          ...radioSx,
+                          ...option.radioSx
+                        }
+                      ]
+                    }
+                  ),
+                  label: /* @__PURE__ */ jsxRuntime.jsx(
+                    material.Typography,
+                    {
+                      variant: "body2",
+                      sx: [
+                        {
+                          color: disabled || option.disabled ? "text.disabled" : "text.primary",
+                          ...labelSx,
+                          ...option.labelSx
+                        }
+                      ],
+                      children: option.label
+                    }
+                  ),
+                  sx: [
+                    {
+                      m: 0,
+                      mr: row ? 3 : 0,
+                      mb: row ? 0 : 1,
+                      "&:last-of-type": {
+                        mb: 0
+                      },
+                      ...option.sx
+                    }
+                  ]
+                },
+                option.value
+              ))
+            }
+          ),
+          isTouched && fieldError && /* @__PURE__ */ jsxRuntime.jsx(
+            material.FormHelperText,
+            {
+              sx: [
+                {
+                  color: "error.main",
+                  mx: 0,
+                  mt: 0.5,
+                  ...errorSx
+                }
+              ],
+              children: fieldError
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
 AppRadioGroup.displayName = "AppRadioGroup";
 var AppRadioGroup_default = AppRadioGroup;
-var AppRating = React4.forwardRef(
+var AppRating = React3.forwardRef(
   ({
     name,
     label,
@@ -1870,9 +1873,9 @@ var AppRating = React4.forwardRef(
   }, ref) => {
     material.useTheme();
     const { errors, touched, setFieldValue, values, setFieldTouched } = formik.useFormikContext();
-    const val = _19__default.default.get(values, name);
-    const fieldError = _19__default.default.get(errors, name);
-    const isTouched = _19__default.default.get(touched, name);
+    const val = _17__default.default.get(values, name);
+    const fieldError = _17__default.default.get(errors, name);
+    const isTouched = _17__default.default.get(touched, name);
     const hasError = Boolean(fieldError) && isTouched;
     const handleChange = (event, newValue) => {
       setFieldValue(name, newValue);
@@ -2614,7 +2617,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;
     }
@@ -3562,7 +3565,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;
     }
@@ -4291,7 +4294,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;
   }
@@ -9300,7 +9303,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;
     });
@@ -10325,7 +10328,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,
@@ -11141,12 +11144,13 @@ var AppRichTextEditor = ({
   labelSx,
   buttonSx,
   activeButtonSx,
-  dialogSx
+  dialogSx,
+  showButtons
 }) => {
   material.useTheme();
   const { values, setFieldValue } = formik.useFormikContext();
-  const [linkDialogOpen, setLinkDialogOpen] = React4.useState(false);
-  const [linkUrl, setLinkUrl] = React4.useState("");
+  const [linkDialogOpen, setLinkDialogOpen] = React3.useState(false);
+  const [linkUrl, setLinkUrl] = React3.useState("");
   const editor = react$1.useEditor({
     extensions: [
       StarterKit__default.default,
@@ -11157,15 +11161,23 @@ var AppRichTextEditor = ({
     content: values[name] || "",
     onUpdate({ editor: editor2 }) {
       setFieldValue(name, editor2.getHTML());
-    }
+    },
+    editorProps: { attributes: { class: "prose" } },
+    immediatelyRender: false
+    // SSR-safe
   });
-  React4.useEffect(() => {
+  React3.useEffect(() => {
     if (editor && values[name] !== editor.getHTML()) {
       editor.commands.setContent(values[name] || "");
     }
   }, [values[name]]);
   if (!editor)
     return null;
+  const openLinkDialog = () => {
+    const previousUrl = editor.getAttributes("link").href || "";
+    setLinkUrl(previousUrl);
+    setLinkDialogOpen(true);
+  };
   const applyLink = () => {
     editor.chain().focus().extendMarkRange("link").setLink({ href: linkUrl }).run();
     setLinkDialogOpen(false);
@@ -11174,47 +11186,151 @@ var AppRichTextEditor = ({
     editor.chain().focus().unsetLink().run();
     setLinkDialogOpen(false);
   };
+  const renderButton = (onClick, Icon2, active, tooltip) => /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: tooltip, children: /* @__PURE__ */ jsxRuntime.jsx(
+    material.IconButton,
+    {
+      onClick,
+      color: active ? "primary" : "default",
+      sx: {
+        ...buttonSx,
+        ...active ? activeButtonSx : {}
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(Icon2, {})
+    }
+  ) }, tooltip);
+  const defaultButtons = [
+    "bold",
+    "italic",
+    "underline",
+    "strike",
+    "bulletList",
+    "orderedList",
+    "alignLeft",
+    "alignCenter",
+    "alignRight",
+    "heading1",
+    "heading2",
+    "undo",
+    "redo",
+    "link"
+  ];
+  const buttonsToRender = showButtons && showButtons.length > 0 ? showButtons : defaultButtons;
+  const renderToolbarButton = (id) => {
+    switch (id) {
+      case "bold":
+        return renderButton(
+          () => editor.chain().focus().toggleBold().run(),
+          FormatBoldIcon__default.default,
+          editor.isActive("bold"),
+          "Bold"
+        );
+      case "italic":
+        return renderButton(
+          () => editor.chain().focus().toggleItalic().run(),
+          FormatItalicIcon__default.default,
+          editor.isActive("italic"),
+          "Italic"
+        );
+      case "underline":
+        return renderButton(
+          () => editor.chain().focus().toggleUnderline().run(),
+          FormatUnderlinedIcon__default.default,
+          editor.isActive("underline"),
+          "Underline"
+        );
+      case "strike":
+        return renderButton(
+          () => editor.chain().focus().toggleStrike().run(),
+          StrikethroughSIcon__default.default,
+          editor.isActive("strike"),
+          "Strike"
+        );
+      case "bulletList":
+        return renderButton(
+          () => editor.chain().focus().toggleBulletList().run(),
+          FormatListBulletedIcon__default.default,
+          editor.isActive("bulletList"),
+          "Bullet List"
+        );
+      case "orderedList":
+        return renderButton(
+          () => editor.chain().focus().toggleOrderedList().run(),
+          FormatListNumberedIcon__default.default,
+          editor.isActive("orderedList"),
+          "Numbered List"
+        );
+      case "alignLeft":
+        return renderButton(
+          () => editor.chain().focus().setTextAlign("left").run(),
+          FormatAlignLeftIcon__default.default,
+          editor.isActive({ textAlign: "left" }),
+          "Align Left"
+        );
+      case "alignCenter":
+        return renderButton(
+          () => editor.chain().focus().setTextAlign("center").run(),
+          FormatAlignCenterIcon__default.default,
+          editor.isActive({ textAlign: "center" }),
+          "Align Center"
+        );
+      case "alignRight":
+        return renderButton(
+          () => editor.chain().focus().setTextAlign("right").run(),
+          FormatAlignRightIcon__default.default,
+          editor.isActive({ textAlign: "right" }),
+          "Align Right"
+        );
+      case "heading1":
+        return renderButton(
+          () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
+          TitleIcon__default.default,
+          editor.isActive("heading", { level: 1 }),
+          "Heading 1"
+        );
+      case "heading2":
+        return renderButton(
+          () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
+          TitleIcon__default.default,
+          editor.isActive("heading", { level: 2 }),
+          "Heading 2"
+        );
+      case "undo":
+        return renderButton(
+          () => editor.chain().focus().undo().run(),
+          UndoIcon__default.default,
+          false,
+          "Undo"
+        );
+      case "redo":
+        return renderButton(
+          () => editor.chain().focus().redo().run(),
+          RedoIcon__default.default,
+          false,
+          "Redo"
+        );
+      case "link":
+        return renderButton(openLinkDialog, UndoIcon__default.default, false, "Insert Link");
+      default:
+        return null;
+    }
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { width: "100%", ...sx }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      formik.ErrorMessage,
-      {
-        name,
-        render: (msg) => /* @__PURE__ */ jsxRuntime.jsx(
-          material.Typography,
-          {
-            variant: "caption",
-            sx: [
-              {
-                color: "error.main",
-                display: "block",
-                mt: 0.5,
-                ...errorSx
-              }
-            ],
-            children: msg
-          }
-        )
-      }
-    ),
     label && /* @__PURE__ */ jsxRuntime.jsxs(
       material.Typography,
       {
         variant: "button",
-        sx: [
-          {
-            color: "text.primary",
-            mb: 1,
-            display: "block",
-            ...labelSx
-          }
-        ],
+        sx: {
+          mb: 1,
+          display: "block",
+          ...labelSx
+        },
         children: [
           label,
           required && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { component: "span", sx: { color: "error.main", ml: 0.5 }, children: "*" })
         ]
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxRuntime.jsx(
       material.Box,
       {
         sx: {
@@ -11229,142 +11345,7 @@ var AppRichTextEditor = ({
           borderColor: "divider",
           ...toolbarSx
         },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Bold", children: /* @__PURE__ */ jsxRuntime.jsx(
-            material.IconButton,
-            {
-              onClick: () => editor.chain().focus().toggleBold().run(),
-              color: editor.isActive("bold") ? "primary" : "default",
-              sx: {
-                ...buttonSx,
-                ...editor.isActive("bold") ? activeButtonSx : {}
-              },
-              children: /* @__PURE__ */ jsxRuntime.jsx(FormatBoldIcon__default.default, {})
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Italic", children: /* @__PURE__ */ jsxRuntime.jsx(
-            material.IconButton,
-            {
-              onClick: () => editor.chain().focus().toggleItalic().run(),
-              color: editor.isActive("italic") ? "primary" : "default",
-              sx: {
-                ...buttonSx,
-                ...editor.isActive("italic") ? activeButtonSx : {}
-              },
-              children: /* @__PURE__ */ jsxRuntime.jsx(FormatItalicIcon__default.default, {})
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Underline", children: /* @__PURE__ */ jsxRuntime.jsx(
-            material.IconButton,
-            {
-              onClick: () => editor.chain().focus().toggleUnderline().run(),
-              color: editor.isActive("underline") ? "primary" : "default",
-              sx: {
-                ...buttonSx,
-                ...editor.isActive("underline") ? activeButtonSx : {}
-              },
-              children: /* @__PURE__ */ jsxRuntime.jsx(FormatUnderlinedIcon__default.default, {})
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Strike", children: /* @__PURE__ */ jsxRuntime.jsx(
-            material.IconButton,
-            {
-              onClick: () => editor.chain().focus().toggleStrike().run(),
-              color: editor.isActive("strike") ? "primary" : "default",
-              sx: {
-                ...buttonSx,
-                ...editor.isActive("strike") ? activeButtonSx : {}
-              },
-              children: /* @__PURE__ */ jsxRuntime.jsx(StrikethroughSIcon__default.default, {})
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Bullet List", children: /* @__PURE__ */ jsxRuntime.jsx(
-            material.IconButton,
-            {
-              onClick: () => editor.chain().focus().toggleBulletList().run(),
-              color: editor.isActive("bulletList") ? "primary" : "default",
-              sx: {
-                ...buttonSx,
-                ...editor.isActive("bulletList") ? activeButtonSx : {}
-              },
-              children: /* @__PURE__ */ jsxRuntime.jsx(FormatListBulletedIcon__default.default, {})
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Numbered List", children: /* @__PURE__ */ jsxRuntime.jsx(
-            material.IconButton,
-            {
-              onClick: () => editor.chain().focus().toggleOrderedList().run(),
-              color: editor.isActive("orderedList") ? "primary" : "default",
-              sx: {
-                ...buttonSx,
-                ...editor.isActive("orderedList") ? activeButtonSx : {}
-              },
-              children: /* @__PURE__ */ jsxRuntime.jsx(FormatListNumberedIcon__default.default, {})
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Align Left", children: /* @__PURE__ */ jsxRuntime.jsx(
-            material.IconButton,
-            {
-              onClick: () => editor.chain().focus().setTextAlign("left").run(),
-              color: editor.isActive({ textAlign: "left" }) ? "primary" : "default",
-              sx: {
-                ...buttonSx,
-                ...editor.isActive({ textAlign: "left" }) ? activeButtonSx : {}
-              },
-              children: /* @__PURE__ */ jsxRuntime.jsx(FormatAlignLeftIcon__default.default, {})
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Align Center", children: /* @__PURE__ */ jsxRuntime.jsx(
-            material.IconButton,
-            {
-              onClick: () => editor.chain().focus().setTextAlign("center").run(),
-              color: editor.isActive({ textAlign: "center" }) ? "primary" : "default",
-              sx: {
-                ...buttonSx,
-                ...editor.isActive({ textAlign: "center" }) ? activeButtonSx : {}
-              },
-              children: /* @__PURE__ */ jsxRuntime.jsx(FormatAlignCenterIcon__default.default, {})
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Align Right", children: /* @__PURE__ */ jsxRuntime.jsx(
-            material.IconButton,
-            {
-              onClick: () => editor.chain().focus().setTextAlign("right").run(),
-              color: editor.isActive({ textAlign: "right" }) ? "primary" : "default",
-              sx: {
-                ...buttonSx,
-                ...editor.isActive({ textAlign: "right" }) ? activeButtonSx : {}
-              },
-              children: /* @__PURE__ */ jsxRuntime.jsx(FormatAlignRightIcon__default.default, {})
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Heading 1", children: /* @__PURE__ */ jsxRuntime.jsx(
-            material.IconButton,
-            {
-              onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
-              color: editor.isActive("heading", { level: 1 }) ? "primary" : "default",
-              sx: {
-                ...buttonSx,
-                ...editor.isActive("heading", { level: 1 }) ? activeButtonSx : {}
-              },
-              children: /* @__PURE__ */ jsxRuntime.jsx(TitleIcon__default.default, { sx: { fontSize: "1rem" } })
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Heading 2", children: /* @__PURE__ */ jsxRuntime.jsx(
-            material.IconButton,
-            {
-              onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
-              color: editor.isActive("heading", { level: 2 }) ? "primary" : "default",
-              sx: {
-                ...buttonSx,
-                ...editor.isActive("heading", { level: 2 }) ? activeButtonSx : {}
-              },
-              children: /* @__PURE__ */ jsxRuntime.jsx(TitleIcon__default.default, { sx: { fontSize: "0.85rem" } })
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Undo", children: /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { onClick: () => editor.chain().focus().undo().run(), children: /* @__PURE__ */ jsxRuntime.jsx(UndoIcon__default.default, {}) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Redo", children: /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { onClick: () => editor.chain().focus().redo().run(), children: /* @__PURE__ */ jsxRuntime.jsx(RedoIcon__default.default, {}) }) })
-        ]
+        children: buttonsToRender.map((btn) => renderToolbarButton(btn))
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -11382,9 +11363,7 @@ var AppRichTextEditor = ({
           "& .ProseMirror": {
             outline: "none",
             minHeight: 150,
-            "& > * + *": {
-              mt: 2
-            },
+            "& > * + *": { mt: 2 },
             "& h1": {
               fontSize: "2em",
               fontWeight: "bold",
@@ -11397,20 +11376,12 @@ var AppRichTextEditor = ({
               lineHeight: 1.3,
               color: "text.primary"
             },
-            "& p": {
-              color: "text.primary",
-              lineHeight: 1.6
-            },
-            "& ul, & ol": {
-              pl: 3,
-              color: "text.primary"
-            },
+            "& p": { color: "text.primary", lineHeight: 1.6 },
+            "& ul, & ol": { pl: 3, color: "text.primary" },
             "& a": {
               color: "primary.main",
               textDecoration: "none",
-              "&:hover": {
-                textDecoration: "underline"
-              }
+              "&:hover": { textDecoration: "underline" }
             },
             ...contentSx
           },
@@ -11447,19 +11418,6 @@ var AppRichTextEditor = ({
             borderRadius: 1,
             border: "1px solid",
             borderColor: "divider",
-            "& .MuiDialogTitle-root": {
-              borderBottom: "1px solid",
-              borderColor: "divider",
-              p: 2
-            },
-            "& .MuiDialogContent-root": {
-              p: 2
-            },
-            "& .MuiDialogActions-root": {
-              p: 2,
-              borderTop: "1px solid",
-              borderColor: "divider"
-            },
             ...dialogSx
           }
         },
@@ -11491,542 +11449,7 @@ var AppRichTextEditor = ({
   ] });
 };
 var AppRichTextEditor_default = AppRichTextEditor;
-var AppSearchableMultiSelector = React4.forwardRef(
-  ({
-    name,
-    label,
-    multiple = true,
-    options = [],
-    setSearchQuery,
-    required = false,
-    variant = "outlined",
-    disabled = false,
-    readOnly = false,
-    showHelperText = false,
-    helperText,
-    maxSelections,
-    showSelectedCount = false,
-    sx,
-    formControlSx,
-    labelSx,
-    inputSx,
-    textFieldSx,
-    autocompleteSx,
-    listboxSx,
-    optionSx,
-    chipSx,
-    errorSx,
-    helperTextSx,
-    selectedCountSx,
-    renderInput: externalRenderInput,
-    renderOption: externalRenderOption,
-    renderTags: externalRenderTags,
-    renderGroup: externalRenderGroup,
-    labelComponent: LabelComponent = material.InputLabel,
-    inputComponent: InputComponent = "input",
-    errorComponent: ErrorComponent = material.Typography,
-    helperTextComponent: HelperTextComponent = material.FormHelperText,
-    labelProps = {},
-    inputProps = {},
-    textFieldProps = {},
-    autocompleteProps = {},
-    checkboxProps = {},
-    chipProps = {},
-    errorProps = {},
-    helperTextProps = {},
-    className = "",
-    formControlClassName = "",
-    labelClassName = "",
-    inputClassName = "",
-    textFieldClassName = "",
-    autocompleteClassName = "",
-    listboxClassName = "",
-    optionClassName = "",
-    chipClassName = "",
-    errorClassName = "",
-    helperTextClassName = "",
-    onInputChange: externalOnInputChange,
-    onChange: externalOnChange,
-    onOpen,
-    onClose,
-    onBlur: externalOnBlur,
-    onFocus: externalOnFocus,
-    onClear,
-    onMaxSelectionsReached,
-    onRemove,
-    onAdd,
-    ...otherProps
-  }, ref) => {
-    material.useTheme();
-    const { values, setFieldValue, errors, touched, setFieldTouched } = formik.useFormikContext();
-    const fieldError = _19__default.default.get(errors, name);
-    const isTouched = Boolean(_19__default.default.get(touched, name));
-    const hasError = Boolean(fieldError) && isTouched;
-    const val = _19__default.default.get(values, name);
-    const selectedValues = Array.isArray(val) ? val : [];
-    const selectedCount = selectedValues.length;
-    const handleChange = (event, value, reason, details) => {
-      const normalizedValue = (() => {
-        if (value === null)
-          return [];
-        const arr = Array.isArray(value) ? value : [value];
-        return arr.map(
-          (item) => typeof item === "string" ? { value: item, label: item } : item
-        );
-      })();
-      if (maxSelections && normalizedValue.length > maxSelections) {
-        if (onMaxSelectionsReached) {
-          onMaxSelectionsReached(maxSelections);
-        }
-        return;
-      }
-      if (reason === "selectOption" || reason === "removeOption") {
-        const added = normalizedValue.filter(
-          (item) => !selectedValues.some((v) => v.value === item.value)
-        );
-        const removed = selectedValues.filter(
-          (item) => !normalizedValue.some((v) => v.value === item.value)
-        );
-        if (added.length > 0 && onAdd) {
-          added.forEach((item) => onAdd(item));
-        }
-        if (removed.length > 0 && onRemove) {
-          removed.forEach((item) => onRemove(item));
-        }
-      }
-      setFieldValue(name, normalizedValue, true);
-      if (externalOnChange) {
-        externalOnChange(event, normalizedValue, reason);
-      }
-    };
-    const handleInputChange = (event, value, reason) => {
-      if (setSearchQuery) {
-        setSearchQuery(value);
-      }
-      if (externalOnInputChange) {
-        externalOnInputChange(event, value, reason);
-      }
-    };
-    const handleBlur = (event) => {
-      setFieldTouched(name, true, true);
-      if (externalOnBlur) {
-        externalOnBlur(event);
-      }
-    };
-    const handleFocus = (event) => {
-      if (externalOnFocus) {
-        externalOnFocus(event);
-      }
-    };
-    const filterOptions = (options2, { inputValue }) => {
-      if (!inputValue)
-        return options2;
-      const inputValueLower = inputValue.toLowerCase();
-      return options2.filter(
-        (option) => {
-          var _a, _b, _c, _d;
-          return ((_a = option == null ? void 0 : option.label) == null ? void 0 : _a.toLowerCase().includes(inputValueLower)) || String(option.value).toLowerCase().includes(inputValueLower) || ((_b = option == null ? void 0 : option.searchAbleValue1) == null ? void 0 : _b.toLowerCase().includes(inputValueLower)) || ((_c = option == null ? void 0 : option.searchAbleValue2) == null ? void 0 : _c.toLowerCase().includes(inputValueLower)) || ((_d = option == null ? void 0 : option.searchAbleValue3) == null ? void 0 : _d.toLowerCase().includes(inputValueLower));
-        }
-      );
-    };
-    const defaultRenderInput = (params) => /* @__PURE__ */ jsxRuntime.jsx(
-      material.TextField,
-      {
-        ...params,
-        variant,
-        error: hasError,
-        helperText: "",
-        placeholder: "",
-        inputRef: inputProps.ref,
-        inputProps: {
-          ...params.inputProps,
-          ...inputProps,
-          className: `${params.inputProps.className || ""} ${inputClassName}`.trim()
-        },
-        InputProps: {
-          ...params.InputProps,
-          ...textFieldProps.InputProps,
-          className: `${params.InputProps.className || ""} ${textFieldClassName}`.trim()
-        },
-        sx: [
-          {
-            "& .MuiOutlinedInput-root": {
-              borderRadius: "8px",
-              "& fieldset": {
-                borderColor: hasError ? "error.main" : "divider"
-              },
-              "&:hover fieldset": {
-                borderColor: hasError ? "error.main" : "text.primary"
-              },
-              "&.Mui-focused fieldset": {
-                borderColor: hasError ? "error.main" : "primary.main"
-              },
-              "& .MuiInputLabel-root": {
-                // Your label styles here
-              }
-            }
-          },
-          ...Array.isArray(sx) ? sx : sx ? [sx] : []
-        ],
-        ...textFieldProps
-      }
-    );
-    const defaultRenderOption = (props, option, { selected }) => /* @__PURE__ */ React4.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__ */ jsxRuntime.jsx(
-        material.Checkbox,
-        {
-          checked: selected,
-          disabled: option.disabled,
-          sx: {
-            color: "text.secondary",
-            "&.Mui-checked": {
-              color: "primary.main"
-            },
-            "&.Mui-disabled": {
-              color: "text.disabled"
-            },
-            mr: 1,
-            ...checkboxProps.sx
-          },
-          ...checkboxProps
-        }
-      ),
-      option.icon && /* @__PURE__ */ jsxRuntime.jsx(material.Box, { component: "span", sx: { mr: 1 }, children: option.icon }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        material.Typography,
-        {
-          variant: "body2",
-          sx: [
-            {
-              color: option.disabled ? "text.disabled" : "text.primary",
-              ...option.textSx
-            },
-            ...Array.isArray(optionSx) ? optionSx : [optionSx]
-          ],
-          children: option.label
-        }
-      )
-    );
-    const defaultRenderTags = (value, getTagProps) => /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5, mt: 0.5 }, children: value.map((option, index) => {
-      const { key, ...tagProps } = getTagProps({ index });
-      return /* @__PURE__ */ React4.createElement(
-        material.Chip,
-        {
-          ...tagProps,
-          key: option.value,
-          label: option.label,
-          disabled: disabled || option.disabled,
-          sx: [
-            {
-              height: "24px",
-              borderRadius: "4px",
-              "& .MuiChip-deleteIcon": {
-                color: "text.secondary",
-                "&:hover": {
-                  color: "text.primary"
-                }
-              },
-              ...chipSx
-            },
-            ...Array.isArray(chipSx) ? chipSx : [chipSx]
-          ],
-          className: `${chipClassName} ${option.disabled ? "Mui-disabled" : ""}`.trim(),
-          ...chipProps
-        }
-      );
-    }) });
-    const renderSelectedCount = () => {
-      if (!showSelectedCount || !multiple)
-        return null;
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        material.Typography,
-        {
-          variant: "caption",
-          sx: [
-            {
-              mt: 0.5,
-              color: "text.secondary",
-              ...selectedCountSx
-            },
-            ...Array.isArray(selectedCountSx) ? selectedCountSx : [selectedCountSx]
-          ],
-          children: [
-            `${selectedCount} selected`,
-            maxSelections ? ` (max ${maxSelections})` : ""
-          ]
-        }
-      );
-    };
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      material.Box,
-      {
-        ref,
-        className: `app-searchable-multi-selector ${className}`.trim(),
-        sx: [
-          {
-            width: "100%"
-          },
-          ...Array.isArray(sx) ? sx : sx ? [sx] : []
-        ],
-        children: /* @__PURE__ */ jsxRuntime.jsxs(
-          material.FormControl,
-          {
-            fullWidth: true,
-            error: hasError,
-            disabled,
-            className: `app-searchable-multi-selector-form-control ${formControlClassName}`.trim(),
-            sx: [
-              {
-                "& .MuiAutocomplete-root": {
-                  "& .MuiOutlinedInput-root": {
-                    padding: "4px"
-                  },
-                  "& .MuiAutocomplete-input": {
-                    padding: "8.5px 4px"
-                  }
-                }
-              },
-              ...Array.isArray(formControlSx) ? formControlSx : formControlSx ? [formControlSx] : []
-            ],
-            children: [
-              label && /* @__PURE__ */ jsxRuntime.jsxs(
-                LabelComponent,
-                {
-                  shrink: true,
-                  htmlFor: `autocomplete-${name}`,
-                  className: `app-searchable-multi-selector-label ${labelClassName}`.trim(),
-                  sx: [
-                    {
-                      mb: 1,
-                      color: hasError ? "error.main" : "text.primary",
-                      "&.Mui-focused": {
-                        color: hasError ? "error.main" : "primary.main"
-                      },
-                      ...Array.isArray(labelSx) ? labelSx : [labelSx]
-                    }
-                  ],
-                  ...labelProps,
-                  children: [
-                    label,
-                    required && /* @__PURE__ */ jsxRuntime.jsx(
-                      material.Box,
-                      {
-                        component: "span",
-                        sx: {
-                          color: "error.main",
-                          ml: 0.5
-                        },
-                        children: "*"
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                material.Autocomplete,
-                {
-                  multiple,
-                  id: `autocomplete-${name}`,
-                  options,
-                  value: selectedValues,
-                  filterOptions,
-                  onInputChange: handleInputChange,
-                  onChange: handleChange,
-                  onOpen,
-                  onClose,
-                  onBlur: handleBlur,
-                  onFocus: handleFocus,
-                  disableCloseOnSelect: multiple,
-                  readOnly,
-                  disabled,
-                  isOptionEqualToValue: (option, value) => option.value === value.value,
-                  getOptionLabel: (option) => typeof option === "string" ? option : option.label,
-                  getOptionDisabled: (option) => !!option.disabled,
-                  renderInput: externalRenderInput || defaultRenderInput,
-                  renderOption: externalRenderOption || defaultRenderOption,
-                  renderTags: externalRenderTags || defaultRenderTags,
-                  renderGroup: externalRenderGroup,
-                  ListboxProps: {
-                    className: `app-searchable-multi-selector-listbox ${listboxClassName}`.trim(),
-                    sx: {
-                      "& .MuiAutocomplete-option": {
-                        px: 2,
-                        py: 1,
-                        '&[aria-selected="true"]': {
-                          backgroundColor: "action.selected",
-                          "&.Mui-focused": {
-                            backgroundColor: "action.hover"
-                          }
-                        },
-                        "&.Mui-focused": {
-                          backgroundColor: "action.hover"
-                        }
-                      },
-                      ...Array.isArray(optionSx) ? optionSx : optionSx ? [optionSx] : [],
-                      ...Array.isArray(listboxSx) ? listboxSx : listboxSx ? [listboxSx] : []
-                    }
-                  },
-                  className: `app-searchable-multi-selector-autocomplete ${autocompleteClassName}`.trim(),
-                  sx: [
-                    {
-                      "& .MuiAutocomplete-tag": {
-                        margin: 0,
-                        height: "auto"
-                      },
-                      "& .MuiAutocomplete-endAdornment": {
-                        right: 8
-                      }
-                    },
-                    ...Array.isArray(autocompleteSx) ? autocompleteSx : autocompleteSx ? [autocompleteSx] : []
-                  ],
-                  ...autocompleteProps,
-                  ...otherProps
-                }
-              ),
-              (showHelperText || hasError) && /* @__PURE__ */ jsxRuntime.jsx(
-                HelperTextComponent,
-                {
-                  error: hasError,
-                  sx: [
-                    {
-                      mx: 0,
-                      mt: 0.5,
-                      ...hasError ? {
-                        color: "error.main",
-                        ...errorSx
-                      } : {
-                        color: "text.secondary",
-                        ...helperTextSx
-                      }
-                    }
-                  ],
-                  className: `app-searchable-multi-selector-helper-text ${helperTextClassName} ${hasError ? "Mui-error" : ""}`.trim(),
-                  ...helperTextProps,
-                  children: hasError ? fieldError : helperText
-                }
-              ),
-              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 } = formik.useFormikContext();
-  const fieldError = _19__default.default.get(errors, name);
-  const isTouched = _19__default.default.get(touched, name);
-  const val = _19__default.default.get(values, name);
-  const selectedOption = options.find((option) => option.value === val) || null;
-  const handleChange = (event, newValue) => {
-    setFieldValue(name, newValue ? newValue.value : "");
-  };
-  const handleSearchChange = (event) => {
-    const { value } = event.target;
-    if (setSearchQuery) {
-      setSearchQuery(value);
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    material.FormControl,
-    {
-      fullWidth: true,
-      variant,
-      error: isTouched && Boolean(fieldError),
-      sx: {
-        padding: "0px !important",
-        ".MuiAutocomplete-endAdornment": { right: "0 !important" },
-        ".MuiInputBase-root": {
-          padding: "0px !important",
-          pr: "39px !important",
-          pl: "10px !important"
-        },
-        ".MuiOutlinedInput-root": {
-          backgroundColor: (theme) => `${theme.palette.common.white} !important`
-        }
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        material.Autocomplete,
-        {
-          options,
-          getOptionLabel: (option) => option.label || String(option.value),
-          isOptionEqualToValue: (option, value) => option.value === value.value,
-          value: selectedOption,
-          onChange: handleChange,
-          filterOptions: (options2, { inputValue }) => {
-            return options2.filter(
-              (option) => {
-                var _a, _b, _c, _d;
-                return ((_a = option == null ? void 0 : option.label) == null ? void 0 : _a.toLowerCase().includes(inputValue.toLowerCase())) || String(option.value).toLowerCase().includes(inputValue.toLowerCase()) || ((_b = option == null ? void 0 : option.searchAbleValue1) == null ? void 0 : _b.toLowerCase().includes(inputValue.toLowerCase())) || ((_c = option == null ? void 0 : option.searchAbleValue2) == null ? void 0 : _c.toLowerCase().includes(inputValue.toLowerCase())) || ((_d = option == null ? void 0 : option.searchAbleValue3) == null ? void 0 : _d.toLowerCase().includes(inputValue.toLowerCase()));
-              }
-            );
-          },
-          renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(
-            material.TextField,
-            {
-              ...params,
-              onChange: handleSearchChange,
-              label: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                label,
-                required && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { color: "red" }, component: "span", children: " *" })
-              ] }),
-              variant,
-              placeholder,
-              error: Boolean(fieldError) && isTouched,
-              helperText: isTouched && fieldError ? fieldError : "",
-              FormHelperTextProps: {
-                sx: { color: "#FF5630" }
-              },
-              sx: {
-                "& .MuiInputLabel-root": {
-                  color: "text.primary"
-                },
-                "& .MuiInputLabel-root.Mui-focused": {
-                  color: "text.primary"
-                },
-                "& .MuiOutlinedInput-input": {
-                  color: "common.black"
-                },
-                "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
-                  borderColor: "common.white"
-                },
-                "& .MuiSvgIcon-root": {
-                  color: "common.black"
-                }
-              }
-            }
-          ),
-          ...otherProps
-        }
-      )
-    }
-  );
-}
-var AppSelectInput = React4.forwardRef(
+var AppSelectInput = React3.forwardRef(
   ({
     name,
     label,
@@ -12049,10 +11472,10 @@ var AppSelectInput = React4.forwardRef(
   }, ref) => {
     const theme = material.useTheme();
     const { values, setFieldValue, errors, touched, setFieldTouched } = formik.useFormikContext();
-    const fieldError = _19__default.default.get(errors, name);
-    const isTouched = Boolean(_19__default.default.get(touched, name));
+    const fieldError = _17__default.default.get(errors, name);
+    const isTouched = Boolean(_17__default.default.get(touched, name));
     const hasError = Boolean(fieldError) && isTouched;
-    const currentValue = _19__default.default.get(values, name);
+    const currentValue = _17__default.default.get(values, name);
     const handleValueChange = (newValue) => {
       setFieldValue(name, newValue, true);
       if (externalOnChange) {
@@ -12064,7 +11487,7 @@ var AppSelectInput = React4.forwardRef(
     };
     const selectedOption = options.find((opt) => opt.value === currentValue) || null;
     if (mode === "autocomplete") {
-      const debouncedSearch = React4__default.default.useRef();
+      const debouncedSearch = React3__default.default.useRef();
       const handleSearchChange = (query) => {
         if (debouncedSearch.current) {
           clearTimeout(debouncedSearch.current);
@@ -12080,10 +11503,7 @@ var AppSelectInput = React4.forwardRef(
           return options2;
         const inputValueLower = inputValue.toLowerCase();
         return options2.filter(
-          (option) => {
-            var _a, _b, _c;
-            return option.label.toLowerCase().includes(inputValueLower) || String(option.value).toLowerCase().includes(inputValueLower) || ((_a = option.searchAbleValue1) == null ? void 0 : _a.toLowerCase().includes(inputValueLower)) || ((_b = option.searchAbleValue2) == null ? void 0 : _b.toLowerCase().includes(inputValueLower)) || ((_c = option.searchAbleValue3) == null ? void 0 : _c.toLowerCase().includes(inputValueLower));
-          }
+          (option) => option.label.toLowerCase().includes(inputValueLower) || String(option.value).toLowerCase().includes(inputValueLower)
         );
       };
       return /* @__PURE__ */ jsxRuntime.jsx(material.Box, { ref, sx, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -12139,20 +11559,23 @@ var AppSelectInput = React4.forwardRef(
                   }
                 }
               ),
-              renderOption: (props, option) => /* @__PURE__ */ jsxRuntime.jsxs("li", { ...props, children: [
-                option.icon,
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  material.Typography,
-                  {
-                    variant: "body2",
-                    sx: {
-                      color: option.disabled ? "text.disabled" : "text.primary",
-                      ...option.textSx
-                    },
-                    children: option.label
-                  }
-                )
-              ] })
+              renderOption: (props, option) => {
+                const { key, ...restProps } = props;
+                return /* @__PURE__ */ jsxRuntime.jsxs("li", { ...restProps, children: [
+                  option.icon,
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    material.Typography,
+                    {
+                      variant: "body2",
+                      sx: {
+                        color: option.disabled ? "text.disabled" : "text.primary",
+                        ...option.textSx
+                      },
+                      children: option.label
+                    }
+                  )
+                ] }, key);
+              }
             }
           )
         }
@@ -12251,7 +11674,7 @@ var AppSelectInput_default = AppSelectInput;
 var AppSimpleUploadFile = ({
   name,
   label = "Upload Files",
-  accept = "image/*",
+  accept = "",
   multiple = false,
   disabled = false,
   required = false,
@@ -12266,8 +11689,8 @@ var AppSimpleUploadFile = ({
   onError
 }) => {
   const { setFieldValue, values, errors, touched } = formik.useFormikContext();
-  const fieldValue = _19__default.default.get(values, name);
-  const fieldError = _19__default.default.get(touched, name) ? _19__default.default.get(errors, name) : void 0;
+  const fieldValue = _17__default.default.get(values, name);
+  const fieldError = _17__default.default.get(touched, name) ? _17__default.default.get(errors, name) : void 0;
   const handleChange = (event) => {
     const files = event.target.files;
     if (!files || files.length === 0)
@@ -12294,7 +11717,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) {
@@ -12661,7 +12084,7 @@ function getRatio(ratio = "1/1") {
   }[ratio];
 }
 var TRANSPARENT_PNG = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AApIBgX6cJqkAAAAASUVORK5CYII=";
-var Image = React4.forwardRef(
+var Image = React3.forwardRef(
   ({
     ratio,
     disabledEffect = false,
@@ -12839,8 +12262,8 @@ function MultiFilePreview({
   if ((files == null ? void 0 : files.length) == null) {
     return null;
   }
-  const [anchorEl, setAnchorEl] = React4.useState(null);
-  const [selectedFile, setSelectedFile] = React4.useState(null);
+  const [anchorEl, setAnchorEl] = React3.useState(null);
+  const [selectedFile, setSelectedFile] = React3.useState(null);
   const canViewPrivate = true;
   return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, children: files.map((file) => {
     const typedFile = file;
@@ -13121,7 +12544,7 @@ function BackgroundIllustration() {
     )
   ] });
 }
-var BackgroundIllustration_default = React4.memo(BackgroundIllustration);
+var BackgroundIllustration_default = React3.memo(BackgroundIllustration);
 function UploadIllustration({ ...other }) {
   const theme = styles.useTheme();
   const PRIMARY_MAIN = theme.palette.primary.main;
@@ -13675,7 +13098,7 @@ function UploadIllustration({ ...other }) {
     )
   ] }) });
 }
-var UploadIllustration_default = React4.memo(UploadIllustration);
+var UploadIllustration_default = React3.memo(UploadIllustration);
 var StyledDropZone = styles.styled("div")(({ theme }) => ({
   outline: "none",
   cursor: "pointer",
@@ -13846,12 +13269,12 @@ function Placeholder({ sx, ...other }) {
 var AppUploadFile = ({ name, ...rest }) => {
   var _a, _b, _c;
   const { errors, touched, setFieldValue, values } = formik.useFormikContext();
-  const fieldError = _19__default.default.get(errors, name);
-  const isTouched = _19__default.default.get(touched, name);
-  let val = _19__default.default.get(values, name);
+  const fieldError = _17__default.default.get(errors, name);
+  const isTouched = _17__default.default.get(touched, name);
+  let val = _17__default.default.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__default.default.isArray(val)) {
+  } else if (!((_b = rest.multiple) != null ? _b : false) && _17__default.default.isArray(val)) {
     val = val[0];
   }
   ((_c = rest.multiple) != null ? _c : false) ? (val != null ? val : []).map((__) => (__ == null ? void 0 : __.file) ? __ == null ? void 0 : __.file : __) : val;
@@ -13953,7 +13376,7 @@ var SubmitButton = ({
   ...rest
 }) => {
   const { submitForm, isSubmitting } = formik.useFormikContext();
-  const [isLoading, setIsLoading] = React4.useState(false);
+  const [isLoading, setIsLoading] = React3.useState(false);
   const handleClick = async () => {
     try {
       setIsLoading(true);
@@ -14020,8 +13443,6 @@ exports.AppPhoneNoInput = AppPhoneNoInput_default;
 exports.AppRadioGroup = AppRadioGroup_default;
 exports.AppRating = AppRating_default;
 exports.AppRichTextEditor = AppRichTextEditor_default;
-exports.AppSearchableMultiSelector = AppSearchableMultiSelector_default;
-exports.AppSearchableSelectInput = AppSearchableSelectInput;
 exports.AppSelectInput = AppSelectInput_default;
 exports.AppSimpleUploadFile = AppSimpleUploadFile_default;
 exports.AppSwitch = AppSwitch;