@verma-consulting/design-library 0.1.26 → 0.1.27

package/dist/index.mjs

@@ -171,6 +171,183 @@ var TabPanel = (props) => {
 };
 var TabPanel_default = TabPanel;
 
+// src/TablePagination.tsx
+import * as React2 from "react";
+import MuiTablePagination from "@mui/material/TablePagination";
+import tablePaginationClasses from "@mui/material/TablePagination/tablePaginationClasses";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function mergeSx(...parts) {
+  const flat = [];
+  for (const p of parts) {
+    if (p == null) continue;
+    if (Array.isArray(p)) {
+      for (const x of p) {
+        if (x != null) flat.push(x);
+      }
+    } else {
+      flat.push(p);
+    }
+  }
+  return flat;
+}
+var DEFAULT_ROWS_PER_PAGE_LABEL = "Per page";
+function defaultDisplayedRangeLabel({
+  from,
+  to,
+  count
+}) {
+  if (count === 0) {
+    return "No results";
+  }
+  if (count === -1) {
+    return `${from}\u2013${to}+`;
+  }
+  if (from > to) {
+    return `0 of ${count} results`;
+  }
+  return `${from}\u2013${to} of ${count} results`;
+}
+function defaultGetItemAriaLabel(type) {
+  const labels = {
+    first: "First page",
+    previous: "Previous page",
+    next: "Next page",
+    last: "Last page"
+  };
+  return labels[type];
+}
+var rootSx = {
+  width: "100%",
+  boxSizing: "border-box",
+  verticalAlign: "middle",
+  bgcolor: "transparent",
+  py: 0.75,
+  px: { xs: 1, sm: 1.5 },
+  [`& .${tablePaginationClasses.toolbar}`]: {
+    width: "100%",
+    minHeight: 48,
+    justifyContent: "flex-end",
+    alignItems: "center",
+    flexWrap: "nowrap",
+    gap: { xs: 0.75, sm: 1.25 },
+    py: 0,
+    pr: 0,
+    pl: 0,
+    maxWidth: "100%",
+    overflowX: "auto"
+  },
+  [`& .${tablePaginationClasses.spacer}`]: {
+    flex: "1 1 auto",
+    minWidth: 0
+  },
+  [`& .${tablePaginationClasses.selectLabel}`]: {
+    typography: "body2",
+    fontWeight: 500,
+    textTransform: "none",
+    color: "text.secondary",
+    m: 0,
+    whiteSpace: "nowrap"
+  },
+  [`& .${tablePaginationClasses.displayedRows}`]: {
+    typography: "body2",
+    color: "text.secondary",
+    fontVariantNumeric: "tabular-nums",
+    m: 0,
+    whiteSpace: "nowrap"
+  },
+  [`& .${tablePaginationClasses.input}`]: {
+    marginLeft: 0,
+    marginRight: 0
+  },
+  [`& .${tablePaginationClasses.actions}`]: {
+    marginLeft: 0,
+    gap: 0,
+    display: "flex",
+    alignItems: "center",
+    [`& .MuiIconButton-root`]: {
+      borderRadius: 1.5,
+      color: "text.secondary",
+      padding: 0.5,
+      "&:hover": {
+        bgcolor: "action.hover",
+        color: "text.primary"
+      },
+      "&.Mui-disabled": {
+        opacity: 0.36
+      }
+    }
+  }
+};
+var TablePagination = React2.forwardRef(function TablePagination2(props, ref) {
+  var _a, _b;
+  const {
+    sx,
+    slotProps,
+    SelectProps,
+    showFirstButton = true,
+    showLastButton = true,
+    labelDisplayedRows: labelDisplayedRowsProp,
+    labelRowsPerPage: labelRowsPerPageProp,
+    getItemAriaLabel,
+    rowsPerPageLabel,
+    displayedRangeLabel,
+    ...other
+  } = props;
+  const labelRowsPerPageResolved = (_a = labelRowsPerPageProp != null ? labelRowsPerPageProp : rowsPerPageLabel) != null ? _a : DEFAULT_ROWS_PER_PAGE_LABEL;
+  const labelDisplayedRowsResolved = (_b = labelDisplayedRowsProp != null ? labelDisplayedRowsProp : displayedRangeLabel) != null ? _b : defaultDisplayedRangeLabel;
+  const slotSelect = slotProps == null ? void 0 : slotProps.select;
+  const { sx: slotSelectSx, ...slotSelectRest } = slotSelect != null ? slotSelect : {};
+  const { sx: legacySelectSx, ...legacySelectRest } = SelectProps != null ? SelectProps : {};
+  const mergedSelect = {
+    variant: "outlined",
+    size: "small",
+    ...legacySelectRest,
+    ...slotSelectRest,
+    sx: mergeSx(
+      (theme) => ({
+        borderRadius: 1.5,
+        minWidth: 64,
+        fontSize: theme.typography.body2.fontSize,
+        "& .MuiOutlinedInput-notchedOutline": {
+          borderColor: "divider"
+        },
+        "&:hover .MuiOutlinedInput-notchedOutline": {
+          borderColor: "text.disabled"
+        },
+        "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+          borderColor: "primary.main"
+        },
+        "& .MuiSelect-select": {
+          py: 0.625,
+          minHeight: "unset",
+          display: "flex",
+          alignItems: "center"
+        }
+      }),
+      legacySelectSx,
+      slotSelectSx
+    )
+  };
+  return /* @__PURE__ */ jsx3(
+    MuiTablePagination,
+    {
+      ref,
+      showFirstButton,
+      showLastButton,
+      labelRowsPerPage: labelRowsPerPageResolved,
+      labelDisplayedRows: labelDisplayedRowsResolved,
+      getItemAriaLabel: getItemAriaLabel != null ? getItemAriaLabel : defaultGetItemAriaLabel,
+      slotProps: {
+        ...slotProps,
+        select: mergedSelect
+      },
+      sx: mergeSx(rootSx, sx),
+      ...other
+    }
+  );
+});
+var TablePagination_default = TablePagination;
+
 // src/index.tsx
 import {
   useTheme as useTheme9,
@@ -191,7 +368,7 @@ import {
   useTheme,
   useMediaQuery
 } from "@mui/material";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var Logo = memo(
   ({
     loggedIn = false,
@@ -219,7 +396,7 @@ var Logo = memo(
           sx: { cursor: "pointer" },
           onClick: handleClick,
           children: [
-            (logoUrl || defaultLogo) && /* @__PURE__ */ jsx3(Grid, { item: true, children: logoUrl ? /* @__PURE__ */ jsx3(
+            (logoUrl || defaultLogo) && /* @__PURE__ */ jsx4(Grid, { item: true, children: logoUrl ? /* @__PURE__ */ jsx4(
               Avatar,
               {
                 alt: companyName || "avatar",
@@ -236,7 +413,7 @@ var Logo = memo(
                 children: (companyName == null ? void 0 : companyName.charAt(0)) || "?"
               }
             ) : defaultLogo }),
-            /* @__PURE__ */ jsx3(Grid, { item: true, sx: { maxWidth, textAlign: "center" }, children: loggedIn ? /* @__PURE__ */ jsx3(Tooltip, { title: companyName, placement: "top", arrow: true, children: /* @__PURE__ */ jsx3(
+            /* @__PURE__ */ jsx4(Grid, { item: true, sx: { maxWidth, textAlign: "center" }, children: loggedIn ? /* @__PURE__ */ jsx4(Tooltip, { title: companyName, placement: "top", arrow: true, children: /* @__PURE__ */ jsx4(
               Typography2,
               {
                 variant: "h6",
@@ -247,7 +424,7 @@ var Logo = memo(
                 },
                 children: companyName
               }
-            ) }) : /* @__PURE__ */ jsx3(Box2, { sx: { display: "flex", justifyContent: "center" }, children: companyComponent }) })
+            ) }) : /* @__PURE__ */ jsx4(Box2, { sx: { display: "flex", justifyContent: "center" }, children: companyComponent }) })
           ]
         }
       );
@@ -264,7 +441,7 @@ var Logo = memo(
         },
         onClick: handleClick,
         children: [
-          (logoUrl || defaultLogo) && /* @__PURE__ */ jsx3(Box2, { sx: { mr: 1, display: "flex", alignItems: "center" }, children: logoUrl ? /* @__PURE__ */ jsx3(
+          (logoUrl || defaultLogo) && /* @__PURE__ */ jsx4(Box2, { sx: { mr: 1, display: "flex", alignItems: "center" }, children: logoUrl ? /* @__PURE__ */ jsx4(
             Avatar,
             {
               alt: companyName || "avatar",
@@ -280,7 +457,7 @@ var Logo = memo(
               children: (companyName == null ? void 0 : companyName.charAt(0)) || "?"
             }
           ) : defaultLogo }),
-          /* @__PURE__ */ jsx3(Box2, { sx: { maxWidth, flexShrink: 1, minWidth: 0 }, children: loggedIn ? /* @__PURE__ */ jsx3(Tooltip, { title: companyName, placement: "top", arrow: true, children: /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsx4(Box2, { sx: { maxWidth, flexShrink: 1, minWidth: 0 }, children: loggedIn ? /* @__PURE__ */ jsx4(Tooltip, { title: companyName, placement: "top", arrow: true, children: /* @__PURE__ */ jsx4(
             Typography2,
             {
               variant: "h6",
@@ -316,7 +493,7 @@ import {
 } from "@mui/material";
 import { useTheme as useTheme3 } from "@mui/material/styles";
 import { Close } from "@mui/icons-material";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var BootstrapDialog = styled(Dialog)(({ theme }) => ({
   "& .MuiDialogContent-root": {
     padding: theme.spacing(4)
@@ -344,7 +521,7 @@ var BootstrapDialogTitle = (props) => {
       ...other,
       children: [
         children,
-        onClose ? /* @__PURE__ */ jsx4(
+        onClose ? /* @__PURE__ */ jsx5(
           IconButton2,
           {
             onClick: onClose,
@@ -353,7 +530,7 @@ var BootstrapDialogTitle = (props) => {
               right: 16,
               top: 16
             },
-            children: /* @__PURE__ */ jsx4(Close, { color: "primary" })
+            children: /* @__PURE__ */ jsx5(Close, { color: "primary" })
           }
         ) : null
       ]
@@ -380,9 +557,9 @@ var FormDialog = ({
       maxWidth,
       fullScreen: mdMatches,
       children: [
-        /* @__PURE__ */ jsx4(BootstrapDialogTitle, { onClose: () => setOpen(false), children: title }),
-        /* @__PURE__ */ jsx4(DialogContent, { dividers: true, children }),
-        /* @__PURE__ */ jsx4(DialogActions, { children: actions })
+        /* @__PURE__ */ jsx5(BootstrapDialogTitle, { onClose: () => setOpen(false), children: title }),
+        /* @__PURE__ */ jsx5(DialogContent, { dividers: true, children }),
+        /* @__PURE__ */ jsx5(DialogActions, { children: actions })
       ]
     }
   );
@@ -393,7 +570,7 @@ var FormDialog_default = FormDialog;
 import { styled as styled2 } from "@mui/material/styles";
 import { Button } from "@mui/material";
 import { CloudUpload } from "@mui/icons-material";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var VisuallyHiddenInput = styled2("input")({
   clip: "rect(0 0 0 0)",
   clipPath: "inset(50%)",
@@ -413,10 +590,10 @@ var InputFileUpload = ({ name = "", onChange = () => null, title = "" }) => /* @
     size: "small",
     variant: "contained",
     tabIndex: -1,
-    startIcon: /* @__PURE__ */ jsx5(CloudUpload, { fontSize: "inherit" }),
+    startIcon: /* @__PURE__ */ jsx6(CloudUpload, { fontSize: "inherit" }),
     children: [
       title,
-      /* @__PURE__ */ jsx5(VisuallyHiddenInput, { type: "file", name, onChange })
+      /* @__PURE__ */ jsx6(VisuallyHiddenInput, { type: "file", name, onChange })
     ]
   }
 );
@@ -427,7 +604,7 @@ import { useEffect, useRef, useState } from "react";
 import { Box as Box3, IconButton as IconButton3 } from "@mui/material";
 import { styled as styled3 } from "@mui/material/styles";
 import { CloudUpload as CloudUpload2, Close as CloseIcon } from "@mui/icons-material";
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var HiddenInput = styled3("input")({
   position: "absolute",
   width: 1,
@@ -553,10 +730,10 @@ var ImageUploadAvatar = ({
       onPointerLeave: () => setHover(false),
       onClick: triggerPick,
       children: [
-        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 })
+        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 })
       ]
     }
   );
@@ -565,7 +742,7 @@ var ImageUploadAvatar_default = ImageUploadAvatar;
 
 // src/FormSnackBar.tsx
 import { Snackbar, Alert, AlertTitle, Slide } from "@mui/material";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var FormSnackBar = ({ snackBar = {}, setSnackBar = () => null }) => {
   const getAlertStyles = () => {
     if ((snackBar == null ? void 0 : snackBar.type) === "success") {
@@ -573,7 +750,7 @@ var FormSnackBar = ({ snackBar = {}, setSnackBar = () => null }) => {
     }
     return {};
   };
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     Snackbar,
     {
       sx: { width: "100%" },
@@ -586,7 +763,7 @@ var FormSnackBar = ({ snackBar = {}, setSnackBar = () => null }) => {
         type: ""
       }),
       TransitionComponent: Slide,
-      children: /* @__PURE__ */ jsx7(
+      children: /* @__PURE__ */ jsx8(
         Alert,
         {
           sx: {
@@ -599,7 +776,7 @@ var FormSnackBar = ({ snackBar = {}, setSnackBar = () => null }) => {
           },
           variant: "filled",
           severity: snackBar == null ? void 0 : snackBar.type,
-          children: /* @__PURE__ */ jsx7(AlertTitle, { sx: { m: 0, p: 0 }, children: snackBar == null ? void 0 : snackBar.message })
+          children: /* @__PURE__ */ jsx8(AlertTitle, { sx: { m: 0, p: 0 }, children: snackBar == null ? void 0 : snackBar.message })
         }
       )
     }
@@ -610,7 +787,7 @@ var FormSnackBar_default = FormSnackBar;
 // src/Loader.tsx
 import { CircularProgress, Backdrop } from "@mui/material";
 import { makeStyles as makeStyles2 } from "@mui/styles";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var useStyles2 = makeStyles2({
   "@keyframes pulse": {
     "0%": { transform: "scale(1)", opacity: 0.9 },
@@ -623,7 +800,7 @@ var useStyles2 = makeStyles2({
 });
 var Loader = ({ size = 48, color = "primary" }) => {
   const classes = useStyles2();
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     Backdrop,
     {
       open: true,
@@ -632,7 +809,7 @@ var Loader = ({ size = 48, color = "primary" }) => {
         backgroundColor: "rgba(255, 255, 255, 0.15)",
         backdropFilter: "blur(2px)"
       },
-      children: /* @__PURE__ */ jsx8(CircularProgress, { size, color, thickness: 3.5, className: classes.progress })
+      children: /* @__PURE__ */ jsx9(CircularProgress, { size, color, thickness: 3.5, className: classes.progress })
     }
   );
 };
@@ -640,7 +817,7 @@ var Loader_default = Loader;
 
 // src/SkeletonBar.tsx
 import { Box as Box4, useTheme as useTheme4 } from "@mui/material";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var SHIMMER_KEYFRAMES = {
   "@keyframes skeletonShimmer": {
     "0%": { backgroundPosition: "200% 0" },
@@ -656,7 +833,7 @@ var SkeletonBar = ({
   const theme = useTheme4();
   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__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     Box4,
     {
       sx: {
@@ -677,16 +854,16 @@ var SkeletonBar = ({
 var SkeletonBar_default = SkeletonBar;
 
 // src/EmptyState.tsx
-import React4 from "react";
+import React5 from "react";
 import { Box as Box5, Typography as Typography3, useTheme as useTheme5 } from "@mui/material";
 import { DatasetOutlined } from "@mui/icons-material";
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 var EmptyState = ({ label, m = 8, icon }) => {
   const theme = useTheme5();
   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 && React4.isValidElement(icon) ? icon : /* @__PURE__ */ jsx10(
+  const iconEl = icon != null && React5.isValidElement(icon) ? icon : /* @__PURE__ */ jsx11(
     DatasetOutlined,
     {
       sx: {
@@ -712,7 +889,7 @@ var EmptyState = ({ label, m = 8, icon }) => {
       },
       children: [
         iconEl,
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx11(
           Typography3,
           {
             variant: "body2",
@@ -737,7 +914,7 @@ var EmptyState_default = EmptyState;
 // src/Pill.tsx
 import { Button as Button2, Typography as Typography4, Icon, useTheme as useTheme6 } from "@mui/material";
 import { makeStyles as makeStyles3 } from "@mui/styles";
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 var useStyles3 = makeStyles3((theme) => ({
   button: {
     padding: "4px 8px 4px 8px",
@@ -763,7 +940,7 @@ var Pill = ({
 }) => {
   const theme = useTheme6();
   const classes = useStyles3();
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     Button2,
     {
       variant: isSelected ? "contained" : "outlined",
@@ -775,7 +952,7 @@ var Pill = ({
       },
       onClick,
       children: /* @__PURE__ */ jsxs7("div", { style: { display: "flex", alignItems: "center" }, children: [
-        leftIcon && /* @__PURE__ */ jsx11(
+        leftIcon && /* @__PURE__ */ jsx12(
           Icon,
           {
             className: leftIcon,
@@ -785,8 +962,8 @@ var Pill = ({
             "data-testid": "pill-left-icon"
           }
         ),
-        /* @__PURE__ */ jsx11(Typography4, { variant: "subtitle", color: "inherit", fontWeight: "bold", children: label }),
-        rightIcon && /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12(Typography4, { variant: "subtitle", color: "inherit", fontWeight: "bold", children: label }),
+        rightIcon && /* @__PURE__ */ jsx12(
           Icon,
           {
             className: rightIcon,
@@ -805,8 +982,8 @@ var Pill_default = Pill;
 // src/IOSSwitch.tsx
 import { styled as styled4 } from "@mui/material/styles";
 import Switch from "@mui/material/Switch";
-import { jsx as jsx12 } from "react/jsx-runtime";
-var IOSSwitch = styled4((props) => /* @__PURE__ */ jsx12(Switch, { focusVisibleClassName: ".Mui-focusVisible", disableRipple: true, ...props }))(({ theme }) => ({
+import { jsx as jsx13 } from "react/jsx-runtime";
+var IOSSwitch = styled4((props) => /* @__PURE__ */ jsx13(Switch, { focusVisibleClassName: ".Mui-focusVisible", disableRipple: true, ...props }))(({ theme }) => ({
   width: 46,
   height: 30,
   padding: 0,
@@ -856,14 +1033,14 @@ var IOSSwitch_default = IOSSwitch;
 // src/StatusPill.tsx
 import { Chip } from "@mui/material";
 import { userStatus } from "@verma-consulting/common-library";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var statusColorMap = {
   [userStatus.Pending]: "warning",
   [userStatus.Active]: "success",
   [userStatus.Inactive]: "error",
   [userStatus.Invited]: "info"
 };
-var StatusPill = ({ status }) => /* @__PURE__ */ jsx13(
+var StatusPill = ({ status }) => /* @__PURE__ */ jsx14(
   Chip,
   {
     label: status,
@@ -878,7 +1055,7 @@ var StatusPill_default = StatusPill;
 import { useState as useState2 } from "react";
 import { Tooltip as Tooltip2, IconButton as IconButton4, Popover } from "@mui/material";
 import { MoreHoriz } from "@mui/icons-material";
-import { Fragment, jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
 var FormPopover = ({ row, children, title }) => {
   const [anchorEl, setAnchorEl] = useState2(null);
   const handleClick = (event) => {
@@ -889,7 +1066,7 @@ var FormPopover = ({ row, children, title }) => {
   };
   const open = Boolean(anchorEl);
   return /* @__PURE__ */ jsxs8(Fragment, { children: [
-    /* @__PURE__ */ jsx14(Tooltip2, { title, children: /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx15(Tooltip2, { title, children: /* @__PURE__ */ jsx15(
       IconButton4,
       {
         onClick: handleClick,
@@ -904,10 +1081,10 @@ var FormPopover = ({ row, children, title }) => {
             backgroundColor: "#f0f0f0"
           }
         },
-        children: /* @__PURE__ */ jsx14(MoreHoriz, { fontSize: "inherit", color: "primary" })
+        children: /* @__PURE__ */ jsx15(MoreHoriz, { fontSize: "inherit", color: "primary" })
       }
     ) }),
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx15(
       Popover,
       {
         open,
@@ -925,7 +1102,7 @@ var FormPopover = ({ row, children, title }) => {
 var FormPopover_default = FormPopover;
 
 // src/SearchableSelect.tsx
-import React6, { useEffect as useEffect2, useRef as useRef2, useState as useState3, useMemo } from "react";
+import React7, { useEffect as useEffect2, useRef as useRef2, useState as useState3, useMemo } from "react";
 import {
   Autocomplete,
   TextField,
@@ -936,7 +1113,7 @@ import {
 } from "@mui/material";
 import { Clear as Clear2 } from "@mui/icons-material";
 import { makeStyles as makeStyles4 } from "@mui/styles";
-import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
 var useStyles4 = makeStyles4(() => ({
   defaultMode: {
     padding: "14px 8px",
@@ -955,7 +1132,7 @@ var useStyles4 = makeStyles4(() => ({
     whiteSpace: "pre-wrap"
   }
 }));
-var SearchableSelect = React6.memo(
+var SearchableSelect = React7.memo(
   ({
     name,
     label,
@@ -1023,7 +1200,7 @@ var SearchableSelect = React6.memo(
       }
     }, [selected, multiple]);
     const isValueEmpty = !value.trim();
-    return editMode ? /* @__PURE__ */ jsx15(FormControl2, { fullWidth: true, style, disabled, size, children: /* @__PURE__ */ jsx15(
+    return editMode ? /* @__PURE__ */ jsx16(FormControl2, { fullWidth: true, style, disabled, size, children: /* @__PURE__ */ jsx16(
       Autocomplete,
       {
         multiple,
@@ -1053,7 +1230,7 @@ var SearchableSelect = React6.memo(
         autoHighlight: true,
         getOptionLabel: (option) => option.label,
         isOptionEqualToValue: (option, val) => option.value === val.value,
-        renderInput: (params) => /* @__PURE__ */ jsx15(
+        renderInput: (params) => /* @__PURE__ */ jsx16(
           TextField,
           {
             ...params,
@@ -1063,7 +1240,7 @@ var SearchableSelect = React6.memo(
             inputRef,
             InputProps: {
               ...params.InputProps,
-              endAdornment: /* @__PURE__ */ jsx15(Fragment2, { children: !isValueEmpty && /* @__PURE__ */ jsx15(
+              endAdornment: /* @__PURE__ */ jsx16(Fragment2, { children: !isValueEmpty && /* @__PURE__ */ jsx16(
                 IconButton5,
                 {
                   "aria-label": `clear ${name}`,
@@ -1073,7 +1250,7 @@ var SearchableSelect = React6.memo(
                     backgroundColor: "transparent",
                     boxShadow: "none"
                   },
-                  children: /* @__PURE__ */ jsx15(Clear2, { fontSize: "inherit" })
+                  children: /* @__PURE__ */ jsx16(Clear2, { fontSize: "inherit" })
                 }
               ) })
             }
@@ -1097,8 +1274,8 @@ var SearchableSelect = React6.memo(
         className: classes.defaultMode,
         style,
         children: [
-          /* @__PURE__ */ jsx15(FormLabel2, { className: classes.formLabel, children: label }),
-          /* @__PURE__ */ jsx15(Typography5, { className: classes.formValue, children: displayValue })
+          /* @__PURE__ */ jsx16(FormLabel2, { className: classes.formLabel, children: label }),
+          /* @__PURE__ */ jsx16(Typography5, { className: classes.formValue, children: displayValue })
         ]
       }
     );
@@ -1117,7 +1294,7 @@ import {
   useMediaQuery as useMediaQuery3
 } from "@mui/material";
 import { Close as Close2 } from "@mui/icons-material";
-import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
 var FormDrawer = ({
   open,
   setOpen,
@@ -1143,9 +1320,9 @@ var FormDrawer = ({
         }
       },
       children: [
-        /* @__PURE__ */ jsx16(Box6, { p: 3, borderBottom: "1px solid #eee", children: /* @__PURE__ */ jsxs10(Grid2, { container: true, children: [
-          /* @__PURE__ */ jsx16(Grid2, { item: true, children: title && /* @__PURE__ */ jsx16(Typography6, { variant: "h6", fontWeight: "bold", children: title }) }),
-          /* @__PURE__ */ jsx16(Grid2, { item: true, children: /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx17(Box6, { p: 3, borderBottom: "1px solid #eee", children: /* @__PURE__ */ jsxs10(Grid2, { container: true, children: [
+          /* @__PURE__ */ jsx17(Grid2, { item: true, children: title && /* @__PURE__ */ jsx17(Typography6, { variant: "h6", fontWeight: "bold", children: title }) }),
+          /* @__PURE__ */ jsx17(Grid2, { item: true, children: /* @__PURE__ */ jsx17(
             IconButton6,
             {
               size: "medium",
@@ -1156,12 +1333,12 @@ var FormDrawer = ({
                 right: 8,
                 zIndex: 2
               },
-              children: /* @__PURE__ */ jsx16(Close2, { fontSize: "inherit" })
+              children: /* @__PURE__ */ jsx17(Close2, { fontSize: "inherit" })
             }
           ) })
         ] }) }),
-        /* @__PURE__ */ jsx16(Box6, { flex: 1, overflow: "auto", p: 3, children }),
-        actions && /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx17(Box6, { flex: 1, overflow: "auto", p: 3, children }),
+        actions && /* @__PURE__ */ jsx17(
           Box6,
           {
             p: 2,
@@ -1196,7 +1373,7 @@ import {
   useMediaQuery as useMediaQuery4
 } from "@mui/material";
 import { constants } from "@verma-consulting/common-library";
-import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
 var PhoneNumberField = ({
   value = "",
   onChange,
@@ -1298,7 +1475,7 @@ var PhoneNumberField = ({
       onBlur == null ? void 0 : onBlur();
     }
   };
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     Box7,
     {
       ref: wrapperRef,
@@ -1313,7 +1490,7 @@ var PhoneNumberField = ({
           alignItems: "center",
           sx: { width: "100%" },
           children: [
-            /* @__PURE__ */ jsx17(
+            /* @__PURE__ */ jsx18(
               TextField2,
               {
                 select: true,
@@ -1348,7 +1525,7 @@ var PhoneNumberField = ({
                 ] }, option.code))
               }
             ),
-            /* @__PURE__ */ jsx17(
+            /* @__PURE__ */ jsx18(
               TextField2,
               {
                 label,
@@ -1397,6 +1574,7 @@ export {
   SkeletonBar_default as SkeletonBar,
   StatusPill_default as StatusPill,
   TabPanel_default as TabPanel,
+  TablePagination_default as TablePagination,
   ThemeProvider,
   createTheme,
   makeStyles5 as makeStyles,