@verma-consulting/design-library 0.1.37 → 0.1.39

package/dist/index.mjs

@@ -1,191 +1,30 @@
 // src/index.tsx
 export * from "@mui/material";
 
-// src/ClearableSelect.tsx
-import React from "react";
-import {
-  FormControl,
-  InputLabel,
-  Select,
-  InputAdornment,
-  IconButton,
-  OutlinedInput,
-  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";
-import { jsx, jsxs } from "react/jsx-runtime";
-var useStyles = makeStyles((theme) => ({
-  defaultMode: {
-    paddingTop: 14,
-    paddingBottom: 14,
-    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": {
-      boxShadow: "rgba(15, 23, 42, 0.16) 0px 8px 24px"
-    }
-  },
-  formLabel: {
-    cursor: "pointer"
-  },
-  formValue: {
-    cursor: "pointer",
-    wordBreak: "break-word",
-    whiteSpace: "pre-wrap"
-  }
-}));
-var ClearableSelect = ({
-  name,
-  label,
-  value = "",
-  onChange,
-  size = "small",
-  style,
-  disabled = false,
-  onClear,
-  multiple = false,
-  defaultEditMode = false,
-  renderValue,
-  children
-}) => {
-  const classes = useStyles();
-  const wrapperRef = React.useRef(null);
-  const [editMode, setEditMode] = React.useState(defaultEditMode);
-  React.useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
-        setEditMode(false);
-      }
-    };
-    if (editMode) {
-      document.addEventListener("mousedown", handleClickOutside);
-    }
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [editMode]);
-  const isValueEmpty = multiple && Array.isArray(value) ? value.length === 0 : value === "";
-  const handleClear = (event) => {
-    event.stopPropagation();
-    if (onClear) {
-      onClear();
-      setEditMode(false);
-    } else {
-      const fakeEvent = {
-        target: { name, value: multiple ? [] : "" }
-      };
-      onChange(fakeEvent);
-    }
-  };
-  if (editMode) {
-    return /* @__PURE__ */ jsxs(
-      FormControl,
-      {
-        variant: "outlined",
-        size,
-        style,
-        disabled,
-        fullWidth: true,
-        children: [
-          /* @__PURE__ */ jsx(InputLabel, { id: `${name}-select-label`, children: label }),
-          /* @__PURE__ */ jsx(
-            Select,
-            {
-              labelId: `${name}-select-label`,
-              id: `${name}-select`,
-              name,
-              multiple,
-              value: multiple ? value == null ? void 0 : value.split(", ") : value,
-              onChange,
-              onBlur: () => setEditMode(false),
-              onClose: () => setEditMode(false),
-              label,
-              input: /* @__PURE__ */ jsx(
-                OutlinedInput,
-                {
-                  size,
-                  color: "primary",
-                  endAdornment: onClear && !isValueEmpty ? /* @__PURE__ */ jsx(InputAdornment, { position: "end", sx: { gap: 1 }, children: /* @__PURE__ */ jsx(
-                    IconButton,
-                    {
-                      "aria-label": `clear ${name}`,
-                      onClick: handleClear,
-                      edge: "end",
-                      size: "small",
-                      sx: { mr: 1 },
-                      children: /* @__PURE__ */ jsx(Clear, { fontSize: "inherit" })
-                    }
-                  ) }) : null,
-                  label,
-                  name,
-                  sx: {
-                    paddingRight: !isValueEmpty ? 2 : void 0,
-                    borderRadius: 1.75,
-                    backdropFilter: "blur(10px)",
-                    "& .MuiOutlinedInput-notchedOutline": {
-                      borderColor: alpha("#FFFFFF", 0.6)
-                    }
-                  }
-                }
-              ),
-              renderValue,
-              children
-            }
-          )
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      onClick: () => {
-        if (!disabled) {
-          setEditMode(true);
-        }
-      },
-      className: classes.defaultMode,
-      children: [
-        /* @__PURE__ */ jsx(FormLabel, { className: classes.formLabel, children: label }),
-        /* @__PURE__ */ jsx(Typography, { className: classes.formValue, children: renderValue ? renderValue(value) : prettifyString(value) })
-      ]
-    }
-  );
-};
-var ClearableSelect_default = ClearableSelect;
-
 // src/TabPanel.tsx
 import { Box } from "@mui/material";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 var TabPanel = (props) => {
   const { children, value, index, ...other } = props;
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       role: "tabpanel",
       hidden: value !== index,
       id: `simple-tabpanel-${index}`,
       ...other,
-      children: value === index && /* @__PURE__ */ jsx2(Box, { sx: { p: 1 }, children })
+      children: value === index && /* @__PURE__ */ jsx(Box, { sx: { p: 1 }, children })
     }
   );
 };
 var TabPanel_default = TabPanel;
 
 // src/TablePagination.tsx
-import * as React2 from "react";
+import * as React 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";
+import { alpha } from "@mui/material/styles";
+import { jsx as jsx2 } from "react/jsx-runtime";
 function mergeSx(...parts) {
   const flat = [];
   for (const p of parts) {
@@ -293,7 +132,7 @@ var rootSx = {
     }
   }
 };
-var TablePagination = React2.forwardRef(function TablePagination2(props, ref) {
+var TablePagination = React.forwardRef(function TablePagination2(props, ref) {
   var _a2, _b;
   const {
     sx,
@@ -324,12 +163,12 @@ var TablePagination = React2.forwardRef(function TablePagination2(props, ref) {
         minWidth: 64,
         fontSize: theme.typography.body2.fontSize,
         backdropFilter: "blur(10px)",
-        backgroundColor: alpha2(
+        backgroundColor: alpha(
           theme.palette.background.paper,
           theme.palette.mode === "dark" ? 0.2 : 0.74
         ),
         "& .MuiOutlinedInput-notchedOutline": {
-          borderColor: alpha2(
+          borderColor: alpha(
             "#FFFFFF",
             theme.palette.mode === "dark" ? 0.16 : 0.56
           )
@@ -351,7 +190,7 @@ var TablePagination = React2.forwardRef(function TablePagination2(props, ref) {
       slotSelectSx
     )
   };
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     MuiTablePagination,
     {
       ref,
@@ -378,20 +217,20 @@ import {
   createTheme,
   ThemeProvider
 } from "@mui/material/styles";
-import { makeStyles as makeStyles4 } from "@mui/styles";
+import { makeStyles as makeStyles3 } from "@mui/styles";
 
 // src/Logo.tsx
 import { memo } from "react";
 import {
   Grid,
-  Typography as Typography2,
+  Typography,
   Avatar,
   Tooltip,
   Box as Box2,
   useTheme,
   useMediaQuery
 } from "@mui/material";
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var Logo = memo(
   ({
     loggedIn = false,
@@ -408,7 +247,7 @@ var Logo = memo(
     const companyName = (organization == null ? void 0 : organization.name) || "\u2013";
     const logoUrl = (_a2 = organization == null ? void 0 : organization.logo) == null ? void 0 : _a2.url;
     if (centered) {
-      return /* @__PURE__ */ jsxs2(
+      return /* @__PURE__ */ jsxs(
         Grid,
         {
           container: true,
@@ -419,7 +258,7 @@ var Logo = memo(
           sx: { cursor: "pointer" },
           onClick: handleClick,
           children: [
-            (logoUrl || defaultLogo) && /* @__PURE__ */ jsx4(Grid, { item: true, children: logoUrl ? /* @__PURE__ */ jsx4(
+            (logoUrl || defaultLogo) && /* @__PURE__ */ jsx3(Grid, { item: true, children: logoUrl ? /* @__PURE__ */ jsx3(
               Avatar,
               {
                 alt: companyName || "avatar",
@@ -436,8 +275,8 @@ var Logo = memo(
                 children: (companyName == null ? void 0 : companyName.charAt(0)) || "?"
               }
             ) : defaultLogo }),
-            /* @__PURE__ */ jsx4(Grid, { item: true, sx: { maxWidth, textAlign: "center" }, children: loggedIn ? /* @__PURE__ */ jsx4(Tooltip, { title: companyName, placement: "top", arrow: true, children: /* @__PURE__ */ jsx4(
-              Typography2,
+            /* @__PURE__ */ jsx3(Grid, { item: true, sx: { maxWidth, textAlign: "center" }, children: loggedIn ? /* @__PURE__ */ jsx3(Tooltip, { title: companyName, placement: "top", arrow: true, children: /* @__PURE__ */ jsx3(
+              Typography,
               {
                 variant: "h6",
                 sx: {
@@ -447,12 +286,12 @@ var Logo = memo(
                 },
                 children: companyName
               }
-            ) }) : /* @__PURE__ */ jsx4(Box2, { sx: { display: "flex", justifyContent: "center" }, children: companyComponent }) })
+            ) }) : /* @__PURE__ */ jsx3(Box2, { sx: { display: "flex", justifyContent: "center" }, children: companyComponent }) })
           ]
         }
       );
     }
-    return /* @__PURE__ */ jsxs2(
+    return /* @__PURE__ */ jsxs(
       Grid,
       {
         container: true,
@@ -464,7 +303,7 @@ var Logo = memo(
         },
         onClick: handleClick,
         children: [
-          (logoUrl || defaultLogo) && /* @__PURE__ */ jsx4(Box2, { sx: { mr: 1, display: "flex", alignItems: "center" }, children: logoUrl ? /* @__PURE__ */ jsx4(
+          (logoUrl || defaultLogo) && /* @__PURE__ */ jsx3(Box2, { sx: { mr: 1, display: "flex", alignItems: "center" }, children: logoUrl ? /* @__PURE__ */ jsx3(
             Avatar,
             {
               alt: companyName || "avatar",
@@ -480,8 +319,8 @@ var Logo = memo(
               children: (companyName == null ? void 0 : companyName.charAt(0)) || "?"
             }
           ) : defaultLogo }),
-          /* @__PURE__ */ jsx4(Box2, { sx: { maxWidth, flexShrink: 1, minWidth: 0 }, children: loggedIn ? /* @__PURE__ */ jsx4(Tooltip, { title: companyName, placement: "top", arrow: true, children: /* @__PURE__ */ jsx4(
-            Typography2,
+          /* @__PURE__ */ jsx3(Box2, { sx: { maxWidth, flexShrink: 1, minWidth: 0 }, children: loggedIn ? /* @__PURE__ */ jsx3(Tooltip, { title: companyName, placement: "top", arrow: true, children: /* @__PURE__ */ jsx3(
+            Typography,
             {
               variant: "h6",
               noWrap: true,
@@ -512,11 +351,11 @@ import {
   DialogTitle,
   DialogContent,
   DialogActions,
-  IconButton as IconButton2
+  IconButton
 } from "@mui/material";
 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";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var BootstrapDialog = styled(Dialog)(({ theme }) => ({
   "& .MuiDialog-paper": {
     borderRadius: "24px"
@@ -530,7 +369,7 @@ var BootstrapDialog = styled(Dialog)(({ theme }) => ({
 }));
 var BootstrapDialogTitle = (props) => {
   const { children, onClose, ...other } = props;
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs2(
     DialogTitle,
     {
       sx: {
@@ -547,8 +386,8 @@ var BootstrapDialogTitle = (props) => {
       ...other,
       children: [
         children,
-        onClose ? /* @__PURE__ */ jsx5(
-          IconButton2,
+        onClose ? /* @__PURE__ */ jsx4(
+          IconButton,
           {
             onClick: onClose,
             sx: {
@@ -556,7 +395,7 @@ var BootstrapDialogTitle = (props) => {
               right: 16,
               top: 16
             },
-            children: /* @__PURE__ */ jsx5(Close, { color: "primary" })
+            children: /* @__PURE__ */ jsx4(Close, { color: "primary" })
           }
         ) : null
       ]
@@ -574,7 +413,7 @@ var FormDialog = ({
 }) => {
   const theme = useTheme2();
   const mdMatches = useMediaQuery2(theme.breakpoints.down("md"));
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs2(
     BootstrapDialog,
     {
       fullWidth: true,
@@ -583,9 +422,9 @@ var FormDialog = ({
       maxWidth,
       fullScreen: mdMatches,
       children: [
-        /* @__PURE__ */ jsx5(BootstrapDialogTitle, { onClose: () => setOpen(false), children: title }),
-        /* @__PURE__ */ jsx5(DialogContent, { dividers: true, children }),
-        /* @__PURE__ */ jsx5(DialogActions, { children: actions })
+        /* @__PURE__ */ jsx4(BootstrapDialogTitle, { onClose: () => setOpen(false), children: title }),
+        /* @__PURE__ */ jsx4(DialogContent, { dividers: true, children }),
+        /* @__PURE__ */ jsx4(DialogActions, { children: actions })
       ]
     }
   );
@@ -593,18 +432,18 @@ var FormDialog = ({
 var FormDialog_default = FormDialog;
 
 // src/InputFileUpload.tsx
-import { alpha as alpha4, styled as styled2 } from "@mui/material/styles";
+import { alpha as alpha3, 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(
+import { alpha as alpha2 } from "@mui/material/styles";
+var glassBorder = (theme) => `1px solid ${alpha2(
   "#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%)`,
+  background: theme.palette.mode === "dark" ? `linear-gradient(160deg, ${alpha2("#1F2937", 0.78)} 0%, ${alpha2("#111827", 0.68)} 100%)` : `linear-gradient(160deg, ${alpha2("#FFFFFF", 0.88)} 0%, ${alpha2("#F5F9FF", 0.72)} 100%)`,
   border: glassBorder(theme),
   backdropFilter: "blur(18px) saturate(155%)",
   WebkitBackdropFilter: "blur(18px) saturate(155%)",
@@ -612,7 +451,7 @@ var glassSurface = (theme) => ({
 });
 
 // src/InputFileUpload.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var VisuallyHiddenInput = styled2("input")({
   clip: "rect(0 0 0 0)",
   clipPath: "inset(50%)",
@@ -624,7 +463,7 @@ var VisuallyHiddenInput = styled2("input")({
   whiteSpace: "nowrap",
   width: 1
 });
-var InputFileUpload = ({ name = "", onChange = () => null, title = "" }) => /* @__PURE__ */ jsxs4(
+var InputFileUpload = ({ name = "", onChange = () => null, title = "" }) => /* @__PURE__ */ jsxs3(
   Button,
   {
     role: void 0,
@@ -632,7 +471,7 @@ var InputFileUpload = ({ name = "", onChange = () => null, title = "" }) => /* @
     size: "small",
     variant: "contained",
     tabIndex: -1,
-    startIcon: /* @__PURE__ */ jsx6(CloudUpload, { fontSize: "inherit" }),
+    startIcon: /* @__PURE__ */ jsx5(CloudUpload, { fontSize: "inherit" }),
     sx: {
       ...(theme) => glassSurface(theme),
       textTransform: "none",
@@ -640,14 +479,14 @@ var InputFileUpload = ({ name = "", onChange = () => null, title = "" }) => /* @
       px: 2.25,
       py: 0.75,
       color: "text.primary",
-      borderColor: (theme) => alpha4(theme.palette.primary.main, 0.24),
+      borderColor: (theme) => alpha3(theme.palette.primary.main, 0.24),
       "&:hover": {
-        borderColor: (theme) => alpha4(theme.palette.primary.main, 0.42)
+        borderColor: (theme) => alpha3(theme.palette.primary.main, 0.42)
       }
     },
     children: [
       title,
-      /* @__PURE__ */ jsx6(VisuallyHiddenInput, { type: "file", name, onChange })
+      /* @__PURE__ */ jsx5(VisuallyHiddenInput, { type: "file", name, onChange })
     ]
   }
 );
@@ -655,10 +494,10 @@ var InputFileUpload_default = InputFileUpload;
 
 // src/ImageUploadAvatar.tsx
 import { useEffect, useRef, useState } from "react";
-import { Box as Box3, IconButton as IconButton3 } from "@mui/material";
-import { alpha as alpha5, styled as styled3 } from "@mui/material/styles";
+import { Box as Box3, IconButton as IconButton2 } from "@mui/material";
+import { alpha as alpha4, 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";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var HiddenInput = styled3("input")({
   position: "absolute",
   width: 1,
@@ -677,7 +516,7 @@ var Wrapper = styled3(Box3, {
   height: size,
   borderRadius: variant === "circular" ? "50%" : variant === "rounded" ? theme.shape.borderRadius * 2 : 0,
   ...glassSurface(theme),
-  border: `1px dashed ${alpha5(theme.palette.primary.main, 0.28)}`,
+  border: `1px dashed ${alpha4(theme.palette.primary.main, 0.28)}`,
   overflow: "hidden",
   cursor: "pointer",
   display: "flex",
@@ -712,14 +551,14 @@ var Overlay = styled3(Box3)(({ theme }) => ({
     "& .uploadIcon": { opacity: 1, transform: "scale(1)" }
   }
 }));
-var ClearButton = styled3(IconButton3)(({ theme }) => ({
+var ClearButton = styled3(IconButton2)(({ theme }) => ({
   position: "absolute",
   top: -8,
   right: -8,
   ...glassSurface(theme),
   boxShadow: theme.shadows[2],
   "&:hover": {
-    background: alpha5(theme.palette.background.paper, 0.9)
+    background: alpha4(theme.palette.background.paper, 0.9)
   }
 }));
 var ImageUploadAvatar = ({
@@ -776,7 +615,7 @@ var ImageUploadAvatar = ({
     setInternalSrc(null);
     onChange == null ? void 0 : onChange(null, null);
   };
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs4(
     Wrapper,
     {
       role: "button",
@@ -786,10 +625,10 @@ var ImageUploadAvatar = ({
       onPointerLeave: () => setHover(false),
       onClick: triggerPick,
       children: [
-        internalSrc && /* @__PURE__ */ jsx7(PreviewImg, { src: internalSrc }),
-        /* @__PURE__ */ jsx7(Overlay, { className: `${!internalSrc ? "empty" : ""} ${hover && !disabled ? "hover" : ""}`, children: /* @__PURE__ */ jsx7(CloudUpload2, { className: "uploadIcon", fontSize: "large" }) }),
-        allowClear && internalSrc && !disabled && /* @__PURE__ */ jsx7(ClearButton, { size: "small", "aria-label": "Clear image", onClick: handleClear, sx: { m: 1 }, children: /* @__PURE__ */ jsx7(CloseIcon, { fontSize: "inherit" }) }),
-        /* @__PURE__ */ jsx7(HiddenInput, { ref: inputRef, type: "file", name, accept, onChange: handlePick, disabled })
+        internalSrc && /* @__PURE__ */ jsx6(PreviewImg, { src: internalSrc }),
+        /* @__PURE__ */ jsx6(Overlay, { className: `${!internalSrc ? "empty" : ""} ${hover && !disabled ? "hover" : ""}`, children: /* @__PURE__ */ jsx6(CloudUpload2, { className: "uploadIcon", fontSize: "large" }) }),
+        allowClear && internalSrc && !disabled && /* @__PURE__ */ jsx6(ClearButton, { size: "small", "aria-label": "Clear image", onClick: handleClear, sx: { m: 1 }, children: /* @__PURE__ */ jsx6(CloseIcon, { fontSize: "inherit" }) }),
+        /* @__PURE__ */ jsx6(HiddenInput, { ref: inputRef, type: "file", name, accept, onChange: handlePick, disabled })
       ]
     }
   );
@@ -801,12 +640,12 @@ import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } fro
 import {
   Alert,
   Grow,
-  IconButton as IconButton4
+  IconButton as IconButton3
 } from "@mui/material";
-import { alpha as alpha6, useTheme as useTheme4 } from "@mui/material/styles";
+import { alpha as alpha5, 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";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var _a;
 var SNACKBAR_TYPES = (_a = constants) == null ? void 0 : _a.SNACKBAR_TYPES;
 var DULL_SNACKBAR_COLORS = {
@@ -879,12 +718,12 @@ 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" ? alpha6(baseHex, 0.34) : alpha6(baseHex, 0.24),
+      bg: theme.palette.mode === "dark" ? alpha5(baseHex, 0.34) : alpha5(baseHex, 0.24),
       text: theme.palette.mode === "dark" ? "rgba(255,255,255,0.94)" : baseHex,
       icon: baseHex
     };
   };
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx7(
     "div",
     {
       "aria-live": "polite",
@@ -903,7 +742,7 @@ var FormSnackBar = ({
       children: queue.map((item) => {
         const localSeverity = isSnackbarType(item.type) ? item.type : "info";
         const colors = typeStyles(localSeverity);
-        return /* @__PURE__ */ jsx8(Grow, { in: true, timeout: 280, children: /* @__PURE__ */ jsx8(
+        return /* @__PURE__ */ jsx7(Grow, { in: true, timeout: 280, children: /* @__PURE__ */ jsx7(
           Alert,
           {
             variant: "filled",
@@ -920,7 +759,7 @@ var FormSnackBar = ({
               color: colors.text,
               backdropFilter: "blur(14px) saturate(150%)",
               WebkitBackdropFilter: "blur(14px) saturate(150%)",
-              border: `1px solid ${alpha6("#FFFFFF", theme.palette.mode === "dark" ? 0.16 : 0.55)}`,
+              border: `1px solid ${alpha5("#FFFFFF", theme.palette.mode === "dark" ? 0.16 : 0.55)}`,
               "& .MuiAlert-icon": {
                 color: colors.icon
               },
@@ -931,14 +770,14 @@ var FormSnackBar = ({
                 letterSpacing: "-0.01em"
               }
             },
-            action: /* @__PURE__ */ jsx8(
-              IconButton4,
+            action: /* @__PURE__ */ jsx7(
+              IconButton3,
               {
                 "aria-label": "close",
                 color: "inherit",
                 size: "small",
                 onClick: () => handleDismiss(item.id),
-                children: /* @__PURE__ */ jsx8(CloseIcon2, { fontSize: "small" })
+                children: /* @__PURE__ */ jsx7(CloseIcon2, { fontSize: "small" })
               }
             ),
             children: item.message
@@ -952,10 +791,10 @@ 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({
+import { makeStyles } from "@mui/styles";
+import { alpha as alpha6 } from "@mui/material/styles";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var useStyles = makeStyles({
   "@keyframes pulse": {
     "0%": { transform: "scale(1)", opacity: 0.9 },
     "50%": { transform: "scale(1.05)", opacity: 1 },
@@ -966,8 +805,8 @@ var useStyles2 = makeStyles2({
   }
 });
 var Loader = ({ size = 48, color = "primary" }) => {
-  const classes = useStyles2();
-  return /* @__PURE__ */ jsx9(
+  const classes = useStyles();
+  return /* @__PURE__ */ jsx8(
     Backdrop,
     {
       open: true,
@@ -976,7 +815,7 @@ var Loader = ({ size = 48, color = "primary" }) => {
         backgroundColor: "transparent",
         backdropFilter: "blur(10px) saturate(145%)"
       },
-      children: /* @__PURE__ */ jsx9(
+      children: /* @__PURE__ */ jsx8(
         CircularProgress,
         {
           size,
@@ -987,7 +826,7 @@ var Loader = ({ size = 48, color = "primary" }) => {
             p: 1,
             borderRadius: "50%",
             backgroundColor: "transparent",
-            border: (theme) => `1px solid ${alpha7("#FFFFFF", theme.palette.mode === "dark" ? 0.14 : 0.56)}`,
+            border: (theme) => `1px solid ${alpha6("#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)"
           }
         }
@@ -999,7 +838,7 @@ var Loader_default = Loader;
 
 // src/SkeletonBar.tsx
 import { Box as Box4, useTheme as useTheme5 } from "@mui/material";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var SHIMMER_KEYFRAMES = {
   "@keyframes skeletonShimmer": {
     "0%": { backgroundPosition: "200% 0" },
@@ -1015,7 +854,7 @@ var SkeletonBar = ({
   const theme = useTheme5();
   const base = theme.palette.mode === "dark" ? (_b = (_a2 = theme.palette.grey) == null ? void 0 : _a2[700]) != null ? _b : "#424242" : (_d = (_c = theme.palette.grey) == null ? void 0 : _c[200]) != null ? _d : "#e0e0e0";
   const highlight = theme.palette.mode === "dark" ? (_f = (_e = theme.palette.grey) == null ? void 0 : _e[600]) != null ? _f : "#616161" : (_h = (_g = theme.palette.grey) == null ? void 0 : _g[100]) != null ? _h : "#f5f5f5";
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx9(
     Box4,
     {
       sx: {
@@ -1036,16 +875,16 @@ var SkeletonBar = ({
 var SkeletonBar_default = SkeletonBar;
 
 // src/EmptyState.tsx
-import React6 from "react";
-import { Box as Box5, Typography as Typography3, useTheme as useTheme6 } from "@mui/material";
+import React5 from "react";
+import { Box as Box5, Typography as Typography2, useTheme as useTheme6 } from "@mui/material";
 import { DatasetOutlined } from "@mui/icons-material";
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
 var EmptyState = ({ label, m = 8, icon }) => {
   const theme = useTheme6();
   const text = label != null ? label : "No data created yet";
   const iconColor = theme.palette.mode === "dark" ? "rgba(255,255,255,0.42)" : "rgba(0,0,0,0.42)";
   const labelColor = theme.palette.mode === "dark" ? "rgba(255,255,255,0.50)" : "rgba(0,0,0,0.38)";
-  const iconEl = icon != null && React6.isValidElement(icon) ? icon : /* @__PURE__ */ jsx11(
+  const iconEl = icon != null && React5.isValidElement(icon) ? icon : /* @__PURE__ */ jsx10(
     DatasetOutlined,
     {
       sx: {
@@ -1055,7 +894,7 @@ var EmptyState = ({ label, m = 8, icon }) => {
       }
     }
   );
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs5(
     Box5,
     {
       sx: {
@@ -1071,8 +910,8 @@ var EmptyState = ({ label, m = 8, icon }) => {
       },
       children: [
         iconEl,
-        /* @__PURE__ */ jsx11(
-          Typography3,
+        /* @__PURE__ */ jsx10(
+          Typography2,
           {
             variant: "body2",
             align: "center",
@@ -1094,9 +933,9 @@ var EmptyState = ({ label, m = 8, icon }) => {
 var EmptyState_default = EmptyState;
 
 // src/Pill.tsx
-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";
+import { Button as Button2, Typography as Typography3, Icon } from "@mui/material";
+import { alpha as alpha7, useTheme as useTheme7 } from "@mui/material/styles";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 var Pill = ({
   variant = "filter",
   leftIcon = null,
@@ -1108,7 +947,7 @@ var Pill = ({
   disabled = false
 }) => {
   const theme = useTheme7();
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx11(
     Button2,
     {
       variant: isSelected ? "contained" : "outlined",
@@ -1119,17 +958,17 @@ var Pill = ({
         padding: "8px 16px",
         minHeight: 38,
         textTransform: "none",
-        borderColor: isSelected ? alpha8(theme.palette.primary.main, 0.34) : alpha8(theme.palette.text.primary, 0.18),
+        borderColor: isSelected ? alpha7(theme.palette.primary.main, 0.34) : alpha7(theme.palette.text.primary, 0.18),
         color: isSelected ? "primary.main" : "text.primary",
         "&:hover": {
-          borderColor: alpha8(theme.palette.primary.main, 0.42),
+          borderColor: alpha7(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(
+      children: /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "center" }, children: [
+        leftIcon && /* @__PURE__ */ jsx11(
           Icon,
           {
             className: leftIcon,
@@ -1139,8 +978,8 @@ var Pill = ({
             "data-testid": "pill-left-icon"
           }
         ),
-        /* @__PURE__ */ jsx12(Typography4, { variant: "subtitle2", color: "inherit", fontWeight: 700, children: label }),
-        rightIcon && /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx11(Typography3, { variant: "subtitle2", color: "inherit", fontWeight: 700, children: label }),
+        rightIcon && /* @__PURE__ */ jsx11(
           Icon,
           {
             className: rightIcon,
@@ -1157,10 +996,10 @@ var Pill = ({
 var Pill_default = Pill;
 
 // src/IOSSwitch.tsx
-import { alpha as alpha9, styled as styled4 } from "@mui/material/styles";
+import { alpha as alpha8, 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 }) => ({
+import { jsx as jsx12 } from "react/jsx-runtime";
+var IOSSwitch = styled4((props) => /* @__PURE__ */ jsx12(Switch, { focusVisibleClassName: ".Mui-focusVisible", disableRipple: true, ...props }))(({ theme }) => ({
   width: 46,
   height: 30,
   padding: 0,
@@ -1172,7 +1011,7 @@ var IOSSwitch = styled4((props) => /* @__PURE__ */ jsx13(Switch, { focusVisibleC
       transform: "translateX(16px)",
       color: "#fff",
       "& + .MuiSwitch-track": {
-        background: `linear-gradient(120deg, ${alpha9(theme.palette.primary.light, 0.92)} 0%, ${alpha9(theme.palette.primary.main, 0.94)} 100%)`,
+        background: `linear-gradient(120deg, ${alpha8(theme.palette.primary.light, 0.92)} 0%, ${alpha8(theme.palette.primary.main, 0.94)} 100%)`,
         opacity: 1,
         border: 0
       },
@@ -1200,7 +1039,7 @@ var IOSSwitch = styled4((props) => /* @__PURE__ */ jsx13(Switch, { focusVisibleC
   "& .MuiSwitch-track": {
     borderRadius: 30 / 2,
     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)}`,
+    border: `1px solid ${alpha8("#FFFFFF", theme.palette.mode === "dark" ? 0.16 : 0.56)}`,
     backdropFilter: "blur(10px) saturate(145%)",
     WebkitBackdropFilter: "blur(10px) saturate(145%)",
     opacity: 1,
@@ -1213,29 +1052,42 @@ var IOSSwitch_default = IOSSwitch;
 
 // src/StatusPill.tsx
 import { Chip } from "@mui/material";
-import { alpha as alpha10, useTheme as useTheme8 } from "@mui/material/styles";
+import { alpha as alpha9, useTheme as useTheme8 } from "@mui/material/styles";
 import { userStatus } from "@verma-consulting/common-library";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var statusColorMap = {
-  [userStatus.Pending]: "warning",
-  [userStatus.Active]: "success",
-  [userStatus.Inactive]: "error",
-  [userStatus.Invited]: "info"
+  [userStatus.Pending]: "#B06A00",
+  [userStatus.Active]: "#087443",
+  [userStatus.Inactive]: "#B42318",
+  [userStatus.Invited]: "#175CD3"
 };
 var StatusPill = ({ status }) => {
+  var _a2, _b, _c;
   const theme = useTheme8();
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx13(
     Chip,
     {
       label: status,
-      color: statusColorMap[status],
-      variant: "filled",
+      variant: "outlined",
       sx: {
         ...glassSurface(theme),
+        minHeight: 38,
         fontWeight: 700,
         borderRadius: "999px",
-        px: 1,
-        borderColor: alpha10(theme.palette.text.primary, 0.14)
+        px: 1.25,
+        letterSpacing: "0.01em",
+        color: (_a2 = statusColorMap[status]) != null ? _a2 : theme.palette.text.primary,
+        backgroundColor: alpha9(
+          (_b = statusColorMap[status]) != null ? _b : theme.palette.text.primary,
+          theme.palette.mode === "dark" ? 0.24 : 0.12
+        ),
+        borderColor: alpha9(
+          (_c = statusColorMap[status]) != null ? _c : theme.palette.text.primary,
+          theme.palette.mode === "dark" ? 0.36 : 0.28
+        ),
+        "& .MuiChip-label": {
+          px: 1.25
+        }
       }
     }
   );
@@ -1244,9 +1096,9 @@ var StatusPill_default = StatusPill;
 
 // src/FormPopover.tsx
 import { useState as useState3 } from "react";
-import { Tooltip as Tooltip2, IconButton as IconButton5, Popover } from "@mui/material";
+import { Tooltip as Tooltip2, IconButton as IconButton4, Popover } from "@mui/material";
 import { MoreHoriz } from "@mui/icons-material";
-import { Fragment, jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
 var FormPopover = ({ row, children, title }) => {
   const [anchorEl, setAnchorEl] = useState3(null);
   const handleClick = (event) => {
@@ -1256,9 +1108,9 @@ var FormPopover = ({ row, children, title }) => {
     setAnchorEl(null);
   };
   const open = Boolean(anchorEl);
-  return /* @__PURE__ */ jsxs8(Fragment, { children: [
-    /* @__PURE__ */ jsx15(Tooltip2, { title, children: /* @__PURE__ */ jsx15(
-      IconButton5,
+  return /* @__PURE__ */ jsxs7(Fragment, { children: [
+    /* @__PURE__ */ jsx14(Tooltip2, { title, children: /* @__PURE__ */ jsx14(
+      IconButton4,
       {
         onClick: handleClick,
         size: "small",
@@ -1272,10 +1124,10 @@ var FormPopover = ({ row, children, title }) => {
             backgroundColor: "#f0f0f0"
           }
         },
-        children: /* @__PURE__ */ jsx15(MoreHoriz, { fontSize: "inherit", color: "primary" })
+        children: /* @__PURE__ */ jsx14(MoreHoriz, { fontSize: "inherit", color: "primary" })
       }
     ) }),
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx14(
       Popover,
       {
         open,
@@ -1293,26 +1145,26 @@ var FormPopover = ({ row, children, title }) => {
 var FormPopover_default = FormPopover;
 
 // src/SearchableSelect.tsx
-import React8, { useEffect as useEffect3, useRef as useRef3, useState as useState4, useMemo } from "react";
+import React7, { useEffect as useEffect3, useRef as useRef3, useState as useState4, useMemo } from "react";
 import {
   Autocomplete,
   TextField,
-  Typography as Typography5,
-  FormLabel as FormLabel2,
-  FormControl as FormControl2,
-  IconButton as IconButton6
+  Typography as Typography4,
+  FormLabel,
+  FormControl,
+  IconButton as IconButton5
 } 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 makeStyles3 } from "@mui/styles";
-import { Fragment as Fragment2, jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
-var useStyles3 = makeStyles3((theme) => ({
+import { alpha as alpha10, useTheme as useTheme9 } from "@mui/material/styles";
+import { Clear } from "@mui/icons-material";
+import { makeStyles as makeStyles2 } from "@mui/styles";
+import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+var useStyles2 = makeStyles2((theme) => ({
   defaultMode: {
     margin: "4px",
     padding: "14px 8px",
     cursor: "pointer",
     borderRadius: 14,
-    border: `1px solid ${alpha11("#FFFFFF", theme.palette.mode === "dark" ? 0.16 : 0.55)}`,
+    border: `1px solid ${alpha10("#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": {
@@ -1328,7 +1180,7 @@ var useStyles3 = makeStyles3((theme) => ({
     whiteSpace: "pre-wrap"
   }
 }));
-var SearchableSelect = React8.memo(
+var SearchableSelect = React7.memo(
   ({
     name,
     label,
@@ -1338,12 +1190,12 @@ var SearchableSelect = React8.memo(
     size = "small",
     style,
     disabled = false,
-    onClear,
+    onClear = null,
     defaultEditMode = false,
     multiple = false
   }) => {
     const theme = useTheme9();
-    const classes = useStyles3();
+    const classes = useStyles2();
     const wrapperRef = useRef3(null);
     const inputRef = useRef3(null);
     const [editMode, setEditMode] = useState4(defaultEditMode);
@@ -1372,8 +1224,6 @@ var SearchableSelect = React8.memo(
       event.stopPropagation();
       if (onClear) {
         onClear();
-      } else {
-        onChange("");
       }
       setEditMode(false);
       setOpen(false);
@@ -1398,7 +1248,8 @@ var SearchableSelect = React8.memo(
       }
     }, [selected, multiple]);
     const isValueEmpty = !value.trim();
-    return editMode ? /* @__PURE__ */ jsx16(FormControl2, { fullWidth: true, style, disabled, size, children: /* @__PURE__ */ jsx16(
+    const showClear = onClear != null;
+    return editMode ? /* @__PURE__ */ jsx15(FormControl, { fullWidth: true, style, disabled, size, children: /* @__PURE__ */ jsx15(
       Autocomplete,
       {
         multiple,
@@ -1459,17 +1310,17 @@ var SearchableSelect = React8.memo(
             sx: {
               background: glassBackground,
               backdropFilter: "blur(12px) saturate(150%)",
-              border: `1px solid ${alpha11("#FFFFFF", theme.palette.mode === "dark" ? 0.16 : 0.55)}`,
+              border: `1px solid ${alpha10("#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(
+                  backgroundColor: alpha10(
                     theme.palette.primary.main,
                     theme.palette.mode === "dark" ? 0.28 : 0.14
                   )
                 },
                 "&.Mui-focused": {
-                  backgroundColor: alpha11(
+                  backgroundColor: alpha10(
                     theme.palette.primary.main,
                     theme.palette.mode === "dark" ? 0.2 : 0.1
                   )
@@ -1478,7 +1329,7 @@ var SearchableSelect = React8.memo(
             }
           }
         },
-        renderInput: (params) => /* @__PURE__ */ jsx16(
+        renderInput: (params) => /* @__PURE__ */ jsx15(
           TextField,
           {
             ...params,
@@ -1505,15 +1356,15 @@ var SearchableSelect = React8.memo(
                   WebkitTextFillColor: "currentColor"
                 },
                 "& .MuiOutlinedInput-notchedOutline": {
-                  borderColor: alpha11(
+                  borderColor: alpha10(
                     "#FFFFFF",
                     theme.palette.mode === "dark" ? 0.18 : 0.6
                   )
                 }
               },
-              endAdornment: /* @__PURE__ */ jsxs9(Fragment2, { children: [
-                !isValueEmpty && /* @__PURE__ */ jsx16(
-                  IconButton6,
+              endAdornment: /* @__PURE__ */ jsxs8(Fragment2, { children: [
+                showClear && !isValueEmpty && /* @__PURE__ */ jsx15(
+                  IconButton5,
                   {
                     "aria-label": `clear ${name}`,
                     onClick: handleClear,
@@ -1523,7 +1374,7 @@ var SearchableSelect = React8.memo(
                       boxShadow: "none",
                       mr: 0.25
                     },
-                    children: /* @__PURE__ */ jsx16(Clear2, { fontSize: "inherit" })
+                    children: /* @__PURE__ */ jsx15(Clear, { fontSize: "inherit" })
                   }
                 ),
                 params.InputProps.endAdornment
@@ -1536,7 +1387,7 @@ var SearchableSelect = React8.memo(
           setOpen(false);
         }
       }
-    ) }) : /* @__PURE__ */ jsxs9(
+    ) }) : /* @__PURE__ */ jsxs8(
       "div",
       {
         ref: wrapperRef,
@@ -1549,8 +1400,8 @@ var SearchableSelect = React8.memo(
         className: classes.defaultMode,
         style,
         children: [
-          /* @__PURE__ */ jsx16(FormLabel2, { className: classes.formLabel, sx: { color: "text.secondary" }, children: label }),
-          /* @__PURE__ */ jsx16(Typography5, { className: classes.formValue, sx: { color: "text.primary" }, children: displayValue })
+          /* @__PURE__ */ jsx15(FormLabel, { className: classes.formLabel, sx: { color: "text.secondary" }, children: label }),
+          /* @__PURE__ */ jsx15(Typography4, { className: classes.formValue, sx: { color: "text.primary" }, children: displayValue })
         ]
       }
     );
@@ -1561,16 +1412,16 @@ var SearchableSelect_default = SearchableSelect;
 // src/FormDrawer.tsx
 import {
   Drawer,
-  Typography as Typography6,
+  Typography as Typography5,
   Box as Box6,
-  IconButton as IconButton7,
+  IconButton as IconButton6,
   Grid as Grid2,
   useTheme as useTheme10,
   useMediaQuery as useMediaQuery3
 } from "@mui/material";
-import { alpha as alpha12 } from "@mui/material/styles";
+import { alpha as alpha11 } from "@mui/material/styles";
 import { Close as Close2 } from "@mui/icons-material";
-import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
 var FormDrawer = ({
   open,
   setOpen,
@@ -1580,7 +1431,7 @@ var FormDrawer = ({
 }) => {
   const theme = useTheme10();
   const mdMatches = useMediaQuery3(theme.breakpoints.down("md"));
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs9(
     Drawer,
     {
       anchor: mdMatches ? "bottom" : "right",
@@ -1596,15 +1447,15 @@ var FormDrawer = ({
         }
       },
       children: [
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx16(
           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,
+            borderBottom: `1px solid ${alpha11(theme.palette.divider, 0.36)}`,
+            children: /* @__PURE__ */ jsxs9(Grid2, { container: true, children: [
+              /* @__PURE__ */ jsx16(Grid2, { item: true, children: title && /* @__PURE__ */ jsx16(Typography5, { variant: "h6", fontWeight: "bold", children: title }) }),
+              /* @__PURE__ */ jsx16(Grid2, { item: true, children: /* @__PURE__ */ jsx16(
+                IconButton6,
                 {
                   size: "medium",
                   onClick: () => setOpen(false),
@@ -1613,25 +1464,25 @@ var FormDrawer = ({
                     top: 8,
                     right: 8,
                     zIndex: 2,
-                    backgroundColor: alpha12(theme.palette.background.paper, 0.46)
+                    backgroundColor: alpha11(theme.palette.background.paper, 0.46)
                   },
-                  children: /* @__PURE__ */ jsx17(Close2, { fontSize: "inherit" })
+                  children: /* @__PURE__ */ jsx16(Close2, { fontSize: "inherit" })
                 }
               ) })
             ] })
           }
         ),
-        /* @__PURE__ */ jsx17(Box6, { flex: 1, overflow: "auto", p: 3, children }),
-        actions && /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx16(Box6, { flex: 1, overflow: "auto", p: 3, children }),
+        actions && /* @__PURE__ */ jsx16(
           Box6,
           {
             p: 2,
-            borderTop: `1px solid ${alpha12(theme.palette.divider, 0.36)}`,
+            borderTop: `1px solid ${alpha11(theme.palette.divider, 0.36)}`,
             sx: {
               position: "sticky",
               bottom: 0,
               zIndex: 1,
-              backgroundColor: alpha12(theme.palette.background.paper, 0.38),
+              backgroundColor: alpha11(theme.palette.background.paper, 0.38),
               backdropFilter: "blur(10px)"
             },
             children: actions
@@ -1658,9 +1509,9 @@ import {
   useTheme as useTheme11,
   useMediaQuery as useMediaQuery4
 } from "@mui/material";
-import { alpha as alpha13 } from "@mui/material/styles";
+import { alpha as alpha12 } from "@mui/material/styles";
 import { constants as constants2 } from "@verma-consulting/common-library";
-import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
 var PhoneNumberField = ({
   value = "",
   onChange,
@@ -1677,7 +1528,7 @@ var PhoneNumberField = ({
   const glassInputSx = {
     backdropFilter: "blur(10px) saturate(150%)",
     "& .MuiOutlinedInput-notchedOutline": {
-      borderColor: alpha13(
+      borderColor: alpha12(
         "#FFFFFF",
         theme.palette.mode === "dark" ? 0.16 : 0.58
       )
@@ -1771,14 +1622,14 @@ var PhoneNumberField = ({
       onBlur == null ? void 0 : onBlur();
     }
   };
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx17(
     Box7,
     {
       ref: wrapperRef,
       onFocusCapture: () => setIsFocused(true),
       onBlurCapture: handleWrapperBlur,
       sx: { display: "flex", alignItems: "center", width: "100%" },
-      children: /* @__PURE__ */ jsxs11(
+      children: /* @__PURE__ */ jsxs10(
         Stack,
         {
           direction: "row",
@@ -1786,7 +1637,7 @@ var PhoneNumberField = ({
           alignItems: "center",
           sx: { width: "100%" },
           children: [
-            /* @__PURE__ */ jsx18(
+            /* @__PURE__ */ jsx17(
               TextField2,
               {
                 select: true,
@@ -1814,7 +1665,7 @@ var PhoneNumberField = ({
                   },
                   onClose: () => setSelectOpen(false)
                 },
-                children: countries.map((option) => /* @__PURE__ */ jsxs11(MenuItem, { value: option.code, children: [
+                children: countries.map((option) => /* @__PURE__ */ jsxs10(MenuItem, { value: option.code, children: [
                   option.code,
                   " (+",
                   option.phone,
@@ -1822,7 +1673,7 @@ var PhoneNumberField = ({
                 ] }, option.code))
               }
             ),
-            /* @__PURE__ */ jsx18(
+            /* @__PURE__ */ jsx17(
               TextField2,
               {
                 label,
@@ -1855,7 +1706,6 @@ var PhoneNumberField = ({
 };
 var PhoneNumberField_default = PhoneNumberField;
 export {
-  ClearableSelect_default as ClearableSelect,
   EmptyState_default as EmptyState,
   FormDialog_default as FormDialog,
   FormDrawer_default as FormDrawer,
@@ -1875,7 +1725,7 @@ export {
   TablePagination_default as TablePagination,
   ThemeProvider,
   createTheme,
-  makeStyles4 as makeStyles,
+  makeStyles3 as makeStyles,
   styled5 as styled,
   useTheme12 as useTheme
 };