@verma-consulting/design-library 0.1.36 → 0.1.37

package/dist/index.js

@@ -996,7 +996,7 @@ var Loader = ({ size = 48, color = "primary" }) => {
       open: true,
       sx: {
         zIndex: (theme) => theme.zIndex.modal + 1,
-        backgroundColor: (theme) => theme.palette.mode === "dark" ? (0, import_styles11.alpha)("#020617", 0.48) : (0, import_styles11.alpha)("#E2E8F0", 0.34),
+        backgroundColor: "transparent",
         backdropFilter: "blur(10px) saturate(145%)"
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
@@ -1009,8 +1009,9 @@ var Loader = ({ size = 48, color = "primary" }) => {
           sx: {
             p: 1,
             borderRadius: "50%",
-            backgroundColor: (theme) => (0, import_styles11.alpha)(theme.palette.background.paper, theme.palette.mode === "dark" ? 0.18 : 0.72),
-            border: (theme) => `1px solid ${(0, import_styles11.alpha)("#FFFFFF", theme.palette.mode === "dark" ? 0.14 : 0.56)}`
+            backgroundColor: "transparent",
+            border: (theme) => `1px solid ${(0, import_styles11.alpha)("#FFFFFF", theme.palette.mode === "dark" ? 0.14 : 0.56)}`,
+            boxShadow: (theme) => theme.palette.mode === "dark" ? "0 10px 24px rgba(0,0,0,0.32)" : "0 10px 20px rgba(15,23,42,0.14)"
           }
         }
       )
@@ -1321,16 +1322,17 @@ var import_styles15 = require("@mui/material/styles");
 var import_icons_material7 = require("@mui/icons-material");
 var import_styles16 = require("@mui/styles");
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var useStyles3 = (0, import_styles16.makeStyles)(() => ({
+var useStyles3 = (0, import_styles16.makeStyles)((theme) => ({
   defaultMode: {
+    margin: "4px",
     padding: "14px 8px",
     cursor: "pointer",
     borderRadius: 14,
-    border: "1px solid rgba(255,255,255,0.55)",
+    border: `1px solid ${(0, import_styles15.alpha)("#FFFFFF", theme.palette.mode === "dark" ? 0.16 : 0.55)}`,
     backdropFilter: "blur(14px) saturate(150%)",
-    background: "linear-gradient(160deg, rgba(255,255,255,0.9), rgba(245,249,255,0.72))",
+    background: theme.palette.mode === "dark" ? "linear-gradient(160deg, rgba(31,41,55,0.78), rgba(17,24,39,0.68))" : "linear-gradient(160deg, rgba(255,255,255,0.9), rgba(245,249,255,0.72))",
     "&:hover": {
-      boxShadow: "rgba(15, 23, 42, 0.16) 0px 8px 24px"
+      boxShadow: theme.palette.mode === "dark" ? "rgba(0, 0, 0, 0.34) 0px 10px 26px" : "rgba(15, 23, 42, 0.16) 0px 8px 24px"
     }
   },
   formLabel: {
@@ -1356,11 +1358,13 @@ var SearchableSelect = import_react7.default.memo(
     defaultEditMode = false,
     multiple = false
   }) => {
+    const theme = (0, import_styles15.useTheme)();
     const classes = useStyles3();
     const wrapperRef = (0, import_react7.useRef)(null);
     const inputRef = (0, import_react7.useRef)(null);
     const [editMode, setEditMode] = (0, import_react7.useState)(defaultEditMode);
     const [open, setOpen] = (0, import_react7.useState)(defaultEditMode);
+    const glassBackground = theme.palette.mode === "dark" ? "linear-gradient(160deg, rgba(31,41,55,0.78), rgba(17,24,39,0.68))" : "linear-gradient(160deg, rgba(255,255,255,0.9), rgba(245,249,255,0.72))";
     (0, import_react7.useEffect)(() => {
       function handleClickOutside(event) {
         if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
@@ -1440,6 +1444,56 @@ var SearchableSelect = import_react7.default.memo(
         autoHighlight: true,
         getOptionLabel: (option) => option.label,
         isOptionEqualToValue: (option, val) => option.value === val.value,
+        sx: {
+          "& .MuiAutocomplete-inputRoot": {
+            background: glassBackground,
+            color: "text.primary"
+          },
+          "& .MuiAutocomplete-inputRoot.Mui-focused": {
+            background: glassBackground,
+            color: "text.primary"
+          },
+          "& .MuiAutocomplete-inputRoot:hover": {
+            background: glassBackground
+          },
+          "& .MuiAutocomplete-input": {
+            color: "text.primary",
+            WebkitTextFillColor: "currentColor"
+          },
+          "& .MuiInputLabel-root": {
+            color: "text.secondary"
+          },
+          "& .MuiInputLabel-root.Mui-focused": {
+            color: "text.primary"
+          },
+          "& .MuiSvgIcon-root": {
+            color: "text.secondary"
+          }
+        },
+        slotProps: {
+          paper: {
+            sx: {
+              background: glassBackground,
+              backdropFilter: "blur(12px) saturate(150%)",
+              border: `1px solid ${(0, import_styles15.alpha)("#FFFFFF", theme.palette.mode === "dark" ? 0.16 : 0.55)}`,
+              boxShadow: theme.palette.mode === "dark" ? "rgba(0, 0, 0, 0.34) 0px 10px 26px" : "rgba(15, 23, 42, 0.16) 0px 8px 24px",
+              "& .MuiAutocomplete-option": {
+                "&[aria-selected='true']": {
+                  backgroundColor: (0, import_styles15.alpha)(
+                    theme.palette.primary.main,
+                    theme.palette.mode === "dark" ? 0.28 : 0.14
+                  )
+                },
+                "&.Mui-focused": {
+                  backgroundColor: (0, import_styles15.alpha)(
+                    theme.palette.primary.main,
+                    theme.palette.mode === "dark" ? 0.2 : 0.1
+                  )
+                }
+              }
+            }
+          }
+        },
         renderInput: (params) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           import_material14.TextField,
           {
@@ -1454,8 +1508,23 @@ var SearchableSelect = import_react7.default.memo(
                 borderRadius: 1.75,
                 backdropFilter: "blur(10px)",
                 pr: 1.5,
+                background: glassBackground,
+                color: "text.primary",
+                "&.Mui-focused": {
+                  background: glassBackground
+                },
+                "&:hover": {
+                  background: glassBackground
+                },
+                "& .MuiInputBase-input": {
+                  color: "text.primary",
+                  WebkitTextFillColor: "currentColor"
+                },
                 "& .MuiOutlinedInput-notchedOutline": {
-                  borderColor: (0, import_styles15.alpha)("#FFFFFF", 0.6)
+                  borderColor: (0, import_styles15.alpha)(
+                    "#FFFFFF",
+                    theme.palette.mode === "dark" ? 0.18 : 0.6
+                  )
                 }
               },
               endAdornment: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
@@ -1496,8 +1565,8 @@ var SearchableSelect = import_react7.default.memo(
         className: classes.defaultMode,
         style,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material14.FormLabel, { className: classes.formLabel, children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material14.Typography, { className: classes.formValue, children: displayValue })
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material14.FormLabel, { className: classes.formLabel, sx: { color: "text.secondary" }, children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material14.Typography, { className: classes.formValue, sx: { color: "text.primary" }, children: displayValue })
         ]
       }
     );