@verma-consulting/design-library 0.1.45 → 0.1.46

package/dist/index.js

@@ -49,11 +49,11 @@ __export(index_exports, {
   StatusPill: () => StatusPill_default,
   TabPanel: () => TabPanel_default,
   TablePagination: () => TablePagination_default,
-  ThemeProvider: () => import_styles19.ThemeProvider,
-  createTheme: () => import_styles19.createTheme,
-  makeStyles: () => import_styles20.makeStyles,
-  styled: () => import_styles19.styled,
-  useTheme: () => import_styles19.useTheme
+  ThemeProvider: () => import_styles18.ThemeProvider,
+  createTheme: () => import_styles18.createTheme,
+  makeStyles: () => import_styles19.makeStyles,
+  styled: () => import_styles18.styled,
+  useTheme: () => import_styles18.useTheme
 });
 module.exports = __toCommonJS(index_exports);
 __reExport(index_exports, require("@mui/material"), module.exports);
@@ -268,8 +268,8 @@ var TablePagination = React.forwardRef(function TablePagination2(props, ref) {
 var TablePagination_default = TablePagination;
 
 // src/index.tsx
-var import_styles19 = require("@mui/material/styles");
-var import_styles20 = require("@mui/styles");
+var import_styles18 = require("@mui/material/styles");
+var import_styles19 = require("@mui/styles");
 
 // src/Logo.tsx
 var import_react = require("react");
@@ -389,14 +389,18 @@ var Logo_default = Logo;
 // src/FormDialog.tsx
 var import_styles2 = require("@mui/material/styles");
 var import_material3 = require("@mui/material");
-var import_styles3 = require("@mui/material/styles");
 var import_icons_material = require("@mui/icons-material");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var BootstrapDialog = (0, import_styles2.styled)(import_material3.Dialog)(({ theme }) => ({
   "& .MuiDialog-paper": {
     borderRadius: 24,
+    backgroundColor: theme.palette.background.paper,
+    display: "flex",
+    flexDirection: "column",
+    maxHeight: "min(92vh, 1200px)",
     [theme.breakpoints.down("md")]: {
-      borderRadius: 0
+      borderRadius: 0,
+      maxHeight: "100%"
     }
   },
   "& .MuiDialogContent-root": {
@@ -406,40 +410,50 @@ var BootstrapDialog = (0, import_styles2.styled)(import_material3.Dialog)(({ the
     padding: theme.spacing(4)
   }
 }));
-var BootstrapDialogTitle = (props) => {
-  const { children, onClose, ...other } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-    import_material3.DialogTitle,
-    {
-      sx: {
-        px: 3,
-        py: 3,
-        pt: 3.5,
-        pb: 2.5,
-        fontSize: "1.25rem",
-        fontWeight: 600,
-        letterSpacing: "0.02em",
-        lineHeight: 1.35,
-        color: "primary.main"
-      },
-      ...other,
-      children: [
-        children,
-        onClose ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          import_material3.IconButton,
-          {
-            onClick: onClose,
-            sx: {
-              position: "absolute",
-              right: 16,
-              top: 16
-            },
-            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons_material.Close, { color: "primary" })
-          }
-        ) : null
-      ]
-    }
-  );
+var BootstrapDialogTitle = ({
+  children,
+  onClose,
+  ...other
+}) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  import_material3.DialogTitle,
+  {
+    sx: {
+      position: "relative",
+      px: 3,
+      py: 3,
+      pt: 3.5,
+      pb: 2.5,
+      fontSize: "1.25rem",
+      fontWeight: 600,
+      letterSpacing: "0.02em",
+      lineHeight: 1.35,
+      color: "primary.main",
+      flexShrink: 0,
+      bgcolor: "background.paper"
+    },
+    ...other,
+    children: [
+      children,
+      onClose ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        import_material3.IconButton,
+        {
+          onClick: onClose,
+          sx: {
+            position: "absolute",
+            right: 16,
+            top: 16
+          },
+          "aria-label": "Close",
+          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons_material.Close, { color: "primary" })
+        }
+      ) : null
+    ]
+  }
+);
+var defaultBackdropSx = {
+  backgroundColor: (t) => (0, import_styles2.alpha)(t.palette.common.black, t.palette.mode === "dark" ? 0.52 : 0.28),
+  backdropFilter: "saturate(150%) blur(10px)",
+  WebkitBackdropFilter: "saturate(150%) blur(10px)"
 };
 var FormDialog = ({
   open = false,
@@ -448,22 +462,53 @@ var FormDialog = ({
   actions,
   children,
   maxWidth = "lg",
+  BackdropProps,
   ...props
 }) => {
   const theme = (0, import_material3.useTheme)();
   const mdMatches = (0, import_material3.useMediaQuery)(theme.breakpoints.down("md"));
+  const close = () => setOpen(false);
+  const bp = BackdropProps != null ? BackdropProps : {};
+  const mergedBackdrop = {
+    ...bp,
+    sx: Array.isArray(bp.sx) ? [defaultBackdropSx, ...bp.sx] : [defaultBackdropSx, bp.sx].filter(Boolean)
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     BootstrapDialog,
     {
+      ...props,
       fullWidth: true,
-      onClose: () => setOpen(false),
+      onClose: close,
       open,
       maxWidth,
       fullScreen: mdMatches,
+      BackdropProps: mergedBackdrop,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BootstrapDialogTitle, { onClose: () => setOpen(false), children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material3.DialogContent, { dividers: true, children }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material3.DialogActions, { children: actions })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BootstrapDialogTitle, { onClose: close, children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          import_material3.DialogContent,
+          {
+            dividers: true,
+            sx: {
+              flex: "1 1 auto",
+              minHeight: 0,
+              overflow: "auto",
+              bgcolor: "background.paper"
+            },
+            children
+          }
+        ),
+        actions != null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          import_material3.DialogActions,
+          {
+            sx: {
+              flexShrink: 0,
+              bgcolor: "background.paper",
+              borderTop: (t) => `1px solid ${t.palette.divider}`
+            },
+            children: actions
+          }
+        ) : null
       ]
     }
   );
@@ -471,30 +516,30 @@ var FormDialog = ({
 var FormDialog_default = FormDialog;
 
 // src/InputFileUpload.tsx
-var import_styles5 = require("@mui/material/styles");
+var import_styles4 = require("@mui/material/styles");
 var import_material4 = require("@mui/material");
 var import_icons_material2 = require("@mui/icons-material");
 
 // src/glassStyles.ts
-var import_styles4 = require("@mui/material/styles");
-var glassBorder = (theme) => `1px solid ${(0, import_styles4.alpha)(
+var import_styles3 = require("@mui/material/styles");
+var glassBorder = (theme) => `1px solid ${(0, import_styles3.alpha)(
   "#FFFFFF",
   theme.palette.mode === "dark" ? 0.16 : 0.62
 )}`;
 var glassSurface = (theme) => ({
-  background: theme.palette.mode === "dark" ? `linear-gradient(160deg, ${(0, import_styles4.alpha)("#1F2937", 0.78)} 0%, ${(0, import_styles4.alpha)("#111827", 0.68)} 100%)` : `linear-gradient(160deg, ${(0, import_styles4.alpha)("#FFFFFF", 0.88)} 0%, ${(0, import_styles4.alpha)("#F5F9FF", 0.72)} 100%)`,
+  background: theme.palette.mode === "dark" ? `linear-gradient(160deg, ${(0, import_styles3.alpha)("#1F2937", 0.78)} 0%, ${(0, import_styles3.alpha)("#111827", 0.68)} 100%)` : `linear-gradient(160deg, ${(0, import_styles3.alpha)("#FFFFFF", 0.88)} 0%, ${(0, import_styles3.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)"
 });
 var glassHover = (theme) => ({
-  background: theme.palette.mode === "dark" ? `linear-gradient(160deg, ${(0, import_styles4.alpha)("#374151", 0.8)} 0%, ${(0, import_styles4.alpha)("#1F2937", 0.74)} 100%)` : `linear-gradient(160deg, ${(0, import_styles4.alpha)("#FFFFFF", 0.97)} 0%, ${(0, import_styles4.alpha)("#EEF5FF", 0.86)} 100%)`
+  background: theme.palette.mode === "dark" ? `linear-gradient(160deg, ${(0, import_styles3.alpha)("#374151", 0.8)} 0%, ${(0, import_styles3.alpha)("#1F2937", 0.74)} 100%)` : `linear-gradient(160deg, ${(0, import_styles3.alpha)("#FFFFFF", 0.97)} 0%, ${(0, import_styles3.alpha)("#EEF5FF", 0.86)} 100%)`
 });
 
 // src/InputFileUpload.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var VisuallyHiddenInput = (0, import_styles5.styled)("input")({
+var VisuallyHiddenInput = (0, import_styles4.styled)("input")({
   clip: "rect(0 0 0 0)",
   clipPath: "inset(50%)",
   height: 1,
@@ -515,7 +560,7 @@ var InputFileUpload = ({
   disabled = false,
   fullWidth = false
 }) => {
-  const theme = (0, import_styles5.useTheme)();
+  const theme = (0, import_styles4.useTheme)();
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     import_material4.Box,
     {
@@ -536,17 +581,17 @@ var InputFileUpload = ({
         transition: "box-shadow 0.2s ease, transform 0.2s ease",
         borderStyle: "dashed",
         borderWidth: 1,
-        borderColor: (0, import_styles5.alpha)(
+        borderColor: (0, import_styles4.alpha)(
           t.palette.primary.main,
           t.palette.mode === "dark" ? 0.35 : 0.28
         ),
         "&:hover": !disabled ? {
           ...glassHover(t),
-          borderColor: (0, import_styles5.alpha)(t.palette.primary.main, 0.45),
+          borderColor: (0, import_styles4.alpha)(t.palette.primary.main, 0.45),
           boxShadow: t.palette.mode === "dark" ? "0 12px 28px rgba(0,0,0,0.38)" : "0 12px 28px rgba(15, 23, 42, 0.12)"
         } : void 0,
         "&:focus-within": {
-          outline: `2px solid ${(0, import_styles5.alpha)(t.palette.primary.main, 0.45)}`,
+          outline: `2px solid ${(0, import_styles4.alpha)(t.palette.primary.main, 0.45)}`,
           outlineOffset: 2
         }
       }),
@@ -563,11 +608,11 @@ var InputFileUpload = ({
               display: "flex",
               alignItems: "center",
               justifyContent: "center",
-              background: (0, import_styles5.alpha)(
+              background: (0, import_styles4.alpha)(
                 theme.palette.primary.main,
                 theme.palette.mode === "dark" ? 0.22 : 0.12
               ),
-              border: `1px solid ${(0, import_styles5.alpha)(theme.palette.primary.main, 0.25)}`,
+              border: `1px solid ${(0, import_styles4.alpha)(theme.palette.primary.main, 0.25)}`,
               color: "primary.main"
             },
             children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons_material2.CloudUpload, { sx: { fontSize: 22 } })
@@ -617,7 +662,7 @@ var InputFileUpload_default = InputFileUpload;
 // src/ImageUploadAvatar.tsx
 var import_react2 = require("react");
 var import_material5 = require("@mui/material");
-var import_styles6 = require("@mui/material/styles");
+var import_styles5 = require("@mui/material/styles");
 var import_icons_material3 = require("@mui/icons-material");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var DEFAULT_ACCEPT = "image/jpeg,image/png,image/gif,image/webp,image/avif,image/bmp,image/svg+xml,image/heic,image/heif";
@@ -631,7 +676,7 @@ function isValidImageFile(file) {
   }
   return false;
 }
-var HiddenInput = (0, import_styles6.styled)("input")({
+var HiddenInput = (0, import_styles5.styled)("input")({
   position: "absolute",
   width: 1,
   height: 1,
@@ -641,7 +686,7 @@ var HiddenInput = (0, import_styles6.styled)("input")({
   clip: "rect(0 0 0 0)",
   border: 0
 });
-var Wrapper = (0, import_styles6.styled)(import_material5.Box, {
+var Wrapper = (0, import_styles5.styled)(import_material5.Box, {
   shouldForwardProp: (prop) => prop !== "variant" && prop !== "size"
 })(({ theme, size, variant }) => ({
   position: "relative",
@@ -649,20 +694,20 @@ var Wrapper = (0, import_styles6.styled)(import_material5.Box, {
   height: size,
   borderRadius: variant === "circular" ? "50%" : variant === "rounded" ? theme.shape.borderRadius * 2 : 0,
   ...glassSurface(theme),
-  border: `1px dashed ${(0, import_styles6.alpha)(theme.palette.primary.main, 0.28)}`,
+  border: `1px dashed ${(0, import_styles5.alpha)(theme.palette.primary.main, 0.28)}`,
   overflow: "hidden",
   cursor: "pointer",
   display: "flex",
   alignItems: "center",
   justifyContent: "center"
 }));
-var PreviewImg = (0, import_styles6.styled)("img")({
+var PreviewImg = (0, import_styles5.styled)("img")({
   width: "100%",
   height: "100%",
   objectFit: "cover",
   display: "block"
 });
-var Overlay = (0, import_styles6.styled)(import_material5.Box)(({ theme }) => ({
+var Overlay = (0, import_styles5.styled)(import_material5.Box)(({ theme }) => ({
   position: "absolute",
   inset: 0,
   display: "flex",
@@ -684,14 +729,14 @@ var Overlay = (0, import_styles6.styled)(import_material5.Box)(({ theme }) => ({
     "& .uploadIcon": { opacity: 1, transform: "scale(1)" }
   }
 }));
-var ClearButton = (0, import_styles6.styled)(import_material5.IconButton)(({ theme }) => ({
+var ClearButton = (0, import_styles5.styled)(import_material5.IconButton)(({ theme }) => ({
   position: "absolute",
   top: -8,
   right: -8,
   ...glassSurface(theme),
   boxShadow: theme.shadows[2],
   "&:hover": {
-    background: (0, import_styles6.alpha)(theme.palette.background.paper, 0.9)
+    background: (0, import_styles5.alpha)(theme.palette.background.paper, 0.9)
   }
 }));
 var ImageUploadAvatar = ({
@@ -776,7 +821,7 @@ var ImageUploadAvatar_default = ImageUploadAvatar;
 // src/FormSnackBar.tsx
 var import_react3 = require("react");
 var import_material6 = require("@mui/material");
-var import_styles7 = require("@mui/material/styles");
+var import_styles6 = require("@mui/material/styles");
 var import_Close = __toESM(require("@mui/icons-material/Close"));
 var import_common_library = require("@verma-consulting/common-library");
 var import_jsx_runtime7 = require("react/jsx-runtime");
@@ -805,7 +850,7 @@ var FormSnackBar = ({
   autoHideDuration = 3500
 }) => {
   var _a2, _b;
-  const theme = (0, import_styles7.useTheme)();
+  const theme = (0, import_styles6.useTheme)();
   const [queue, setQueue] = (0, import_react3.useState)([]);
   const idRef = (0, import_react3.useRef)(0);
   const prevOpenRef = (0, import_react3.useRef)(!!(snackBar == null ? void 0 : snackBar.open));
@@ -850,7 +895,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_styles7.alpha)(baseHex, 0.34) : (0, import_styles7.alpha)(baseHex, 0.24),
+      bg: theme.palette.mode === "dark" ? (0, import_styles6.alpha)(baseHex, 0.34) : (0, import_styles6.alpha)(baseHex, 0.24),
       text: theme.palette.mode === "dark" ? "rgba(255,255,255,0.94)" : baseHex,
       icon: baseHex
     };
@@ -891,7 +936,7 @@ var FormSnackBar = ({
               color: colors.text,
               backdropFilter: "blur(14px) saturate(150%)",
               WebkitBackdropFilter: "blur(14px) saturate(150%)",
-              border: `1px solid ${(0, import_styles7.alpha)("#FFFFFF", theme.palette.mode === "dark" ? 0.16 : 0.55)}`,
+              border: `1px solid ${(0, import_styles6.alpha)("#FFFFFF", theme.palette.mode === "dark" ? 0.16 : 0.55)}`,
               "& .MuiAlert-icon": {
                 color: colors.icon
               },
@@ -923,10 +968,10 @@ var FormSnackBar_default = FormSnackBar;
 
 // src/Loader.tsx
 var import_material7 = require("@mui/material");
-var import_styles8 = require("@mui/styles");
-var import_styles9 = require("@mui/material/styles");
+var import_styles7 = require("@mui/styles");
+var import_styles8 = require("@mui/material/styles");
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var useStyles = (0, import_styles8.makeStyles)({
+var useStyles = (0, import_styles7.makeStyles)({
   "@keyframes pulse": {
     "0%": { transform: "scale(1)", opacity: 0.9 },
     "50%": { transform: "scale(1.05)", opacity: 1 },
@@ -958,7 +1003,7 @@ var Loader = ({ size = 48, color = "primary" }) => {
             p: 1,
             borderRadius: "50%",
             backgroundColor: "transparent",
-            border: (theme) => `1px solid ${(0, import_styles9.alpha)("#FFFFFF", theme.palette.mode === "dark" ? 0.14 : 0.56)}`,
+            border: (theme) => `1px solid ${(0, import_styles8.alpha)("#FFFFFF", theme.palette.mode === "dark" ? 0.14 : 0.56)}`,
             boxShadow: (theme) => theme.palette.mode === "dark" ? "0 10px 24px rgba(0,0,0,0.32)" : "0 10px 20px rgba(15,23,42,0.14)"
           }
         }
@@ -1066,7 +1111,7 @@ var EmptyState_default = EmptyState;
 
 // src/Pill.tsx
 var import_material10 = require("@mui/material");
-var import_styles10 = require("@mui/material/styles");
+var import_styles9 = require("@mui/material/styles");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var Pill = ({
   variant = "filter",
@@ -1078,7 +1123,7 @@ var Pill = ({
   label = "",
   disabled = false
 }) => {
-  const theme = (0, import_styles10.useTheme)();
+  const theme = (0, import_styles9.useTheme)();
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     import_material10.Button,
     {
@@ -1090,10 +1135,10 @@ var Pill = ({
         padding: "8px 16px",
         minHeight: 38,
         textTransform: "none",
-        borderColor: isSelected ? (0, import_styles10.alpha)(theme.palette.primary.main, 0.34) : (0, import_styles10.alpha)(theme.palette.text.primary, 0.18),
+        borderColor: isSelected ? (0, import_styles9.alpha)(theme.palette.primary.main, 0.34) : (0, import_styles9.alpha)(theme.palette.text.primary, 0.18),
         color: isSelected ? "primary.main" : "text.primary",
         "&:hover": {
-          borderColor: (0, import_styles10.alpha)(theme.palette.primary.main, 0.42),
+          borderColor: (0, import_styles9.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)"
         }
       },
@@ -1128,10 +1173,10 @@ var Pill = ({
 var Pill_default = Pill;
 
 // src/IOSSwitch.tsx
-var import_styles11 = require("@mui/material/styles");
+var import_styles10 = require("@mui/material/styles");
 var import_Switch = __toESM(require("@mui/material/Switch"));
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var IOSSwitch = (0, import_styles11.styled)((props) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_Switch.default, { focusVisibleClassName: ".Mui-focusVisible", disableRipple: true, ...props }))(({ theme }) => ({
+var IOSSwitch = (0, import_styles10.styled)((props) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_Switch.default, { focusVisibleClassName: ".Mui-focusVisible", disableRipple: true, ...props }))(({ theme }) => ({
   width: 46,
   height: 30,
   padding: 0,
@@ -1143,7 +1188,7 @@ var IOSSwitch = (0, import_styles11.styled)((props) => /* @__PURE__ */ (0, impor
       transform: "translateX(16px)",
       color: "#fff",
       "& + .MuiSwitch-track": {
-        background: `linear-gradient(120deg, ${(0, import_styles11.alpha)(theme.palette.primary.light, 0.92)} 0%, ${(0, import_styles11.alpha)(theme.palette.primary.main, 0.94)} 100%)`,
+        background: `linear-gradient(120deg, ${(0, import_styles10.alpha)(theme.palette.primary.light, 0.92)} 0%, ${(0, import_styles10.alpha)(theme.palette.primary.main, 0.94)} 100%)`,
         opacity: 1,
         border: 0
       },
@@ -1171,7 +1216,7 @@ var IOSSwitch = (0, import_styles11.styled)((props) => /* @__PURE__ */ (0, impor
   "& .MuiSwitch-track": {
     borderRadius: 16,
     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_styles11.alpha)("#FFFFFF", theme.palette.mode === "dark" ? 0.16 : 0.56)}`,
+    border: `1px solid ${(0, import_styles10.alpha)("#FFFFFF", theme.palette.mode === "dark" ? 0.16 : 0.56)}`,
     backdropFilter: "blur(10px) saturate(145%)",
     WebkitBackdropFilter: "blur(10px) saturate(145%)",
     opacity: 1,
@@ -1184,7 +1229,7 @@ var IOSSwitch_default = IOSSwitch;
 
 // src/StatusPill.tsx
 var import_material11 = require("@mui/material");
-var import_styles12 = require("@mui/material/styles");
+var import_styles11 = require("@mui/material/styles");
 var import_common_library2 = require("@verma-consulting/common-library");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var statusColorMap = {
@@ -1195,7 +1240,7 @@ var statusColorMap = {
 };
 var StatusPill = ({ status }) => {
   var _a2, _b, _c;
-  const theme = (0, import_styles12.useTheme)();
+  const theme = (0, import_styles11.useTheme)();
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     import_material11.Chip,
     {
@@ -1209,11 +1254,11 @@ var StatusPill = ({ status }) => {
         px: 1.25,
         letterSpacing: "0.01em",
         color: (_a2 = statusColorMap[status]) != null ? _a2 : theme.palette.text.primary,
-        backgroundColor: (0, import_styles12.alpha)(
+        backgroundColor: (0, import_styles11.alpha)(
           (_b = statusColorMap[status]) != null ? _b : theme.palette.text.primary,
           theme.palette.mode === "dark" ? 0.24 : 0.12
         ),
-        borderColor: (0, import_styles12.alpha)(
+        borderColor: (0, import_styles11.alpha)(
           (_c = statusColorMap[status]) != null ? _c : theme.palette.text.primary,
           theme.palette.mode === "dark" ? 0.36 : 0.28
         ),
@@ -1279,17 +1324,17 @@ var FormPopover_default = FormPopover;
 // src/SearchableSelect.tsx
 var import_react6 = __toESM(require("react"));
 var import_material13 = require("@mui/material");
-var import_styles13 = require("@mui/material/styles");
+var import_styles12 = require("@mui/material/styles");
 var import_icons_material6 = require("@mui/icons-material");
-var import_styles14 = require("@mui/styles");
+var import_styles13 = require("@mui/styles");
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var useStyles2 = (0, import_styles14.makeStyles)((theme) => ({
+var useStyles2 = (0, import_styles13.makeStyles)((theme) => ({
   defaultMode: {
     margin: "4px",
     padding: "14px 8px",
     cursor: "pointer",
     borderRadius: 8,
-    border: `1px solid ${(0, import_styles13.alpha)("#FFFFFF", theme.palette.mode === "dark" ? 0.16 : 0.55)}`,
+    border: `1px solid ${(0, import_styles12.alpha)("#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": {
@@ -1319,7 +1364,7 @@ var SearchableSelect = import_react6.default.memo(
     defaultEditMode = false,
     multiple = false
   }) => {
-    const theme = (0, import_styles13.useTheme)();
+    const theme = (0, import_styles12.useTheme)();
     const classes = useStyles2();
     const wrapperRef = (0, import_react6.useRef)(null);
     const inputRef = (0, import_react6.useRef)(null);
@@ -1435,17 +1480,17 @@ var SearchableSelect = import_react6.default.memo(
             sx: {
               background: glassBackground,
               backdropFilter: "blur(12px) saturate(150%)",
-              border: `1px solid ${(0, import_styles13.alpha)("#FFFFFF", theme.palette.mode === "dark" ? 0.16 : 0.55)}`,
+              border: `1px solid ${(0, import_styles12.alpha)("#FFFFFF", theme.palette.mode === "dark" ? 0.16 : 0.55)}`,
               boxShadow: theme.palette.mode === "dark" ? "rgba(0, 0, 0, 0.34) 0px 10px 26px" : "rgba(15, 23, 42, 0.16) 0px 8px 24px",
               "& .MuiAutocomplete-option": {
                 "&[aria-selected='true']": {
-                  backgroundColor: (0, import_styles13.alpha)(
+                  backgroundColor: (0, import_styles12.alpha)(
                     theme.palette.primary.main,
                     theme.palette.mode === "dark" ? 0.28 : 0.14
                   )
                 },
                 "&.Mui-focused": {
-                  backgroundColor: (0, import_styles13.alpha)(
+                  backgroundColor: (0, import_styles12.alpha)(
                     theme.palette.primary.main,
                     theme.palette.mode === "dark" ? 0.2 : 0.1
                   )
@@ -1481,7 +1526,7 @@ var SearchableSelect = import_react6.default.memo(
                   WebkitTextFillColor: "currentColor"
                 },
                 "& .MuiOutlinedInput-notchedOutline": {
-                  borderColor: (0, import_styles13.alpha)(
+                  borderColor: (0, import_styles12.alpha)(
                     "#FFFFFF",
                     theme.palette.mode === "dark" ? 0.18 : 0.6
                   )
@@ -1550,7 +1595,7 @@ var SearchableSelect_default = SearchableSelect;
 
 // src/FormDrawer.tsx
 var import_material14 = require("@mui/material");
-var import_styles15 = require("@mui/material/styles");
+var import_styles14 = require("@mui/material/styles");
 var import_icons_material7 = require("@mui/icons-material");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var FormDrawer = ({
@@ -1558,67 +1603,106 @@ var FormDrawer = ({
   setOpen,
   title,
   actions,
-  children
+  children,
+  BackdropProps,
+  sx,
+  ...props
 }) => {
   const theme = (0, import_material14.useTheme)();
   const mdMatches = (0, import_material14.useMediaQuery)(theme.breakpoints.down("md"));
+  const close = () => setOpen(false);
+  const defaultBackdropSx2 = {
+    backgroundColor: (t) => (0, import_styles14.alpha)(t.palette.common.black, t.palette.mode === "dark" ? 0.52 : 0.28),
+    backdropFilter: "saturate(150%) blur(10px)",
+    WebkitBackdropFilter: "saturate(150%) blur(10px)"
+  };
+  const bp = BackdropProps != null ? BackdropProps : {};
+  const mergedBackdrop = {
+    ...bp,
+    sx: Array.isArray(bp.sx) ? [defaultBackdropSx2, ...bp.sx] : [defaultBackdropSx2, bp.sx].filter(Boolean)
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     import_material14.Drawer,
     {
+      ...props,
       anchor: mdMatches ? "bottom" : "right",
       open,
-      onClose: () => setOpen(false),
-      sx: {
-        "& .MuiDrawer-paper": {
-          width: mdMatches ? "100%" : "72%",
-          height: "100%",
-          display: "flex",
-          flexDirection: "column",
-          borderRadius: mdMatches ? 0 : "24px 0 0 24px"
-        }
-      },
+      onClose: close,
+      BackdropProps: mergedBackdrop,
+      sx: [
+        {
+          "& .MuiDrawer-paper": {
+            width: mdMatches ? "100%" : "78%",
+            maxWidth: "100%",
+            height: mdMatches ? "100%" : "100%",
+            maxHeight: mdMatches ? "100%" : "100%",
+            display: "flex",
+            flexDirection: "column",
+            borderRadius: mdMatches ? 0 : "24px 0 0 24px",
+            overflow: "hidden",
+            bgcolor: "background.paper"
+          }
+        },
+        ...Array.isArray(sx) ? sx : sx ? [sx] : []
+      ],
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           import_material14.Box,
           {
-            p: 3,
-            borderBottom: `1px solid ${(0, import_styles15.alpha)(theme.palette.divider, 0.36)}`,
+            sx: {
+              position: "relative",
+              flexShrink: 0,
+              p: 3,
+              borderBottom: (t) => `1px solid ${(0, import_styles14.alpha)(t.palette.divider, 0.36)}`,
+              bgcolor: "background.paper"
+            },
             children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_material14.Grid, { container: true, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material14.Grid, { item: true, children: title && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material14.Typography, { variant: "h6", fontWeight: "bold", children: title }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material14.Grid, { item: true, children: title ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material14.Typography, { variant: "h6", fontWeight: "bold", component: "div", children: title }) : null }),
               /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material14.Grid, { item: true, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                 import_material14.IconButton,
                 {
                   size: "medium",
-                  onClick: () => setOpen(false),
+                  onClick: close,
                   sx: {
                     position: "absolute",
                     top: 8,
                     right: 8,
                     zIndex: 2,
-                    backgroundColor: (0, import_styles15.alpha)(theme.palette.background.paper, 0.46)
+                    bgcolor: "background.paper",
+                    boxShadow: 1
                   },
+                  "aria-label": "Close",
                   children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_icons_material7.Close, { fontSize: "inherit" })
                 }
               ) })
             ] })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material14.Box, { flex: 1, overflow: "auto", p: 3, children }),
-        actions && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          import_material14.Box,
+          {
+            sx: {
+              flex: 1,
+              minHeight: 0,
+              overflow: "auto",
+              p: 3,
+              bgcolor: "background.paper"
+            },
+            children
+          }
+        ),
+        actions != null ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           import_material14.Box,
           {
-            p: 2,
-            borderTop: `1px solid ${(0, import_styles15.alpha)(theme.palette.divider, 0.36)}`,
             sx: {
-              position: "sticky",
-              bottom: 0,
-              zIndex: 1,
-              backgroundColor: (0, import_styles15.alpha)(theme.palette.background.paper, 0.38),
-              backdropFilter: "blur(10px)"
+              flexShrink: 0,
+              p: 2,
+              borderTop: (t) => `1px solid ${(0, import_styles14.alpha)(t.palette.divider, 0.36)}`,
+              bgcolor: "background.paper"
             },
             children: actions
           }
-        )
+        ) : null
       ]
     }
   );
@@ -1629,7 +1713,7 @@ var FormDrawer_default = FormDrawer;
 var import_react7 = require("react");
 var import_material15 = require("@mui/material");
 var import_Autocomplete = require("@mui/material/Autocomplete");
-var import_styles16 = require("@mui/material/styles");
+var import_styles15 = require("@mui/material/styles");
 var import_common_library3 = require("@verma-consulting/common-library");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var import_react8 = require("react");
@@ -1671,9 +1755,7 @@ function parsePhoneValue(raw, countries, defaultCountry) {
   }
   const digitsOnly = mainPart.replace(/\D/g, "");
   if (!digitsOnly) return { dial: "", local: "", extension: ext };
-  const sorted = [...countries].sort(
-    (a, b) => b.phone.length - a.phone.length
-  );
+  const sorted = [...countries].sort((a, b) => b.phone.length - a.phone.length);
   if (mainPart.trim().startsWith("+")) {
     const found2 = sorted.find((c) => digitsOnly.startsWith(c.phone));
     if (found2) {
@@ -1759,7 +1841,10 @@ var PhoneNumberField = ({
   size = "small",
   disabled = false,
   autoFocus = false,
-  onBlur
+  onBlur,
+  error = false,
+  helperText,
+  onKeyDown
 }) => {
   var _a2, _b;
   const theme = (0, import_material15.useTheme)();
@@ -1768,7 +1853,7 @@ var PhoneNumberField = ({
   const glassInputSx = {
     backdropFilter: "blur(10px) saturate(150%)",
     "& .MuiOutlinedInput-notchedOutline": {
-      borderColor: (0, import_styles16.alpha)(
+      borderColor: (0, import_styles15.alpha)(
         "#FFFFFF",
         theme.palette.mode === "dark" ? 0.16 : 0.58
       )
@@ -1831,9 +1916,7 @@ var PhoneNumberField = ({
     }
     setLocalNumber(mainDigits);
     setExtension(extDigits);
-    setBareExtensionX(
-      /[xX]/.test(raw) && extDigits.length === 0
-    );
+    setBareExtensionX(/[xX]/.test(raw) && extDigits.length === 0);
   };
   const dialForDisplay = (_b = (_a2 = countries.find((c) => c.code === country)) == null ? void 0 : _a2.phone) != null ? _b : "";
   const displayLocal = formatLineDisplay(dialForDisplay, localNumber, extension) + (bareExtensionX ? localNumber ? " x" : "x" : "");
@@ -1900,9 +1983,9 @@ var PhoneNumberField = ({
                 },
                 onClose: () => setSelectOpen(false),
                 sx: {
-                  width: smMatches ? 64 : 108,
-                  minWidth: smMatches ? 64 : 108,
-                  maxWidth: smMatches ? 64 : 108,
+                  width: smMatches ? 56 : 96,
+                  minWidth: smMatches ? 56 : 96,
+                  maxWidth: smMatches ? 56 : 96,
                   flexShrink: 0,
                   "& .MuiOutlinedInput-root": {
                     borderTopRightRadius: 0,
@@ -1948,6 +2031,9 @@ var PhoneNumberField = ({
                 value: displayLocal,
                 onChange: handleLocalChange,
                 placeholder: "415-555-0100 x123",
+                error,
+                helperText,
+                onKeyDown,
                 inputProps: {
                   inputMode: "text",
                   autoComplete: "tel-national",
@@ -1977,12 +2063,12 @@ var PhoneNumberField_default = PhoneNumberField;
 // src/CountrySelect.tsx
 var import_react9 = require("react");
 var import_material16 = require("@mui/material");
-var import_styles17 = require("@mui/material/styles");
-var import_styles18 = require("@mui/styles");
+var import_styles16 = require("@mui/material/styles");
+var import_styles17 = require("@mui/styles");
 var import_common_library4 = require("@verma-consulting/common-library");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var import_react10 = require("react");
-var useStyles3 = (0, import_styles18.makeStyles)((theme) => ({
+var useStyles3 = (0, import_styles17.makeStyles)((theme) => ({
   defaultMode: {
     margin: "4px",
     paddingTop: 14,
@@ -1991,7 +2077,7 @@ var useStyles3 = (0, import_styles18.makeStyles)((theme) => ({
     paddingRight: 8,
     cursor: "pointer",
     borderRadius: 8,
-    border: `1px solid ${(0, import_styles17.alpha)("#FFFFFF", theme.palette.mode === "dark" ? 0.16 : 0.55)}`,
+    border: `1px solid ${(0, import_styles16.alpha)("#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": {
@@ -2016,7 +2102,7 @@ var CountrySelect = ({
   disabled = false,
   style = {}
 }) => {
-  const theme = (0, import_styles17.useTheme)();
+  const theme = (0, import_styles16.useTheme)();
   const classes = useStyles3();
   const [editMode, setEditMode] = (0, import_react9.useState)(false);
   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))";
@@ -2084,17 +2170,17 @@ var CountrySelect = ({
           sx: {
             background: glassBackground,
             backdropFilter: "blur(12px) saturate(150%)",
-            border: `1px solid ${(0, import_styles17.alpha)("#FFFFFF", theme.palette.mode === "dark" ? 0.16 : 0.55)}`,
+            border: `1px solid ${(0, import_styles16.alpha)("#FFFFFF", theme.palette.mode === "dark" ? 0.16 : 0.55)}`,
             boxShadow: theme.palette.mode === "dark" ? "rgba(0, 0, 0, 0.34) 0px 10px 26px" : "rgba(15, 23, 42, 0.16) 0px 8px 24px",
             "& .MuiAutocomplete-option": {
               "&[aria-selected='true']": {
-                backgroundColor: (0, import_styles17.alpha)(
+                backgroundColor: (0, import_styles16.alpha)(
                   theme.palette.primary.main,
                   theme.palette.mode === "dark" ? 0.28 : 0.14
                 )
               },
               "&.Mui-focused": {
-                backgroundColor: (0, import_styles17.alpha)(
+                backgroundColor: (0, import_styles16.alpha)(
                   theme.palette.primary.main,
                   theme.palette.mode === "dark" ? 0.2 : 0.1
                 )
@@ -2158,7 +2244,7 @@ var CountrySelect = ({
                 WebkitTextFillColor: "currentColor"
               },
               "& .MuiOutlinedInput-notchedOutline": {
-                borderColor: (0, import_styles17.alpha)(
+                borderColor: (0, import_styles16.alpha)(
                   "#FFFFFF",
                   theme.palette.mode === "dark" ? 0.18 : 0.6
                 )