@verma-consulting/design-library 0.1.35 → 0.1.37

package/dist/index.mjs

@@ -13,6 +13,7 @@ import {
   Typography,
   FormLabel
 } from "@mui/material";
+import { alpha } from "@mui/material/styles";
 import { Clear } from "@mui/icons-material";
 import { makeStyles } from "@mui/styles";
 import { prettifyString } from "@verma-consulting/common-library";
@@ -21,12 +22,15 @@ var useStyles = makeStyles((theme) => ({
   defaultMode: {
     paddingTop: 14,
     paddingBottom: 14,
-    paddingLeft: 8,
-    paddingRight: 8,
+    paddingLeft: 12,
+    paddingRight: 12,
     cursor: "pointer",
+    borderRadius: 14,
+    border: "1px solid rgba(255,255,255,0.55)",
+    backdropFilter: "blur(14px) saturate(150%)",
+    background: "linear-gradient(160deg, rgba(255,255,255,0.9), rgba(245,249,255,0.72))",
     "&:hover": {
-      borderRadius: 10,
-      boxShadow: "rgba(100, 100, 111, 0.2) 0px 7px 29px 0px"
+      boxShadow: "rgba(15, 23, 42, 0.16) 0px 8px 24px"
     }
   },
   formLabel: {
@@ -123,7 +127,12 @@ var ClearableSelect = ({
                   label,
                   name,
                   sx: {
-                    paddingRight: !isValueEmpty ? 2 : void 0
+                    paddingRight: !isValueEmpty ? 2 : void 0,
+                    borderRadius: 1.75,
+                    backdropFilter: "blur(10px)",
+                    "& .MuiOutlinedInput-notchedOutline": {
+                      borderColor: alpha("#FFFFFF", 0.6)
+                    }
                   }
                 }
               ),
@@ -175,6 +184,7 @@ var TabPanel_default = TabPanel;
 import * as React2 from "react";
 import MuiTablePagination from "@mui/material/TablePagination";
 import tablePaginationClasses from "@mui/material/TablePagination/tablePaginationClasses";
+import { alpha as alpha2 } from "@mui/material/styles";
 import { jsx as jsx3 } from "react/jsx-runtime";
 function mergeSx(...parts) {
   const flat = [];
@@ -221,6 +231,8 @@ var rootSx = {
   boxSizing: "border-box",
   verticalAlign: "middle",
   bgcolor: "transparent",
+  backdropFilter: "blur(12px) saturate(150%)",
+  borderRadius: 2,
   py: 0.75,
   px: { xs: 1, sm: 1.5 },
   [`& .${tablePaginationClasses.toolbar}`]: {
@@ -266,11 +278,13 @@ var rootSx = {
     display: "flex",
     alignItems: "center",
     [`& .MuiIconButton-root`]: {
-      borderRadius: 1.5,
+      borderRadius: 2,
       color: "text.secondary",
       padding: 0.5,
+      border: "1px solid",
+      borderColor: "divider",
       "&:hover": {
-        bgcolor: "action.hover",
+        bgcolor: "action.selected",
         color: "text.primary"
       },
       "&.Mui-disabled": {
@@ -306,11 +320,19 @@ var TablePagination = React2.forwardRef(function TablePagination2(props, ref) {
     ...slotSelectRest,
     sx: mergeSx(
       (theme) => ({
-        borderRadius: 1.5,
+        borderRadius: 2,
         minWidth: 64,
         fontSize: theme.typography.body2.fontSize,
+        backdropFilter: "blur(10px)",
+        backgroundColor: alpha2(
+          theme.palette.background.paper,
+          theme.palette.mode === "dark" ? 0.2 : 0.74
+        ),
         "& .MuiOutlinedInput-notchedOutline": {
-          borderColor: "divider"
+          borderColor: alpha2(
+            "#FFFFFF",
+            theme.palette.mode === "dark" ? 0.16 : 0.56
+          )
         },
         "&:hover .MuiOutlinedInput-notchedOutline": {
           borderColor: "text.disabled"
@@ -351,12 +373,12 @@ var TablePagination_default = TablePagination;
 
 // src/index.tsx
 import {
-  useTheme as useTheme10,
+  useTheme as useTheme12,
   styled as styled5,
   createTheme,
   ThemeProvider
 } from "@mui/material/styles";
-import { makeStyles as makeStyles5 } from "@mui/styles";
+import { makeStyles as makeStyles4 } from "@mui/styles";
 
 // src/Logo.tsx
 import { memo } from "react";
@@ -496,6 +518,9 @@ import { useTheme as useTheme3 } from "@mui/material/styles";
 import { Close } from "@mui/icons-material";
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var BootstrapDialog = styled(Dialog)(({ theme }) => ({
+  "& .MuiDialog-paper": {
+    borderRadius: "24px"
+  },
   "& .MuiDialogContent-root": {
     padding: theme.spacing(4)
   },
@@ -568,9 +593,25 @@ var FormDialog = ({
 var FormDialog_default = FormDialog;
 
 // src/InputFileUpload.tsx
-import { styled as styled2 } from "@mui/material/styles";
+import { alpha as alpha4, styled as styled2 } from "@mui/material/styles";
 import { Button } from "@mui/material";
 import { CloudUpload } from "@mui/icons-material";
+
+// src/glassStyles.ts
+import { alpha as alpha3 } from "@mui/material/styles";
+var glassBorder = (theme) => `1px solid ${alpha3(
+  "#FFFFFF",
+  theme.palette.mode === "dark" ? 0.16 : 0.62
+)}`;
+var glassSurface = (theme) => ({
+  background: theme.palette.mode === "dark" ? `linear-gradient(160deg, ${alpha3("#1F2937", 0.78)} 0%, ${alpha3("#111827", 0.68)} 100%)` : `linear-gradient(160deg, ${alpha3("#FFFFFF", 0.88)} 0%, ${alpha3("#F5F9FF", 0.72)} 100%)`,
+  border: glassBorder(theme),
+  backdropFilter: "blur(18px) saturate(155%)",
+  WebkitBackdropFilter: "blur(18px) saturate(155%)",
+  boxShadow: theme.palette.mode === "dark" ? "0 16px 40px rgba(0,0,0,0.34)" : "0 14px 34px rgba(15, 23, 42, 0.12)"
+});
+
+// src/InputFileUpload.tsx
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var VisuallyHiddenInput = styled2("input")({
   clip: "rect(0 0 0 0)",
@@ -592,6 +633,18 @@ var InputFileUpload = ({ name = "", onChange = () => null, title = "" }) => /* @
     variant: "contained",
     tabIndex: -1,
     startIcon: /* @__PURE__ */ jsx6(CloudUpload, { fontSize: "inherit" }),
+    sx: {
+      ...(theme) => glassSurface(theme),
+      textTransform: "none",
+      borderRadius: 999,
+      px: 2.25,
+      py: 0.75,
+      color: "text.primary",
+      borderColor: (theme) => alpha4(theme.palette.primary.main, 0.24),
+      "&:hover": {
+        borderColor: (theme) => alpha4(theme.palette.primary.main, 0.42)
+      }
+    },
     children: [
       title,
       /* @__PURE__ */ jsx6(VisuallyHiddenInput, { type: "file", name, onChange })
@@ -603,7 +656,7 @@ var InputFileUpload_default = InputFileUpload;
 // src/ImageUploadAvatar.tsx
 import { useEffect, useRef, useState } from "react";
 import { Box as Box3, IconButton as IconButton3 } from "@mui/material";
-import { styled as styled3 } from "@mui/material/styles";
+import { alpha as alpha5, styled as styled3 } from "@mui/material/styles";
 import { CloudUpload as CloudUpload2, Close as CloseIcon } from "@mui/icons-material";
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var HiddenInput = styled3("input")({
@@ -623,8 +676,8 @@ var Wrapper = styled3(Box3, {
   width: size,
   height: size,
   borderRadius: variant === "circular" ? "50%" : variant === "rounded" ? theme.shape.borderRadius * 2 : 0,
-  border: `1px dashed ${theme.palette.grey[400]}`,
-  backgroundColor: theme.palette.grey[200],
+  ...glassSurface(theme),
+  border: `1px dashed ${alpha5(theme.palette.primary.main, 0.28)}`,
   overflow: "hidden",
   cursor: "pointer",
   display: "flex",
@@ -663,9 +716,11 @@ var ClearButton = styled3(IconButton3)(({ theme }) => ({
   position: "absolute",
   top: -8,
   right: -8,
-  background: theme.palette.background.paper,
+  ...glassSurface(theme),
   boxShadow: theme.shadows[2],
-  "&:hover": { background: theme.palette.background.paper }
+  "&:hover": {
+    background: alpha5(theme.palette.background.paper, 0.9)
+  }
 }));
 var ImageUploadAvatar = ({
   name = "image",
@@ -748,7 +803,7 @@ import {
   Grow,
   IconButton as IconButton4
 } from "@mui/material";
-import { alpha, useTheme as useTheme4 } from "@mui/material/styles";
+import { alpha as alpha6, useTheme as useTheme4 } from "@mui/material/styles";
 import CloseIcon2 from "@mui/icons-material/Close";
 import { constants } from "@verma-consulting/common-library";
 import { jsx as jsx8 } from "react/jsx-runtime";
@@ -824,7 +879,7 @@ var FormSnackBar = ({
   const typeStyles = (severity2) => {
     const baseHex = severity2 === "success" ? DULL_SNACKBAR_COLORS.success : severity2 === "error" ? DULL_SNACKBAR_COLORS.error : severity2 === "warning" ? DULL_SNACKBAR_COLORS.warning : DULL_SNACKBAR_COLORS.info;
     return {
-      bg: theme.palette.mode === "dark" ? alpha(baseHex, 0.34) : alpha(baseHex, 0.24),
+      bg: theme.palette.mode === "dark" ? alpha6(baseHex, 0.34) : alpha6(baseHex, 0.24),
       text: theme.palette.mode === "dark" ? "rgba(255,255,255,0.94)" : baseHex,
       icon: baseHex
     };
@@ -865,7 +920,7 @@ var FormSnackBar = ({
               color: colors.text,
               backdropFilter: "blur(14px) saturate(150%)",
               WebkitBackdropFilter: "blur(14px) saturate(150%)",
-              border: `1px solid ${alpha("#FFFFFF", theme.palette.mode === "dark" ? 0.16 : 0.55)}`,
+              border: `1px solid ${alpha6("#FFFFFF", theme.palette.mode === "dark" ? 0.16 : 0.55)}`,
               "& .MuiAlert-icon": {
                 color: colors.icon
               },
@@ -898,6 +953,7 @@ var FormSnackBar_default = FormSnackBar;
 // src/Loader.tsx
 import { CircularProgress, Backdrop } from "@mui/material";
 import { makeStyles as makeStyles2 } from "@mui/styles";
+import { alpha as alpha7 } from "@mui/material/styles";
 import { jsx as jsx9 } from "react/jsx-runtime";
 var useStyles2 = makeStyles2({
   "@keyframes pulse": {
@@ -917,10 +973,25 @@ var Loader = ({ size = 48, color = "primary" }) => {
       open: true,
       sx: {
         zIndex: (theme) => theme.zIndex.modal + 1,
-        backgroundColor: "rgba(255, 255, 255, 0.15)",
-        backdropFilter: "blur(2px)"
+        backgroundColor: "transparent",
+        backdropFilter: "blur(10px) saturate(145%)"
       },
-      children: /* @__PURE__ */ jsx9(CircularProgress, { size, color, thickness: 3.5, className: classes.progress })
+      children: /* @__PURE__ */ jsx9(
+        CircularProgress,
+        {
+          size,
+          color,
+          thickness: 3.4,
+          className: classes.progress,
+          sx: {
+            p: 1,
+            borderRadius: "50%",
+            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)"
+          }
+        }
+      )
     }
   );
 };
@@ -1023,22 +1094,9 @@ var EmptyState = ({ label, m = 8, icon }) => {
 var EmptyState_default = EmptyState;
 
 // src/Pill.tsx
-import { Button as Button2, Typography as Typography4, Icon, useTheme as useTheme7 } from "@mui/material";
-import { makeStyles as makeStyles3 } from "@mui/styles";
+import { Button as Button2, Typography as Typography4, Icon } from "@mui/material";
+import { alpha as alpha8, useTheme as useTheme7 } from "@mui/material/styles";
 import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
-var useStyles3 = makeStyles3((theme) => ({
-  button: {
-    padding: "4px 8px 4px 8px",
-    color: "black",
-    borderColor: "black",
-    borderStyle: "solid",
-    border: "6px",
-    borderRadius: "24px !important",
-    "&:hover": {
-      color: theme.palette.primary[500]
-    }
-  }
-}));
 var Pill = ({
   variant = "filter",
   leftIcon = null,
@@ -1050,18 +1108,26 @@ var Pill = ({
   disabled = false
 }) => {
   const theme = useTheme7();
-  const classes = useStyles3();
   return /* @__PURE__ */ jsx12(
     Button2,
     {
       variant: isSelected ? "contained" : "outlined",
       color: color || "primary",
       sx: {
-        borderRadius: "48px",
-        padding: "8px 24px",
-        textTransform: "none"
+        ...glassSurface(theme),
+        borderRadius: "999px",
+        padding: "8px 16px",
+        minHeight: 38,
+        textTransform: "none",
+        borderColor: isSelected ? alpha8(theme.palette.primary.main, 0.34) : alpha8(theme.palette.text.primary, 0.18),
+        color: isSelected ? "primary.main" : "text.primary",
+        "&:hover": {
+          borderColor: alpha8(theme.palette.primary.main, 0.42),
+          boxShadow: theme.palette.mode === "dark" ? "0 10px 22px rgba(0,0,0,0.34)" : "0 10px 20px rgba(15,23,42,0.14)"
+        }
       },
       onClick,
+      disabled,
       children: /* @__PURE__ */ jsxs7("div", { style: { display: "flex", alignItems: "center" }, children: [
         leftIcon && /* @__PURE__ */ jsx12(
           Icon,
@@ -1073,7 +1139,7 @@ var Pill = ({
             "data-testid": "pill-left-icon"
           }
         ),
-        /* @__PURE__ */ jsx12(Typography4, { variant: "subtitle", color: "inherit", fontWeight: "bold", children: label }),
+        /* @__PURE__ */ jsx12(Typography4, { variant: "subtitle2", color: "inherit", fontWeight: 700, children: label }),
         rightIcon && /* @__PURE__ */ jsx12(
           Icon,
           {
@@ -1091,7 +1157,7 @@ var Pill = ({
 var Pill_default = Pill;
 
 // src/IOSSwitch.tsx
-import { styled as styled4 } from "@mui/material/styles";
+import { alpha as alpha9, styled as styled4 } from "@mui/material/styles";
 import Switch from "@mui/material/Switch";
 import { jsx as jsx13 } from "react/jsx-runtime";
 var IOSSwitch = styled4((props) => /* @__PURE__ */ jsx13(Switch, { focusVisibleClassName: ".Mui-focusVisible", disableRipple: true, ...props }))(({ theme }) => ({
@@ -1106,7 +1172,7 @@ var IOSSwitch = styled4((props) => /* @__PURE__ */ jsx13(Switch, { focusVisibleC
       transform: "translateX(16px)",
       color: "#fff",
       "& + .MuiSwitch-track": {
-        backgroundColor: theme.palette.primary.main,
+        background: `linear-gradient(120deg, ${alpha9(theme.palette.primary.light, 0.92)} 0%, ${alpha9(theme.palette.primary.main, 0.94)} 100%)`,
         opacity: 1,
         border: 0
       },
@@ -1128,11 +1194,15 @@ var IOSSwitch = styled4((props) => /* @__PURE__ */ jsx13(Switch, { focusVisibleC
   "& .MuiSwitch-thumb": {
     boxSizing: "border-box",
     width: 26,
-    height: 26
+    height: 26,
+    boxShadow: theme.palette.mode === "dark" ? "0 2px 8px rgba(0,0,0,0.38)" : "0 2px 6px rgba(15,23,42,0.24)"
   },
   "& .MuiSwitch-track": {
     borderRadius: 30 / 2,
-    backgroundColor: theme.palette.mode === "light" ? "#E9E9EA" : theme.palette.grey[600],
+    background: theme.palette.mode === "light" ? "linear-gradient(120deg, rgba(245,248,255,0.92) 0%, rgba(224,232,245,0.92) 100%)" : "linear-gradient(120deg, rgba(55,65,81,0.74) 0%, rgba(31,41,55,0.8) 100%)",
+    border: `1px solid ${alpha9("#FFFFFF", theme.palette.mode === "dark" ? 0.16 : 0.56)}`,
+    backdropFilter: "blur(10px) saturate(145%)",
+    WebkitBackdropFilter: "blur(10px) saturate(145%)",
     opacity: 1,
     transition: theme.transitions.create(["background-color"], {
       duration: 500
@@ -1143,6 +1213,7 @@ var IOSSwitch_default = IOSSwitch;
 
 // src/StatusPill.tsx
 import { Chip } from "@mui/material";
+import { alpha as alpha10, useTheme as useTheme8 } from "@mui/material/styles";
 import { userStatus } from "@verma-consulting/common-library";
 import { jsx as jsx14 } from "react/jsx-runtime";
 var statusColorMap = {
@@ -1151,15 +1222,24 @@ var statusColorMap = {
   [userStatus.Inactive]: "error",
   [userStatus.Invited]: "info"
 };
-var StatusPill = ({ status }) => /* @__PURE__ */ jsx14(
-  Chip,
-  {
-    label: status,
-    color: statusColorMap[status],
-    variant: "outlined",
-    sx: { fontWeight: 600, borderRadius: "16px", px: 1.5 }
-  }
-);
+var StatusPill = ({ status }) => {
+  const theme = useTheme8();
+  return /* @__PURE__ */ jsx14(
+    Chip,
+    {
+      label: status,
+      color: statusColorMap[status],
+      variant: "filled",
+      sx: {
+        ...glassSurface(theme),
+        fontWeight: 700,
+        borderRadius: "999px",
+        px: 1,
+        borderColor: alpha10(theme.palette.text.primary, 0.14)
+      }
+    }
+  );
+};
 var StatusPill_default = StatusPill;
 
 // src/FormPopover.tsx
@@ -1222,16 +1302,21 @@ import {
   FormControl as FormControl2,
   IconButton as IconButton6
 } from "@mui/material";
+import { alpha as alpha11, useTheme as useTheme9 } from "@mui/material/styles";
 import { Clear as Clear2 } from "@mui/icons-material";
-import { makeStyles as makeStyles4 } from "@mui/styles";
+import { makeStyles as makeStyles3 } from "@mui/styles";
 import { Fragment as Fragment2, jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
-var useStyles4 = makeStyles4(() => ({
+var useStyles3 = makeStyles3((theme) => ({
   defaultMode: {
+    margin: "4px",
     padding: "14px 8px",
     cursor: "pointer",
+    borderRadius: 14,
+    border: `1px solid ${alpha11("#FFFFFF", theme.palette.mode === "dark" ? 0.16 : 0.55)}`,
+    backdropFilter: "blur(14px) saturate(150%)",
+    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": {
-      borderRadius: 10,
-      boxShadow: "rgba(100, 100, 111, 0.2) 0px 7px 29px 0px"
+      boxShadow: theme.palette.mode === "dark" ? "rgba(0, 0, 0, 0.34) 0px 10px 26px" : "rgba(15, 23, 42, 0.16) 0px 8px 24px"
     }
   },
   formLabel: {
@@ -1257,11 +1342,13 @@ var SearchableSelect = React8.memo(
     defaultEditMode = false,
     multiple = false
   }) => {
-    const classes = useStyles4();
+    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)) {
@@ -1337,10 +1424,60 @@ var SearchableSelect = React8.memo(
             setOpen(false);
           }
         },
-        disableClearable: !onClear,
+        disableClearable: true,
         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,
           {
@@ -1351,19 +1488,46 @@ var SearchableSelect = React8.memo(
             inputRef,
             InputProps: {
               ...params.InputProps,
-              endAdornment: /* @__PURE__ */ jsx16(Fragment2, { children: !isValueEmpty && /* @__PURE__ */ jsx16(
-                IconButton6,
-                {
-                  "aria-label": `clear ${name}`,
-                  onClick: handleClear,
-                  size: "small",
-                  sx: {
-                    backgroundColor: "transparent",
-                    boxShadow: "none"
-                  },
-                  children: /* @__PURE__ */ jsx16(Clear2, { fontSize: "inherit" })
+              sx: {
+                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",
+                    theme.palette.mode === "dark" ? 0.18 : 0.6
+                  )
                 }
-              ) })
+              },
+              endAdornment: /* @__PURE__ */ jsxs9(Fragment2, { children: [
+                !isValueEmpty && /* @__PURE__ */ jsx16(
+                  IconButton6,
+                  {
+                    "aria-label": `clear ${name}`,
+                    onClick: handleClear,
+                    size: "small",
+                    sx: {
+                      backgroundColor: "transparent",
+                      boxShadow: "none",
+                      mr: 0.25
+                    },
+                    children: /* @__PURE__ */ jsx16(Clear2, { fontSize: "inherit" })
+                  }
+                ),
+                params.InputProps.endAdornment
+              ] })
             }
           }
         ),
@@ -1385,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 })
         ]
       }
     );
@@ -1401,9 +1565,10 @@ import {
   Box as Box6,
   IconButton as IconButton7,
   Grid as Grid2,
-  useTheme as useTheme8,
+  useTheme as useTheme10,
   useMediaQuery as useMediaQuery3
 } from "@mui/material";
+import { alpha as alpha12 } from "@mui/material/styles";
 import { Close as Close2 } from "@mui/icons-material";
 import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
 var FormDrawer = ({
@@ -1413,7 +1578,7 @@ var FormDrawer = ({
   actions,
   children
 }) => {
-  const theme = useTheme8();
+  const theme = useTheme10();
   const mdMatches = useMediaQuery3(theme.breakpoints.down("md"));
   return /* @__PURE__ */ jsxs10(
     Drawer,
@@ -1427,37 +1592,47 @@ var FormDrawer = ({
           height: "100%",
           display: "flex",
           flexDirection: "column",
-          borderRadius: 0
+          borderRadius: mdMatches ? "24px 24px 0 0" : "24px 0 0 24px"
         }
       },
       children: [
-        /* @__PURE__ */ jsx17(Box6, { p: 3, borderBottom: "1px solid #eee", children: /* @__PURE__ */ jsxs10(Grid2, { container: true, children: [
-          /* @__PURE__ */ jsx17(Grid2, { item: true, children: title && /* @__PURE__ */ jsx17(Typography6, { variant: "h6", fontWeight: "bold", children: title }) }),
-          /* @__PURE__ */ jsx17(Grid2, { item: true, children: /* @__PURE__ */ jsx17(
-            IconButton7,
-            {
-              size: "medium",
-              onClick: () => setOpen(false),
-              sx: {
-                position: "absolute",
-                top: 8,
-                right: 8,
-                zIndex: 2
-              },
-              children: /* @__PURE__ */ jsx17(Close2, { fontSize: "inherit" })
-            }
-          ) })
-        ] }) }),
+        /* @__PURE__ */ jsx17(
+          Box6,
+          {
+            p: 3,
+            borderBottom: `1px solid ${alpha12(theme.palette.divider, 0.36)}`,
+            children: /* @__PURE__ */ jsxs10(Grid2, { container: true, children: [
+              /* @__PURE__ */ jsx17(Grid2, { item: true, children: title && /* @__PURE__ */ jsx17(Typography6, { variant: "h6", fontWeight: "bold", children: title }) }),
+              /* @__PURE__ */ jsx17(Grid2, { item: true, children: /* @__PURE__ */ jsx17(
+                IconButton7,
+                {
+                  size: "medium",
+                  onClick: () => setOpen(false),
+                  sx: {
+                    position: "absolute",
+                    top: 8,
+                    right: 8,
+                    zIndex: 2,
+                    backgroundColor: alpha12(theme.palette.background.paper, 0.46)
+                  },
+                  children: /* @__PURE__ */ jsx17(Close2, { fontSize: "inherit" })
+                }
+              ) })
+            ] })
+          }
+        ),
         /* @__PURE__ */ jsx17(Box6, { flex: 1, overflow: "auto", p: 3, children }),
         actions && /* @__PURE__ */ jsx17(
           Box6,
           {
             p: 2,
-            borderTop: "1px solid #eee",
+            borderTop: `1px solid ${alpha12(theme.palette.divider, 0.36)}`,
             sx: {
               position: "sticky",
               bottom: 0,
-              zIndex: 1
+              zIndex: 1,
+              backgroundColor: alpha12(theme.palette.background.paper, 0.38),
+              backdropFilter: "blur(10px)"
             },
             children: actions
           }
@@ -1480,9 +1655,10 @@ import {
   Stack,
   TextField as TextField2,
   MenuItem,
-  useTheme as useTheme9,
+  useTheme as useTheme11,
   useMediaQuery as useMediaQuery4
 } from "@mui/material";
+import { alpha as alpha13 } from "@mui/material/styles";
 import { constants as constants2 } from "@verma-consulting/common-library";
 import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
 var PhoneNumberField = ({
@@ -1495,9 +1671,18 @@ var PhoneNumberField = ({
   autoFocus = false,
   onBlur
 }) => {
-  const theme = useTheme9();
+  const theme = useTheme11();
   const smMatches = useMediaQuery4(theme.breakpoints.down("sm"));
   const countries = constants2.COUNTRIES || [];
+  const glassInputSx = {
+    backdropFilter: "blur(10px) saturate(150%)",
+    "& .MuiOutlinedInput-notchedOutline": {
+      borderColor: alpha13(
+        "#FFFFFF",
+        theme.palette.mode === "dark" ? 0.16 : 0.58
+      )
+    }
+  };
   const [country, setCountry] = useState5(defaultCountry);
   const [localNumber, setLocalNumber] = useState5("");
   const [isFocused, setIsFocused] = useState5(false);
@@ -1613,7 +1798,8 @@ var PhoneNumberField = ({
                   width: 140,
                   "& .MuiOutlinedInput-root": {
                     borderTopRightRadius: 0,
-                    borderBottomRightRadius: 0
+                    borderBottomRightRadius: 0,
+                    ...glassInputSx
                   }
                 },
                 SelectProps: {
@@ -1655,7 +1841,8 @@ var PhoneNumberField = ({
                 sx: {
                   "& .MuiOutlinedInput-root": {
                     borderTopLeftRadius: 0,
-                    borderBottomLeftRadius: 0
+                    borderBottomLeftRadius: 0,
+                    ...glassInputSx
                   }
                 }
               }
@@ -1688,8 +1875,8 @@ export {
   TablePagination_default as TablePagination,
   ThemeProvider,
   createTheme,
-  makeStyles5 as makeStyles,
+  makeStyles4 as makeStyles,
   styled5 as styled,
-  useTheme10 as useTheme
+  useTheme12 as useTheme
 };
 //# sourceMappingURL=index.mjs.map