@verma-consulting/design-library 0.1.0

package/dist/index.js

@@ -0,0 +1,1039 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  ClearableSelect: () => ClearableSelect_default,
+  FormDialog: () => FormDialog_default,
+  FormDrawer: () => FormDrawer_default,
+  FormPopover: () => FormPopover_default,
+  FormSnackBar: () => FormSnackBar_default,
+  IOSSwitch: () => IOSSwitch_default,
+  ImageUploadAvatar: () => ImageUploadAvatar_default,
+  InputFileUpload: () => InputFileUpload_default,
+  Loader: () => Loader_default,
+  Logo: () => Logo_default,
+  Pill: () => Pill_default,
+  SearchableSelect: () => SearchableSelect_default,
+  StatusPill: () => StatusPill_default,
+  TabPanel: () => TabPanel_default,
+  ThemeProvider: () => import_styles10.ThemeProvider,
+  createTheme: () => import_styles10.createTheme,
+  makeStyles: () => import_styles11.makeStyles,
+  styled: () => import_styles10.styled,
+  useTheme: () => import_styles10.useTheme
+});
+module.exports = __toCommonJS(index_exports);
+__reExport(index_exports, require("@mui/material"), module.exports);
+
+// src/ClearableSelect.tsx
+var import_react = __toESM(require("react"));
+var import_material = require("@mui/material");
+var import_icons_material = require("@mui/icons-material");
+var import_styles = require("@mui/styles");
+
+// src/utils/common.ts
+function prettifyString(input = "") {
+  if (input === "") return "";
+  let result = input.replace(/_/g, " ");
+  result = result.replace(/([a-z0-9])([A-Z])/g, "$1 $2");
+  result = result.split(" ").filter(Boolean).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
+  return result;
+}
+var capitalizeSentence = (value) => {
+  if (!value || value === "") {
+    return "\u2013";
+  }
+  return value == null ? void 0 : value.replace(/\w\S*/g, (txt) => {
+    var _a, _b;
+    return ((_a = txt == null ? void 0 : txt.charAt(0)) == null ? void 0 : _a.toUpperCase()) + ((_b = txt == null ? void 0 : txt.substr(1)) == null ? void 0 : _b.toLowerCase());
+  });
+};
+
+// src/ClearableSelect.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var useStyles = (0, import_styles.makeStyles)((theme) => ({
+  defaultMode: {
+    paddingTop: 14,
+    paddingBottom: 14,
+    paddingLeft: 8,
+    paddingRight: 8,
+    cursor: "pointer",
+    "&:hover": {
+      borderRadius: 10,
+      boxShadow: "rgba(100, 100, 111, 0.2) 0px 7px 29px 0px"
+    }
+  },
+  formLabel: {
+    cursor: "pointer"
+  },
+  formValue: {
+    cursor: "pointer",
+    wordBreak: "break-word",
+    whiteSpace: "pre-wrap"
+  }
+}));
+var ClearableSelect = ({
+  name,
+  label,
+  value = "",
+  onChange,
+  size = "small",
+  style,
+  disabled = false,
+  onClear,
+  multiple = false,
+  defaultEditMode = false,
+  renderValue,
+  children
+}) => {
+  const classes = useStyles();
+  const wrapperRef = import_react.default.useRef(null);
+  const [editMode, setEditMode] = import_react.default.useState(defaultEditMode);
+  import_react.default.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
+        setEditMode(false);
+      }
+    };
+    if (editMode) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [editMode]);
+  const isValueEmpty = multiple && Array.isArray(value) ? value.length === 0 : value === "";
+  const handleClear = (event) => {
+    event.stopPropagation();
+    if (onClear) {
+      onClear();
+      setEditMode(false);
+    } else {
+      const fakeEvent = {
+        target: { name, value: multiple ? [] : "" }
+      };
+      onChange(fakeEvent);
+    }
+  };
+  if (editMode) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_material.FormControl,
+      {
+        variant: "outlined",
+        size,
+        style,
+        disabled,
+        fullWidth: true,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.InputLabel, { id: `${name}-select-label`, children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_material.Select,
+            {
+              labelId: `${name}-select-label`,
+              id: `${name}-select`,
+              name,
+              multiple,
+              value: multiple ? value == null ? void 0 : value.split(", ") : value,
+              onChange,
+              onBlur: () => setEditMode(false),
+              onClose: () => setEditMode(false),
+              label,
+              input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_material.OutlinedInput,
+                {
+                  size,
+                  color: "primary",
+                  endAdornment: onClear && !isValueEmpty ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.InputAdornment, { position: "end", sx: { gap: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_material.IconButton,
+                    {
+                      "aria-label": `clear ${name}`,
+                      onClick: handleClear,
+                      edge: "end",
+                      size: "small",
+                      sx: { mr: 1 },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.Clear, { fontSize: "inherit" })
+                    }
+                  ) }) : null,
+                  label,
+                  name,
+                  sx: {
+                    paddingRight: !isValueEmpty ? 2 : void 0
+                  }
+                }
+              ),
+              renderValue,
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      onClick: () => {
+        if (!disabled) {
+          setEditMode(true);
+        }
+      },
+      className: classes.defaultMode,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.FormLabel, { className: classes.formLabel, children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { className: classes.formValue, children: renderValue ? renderValue(value) : prettifyString(value) })
+      ]
+    }
+  );
+};
+var ClearableSelect_default = ClearableSelect;
+
+// src/TabPanel.tsx
+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 }) });
+};
+var TabPanel_default = TabPanel;
+
+// src/index.tsx
+var import_styles10 = require("@mui/material/styles");
+var import_styles11 = require("@mui/styles");
+
+// src/Logo.tsx
+var import_react2 = require("react");
+var import_material3 = require("@mui/material");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Logo = (0, import_react2.memo)(
+  ({
+    loggedIn = false,
+    organization = null,
+    defaultLogo = null,
+    handleClick = () => null,
+    companyComponent = null
+  }) => {
+    var _a, _b;
+    const theme = (0, import_material3.useTheme)();
+    const mdMatches = (0, import_material3.useMediaQuery)(theme.breakpoints.down("md"));
+    const maxWidth = mdMatches ? 160 : 320;
+    const companyName = capitalizeSentence((_a = organization == null ? void 0 : organization.name) != null ? _a : "");
+    const logoUrl = (_b = organization == null ? void 0 : organization.logo) == null ? void 0 : _b.url;
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      import_material3.Grid,
+      {
+        container: true,
+        alignItems: "center",
+        wrap: "nowrap",
+        sx: {
+          cursor: "pointer",
+          "&:hover": { opacity: 0.9, transition: "opacity 0.2s ease-in-out" }
+        },
+        onClick: handleClick,
+        children: [
+          (logoUrl || defaultLogo) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Box, { sx: { mr: 1, display: "flex", alignItems: "center" }, children: logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            import_material3.Avatar,
+            {
+              alt: companyName || "avatar",
+              src: logoUrl,
+              sx: {
+                width: 36,
+                height: 36,
+                bgcolor: "primary.main",
+                fontSize: 14,
+                fontWeight: "bold"
+              },
+              imgProps: { loading: "lazy" },
+              children: (companyName == null ? void 0 : companyName.charAt(0)) || "?"
+            }
+          ) : defaultLogo }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Box, { sx: { maxWidth, flexShrink: 1, minWidth: 0 }, children: loggedIn ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Tooltip, { title: companyName, placement: "top", arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            import_material3.Typography,
+            {
+              variant: "h6",
+              noWrap: true,
+              sx: {
+                textOverflow: "ellipsis",
+                overflow: "hidden",
+                whiteSpace: "nowrap",
+                fontFamily: "Courier, monospace",
+                fontWeight: "bold",
+                color: "primary.main"
+              },
+              children: companyName
+            }
+          ) }) : companyComponent })
+        ]
+      }
+    );
+  }
+);
+var Logo_default = Logo;
+
+// src/FormDialog.tsx
+var import_styles2 = require("@mui/material/styles");
+var import_material4 = require("@mui/material");
+var import_styles3 = require("@mui/material/styles");
+var import_icons_material2 = require("@mui/icons-material");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var BootstrapDialog = (0, import_styles2.styled)(import_material4.Dialog)(({ theme }) => ({
+  "& .MuiDialogContent-root": {
+    padding: theme.spacing(4)
+  },
+  "& .MuiDialogActions-root": {
+    padding: theme.spacing(4)
+  }
+}));
+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
+  ] });
+};
+var FormDialog = ({ open = false, setOpen, title = "", actions, children, maxWidth = "lg", ...props }) => {
+  const theme = (0, import_material4.useTheme)();
+  const mdMatches = (0, import_material4.useMediaQuery)(theme.breakpoints.down("md"));
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(BootstrapDialog, { fullWidth: true, onClose: () => setOpen(false), open, maxWidth, fullScreen: mdMatches, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BootstrapDialogTitle, { onClose: () => setOpen(false), children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material4.DialogContent, { dividers: true, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material4.DialogActions, { children: actions })
+  ] });
+};
+var FormDialog_default = FormDialog;
+
+// src/InputFileUpload.tsx
+var import_styles4 = require("@mui/material/styles");
+var import_material5 = require("@mui/material");
+var import_icons_material3 = require("@mui/icons-material");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var VisuallyHiddenInput = (0, import_styles4.styled)("input")({
+  clip: "rect(0 0 0 0)",
+  clipPath: "inset(50%)",
+  height: 1,
+  overflow: "hidden",
+  position: "absolute",
+  bottom: 0,
+  left: 0,
+  whiteSpace: "nowrap",
+  width: 1
+});
+var InputFileUpload = ({ name = "", onChange = () => null, title = "" }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  import_material5.Button,
+  {
+    role: void 0,
+    component: "label",
+    size: "small",
+    variant: "contained",
+    tabIndex: -1,
+    startIcon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons_material3.CloudUpload, { fontSize: "inherit" }),
+    children: [
+      title,
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(VisuallyHiddenInput, { type: "file", name, onChange })
+    ]
+  }
+);
+var InputFileUpload_default = InputFileUpload;
+
+// src/ImageUploadAvatar.tsx
+var import_react3 = require("react");
+var import_material6 = require("@mui/material");
+var import_styles5 = require("@mui/material/styles");
+var import_icons_material4 = require("@mui/icons-material");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var HiddenInput = (0, import_styles5.styled)("input")({
+  position: "absolute",
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0 0 0 0)",
+  border: 0
+});
+var Wrapper = (0, import_styles5.styled)(import_material6.Box, {
+  shouldForwardProp: (prop) => prop !== "variant" && prop !== "size"
+})(({ theme, size, variant }) => ({
+  position: "relative",
+  width: size,
+  height: size,
+  borderRadius: variant === "circular" ? "50%" : variant === "rounded" ? theme.shape.borderRadius * 2 : 0,
+  border: `1px dashed ${theme.palette.grey[400]}`,
+  backgroundColor: theme.palette.grey[200],
+  overflow: "hidden",
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+}));
+var PreviewImg = (0, import_styles5.styled)("img")({
+  width: "100%",
+  height: "100%",
+  objectFit: "cover",
+  display: "block"
+});
+var Overlay = (0, import_styles5.styled)(import_material6.Box)(({ theme }) => ({
+  position: "absolute",
+  inset: 0,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  transition: "background 120ms ease",
+  borderRadius: "inherit",
+  "& .uploadIcon": {
+    opacity: 0,
+    transition: "opacity 120ms ease, transform 120ms ease",
+    transform: "scale(0.95)"
+  },
+  "&.empty .uploadIcon": {
+    opacity: 0.6,
+    transform: "scale(1)"
+  },
+  "&.hover": {
+    background: "rgba(0,0,0,0.15)",
+    "& .uploadIcon": { opacity: 1, transform: "scale(1)" }
+  }
+}));
+var ClearButton = (0, import_styles5.styled)(import_material6.IconButton)(({ theme }) => ({
+  position: "absolute",
+  top: -8,
+  right: -8,
+  background: theme.palette.background.paper,
+  boxShadow: theme.shadows[2],
+  "&:hover": { background: theme.palette.background.paper }
+}));
+var ImageUploadAvatar = ({
+  name = "image",
+  defaultValue = null,
+  onChange,
+  size = 128,
+  variant = "rounded",
+  accept = "image/*",
+  disabled,
+  allowClear = true
+}) => {
+  const inputRef = (0, import_react3.useRef)(null);
+  const [internalSrc, setInternalSrc] = (0, import_react3.useState)(defaultValue != null ? defaultValue : null);
+  const [hover, setHover] = (0, import_react3.useState)(false);
+  (0, import_react3.useEffect)(() => {
+    if (!defaultValue) return;
+    if (!internalSrc || !internalSrc.startsWith("blob:")) {
+      setInternalSrc(defaultValue);
+    }
+  }, [defaultValue]);
+  (0, import_react3.useEffect)(() => {
+    return () => {
+      if (internalSrc == null ? void 0 : internalSrc.startsWith("blob:")) {
+        URL.revokeObjectURL(internalSrc);
+      }
+    };
+  }, [internalSrc]);
+  const handlePick = (e) => {
+    var _a, _b;
+    const selected = (_b = (_a = e.target.files) == null ? void 0 : _a[0]) != null ? _b : null;
+    if (internalSrc == null ? void 0 : internalSrc.startsWith("blob:")) {
+      URL.revokeObjectURL(internalSrc);
+    }
+    let preview = null;
+    if (selected) {
+      preview = URL.createObjectURL(selected);
+      setInternalSrc(preview);
+    } else {
+      setInternalSrc(null);
+    }
+    if (inputRef.current) inputRef.current.value = "";
+    onChange == null ? void 0 : onChange(selected, preview);
+  };
+  const triggerPick = () => {
+    var _a;
+    if (!disabled) (_a = inputRef.current) == null ? void 0 : _a.click();
+  };
+  const handleClear = (e) => {
+    e.stopPropagation();
+    if (internalSrc == null ? void 0 : internalSrc.startsWith("blob:")) {
+      URL.revokeObjectURL(internalSrc);
+    }
+    setInternalSrc(null);
+    onChange == null ? void 0 : onChange(null, null);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    Wrapper,
+    {
+      role: "button",
+      size,
+      variant,
+      onPointerEnter: () => setHover(true),
+      onPointerLeave: () => setHover(false),
+      onClick: triggerPick,
+      children: [
+        internalSrc && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PreviewImg, { src: internalSrc }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Overlay, { className: `${!internalSrc ? "empty" : ""} ${hover && !disabled ? "hover" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons_material4.CloudUpload, { className: "uploadIcon", fontSize: "large" }) }),
+        allowClear && internalSrc && !disabled && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ClearButton, { size: "small", "aria-label": "Clear image", onClick: handleClear, sx: { m: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons_material4.Close, { fontSize: "inherit" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HiddenInput, { ref: inputRef, type: "file", name, accept, onChange: handlePick, disabled })
+      ]
+    }
+  );
+};
+var ImageUploadAvatar_default = ImageUploadAvatar;
+
+// src/FormSnackBar.tsx
+var import_material7 = require("@mui/material");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var FormSnackBar = ({ snackBar = {}, setSnackBar = () => null }) => {
+  const getAlertStyles = () => {
+    if ((snackBar == null ? void 0 : snackBar.type) === "success") {
+      return { backgroundColor: "#65C466", color: "white" };
+    }
+    return {};
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_material7.Snackbar,
+    {
+      sx: { width: "100%" },
+      autoHideDuration: 1e3,
+      anchorOrigin: { vertical: "top", horizontal: "center" },
+      open: (snackBar == null ? void 0 : snackBar.open) || false,
+      onClose: () => setSnackBar({
+        open: false,
+        message: "",
+        type: ""
+      }),
+      TransitionComponent: import_material7.Slide,
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        import_material7.Alert,
+        {
+          sx: {
+            width: "100%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            textAlign: "center",
+            ...getAlertStyles()
+          },
+          variant: "filled",
+          severity: snackBar == null ? void 0 : snackBar.type,
+          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material7.AlertTitle, { sx: { m: 0, p: 0 }, children: snackBar == null ? void 0 : snackBar.message })
+        }
+      )
+    }
+  );
+};
+var FormSnackBar_default = FormSnackBar;
+
+// src/Loader.tsx
+var import_material8 = require("@mui/material");
+var import_styles6 = require("@mui/styles");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var useStyles2 = (0, import_styles6.makeStyles)({
+  "@keyframes pulse": {
+    "0%": { transform: "scale(1)", opacity: 0.9 },
+    "50%": { transform: "scale(1.05)", opacity: 1 },
+    "100%": { transform: "scale(1)", opacity: 0.9 }
+  },
+  progress: {
+    animation: "$pulse 1.5s ease-in-out infinite"
+  }
+});
+var Loader = ({ size = 48, color = "primary" }) => {
+  const classes = useStyles2();
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_material8.Backdrop,
+    {
+      open: true,
+      sx: {
+        zIndex: (theme) => theme.zIndex.modal + 1,
+        backgroundColor: "rgba(255, 255, 255, 0.15)",
+        backdropFilter: "blur(2px)"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material8.CircularProgress, { size, color, thickness: 3.5, className: classes.progress })
+    }
+  );
+};
+var Loader_default = Loader;
+
+// src/Pill.tsx
+var import_material9 = require("@mui/material");
+var import_styles7 = require("@mui/styles");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var useStyles3 = (0, import_styles7.makeStyles)((theme) => ({
+  button: {
+    padding: "4px 8px 4px 8px",
+    color: "black",
+    borderColor: "black",
+    borderStyle: "solid",
+    border: "6px",
+    borderRadius: "24px !important",
+    "&:hover": {
+      color: theme.palette.primary[500]
+    }
+  }
+}));
+var Pill = ({
+  variant = "filter",
+  leftIcon = null,
+  rightIcon = null,
+  color = null,
+  isSelected = false,
+  onClick = () => null,
+  label = "",
+  disabled = false
+}) => {
+  const theme = (0, import_material9.useTheme)();
+  const classes = useStyles3();
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    import_material9.Button,
+    {
+      variant: isSelected ? "contained" : "outlined",
+      color: color || "primary",
+      sx: {
+        borderRadius: "48px",
+        padding: "8px 24px",
+        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,
+          {
+            className: leftIcon,
+            fontSize: 14,
+            color: "inherit",
+            style: { paddingRight: 8 },
+            "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,
+          {
+            className: rightIcon,
+            fontSize: 14,
+            color: "inherit",
+            style: { marginLeft: 8 },
+            "data-testid": "pill-right-icon"
+          }
+        )
+      ] })
+    }
+  );
+};
+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 }) => ({
+  width: 46,
+  height: 30,
+  padding: 0,
+  "& .MuiSwitch-switchBase": {
+    padding: 0,
+    margin: 2,
+    transitionDuration: "300ms",
+    "&.Mui-checked": {
+      transform: "translateX(16px)",
+      color: "#fff",
+      "& + .MuiSwitch-track": {
+        backgroundColor: theme.palette.primary.main,
+        opacity: 1,
+        border: 0
+      },
+      "&.Mui-disabled + .MuiSwitch-track": {
+        opacity: 0.5
+      }
+    },
+    "&.Mui-focusVisible .MuiSwitch-thumb": {
+      color: "#33cf4d",
+      border: "6px solid #fff"
+    },
+    "&.Mui-disabled .MuiSwitch-thumb": {
+      color: theme.palette.mode === "light" ? theme.palette.grey[100] : theme.palette.grey[600]
+    },
+    "&.Mui-disabled + .MuiSwitch-track": {
+      opacity: theme.palette.mode === "light" ? 0.7 : 0.3
+    }
+  },
+  "& .MuiSwitch-thumb": {
+    boxSizing: "border-box",
+    width: 26,
+    height: 26
+  },
+  "& .MuiSwitch-track": {
+    borderRadius: 30 / 2,
+    backgroundColor: theme.palette.mode === "light" ? "#E9E9EA" : theme.palette.grey[600],
+    opacity: 1,
+    transition: theme.transitions.create(["background-color"], {
+      duration: 500
+    })
+  }
+}));
+var IOSSwitch_default = IOSSwitch;
+
+// src/StatusPill.tsx
+var import_material10 = require("@mui/material");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var statusColorMap = {
+  ["Pending" /* Pending */]: "warning",
+  ["Active" /* Active */]: "success",
+  ["Inactive" /* Inactive */]: "error",
+  ["Invited" /* Invited */]: "info"
+};
+var StatusPill = ({ status }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  import_material10.Chip,
+  {
+    label: status,
+    color: statusColorMap[status],
+    variant: "outlined",
+    sx: { fontWeight: 600, borderRadius: "16px", px: 1.5 }
+  }
+);
+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 FormPopover = ({ row, children, title }) => {
+  const [anchorEl, setAnchorEl] = (0, import_react4.useState)(null);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    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,
+      {
+        onClick: handleClick,
+        size: "small",
+        sx: {
+          backgroundColor: "white",
+          boxShadow: 1,
+          borderRadius: "50%",
+          border: "1px solid transparent",
+          "&:hover": {
+            border: (theme) => `1px solid ${theme.palette.primary.main}`,
+            backgroundColor: "#f0f0f0"
+          }
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons_material5.MoreHoriz, { fontSize: "inherit", color: "primary" })
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      import_material11.Popover,
+      {
+        open,
+        anchorEl,
+        onClose: handleClose,
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "left"
+        },
+        children: children({ row, handleClose })
+      }
+    )
+  ] });
+};
+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_styles9 = require("@mui/styles");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var useStyles4 = (0, import_styles9.makeStyles)(() => ({
+  defaultMode: {
+    padding: "14px 8px",
+    cursor: "pointer",
+    "&:hover": {
+      borderRadius: 10,
+      boxShadow: "rgba(100, 100, 111, 0.2) 0px 7px 29px 0px"
+    }
+  },
+  formLabel: {
+    cursor: "pointer"
+  },
+  formValue: {
+    cursor: "pointer",
+    wordBreak: "break-word",
+    whiteSpace: "pre-wrap"
+  }
+}));
+var SearchableSelect = import_react5.default.memo(
+  ({
+    name,
+    label,
+    value,
+    onChange,
+    options,
+    size = "small",
+    style,
+    disabled = false,
+    onClear,
+    defaultEditMode = false,
+    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)(() => {
+      function handleClickOutside(event) {
+        if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
+          setEditMode(false);
+          setOpen(false);
+        }
+      }
+      if (editMode) {
+        document.addEventListener("mousedown", handleClickOutside);
+      }
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }, [editMode]);
+    (0, import_react5.useEffect)(() => {
+      if (editMode && open && inputRef.current) {
+        inputRef.current.focus();
+      }
+    }, [editMode, open]);
+    const handleClear = (event) => {
+      event.stopPropagation();
+      if (onClear) {
+        onClear();
+      } else {
+        onChange("");
+      }
+      setEditMode(false);
+      setOpen(false);
+    };
+    const selected = (0, import_react5.useMemo)(() => {
+      var _a;
+      if (multiple) {
+        if (!value.trim()) return [];
+        const selectedValues = value.split(", ").map((v) => v.trim());
+        return options.filter((opt) => selectedValues.includes(opt.value));
+      } else {
+        return (_a = options.find((opt) => opt.value === value)) != null ? _a : null;
+      }
+    }, [value, options, multiple]);
+    const displayValue = (0, import_react5.useMemo)(() => {
+      var _a;
+      if (multiple) {
+        if (!Array.isArray(selected)) return "";
+        return selected.map((opt) => opt.label).join(", ");
+      } else {
+        return (_a = selected == null ? void 0 : selected.label) != null ? _a : "";
+      }
+    }, [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,
+      {
+        multiple,
+        disableCloseOnSelect: multiple,
+        options,
+        value: selected,
+        open,
+        onOpen: () => setOpen(true),
+        onClose: () => setOpen(false),
+        onChange: (_, newValue) => {
+          var _a;
+          if (multiple) {
+            if (Array.isArray(newValue)) {
+              let vals = newValue == null ? void 0 : newValue.map((opt) => opt == null ? void 0 : opt.value);
+              let val = vals == null ? void 0 : vals.join(", ");
+              onChange(val);
+            } else {
+              onChange("");
+            }
+            setOpen(true);
+          } else {
+            onChange((_a = newValue == null ? void 0 : newValue.value) != null ? _a : "");
+            setOpen(false);
+          }
+        },
+        disableClearable: !onClear,
+        autoHighlight: true,
+        getOptionLabel: (option) => option.label,
+        isOptionEqualToValue: (option, val) => option.value === val.value,
+        renderInput: (params) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          import_material12.TextField,
+          {
+            ...params,
+            label,
+            variant: "outlined",
+            size,
+            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,
+                {
+                  "aria-label": `clear ${name}`,
+                  onClick: handleClear,
+                  size: "small",
+                  sx: {
+                    backgroundColor: "transparent",
+                    boxShadow: "none"
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons_material6.Clear, { fontSize: "inherit" })
+                }
+              ) })
+            }
+          }
+        ),
+        onBlur: () => {
+          setEditMode(false);
+          setOpen(false);
+        }
+      }
+    ) }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      "div",
+      {
+        ref: wrapperRef,
+        onClick: () => {
+          if (!disabled) {
+            setEditMode(true);
+            setOpen(true);
+          }
+        },
+        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 })
+        ]
+      }
+    );
+  }
+);
+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 FormDrawer = ({ open, setOpen, title, 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,
+    {
+      anchor: mdMatches ? "bottom" : "right",
+      open,
+      onClose: setOpen,
+      sx: {
+        "& .MuiDrawer-paper": {
+          width: mdMatches ? "100%" : "56%",
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+          borderRadius: 0
+        }
+      },
+      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,
+            {
+              size: "medium",
+              onClick: setOpen,
+              sx: {
+                position: "absolute",
+                top: 8,
+                right: 8,
+                zIndex: 2
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_icons_material7.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,
+          {
+            p: 2,
+            borderTop: "1px solid #eee",
+            sx: {
+              position: "sticky",
+              bottom: 0,
+              zIndex: 1
+            },
+            children: actions
+          }
+        )
+      ]
+    }
+  );
+};
+var FormDrawer_default = FormDrawer;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ClearableSelect,
+  FormDialog,
+  FormDrawer,
+  FormPopover,
+  FormSnackBar,
+  IOSSwitch,
+  ImageUploadAvatar,
+  InputFileUpload,
+  Loader,
+  Logo,
+  Pill,
+  SearchableSelect,
+  StatusPill,
+  TabPanel,
+  ThemeProvider,
+  createTheme,
+  makeStyles,
+  styled,
+  useTheme,
+  ...require("@mui/material")
+});
+//# sourceMappingURL=index.js.map