formik-form-components 0.2.26 → 0.2.27

package/dist/index.js

@@ -679,25 +679,30 @@ function AppSwitchInput({
     material.Box,
     {
       className,
-      sx: [{
-        display: "flex",
-        flexDirection: labelPlacement === "start" || labelPlacement === "end" ? "row" : "column",
-        alignItems: labelPlacement === "start" || labelPlacement === "end" ? "center" : "flex-start",
-        justifyContent: labelPlacement === "start" || labelPlacement === "end" ? "space-between" : "center",
-        gap: 1,
-        my: 1,
-        ...containerSx
-      }, sx],
+      sx: [
+        {
+          display: "flex",
+          flexDirection: labelPlacement === "start" || labelPlacement === "end" ? "row" : "column",
+          alignItems: labelPlacement === "start" || labelPlacement === "end" ? "center" : "flex-start",
+          justifyContent: labelPlacement === "start" || labelPlacement === "end" ? "space-between" : "center",
+          gap: 1,
+          my: 1,
+          ...containerSx
+        },
+        sx
+      ],
       children: [
         label && /* @__PURE__ */ jsxRuntime.jsx(
           material.Typography,
           {
             variant: "body2",
-            sx: [{
-              color: "text.primary",
-              order: labelPlacement === "start" ? 0 : 1,
-              ...labelSx
-            }],
+            sx: [
+              {
+                color: "text.primary",
+                order: labelPlacement === "start" ? 0 : 1,
+                ...labelSx
+              }
+            ],
             children: label
           }
         ),
@@ -710,25 +715,27 @@ function AppSwitchInput({
             onChange: () => {
               setFieldValue(name, !values[name], true);
             },
-            sx: [{
-              "& .MuiSwitch-switchBase": {
-                color: "text.secondary",
-                "&.Mui-checked": {
-                  color: "primary.main",
-                  "& + .MuiSwitch-track": {
-                    backgroundColor: "primary.main",
-                    opacity: 0.5
+            sx: [
+              {
+                "& .MuiSwitch-switchBase": {
+                  color: "text.secondary",
+                  "&.Mui-checked": {
+                    color: "primary.main",
+                    "& + .MuiSwitch-track": {
+                      backgroundColor: "primary.main",
+                      opacity: 0.5
+                    }
+                  },
+                  "&.Mui-disabled": {
+                    color: "action.disabled",
+                    "& + .MuiSwitch-track": {
+                      backgroundColor: "action.disabledBackground"
+                    }
                   }
                 },
-                "&.Mui-disabled": {
-                  color: "action.disabled",
-                  "& + .MuiSwitch-track": {
-                    backgroundColor: "action.disabledBackground"
-                  }
-                }
-              },
-              ...switchSx
-            }],
+                ...switchSx
+              }
+            ],
             ...otherProps
           }
         ),
@@ -736,12 +743,14 @@ function AppSwitchInput({
           material.Typography,
           {
             variant: "caption",
-            sx: [{
-              color: "error.main",
-              display: "block",
-              mt: 0.5,
-              ...errorSx
-            }],
+            sx: [
+              {
+                color: "error.main",
+                display: "block",
+                mt: 0.5,
+                ...errorSx
+              }
+            ],
             gutterBottom: true,
             children: fieldError
           }
@@ -773,21 +782,26 @@ function AppSwitch({
       alignItems: labelPlacement === "start" || labelPlacement === "end" ? "center" : "flex-start",
       justifyContent: labelPlacement === "start" || labelPlacement === "end" ? "space-between" : "center",
       spacing: 1,
-      sx: [{
-        width: "100%",
-        ...labelPlacement === "top" || labelPlacement === "bottom" ? { alignItems: "flex-start" } : {},
-        ...containerSx
-      }, sx],
+      sx: [
+        {
+          width: "100%",
+          ...labelPlacement === "top" || labelPlacement === "bottom" ? { alignItems: "flex-start" } : {},
+          ...containerSx
+        },
+        sx
+      ],
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           material.Typography,
           {
             variant: "body2",
-            sx: [{
-              color: "text.primary",
-              order: labelPlacement === "start" ? 0 : 1,
-              ...labelSx
-            }],
+            sx: [
+              {
+                color: "text.primary",
+                order: labelPlacement === "start" ? 0 : 1,
+                ...labelSx
+              }
+            ],
             children: label
           }
         ),
@@ -799,25 +813,27 @@ function AppSwitch({
             onChange: () => {
               setFieldValue(name, !fieldValue, true);
             },
-            sx: [{
-              "& .MuiSwitch-switchBase": {
-                color: "text.secondary",
-                "&.Mui-checked": {
-                  color: "primary.main",
-                  "& + .MuiSwitch-track": {
-                    backgroundColor: "primary.main",
-                    opacity: 0.5
+            sx: [
+              {
+                "& .MuiSwitch-switchBase": {
+                  color: "text.secondary",
+                  "&.Mui-checked": {
+                    color: "primary.main",
+                    "& + .MuiSwitch-track": {
+                      backgroundColor: "primary.main",
+                      opacity: 0.5
+                    }
+                  },
+                  "&.Mui-disabled": {
+                    color: "action.disabled",
+                    "& + .MuiSwitch-track": {
+                      backgroundColor: "action.disabledBackground"
+                    }
                   }
                 },
-                "&.Mui-disabled": {
-                  color: "action.disabled",
-                  "& + .MuiSwitch-track": {
-                    backgroundColor: "action.disabledBackground"
-                  }
-                }
-              },
-              ...switchSx
-            }],
+                ...switchSx
+              }
+            ],
             ...otherProps
           }
         ),
@@ -825,12 +841,14 @@ function AppSwitch({
           material.Typography,
           {
             variant: "caption",
-            sx: [{
-              color: "error.main",
-              display: "block",
-              mt: 0.5,
-              ...errorSx
-            }],
+            sx: [
+              {
+                color: "error.main",
+                display: "block",
+                mt: 0.5,
+                ...errorSx
+              }
+            ],
             gutterBottom: true,
             children: fieldError
           }
@@ -11868,447 +11886,106 @@ var AppSearchableMultiSelector = react.forwardRef(
 );
 AppSearchableMultiSelector.displayName = "AppSearchableMultiSelector";
 var AppSearchableMultiSelector_default = AppSearchableMultiSelector;
-var AppSearchableMultiSelector2 = react.forwardRef((props, ref) => {
-  const {
-    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
-  } = props;
-  material.useTheme();
-  const { values, setFieldValue, errors, touched, setFieldTouched } = formik.useFormikContext();
+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 = Boolean(_19__default.default.get(touched, name));
-  const hasError = Boolean(fieldError) && isTouched;
+  const isTouched = _19__default.default.get(touched, name);
   const val = _19__default.default.get(values, name);
-  const selectedValues = Array.isArray(val) ? val : [];
-  const selectedCount = selectedValues.length;
-  const handleChange = react.useCallback(
-    (event, value, reason, details) => {
-      const normalizedValue = (() => {
-        if (value === null)
-          return [];
-        const arr = Array.isArray(value) ? value : [value];
-        return arr.map(
-          (item) => typeof item === "string" ? { value: item, label: item } : item
-        );
-      })();
-      if (maxSelections && normalizedValue.length > maxSelections) {
-        onMaxSelectionsReached == null ? void 0 : onMaxSelectionsReached(maxSelections);
-        return;
-      }
-      if (reason === "selectOption" || reason === "removeOption") {
-        const added = normalizedValue.filter(
-          (item) => !selectedValues.some((v) => v.value === item.value)
-        );
-        const removed = selectedValues.filter(
-          (item) => !normalizedValue.some((v) => v.value === item.value)
-        );
-        added.forEach((item) => onAdd == null ? void 0 : onAdd(item));
-        removed.forEach((item) => onRemove == null ? void 0 : onRemove(item));
-      }
-      setFieldValue(name, normalizedValue, true);
-      externalOnChange == null ? void 0 : externalOnChange(event, normalizedValue, reason);
-    },
-    [
-      maxSelections,
-      selectedValues,
-      setFieldValue,
-      name,
-      onMaxSelectionsReached,
-      onAdd,
-      onRemove,
-      externalOnChange
-    ]
-  );
-  const handleInputChange = react.useCallback(
-    (event, value, reason) => {
-      setSearchQuery == null ? void 0 : setSearchQuery(value);
-      externalOnInputChange == null ? void 0 : externalOnInputChange(event, value, reason);
-    },
-    [setSearchQuery, externalOnInputChange]
-  );
-  const handleBlur = react.useCallback(
-    (event) => {
-      setFieldTouched(name, true, true);
-      externalOnBlur == null ? void 0 : externalOnBlur(event);
-    },
-    [name, setFieldTouched, externalOnBlur]
-  );
-  const handleFocus = react.useCallback(
-    (event) => {
-      externalOnFocus == null ? void 0 : externalOnFocus(event);
-    },
-    [externalOnFocus]
-  );
-  const filterOptions = react.useCallback(
-    (options2, { inputValue }) => {
-      if (!inputValue)
-        return options2;
-      const inputValueLower = inputValue.toLowerCase();
-      return options2.filter(
-        (option) => {
-          var _a, _b, _c, _d;
-          return ((_a = option == null ? void 0 : option.label) == null ? void 0 : _a.toLowerCase().includes(inputValueLower)) || String(option.value).toLowerCase().includes(inputValueLower) || ((_b = option == null ? void 0 : option.searchAbleValue1) == null ? void 0 : _b.toLowerCase().includes(inputValueLower)) || ((_c = option == null ? void 0 : option.searchAbleValue2) == null ? void 0 : _c.toLowerCase().includes(inputValueLower)) || ((_d = option == null ? void 0 : option.searchAbleValue3) == null ? void 0 : _d.toLowerCase().includes(inputValueLower));
-        }
-      );
-    },
-    []
-  );
-  const defaultRenderInput = react.useCallback(
-    (params) => /* @__PURE__ */ jsxRuntime.jsx(
-      material.TextField,
-      {
-        ...params,
-        variant,
-        error: hasError,
-        helperText: "",
-        placeholder: "",
-        inputRef: inputProps.ref,
-        inputProps: {
-          ...params.inputProps,
-          ...inputProps,
-          className: `${params.inputProps.className || ""} ${inputClassName}`.trim()
-        },
-        InputProps: {
-          ...params.InputProps,
-          ...textFieldProps.InputProps,
-          className: `${params.InputProps.className || ""} ${textFieldClassName}`.trim()
-        },
-        sx: [
-          {
-            "& .MuiOutlinedInput-root": {
-              borderRadius: "8px",
-              "& fieldset": {
-                borderColor: hasError ? "error.main" : "divider"
-              },
-              "&:hover fieldset": {
-                borderColor: hasError ? "error.main" : "text.primary"
-              },
-              "&.Mui-focused fieldset": {
-                borderColor: hasError ? "error.main" : "primary.main"
-              }
-            }
-          },
-          ...Array.isArray(textFieldSx) ? textFieldSx : textFieldSx ? [textFieldSx] : []
-        ],
-        ...textFieldProps
-      }
-    ),
-    [
+  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,
-      hasError,
-      inputProps,
-      inputClassName,
-      textFieldProps,
-      textFieldClassName,
-      textFieldSx
-    ]
-  );
-  const defaultRenderOption = react.useCallback(
-    (props2, option, { selected }) => /* @__PURE__ */ react.createElement(
-      "li",
-      {
-        ...props2,
-        key: option.value,
-        className: `${props2.className || ""} ${optionClassName}`.trim(),
-        style: {
-          ...props2.style,
-          opacity: option.disabled ? 0.5 : 1,
-          pointerEvents: option.disabled ? "none" : "auto"
+      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`
         }
       },
-      /* @__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,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        material.Autocomplete,
         {
-          variant: "body2",
-          sx: [
-            {
-              color: option.disabled ? "text.disabled" : "text.primary",
-              ...option.textSx
-            },
-            ...Array.isArray(optionSx) ? optionSx : [optionSx]
-          ],
-          children: option.label
-        }
-      )
-    ),
-    [optionClassName, checkboxProps, optionSx]
-  );
-  const defaultRenderTags = react.useCallback(
-    (value, getTagProps) => /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5, mt: 0.5 }, children: value.map((option, index) => {
-      const { key, ...tagProps } = getTagProps({ index });
-      return /* @__PURE__ */ react.createElement(
-        material.Chip,
-        {
-          ...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"
-                }
+          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()));
               }
-            },
-            ...Array.isArray(chipSx) ? chipSx : [chipSx]
-          ],
-          className: `${chipClassName} ${option.disabled ? "Mui-disabled" : ""}`.trim(),
-          ...chipProps
-        }
-      );
-    }) }),
-    [disabled, chipSx, chipClassName, chipProps]
-  );
-  const renderSelectedCount = react.useCallback(() => {
-    if (!showSelectedCount || !multiple)
-      return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      material.Typography,
-      {
-        variant: "caption",
-        sx: [
-          {
-            mt: 0.5,
-            color: "text.secondary"
+            );
           },
-          ...Array.isArray(selectedCountSx) ? selectedCountSx : [selectedCountSx]
-        ],
-        children: [
-          `${selectedCount} selected`,
-          maxSelections ? ` (max ${maxSelections})` : ""
-        ]
-      }
-    );
-  }, [
-    showSelectedCount,
-    multiple,
-    selectedCount,
-    maxSelections,
-    selectedCountSx
-  ]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    material.Box,
-    {
-      ref,
-      className: `app-searchable-multi-selector ${className}`.trim(),
-      sx: [{ width: "100%" }, ...Array.isArray(sx) ? sx : sx ? [sx] : []],
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        material.FormControl,
-        {
-          fullWidth: true,
-          error: hasError,
-          disabled,
-          className: `app-searchable-multi-selector-form-control ${formControlClassName}`.trim(),
-          sx: [
+          renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(
+            material.TextField,
             {
-              "& .MuiAutocomplete-root": {
-                "& .MuiOutlinedInput-root": {
-                  padding: "4px"
+              ...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"
                 },
-                "& .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] : []
-                  ]
+                "& .MuiInputLabel-root.Mui-focused": {
+                  color: "text.primary"
                 },
-                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
+                "& .MuiOutlinedInput-input": {
+                  color: "common.black"
+                },
+                "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
+                  borderColor: "common.white"
+                },
+                "& .MuiSvgIcon-root": {
+                  color: "common.black"
+                }
               }
-            ),
-            renderSelectedCount()
-          ]
+            }
+          ),
+          ...otherProps
         }
       )
     }
   );
-});
-AppSearchableMultiSelector2.displayName = "AppSearchableMultiSelector";
-var AppSearchableSelect_default = AppSearchableMultiSelector2;
+}
 var AppSelectInput = react.forwardRef(
   ({
     name,
@@ -12419,9 +12096,16 @@ var AppSelectInput = react.forwardRef(
         className: "app-select-input",
         sx: [
           {
-            width: fullWidth ? "100%" : "auto"
+            "& .MuiInputLabel-root": {
+              "&.Mui-focused": {
+                color: hasError ? "error.main" : "primary.main"
+              },
+              "&.Mui-disabled": {
+                color: "text.disabled"
+              }
+            }
           },
-          ...Array.isArray(sx) ? sx : [sx].filter(Boolean)
+          ...Array.isArray(formControlSx) ? formControlSx : [formControlSx].filter(Boolean)
         ],
         children: /* @__PURE__ */ jsxRuntime.jsxs(
           material.FormControl,
@@ -12433,24 +12117,13 @@ var AppSelectInput = react.forwardRef(
             className: "app-select-form-control",
             sx: [
               {
-                position: "relative",
-                "& .MuiOutlinedInput-notchedOutline": {
-                  borderWidth: "1px"
-                },
                 "& .MuiInputLabel-root": {
-                  position: "relative",
-                  transform: "none",
-                  fontSize: "0.875rem",
-                  mb: 1,
                   "&.Mui-focused": {
                     color: hasError ? "error.main" : "primary.main"
                   },
                   "&.Mui-disabled": {
                     color: "text.disabled"
                   }
-                },
-                "& .MuiInputLabel-shrink": {
-                  transform: "none"
                 }
               },
               ...Array.isArray(formControlSx) ? formControlSx : formControlSx ? [formControlSx] : []
@@ -12462,23 +12135,15 @@ var AppSelectInput = react.forwardRef(
                   id: `select-${name}-label`,
                   htmlFor: `select-${name}`,
                   className: "app-select-label",
-                  shrink: false,
                   sx: [
                     {
-                      position: "relative",
-                      transform: "none",
-                      fontSize: "0.875rem",
-                      fontWeight: 500,
                       color: hasError ? "error.main" : "text.secondary",
-                      mb: 1,
                       "&.Mui-focused": {
                         color: hasError ? "error.main" : "primary.main"
                       },
-                      "&.Mui-disabled": {
-                        color: "text.disabled"
-                      }
-                    },
-                    ...Array.isArray(labelSx) ? labelSx : [labelSx].filter(Boolean)
+                      mb: 1,
+                      ...Array.isArray(labelSx) ? labelSx : [labelSx]
+                    }
                   ],
                   children: [
                     label,
@@ -12509,8 +12174,6 @@ var AppSelectInput = react.forwardRef(
                   onOpen,
                   onClose,
                   renderValue,
-                  label: void 0,
-                  displayEmpty: true,
                   inputProps: {
                     readOnly,
                     ...inputProps
@@ -12521,7 +12184,6 @@ var AppSelectInput = react.forwardRef(
                         {
                           mt: 1,
                           boxShadow: theme.shadows[3],
-                          maxHeight: 300,
                           "& .MuiMenuItem-root": {
                             px: 2,
                             py: 1,
@@ -12540,24 +12202,7 @@ var AppSelectInput = react.forwardRef(
                   },
                   sx: [
                     {
-                      "& .MuiSelect-select": {
-                        minHeight: "1.4375em",
-                        padding: "16.5px 14px",
-                        "&.MuiInputBase-input": {
-                          padding: "16.5px 14px"
-                        }
-                      },
-                      "&.MuiOutlinedInput-root": {
-                        "& fieldset": {
-                          borderWidth: "1px"
-                        },
-                        "&:hover fieldset": {
-                          borderWidth: "1px"
-                        },
-                        "&.Mui-focused fieldset": {
-                          borderWidth: "2px"
-                        }
-                      },
+                      // Your base styles here
                       "&.Mui-disabled": {
                         backgroundColor: "action.disabledBackground",
                         "& .MuiOutlinedInput-notchedOutline": {
@@ -12587,7 +12232,6 @@ var AppSelectInput = react.forwardRef(
                     {
                       mx: 0,
                       mt: 0.5,
-                      fontSize: "0.75rem",
                       ...hasError ? {
                         color: "error.main",
                         ...errorSx
@@ -14382,7 +14026,7 @@ exports.AppRadioGroup = AppRadioGroup_default;
 exports.AppRating = AppRating_default;
 exports.AppRichTextEditor = AppRichTextEditor_default;
 exports.AppSearchableMultiSelector = AppSearchableMultiSelector_default;
-exports.AppSearchableSelectInput = AppSearchableSelect_default;
+exports.AppSearchableSelectInput = AppSearchableSelectInput;
 exports.AppSelectInput = AppSelectInput_default;
 exports.AppSimpleUploadFile = AppSimpleUploadFile_default;
 exports.AppSwitch = AppSwitch;