@verma-consulting/design-library 0.1.34 → 0.1.36

package/dist/index.js

@@ -49,11 +49,11 @@ __export(index_exports, {
   StatusPill: () => StatusPill_default,
   TabPanel: () => TabPanel_default,
   TablePagination: () => TablePagination_default,
-  ThemeProvider: () => import_styles11.ThemeProvider,
-  createTheme: () => import_styles11.createTheme,
-  makeStyles: () => import_styles12.makeStyles,
-  styled: () => import_styles11.styled,
-  useTheme: () => import_styles11.useTheme
+  ThemeProvider: () => import_styles19.ThemeProvider,
+  createTheme: () => import_styles19.createTheme,
+  makeStyles: () => import_styles20.makeStyles,
+  styled: () => import_styles19.styled,
+  useTheme: () => import_styles19.useTheme
 });
 module.exports = __toCommonJS(index_exports);
 __reExport(index_exports, require("@mui/material"), module.exports);
@@ -61,20 +61,24 @@ __reExport(index_exports, require("@mui/material"), module.exports);
 // src/ClearableSelect.tsx
 var import_react = __toESM(require("react"));
 var import_material = require("@mui/material");
+var import_styles = require("@mui/material/styles");
 var import_icons_material = require("@mui/icons-material");
-var import_styles = require("@mui/styles");
+var import_styles2 = require("@mui/styles");
 var import_common_library = require("@verma-consulting/common-library");
 var import_jsx_runtime = require("react/jsx-runtime");
-var useStyles = (0, import_styles.makeStyles)((theme) => ({
+var useStyles = (0, import_styles2.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: {
@@ -171,7 +175,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: (0, import_styles.alpha)("#FFFFFF", 0.6)
+                    }
                   }
                 }
               ),
@@ -223,6 +232,7 @@ var TabPanel_default = TabPanel;
 var React2 = __toESM(require("react"));
 var import_TablePagination = __toESM(require("@mui/material/TablePagination"));
 var import_tablePaginationClasses = __toESM(require("@mui/material/TablePagination/tablePaginationClasses"));
+var import_styles3 = require("@mui/material/styles");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function mergeSx(...parts) {
   const flat = [];
@@ -269,6 +279,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 },
   [`& .${import_tablePaginationClasses.default.toolbar}`]: {
@@ -314,11 +326,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": {
@@ -354,11 +368,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: (0, import_styles3.alpha)(
+          theme.palette.background.paper,
+          theme.palette.mode === "dark" ? 0.2 : 0.74
+        ),
         "& .MuiOutlinedInput-notchedOutline": {
-          borderColor: "divider"
+          borderColor: (0, import_styles3.alpha)(
+            "#FFFFFF",
+            theme.palette.mode === "dark" ? 0.16 : 0.56
+          )
         },
         "&:hover .MuiOutlinedInput-notchedOutline": {
           borderColor: "text.disabled"
@@ -398,8 +420,8 @@ var TablePagination = React2.forwardRef(function TablePagination2(props, ref) {
 var TablePagination_default = TablePagination;
 
 // src/index.tsx
-var import_styles11 = require("@mui/material/styles");
-var import_styles12 = require("@mui/styles");
+var import_styles19 = require("@mui/material/styles");
+var import_styles20 = require("@mui/styles");
 
 // src/Logo.tsx
 var import_react2 = require("react");
@@ -517,12 +539,15 @@ var Logo = (0, import_react2.memo)(
 var Logo_default = Logo;
 
 // src/FormDialog.tsx
-var import_styles2 = require("@mui/material/styles");
+var import_styles4 = require("@mui/material/styles");
 var import_material4 = require("@mui/material");
-var import_styles3 = require("@mui/material/styles");
+var import_styles5 = require("@mui/material/styles");
 var import_icons_material2 = require("@mui/icons-material");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var BootstrapDialog = (0, import_styles2.styled)(import_material4.Dialog)(({ theme }) => ({
+var BootstrapDialog = (0, import_styles4.styled)(import_material4.Dialog)(({ theme }) => ({
+  "& .MuiDialog-paper": {
+    borderRadius: "24px"
+  },
   "& .MuiDialogContent-root": {
     padding: theme.spacing(4)
   },
@@ -595,11 +620,27 @@ var FormDialog = ({
 var FormDialog_default = FormDialog;
 
 // src/InputFileUpload.tsx
-var import_styles4 = require("@mui/material/styles");
+var import_styles7 = require("@mui/material/styles");
 var import_material5 = require("@mui/material");
 var import_icons_material3 = require("@mui/icons-material");
+
+// src/glassStyles.ts
+var import_styles6 = require("@mui/material/styles");
+var glassBorder = (theme) => `1px solid ${(0, import_styles6.alpha)(
+  "#FFFFFF",
+  theme.palette.mode === "dark" ? 0.16 : 0.62
+)}`;
+var glassSurface = (theme) => ({
+  background: theme.palette.mode === "dark" ? `linear-gradient(160deg, ${(0, import_styles6.alpha)("#1F2937", 0.78)} 0%, ${(0, import_styles6.alpha)("#111827", 0.68)} 100%)` : `linear-gradient(160deg, ${(0, import_styles6.alpha)("#FFFFFF", 0.88)} 0%, ${(0, import_styles6.alpha)("#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
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var VisuallyHiddenInput = (0, import_styles4.styled)("input")({
+var VisuallyHiddenInput = (0, import_styles7.styled)("input")({
   clip: "rect(0 0 0 0)",
   clipPath: "inset(50%)",
   height: 1,
@@ -619,6 +660,18 @@ var InputFileUpload = ({ name = "", onChange = () => null, title = "" }) => /* @
     variant: "contained",
     tabIndex: -1,
     startIcon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons_material3.CloudUpload, { fontSize: "inherit" }),
+    sx: {
+      ...(theme) => glassSurface(theme),
+      textTransform: "none",
+      borderRadius: 999,
+      px: 2.25,
+      py: 0.75,
+      color: "text.primary",
+      borderColor: (theme) => (0, import_styles7.alpha)(theme.palette.primary.main, 0.24),
+      "&:hover": {
+        borderColor: (theme) => (0, import_styles7.alpha)(theme.palette.primary.main, 0.42)
+      }
+    },
     children: [
       title,
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(VisuallyHiddenInput, { type: "file", name, onChange })
@@ -630,10 +683,10 @@ var InputFileUpload_default = InputFileUpload;
 // src/ImageUploadAvatar.tsx
 var import_react3 = require("react");
 var import_material6 = require("@mui/material");
-var import_styles5 = require("@mui/material/styles");
+var import_styles8 = require("@mui/material/styles");
 var import_icons_material4 = require("@mui/icons-material");
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var HiddenInput = (0, import_styles5.styled)("input")({
+var HiddenInput = (0, import_styles8.styled)("input")({
   position: "absolute",
   width: 1,
   height: 1,
@@ -643,28 +696,28 @@ var HiddenInput = (0, import_styles5.styled)("input")({
   clip: "rect(0 0 0 0)",
   border: 0
 });
-var Wrapper = (0, import_styles5.styled)(import_material6.Box, {
+var Wrapper = (0, import_styles8.styled)(import_material6.Box, {
   shouldForwardProp: (prop) => prop !== "variant" && prop !== "size"
 })(({ theme, size, variant }) => ({
   position: "relative",
   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 ${(0, import_styles8.alpha)(theme.palette.primary.main, 0.28)}`,
   overflow: "hidden",
   cursor: "pointer",
   display: "flex",
   alignItems: "center",
   justifyContent: "center"
 }));
-var PreviewImg = (0, import_styles5.styled)("img")({
+var PreviewImg = (0, import_styles8.styled)("img")({
   width: "100%",
   height: "100%",
   objectFit: "cover",
   display: "block"
 });
-var Overlay = (0, import_styles5.styled)(import_material6.Box)(({ theme }) => ({
+var Overlay = (0, import_styles8.styled)(import_material6.Box)(({ theme }) => ({
   position: "absolute",
   inset: 0,
   display: "flex",
@@ -686,13 +739,15 @@ var Overlay = (0, import_styles5.styled)(import_material6.Box)(({ theme }) => ({
     "& .uploadIcon": { opacity: 1, transform: "scale(1)" }
   }
 }));
-var ClearButton = (0, import_styles5.styled)(import_material6.IconButton)(({ theme }) => ({
+var ClearButton = (0, import_styles8.styled)(import_material6.IconButton)(({ 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: (0, import_styles8.alpha)(theme.palette.background.paper, 0.9)
+  }
 }));
 var ImageUploadAvatar = ({
   name = "image",
@@ -771,7 +826,7 @@ var ImageUploadAvatar_default = ImageUploadAvatar;
 // src/FormSnackBar.tsx
 var import_react4 = require("react");
 var import_material7 = require("@mui/material");
-var import_styles6 = require("@mui/material/styles");
+var import_styles9 = require("@mui/material/styles");
 var import_Close = __toESM(require("@mui/icons-material/Close"));
 var import_common_library2 = require("@verma-consulting/common-library");
 var import_jsx_runtime8 = require("react/jsx-runtime");
@@ -800,7 +855,7 @@ var FormSnackBar = ({
   autoHideDuration = 3500
 }) => {
   var _a2, _b;
-  const theme = (0, import_styles6.useTheme)();
+  const theme = (0, import_styles9.useTheme)();
   const [queue, setQueue] = (0, import_react4.useState)([]);
   const idRef = (0, import_react4.useRef)(0);
   const prevOpenRef = (0, import_react4.useRef)(!!(snackBar == null ? void 0 : snackBar.open));
@@ -847,7 +902,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" ? (0, import_styles6.alpha)(baseHex, 0.34) : (0, import_styles6.alpha)(baseHex, 0.24),
+      bg: theme.palette.mode === "dark" ? (0, import_styles9.alpha)(baseHex, 0.34) : (0, import_styles9.alpha)(baseHex, 0.24),
       text: theme.palette.mode === "dark" ? "rgba(255,255,255,0.94)" : baseHex,
       icon: baseHex
     };
@@ -888,7 +943,7 @@ var FormSnackBar = ({
               color: colors.text,
               backdropFilter: "blur(14px) saturate(150%)",
               WebkitBackdropFilter: "blur(14px) saturate(150%)",
-              border: `1px solid ${(0, import_styles6.alpha)("#FFFFFF", theme.palette.mode === "dark" ? 0.16 : 0.55)}`,
+              border: `1px solid ${(0, import_styles9.alpha)("#FFFFFF", theme.palette.mode === "dark" ? 0.16 : 0.55)}`,
               "& .MuiAlert-icon": {
                 color: colors.icon
               },
@@ -920,9 +975,10 @@ var FormSnackBar_default = FormSnackBar;
 
 // src/Loader.tsx
 var import_material8 = require("@mui/material");
-var import_styles7 = require("@mui/styles");
+var import_styles10 = require("@mui/styles");
+var import_styles11 = require("@mui/material/styles");
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var useStyles2 = (0, import_styles7.makeStyles)({
+var useStyles2 = (0, import_styles10.makeStyles)({
   "@keyframes pulse": {
     "0%": { transform: "scale(1)", opacity: 0.9 },
     "50%": { transform: "scale(1.05)", opacity: 1 },
@@ -940,10 +996,24 @@ 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: (theme) => theme.palette.mode === "dark" ? (0, import_styles11.alpha)("#020617", 0.48) : (0, import_styles11.alpha)("#E2E8F0", 0.34),
+        backdropFilter: "blur(10px) saturate(145%)"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material8.CircularProgress, { size, color, thickness: 3.5, className: classes.progress })
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        import_material8.CircularProgress,
+        {
+          size,
+          color,
+          thickness: 3.4,
+          className: classes.progress,
+          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)}`
+          }
+        }
+      )
     }
   );
 };
@@ -1047,21 +1117,8 @@ var EmptyState_default = EmptyState;
 
 // src/Pill.tsx
 var import_material11 = require("@mui/material");
-var import_styles8 = require("@mui/styles");
+var import_styles12 = require("@mui/material/styles");
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var useStyles3 = (0, import_styles8.makeStyles)((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,
@@ -1072,19 +1129,27 @@ var Pill = ({
   label = "",
   disabled = false
 }) => {
-  const theme = (0, import_material11.useTheme)();
-  const classes = useStyles3();
+  const theme = (0, import_styles12.useTheme)();
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     import_material11.Button,
     {
       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 ? (0, import_styles12.alpha)(theme.palette.primary.main, 0.34) : (0, import_styles12.alpha)(theme.palette.text.primary, 0.18),
+        color: isSelected ? "primary.main" : "text.primary",
+        "&:hover": {
+          borderColor: (0, import_styles12.alpha)(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__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { display: "flex", alignItems: "center" }, children: [
         leftIcon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           import_material11.Icon,
@@ -1096,7 +1161,7 @@ var Pill = ({
             "data-testid": "pill-left-icon"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_material11.Typography, { variant: "subtitle", color: "inherit", fontWeight: "bold", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_material11.Typography, { variant: "subtitle2", color: "inherit", fontWeight: 700, children: label }),
         rightIcon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           import_material11.Icon,
           {
@@ -1114,10 +1179,10 @@ var Pill = ({
 var Pill_default = Pill;
 
 // src/IOSSwitch.tsx
-var import_styles9 = require("@mui/material/styles");
+var import_styles13 = require("@mui/material/styles");
 var import_Switch = __toESM(require("@mui/material/Switch"));
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var IOSSwitch = (0, import_styles9.styled)((props) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_Switch.default, { focusVisibleClassName: ".Mui-focusVisible", disableRipple: true, ...props }))(({ theme }) => ({
+var IOSSwitch = (0, import_styles13.styled)((props) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_Switch.default, { focusVisibleClassName: ".Mui-focusVisible", disableRipple: true, ...props }))(({ theme }) => ({
   width: 46,
   height: 30,
   padding: 0,
@@ -1129,7 +1194,7 @@ var IOSSwitch = (0, import_styles9.styled)((props) => /* @__PURE__ */ (0, import
       transform: "translateX(16px)",
       color: "#fff",
       "& + .MuiSwitch-track": {
-        backgroundColor: theme.palette.primary.main,
+        background: `linear-gradient(120deg, ${(0, import_styles13.alpha)(theme.palette.primary.light, 0.92)} 0%, ${(0, import_styles13.alpha)(theme.palette.primary.main, 0.94)} 100%)`,
         opacity: 1,
         border: 0
       },
@@ -1151,11 +1216,15 @@ var IOSSwitch = (0, import_styles9.styled)((props) => /* @__PURE__ */ (0, import
   "& .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 ${(0, import_styles13.alpha)("#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
@@ -1166,6 +1235,7 @@ var IOSSwitch_default = IOSSwitch;
 
 // src/StatusPill.tsx
 var import_material12 = require("@mui/material");
+var import_styles14 = require("@mui/material/styles");
 var import_common_library3 = require("@verma-consulting/common-library");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var statusColorMap = {
@@ -1174,15 +1244,24 @@ var statusColorMap = {
   [import_common_library3.userStatus.Inactive]: "error",
   [import_common_library3.userStatus.Invited]: "info"
 };
-var StatusPill = ({ status }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-  import_material12.Chip,
-  {
-    label: status,
-    color: statusColorMap[status],
-    variant: "outlined",
-    sx: { fontWeight: 600, borderRadius: "16px", px: 1.5 }
-  }
-);
+var StatusPill = ({ status }) => {
+  const theme = (0, import_styles14.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_material12.Chip,
+    {
+      label: status,
+      color: statusColorMap[status],
+      variant: "filled",
+      sx: {
+        ...glassSurface(theme),
+        fontWeight: 700,
+        borderRadius: "999px",
+        px: 1,
+        borderColor: (0, import_styles14.alpha)(theme.palette.text.primary, 0.14)
+      }
+    }
+  );
+};
 var StatusPill_default = StatusPill;
 
 // src/FormPopover.tsx
@@ -1238,16 +1317,20 @@ var FormPopover_default = FormPopover;
 // src/SearchableSelect.tsx
 var import_react7 = __toESM(require("react"));
 var import_material14 = require("@mui/material");
+var import_styles15 = require("@mui/material/styles");
 var import_icons_material7 = require("@mui/icons-material");
-var import_styles10 = require("@mui/styles");
+var import_styles16 = require("@mui/styles");
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var useStyles4 = (0, import_styles10.makeStyles)(() => ({
+var useStyles3 = (0, import_styles16.makeStyles)(() => ({
   defaultMode: {
     padding: "14px 8px",
     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: {
@@ -1273,7 +1356,7 @@ var SearchableSelect = import_react7.default.memo(
     defaultEditMode = false,
     multiple = false
   }) => {
-    const classes = useStyles4();
+    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);
@@ -1353,7 +1436,7 @@ var SearchableSelect = import_react7.default.memo(
             setOpen(false);
           }
         },
-        disableClearable: !onClear,
+        disableClearable: true,
         autoHighlight: true,
         getOptionLabel: (option) => option.label,
         isOptionEqualToValue: (option, val) => option.value === val.value,
@@ -1367,19 +1450,31 @@ var SearchableSelect = import_react7.default.memo(
             inputRef,
             InputProps: {
               ...params.InputProps,
-              endAdornment: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: !isValueEmpty && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                import_material14.IconButton,
-                {
-                  "aria-label": `clear ${name}`,
-                  onClick: handleClear,
-                  size: "small",
-                  sx: {
-                    backgroundColor: "transparent",
-                    boxShadow: "none"
-                  },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_icons_material7.Clear, { fontSize: "inherit" })
+              sx: {
+                borderRadius: 1.75,
+                backdropFilter: "blur(10px)",
+                pr: 1.5,
+                "& .MuiOutlinedInput-notchedOutline": {
+                  borderColor: (0, import_styles15.alpha)("#FFFFFF", 0.6)
                 }
-              ) })
+              },
+              endAdornment: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+                !isValueEmpty && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                  import_material14.IconButton,
+                  {
+                    "aria-label": `clear ${name}`,
+                    onClick: handleClear,
+                    size: "small",
+                    sx: {
+                      backgroundColor: "transparent",
+                      boxShadow: "none",
+                      mr: 0.25
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_icons_material7.Clear, { fontSize: "inherit" })
+                  }
+                ),
+                params.InputProps.endAdornment
+              ] })
             }
           }
         ),
@@ -1412,6 +1507,7 @@ var SearchableSelect_default = SearchableSelect;
 
 // src/FormDrawer.tsx
 var import_material15 = require("@mui/material");
+var import_styles17 = require("@mui/material/styles");
 var import_icons_material8 = require("@mui/icons-material");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var FormDrawer = ({
@@ -1435,37 +1531,47 @@ var FormDrawer = ({
           height: "100%",
           display: "flex",
           flexDirection: "column",
-          borderRadius: 0
+          borderRadius: mdMatches ? "24px 24px 0 0" : "24px 0 0 24px"
         }
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_material15.Box, { p: 3, borderBottom: "1px solid #eee", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_material15.Grid, { container: true, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_material15.Grid, { item: true, children: title && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_material15.Typography, { variant: "h6", fontWeight: "bold", children: title }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_material15.Grid, { item: true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-            import_material15.IconButton,
-            {
-              size: "medium",
-              onClick: () => setOpen(false),
-              sx: {
-                position: "absolute",
-                top: 8,
-                right: 8,
-                zIndex: 2
-              },
-              children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons_material8.Close, { fontSize: "inherit" })
-            }
-          ) })
-        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          import_material15.Box,
+          {
+            p: 3,
+            borderBottom: `1px solid ${(0, import_styles17.alpha)(theme.palette.divider, 0.36)}`,
+            children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_material15.Grid, { container: true, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_material15.Grid, { item: true, children: title && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_material15.Typography, { variant: "h6", fontWeight: "bold", children: title }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_material15.Grid, { item: true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                import_material15.IconButton,
+                {
+                  size: "medium",
+                  onClick: () => setOpen(false),
+                  sx: {
+                    position: "absolute",
+                    top: 8,
+                    right: 8,
+                    zIndex: 2,
+                    backgroundColor: (0, import_styles17.alpha)(theme.palette.background.paper, 0.46)
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons_material8.Close, { fontSize: "inherit" })
+                }
+              ) })
+            ] })
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_material15.Box, { flex: 1, overflow: "auto", p: 3, children }),
         actions && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           import_material15.Box,
           {
             p: 2,
-            borderTop: "1px solid #eee",
+            borderTop: `1px solid ${(0, import_styles17.alpha)(theme.palette.divider, 0.36)}`,
             sx: {
               position: "sticky",
               bottom: 0,
-              zIndex: 1
+              zIndex: 1,
+              backgroundColor: (0, import_styles17.alpha)(theme.palette.background.paper, 0.38),
+              backdropFilter: "blur(10px)"
             },
             children: actions
           }
@@ -1479,6 +1585,7 @@ var FormDrawer_default = FormDrawer;
 // src/PhoneNumberField.tsx
 var import_react8 = require("react");
 var import_material16 = require("@mui/material");
+var import_styles18 = require("@mui/material/styles");
 var import_common_library4 = require("@verma-consulting/common-library");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var PhoneNumberField = ({
@@ -1494,6 +1601,15 @@ var PhoneNumberField = ({
   const theme = (0, import_material16.useTheme)();
   const smMatches = (0, import_material16.useMediaQuery)(theme.breakpoints.down("sm"));
   const countries = import_common_library4.constants.COUNTRIES || [];
+  const glassInputSx = {
+    backdropFilter: "blur(10px) saturate(150%)",
+    "& .MuiOutlinedInput-notchedOutline": {
+      borderColor: (0, import_styles18.alpha)(
+        "#FFFFFF",
+        theme.palette.mode === "dark" ? 0.16 : 0.58
+      )
+    }
+  };
   const [country, setCountry] = (0, import_react8.useState)(defaultCountry);
   const [localNumber, setLocalNumber] = (0, import_react8.useState)("");
   const [isFocused, setIsFocused] = (0, import_react8.useState)(false);
@@ -1609,7 +1725,8 @@ var PhoneNumberField = ({
                   width: 140,
                   "& .MuiOutlinedInput-root": {
                     borderTopRightRadius: 0,
-                    borderBottomRightRadius: 0
+                    borderBottomRightRadius: 0,
+                    ...glassInputSx
                   }
                 },
                 SelectProps: {
@@ -1651,7 +1768,8 @@ var PhoneNumberField = ({
                 sx: {
                   "& .MuiOutlinedInput-root": {
                     borderTopLeftRadius: 0,
-                    borderBottomLeftRadius: 0
+                    borderBottomLeftRadius: 0,
+                    ...glassInputSx
                   }
                 }
               }