@verma-consulting/design-library 0.1.12 → 0.1.14

package/dist/index.js

@@ -32,6 +32,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   ClearableSelect: () => ClearableSelect_default,
+  EmptyState: () => EmptyState_default,
   FormDialog: () => FormDialog_default,
   FormDrawer: () => FormDrawer_default,
   FormPopover: () => FormPopover_default,
@@ -44,6 +45,7 @@ __export(index_exports, {
   PhoneNumberField: () => PhoneNumberField_default,
   Pill: () => Pill_default,
   SearchableSelect: () => SearchableSelect_default,
+  SkeletonBar: () => SkeletonBar_default,
   StatusPill: () => StatusPill_default,
   TabPanel: () => TabPanel_default,
   ThemeProvider: () => import_styles10.ThemeProvider,
@@ -203,7 +205,16 @@ var import_material2 = require("@mui/material");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var TabPanel = (props) => {
   const { children, value, index, ...other } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { role: "tabpanel", hidden: value !== index, id: `simple-tabpanel-${index}`, ...other, children: value === index && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Box, { sx: { p: 2 }, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      role: "tabpanel",
+      hidden: value !== index,
+      id: `simple-tabpanel-${index}`,
+      ...other,
+      children: value === index && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Box, { sx: { p: 1 }, children })
+    }
+  );
 };
 var TabPanel_default = TabPanel;
 
@@ -343,21 +354,37 @@ var BootstrapDialog = (0, import_styles2.styled)(import_material4.Dialog)(({ the
 }));
 var BootstrapDialogTitle = (props) => {
   const { children, onClose, ...other } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_material4.DialogTitle, { sx: { m: 2, p: 2 }, ...other, children: [
-    children,
-    onClose ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      import_material4.IconButton,
-      {
-        onClick: onClose,
-        sx: {
-          position: "absolute",
-          right: 8,
-          top: 8
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons_material2.Close, { color: "primary" })
-      }
-    ) : null
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    import_material4.DialogTitle,
+    {
+      sx: {
+        px: 3,
+        py: 3,
+        pt: 3.5,
+        pb: 2.5,
+        fontSize: "1.25rem",
+        fontWeight: 600,
+        letterSpacing: "0.02em",
+        lineHeight: 1.35
+      },
+      ...other,
+      children: [
+        children,
+        onClose ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          import_material4.IconButton,
+          {
+            onClick: onClose,
+            sx: {
+              position: "absolute",
+              right: 16,
+              top: 16
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons_material2.Close, { color: "primary" })
+          }
+        ) : null
+      ]
+    }
+  );
 };
 var FormDialog = ({ open = false, setOpen, title = "", actions, children, maxWidth = "lg", ...props }) => {
   const theme = (0, import_material4.useTheme)();
@@ -619,10 +646,121 @@ var Loader = ({ size = 48, color = "primary" }) => {
 };
 var Loader_default = Loader;
 
-// src/Pill.tsx
+// src/SkeletonBar.tsx
 var import_material9 = require("@mui/material");
-var import_styles7 = require("@mui/styles");
 var import_jsx_runtime9 = require("react/jsx-runtime");
+var SHIMMER_KEYFRAMES = {
+  "@keyframes skeletonShimmer": {
+    "0%": { backgroundPosition: "200% 0" },
+    "100%": { backgroundPosition: "-200% 0" }
+  }
+};
+var SkeletonBar = ({
+  width = "100%",
+  height = 24,
+  sx = {}
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const theme = (0, import_material9.useTheme)();
+  const base = theme.palette.mode === "dark" ? (_b = (_a = theme.palette.grey) == null ? void 0 : _a[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__ */ (0, import_jsx_runtime9.jsx)(
+    import_material9.Box,
+    {
+      sx: {
+        ...SHIMMER_KEYFRAMES,
+        borderRadius: 2,
+        height,
+        width,
+        maxWidth: "100%",
+        overflow: "hidden",
+        background: `linear-gradient(90deg, ${base} 0%, ${highlight} 20%, ${base} 40%, ${base} 100%)`,
+        backgroundSize: "200% 100%",
+        animation: "skeletonShimmer 1.4s ease-in-out infinite",
+        ...sx
+      }
+    }
+  );
+};
+var SkeletonBar_default = SkeletonBar;
+
+// src/EmptyState.tsx
+var import_react4 = __toESM(require("react"));
+var import_material10 = require("@mui/material");
+var import_icons_material5 = require("@mui/icons-material");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var EmptyState = ({ label, m = 8, icon }) => {
+  var _a, _b, _c, _d;
+  const theme = (0, import_material10.useTheme)();
+  const text = label != null ? label : "No data here";
+  const iconColor = theme.palette.mode === "dark" ? (_b = (_a = theme.palette.grey) == null ? void 0 : _a[600]) != null ? _b : "rgba(255,255,255,0.25)" : (_d = (_c = theme.palette.grey) == null ? void 0 : _c[300]) != null ? _d : "rgba(0,0,0,0.18)";
+  const iconEl = icon != null && import_react4.default.isValidElement(icon) ? icon : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    import_icons_material5.StorageOutlined,
+    {
+      sx: {
+        fontSize: 72,
+        color: iconColor,
+        display: "block"
+      }
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    import_material10.Box,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        minHeight: 140,
+        m,
+        position: "relative"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          import_material10.Box,
+          {
+            sx: {
+              position: "absolute",
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)",
+              pointerEvents: "none",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: iconEl
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          import_material10.Typography,
+          {
+            variant: "subtitle1",
+            align: "center",
+            sx: {
+              position: "relative",
+              zIndex: 1,
+              fontWeight: 600,
+              fontSize: "1rem",
+              letterSpacing: "0.01em",
+              color: "text.secondary",
+              maxWidth: 360,
+              lineHeight: 1.5
+            },
+            children: text
+          }
+        )
+      ]
+    }
+  );
+};
+var EmptyState_default = EmptyState;
+
+// src/Pill.tsx
+var import_material11 = require("@mui/material");
+var import_styles7 = require("@mui/styles");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var useStyles3 = (0, import_styles7.makeStyles)((theme) => ({
   button: {
     padding: "4px 8px 4px 8px",
@@ -646,10 +784,10 @@ var Pill = ({
   label = "",
   disabled = false
 }) => {
-  const theme = (0, import_material9.useTheme)();
+  const theme = (0, import_material11.useTheme)();
   const classes = useStyles3();
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    import_material9.Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    import_material11.Button,
     {
       variant: isSelected ? "contained" : "outlined",
       color: color || "primary",
@@ -659,9 +797,9 @@ var Pill = ({
         textTransform: "none"
       },
       onClick,
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", alignItems: "center" }, children: [
-        leftIcon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          import_material9.Icon,
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { display: "flex", alignItems: "center" }, children: [
+        leftIcon && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          import_material11.Icon,
           {
             className: leftIcon,
             fontSize: 14,
@@ -670,9 +808,9 @@ var Pill = ({
             "data-testid": "pill-left-icon"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material9.Typography, { variant: "subtitle", color: "inherit", fontWeight: "bold", children: label }),
-        rightIcon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          import_material9.Icon,
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material11.Typography, { variant: "subtitle", color: "inherit", fontWeight: "bold", children: label }),
+        rightIcon && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          import_material11.Icon,
           {
             className: rightIcon,
             fontSize: 14,
@@ -690,8 +828,8 @@ var Pill_default = Pill;
 // src/IOSSwitch.tsx
 var import_styles8 = require("@mui/material/styles");
 var import_Switch = __toESM(require("@mui/material/Switch"));
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var IOSSwitch = (0, import_styles8.styled)((props) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_Switch.default, { focusVisibleClassName: ".Mui-focusVisible", disableRipple: true, ...props }))(({ theme }) => ({
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var IOSSwitch = (0, import_styles8.styled)((props) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_Switch.default, { focusVisibleClassName: ".Mui-focusVisible", disableRipple: true, ...props }))(({ theme }) => ({
   width: 46,
   height: 30,
   padding: 0,
@@ -739,17 +877,17 @@ var IOSSwitch = (0, import_styles8.styled)((props) => /* @__PURE__ */ (0, import
 var IOSSwitch_default = IOSSwitch;
 
 // src/StatusPill.tsx
-var import_material10 = require("@mui/material");
+var import_material12 = require("@mui/material");
 var import_common_library3 = require("@verma-consulting/common-library");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var statusColorMap = {
   [import_common_library3.userStatus.Pending]: "warning",
   [import_common_library3.userStatus.Active]: "success",
   [import_common_library3.userStatus.Inactive]: "error",
   [import_common_library3.userStatus.Invited]: "info"
 };
-var StatusPill = ({ status }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-  import_material10.Chip,
+var StatusPill = ({ status }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  import_material12.Chip,
   {
     label: status,
     color: statusColorMap[status],
@@ -760,12 +898,12 @@ var StatusPill = ({ status }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
 var StatusPill_default = StatusPill;
 
 // src/FormPopover.tsx
-var import_react4 = require("react");
-var import_material11 = require("@mui/material");
-var import_icons_material5 = require("@mui/icons-material");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_react5 = require("react");
+var import_material13 = require("@mui/material");
+var import_icons_material6 = require("@mui/icons-material");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var FormPopover = ({ row, children, title }) => {
-  const [anchorEl, setAnchorEl] = (0, import_react4.useState)(null);
+  const [anchorEl, setAnchorEl] = (0, import_react5.useState)(null);
   const handleClick = (event) => {
     setAnchorEl(event.currentTarget);
   };
@@ -773,9 +911,9 @@ var FormPopover = ({ row, children, title }) => {
     setAnchorEl(null);
   };
   const open = Boolean(anchorEl);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_material11.Tooltip, { title, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      import_material11.IconButton,
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Tooltip, { title, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      import_material13.IconButton,
       {
         onClick: handleClick,
         size: "small",
@@ -789,11 +927,11 @@ var FormPopover = ({ row, children, title }) => {
             backgroundColor: "#f0f0f0"
           }
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons_material5.MoreHoriz, { fontSize: "inherit", color: "primary" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_icons_material6.MoreHoriz, { fontSize: "inherit", color: "primary" })
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      import_material11.Popover,
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      import_material13.Popover,
       {
         open,
         anchorEl,
@@ -810,11 +948,11 @@ var FormPopover = ({ row, children, title }) => {
 var FormPopover_default = FormPopover;
 
 // src/SearchableSelect.tsx
-var import_react5 = __toESM(require("react"));
-var import_material12 = require("@mui/material");
-var import_icons_material6 = require("@mui/icons-material");
+var import_react6 = __toESM(require("react"));
+var import_material14 = require("@mui/material");
+var import_icons_material7 = require("@mui/icons-material");
 var import_styles9 = require("@mui/styles");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var useStyles4 = (0, import_styles9.makeStyles)(() => ({
   defaultMode: {
     padding: "14px 8px",
@@ -833,7 +971,7 @@ var useStyles4 = (0, import_styles9.makeStyles)(() => ({
     whiteSpace: "pre-wrap"
   }
 }));
-var SearchableSelect = import_react5.default.memo(
+var SearchableSelect = import_react6.default.memo(
   ({
     name,
     label,
@@ -848,11 +986,11 @@ var SearchableSelect = import_react5.default.memo(
     multiple = false
   }) => {
     const classes = useStyles4();
-    const wrapperRef = (0, import_react5.useRef)(null);
-    const inputRef = (0, import_react5.useRef)(null);
-    const [editMode, setEditMode] = (0, import_react5.useState)(defaultEditMode);
-    const [open, setOpen] = (0, import_react5.useState)(defaultEditMode);
-    (0, import_react5.useEffect)(() => {
+    const wrapperRef = (0, import_react6.useRef)(null);
+    const inputRef = (0, import_react6.useRef)(null);
+    const [editMode, setEditMode] = (0, import_react6.useState)(defaultEditMode);
+    const [open, setOpen] = (0, import_react6.useState)(defaultEditMode);
+    (0, import_react6.useEffect)(() => {
       function handleClickOutside(event) {
         if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
           setEditMode(false);
@@ -866,7 +1004,7 @@ var SearchableSelect = import_react5.default.memo(
         document.removeEventListener("mousedown", handleClickOutside);
       };
     }, [editMode]);
-    (0, import_react5.useEffect)(() => {
+    (0, import_react6.useEffect)(() => {
       if (editMode && open && inputRef.current) {
         inputRef.current.focus();
       }
@@ -881,7 +1019,7 @@ var SearchableSelect = import_react5.default.memo(
       setEditMode(false);
       setOpen(false);
     };
-    const selected = (0, import_react5.useMemo)(() => {
+    const selected = (0, import_react6.useMemo)(() => {
       var _a;
       if (multiple) {
         if (!value.trim()) return [];
@@ -891,7 +1029,7 @@ var SearchableSelect = import_react5.default.memo(
         return (_a = options.find((opt) => opt.value === value)) != null ? _a : null;
       }
     }, [value, options, multiple]);
-    const displayValue = (0, import_react5.useMemo)(() => {
+    const displayValue = (0, import_react6.useMemo)(() => {
       var _a;
       if (multiple) {
         if (!Array.isArray(selected)) return "";
@@ -901,8 +1039,8 @@ var SearchableSelect = import_react5.default.memo(
       }
     }, [selected, multiple]);
     const isValueEmpty = !value.trim();
-    return editMode ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material12.FormControl, { fullWidth: true, style, disabled, size, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      import_material12.Autocomplete,
+    return editMode ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material14.FormControl, { fullWidth: true, style, disabled, size, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      import_material14.Autocomplete,
       {
         multiple,
         disableCloseOnSelect: multiple,
@@ -931,8 +1069,8 @@ var SearchableSelect = import_react5.default.memo(
         autoHighlight: true,
         getOptionLabel: (option) => option.label,
         isOptionEqualToValue: (option, val) => option.value === val.value,
-        renderInput: (params) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          import_material12.TextField,
+        renderInput: (params) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          import_material14.TextField,
           {
             ...params,
             label,
@@ -941,8 +1079,8 @@ var SearchableSelect = import_react5.default.memo(
             inputRef,
             InputProps: {
               ...params.InputProps,
-              endAdornment: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: !isValueEmpty && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                import_material12.IconButton,
+              endAdornment: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: !isValueEmpty && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                import_material14.IconButton,
                 {
                   "aria-label": `clear ${name}`,
                   onClick: handleClear,
@@ -951,7 +1089,7 @@ var SearchableSelect = import_react5.default.memo(
                     backgroundColor: "transparent",
                     boxShadow: "none"
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons_material6.Clear, { fontSize: "inherit" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons_material7.Clear, { fontSize: "inherit" })
                 }
               ) })
             }
@@ -962,7 +1100,7 @@ var SearchableSelect = import_react5.default.memo(
           setOpen(false);
         }
       }
-    ) }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    ) }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "div",
       {
         ref: wrapperRef,
@@ -975,8 +1113,8 @@ var SearchableSelect = import_react5.default.memo(
         className: classes.defaultMode,
         style,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material12.FormLabel, { className: classes.formLabel, children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material12.Typography, { className: classes.formValue, children: displayValue })
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material14.FormLabel, { className: classes.formLabel, children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material14.Typography, { className: classes.formValue, children: displayValue })
         ]
       }
     );
@@ -985,9 +1123,9 @@ var SearchableSelect = import_react5.default.memo(
 var SearchableSelect_default = SearchableSelect;
 
 // src/FormDrawer.tsx
-var import_material13 = require("@mui/material");
-var import_icons_material7 = require("@mui/icons-material");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_material15 = require("@mui/material");
+var import_icons_material8 = require("@mui/icons-material");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var FormDrawer = ({
   open,
   setOpen,
@@ -995,10 +1133,10 @@ var FormDrawer = ({
   actions,
   children
 }) => {
-  const theme = (0, import_material13.useTheme)();
-  const mdMatches = (0, import_material13.useMediaQuery)(theme.breakpoints.down("md"));
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-    import_material13.Drawer,
+  const theme = (0, import_material15.useTheme)();
+  const mdMatches = (0, import_material15.useMediaQuery)(theme.breakpoints.down("md"));
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    import_material15.Drawer,
     {
       anchor: mdMatches ? "bottom" : "right",
       open,
@@ -1013,10 +1151,10 @@ var FormDrawer = ({
         }
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Box, { p: 3, borderBottom: "1px solid #eee", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material13.Grid, { container: true, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Grid, { item: true, children: title && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Typography, { variant: "h6", fontWeight: "bold", children: title }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Grid, { item: true, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-            import_material13.IconButton,
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material15.Box, { p: 3, borderBottom: "1px solid #eee", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_material15.Grid, { container: true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material15.Grid, { item: true, children: title && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material15.Typography, { variant: "h6", fontWeight: "bold", children: title }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material15.Grid, { item: true, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            import_material15.IconButton,
             {
               size: "medium",
               onClick: () => setOpen(false),
@@ -1026,13 +1164,13 @@ var FormDrawer = ({
                 right: 8,
                 zIndex: 2
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_icons_material7.Close, { fontSize: "inherit" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_icons_material8.Close, { fontSize: "inherit" })
             }
           ) })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Box, { flex: 1, overflow: "auto", p: 3, children }),
-        actions && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          import_material13.Box,
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material15.Box, { flex: 1, overflow: "auto", p: 3, children }),
+        actions && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          import_material15.Box,
           {
             p: 2,
             borderTop: "1px solid #eee",
@@ -1051,10 +1189,10 @@ var FormDrawer = ({
 var FormDrawer_default = FormDrawer;
 
 // src/PhoneNumberField.tsx
-var import_react6 = require("react");
-var import_material14 = require("@mui/material");
+var import_react7 = require("react");
+var import_material16 = require("@mui/material");
 var import_common_library4 = require("@verma-consulting/common-library");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var PhoneNumberField = ({
   value = "",
   onChange,
@@ -1065,16 +1203,16 @@ var PhoneNumberField = ({
   autoFocus = false,
   onBlur
 }) => {
-  const theme = (0, import_material14.useTheme)();
-  const smMatches = (0, import_material14.useMediaQuery)(theme.breakpoints.down("sm"));
+  const theme = (0, import_material16.useTheme)();
+  const smMatches = (0, import_material16.useMediaQuery)(theme.breakpoints.down("sm"));
   const countries = import_common_library4.constants.COUNTRIES || [];
-  const [country, setCountry] = (0, import_react6.useState)(defaultCountry);
-  const [localNumber, setLocalNumber] = (0, import_react6.useState)("");
-  const [isFocused, setIsFocused] = (0, import_react6.useState)(false);
-  const [selectOpen, setSelectOpen] = (0, import_react6.useState)(false);
-  const [ignoreNextOutsideClick, setIgnoreNextOutsideClick] = (0, import_react6.useState)(false);
-  const wrapperRef = (0, import_react6.useRef)(null);
-  const parseE164 = (0, import_react6.useCallback)(
+  const [country, setCountry] = (0, import_react7.useState)(defaultCountry);
+  const [localNumber, setLocalNumber] = (0, import_react7.useState)("");
+  const [isFocused, setIsFocused] = (0, import_react7.useState)(false);
+  const [selectOpen, setSelectOpen] = (0, import_react7.useState)(false);
+  const [ignoreNextOutsideClick, setIgnoreNextOutsideClick] = (0, import_react7.useState)(false);
+  const wrapperRef = (0, import_react7.useRef)(null);
+  const parseE164 = (0, import_react7.useCallback)(
     (val) => {
       const cleaned = (val || "").toString().replace(/\D/g, "");
       if (!cleaned) return { dial: "", local: "" };
@@ -1091,7 +1229,7 @@ var PhoneNumberField = ({
     },
     [countries]
   );
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (isFocused) return;
     if (!value) {
       setLocalNumber("");
@@ -1112,7 +1250,7 @@ var PhoneNumberField = ({
     if (cleaned.length > 6) formatted += "-" + cleaned.slice(6, 10);
     return formatted;
   };
-  const commitValue = (0, import_react6.useCallback)(() => {
+  const commitValue = (0, import_react7.useCallback)(() => {
     var _a;
     const sel = countries.find((c) => c.code === country);
     const dial = (_a = sel == null ? void 0 : sel.phone) != null ? _a : "";
@@ -1129,7 +1267,7 @@ var PhoneNumberField = ({
   const handleCountryChange = (e) => {
     setCountry(e.target.value);
   };
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     const onDocMouseDown = (ev) => {
       if (!wrapperRef.current) return;
       if (wrapperRef.current.contains(ev.target)) return;
@@ -1156,23 +1294,23 @@ var PhoneNumberField = ({
       onBlur == null ? void 0 : onBlur();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-    import_material14.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    import_material16.Box,
     {
       ref: wrapperRef,
       onFocusCapture: () => setIsFocused(true),
       onBlurCapture: handleWrapperBlur,
       sx: { display: "flex", alignItems: "center", width: "100%" },
-      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-        import_material14.Stack,
+      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+        import_material16.Stack,
         {
           direction: "row",
           spacing: 0,
           alignItems: "center",
           sx: { width: "100%" },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-              import_material14.TextField,
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              import_material16.TextField,
               {
                 select: true,
                 value: country,
@@ -1198,7 +1336,7 @@ var PhoneNumberField = ({
                   },
                   onClose: () => setSelectOpen(false)
                 },
-                children: countries.map((option) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_material14.MenuItem, { value: option.code, children: [
+                children: countries.map((option) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_material16.MenuItem, { value: option.code, children: [
                   option.code,
                   " (+",
                   option.phone,
@@ -1206,8 +1344,8 @@ var PhoneNumberField = ({
                 ] }, option.code))
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-              import_material14.TextField,
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              import_material16.TextField,
               {
                 label,
                 value: localNumber ? formatLocalNumber(localNumber) : "",
@@ -1240,6 +1378,7 @@ var PhoneNumberField_default = PhoneNumberField;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ClearableSelect,
+  EmptyState,
   FormDialog,
   FormDrawer,
   FormPopover,
@@ -1252,6 +1391,7 @@ var PhoneNumberField_default = PhoneNumberField;
   PhoneNumberField,
   Pill,
   SearchableSelect,
+  SkeletonBar,
   StatusPill,
   TabPanel,
   ThemeProvider,