@mbpockets/shared-ui 0.1.18

package/dist/index.cjs

@@ -0,0 +1,2608 @@
+"use client";
+'use strict';
+
+var React7 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var material = require('@mui/material');
+var DeleteIcon = require('@mui/icons-material/Delete');
+var EditIcon = require('@mui/icons-material/Edit');
+var AddIcon = require('@mui/icons-material/Add');
+var ColorizeIcon = require('@mui/icons-material/Colorize');
+var CancelIcon = require('@mui/icons-material/Cancel');
+var CheckCircleIcon = require('@mui/icons-material/CheckCircle');
+var Box2 = require('@mui/material/Box');
+var Grid9 = require('@mui/material/Grid');
+var Card10 = require('@mui/material/Card');
+var CardContent10 = require('@mui/material/CardContent');
+var CardHeader4 = require('@mui/material/CardHeader');
+var Divider2 = require('@mui/material/Divider');
+var Avatar = require('@mui/material/Avatar');
+var CasinoIcon = require('@mui/icons-material/Casino');
+var CalendarTodayIcon = require('@mui/icons-material/CalendarToday');
+var LocationOnIcon = require('@mui/icons-material/LocationOn');
+var EventIcon = require('@mui/icons-material/Event');
+var Autocomplete = require('@mui/material/Autocomplete');
+var Popper = require('@mui/material/Popper');
+var TextField3 = require('@mui/material/TextField');
+var Typography10 = require('@mui/material/Typography');
+var FormControl2 = require('@mui/material/FormControl');
+var RadioGroup = require('@mui/material/RadioGroup');
+var FormControlLabel = require('@mui/material/FormControlLabel');
+var Radio = require('@mui/material/Radio');
+var FormGroup = require('@mui/material/FormGroup');
+var Checkbox = require('@mui/material/Checkbox');
+var Button7 = require('@mui/material/Button');
+var SearchIcon = require('@mui/icons-material/Search');
+var Image2 = require('next/image');
+var ListIcon = require('@mui/icons-material/List');
+var SaveIcon = require('@mui/icons-material/Save');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React7__default = /*#__PURE__*/_interopDefault(React7);
+var DeleteIcon__default = /*#__PURE__*/_interopDefault(DeleteIcon);
+var EditIcon__default = /*#__PURE__*/_interopDefault(EditIcon);
+var AddIcon__default = /*#__PURE__*/_interopDefault(AddIcon);
+var ColorizeIcon__default = /*#__PURE__*/_interopDefault(ColorizeIcon);
+var CancelIcon__default = /*#__PURE__*/_interopDefault(CancelIcon);
+var CheckCircleIcon__default = /*#__PURE__*/_interopDefault(CheckCircleIcon);
+var Box2__default = /*#__PURE__*/_interopDefault(Box2);
+var Grid9__default = /*#__PURE__*/_interopDefault(Grid9);
+var Card10__default = /*#__PURE__*/_interopDefault(Card10);
+var CardContent10__default = /*#__PURE__*/_interopDefault(CardContent10);
+var CardHeader4__default = /*#__PURE__*/_interopDefault(CardHeader4);
+var Divider2__default = /*#__PURE__*/_interopDefault(Divider2);
+var Avatar__default = /*#__PURE__*/_interopDefault(Avatar);
+var CasinoIcon__default = /*#__PURE__*/_interopDefault(CasinoIcon);
+var CalendarTodayIcon__default = /*#__PURE__*/_interopDefault(CalendarTodayIcon);
+var LocationOnIcon__default = /*#__PURE__*/_interopDefault(LocationOnIcon);
+var EventIcon__default = /*#__PURE__*/_interopDefault(EventIcon);
+var Autocomplete__default = /*#__PURE__*/_interopDefault(Autocomplete);
+var Popper__default = /*#__PURE__*/_interopDefault(Popper);
+var TextField3__default = /*#__PURE__*/_interopDefault(TextField3);
+var Typography10__default = /*#__PURE__*/_interopDefault(Typography10);
+var FormControl2__default = /*#__PURE__*/_interopDefault(FormControl2);
+var RadioGroup__default = /*#__PURE__*/_interopDefault(RadioGroup);
+var FormControlLabel__default = /*#__PURE__*/_interopDefault(FormControlLabel);
+var Radio__default = /*#__PURE__*/_interopDefault(Radio);
+var FormGroup__default = /*#__PURE__*/_interopDefault(FormGroup);
+var Checkbox__default = /*#__PURE__*/_interopDefault(Checkbox);
+var Button7__default = /*#__PURE__*/_interopDefault(Button7);
+var SearchIcon__default = /*#__PURE__*/_interopDefault(SearchIcon);
+var Image2__default = /*#__PURE__*/_interopDefault(Image2);
+var ListIcon__default = /*#__PURE__*/_interopDefault(ListIcon);
+var SaveIcon__default = /*#__PURE__*/_interopDefault(SaveIcon);
+
+// src/components/EventPage/editMode/EventBannerEdit.tsx
+var defaultValue = {
+  isOwner: false,
+  updateEvent: async () => false,
+  updateImages: () => {
+  },
+  event: null
+};
+var EventEditContext = React7.createContext(defaultValue);
+function EventEditProvider({
+  value,
+  initialEvent,
+  children
+}) {
+  const [event, setEvent] = React7.useState(initialEvent);
+  React7.useEffect(() => {
+    setEvent(initialEvent);
+  }, [initialEvent]);
+  const handleUpdateEvent = async (patch) => {
+    if (value == null ? void 0 : value.updateEvent) {
+      const result = value.updateEvent(patch);
+      if (result instanceof Promise) {
+        const success = await result;
+        if (success) {
+          setEvent((prev) => ({ ...prev, ...patch }));
+        }
+        return success;
+      } else {
+        const success = result === false ? false : true;
+        if (success) {
+          setEvent((prev) => ({ ...prev, ...patch }));
+        }
+        return success;
+      }
+    }
+    return false;
+  };
+  const mergedValue = {
+    ...defaultValue,
+    ...value,
+    event,
+    updateEvent: handleUpdateEvent
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(EventEditContext.Provider, { value: mergedValue, children });
+}
+function useEventEdit() {
+  const context = React7.useContext(EventEditContext);
+  if (!context) {
+    throw new Error("useEventEdit must be used within an EventEditProvider");
+  }
+  return context;
+}
+function generateTagsDisplay(tag) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: "inline-block text-sm px-3 py-1 rounded-full outline-black outline-2 font-outlined",
+      style: {
+        marginTop: "6px",
+        marginRight: "6px",
+        marginBottom: "6px",
+        background: tag.color || "#bfbcbb",
+        color: "white",
+        textShadow: "black 0.2em 0.2em 0.4em"
+      },
+      children: tag.label
+    },
+    tag.id
+  );
+}
+function renderTagsFromIds(ids, legalTags) {
+  if (!ids || !legalTags || legalTags.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
+  }
+  const validTags = ids.map((id) => legalTags.find((tag) => tag.id === id)).filter((tag) => Boolean(tag));
+  return validTags.map((tag) => generateTagsDisplay(tag));
+}
+function EventBannerEdit({
+  initialValue,
+  onCancel,
+  onSave
+}) {
+  const { updateImages } = useEventEdit();
+  const [title, setTitle] = React7.useState(initialValue.title);
+  const [bannerColor, setBannerColor] = React7.useState(initialValue.bannerColor || "");
+  const [desktopBanner, setDesktopBanner] = React7.useState(initialValue.bannerUrl.desktop);
+  const [mobileBanner, setMobileBanner] = React7.useState(initialValue.bannerUrl.mobile || "");
+  const [links, setLinks] = React7.useState(initialValue.links);
+  const [linkToEdit, setLinkToEdit] = React7.useState(null);
+  const [isSaving, setIsSaving] = React7.useState(false);
+  const backgroundColor = bannerColor || "linear-gradient(135deg, rgba(25,118,210,0.8), rgba(25,118,210,1))";
+  const handleSave = async () => {
+    setIsSaving(true);
+    try {
+      const patch = {};
+      if (title !== initialValue.title) {
+        patch.title = title;
+      }
+      const currentBannerColor = bannerColor || void 0;
+      const initialBannerColor = initialValue.bannerColor || void 0;
+      if (currentBannerColor !== initialBannerColor) {
+        patch.bannerColor = currentBannerColor;
+      }
+      const currentMobile = mobileBanner || void 0;
+      const initialMobile = initialValue.bannerUrl.mobile || void 0;
+      if (desktopBanner !== initialValue.bannerUrl.desktop || currentMobile !== initialMobile) {
+        patch.bannerUrl = {
+          desktop: desktopBanner,
+          mobile: currentMobile
+        };
+      }
+      if (JSON.stringify(links) !== JSON.stringify(initialValue.links)) {
+        patch.links = links;
+      }
+      if (Object.keys(patch).length > 0) {
+        await onSave(patch);
+      } else {
+        onCancel();
+      }
+    } catch (error) {
+      console.error("Failed to save banner changes", error);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  const removeLink = (index) => {
+    setLinks(links.filter((_, i) => i !== index));
+  };
+  const openEditLink = (index) => {
+    setLinkToEdit({
+      index,
+      text: links[index].text,
+      url: links[index].url
+    });
+  };
+  const saveEditedLink = () => {
+    if (linkToEdit) {
+      const newLinks = [...links];
+      if (linkToEdit.index === -1) {
+        newLinks.push({ text: linkToEdit.text, url: linkToEdit.url });
+      } else {
+        newLinks[linkToEdit.index] = { text: linkToEdit.text, url: linkToEdit.url };
+      }
+      setLinks(newLinks);
+      setLinkToEdit(null);
+    }
+  };
+  const handleEyeDropper = async () => {
+    if (!window.EyeDropper) {
+      alert("EyeDropper API is not supported in this browser");
+      return;
+    }
+    const eyeDropper = new window.EyeDropper();
+    try {
+      const result = await eyeDropper.open();
+      setBannerColor(result.sRGBHex);
+    } catch (e) {
+      console.log("EyeDropper cancelled or failed", e);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { position: "relative", width: "100%" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      material.Grid,
+      {
+        sx: {
+          background: backgroundColor,
+          paddingTop: "8px",
+          position: "relative",
+          border: "2px dashed rgba(255,255,255,0.5)",
+          borderRadius: 1
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: {
+            position: "absolute",
+            top: 8,
+            left: 8,
+            zIndex: 10,
+            display: "flex",
+            flexDirection: "column",
+            gap: 1,
+            bgcolor: "rgba(0,0,0,0.5)",
+            p: 1,
+            borderRadius: 1,
+            width: "300px"
+          }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              material.TextField,
+              {
+                label: "Title",
+                variant: "outlined",
+                size: "small",
+                value: title,
+                onChange: (e) => setTitle(e.target.value),
+                sx: { input: { color: "white" }, label: { color: "rgba(255,255,255,0.7)" }, "& .MuiOutlinedInput-root": { "& fieldset": { borderColor: "rgba(255,255,255,0.3)" } } }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                material.TextField,
+                {
+                  label: "Banner Color",
+                  variant: "outlined",
+                  size: "small",
+                  value: bannerColor,
+                  onChange: (e) => setBannerColor(e.target.value),
+                  placeholder: "#HEX or linear-gradient(...)",
+                  sx: { flex: 1, input: { color: "white" }, label: { color: "rgba(255,255,255,0.7)" }, "& .MuiOutlinedInput-root": { "& fieldset": { borderColor: "rgba(255,255,255,0.3)" } } }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Eye Dropper", children: /* @__PURE__ */ jsxRuntime.jsx(
+                material.IconButton,
+                {
+                  size: "small",
+                  onClick: handleEyeDropper,
+                  sx: { color: "white", bgcolor: "rgba(255,255,255,0.1)", "&:hover": { bgcolor: "rgba(255,255,255,0.2)" } },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(ColorizeIcon__default.default, { fontSize: "small" })
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "color",
+                  value: bannerColor.startsWith("#") ? bannerColor : "#1976d2",
+                  onChange: (e) => setBannerColor(e.target.value),
+                  style: { width: "40px", height: "40px", padding: 0, border: "none", background: "transparent", cursor: "pointer" }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "flex", gap: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+              material.Button,
+              {
+                variant: "contained",
+                size: "small",
+                fullWidth: true,
+                onClick: updateImages,
+                children: "Update Images"
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.Box,
+            {
+              sx: {
+                width: "100%",
+                height: "auto",
+                maxHeight: "250px",
+                overflow: "hidden",
+                display: "flex",
+                justifyContent: "center",
+                opacity: 0.8
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                material.Box,
+                {
+                  component: "img",
+                  src: desktopBanner,
+                  alt: title,
+                  sx: {
+                    width: "100%",
+                    height: "auto",
+                    objectFit: "contain"
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            material.Grid,
+            {
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              paddingTop: "3px",
+              paddingBottom: "3px",
+              sx: { gap: 1.5, flexWrap: "wrap" },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { px: 1.5, py: 0.5, color: "rgba(255,255,255,0.5)", bgcolor: "rgba(0,0,0,0.4)", borderRadius: 2, border: "1px dashed rgba(255,255,255,0.2)" }, children: "Stats Placeholder" }),
+                generateTagsDisplay(initialValue.eventTag),
+                links.map((link, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+                  material.Box,
+                  {
+                    sx: {
+                      position: "relative",
+                      display: "flex",
+                      alignItems: "center",
+                      px: 1.5,
+                      py: 0.5,
+                      color: "#fff",
+                      bgcolor: "rgba(0,0,0,0.7)",
+                      borderRadius: 2,
+                      boxShadow: "0 8px 16px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.15)",
+                      border: "1px solid rgba(255,255,255,0.25)",
+                      backdropFilter: "blur(6px)",
+                      fontWeight: 700,
+                      letterSpacing: 0.2
+                    },
+                    children: [
+                      link.text,
+                      /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { ml: 1, display: "flex" }, children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Edit Link", children: /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { size: "small", onClick: () => openEditLink(index), sx: { color: "white", p: 0.2 }, children: /* @__PURE__ */ jsxRuntime.jsx(EditIcon__default.default, { fontSize: "inherit" }) }) }),
+                        /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Remove Link", children: /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { size: "small", onClick: () => removeLink(index), sx: { color: "error.light", p: 0.2 }, children: /* @__PURE__ */ jsxRuntime.jsx(DeleteIcon__default.default, { fontSize: "inherit" }) }) })
+                      ] })
+                    ]
+                  },
+                  index
+                )),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  material.Button,
+                  {
+                    variant: "outlined",
+                    size: "small",
+                    startIcon: /* @__PURE__ */ jsxRuntime.jsx(AddIcon__default.default, {}),
+                    onClick: () => setLinkToEdit({ index: -1, text: "", url: "" }),
+                    sx: {
+                      color: "white",
+                      borderColor: "rgba(255,255,255,0.5)",
+                      borderRadius: 2,
+                      "&:hover": { borderColor: "white", bgcolor: "rgba(255,255,255,0.1)" }
+                    },
+                    children: "Add Link"
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", justifyContent: "flex-end", gap: 2, mt: 2 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: onCancel, color: "inherit", disabled: isSaving, children: "Cancel" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        material.Button,
+        {
+          onClick: handleSave,
+          variant: "contained",
+          color: "primary",
+          disabled: isSaving,
+          startIcon: isSaving ? /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 20, color: "inherit" }) : null,
+          children: isSaving ? "Saving..." : "Save Changes"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(material.Dialog, { open: linkToEdit !== null, onClose: () => setLinkToEdit(null), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(material.DialogTitle, { children: (linkToEdit == null ? void 0 : linkToEdit.index) === -1 ? "Add Link" : "Edit Link" }),
+      /* @__PURE__ */ jsxRuntime.jsx(material.DialogContent, { children: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", flexDirection: "column", gap: 2, pt: 1, width: "400px" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.TextField,
+          {
+            label: "Link Text",
+            fullWidth: true,
+            value: (linkToEdit == null ? void 0 : linkToEdit.text) || "",
+            onChange: (e) => setLinkToEdit((prev) => prev ? { ...prev, text: e.target.value } : null)
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.TextField,
+          {
+            label: "Link URL",
+            fullWidth: true,
+            value: (linkToEdit == null ? void 0 : linkToEdit.url) || "",
+            onChange: (e) => setLinkToEdit((prev) => prev ? { ...prev, url: e.target.value } : null)
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(material.DialogActions, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: () => setLinkToEdit(null), children: "Cancel" }),
+        /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: saveEditedLink, variant: "contained", children: "Confirm" })
+      ] })
+    ] })
+  ] });
+}
+var CANDIDATE_TIMEZONES = [
+  "America/New_York",
+  "America/Chicago",
+  "America/Denver",
+  "America/Los_Angeles",
+  "America/Anchorage",
+  "America/Adak",
+  "Pacific/Honolulu",
+  "UTC"
+];
+function EventBasicInfo(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const { isOwner, updateEvent, event } = useEventEdit();
+  const [isEditing, setIsEditing] = React7.useState(false);
+  const description = (_b = (_a = props.description) != null ? _a : event == null ? void 0 : event.description) != null ? _b : "";
+  const startingDate = (_c = props.startingDate) != null ? _c : event == null ? void 0 : event.startingDate;
+  const endingDate = (_d = props.endingDate) != null ? _d : event == null ? void 0 : event.endingDate;
+  const timeInfo = (_f = (_e = props.timeInfo) != null ? _e : event == null ? void 0 : event.date) != null ? _f : "";
+  const timezone = (_h = (_g = props.timezone) != null ? _g : event == null ? void 0 : event.timezone) != null ? _h : "UTC";
+  if (isEditing) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      EventBasicInfoEdit,
+      {
+        initialValue: {
+          description,
+          startingDate: typeof startingDate === "string" ? startingDate : startingDate == null ? void 0 : startingDate.toISOString(),
+          endingDate: typeof endingDate === "string" ? endingDate : endingDate == null ? void 0 : endingDate.toISOString(),
+          date: timeInfo,
+          timezone
+        },
+        onCancel: () => setIsEditing(false),
+        onSave: async (payload) => {
+          const success = await updateEvent(payload);
+          if (success) {
+            setIsEditing(false);
+          }
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    EventBasicInfoView,
+    {
+      ...props,
+      description,
+      startingDate,
+      endingDate,
+      timeInfo,
+      timezone,
+      isOwner,
+      onEdit: () => setIsEditing(true)
+    }
+  );
+}
+function EventBasicInfoView({ description, locationId, startingDate, endingDate, timeInfo, timezone, isOwner, onEdit }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Grid9__default.default, { sx: { position: "relative" }, children: /* @__PURE__ */ jsxRuntime.jsx(material.Card, { style: {
+    boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.1)",
+    background: "linear-gradient(135deg, rgba(225, 225, 225, 1), rgba(250, 250, 250, 1))"
+  }, children: /* @__PURE__ */ jsxRuntime.jsxs(material.CardContent, { children: [
+    isOwner && /* @__PURE__ */ jsxRuntime.jsx(Box2__default.default, { sx: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsxRuntime.jsx(material.Button, { size: "small", onClick: onEdit, variant: "outlined", children: "Edit" }) }),
+    generateTimeInfo(timeInfo, timezone || "UTC", startingDate, endingDate),
+    /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h5", paddingTop: 2, children: "About:" }),
+    /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { whiteSpace: "pre-wrap" }, paddingTop: 1, children: description }),
+    getLocation()
+  ] }) }) });
+}
+var generateTimeInfo = function(timeInfo, timezone, startingDate, endingDate) {
+  const formatDateTime = (dateInput) => {
+    const d = typeof dateInput === "string" ? new Date(dateInput) : dateInput;
+    if (!d || isNaN(d.getTime())) return "";
+    try {
+      return new Intl.DateTimeFormat("en-US", {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+        hour: "numeric",
+        minute: "2-digit",
+        hour12: true,
+        timeZone: timezone,
+        timeZoneName: "shortGeneric"
+      }).format(d).replace(",", " @");
+    } catch (e) {
+      return d.toUTCString();
+    }
+  };
+  let rangeText = null;
+  if (startingDate && endingDate) {
+    rangeText = `From ${formatDateTime(startingDate)}
+Until ${formatDateTime(endingDate)}`;
+  } else if (startingDate) {
+    rangeText = `starting ${formatDateTime(startingDate)}`;
+  } else if (endingDate) {
+    rangeText = `until ${formatDateTime(endingDate)}`;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(Box2__default.default, { sx: { mt: 2 }, children: [
+    rangeText && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body1", fontSize: "x-large", fontWeight: "bold", sx: { whiteSpace: "pre-wrap" }, children: rangeText }),
+    timeInfo && /* @__PURE__ */ jsxRuntime.jsxs(Box2__default.default, { sx: { mt: 1 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h5", children: "Hours of Operation:" }),
+      /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body1", sx: { whiteSpace: "pre-wrap" }, children: timeInfo })
+    ] })
+  ] });
+};
+var getLocation = function(locationId) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Box2__default.default, { sx: {
+    width: "100%",
+    p: 1.5,
+    borderRadius: 2,
+    boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.1)",
+    background: "linear-gradient(135deg, rgba(180, 180,180, 1), rgba(225, 225, 225, 0.8))",
+    mt: 2
+  }, children: "Location Data goes here" });
+};
+function EventBasicInfoEdit({
+  initialValue,
+  onCancel,
+  onSave
+}) {
+  const toWallTimeISO = (dateInput, timeZone) => {
+    if (!dateInput) return "";
+    const d = new Date(dateInput);
+    if (isNaN(d.getTime())) return "";
+    const parts = new Intl.DateTimeFormat("en-US", {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: false,
+      timeZone
+    }).formatToParts(d);
+    const f = (type) => {
+      var _a;
+      return (_a = parts.find((p) => p.type === type)) == null ? void 0 : _a.value;
+    };
+    const year = f("year");
+    const month = f("month");
+    const day = f("day");
+    let hour = f("hour");
+    if (hour === "24") hour = "00";
+    const minute = f("minute");
+    return `${year}-${month}-${day}T${hour}:${minute}`;
+  };
+  const toUTCISOString = (wallTime, timeZone) => {
+    var _a;
+    if (!wallTime) return void 0;
+    const d = /* @__PURE__ */ new Date(wallTime + ":00Z");
+    const parts = new Intl.DateTimeFormat("en-US", {
+      timeZone,
+      timeZoneName: "longOffset"
+    }).formatToParts(d);
+    const offsetPart = ((_a = parts.find((p) => p.type === "timeZoneName")) == null ? void 0 : _a.value) || "GMT";
+    const offset = offsetPart.replace("GMT", "");
+    const isoWithOffset = `${wallTime}:00${offset || "+00:00"}`;
+    return new Date(isoWithOffset).toISOString();
+  };
+  const [description, setDescription] = React7.useState(initialValue.description);
+  const [timezone, setTimezone] = React7.useState(initialValue.timezone);
+  const [startingDate, setStartingDate] = React7.useState(toWallTimeISO(initialValue.startingDate, initialValue.timezone));
+  const [endingDate, setEndingDate] = React7.useState(toWallTimeISO(initialValue.endingDate, initialValue.timezone));
+  const [timeInfo, setTimeInfo] = React7.useState(initialValue.date);
+  const [isSaving, setIsSaving] = React7.useState(false);
+  const handleSave = async () => {
+    setIsSaving(true);
+    try {
+      const patch = {};
+      if (description !== initialValue.description) patch.description = description;
+      if (timeInfo !== initialValue.date) patch.date = timeInfo;
+      if (timezone !== initialValue.timezone) patch.timezone = timezone;
+      if (startingDate !== toWallTimeISO(initialValue.startingDate, timezone) || timezone !== initialValue.timezone) {
+        patch.startingDate = toUTCISOString(startingDate, timezone);
+      }
+      if (endingDate !== toWallTimeISO(initialValue.endingDate, timezone) || timezone !== initialValue.timezone) {
+        patch.endingDate = toUTCISOString(endingDate, timezone);
+      }
+      if (Object.keys(patch).length > 0) {
+        await onSave(patch);
+      } else {
+        onCancel();
+      }
+    } catch (error) {
+      console.error("Failed to save basic info changes", error);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(material.Card, { sx: {
+    boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.1)",
+    background: "linear-gradient(135deg, rgba(225, 225, 225, 1), rgba(250, 250, 250, 1))",
+    border: "2px dashed rgba(25,118,210,0.5)",
+    width: "100%"
+  }, children: /* @__PURE__ */ jsxRuntime.jsxs(material.CardContent, { sx: { position: "relative" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", justifyContent: "flex-end", mb: 1, gap: 1 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Cancel", children: /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { size: "small", onClick: onCancel, color: "error", disabled: isSaving, children: /* @__PURE__ */ jsxRuntime.jsx(CancelIcon__default.default, {}) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Apply Changes", children: /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { size: "small", onClick: handleSave, color: "primary", disabled: isSaving, children: isSaving ? /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 24 }) : /* @__PURE__ */ jsxRuntime.jsx(CheckCircleIcon__default.default, {}) }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { mt: 2 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body1", fontSize: "x-large", fontWeight: "bold", sx: { mb: 1 }, children: "Event Dates & Times:" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(material.Grid, { container: true, spacing: 2, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { size: { xs: 12, sm: 4 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          material.TextField,
+          {
+            fullWidth: true,
+            label: "Starting Date",
+            type: "datetime-local",
+            size: "small",
+            value: startingDate,
+            onChange: (e) => setStartingDate(e.target.value),
+            InputLabelProps: { shrink: true }
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { size: { xs: 12, sm: 4 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          material.TextField,
+          {
+            fullWidth: true,
+            label: "Ending Date",
+            type: "datetime-local",
+            size: "small",
+            value: endingDate,
+            onChange: (e) => setEndingDate(e.target.value),
+            InputLabelProps: { shrink: true }
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { size: { xs: 12, sm: 4 }, children: /* @__PURE__ */ jsxRuntime.jsxs(material.FormControl, { fullWidth: true, size: "small", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(material.InputLabel, { children: "Display Timezone" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.Select,
+            {
+              label: "Display Timezone",
+              value: timezone,
+              onChange: (e) => setTimezone(e.target.value),
+              children: CANDIDATE_TIMEZONES.map((tz) => /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: tz, children: tz }, tz))
+            }
+          )
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { mt: 2 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h5", children: "Hours of Operation:" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.TextField,
+          {
+            fullWidth: true,
+            multiline: true,
+            variant: "standard",
+            placeholder: "e.g. Mon-Fri 9am-5pm",
+            value: timeInfo,
+            onChange: (e) => setTimeInfo(e.target.value),
+            sx: { mt: 1 }
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h5", paddingTop: 2, children: "About:" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      material.TextField,
+      {
+        fullWidth: true,
+        multiline: true,
+        variant: "standard",
+        value: description,
+        onChange: (e) => setDescription(e.target.value),
+        sx: {
+          paddingTop: 1,
+          "& .MuiInputBase-root": {
+            lineHeight: 1.5,
+            whiteSpace: "pre-wrap"
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: {
+      mt: 2,
+      width: "100%",
+      p: 1.5,
+      borderRadius: 2,
+      boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.1)",
+      background: "linear-gradient(135deg, rgba(180, 180,180, 1), rgba(225, 225, 225, 0.8))",
+      color: "rgba(0,0,0,0.5)",
+      border: "1px dashed rgba(0,0,0,0.2)"
+    }, children: "Location Data (Not Editable)" })
+  ] }) });
+}
+function EventBanner(props) {
+  const { isOwner, updateEvent, event } = useEventEdit();
+  const [isEditing, setIsEditing] = React7.useState(false);
+  if (!event && !props.bannerUrl) return null;
+  const bannerUrl = props.bannerUrl || (event == null ? void 0 : event.bannerUrl);
+  const links = props.links || (event == null ? void 0 : event.links) || [];
+  const title = props.title || (event == null ? void 0 : event.title) || "";
+  const eventTag = props.eventTag || (event == null ? void 0 : event.eventTag);
+  const bannerColor = props.bannerColor || (event == null ? void 0 : event.bannerColor);
+  if (!bannerUrl || !eventTag) return null;
+  if (isEditing) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      EventBannerEdit,
+      {
+        initialValue: {
+          bannerUrl,
+          bannerColor,
+          links,
+          title,
+          eventTag
+        },
+        onCancel: () => setIsEditing(false),
+        onSave: async (payload) => {
+          const success = await updateEvent(payload);
+          if (success) {
+            setIsEditing(false);
+          }
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    EventBannerView,
+    {
+      ...props,
+      bannerUrl,
+      links,
+      title,
+      eventTag,
+      bannerColor,
+      isOwner,
+      onEdit: () => setIsEditing(true)
+    }
+  );
+}
+function EventBannerView({
+  bannerUrl,
+  links,
+  bannerColor,
+  title,
+  eventTag,
+  attendees,
+  numGames,
+  isOwner,
+  onEdit
+}) {
+  const backgroundColor = bannerColor || "linear-gradient(135deg, rgba(25,118,210,0.8), rgba(25,118,210,1))";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Grid9__default.default,
+    {
+      sx: {
+        background: backgroundColor,
+        paddingTop: "8px",
+        position: "relative"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Grid9__default.default, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            material.Box,
+            {
+              sx: {
+                width: "100%",
+                height: "auto",
+                maxHeight: "250px",
+                overflow: "hidden",
+                display: "flex",
+                justifyContent: "center"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  material.Box,
+                  {
+                    component: "img",
+                    src: bannerUrl.desktop,
+                    alt: title,
+                    sx: {
+                      width: "100%",
+                      height: "auto",
+                      objectFit: "contain",
+                      display: { xs: "none", md: "block" }
+                    }
+                  }
+                ),
+                bannerUrl.mobile && /* @__PURE__ */ jsxRuntime.jsx(
+                  material.Box,
+                  {
+                    component: "img",
+                    src: bannerUrl.mobile,
+                    alt: title,
+                    sx: {
+                      width: "100%",
+                      height: "auto",
+                      objectFit: "contain",
+                      display: { xs: "block", md: "none" }
+                    }
+                  }
+                ),
+                !bannerUrl.mobile && /* @__PURE__ */ jsxRuntime.jsx(
+                  material.Box,
+                  {
+                    component: "img",
+                    src: bannerUrl.desktop,
+                    alt: title,
+                    sx: {
+                      width: "100%",
+                      height: "auto",
+                      objectFit: "contain",
+                      display: { xs: "block", md: "none" }
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Grid9__default.default,
+            {
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              paddingTop: "3px",
+              paddingBottom: "3px",
+              sx: { gap: 1.5, flexWrap: "wrap" },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  material.Box,
+                  {
+                    sx: {
+                      px: 1.5,
+                      py: 0.5,
+                      color: "#fff",
+                      bgcolor: "rgba(0,0,0,0.7)",
+                      borderRadius: 2,
+                      boxShadow: "0 8px 16px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.15)",
+                      border: "1px solid rgba(255,255,255,0.25)",
+                      backdropFilter: "blur(6px)",
+                      fontWeight: 700,
+                      letterSpacing: 0.2,
+                      alignItems: "center",
+                      justifyContent: "center"
+                    },
+                    children: `${attendees} Players`
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  material.Box,
+                  {
+                    sx: {
+                      px: 1.5,
+                      py: 0.5,
+                      color: "#fff",
+                      bgcolor: "rgba(0,0,0,0.7)",
+                      borderRadius: 2,
+                      boxShadow: "0 8px 16px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.15)",
+                      border: "1px solid rgba(255,255,255,0.25)",
+                      backdropFilter: "blur(6px)",
+                      fontWeight: 700,
+                      letterSpacing: 0.2,
+                      alignItems: "center",
+                      justifyContent: "center"
+                    },
+                    children: `${numGames} tables`
+                  }
+                ),
+                generateTagsDisplay(eventTag),
+                links.map((link) => generateLink(link))
+              ]
+            }
+          )
+        ] }),
+        isOwner && /* @__PURE__ */ jsxRuntime.jsx(
+          material.Button,
+          {
+            variant: "contained",
+            onClick: onEdit,
+            sx: {
+              position: "absolute",
+              top: 16,
+              right: 16,
+              bgcolor: "rgba(255, 255, 255, 0.9)",
+              color: "primary.main",
+              "&:hover": {
+                bgcolor: "white"
+              }
+            },
+            children: "Edit"
+          }
+        )
+      ]
+    }
+  );
+}
+var generateLink = function(link) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.Box,
+    {
+      component: "a",
+      href: link.url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      sx: {
+        px: 1.5,
+        py: 0.5,
+        color: "#fff",
+        bgcolor: "rgba(0,0,0,0.7)",
+        borderRadius: 2,
+        boxShadow: "0 8px 16px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.15)",
+        border: "1px solid rgba(255,255,255,0.25)",
+        backdropFilter: "blur(6px)",
+        fontWeight: 700,
+        letterSpacing: 0.2,
+        alignItems: "center",
+        justifyContent: "center",
+        textDecoration: "none",
+        "&:hover": {
+          bgcolor: "rgba(255,255,255,0.1)"
+        }
+      },
+      children: link.text
+    },
+    link.text
+  );
+};
+var BaseSearchResultCard = ({
+  result,
+  onClick,
+  children,
+  icon,
+  tags
+}) => {
+  const handleClick = () => {
+    if (onClick) {
+      onClick(result.id);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.Card,
+    {
+      elevation: 6,
+      sx: {
+        width: "100%",
+        cursor: onClick ? "pointer" : "default",
+        boxShadow: "0px 8px 24px rgba(0, 0, 0, 0.15)",
+        transition: "box-shadow 0.3s ease-in-out",
+        "&:hover": {
+          boxShadow: "0px 12px 28px rgba(0, 0, 0, 0.2)"
+        },
+        marginBottom: 2
+      },
+      onClick: handleClick,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(material.CardContent, { sx: { display: "flex", alignItems: "flex-start" }, children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { mr: 2, display: "flex", alignItems: "center", pt: 0.5 }, children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { flex: 1 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h6", sx: { mb: 1 }, children: result.title }),
+          children,
+          /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body1", children: result.description }),
+          result.tags && result.tags.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { mt: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: {
+            display: "block",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "clip",
+            pl: 0.5
+            // Add some padding to prevent clipping of the leftmost tag
+          }, children: (() => {
+            const MAX_VISIBLE = 5;
+            const tagObjs = result.tags.map((tagId) => tags.find((t) => t.id === tagId)).filter((t) => Boolean(t));
+            const visible = tagObjs.slice(0, MAX_VISIBLE);
+            const hiddenCount = Math.max(tagObjs.length - visible.length, 0);
+            return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              visible.map((tag) => generateTagsDisplay(tag)),
+              hiddenCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+                "span",
+                {
+                  className: "inline-block text-sm px-3 py-1 rounded-full outline-black outline-2 font-outlined",
+                  style: {
+                    marginTop: "6px",
+                    marginRight: "6px",
+                    marginBottom: "6px",
+                    background: "#9e9e9e",
+                    color: "white",
+                    textShadow: "black 0.2em 0.2em 0.4em"
+                  },
+                  children: [
+                    "+",
+                    hiddenCount,
+                    " more"
+                  ]
+                }
+              )
+            ] });
+          })() }) })
+        ] })
+      ] })
+    }
+  );
+};
+var BaseSearchResultCard_default = BaseSearchResultCard;
+var PlayerResultCard = ({
+  result,
+  onClick,
+  tags
+}) => {
+  const firstLetter = result.title.charAt(0).toUpperCase();
+  const getAvatarColor = (name) => {
+    const colors = [
+      "#F44336",
+      "#E91E63",
+      "#9C27B0",
+      "#673AB7",
+      "#3F51B5",
+      "#2196F3",
+      "#03A9F4",
+      "#00BCD4",
+      "#009688",
+      "#4CAF50",
+      "#8BC34A",
+      "#CDDC39",
+      "#FFEB3B",
+      "#FFC107",
+      "#FF9800",
+      "#FF5722"
+    ];
+    let hash = 0;
+    for (let i = 0; i < name.length; i++) {
+      hash = name.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    return colors[Math.abs(hash) % colors.length];
+  };
+  const avatarColor = getAvatarColor(result.title);
+  const playerIcon = /* @__PURE__ */ jsxRuntime.jsx(
+    Avatar__default.default,
+    {
+      src: result.imageUrl,
+      alt: result.title,
+      sx: {
+        width: 40,
+        height: 40,
+        bgcolor: !result.imageUrl ? avatarColor : void 0
+      },
+      children: !result.imageUrl && firstLetter
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(BaseSearchResultCard_default, { result, onClick, icon: playerIcon, tags });
+};
+var PlayerResultCard_default = PlayerResultCard;
+var TableResultCard = ({ result, tags, onClick }) => {
+  const capacity = result.capacity || 1;
+  const numPlayers = result.numPlayers || 0;
+  const occupancy = numPlayers / capacity * 100;
+  return /* @__PURE__ */ jsxRuntime.jsx(BaseSearchResultCard, { result, tags, onClick, icon: /* @__PURE__ */ jsxRuntime.jsx(CasinoIcon__default.default, { color: "primary" }), children: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { mb: 1 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 0.5 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "body2", color: "text.secondary", children: [
+        "Players: ",
+        numPlayers,
+        " / ",
+        capacity
+      ] }),
+      result.dungeonMaster ? /* @__PURE__ */ jsxRuntime.jsx(material.Chip, { label: "DM Present", size: "small", color: "success", variant: "outlined" }) : /* @__PURE__ */ jsxRuntime.jsx(material.Chip, { label: "No DM", size: "small", color: "warning", variant: "outlined" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(material.LinearProgress, { variant: "determinate", value: occupancy, sx: { height: 8, borderRadius: 4 } })
+  ] }) });
+};
+var TableResultCard_default = TableResultCard;
+var EventResultCard = ({
+  result,
+  onClick,
+  tags
+}) => {
+  const formatDate = (dateString) => {
+    const options = {
+      weekday: "long",
+      year: "numeric",
+      month: "long",
+      day: "numeric"
+    };
+    try {
+      const date = new Date(dateString);
+      return date.toLocaleDateString("en-US", options);
+    } catch {
+      return dateString;
+    }
+  };
+  const formattedDate = result.date ? formatDate(result.date) : "Date TBD";
+  const location = result.location || "Location TBD";
+  return /* @__PURE__ */ jsxRuntime.jsx(BaseSearchResultCard_default, { result, onClick, icon: /* @__PURE__ */ jsxRuntime.jsx(EventIcon__default.default, { color: "primary" }), tags, children: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { mb: 1 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", mb: 0.5 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CalendarTodayIcon__default.default, { sx: { mr: 1, fontSize: "small", color: "text.secondary" } }),
+      /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", color: "text.secondary", children: formattedDate })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", mb: 1 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(LocationOnIcon__default.default, { sx: { mr: 1, fontSize: "small", color: "text.secondary" } }),
+      /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", color: "text.secondary", children: location })
+    ] })
+  ] }) });
+};
+var EventResultCard_default = EventResultCard;
+var ResultsContainer = ({
+  results,
+  onResultClick,
+  tags
+}) => {
+  if (results.length === 0 || !results.map) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Box2__default.default, { sx: { textAlign: "center", py: 4 }, children: "No results found. Try adjusting your filters." });
+  }
+  const onPlayerClick = (id) => {
+    onResultClick == null ? void 0 : onResultClick(id, "player");
+  };
+  const onTableClick = (id) => {
+    onResultClick == null ? void 0 : onResultClick(id, "table");
+  };
+  const onEventClick = (id) => {
+    onResultClick == null ? void 0 : onResultClick(id, "event");
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(Box2__default.default, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: results.map((result) => {
+    switch (result.type) {
+      case "player":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          PlayerResultCard_default,
+          {
+            result,
+            onClick: onPlayerClick,
+            tags
+          },
+          result.id
+        );
+      case "table":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          TableResultCard_default,
+          {
+            result,
+            onClick: onTableClick,
+            tags
+          },
+          result.id
+        );
+      case "event":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          EventResultCard_default,
+          {
+            result,
+            onClick: onEventClick,
+            tags
+          },
+          result.id
+        );
+      default:
+        console.error(`Unknown result type: ${result.type}`);
+        return null;
+    }
+  }) });
+};
+var ResultsContainer_default = ResultsContainer;
+var ScrollableResultsList = ({
+  results,
+  tags,
+  maxHeight = 400,
+  onResultClick,
+  emptyText
+}) => {
+  const hasResults = Array.isArray(results) && results.length > 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(Box2__default.default, { sx: { maxHeight, overflowY: "auto", pr: 1 }, children: hasResults ? /* @__PURE__ */ jsxRuntime.jsx(ResultsContainer_default, { results, onResultClick, tags }) : /* @__PURE__ */ jsxRuntime.jsx(Box2__default.default, { sx: { textAlign: "center", py: 2 }, children: emptyText || "No results to display." }) });
+};
+var ScrollableResultsList_default = ScrollableResultsList;
+var TablesScrollableList = ({
+  results,
+  tags,
+  maxHeight,
+  onResultClick,
+  sortBy = "availability"
+}) => {
+  const tables = (results || []).filter((r) => (r == null ? void 0 : r.type) === "table");
+  const getAvailableSlots = (r) => {
+    const capacity = typeof r.capacity === "number" ? r.capacity : 0;
+    const playersCount = typeof r.numPlayers === "number" ? r.numPlayers : 0;
+    return Math.max(capacity - playersCount, 0);
+  };
+  const sortedTables = sortBy === "availability" ? [...tables].sort((a, b) => getAvailableSlots(b) - getAvailableSlots(a)) : tables;
+  const handleClick = (id) => onResultClick == null ? void 0 : onResultClick(id);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ScrollableResultsList_default,
+    {
+      results: sortedTables,
+      tags,
+      maxHeight,
+      onResultClick: (id, type) => {
+        if (type === "table") handleClick(id);
+      }
+    }
+  );
+};
+var TablesScrollableList_default = TablesScrollableList;
+var EventTablesCard = ({
+  tables,
+  tags,
+  maxHeight = 450,
+  onTableClick
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Card10__default.default, { elevation: 6, sx: { width: "100%", boxShadow: "0px 8px 24px rgba(0, 0, 0, 0.15)" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(CardHeader4__default.default, { title: "Tables" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Divider2__default.default, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(CardContent10__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(TablesScrollableList_default, { results: tables, tags, maxHeight, onResultClick: onTableClick, sortBy: "availability" }) })
+  ] });
+};
+var EventTablesCard_default = EventTablesCard;
+function EventPageLayout({
+  mergedEvent,
+  isOwner,
+  updateEvent,
+  updateImages,
+  attendees,
+  numGames,
+  tables,
+  allTags
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Grid9__default.default, { container: true, flexDirection: "column", children: /* @__PURE__ */ jsxRuntime.jsxs(EventEditProvider, { initialEvent: mergedEvent, value: { isOwner, updateEvent, updateImages }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Grid9__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      EventBanner,
+      {
+        attendees,
+        numGames
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Grid9__default.default, { container: true, flexDirection: "row", spacing: 3, size: { xs: 12, md: 12 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Grid9__default.default, { size: { xs: 12, md: 4 }, spacing: 3, padding: 3, children: /* @__PURE__ */ jsxRuntime.jsx(
+        EventBasicInfo,
+        {
+          locationId: mergedEvent.location || "0"
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Grid9__default.default, { size: { xs: 12, md: 8 }, spacing: 3, padding: 3, children: /* @__PURE__ */ jsxRuntime.jsx(EventTablesCard_default, { tables, tags: allTags }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(Grid9__default.default, {})
+  ] }) });
+}
+var PlayerDetails = ({
+  age,
+  yearsPlaying,
+  discordUsername,
+  preferredGames
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Card,
+    {
+      sx: {
+        margin: "1rem",
+        background: "linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(25, 118, 210, 1))",
+        // Primary Blue Gradient
+        boxShadow: "0px 8px 15px rgba(25, 118, 210, 0.3)",
+        // Deep shadow based on the color
+        borderRadius: "12px",
+        // Rounded corners
+        color: "#FFFFFF",
+        // White as the base text color for contrast
+        position: "relative",
+        overflow: "hidden"
+        // Ensures clean edges
+      },
+      className: "transition duration-300 transform hover:scale-105 hover:shadow-2xl",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "absolute inset-0 bg-gradient-to-t from-white/10 to-transparent opacity-60",
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(material.CardContent, { className: "relative p-6", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.Typography,
+            {
+              variant: "h5",
+              className: "font-bold uppercase text-center tracking-wide mb-4",
+              sx: {
+                color: "#FFFFFF",
+                // Bright white for high contrast
+                textShadow: "0px 4px 8px rgba(0, 0, 0, 0.5)",
+                // Stronger shadow for bold presence
+                fontSize: "1.5rem"
+                // Slightly larger title size
+              },
+              children: "Player Details"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+            age !== null && /* @__PURE__ */ jsxRuntime.jsxs(
+              material.Typography,
+              {
+                variant: "body2",
+                className: "text-sm font-medium",
+                sx: {
+                  color: "#FFFFFF",
+                  textShadow: "0px 2px 6px rgba(0, 0, 0, 0.5)",
+                  fontWeight: "bold"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-extrabold text-cyan-300", children: "Age:" }),
+                  " ",
+                  age
+                ]
+              }
+            ),
+            yearsPlaying !== null && /* @__PURE__ */ jsxRuntime.jsxs(
+              material.Typography,
+              {
+                variant: "body2",
+                className: "text-sm font-medium",
+                sx: {
+                  color: "#FFFFFF",
+                  textShadow: "0px 2px 6px rgba(0, 0, 0, 0.5)",
+                  fontWeight: "bold"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-extrabold text-cyan-300", children: "Years Playing:" }),
+                  " ",
+                  yearsPlaying
+                ]
+              }
+            ),
+            discordUsername && /* @__PURE__ */ jsxRuntime.jsxs(
+              material.Typography,
+              {
+                variant: "body2",
+                className: "text-sm font-medium",
+                sx: {
+                  color: "#FFFFFF",
+                  textShadow: "0px 2px 6px rgba(0, 0, 0, 0.5)",
+                  fontWeight: "bold"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-extrabold text-cyan-300", children: "Discord Username:" }),
+                  " ",
+                  discordUsername
+                ]
+              }
+            ),
+            preferredGames && preferredGames.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+              material.Typography,
+              {
+                variant: "body2",
+                className: "text-sm font-medium",
+                sx: {
+                  color: "#FFFFFF",
+                  textShadow: "0px 2px 6px rgba(0, 0, 0, 0.5)",
+                  fontWeight: "bold"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-extrabold text-cyan-300", children: "Preferred Games:" }),
+                  " ",
+                  preferredGames.join(", ")
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-6 text-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+            material.Typography,
+            {
+              variant: "caption",
+              className: "text-xs italic",
+              sx: {
+                color: "#BBDEFB",
+                // Subtle light blue for footer text
+                textShadow: "0px 1px 3px rgba(0, 0, 0, 0.2)"
+              },
+              children: "All information is player-submitted."
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+};
+var PlayerDetailsCard_default = PlayerDetails;
+
+// src/data/values.tsx
+var ProfilePictureSettings = {
+  aspectRatio: 4 / 5};
+var { aspectRatio } = ProfilePictureSettings;
+var PlayerDisplayCard = ({
+  profilePicture,
+  username,
+  bio,
+  preferredPronouns
+}) => {
+  const [imageSrc, setImageSrc] = React7.useState("/man-walking-silhouette-clipart.jpg");
+  React7.useEffect(() => {
+    async function validateImage() {
+      const newImage = profilePicture || "/man-walking-silhouette-clipart.jpg";
+      if (!profilePicture) {
+        setImageSrc("/man-walking-silhouette-clipart.jpg");
+        return;
+      }
+      const img = new Image();
+      img.src = newImage;
+      img.onload = () => {
+        setImageSrc(newImage);
+      };
+      img.onerror = () => {
+        setImageSrc("/man-walking-silhouette-clipart.jpg");
+      };
+    }
+    validateImage();
+  }, [profilePicture]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Card,
+    {
+      sx: {
+        margin: "1rem",
+        background: "linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(25, 118, 210, 1))",
+        // Vibrant blue gradient
+        boxShadow: "0px 8px 15px rgba(25, 118, 210, 0.3)",
+        // Blue shadow to add depth
+        borderRadius: "12px",
+        // Smooth rounded corners
+        color: "#FFFFFF",
+        // White text for high contrast
+        overflow: "hidden"
+        // Clean edges
+      },
+      className: "transition duration-300 transform hover:scale-105 hover:shadow-2xl",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.CardMedia,
+          {
+            component: "img",
+            image: imageSrc,
+            alt: `${username}'s Profile Picture`,
+            sx: {
+              aspectRatio,
+              height: "auto",
+              // Updates to maintain aspect ratio and fill space nicely
+              width: "100%",
+              objectFit: "scale-down"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(material.CardContent, { className: "relative p-6", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.Typography,
+            {
+              variant: "h5",
+              component: "div",
+              className: "font-bold text-lg uppercase text-center tracking-wide mb-2",
+              sx: {
+                color: "#FFFFFF",
+                // Pure white for username
+                fontSize: "1.5rem",
+                textShadow: "0px 3px 6px rgba(0, 0, 0, 0.5)"
+                // Strong shadow for visibility
+              },
+              children: username
+            }
+          ),
+          preferredPronouns && /* @__PURE__ */ jsxRuntime.jsx(
+            material.Typography,
+            {
+              variant: "body2",
+              className: "text-sm font-medium",
+              sx: {
+                color: "#E3F2FD",
+                textShadow: "0px 2px 4px rgba(0, 0, 0, 0.3)",
+                // Subtle shadow for readability
+                fontWeight: "bold",
+                // Emphasize key details
+                marginBottom: "1rem"
+              },
+              children: preferredPronouns
+            }
+          ),
+          bio && /* @__PURE__ */ jsxRuntime.jsx(
+            material.Typography,
+            {
+              variant: "body2",
+              className: "text-sm font-light",
+              sx: {
+                color: "#E3F2FD",
+                // Softer muted tone for secondary text
+                textShadow: "0px 2px 4px rgba(0, 0, 0, 0.3)",
+                // Subtle shadow for readability
+                fontStyle: "italic"
+                // Distinguish bio visually
+              },
+              children: bio
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+var PlayerDisplayCard_default = PlayerDisplayCard;
+var PlayerPromptCard = ({ title, description }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.Card,
+    {
+      sx: {
+        margin: "1rem",
+        background: "linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(25, 118, 210, 1))",
+        // Gradient color scheme
+        boxShadow: "0px 8px 15px rgba(25, 118, 210, 0.3)",
+        // Card shadow
+        borderRadius: "12px",
+        // Rounded corners
+        color: "#FFFFFF",
+        // Text contrast with the background
+        overflow: "hidden"
+        // Keeps consistent and clean card shape
+      },
+      className: "transition duration-300 transform hover:scale-105 hover:shadow-2xl",
+      children: /* @__PURE__ */ jsxRuntime.jsxs(material.CardContent, { className: "p-6", children: [
+        title && /* @__PURE__ */ jsxRuntime.jsx(
+          material.Typography,
+          {
+            variant: "h5",
+            className: "font-bold text-lg uppercase text-center tracking-wide mb-4",
+            sx: {
+              color: "#FFFFFF",
+              // Bright white for high visibility
+              textShadow: "0px 3px 6px rgba(0, 0, 0, 0.5)",
+              // Strong text shadow for contrast
+              fontSize: "1.5rem"
+            },
+            children: title
+          }
+        ),
+        description && /* @__PURE__ */ jsxRuntime.jsx(
+          material.Typography,
+          {
+            variant: "body2",
+            className: "text-sm font-medium text-center",
+            sx: {
+              color: "#E3F2FD",
+              // Softer light blue for description
+              textShadow: "0px 2px 4px rgba(0, 0, 0, 0.3)",
+              // Subtle shadow
+              lineHeight: 1.6,
+              marginTop: "1rem"
+            },
+            children: description
+          }
+        )
+      ] })
+    }
+  );
+};
+var PlayerPromptCard_default = PlayerPromptCard;
+function PlayerTagsCard(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Grid9__default.default, { container: true, children: /* @__PURE__ */ jsxRuntime.jsx(Grid9__default.default, { size: { xs: 12, md: 3 }, children: /* @__PURE__ */ jsxRuntime.jsxs(Card10__default.default, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(CardHeader4__default.default, { title: "Player Tags", style: {
+      background: "linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(25, 118, 210, 1))",
+      color: "#FFFFFF",
+      // Pure white for username
+      fontSize: "1.5rem",
+      textShadow: "0px 3px 6px rgba(0, 0, 0, 0.5)"
+      // Strong shadow for visibility
+    } }),
+    /* @__PURE__ */ jsxRuntime.jsx(CardContent10__default.default, { children: renderLabels(props.PlayerTags) })
+  ] }) }) });
+}
+var renderLabels = (tags) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: tags.map((tag) => generateLabel(tag)) });
+};
+var generateLabel = (tag) => {
+  let color = "#bfbcbb";
+  if (tag.color) color = tag.color;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: "inline-block text-sm px-3 py-1 rounded-full outline-black outline-2 font-outlined",
+      style: {
+        background: color,
+        color: "white",
+        textShadow: "black 0.2em 0.2em 0.4em"
+      },
+      children: tag.label
+    },
+    tag.id
+  );
+};
+function TagEditor({
+  title = "Tags",
+  selectedTags,
+  possibleTags,
+  onToggleTag
+}) {
+  const [inputValue, setInputValue] = React7.useState("");
+  const selectedIds = React7.useMemo(() => selectedTags.map((tag) => tag.id), [selectedTags]);
+  const options = React7.useMemo(
+    () => possibleTags.map((tag) => ({ value: tag.id, label: tag.label })),
+    [possibleTags]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(Grid9__default.default, { container: true, children: /* @__PURE__ */ jsxRuntime.jsx(Grid9__default.default, { size: { xs: 12 }, children: /* @__PURE__ */ jsxRuntime.jsxs(Card10__default.default, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      CardHeader4__default.default,
+      {
+        title,
+        style: {
+          background: "linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(25, 118, 210, 1))",
+          color: "#FFFFFF",
+          fontSize: "1.5rem",
+          textShadow: "0px 3px 6px rgba(0, 0, 0, 0.5)"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(CardContent10__default.default, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: selectedTags.map((tag) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "span",
+        {
+          className: "inline-block text-sm px-3 py-1 rounded-full outline-black outline-2 font-outlined",
+          style: {
+            background: tag.color || "#bfbcbb",
+            color: "white",
+            textShadow: "black 0.2em 0.2em 0.4em"
+          },
+          children: [
+            tag.label,
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => onToggleTag(tag.id),
+                className: "ml-2 text-red-500 bg-white bg-opacity-50 rounded-full outline-black outline-2 font-outlined",
+                children: "\xD7"
+              }
+            )
+          ]
+        },
+        tag.id
+      )) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Grid9__default.default, { container: true, spacing: 3, children: /* @__PURE__ */ jsxRuntime.jsx(Grid9__default.default, { sx: { marginTop: 3, width: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+        Autocomplete__default.default,
+        {
+          options,
+          filterOptions: (availableOptions, state) => availableOptions.filter(
+            (option) => !selectedIds.includes(option.value) && option.label.toLowerCase().includes(state.inputValue.toLowerCase())
+          ).slice(0, 3),
+          value: null,
+          inputValue,
+          onInputChange: (event, newInputValue) => {
+            if (event && event.type === "change") {
+              setInputValue(newInputValue);
+            }
+          },
+          onChange: (event, newValue) => {
+            if (newValue) {
+              onToggleTag(newValue.value);
+            }
+            setInputValue("");
+          },
+          slots: { popper: CustomPopper },
+          renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(TextField3__default.default, { ...params, label: "Select Tags" })
+        },
+        selectedIds.join("-")
+      ) }) })
+    ] })
+  ] }) }) });
+}
+var CustomPopper = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Popper__default.default,
+    {
+      ...props,
+      modifiers: [
+        {
+          name: "preventOverflow",
+          options: { boundary: "viewport" }
+        },
+        {
+          name: "offset",
+          options: { offset: [0, -10] }
+        }
+      ],
+      placement: "top-start"
+    }
+  );
+};
+function PlayerTagsEdit(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TagEditor,
+    {
+      title: "Player Tags",
+      selectedTags: props.PlayerTags,
+      possibleTags: props.possibleTags,
+      onToggleTag: props.updatePlayerTags
+    }
+  );
+}
+var SORT_OPTIONS = [
+  { id: "relevance", label: "Relevance" },
+  { id: "newest", label: "Newest" },
+  { id: "popular", label: "Most Popular" }
+];
+var SortOptions = ({
+  defaultValue: defaultValue2 = "relevance",
+  onChange
+}) => {
+  const handleSortChange = (event) => {
+    onChange == null ? void 0 : onChange(event.target.value);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Typography10__default.default, { variant: "h6", gutterBottom: true, children: "Sort By" }),
+    /* @__PURE__ */ jsxRuntime.jsx(FormControl2__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(RadioGroup__default.default, { defaultValue: defaultValue2, onChange: handleSortChange, children: SORT_OPTIONS.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+      FormControlLabel__default.default,
+      {
+        value: option.id,
+        control: /* @__PURE__ */ jsxRuntime.jsx(Radio__default.default, {}),
+        label: option.label
+      },
+      option.id
+    )) }) })
+  ] });
+};
+var SortOptions_default = SortOptions;
+var TagsFilter = ({
+  onChange,
+  tags: Tags = []
+}) => {
+  const [mustHaveTags, setMustHaveTags] = React7__default.default.useState([]);
+  const [mustNotHaveTags, setMustNotHaveTags] = React7__default.default.useState([]);
+  const [shouldHaveAtLeastOneTags, setShouldHaveAtLeastOneTags] = React7__default.default.useState([]);
+  Tags = !!Tags ? Tags : [];
+  const [inputValues, setInputValues] = React7__default.default.useState({
+    mustHave: "",
+    mustNotHave: "",
+    shouldHaveAtLeastOne: ""
+  });
+  const tagOptions = React7__default.default.useMemo(() => {
+    console.log("available tags: " + JSON.stringify(Tags));
+    console.log(!Tags);
+    if (!Tags || Tags.length == 0 || !Tags.map) return [];
+    return Tags.map((tag) => ({
+      value: tag.id,
+      label: tag.label
+    }));
+  }, [Tags]);
+  const handleTagChange = (tagId, category) => {
+    let newTags = [];
+    switch (category) {
+      case "mustHave":
+        newTags = mustHaveTags.includes(tagId) ? mustHaveTags.filter((id) => id !== tagId) : [...mustHaveTags, tagId];
+        setMustHaveTags(newTags);
+        break;
+      case "mustNotHave":
+        newTags = mustNotHaveTags.includes(tagId) ? mustNotHaveTags.filter((id) => id !== tagId) : [...mustNotHaveTags, tagId];
+        setMustNotHaveTags(newTags);
+        break;
+      case "shouldHaveAtLeastOne":
+        newTags = shouldHaveAtLeastOneTags.includes(tagId) ? shouldHaveAtLeastOneTags.filter((id) => id !== tagId) : [...shouldHaveAtLeastOneTags, tagId];
+        setShouldHaveAtLeastOneTags(newTags);
+        break;
+    }
+    if (onChange) {
+      onChange({
+        mustHave: category === "mustHave" ? newTags : mustHaveTags,
+        mustNotHave: category === "mustNotHave" ? newTags : mustNotHaveTags,
+        shouldHaveAtLeastOne: category === "shouldHaveAtLeastOne" ? newTags : shouldHaveAtLeastOneTags
+      });
+    }
+  };
+  const renderSelectedTags = (selectedTags, category) => {
+    const tagValues = [];
+    if (!Tags || Tags.length == 0 || !Tags.map) return null;
+    Tags.forEach((tag) => {
+      if (selectedTags.includes(tag.id)) {
+        tagValues.push(tag);
+      }
+    });
+    if (tagValues.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(Box2__default.default, { sx: { display: "flex", flexWrap: "wrap", gap: 1, mb: 2 }, children: tagValues.map((tag) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        className: "inline-block text-sm px-3 py-1 rounded-full outline-black outline-2 font-outlined",
+        style: {
+          background: tag.color || "#bfbcbb",
+          color: "white",
+          textShadow: "black 0.2em 0.2em 0.4em"
+        },
+        children: [
+          tag.label,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => handleTagChange(tag.id, category),
+              className: "ml-2 text-red-500 bg-white bg-opacity-50 rounded-full outline-black outline-2 font-outlined",
+              children: "\xD7"
+            }
+          )
+        ]
+      },
+      tag.id
+    )) });
+  };
+  const createTagSelector = (category, label) => {
+    const selectedTags = category === "mustHave" ? mustHaveTags : category === "mustNotHave" ? mustNotHaveTags : shouldHaveAtLeastOneTags;
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Typography10__default.default, { variant: "subtitle1", gutterBottom: true, sx: { mt: 2 }, children: label }),
+      renderSelectedTags(selectedTags, category),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Autocomplete__default.default,
+        {
+          options: tagOptions,
+          filterOptions: (options, state) => {
+            const tagsToExclude = /* @__PURE__ */ new Set();
+            selectedTags.forEach((id) => tagsToExclude.add(id));
+            if (category !== "mustHave") {
+              mustHaveTags.forEach((id) => tagsToExclude.add(id));
+            }
+            if (category !== "mustNotHave") {
+              mustNotHaveTags.forEach((id) => tagsToExclude.add(id));
+            }
+            if (category !== "shouldHaveAtLeastOne") {
+              shouldHaveAtLeastOneTags.forEach((id) => tagsToExclude.add(id));
+            }
+            return options.filter(
+              (option) => (
+                // Exclude options already selected in any category
+                !tagsToExclude.has(option.value) && // Filter based on user input
+                option.label.toLowerCase().includes(state.inputValue.toLowerCase())
+              )
+            ).slice(0, 3);
+          },
+          value: null,
+          inputValue: inputValues[category],
+          onInputChange: (event, newInputValue) => {
+            if (event && event.type === "change") {
+              setInputValues({
+                ...inputValues,
+                [category]: newInputValue
+              });
+            }
+          },
+          onChange: (event, newValue) => {
+            if (newValue) {
+              handleTagChange(newValue.value, category);
+            }
+            setInputValues({
+              ...inputValues,
+              [category]: ""
+            });
+          },
+          slots: { popper: CustomPopper2 },
+          renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(TextField3__default.default, { ...params, label: `Select ${label}` })
+        },
+        `${category}-${selectedTags.join("-")}`
+      )
+    ] });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Typography10__default.default, { variant: "h6", gutterBottom: true, children: "Tags" }),
+    createTagSelector("mustHave", "Must Have Tags"),
+    /* @__PURE__ */ jsxRuntime.jsx(Divider2__default.default, { sx: { my: 2 } }),
+    createTagSelector("mustNotHave", "Must Not Have Tags"),
+    /* @__PURE__ */ jsxRuntime.jsx(Divider2__default.default, { sx: { my: 2 } }),
+    createTagSelector("shouldHaveAtLeastOne", "Should Contain At Least One Tag")
+  ] });
+};
+var CustomPopper2 = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Popper__default.default,
+    {
+      ...props,
+      modifiers: [
+        {
+          name: "preventOverflow",
+          options: {
+            boundary: "viewport"
+            // Prevent the Popper from going outside the viewport
+          }
+        },
+        {
+          name: "offset",
+          options: {
+            offset: [0, -10]
+            // Set negative vertical offset (adjust value as needed)
+          }
+        }
+      ],
+      placement: "top-start"
+    }
+  );
+};
+var TagsFilter_default = TagsFilter;
+var FILTER_TYPES = [
+  { id: "player", label: "Players" },
+  { id: "event", label: "Events", disabled: true },
+  { id: "table", label: "Tables", disabled: true }
+];
+var TypeFilter = ({ onChange }) => {
+  const [selectedTypes, setSelectedTypes] = React7__default.default.useState([]);
+  const handleTypeChange = (typeId) => {
+    const newSelectedTypes = selectedTypes.includes(typeId) ? selectedTypes.filter((id) => id !== typeId) : [...selectedTypes, typeId];
+    setSelectedTypes(newSelectedTypes);
+    onChange == null ? void 0 : onChange(newSelectedTypes);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Typography10__default.default, { variant: "h6", gutterBottom: true, children: "Type" }),
+    /* @__PURE__ */ jsxRuntime.jsx(FormGroup__default.default, { children: FILTER_TYPES.map((type) => /* @__PURE__ */ jsxRuntime.jsx(
+      FormControlLabel__default.default,
+      {
+        control: /* @__PURE__ */ jsxRuntime.jsx(
+          Checkbox__default.default,
+          {
+            checked: selectedTypes.includes(type.id),
+            onChange: () => handleTypeChange(type.id),
+            disabled: type.disabled
+          }
+        ),
+        label: type.label
+      },
+      type.id
+    )) })
+  ] });
+};
+var TypeFilter_default = TypeFilter;
+var FiltersContainer = ({
+  onTypeChange,
+  onTagChange,
+  onSubmit,
+  tags
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Box2__default.default, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TypeFilter_default, { onChange: onTypeChange }),
+    /* @__PURE__ */ jsxRuntime.jsx(Divider2__default.default, { sx: { my: 2 } }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TagsFilter_default,
+      {
+        tags,
+        onChange: onTagChange
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(Divider2__default.default, { sx: { my: 2 } }),
+    /* @__PURE__ */ jsxRuntime.jsx(Box2__default.default, { sx: { display: "flex", justifyContent: "center", mt: 2 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Button7__default.default,
+      {
+        variant: "contained",
+        color: "primary",
+        size: "large",
+        startIcon: /* @__PURE__ */ jsxRuntime.jsx(SearchIcon__default.default, {}),
+        onClick: onSubmit,
+        sx: {
+          width: "100%",
+          py: 1.5,
+          borderRadius: 2,
+          boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.1)",
+          background: "linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(25, 118, 210, 1))",
+          "&:hover": {
+            background: "linear-gradient(135deg, rgba(25, 118, 210, 0.9), rgba(25, 118, 210, 1))",
+            boxShadow: "0px 6px 15px rgba(0, 0, 0, 0.2)"
+          }
+        },
+        children: "Search"
+      }
+    ) })
+  ] });
+};
+var FiltersContainer_default = FiltersContainer;
+var PlayersScrollableList = ({
+  results,
+  tags,
+  maxHeight,
+  onResultClick
+}) => {
+  const players = (results || []).filter((r) => (r == null ? void 0 : r.type) === "player");
+  const handleClick = (id) => onResultClick == null ? void 0 : onResultClick(id);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ScrollableResultsList_default,
+    {
+      results: players,
+      tags,
+      maxHeight,
+      onResultClick: (id, type) => {
+        if (type === "player") handleClick(id);
+      }
+    }
+  );
+};
+var PlayersScrollableList_default = PlayersScrollableList;
+var SearchResultCard = ({
+  result,
+  onClick,
+  tags
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(BaseSearchResultCard_default, { result, onClick, tags });
+};
+var SearchResultCard_default = SearchResultCard;
+function SearchPageLayout({
+  results,
+  title = "Search Results",
+  onTypeChange,
+  onTagChange,
+  onSubmit,
+  onResultClick,
+  validTags,
+  allTags
+}) {
+  "use client";
+  const theme = material.useTheme();
+  const isMobile = material.useMediaQuery(theme.breakpoints.down("md"));
+  return /* @__PURE__ */ jsxRuntime.jsxs(Box2__default.default, { sx: { padding: 2 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Card10__default.default, { sx: { marginBottom: 2 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      CardHeader4__default.default,
+      {
+        title,
+        style: {
+          background: "linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(25, 118, 210, 1))",
+          color: "#FFFFFF",
+          fontSize: "1.5rem",
+          textShadow: "0px 3px 6px rgba(0, 0, 0, 0.5)"
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Grid9__default.default, { container: true, spacing: 2, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Grid9__default.default, { size: { xs: 12, md: 3 }, children: /* @__PURE__ */ jsxRuntime.jsxs(Card10__default.default, { sx: { marginBottom: isMobile ? 2 : 0 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          CardHeader4__default.default,
+          {
+            title: "Filters",
+            style: {
+              background: "linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(25, 118, 210, 1))",
+              color: "#FFFFFF",
+              fontSize: "1.5rem",
+              textShadow: "0px 3px 6px rgba(0, 0, 0, 0.5)"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(CardContent10__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          FiltersContainer_default,
+          {
+            onTypeChange,
+            onTagChange,
+            onSubmit,
+            tags: validTags
+          }
+        ) })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Grid9__default.default, { size: { xs: 12, md: 9 }, children: /* @__PURE__ */ jsxRuntime.jsxs(Card10__default.default, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          CardHeader4__default.default,
+          {
+            title: "Results",
+            style: {
+              background: "linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(25, 118, 210, 1))",
+              color: "#FFFFFF",
+              fontSize: "1.5rem",
+              textShadow: "0px 3px 6px rgba(0, 0, 0, 0.5)"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(CardContent10__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          ResultsContainer_default,
+          {
+            results,
+            onResultClick,
+            tags: allTags
+          }
+        ) })
+      ] }) })
+    ] })
+  ] });
+}
+var GameTableContext = React7__default.default.createContext(void 0);
+function GameTableProvider(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.children });
+}
+function useGameTableContext() {
+  const context = React7__default.default.useContext(GameTableContext);
+  if (context) {
+    return context;
+  }
+  throw new Error("useGameTableContext is deprecated in the package build. Pass table data through props instead.");
+}
+var ModalContext = React7.createContext({
+  showModal: (content) => {
+  },
+  hideModal: () => {
+  }
+});
+var useModal = () => React7.useContext(ModalContext);
+var Modal = ({ onClose, children }) => {
+  const modalRef = React7.useRef(null);
+  const previouslyFocusedElement = React7.useRef(null);
+  React7.useEffect(() => {
+    var _a;
+    if (children) {
+      previouslyFocusedElement.current = document.activeElement;
+      (_a = modalRef.current) == null ? void 0 : _a.focus();
+    }
+    return () => {
+      var _a2;
+      (_a2 = previouslyFocusedElement.current) == null ? void 0 : _a2.focus();
+    };
+  }, [children]);
+  const handleOnClose = () => {
+    onClose();
+  };
+  const handleKeyDown = (e) => {
+    var _a;
+    if (e.key !== "Tab") return;
+    const focusableElements = (_a = modalRef.current) == null ? void 0 : _a.querySelectorAll(
+      'button, [tabindex]:not([tabindex="-1"])'
+    );
+    if (!focusableElements || focusableElements.length === 0) return;
+    const first = focusableElements[0];
+    const last = focusableElements[focusableElements.length - 1];
+    if (e.shiftKey) {
+      if (document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      }
+    } else {
+      if (document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "modal-overlay",
+      onKeyDown: handleKeyDown,
+      ref: modalRef,
+      role: "dialog",
+      tabIndex: -1,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "modal-container", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "modal-control-strip", children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: handleOnClose, children: "X" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "modal-content", children })
+      ] })
+    }
+  );
+};
+var Modal_default = Modal;
+var ModalProvider = ({ children }) => {
+  const [modalContent, setModalContent] = React7.useState(null);
+  const showModal = (content) => setModalContent(content);
+  const hideModal = () => setModalContent(null);
+  return /* @__PURE__ */ jsxRuntime.jsxs(ModalContext.Provider, { value: { showModal, hideModal }, children: [
+    children,
+    modalContent && /* @__PURE__ */ jsxRuntime.jsx(Modal_default, { onClose: hideModal, children: modalContent })
+  ] });
+};
+var ModalProvider_default = ModalProvider;
+var PlayerHighlightsCard = function(props) {
+  const {
+    allTags,
+    canChangeDungeonMaster,
+    canEdit,
+    handleAssignToDungeonMaster,
+    isWaitList,
+    player,
+    removeFromTable
+  } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(material.Card, { elevation: 3, sx: { backgroundColor: canEdit ? "#fffbea" : "#f5f9fa", marginBottom: "6px" }, children: /* @__PURE__ */ jsxRuntime.jsxs(material.CardContent, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Grid9__default.default, { container: true, spacing: 2, direction: "column", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Grid9__default.default, { container: true, direction: "row", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Grid9__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(Image2__default.default, { alt: player.username + "'s profile pic", height: 64, src: player.miniPic || "", width: 64 }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Grid9__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h5", children: player.username }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(Grid9__default.default, { children: renderTagsFromIds(player.tags, allTags) })
+    ] }),
+    canEdit && /* @__PURE__ */ jsxRuntime.jsxs(Grid9__default.default, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Button7__default.default, { onClick: () => removeFromTable(player), children: isWaitList ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Deny Player" }) : /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Remove Player" }) }),
+      canChangeDungeonMaster && /* @__PURE__ */ jsxRuntime.jsx(Button7__default.default, { onClick: () => {
+        handleAssignToDungeonMaster(player);
+        removeFromTable(player);
+      }, children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Assign to DungeonMaster" }) })
+    ] })
+  ] }) });
+};
+var DMHighlightsCard = function({ canEdit, player, allTags }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(material.Card, { elevation: 3, sx: { backgroundColor: "#f5f9fa", marginBottom: "6px" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(material.CardHeader, { slotProps: { title: { variant: "h4" } }, title: "Game Master" }),
+    /* @__PURE__ */ jsxRuntime.jsx(material.CardContent, { sx: { backgroundColor: canEdit ? "#fffbea" : "inherit" }, children: /* @__PURE__ */ jsxRuntime.jsxs(Grid9__default.default, { container: true, spacing: 2, direction: "column", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Grid9__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h5", children: player.username }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Grid9__default.default, { container: true, direction: "row", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Grid9__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(Image2__default.default, { alt: player.username + "'s profile pic", height: 120, src: player.imageUrl ? player.imageUrl : "", width: 256 }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Grid9__default.default, { children: renderTagsFromIds(player.tags, allTags) }),
+        /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { children: player.description })
+      ] })
+    ] }) })
+  ] });
+};
+function TableActionsBar(props) {
+  const { hideModal, showModal } = useModal();
+  const {
+    isInEditMode,
+    numPlayers,
+    onDeleteTable,
+    onEditModeChange,
+    onJoinWaitlist,
+    onLeaveTable,
+    onPromoteWaitlistPlayer,
+    onSave,
+    slots,
+    tableStatus,
+    waitlistPlayers
+  } = props;
+  const { isOwner, isPlayer, isDM, onWaitlist } = tableStatus;
+  const canEditTable = isOwner && !isInEditMode;
+  const canSaveTable = isOwner && isInEditMode;
+  const canViewWaitlist = isOwner || isDM || waitlistPlayers.length > 0;
+  const renderPlayerWaitlistModalContent = (canMovePlayersToTable) => {
+    if (waitlistPlayers.length === 0) {
+      return /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Waitlist is empty!" });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CardHeader4__default.default, { slotProps: { title: { variant: "h4" } }, title: "Waitlist Players: " }),
+      /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "gap-8", children: waitlistPlayers.map((player) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "li",
+        {
+          className: `${canMovePlayersToTable ? "bg-amber-100 cursor-pointer" : "bg-gray-200"} mb-8 flex flex-row flex-start space-between justify-center items-center gap-3 p-2 rounded`,
+          onClick: () => canMovePlayersToTable ? onPromoteWaitlistPlayer == null ? void 0 : onPromoteWaitlistPlayer(player.id) : void 0,
+          tabIndex: 0,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Image2__default.default,
+              {
+                alt: player.username + "'s profile pic",
+                height: 64,
+                src: player.miniPic || "",
+                width: 64
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { children: player.username })
+          ]
+        },
+        player.id
+      )) }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => hideModal(), children: "close modal" })
+    ] });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(material.Grid, { container: true, direction: "column", spacing: 1, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { container: true, direction: "row", children: /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { color: "white", sx: { textShadow: "4px 4px 6px rgba(0, 0, 0, 0.5)" }, children: [
+      "Players: ",
+      numPlayers,
+      " / ",
+      slots
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(material.Grid, { container: true, direction: "row", children: [
+      !isOwner && !isPlayer && !isDM && !onWaitlist && /* @__PURE__ */ jsxRuntime.jsx(Button7__default.default, { onClick: () => onJoinWaitlist == null ? void 0 : onJoinWaitlist(), sx: buttonStyle, children: "Join Waitlist" }),
+      !isOwner && (isPlayer || onWaitlist) && /* @__PURE__ */ jsxRuntime.jsx(Button7__default.default, { onClick: () => onLeaveTable == null ? void 0 : onLeaveTable(), sx: buttonStyle, children: onWaitlist ? "Leave Waitlist" : "Leave Table" }),
+      canEditTable ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Button7__default.default, { onClick: () => onEditModeChange(true), sx: buttonStyle, endIcon: /* @__PURE__ */ jsxRuntime.jsx(EditIcon__default.default, {}), children: "Edit" }),
+        canViewWaitlist ? /* @__PURE__ */ jsxRuntime.jsx(
+          Button7__default.default,
+          {
+            endIcon: /* @__PURE__ */ jsxRuntime.jsx(ListIcon__default.default, {}),
+            onClick: () => showModal(renderPlayerWaitlistModalContent(false)),
+            sx: buttonStyle,
+            children: "View Waitlist"
+          }
+        ) : null
+      ] }) : canSaveTable ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Button7__default.default, { onClick: onSave, sx: buttonStyle, endIcon: /* @__PURE__ */ jsxRuntime.jsx(SaveIcon__default.default, {}), children: "Save" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Button7__default.default, { onClick: () => onEditModeChange(false), sx: buttonStyle, children: "Cancel" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button7__default.default,
+          {
+            endIcon: /* @__PURE__ */ jsxRuntime.jsx(ListIcon__default.default, {}),
+            onClick: () => showModal(renderPlayerWaitlistModalContent(true)),
+            sx: buttonStyle,
+            children: "Edit Waitlist"
+          }
+        )
+      ] }) : null,
+      isOwner && /* @__PURE__ */ jsxRuntime.jsx(Button7__default.default, { onClick: () => onDeleteTable == null ? void 0 : onDeleteTable(), sx: buttonStyle, endIcon: /* @__PURE__ */ jsxRuntime.jsx(DeleteIcon__default.default, {}), children: "Delete Table" })
+    ] })
+  ] });
+}
+var buttonStyle = {
+  marginLeft: "3px",
+  backgroundColor: "blue",
+  color: "white",
+  borderRadius: "5px"
+};
+var AutoResizingTextarea = (props) => {
+  const { isInEditMode, onChange, textareaRef, value } = props;
+  React7.useEffect(() => {
+    if (isInEditMode && textareaRef.current) {
+      const textarea = textareaRef.current;
+      textarea.style.height = "auto";
+      textarea.style.height = `${textarea.scrollHeight}px`;
+    }
+  }, [isInEditMode, textareaRef, value]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "textarea",
+    {
+      ref: textareaRef,
+      value,
+      onChange: (e) => onChange(e.target.value),
+      style: {
+        backgroundColor: "#fffbea",
+        overflow: "hidden",
+        resize: "none",
+        width: "100%"
+      }
+    }
+  );
+};
+var AutoResizingTextarea_default = AutoResizingTextarea;
+var NextGameCountdown = ({ nextGameTime }) => {
+  const [timeLeft, setTimeLeft] = React7.useState("");
+  React7.useEffect(() => {
+    if (!nextGameTime) return;
+    const timer = setInterval(() => {
+      const now = (/* @__PURE__ */ new Date()).getTime();
+      const distance = new Date(nextGameTime).getTime() - now;
+      if (distance < 0) {
+        clearInterval(timer);
+        setTimeLeft("Started");
+        return;
+      }
+      const days = Math.floor(distance / (1e3 * 60 * 60 * 24));
+      const hours = Math.floor(distance % (1e3 * 60 * 60 * 24) / (1e3 * 60 * 60));
+      const minutes = Math.floor(distance % (1e3 * 60 * 60) / (1e3 * 60));
+      const seconds = Math.floor(distance % (1e3 * 60) / 1e3);
+      let timeString = "";
+      if (days > 0) timeString += `${days}d `;
+      if (hours > 0 || days > 0) timeString += `${hours}h `;
+      timeString += `${minutes}m ${seconds}s`;
+      setTimeLeft(timeString);
+    }, 1e3);
+    return () => clearInterval(timer);
+  }, [nextGameTime]);
+  if (!nextGameTime) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "body2", color: "primary", sx: { fontWeight: "bold" }, children: [
+    "Next Game: ",
+    timeLeft
+  ] });
+};
+function TablePageLayout(props) {
+  var _a;
+  const { allTags, dungeonMaster, onDeleteTable, onJoinWaitlist, onLeaveTable, onSaveDraft, players, table, tableStatus, waitlistPlayers } = props;
+  const textAreaRef = React7.useRef(null);
+  const [isTableInEditMode, setIsTableInEditMode] = React7.useState(false);
+  const [currentDescription, setCurrentDescription] = React7.useState(table.description);
+  const [currentDungeonMaster, setCurrentDungeonMaster] = React7.useState(dungeonMaster);
+  const [currentPlayers, setCurrentPlayers] = React7.useState(players);
+  const [currentShortDescription, setCurrentShortDescription] = React7.useState(table.shortDescription);
+  const [currentTitle, setCurrentTitle] = React7.useState(table.title);
+  const [currentWaitlistPlayers, setCurrentWaitlistPlayers] = React7.useState(waitlistPlayers);
+  const [currentTagIds, setCurrentTagIds] = React7.useState((_a = table.tags) != null ? _a : []);
+  React7.useEffect(() => {
+    var _a2;
+    setCurrentDescription(table.description);
+    setCurrentDungeonMaster(dungeonMaster);
+    setCurrentPlayers(players);
+    setCurrentShortDescription(table.shortDescription);
+    setCurrentTitle(table.title);
+    setCurrentWaitlistPlayers(waitlistPlayers);
+    setCurrentTagIds((_a2 = table.tags) != null ? _a2 : []);
+  }, [dungeonMaster, players, table, waitlistPlayers]);
+  const currentTags = React7.useMemo(
+    () => allTags.filter((tag) => currentTagIds.includes(tag.id)),
+    [allTags, currentTagIds]
+  );
+  const handleAssignToDungeonMaster = (newDungeonMaster) => {
+    setCurrentDungeonMaster(newDungeonMaster);
+  };
+  const handleRemovePlayerFromTable = (playerToRemove) => {
+    setCurrentPlayers((prevState) => prevState.filter((player) => player.id !== playerToRemove.id));
+  };
+  const handlePromoteWaitlistPlayer = (playerIdToPromote) => {
+    setCurrentWaitlistPlayers((prevWaitlist) => {
+      const foundPlayer = prevWaitlist.find((player) => player.id === playerIdToPromote);
+      if (!foundPlayer) {
+        return prevWaitlist;
+      }
+      setCurrentPlayers((prevPlayers) => [...prevPlayers, foundPlayer]);
+      return prevWaitlist.filter((player) => player.id !== playerIdToPromote);
+    });
+  };
+  const handleToggleTag = (tagId) => {
+    setCurrentTagIds(
+      (prevState) => prevState.includes(tagId) ? prevState.filter((id) => id !== tagId) : [...prevState, tagId]
+    );
+  };
+  const handleSaveTable = () => {
+    const nextDraft = {
+      ...table,
+      description: currentDescription,
+      dungeonMaster: String(currentDungeonMaster.id),
+      players: currentPlayers.map((player) => player.id),
+      shortDescription: currentShortDescription,
+      tags: currentTagIds,
+      title: currentTitle,
+      waitlist: currentWaitlistPlayers.map((player) => player.id)
+    };
+    void (onSaveDraft == null ? void 0 : onSaveDraft(nextDraft));
+    setIsTableInEditMode(false);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.Card,
+    {
+      sx: {
+        backgroundColor: isTableInEditMode ? "lightsalmon" : "white",
+        borderRadius: "5%",
+        p: 2,
+        boxShadow: "0px 8px 15px rgba(25, 118, 210, 0.3)"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(Grid9__default.default, { container: true, direction: "column", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          Grid9__default.default,
+          {
+            container: true,
+            direction: "column",
+            spacing: 1,
+            sx: {
+              px: 2,
+              py: 1.5,
+              borderRadius: 2,
+              background: "linear-gradient(135deg, rgba(25,118,210,0.8), rgba(25,118,210,1))",
+              textShadow: "4px 4px 6px rgba(0, 0, 0, 0.5)"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(material.Box, { children: isTableInEditMode ? /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  onChange: (e) => setCurrentTitle(e.target.value),
+                  style: { backgroundColor: "#fffbea" },
+                  tabIndex: 0,
+                  type: "text",
+                  value: currentTitle
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                material.CardHeader,
+                {
+                  title: currentTitle,
+                  sx: {
+                    p: 0,
+                    "& .MuiCardHeader-title": {
+                      color: "white",
+                      fontWeight: 700
+                    }
+                  }
+                }
+              ) }),
+              isTableInEditMode ? /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  onChange: (e) => setCurrentShortDescription(e.target.value),
+                  style: { backgroundColor: "#fffbea" },
+                  tabIndex: 0,
+                  type: "text",
+                  value: currentShortDescription
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { color: "white", opacity: 0.95 }, children: currentShortDescription }),
+              /* @__PURE__ */ jsxRuntime.jsx(Grid9__default.default, { container: true, children: isTableInEditMode ? renderEditableTags(currentTags, allTags, handleToggleTag) : renderTags(currentTagIds, allTags) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                TableActionsBar,
+                {
+                  isInEditMode: isTableInEditMode,
+                  numPlayers: currentPlayers.length,
+                  onDeleteTable,
+                  onEditModeChange: setIsTableInEditMode,
+                  onJoinWaitlist,
+                  onLeaveTable,
+                  onPromoteWaitlistPlayer: handlePromoteWaitlistPlayer,
+                  onSave: handleSaveTable,
+                  slots: table.capacity || 0,
+                  tableStatus,
+                  waitlistPlayers: currentWaitlistPlayers
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(Grid9__default.default, { container: true, spacing: 2, sx: { mt: 2 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Grid9__default.default, { size: { xs: 12, md: 8 }, children: /* @__PURE__ */ jsxRuntime.jsx(material.Card, { sx: { height: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(material.CardContent, { children: isTableInEditMode ? /* @__PURE__ */ jsxRuntime.jsx(
+            AutoResizingTextarea_default,
+            {
+              isInEditMode: isTableInEditMode,
+              onChange: setCurrentDescription,
+              textareaRef: textAreaRef,
+              value: currentDescription
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { whiteSpace: "pre-wrap" }, children: currentDescription }) }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Grid9__default.default, { size: { xs: 12, md: 4 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(DMHighlightsCard, { canEdit: isTableInEditMode, player: currentDungeonMaster, allTags }),
+            /* @__PURE__ */ jsxRuntime.jsxs(material.Card, { sx: { height: "100%" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(material.CardHeader, { slotProps: { title: { variant: "h4" } }, title: "Players: " }),
+              /* @__PURE__ */ jsxRuntime.jsx(material.CardContent, { children: currentPlayers.map((player) => /* @__PURE__ */ jsxRuntime.jsx(
+                PlayerHighlightsCard,
+                {
+                  allTags,
+                  canChangeDungeonMaster: tableStatus.isOwner || tableStatus.isDM,
+                  canEdit: isTableInEditMode,
+                  handleAssignToDungeonMaster,
+                  player,
+                  removeFromTable: handleRemovePlayerFromTable
+                },
+                player.id
+              )) })
+            ] })
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+var renderTags = function(tags, allTags) {
+  if (!tags || !allTags) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Grid9__default.default, { container: true, spacing: 1, sx: { pb: 1.5 }, children: tags.map((tagId) => {
+    const tag = allTags.find((potentialTag) => tagId === potentialTag.id);
+    return tag ? generateTagsDisplay(tag) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
+  }) });
+};
+var renderEditableTags = function(selectedTags, allTags, onToggleTag) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Grid9__default.default, { size: { xs: 12 }, sx: { pb: 1.5 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    TagEditor,
+    {
+      title: "Table Tags",
+      possibleTags: allTags.filter((tag) => {
+        var _a;
+        return (_a = tag.appliesTo) == null ? void 0 : _a.tables;
+      }),
+      selectedTags,
+      onToggleTag
+    }
+  ) });
+};
+var TablePageLayout_default = TablePageLayout;
+
+exports.AutoResizingTextarea = AutoResizingTextarea_default;
+exports.BaseSearchResultCard = BaseSearchResultCard_default;
+exports.CANDIDATE_TIMEZONES = CANDIDATE_TIMEZONES;
+exports.DMHighlightsCard = DMHighlightsCard;
+exports.EventBanner = EventBanner;
+exports.EventBannerEdit = EventBannerEdit;
+exports.EventBasicInfo = EventBasicInfo;
+exports.EventBasicInfoEdit = EventBasicInfoEdit;
+exports.EventEditProvider = EventEditProvider;
+exports.EventPageLayout = EventPageLayout;
+exports.EventResultCard = EventResultCard_default;
+exports.EventTablesCard = EventTablesCard_default;
+exports.FiltersContainer = FiltersContainer_default;
+exports.GameTableProvider = GameTableProvider;
+exports.ModalContext = ModalContext;
+exports.ModalProvider = ModalProvider_default;
+exports.NextGameCountdown = NextGameCountdown;
+exports.PlayerDetailsCard = PlayerDetailsCard_default;
+exports.PlayerDisplayCard = PlayerDisplayCard_default;
+exports.PlayerHighlightsCard = PlayerHighlightsCard;
+exports.PlayerPromptCard = PlayerPromptCard_default;
+exports.PlayerResultCard = PlayerResultCard_default;
+exports.PlayerTagsCard = PlayerTagsCard;
+exports.PlayerTagsEdit = PlayerTagsEdit;
+exports.PlayersScrollableList = PlayersScrollableList_default;
+exports.ResultsContainer = ResultsContainer_default;
+exports.ScrollableResultsList = ScrollableResultsList_default;
+exports.SearchPageLayout = SearchPageLayout;
+exports.SearchResultCard = SearchResultCard_default;
+exports.SortOptions = SortOptions_default;
+exports.TableActionsBar = TableActionsBar;
+exports.TablePageLayout = TablePageLayout_default;
+exports.TableResultCard = TableResultCard_default;
+exports.TablesScrollableList = TablesScrollableList_default;
+exports.TagEditor = TagEditor;
+exports.TagsFilter = TagsFilter_default;
+exports.TypeFilter = TypeFilter_default;
+exports.generateTagsDisplay = generateTagsDisplay;
+exports.renderTagsFromIds = renderTagsFromIds;
+exports.useEventEdit = useEventEdit;
+exports.useGameTableContext = useGameTableContext;
+exports.useModal = useModal;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map