@verma-consulting/design-library 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1016 @@
+// src/index.tsx
+export * from "@mui/material";
+
+// src/ClearableSelect.tsx
+import React from "react";
+import {
+  FormControl,
+  InputLabel,
+  Select,
+  InputAdornment,
+  IconButton,
+  OutlinedInput,
+  Typography,
+  FormLabel
+} from "@mui/material";
+import { Clear } from "@mui/icons-material";
+import { makeStyles } from "@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
+import { jsx, jsxs } from "react/jsx-runtime";
+var useStyles = 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 = React.useRef(null);
+  const [editMode, setEditMode] = React.useState(defaultEditMode);
+  React.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
+        setEditMode(false);
+      }
+    };
+    if (editMode) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [editMode]);
+  const isValueEmpty = multiple && Array.isArray(value) ? value.length === 0 : value === "";
+  const handleClear = (event) => {
+    event.stopPropagation();
+    if (onClear) {
+      onClear();
+      setEditMode(false);
+    } else {
+      const fakeEvent = {
+        target: { name, value: multiple ? [] : "" }
+      };
+      onChange(fakeEvent);
+    }
+  };
+  if (editMode) {
+    return /* @__PURE__ */ jsxs(
+      FormControl,
+      {
+        variant: "outlined",
+        size,
+        style,
+        disabled,
+        fullWidth: true,
+        children: [
+          /* @__PURE__ */ jsx(InputLabel, { id: `${name}-select-label`, children: label }),
+          /* @__PURE__ */ jsx(
+            Select,
+            {
+              labelId: `${name}-select-label`,
+              id: `${name}-select`,
+              name,
+              multiple,
+              value: multiple ? value == null ? void 0 : value.split(", ") : value,
+              onChange,
+              onBlur: () => setEditMode(false),
+              onClose: () => setEditMode(false),
+              label,
+              input: /* @__PURE__ */ jsx(
+                OutlinedInput,
+                {
+                  size,
+                  color: "primary",
+                  endAdornment: onClear && !isValueEmpty ? /* @__PURE__ */ jsx(InputAdornment, { position: "end", sx: { gap: 1 }, children: /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      "aria-label": `clear ${name}`,
+                      onClick: handleClear,
+                      edge: "end",
+                      size: "small",
+                      sx: { mr: 1 },
+                      children: /* @__PURE__ */ jsx(Clear, { fontSize: "inherit" })
+                    }
+                  ) }) : null,
+                  label,
+                  name,
+                  sx: {
+                    paddingRight: !isValueEmpty ? 2 : void 0
+                  }
+                }
+              ),
+              renderValue,
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      onClick: () => {
+        if (!disabled) {
+          setEditMode(true);
+        }
+      },
+      className: classes.defaultMode,
+      children: [
+        /* @__PURE__ */ jsx(FormLabel, { className: classes.formLabel, children: label }),
+        /* @__PURE__ */ jsx(Typography, { className: classes.formValue, children: renderValue ? renderValue(value) : prettifyString(value) })
+      ]
+    }
+  );
+};
+var ClearableSelect_default = ClearableSelect;
+
+// src/TabPanel.tsx
+import { Box } from "@mui/material";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var TabPanel = (props) => {
+  const { children, value, index, ...other } = props;
+  return /* @__PURE__ */ jsx2("div", { role: "tabpanel", hidden: value !== index, id: `simple-tabpanel-${index}`, ...other, children: value === index && /* @__PURE__ */ jsx2(Box, { sx: { p: 2 }, children }) });
+};
+var TabPanel_default = TabPanel;
+
+// src/index.tsx
+import { useTheme as useTheme6, styled as styled5, createTheme, ThemeProvider } from "@mui/material/styles";
+import { makeStyles as makeStyles5 } from "@mui/styles";
+
+// src/Logo.tsx
+import { memo } from "react";
+import {
+  Grid,
+  Typography as Typography2,
+  Avatar,
+  Tooltip,
+  Box as Box2,
+  useTheme,
+  useMediaQuery
+} from "@mui/material";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var Logo = memo(
+  ({
+    loggedIn = false,
+    organization = null,
+    defaultLogo = null,
+    handleClick = () => null,
+    companyComponent = null
+  }) => {
+    var _a, _b;
+    const theme = useTheme();
+    const mdMatches = 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__ */ jsxs2(
+      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__ */ jsx3(Box2, { sx: { mr: 1, display: "flex", alignItems: "center" }, children: logoUrl ? /* @__PURE__ */ jsx3(
+            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__ */ jsx3(Box2, { sx: { maxWidth, flexShrink: 1, minWidth: 0 }, children: loggedIn ? /* @__PURE__ */ jsx3(Tooltip, { title: companyName, placement: "top", arrow: true, children: /* @__PURE__ */ jsx3(
+            Typography2,
+            {
+              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
+import { styled } from "@mui/material/styles";
+import {
+  useTheme as useTheme2,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  IconButton as IconButton2,
+  useMediaQuery as useMediaQuery2
+} 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";
+var BootstrapDialog = styled(Dialog)(({ theme }) => ({
+  "& .MuiDialogContent-root": {
+    padding: theme.spacing(4)
+  },
+  "& .MuiDialogActions-root": {
+    padding: theme.spacing(4)
+  }
+}));
+var BootstrapDialogTitle = (props) => {
+  const { children, onClose, ...other } = props;
+  return /* @__PURE__ */ jsxs3(DialogTitle, { sx: { m: 2, p: 2 }, ...other, children: [
+    children,
+    onClose ? /* @__PURE__ */ jsx4(
+      IconButton2,
+      {
+        onClick: onClose,
+        sx: {
+          position: "absolute",
+          right: 8,
+          top: 8
+        },
+        children: /* @__PURE__ */ jsx4(Close, { color: "primary" })
+      }
+    ) : null
+  ] });
+};
+var FormDialog = ({ open = false, setOpen, title = "", actions, children, maxWidth = "lg", ...props }) => {
+  const theme = useTheme2();
+  const mdMatches = useMediaQuery2(theme.breakpoints.down("md"));
+  return /* @__PURE__ */ jsxs3(BootstrapDialog, { fullWidth: true, onClose: () => setOpen(false), open, maxWidth, fullScreen: mdMatches, children: [
+    /* @__PURE__ */ jsx4(BootstrapDialogTitle, { onClose: () => setOpen(false), children: title }),
+    /* @__PURE__ */ jsx4(DialogContent, { dividers: true, children }),
+    /* @__PURE__ */ jsx4(DialogActions, { children: actions })
+  ] });
+};
+var FormDialog_default = FormDialog;
+
+// src/InputFileUpload.tsx
+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";
+var VisuallyHiddenInput = styled2("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__ */ jsxs4(
+  Button,
+  {
+    role: void 0,
+    component: "label",
+    size: "small",
+    variant: "contained",
+    tabIndex: -1,
+    startIcon: /* @__PURE__ */ jsx5(CloudUpload, { fontSize: "inherit" }),
+    children: [
+      title,
+      /* @__PURE__ */ jsx5(VisuallyHiddenInput, { type: "file", name, onChange })
+    ]
+  }
+);
+var InputFileUpload_default = InputFileUpload;
+
+// src/ImageUploadAvatar.tsx
+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";
+var HiddenInput = styled3("input")({
+  position: "absolute",
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0 0 0 0)",
+  border: 0
+});
+var Wrapper = styled3(Box3, {
+  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 = styled3("img")({
+  width: "100%",
+  height: "100%",
+  objectFit: "cover",
+  display: "block"
+});
+var Overlay = styled3(Box3)(({ 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 = styled3(IconButton3)(({ 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 = useRef(null);
+  const [internalSrc, setInternalSrc] = useState(defaultValue != null ? defaultValue : null);
+  const [hover, setHover] = useState(false);
+  useEffect(() => {
+    if (!defaultValue) return;
+    if (!internalSrc || !internalSrc.startsWith("blob:")) {
+      setInternalSrc(defaultValue);
+    }
+  }, [defaultValue]);
+  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__ */ jsxs5(
+    Wrapper,
+    {
+      role: "button",
+      size,
+      variant,
+      onPointerEnter: () => setHover(true),
+      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 })
+      ]
+    }
+  );
+};
+var ImageUploadAvatar_default = ImageUploadAvatar;
+
+// src/FormSnackBar.tsx
+import { Snackbar, Alert, AlertTitle, Slide } from "@mui/material";
+import { jsx as jsx7 } from "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__ */ jsx7(
+    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: Slide,
+      children: /* @__PURE__ */ jsx7(
+        Alert,
+        {
+          sx: {
+            width: "100%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            textAlign: "center",
+            ...getAlertStyles()
+          },
+          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 })
+        }
+      )
+    }
+  );
+};
+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";
+var useStyles2 = makeStyles2({
+  "@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__ */ jsx8(
+    Backdrop,
+    {
+      open: true,
+      sx: {
+        zIndex: (theme) => theme.zIndex.modal + 1,
+        backgroundColor: "rgba(255, 255, 255, 0.15)",
+        backdropFilter: "blur(2px)"
+      },
+      children: /* @__PURE__ */ jsx8(CircularProgress, { size, color, thickness: 3.5, className: classes.progress })
+    }
+  );
+};
+var Loader_default = Loader;
+
+// src/Pill.tsx
+import { Button as Button2, Typography as Typography3, Icon, useTheme as useTheme4 } from "@mui/material";
+import { makeStyles as makeStyles3 } from "@mui/styles";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var useStyles3 = makeStyles3((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 = useTheme4();
+  const classes = useStyles3();
+  return /* @__PURE__ */ jsx9(
+    Button2,
+    {
+      variant: isSelected ? "contained" : "outlined",
+      color: color || "primary",
+      sx: {
+        borderRadius: "48px",
+        padding: "8px 24px",
+        textTransform: "none"
+      },
+      onClick,
+      children: /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "center" }, children: [
+        leftIcon && /* @__PURE__ */ jsx9(
+          Icon,
+          {
+            className: leftIcon,
+            fontSize: 14,
+            color: "inherit",
+            style: { paddingRight: 8 },
+            "data-testid": "pill-left-icon"
+          }
+        ),
+        /* @__PURE__ */ jsx9(Typography3, { variant: "subtitle", color: "inherit", fontWeight: "bold", children: label }),
+        rightIcon && /* @__PURE__ */ jsx9(
+          Icon,
+          {
+            className: rightIcon,
+            fontSize: 14,
+            color: "inherit",
+            style: { marginLeft: 8 },
+            "data-testid": "pill-right-icon"
+          }
+        )
+      ] })
+    }
+  );
+};
+var Pill_default = Pill;
+
+// src/IOSSwitch.tsx
+import { styled as styled4 } from "@mui/material/styles";
+import Switch from "@mui/material/Switch";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var IOSSwitch = styled4((props) => /* @__PURE__ */ jsx10(Switch, { 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
+import { Chip } from "@mui/material";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var statusColorMap = {
+  ["Pending" /* Pending */]: "warning",
+  ["Active" /* Active */]: "success",
+  ["Inactive" /* Inactive */]: "error",
+  ["Invited" /* Invited */]: "info"
+};
+var StatusPill = ({ status }) => /* @__PURE__ */ jsx11(
+  Chip,
+  {
+    label: status,
+    color: statusColorMap[status],
+    variant: "outlined",
+    sx: { fontWeight: 600, borderRadius: "16px", px: 1.5 }
+  }
+);
+var StatusPill_default = StatusPill;
+
+// src/FormPopover.tsx
+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 jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+var FormPopover = ({ row, children, title }) => {
+  const [anchorEl, setAnchorEl] = useState2(null);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const open = Boolean(anchorEl);
+  return /* @__PURE__ */ jsxs7(Fragment, { children: [
+    /* @__PURE__ */ jsx12(Tooltip2, { title, children: /* @__PURE__ */ jsx12(
+      IconButton4,
+      {
+        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__ */ jsx12(MoreHoriz, { fontSize: "inherit", color: "primary" })
+      }
+    ) }),
+    /* @__PURE__ */ jsx12(
+      Popover,
+      {
+        open,
+        anchorEl,
+        onClose: handleClose,
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "left"
+        },
+        children: children({ row, handleClose })
+      }
+    )
+  ] });
+};
+var FormPopover_default = FormPopover;
+
+// src/SearchableSelect.tsx
+import React5, { useEffect as useEffect2, useRef as useRef2, useState as useState3, useMemo } from "react";
+import {
+  Autocomplete,
+  TextField,
+  Typography as Typography4,
+  FormLabel as FormLabel2,
+  FormControl as FormControl2,
+  IconButton as IconButton5
+} from "@mui/material";
+import { Clear as Clear2 } from "@mui/icons-material";
+import { makeStyles as makeStyles4 } from "@mui/styles";
+import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+var useStyles4 = makeStyles4(() => ({
+  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 = React5.memo(
+  ({
+    name,
+    label,
+    value,
+    onChange,
+    options,
+    size = "small",
+    style,
+    disabled = false,
+    onClear,
+    defaultEditMode = false,
+    multiple = false
+  }) => {
+    const classes = useStyles4();
+    const wrapperRef = useRef2(null);
+    const inputRef = useRef2(null);
+    const [editMode, setEditMode] = useState3(defaultEditMode);
+    const [open, setOpen] = useState3(defaultEditMode);
+    useEffect2(() => {
+      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]);
+    useEffect2(() => {
+      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 = 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 = 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__ */ jsx13(FormControl2, { fullWidth: true, style, disabled, size, children: /* @__PURE__ */ jsx13(
+      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__ */ jsx13(
+          TextField,
+          {
+            ...params,
+            label,
+            variant: "outlined",
+            size,
+            inputRef,
+            InputProps: {
+              ...params.InputProps,
+              endAdornment: /* @__PURE__ */ jsx13(Fragment2, { children: !isValueEmpty && /* @__PURE__ */ jsx13(
+                IconButton5,
+                {
+                  "aria-label": `clear ${name}`,
+                  onClick: handleClear,
+                  size: "small",
+                  sx: {
+                    backgroundColor: "transparent",
+                    boxShadow: "none"
+                  },
+                  children: /* @__PURE__ */ jsx13(Clear2, { fontSize: "inherit" })
+                }
+              ) })
+            }
+          }
+        ),
+        onBlur: () => {
+          setEditMode(false);
+          setOpen(false);
+        }
+      }
+    ) }) : /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        ref: wrapperRef,
+        onClick: () => {
+          if (!disabled) {
+            setEditMode(true);
+            setOpen(true);
+          }
+        },
+        className: classes.defaultMode,
+        style,
+        children: [
+          /* @__PURE__ */ jsx13(FormLabel2, { className: classes.formLabel, children: label }),
+          /* @__PURE__ */ jsx13(Typography4, { className: classes.formValue, children: displayValue })
+        ]
+      }
+    );
+  }
+);
+var SearchableSelect_default = SearchableSelect;
+
+// src/FormDrawer.tsx
+import { Drawer, Typography as Typography5, Box as Box4, IconButton as IconButton6, Grid as Grid2, useTheme as useTheme5, useMediaQuery as useMediaQuery3 } from "@mui/material";
+import { Close as Close2 } from "@mui/icons-material";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+var FormDrawer = ({ open, setOpen, title, actions, children }) => {
+  const theme = useTheme5();
+  const mdMatches = useMediaQuery3(theme.breakpoints.down("md"));
+  return /* @__PURE__ */ jsxs9(
+    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__ */ jsx14(Box4, { p: 3, borderBottom: "1px solid #eee", children: /* @__PURE__ */ jsxs9(Grid2, { container: true, children: [
+          /* @__PURE__ */ jsx14(Grid2, { item: true, children: title && /* @__PURE__ */ jsx14(Typography5, { variant: "h6", fontWeight: "bold", children: title }) }),
+          /* @__PURE__ */ jsx14(Grid2, { item: true, children: /* @__PURE__ */ jsx14(
+            IconButton6,
+            {
+              size: "medium",
+              onClick: setOpen,
+              sx: {
+                position: "absolute",
+                top: 8,
+                right: 8,
+                zIndex: 2
+              },
+              children: /* @__PURE__ */ jsx14(Close2, { fontSize: "inherit" })
+            }
+          ) })
+        ] }) }),
+        /* @__PURE__ */ jsx14(Box4, { flex: 1, overflow: "auto", p: 3, children }),
+        actions && /* @__PURE__ */ jsx14(
+          Box4,
+          {
+            p: 2,
+            borderTop: "1px solid #eee",
+            sx: {
+              position: "sticky",
+              bottom: 0,
+              zIndex: 1
+            },
+            children: actions
+          }
+        )
+      ]
+    }
+  );
+};
+var FormDrawer_default = FormDrawer;
+export {
+  ClearableSelect_default as ClearableSelect,
+  FormDialog_default as FormDialog,
+  FormDrawer_default as FormDrawer,
+  FormPopover_default as FormPopover,
+  FormSnackBar_default as FormSnackBar,
+  IOSSwitch_default as IOSSwitch,
+  ImageUploadAvatar_default as ImageUploadAvatar,
+  InputFileUpload_default as InputFileUpload,
+  Loader_default as Loader,
+  Logo_default as Logo,
+  Pill_default as Pill,
+  SearchableSelect_default as SearchableSelect,
+  StatusPill_default as StatusPill,
+  TabPanel_default as TabPanel,
+  ThemeProvider,
+  createTheme,
+  makeStyles5 as makeStyles,
+  styled5 as styled,
+  useTheme6 as useTheme
+};
+//# sourceMappingURL=index.mjs.map