@verma-consulting/design-library 0.1.36 → 0.1.37

package/dist/index.mjs

@@ -373,7 +373,7 @@ var TablePagination_default = TablePagination;
 
 // src/index.tsx
 import {
-  useTheme as useTheme11,
+  useTheme as useTheme12,
   styled as styled5,
   createTheme,
   ThemeProvider
@@ -973,7 +973,7 @@ var Loader = ({ size = 48, color = "primary" }) => {
       open: true,
       sx: {
         zIndex: (theme) => theme.zIndex.modal + 1,
-        backgroundColor: (theme) => theme.palette.mode === "dark" ? alpha7("#020617", 0.48) : alpha7("#E2E8F0", 0.34),
+        backgroundColor: "transparent",
         backdropFilter: "blur(10px) saturate(145%)"
       },
       children: /* @__PURE__ */ jsx9(
@@ -986,8 +986,9 @@ var Loader = ({ size = 48, color = "primary" }) => {
           sx: {
             p: 1,
             borderRadius: "50%",
-            backgroundColor: (theme) => alpha7(theme.palette.background.paper, theme.palette.mode === "dark" ? 0.18 : 0.72),
-            border: (theme) => `1px solid ${alpha7("#FFFFFF", theme.palette.mode === "dark" ? 0.14 : 0.56)}`
+            backgroundColor: "transparent",
+            border: (theme) => `1px solid ${alpha7("#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)"
           }
         }
       )
@@ -1301,20 +1302,21 @@ import {
   FormControl as FormControl2,
   IconButton as IconButton6
 } from "@mui/material";
-import { alpha as alpha11 } from "@mui/material/styles";
+import { alpha as alpha11, useTheme as useTheme9 } from "@mui/material/styles";
 import { Clear as Clear2 } from "@mui/icons-material";
 import { makeStyles as makeStyles3 } from "@mui/styles";
 import { Fragment as Fragment2, jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
-var useStyles3 = makeStyles3(() => ({
+var useStyles3 = makeStyles3((theme) => ({
   defaultMode: {
+    margin: "4px",
     padding: "14px 8px",
     cursor: "pointer",
     borderRadius: 14,
-    border: "1px solid rgba(255,255,255,0.55)",
+    border: `1px solid ${alpha11("#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: {
@@ -1340,11 +1342,13 @@ var SearchableSelect = React8.memo(
     defaultEditMode = false,
     multiple = false
   }) => {
+    const theme = useTheme9();
     const classes = useStyles3();
     const wrapperRef = useRef3(null);
     const inputRef = useRef3(null);
     const [editMode, setEditMode] = useState4(defaultEditMode);
     const [open, setOpen] = useState4(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))";
     useEffect3(() => {
       function handleClickOutside(event) {
         if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
@@ -1424,6 +1428,56 @@ var SearchableSelect = React8.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 ${alpha11("#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: alpha11(
+                    theme.palette.primary.main,
+                    theme.palette.mode === "dark" ? 0.28 : 0.14
+                  )
+                },
+                "&.Mui-focused": {
+                  backgroundColor: alpha11(
+                    theme.palette.primary.main,
+                    theme.palette.mode === "dark" ? 0.2 : 0.1
+                  )
+                }
+              }
+            }
+          }
+        },
         renderInput: (params) => /* @__PURE__ */ jsx16(
           TextField,
           {
@@ -1438,8 +1492,23 @@ var SearchableSelect = React8.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: alpha11("#FFFFFF", 0.6)
+                  borderColor: alpha11(
+                    "#FFFFFF",
+                    theme.palette.mode === "dark" ? 0.18 : 0.6
+                  )
                 }
               },
               endAdornment: /* @__PURE__ */ jsxs9(Fragment2, { children: [
@@ -1480,8 +1549,8 @@ var SearchableSelect = React8.memo(
         className: classes.defaultMode,
         style,
         children: [
-          /* @__PURE__ */ jsx16(FormLabel2, { className: classes.formLabel, children: label }),
-          /* @__PURE__ */ jsx16(Typography5, { className: classes.formValue, children: displayValue })
+          /* @__PURE__ */ jsx16(FormLabel2, { className: classes.formLabel, sx: { color: "text.secondary" }, children: label }),
+          /* @__PURE__ */ jsx16(Typography5, { className: classes.formValue, sx: { color: "text.primary" }, children: displayValue })
         ]
       }
     );
@@ -1496,7 +1565,7 @@ import {
   Box as Box6,
   IconButton as IconButton7,
   Grid as Grid2,
-  useTheme as useTheme9,
+  useTheme as useTheme10,
   useMediaQuery as useMediaQuery3
 } from "@mui/material";
 import { alpha as alpha12 } from "@mui/material/styles";
@@ -1509,7 +1578,7 @@ var FormDrawer = ({
   actions,
   children
 }) => {
-  const theme = useTheme9();
+  const theme = useTheme10();
   const mdMatches = useMediaQuery3(theme.breakpoints.down("md"));
   return /* @__PURE__ */ jsxs10(
     Drawer,
@@ -1586,7 +1655,7 @@ import {
   Stack,
   TextField as TextField2,
   MenuItem,
-  useTheme as useTheme10,
+  useTheme as useTheme11,
   useMediaQuery as useMediaQuery4
 } from "@mui/material";
 import { alpha as alpha13 } from "@mui/material/styles";
@@ -1602,7 +1671,7 @@ var PhoneNumberField = ({
   autoFocus = false,
   onBlur
 }) => {
-  const theme = useTheme10();
+  const theme = useTheme11();
   const smMatches = useMediaQuery4(theme.breakpoints.down("sm"));
   const countries = constants2.COUNTRIES || [];
   const glassInputSx = {
@@ -1808,6 +1877,6 @@ export {
   createTheme,
   makeStyles4 as makeStyles,
   styled5 as styled,
-  useTheme11 as useTheme
+  useTheme12 as useTheme
 };
 //# sourceMappingURL=index.mjs.map