@mbpockets/shared-ui 0.2.0 → 0.2.5

package/dist/index.cjs

@@ -5,13 +5,13 @@ 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 EditIcon3 = 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 Grid8 = require('@mui/material/Grid');
+var Grid10 = require('@mui/material/Grid');
 var Card10 = require('@mui/material/Card');
 var CardContent10 = require('@mui/material/CardContent');
 var CardHeader4 = require('@mui/material/CardHeader');
@@ -19,6 +19,7 @@ var Divider3 = require('@mui/material/Divider');
 var Typography4 = require('@mui/material/Typography');
 var Pagination = require('@mui/material/Pagination');
 var Avatar = require('@mui/material/Avatar');
+var navigation = require('next/navigation');
 var Chip2 = require('@mui/material/Chip');
 var LinearProgress = require('@mui/material/LinearProgress');
 var PersonIcon = require('@mui/icons-material/Person');
@@ -29,31 +30,41 @@ 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 FormControl2 = require('@mui/material/FormControl');
+var Select2 = require('@mui/material/Select');
+var MenuItem2 = require('@mui/material/MenuItem');
 var FormControlLabel = require('@mui/material/FormControlLabel');
 var Checkbox = require('@mui/material/Checkbox');
-var FormControl2 = require('@mui/material/FormControl');
 var RadioGroup = require('@mui/material/RadioGroup');
 var Radio = require('@mui/material/Radio');
-var TextField4 = require('@mui/material/TextField');
+var TextField7 = require('@mui/material/TextField');
 var FormGroup = require('@mui/material/FormGroup');
-var Button7 = require('@mui/material/Button');
+var Button8 = require('@mui/material/Button');
 var SearchIcon = require('@mui/icons-material/Search');
 var CircularProgress3 = require('@mui/material/CircularProgress');
+var CasinoIcon = require('@mui/icons-material/Casino');
+var Dialog3 = require('@mui/material/Dialog');
+var DialogContent3 = require('@mui/material/DialogContent');
+var DialogActions3 = require('@mui/material/DialogActions');
+var IconButton3 = require('@mui/material/IconButton');
+var CloseIcon = require('@mui/icons-material/Close');
+var ReactMarkdown = require('react-markdown');
 var Image2 = require('next/image');
 var ListIcon = require('@mui/icons-material/List');
 var SaveIcon = require('@mui/icons-material/Save');
+var DialogTitle3 = require('@mui/material/DialogTitle');
 
 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 EditIcon3__default = /*#__PURE__*/_interopDefault(EditIcon3);
 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 Grid8__default = /*#__PURE__*/_interopDefault(Grid8);
+var Grid10__default = /*#__PURE__*/_interopDefault(Grid10);
 var Card10__default = /*#__PURE__*/_interopDefault(Card10);
 var CardContent10__default = /*#__PURE__*/_interopDefault(CardContent10);
 var CardHeader4__default = /*#__PURE__*/_interopDefault(CardHeader4);
@@ -71,19 +82,29 @@ 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 FormControl2__default = /*#__PURE__*/_interopDefault(FormControl2);
+var Select2__default = /*#__PURE__*/_interopDefault(Select2);
+var MenuItem2__default = /*#__PURE__*/_interopDefault(MenuItem2);
 var FormControlLabel__default = /*#__PURE__*/_interopDefault(FormControlLabel);
 var Checkbox__default = /*#__PURE__*/_interopDefault(Checkbox);
-var FormControl2__default = /*#__PURE__*/_interopDefault(FormControl2);
 var RadioGroup__default = /*#__PURE__*/_interopDefault(RadioGroup);
 var Radio__default = /*#__PURE__*/_interopDefault(Radio);
-var TextField4__default = /*#__PURE__*/_interopDefault(TextField4);
+var TextField7__default = /*#__PURE__*/_interopDefault(TextField7);
 var FormGroup__default = /*#__PURE__*/_interopDefault(FormGroup);
-var Button7__default = /*#__PURE__*/_interopDefault(Button7);
+var Button8__default = /*#__PURE__*/_interopDefault(Button8);
 var SearchIcon__default = /*#__PURE__*/_interopDefault(SearchIcon);
 var CircularProgress3__default = /*#__PURE__*/_interopDefault(CircularProgress3);
+var CasinoIcon__default = /*#__PURE__*/_interopDefault(CasinoIcon);
+var Dialog3__default = /*#__PURE__*/_interopDefault(Dialog3);
+var DialogContent3__default = /*#__PURE__*/_interopDefault(DialogContent3);
+var DialogActions3__default = /*#__PURE__*/_interopDefault(DialogActions3);
+var IconButton3__default = /*#__PURE__*/_interopDefault(IconButton3);
+var CloseIcon__default = /*#__PURE__*/_interopDefault(CloseIcon);
+var ReactMarkdown__default = /*#__PURE__*/_interopDefault(ReactMarkdown);
 var Image2__default = /*#__PURE__*/_interopDefault(Image2);
 var ListIcon__default = /*#__PURE__*/_interopDefault(ListIcon);
 var SaveIcon__default = /*#__PURE__*/_interopDefault(SaveIcon);
+var DialogTitle3__default = /*#__PURE__*/_interopDefault(DialogTitle3);
 
 // src/components/EventPage/editMode/EventBannerEdit.tsx
 var defaultValue = {
@@ -172,12 +193,29 @@ function Chip({ tag, removeCallback }) {
 function generateTagsDisplay(tag) {
   return /* @__PURE__ */ jsxRuntime.jsx(Chip, { tag }, tag.id);
 }
-function renderTagsFromIds(ids, legalTags) {
+function renderTagsFromIds(ids, legalTags, options = {}) {
   if (!ids || !legalTags || legalTags.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
   }
+  const { showEventTag = false, eventTagId } = options;
   const validTags = ids.map((id) => legalTags.find((tag) => tag.id === id)).filter((tag) => Boolean(tag));
-  return validTags.map((tag) => generateTagsDisplay(tag));
+  const sortedTags = [...validTags].sort((a, b) => {
+    if (showEventTag && eventTagId !== void 0) {
+      if (a.id === eventTagId && b.id === eventTagId) return 0;
+      if (a.id === eventTagId) return -1;
+      if (b.id === eventTagId) return 1;
+    }
+    const priorityOrder = ["Organizer Run", "Display Only"];
+    const aIndex = priorityOrder.indexOf(a.label);
+    const bIndex = priorityOrder.indexOf(b.label);
+    if (aIndex !== -1 && bIndex !== -1) {
+      return aIndex - bIndex;
+    }
+    if (aIndex !== -1) return -1;
+    if (bIndex !== -1) return 1;
+    return 0;
+  });
+  return sortedTags.map((tag) => generateTagsDisplay(tag));
 }
 function EventBannerEdit({
   initialValue,
@@ -401,7 +439,7 @@ function EventBannerEdit({
                     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: "Edit Link", children: /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { size: "small", onClick: () => openEditLink(index), sx: { color: "white", p: 0.2 }, children: /* @__PURE__ */ jsxRuntime.jsx(EditIcon3__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" }) }) })
                       ] })
                     ]
@@ -528,7 +566,7 @@ function EventBasicInfo(props) {
   );
 }
 function EventBasicInfoView({ description, locationId, startingDate, endingDate, timeInfo, timezone, isOwner, onEdit }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Grid8__default.default, { sx: { position: "relative" }, children: /* @__PURE__ */ jsxRuntime.jsx(material.Card, { style: {
+  return /* @__PURE__ */ jsxRuntime.jsx(Grid10__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: [
@@ -812,7 +850,7 @@ function EventBannerView({
 }) {
   const backgroundColor = bannerColor || "linear-gradient(135deg, rgba(25,118,210,0.8), rgba(25,118,210,1))";
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    Grid8__default.default,
+    Grid10__default.default,
     {
       sx: {
         background: backgroundColor,
@@ -820,7 +858,7 @@ function EventBannerView({
         position: "relative"
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(Grid8__default.default, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Grid10__default.default, { children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
             material.Box,
             {
@@ -879,7 +917,7 @@ function EventBannerView({
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs(
-            Grid8__default.default,
+            Grid10__default.default,
             {
               display: "flex",
               justifyContent: "center",
@@ -987,6 +1025,11 @@ var generateLink = function(link) {
     link.text
   );
 };
+
+// src/data/values.tsx
+var DEFAULT_PROFILE_PIC = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiB2aWV3Qm94PSIwIDAgMjU2IDI1NiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnIHN0eWxlPSJzdHJva2U6IG5vbmU7IHN0cm9rZS13aWR0aDogMDsgc3Ryb2tlLWRhc2hhcnJheTogbm9uZTsgc3Ryb2tlLWxpbmVjYXA6IGJ1dHQ7IHN0cm9rZS1saW5lam9pbjogbWl0ZXI7IHN0cm9rZS1taXRlcmxpbWl0OiAxMDsgZmlsbDogbm9uZTsgZmlsbC1ydWxlOiBub256ZXJvOyBvcGFjaXR5OiAxOyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMS40MDY1OTM0MDY1OTM0MDE2IDEuNDA2NTkzNDA2NTkzNDAxNikgc2NhbGUoMi44MSAyLjgxKSI+Cgk8cGF0aCBkPSJNIDQ1IDg4IGMgLTExLjA0OSAwIC0yMS4xOCAtMi4wMDMgLTI5LjAyMSAtOC42MzQgQyA2LjIxMiA3MS4xMDUgMCA1OC43NjQgMCA0NSBDIDAgMjAuMTg3IDIwLjE4NyAwIDQ1IDAgYyAyNC44MTMgMCA0NSAyMC4xODcgNDUgNDUgYyAwIDEzLjc2NSAtNi4yMTIgMjYuMTA1IC0xNS45NzkgMzQuMzY2IEMgNjYuMTgxIDg1Ljk5OCA1Ni4wNDkgODggNDUgODggeiIgc3R5bGU9InN0cm9rZTogbm9uZTsgc3Ryb2tlLXdpZHRoOiAxOyBzdHJva2UtZGFzaGFycmF5OiBub25lOyBzdHJva2UtbGluZWNhcDogYnV0dDsgc3Ryb2tlLWxpbmVqb2luOiBtaXRlcjsgc3Ryb2tlLW1pdGVybGltaXQ6IDEwOyBmaWxsOiByZ2IoMjE0LDIxNCwyMTQpOyBmaWxsLXJ1bGU6IG5vbnplcm87IG9wYWNpdHk6IDE7IiB0cmFuc2Zvcm09IiBtYXRyaXgoMSAwIDAgMSAwIDApICIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+Cgk8cGF0aCBkPSJNIDQ1IDYwLjcxIGMgLTExLjQ3OSAwIC0yMC44MTggLTkuMzM5IC0yMC44MTggLTIwLjgxNyBjIDAgLTExLjQ3OSA5LjMzOSAtMjAuODE4IDIwLjgxOCAtMjAuODE4IGMgMTEuNDc5IDAgMjAuODE3IDkuMzM5IDIwLjgxNyAyMC44MTggQyA2NS44MTcgNTEuMzcxIDU2LjQ3OSA2MC43MSA0NSA2MC43MSB6IiBzdHlsZT0ic3Ryb2tlOiBub25lOyBzdHJva2Utd2lkdGg6IDE7IHN0cm9rZS1kYXNoYXJyYXk6IG5vbmU7IHN0cm9rZS1saW5lY2FwOiBidXR0OyBzdHJva2UtbGluZWpvaW46IG1pdGVyOyBzdHJva2UtbWl0ZXJsaW1pdDogMTA7IGZpbGw6IHJnYigxNjUsMTY0LDE2NCk7IGZpbGwtcnVsZTogbm9uemVybzsgb3BhY2l0eTogMTsiIHRyYW5zZm9ybT0iIG1hdHJpeCgxIDAgMCAxIDAgMCkgIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KCTxwYXRoIGQ9Ik0gNDUgOTAgYyAtMTAuNjEzIDAgLTIwLjkyMiAtMy43NzMgLTI5LjAyOCAtMTAuNjI1IGMgLTAuNjQ4IC0wLjU0OCAtMC44OCAtMS40NDQgLTAuNTc5IC0yLjIzNyBDIDIwLjAzNCA2NC45MTkgMzEuOTMzIDU2LjcxIDQ1IDU2LjcxIHMgMjQuOTY2IDguMjA5IDI5LjYwNyAyMC40MjggYyAwLjMwMSAwLjc5MyAwLjA2OSAxLjY4OSAtMC41NzkgMi4yMzcgQyA2NS45MjIgODYuMjI3IDU1LjYxMyA5MCA0NSA5MCB6IiBzdHlsZT0ic3Ryb2tlOiBub25lOyBzdHJva2Utd2lkdGg6IDE7IHN0cm9rZS1kYXNoYXJyYXk6IG5vbmU7IHN0cm9rZS1saW5lY2FwOiBidXR0OyBzdHJva2UtbGluZWpvaW46IG1pdGVyOyBzdHJva2UtbWl0ZXJsaW1pdDogMTA7IGZpbGw6IHJnYigxNjUsMTY0LDE2NCk7IGZpbGwtcnVsZTogbm9uemVybzsgb3BhY2l0eTogMTsiIHRyYW5zZm9ybT0iIG1hdHJpeCgxIDAgMCAxIDAgMCkgIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9nPgo8L3N2Zz4=";
+var ProfilePictureSettings = {
+  aspectRatio: 4 / 5};
 var NextGameLabel = ({ nextGameTime }) => {
   const date = typeof nextGameTime === "string" ? new Date(nextGameTime) : nextGameTime;
   return /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "caption", sx: { display: "block", mb: 1, color: "primary.main", fontWeight: "bold" }, children: [
@@ -1000,17 +1043,22 @@ var BaseSearchResultCard = ({
   onClick,
   children,
   icon,
-  tags
+  tags,
+  showEventTag,
+  eventTagId
 }) => {
+  const router = navigation.useRouter();
   const handleClick = (e) => {
+    const url = `/${result.type}/${result.id}`;
+    if (e.ctrlKey || e.metaKey || e.shiftKey) {
+      e.stopPropagation();
+      window.open(url, "_blank");
+      return;
+    }
     if (onClick) {
-      if (e.ctrlKey || e.metaKey || e.shiftKey) {
-        e.stopPropagation();
-        const url = `/${result.type}/${result.id}`;
-        window.open(url, "_blank");
-      } else {
-        onClick(result.id);
-      }
+      onClick(result.id);
+    } else {
+      router.push(url);
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1019,7 +1067,7 @@ var BaseSearchResultCard = ({
       elevation: 6,
       sx: {
         width: "100%",
-        cursor: onClick ? "pointer" : "default",
+        cursor: "pointer",
         boxShadow: "0px 8px 24px rgba(0, 0, 0, 0.15)",
         transition: "box-shadow 0.3s ease-in-out",
         "&:hover": {
@@ -1041,7 +1089,7 @@ var BaseSearchResultCard = ({
             const text = full || "";
             return text.length > 200 ? `${text.slice(0, 200).trimEnd()}...` : text;
           })() }) : /* @__PURE__ */ jsxRuntime.jsx(Typography4__default.default, { variant: "body1", children: result.description }),
-          result.tags && result.tags.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Box2__default.default, { sx: { mt: 1, display: "flex", flexWrap: "wrap", gap: 1 }, children: renderTagsFromIds(result.tags, tags) })
+          result.tags && result.tags.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Box2__default.default, { sx: { mt: 1, display: "flex", flexWrap: "wrap", gap: 1 }, children: renderTagsFromIds(result.tags, tags, { showEventTag, eventTagId }) })
         ] })
       ] })
     }
@@ -1083,7 +1131,7 @@ var PlayerResultCard = ({
   const playerIcon = /* @__PURE__ */ jsxRuntime.jsx(
     Avatar__default.default,
     {
-      src: result.imageUrl,
+      src: result.imageUrl || DEFAULT_PROFILE_PIC,
       alt: result.title,
       sx: {
         width: 40,
@@ -1099,7 +1147,9 @@ var PlayerResultCard_default = PlayerResultCard;
 var TableResultCard = ({
   result,
   onClick,
-  tags
+  tags,
+  showEventTag,
+  eventTagId
 }) => {
   const rawCapacity = result.capacity;
   const hasDefinedCapacity = typeof rawCapacity === "number" && Number.isFinite(rawCapacity) && rawCapacity > 0;
@@ -1117,40 +1167,51 @@ var TableResultCard = ({
       }
     }
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(BaseSearchResultCard_default, { result, onClick, icon: tableIcon, tags, children: /* @__PURE__ */ jsxRuntime.jsxs(Box2__default.default, { sx: { mb: 2 }, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Box2__default.default, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1 }, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(Typography4__default.default, { variant: "body2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Players:" }),
-        " ",
-        hasDefinedCapacity ? `${activePlayers}/${capacity}` : activePlayers
-      ] }),
-      typeof hasDM === "boolean" && /* @__PURE__ */ jsxRuntime.jsx(
-        Chip2__default.default,
-        {
-          icon: hasDM ? /* @__PURE__ */ jsxRuntime.jsx(SupervisorAccountIcon__default.default, {}) : /* @__PURE__ */ jsxRuntime.jsx(PersonIcon__default.default, {}),
-          label: hasDM ? "DM Present" : "No DM",
-          color: hasDM ? "success" : "warning",
-          size: "small"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      LinearProgress__default.default,
-      {
-        variant: "determinate",
-        value: occupancyPercentage,
-        sx: {
-          height: 10,
-          borderRadius: 5,
-          backgroundColor: "#e0e0e0",
-          "& .MuiLinearProgress-bar": {
-            backgroundColor: hasDefinedCapacity ? availableSlots > 0 ? "#4caf50" : "#f44336" : "#2196f3"
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    BaseSearchResultCard_default,
+    {
+      result,
+      onClick,
+      icon: tableIcon,
+      tags,
+      showEventTag,
+      eventTagId,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(Box2__default.default, { sx: { mb: 2 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Box2__default.default, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(Typography4__default.default, { variant: "body2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Players:" }),
+            " ",
+            hasDefinedCapacity ? `${activePlayers}/${capacity}` : activePlayers
+          ] }),
+          typeof hasDM === "boolean" && /* @__PURE__ */ jsxRuntime.jsx(
+            Chip2__default.default,
+            {
+              icon: hasDM ? /* @__PURE__ */ jsxRuntime.jsx(SupervisorAccountIcon__default.default, {}) : /* @__PURE__ */ jsxRuntime.jsx(PersonIcon__default.default, {}),
+              label: hasDM ? "DM Present" : "No DM",
+              color: hasDM ? "success" : "warning",
+              size: "small"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          LinearProgress__default.default,
+          {
+            variant: "determinate",
+            value: occupancyPercentage,
+            sx: {
+              height: 10,
+              borderRadius: 5,
+              backgroundColor: "#e0e0e0",
+              "& .MuiLinearProgress-bar": {
+                backgroundColor: hasDefinedCapacity ? availableSlots > 0 ? "#4caf50" : "#f44336" : "#2196f3"
+              }
+            }
           }
-        }
-      }
-    ),
-    hasDefinedCapacity && /* @__PURE__ */ jsxRuntime.jsx(Typography4__default.default, { variant: "body2", sx: { mt: 0.5, textAlign: "right" }, children: availableSlots > 0 ? `${availableSlots} slot${availableSlots !== 1 ? "s" : ""} available` : "Table full" })
-  ] }) });
+        ),
+        hasDefinedCapacity && /* @__PURE__ */ jsxRuntime.jsx(Typography4__default.default, { variant: "body2", sx: { mt: 0.5, textAlign: "right" }, children: availableSlots > 0 ? `${availableSlots} slot${availableSlots !== 1 ? "s" : ""} available` : "Table full" })
+      ] })
+    }
+  );
 };
 var TableResultCard_default = TableResultCard;
 var EventResultCard = ({
@@ -1168,7 +1229,7 @@ var EventResultCard = ({
     try {
       const date = new Date(dateString);
       return date.toLocaleDateString("en-US", options);
-    } catch (error) {
+    } catch (__) {
       return dateString;
     }
   };
@@ -1213,20 +1274,22 @@ var ResultsContainer = ({
   onResultClick,
   tags,
   pagination,
-  onPacketChange
+  onPacketChange,
+  showEventTag,
+  eventTagId
 }) => {
   if (!results || 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");
-  };
+  const onPlayerClick = onResultClick ? (id) => {
+    onResultClick(id, "player");
+  } : void 0;
+  const onTableClick = onResultClick ? (id) => {
+    onResultClick(id, "table");
+  } : void 0;
+  const onEventClick = onResultClick ? (id) => {
+    onResultClick(id, "event");
+  } : void 0;
   const handlePacketChange = (_event, packet) => {
     onPacketChange == null ? void 0 : onPacketChange(packet);
   };
@@ -1260,7 +1323,9 @@ var ResultsContainer = ({
             {
               result,
               onClick: onTableClick,
-              tags
+              tags,
+              showEventTag,
+              eventTagId
             },
             result.id
           );
@@ -1296,17 +1361,30 @@ var ScrollableResultsList = ({
   tags,
   maxHeight = 400,
   onResultClick,
-  emptyText
+  emptyText,
+  showEventTag,
+  eventTagId
 }) => {
   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." }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(Box2__default.default, { sx: { maxHeight, overflowY: "auto", pr: 1 }, children: hasResults ? /* @__PURE__ */ jsxRuntime.jsx(
+    ResultsContainer_default,
+    {
+      results,
+      onResultClick,
+      tags,
+      showEventTag,
+      eventTagId
+    }
+  ) : /* @__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
+  onResultClick,
+  showEventTag,
+  eventTagId
 }) => {
   const tables = (results || []).filter((r) => (r == null ? void 0 : r.type) === "table");
   const handleClick = (id) => onResultClick == null ? void 0 : onResultClick(id);
@@ -1318,7 +1396,9 @@ var TablesScrollableList = ({
       maxHeight,
       onResultClick: (id, type) => {
         if (type === "table") handleClick(id);
-      }
+      },
+      showEventTag,
+      eventTagId
     }
   );
 };
@@ -1346,24 +1426,24 @@ function EventPageLayout({
   tables,
   allTags
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Grid8__default.default, { container: true, flexDirection: "column", children: /* @__PURE__ */ jsxRuntime.jsxs(EventEditProvider, { initialEvent: mergedEvent, value: { isOwner, updateEvent, updateImages }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Grid8__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(Grid10__default.default, { container: true, flexDirection: "column", children: /* @__PURE__ */ jsxRuntime.jsxs(EventEditProvider, { initialEvent: mergedEvent, value: { isOwner, updateEvent, updateImages }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Grid10__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(
       EventBanner,
       {
         attendees,
         numGames
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(Grid8__default.default, { container: true, flexDirection: "row", spacing: 3, size: { xs: 12, md: 12 }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Grid8__default.default, { size: { xs: 12, md: 4 }, spacing: 3, padding: 3, children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsxs(Grid10__default.default, { container: true, flexDirection: "row", spacing: 3, size: { xs: 12, md: 12 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Grid10__default.default, { size: { xs: 12, md: 4 }, spacing: 3, padding: 3, children: /* @__PURE__ */ jsxRuntime.jsx(
         EventBasicInfo,
         {
           locationId: mergedEvent.location || "0"
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Grid8__default.default, { size: { xs: 12, md: 8 }, spacing: 3, padding: 3, children: /* @__PURE__ */ jsxRuntime.jsx(EventTablesCard_default, { tables, tags: allTags }) })
+      /* @__PURE__ */ jsxRuntime.jsx(Grid10__default.default, { size: { xs: 12, md: 8 }, spacing: 3, padding: 3, children: /* @__PURE__ */ jsxRuntime.jsx(EventTablesCard_default, { tables, tags: allTags }) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(Grid8__default.default, {})
+    /* @__PURE__ */ jsxRuntime.jsx(Grid10__default.default, {})
   ] }) });
 }
 var PlayerDetailsCard = ({
@@ -1522,19 +1602,18 @@ var PlayerDetailsCard = ({
   );
 };
 var PlayerDetailsCard_default = PlayerDetailsCard;
-
-// src/data/values.tsx
-var ProfilePictureSettings = {
-  aspectRatio: 4 / 5};
-var PlayerDisplayCard = ({ profilePicture, username, bio, preferredPronouns }) => {
-  const defaultImg = "/man-walking-silhouette-clipart.jpg";
-  const [imageSrc, setImageSrc] = React7.useState(defaultImg);
-  const { aspectRatio } = ProfilePictureSettings;
+var PlayerDisplayCard = ({
+  profilePicture,
+  username,
+  bio,
+  preferredPronouns
+}) => {
+  const [imageSrc, setImageSrc] = React7.useState(DEFAULT_PROFILE_PIC);
   React7.useEffect(() => {
     async function validateImage() {
-      const newImage = profilePicture || defaultImg;
+      const newImage = profilePicture || DEFAULT_PROFILE_PIC;
       if (!profilePicture) {
-        setImageSrc(defaultImg);
+        setImageSrc(DEFAULT_PROFILE_PIC);
         return;
       }
       const img = new Image();
@@ -1543,7 +1622,7 @@ var PlayerDisplayCard = ({ profilePicture, username, bio, preferredPronouns }) =
         setImageSrc(newImage);
       };
       img.onerror = () => {
-        setImageSrc(defaultImg);
+        setImageSrc(DEFAULT_PROFILE_PIC);
       };
     }
     validateImage();
@@ -1573,7 +1652,7 @@ var PlayerDisplayCard = ({ profilePicture, username, bio, preferredPronouns }) =
             image: imageSrc,
             alt: `${username}'s Profile Picture`,
             sx: {
-              aspectRatio,
+              aspectRatio: ProfilePictureSettings.aspectRatio,
               height: "auto",
               // Updates to maintain aspect ratio and fill space nicely
               width: "100%",
@@ -1892,6 +1971,24 @@ function PlayerPageLayout({
     ] }) })
   ] }) }) });
 }
+var DistanceFilter = ({ distances, selectedDistance, onChange }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Typography4__default.default, { variant: "h6", gutterBottom: true, children: "Distance" }),
+    /* @__PURE__ */ jsxRuntime.jsx(FormControl2__default.default, { fullWidth: true, size: "small", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      Select2__default.default,
+      {
+        value: selectedDistance !== void 0 ? selectedDistance : "",
+        onChange: (e) => onChange(Number(e.target.value)),
+        displayEmpty: true,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(MenuItem2__default.default, { value: "", children: /* @__PURE__ */ jsxRuntime.jsx("em", { children: "Any Distance" }) }),
+          distances.map((option) => /* @__PURE__ */ jsxRuntime.jsx(MenuItem2__default.default, { value: option.value, children: option.display }, option.value))
+        ]
+      }
+    ) })
+  ] });
+};
+var DistanceFilter_default = DistanceFilter;
 var ExpiredTablesFilter = ({
   includeExpiredTables,
   onChange
@@ -1960,13 +2057,13 @@ var TagsFilter = ({
     shouldHaveAtLeastOne: ""
   });
   const tagOptions = React7__default.default.useMemo(() => {
+    var _a;
     console.log("available tags: " + JSON.stringify(Tags));
     console.log(!Tags);
-    if (!Tags || Tags.length === 0 || !Tags.map) return [];
-    return Tags.map((tag) => ({
+    return (_a = Tags == null ? void 0 : Tags.map((tag) => ({
       value: tag.id,
       label: tag.label
-    }));
+    }))) != null ? _a : [];
   }, [Tags]);
   const handleTagChange = (tagId, category) => {
     let newTags = [];
@@ -1994,8 +2091,7 @@ var TagsFilter = ({
   };
   const renderSelectedTags = (selectedTags, category) => {
     const tagValues = [];
-    if (!Tags || Tags.length === 0 || !Tags.map) return null;
-    Tags.forEach((tag) => {
+    Tags == null ? void 0 : Tags.forEach((tag) => {
       if (selectedTags.includes(tag.id)) {
         tagValues.push(tag);
       }
@@ -2061,7 +2157,7 @@ var TagsFilter = ({
             });
           },
           slots: { popper: CustomPopper2 },
-          renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(TextField4__default.default, { ...params, label: `Select ${label}` })
+          renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(TextField7__default.default, { ...params, label: `Select ${label}` })
         },
         `${category}-${selectedTags.join("-")}`
       )
@@ -2133,7 +2229,7 @@ var TextSearchCard = ({ onChange, selectedTypes, initialTextSearch }) => {
     /* @__PURE__ */ jsxRuntime.jsx(Typography4__default.default, { variant: "h6", gutterBottom: true, children: "Text Search" }),
     /* @__PURE__ */ jsxRuntime.jsxs(Box2__default.default, { sx: { mb: 2 }, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        TextField4__default.default,
+        TextField7__default.default,
         {
           fullWidth: true,
           label: "Search in title and description",
@@ -2182,9 +2278,7 @@ var TypeFilter = ({ types, initialSelectedTypes = [], onChange }) => {
           Checkbox__default.default,
           {
             checked: selectedTypes.includes(type.id),
-            onChange: () => handleTypeChange(type.id),
-            disabled: type.id === "event",
-            title: type.id === "event" ? "Coming soon! Currently only player and table search are supported." : ""
+            onChange: () => handleTypeChange(type.id)
           }
         ),
         label: type.label
@@ -2199,10 +2293,13 @@ var FiltersContainer = ({
   initialSelectedTags,
   initialTextSearch,
   includeExpiredTables = false,
+  distance,
+  distances,
   onTypeChange,
   onTagChange,
   onTextSearchChange,
   onIncludeExpiredTablesChange,
+  onDistanceChange,
   onSubmit,
   tags,
   searchTypes
@@ -2217,7 +2314,10 @@ var FiltersContainer = ({
       onTypeChange(types);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(Box2__default.default, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Box2__default.default, { component: "form", onSubmit: (e) => {
+    e.preventDefault();
+    if (onSubmit) onSubmit();
+  }, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       TypeFilter_default,
       {
@@ -2227,6 +2327,16 @@ var FiltersContainer = ({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(Divider3__default.default, { sx: { my: 2 } }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      DistanceFilter_default,
+      {
+        distances,
+        selectedDistance: distance,
+        onChange: onDistanceChange || (() => {
+        })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(Divider3__default.default, { sx: { my: 2 } }),
     /* @__PURE__ */ jsxRuntime.jsx(
       TextSearchCard_default,
       {
@@ -2257,13 +2367,13 @@ var FiltersContainer = ({
       /* @__PURE__ */ jsxRuntime.jsx(Divider3__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,
+      Button8__default.default,
       {
+        type: "submit",
         variant: "contained",
         color: "primary",
         size: "large",
         startIcon: /* @__PURE__ */ jsxRuntime.jsx(SearchIcon__default.default, {}),
-        onClick: onSubmit,
         sx: {
           width: "100%",
           py: 1.5,
@@ -2323,11 +2433,13 @@ function SearchPageLayout({
     query: "",
     titleOnly: false
   },
-  includeExpiredTables: initialIncludeExpiredTables = false,
+  initialDistance,
+  distances,
   onTypeChange,
   onTagChange,
   onTextSearchChange,
   onIncludeExpiredTablesChange,
+  onDistanceChange,
   onSubmit,
   onResultClick,
   onPacketChange,
@@ -2335,14 +2447,16 @@ function SearchPageLayout({
   validTags,
   allTags,
   searchTypes,
-  isLoading = false
+  isLoading = false,
+  eventTagId
 }) {
   const theme = material.useTheme();
   const isMobile = material.useMediaQuery(theme.breakpoints.down("md"));
   const [selectedTypes, setSelectedTypes] = React7.useState(initialSelectedTypes);
   const [selectedTags, setSelectedTags] = React7.useState(initialSelectedTags);
   const [textSearch, setTextSearch] = React7.useState(initialTextSearch);
-  const [includeExpiredTables, setIncludeExpiredTables] = React7.useState(initialIncludeExpiredTables);
+  const [includeExpiredTables, setIncludeExpiredTables] = React7.useState(false);
+  const [distance, setDistance] = React7.useState(initialDistance);
   React7.useEffect(() => {
     setSelectedTypes(initialSelectedTypes);
   }, [initialSelectedTypes]);
@@ -2353,8 +2467,8 @@ function SearchPageLayout({
     setTextSearch(initialTextSearch);
   }, [initialTextSearch]);
   React7.useEffect(() => {
-    setIncludeExpiredTables(initialIncludeExpiredTables);
-  }, [initialIncludeExpiredTables]);
+    setDistance(initialDistance);
+  }, [initialDistance]);
   const handleTypeChange = (types) => {
     setSelectedTypes(types);
     if (onTypeChange) onTypeChange(types);
@@ -2371,12 +2485,17 @@ function SearchPageLayout({
     setIncludeExpiredTables(include);
     if (onIncludeExpiredTablesChange) onIncludeExpiredTablesChange(include);
   };
+  const handleDistanceChange = (dist) => {
+    setDistance(dist);
+    if (onDistanceChange) onDistanceChange(dist);
+  };
   const handleSubmit = () => {
     const currentCriteria = {
       selectedTypes,
       selectedTags,
       textSearch,
-      includeExpiredTables
+      includeExpiredTables,
+      distance
     };
     if (onSubmit) {
       onSubmit(currentCriteria);
@@ -2395,8 +2514,8 @@ function SearchPageLayout({
         }
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(Grid8__default.default, { container: true, spacing: 2, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Grid8__default.default, { size: { xs: 12, md: 3 }, children: /* @__PURE__ */ jsxRuntime.jsxs(Card10__default.default, { sx: { marginBottom: isMobile ? 2 : 0 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Grid10__default.default, { container: true, spacing: 2, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Grid10__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,
           {
@@ -2416,17 +2535,20 @@ function SearchPageLayout({
             initialSelectedTags: selectedTags,
             initialTextSearch: textSearch,
             includeExpiredTables,
+            distance,
+            distances,
             onTypeChange: handleTypeChange,
             onTagChange: handleTagChange,
             onTextSearchChange: handleTextSearchChange,
             onIncludeExpiredTablesChange: handleIncludeExpiredTablesChange,
+            onDistanceChange: handleDistanceChange,
             onSubmit: handleSubmit,
             tags: validTags,
             searchTypes
           }
         ) })
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Grid8__default.default, { size: { xs: 12, md: 9 }, children: /* @__PURE__ */ jsxRuntime.jsxs(Card10__default.default, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Grid10__default.default, { size: { xs: 12, md: 9 }, children: /* @__PURE__ */ jsxRuntime.jsxs(Card10__default.default, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           CardHeader4__default.default,
           {
@@ -2446,13 +2568,255 @@ function SearchPageLayout({
             pagination,
             onPacketChange,
             onResultClick,
-            tags: allTags
+            tags: allTags,
+            showEventTag: true,
+            eventTagId
           }
         ) })
       ] }) })
     ] })
   ] });
 }
+
+// src/components/shared/NameGenerator.ts
+var getRandomTitle = () => {
+  const randomPrefix = titlePrefixes[Math.random() * titlePrefixes.length | 0];
+  const randomMiddle = tileMiddle[Math.random() * tileMiddle.length | 0];
+  const randomSuffix = titleSuffixes[Math.random() * titleSuffixes.length | 0];
+  return `${randomPrefix} ${randomMiddle} ${randomSuffix}`;
+};
+var getRandomTagline = () => taglines[Math.random() * taglines.length | 0];
+var titlePrefixes = [
+  "The Knights of The",
+  "The Fellowship of The",
+  "The Order of The",
+  "The Infamous",
+  "The Legendary",
+  "The Dubious",
+  "The Sworn Guardians of The",
+  "The Ancient Guild of The",
+  "The Unstoppable",
+  "The Misfit",
+  "The Chaotic",
+  "The Brave",
+  "The Forgotten",
+  "The Wandering",
+  "The Noble Council of The",
+  "The Dread Pirates of The",
+  "The Honorable Society of The",
+  "The Cursed",
+  "The Unlikely Heroes of The",
+  "The Elders of The",
+  "The Seekers of The",
+  "The Champions of The",
+  "The Heralds of The",
+  "The Disciples of The",
+  "The Ragtag Band of The",
+  "The Cult of The"
+];
+var tileMiddle = [
+  "Round",
+  "Kitchen",
+  "Deepest",
+  "Sorcery",
+  "Munchkin",
+  "Shenanigan",
+  "Secret",
+  "Dungeon",
+  "Fireside",
+  "Tabletop",
+  "Midnight",
+  "Tavern",
+  "Goblin",
+  "Dragon",
+  "Critical",
+  "Natural Twenty",
+  "Counterspell",
+  "Nat One",
+  "Cardboard",
+  "Dice Tower",
+  "Campaign",
+  "Lore",
+  "Awkward",
+  "Unhinged",
+  "Chaotic Neutral",
+  "Homebrew",
+  "Side Quest"
+];
+var titleSuffixes = [
+  "Table",
+  "Dungeon",
+  "Cave",
+  "Crew",
+  "Team",
+  "League",
+  "Horde",
+  "Party",
+  "Conclave",
+  "Collective",
+  "Alliance",
+  "Syndicate",
+  "Guild",
+  "Cabal",
+  "Council",
+  "Expedition",
+  "Enclave",
+  "Consortium",
+  "Troupe",
+  "Vanguard",
+  "Cohort",
+  "Brotherhood",
+  "Sisterhood",
+  "Pantheon",
+  "Assembly",
+  "Coven"
+];
+var taglines = [
+  "Everyone is welcome!",
+  "Looking for serious players.",
+  "Get in nerds, we're gaming!",
+  "If you aren't there, you're square.",
+  "It will be legendary!",
+  "Beginners welcome \u2014 we were all level 1 once.",
+  "No experience necessary. Snacks encouraged.",
+  "Roleplayers, board gamers, and chaos gremlins welcome.",
+  "We don't metagame. Much.",
+  "All alignments accepted. True Neutral gets the snacks.",
+  "Where every session is a one-shot... until it isn't.",
+  "Homebrew rules may apply.",
+  "Warning: may contain excessive lore.",
+  "Critical failures celebrated as much as critical hits.",
+  "No powergamers. Okay, maybe one powergamer.",
+  "We finish campaigns. (Eventually.)",
+  "Veteran players seeking worthy companions.",
+  "Casuals only \u2014 we're here for the vibes.",
+  "Serious about fun, not about rules.",
+  "Min-maxers need not apply.",
+  "For those who read the rulebook... and those who definitely didn't.",
+  "Roll for initiative. Arrive on time.",
+  "Side quests are the main quest here.",
+  "Chaotic good energy required.",
+  "If you bring snacks, you can name the first NPC.",
+  "We read the rulebook so you don't have to.",
+  "Wargamers only \u2014 no take-backs, no mercy.",
+  "Everyone welcome. Meeple provided.",
+  "We always play the longest game on the shelf.",
+  "Worker placement. Resource management. Existential dread.",
+  "No phones at the table! We're here for the game.",
+  "Someone always flips the table. Metaphorically. Usually.",
+  "We have a designated rules lawyer. It's fine.",
+  "Cooperative games only \u2014 we can't handle another Monopoly incident.",
+  "Teaching time is half the fun!"
+];
+function TagSelector({ initialTagIDs, allTags, onTagChange }) {
+  const [tagList, updateTagList] = React7.useState(initialTagIDs);
+  const [inputValue, setInputValue] = React7.useState("");
+  const toggleTag = (id) => tagList.find((t) => t === id) ? removeTag(id) : addTag(id);
+  const addTag = (id) => {
+    const newList = [...tagList, id];
+    updateTagList(newList);
+    onTagChange(newList);
+  };
+  const removeTag = (id) => {
+    const newList = tagList.filter((t) => t !== id);
+    updateTagList(newList);
+    onTagChange(newList);
+  };
+  const selectedTags = React7.useMemo(() => allTags.filter((tag) => tagList.includes(tag.id)), [allTags, tagList]);
+  const options = React7.useMemo(
+    () => allTags.map((tag) => ({ value: tag.id, label: tag.label })),
+    [allTags]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: selectedTags.map((tag) => /* @__PURE__ */ jsxRuntime.jsx(
+      Chip,
+      {
+        tag,
+        removeCallback: () => toggleTag(tag.id)
+      },
+      tag.id
+    )) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Grid10__default.default, { container: true, spacing: 3, children: /* @__PURE__ */ jsxRuntime.jsx(Grid10__default.default, { sx: { marginTop: 3, width: "100%", minWidth: "550px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Autocomplete__default.default,
+      {
+        options,
+        filterOptions: (availableOptions, state) => availableOptions.filter(
+          (option) => !tagList.includes(option.value) && option.label.toLowerCase().includes(state.inputValue.toLowerCase())
+        ),
+        value: null,
+        inputValue,
+        onInputChange: (event, newInputValue) => {
+          if (event && event.type === "change") {
+            setInputValue(newInputValue);
+          }
+        },
+        onChange: (event, newValue) => {
+          if (newValue) {
+            toggleTag(newValue.value);
+          }
+          setInputValue("");
+        },
+        renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(TextField7__default.default, { ...params, label: "Select Tags" })
+      },
+      tagList.join("-")
+    ) }) })
+  ] });
+}
+function EditTableDetailsForm({ initialTitle, initialSubtitle, onTitleChange, onSubtitleChange, allowEditingTitles, initialTagIDs, allTags, onTagChange }) {
+  const [title, setTitle] = React7.useState(initialTitle);
+  const [subtitle, setSubtitle] = React7.useState(initialSubtitle);
+  const handleTitleChange = (newTitle) => {
+    setTitle(newTitle);
+    onTitleChange(newTitle);
+  };
+  const handleSubtitleChange = (newSubtitle) => {
+    setSubtitle(newSubtitle);
+    onSubtitleChange(newSubtitle);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    allowEditingTitles && /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { className: "flex flex-col gap-4 mb-8", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { className: "inline-flex", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TextField7__default.default,
+          {
+            sx: { minWidth: "400px" },
+            label: "Title",
+            onChange: (e) => handleTitleChange(e.target.value),
+            variant: "filled",
+            value: title
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Randomize", children: /* @__PURE__ */ jsxRuntime.jsx(
+          CasinoIcon__default.default,
+          {
+            sx: { cursor: "pointer", alignSelf: "center", ml: 1 },
+            onClick: () => handleTitleChange(getRandomTitle())
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { className: "inline-flex min-w-96", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TextField7__default.default,
+          {
+            sx: { minWidth: "400px" },
+            label: "Short Description or Tagline",
+            onChange: (e) => handleSubtitleChange(e.target.value),
+            variant: "filled",
+            value: subtitle
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Randomize", children: /* @__PURE__ */ jsxRuntime.jsx(
+          CasinoIcon__default.default,
+          {
+            sx: { cursor: "pointer", alignSelf: "center", ml: 1 },
+            onClick: () => handleSubtitleChange(getRandomTagline())
+          }
+        ) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(TagSelector, { initialTagIDs, allTags, onTagChange })
+  ] });
+}
 var GameTableContext = React7__default.default.createContext(void 0);
 function GameTableProvider(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.children });
@@ -2465,76 +2829,206 @@ function useGameTableContext() {
   throw new Error("useGameTableContext is deprecated in the package build. Pass table data through props instead.");
 }
 var ModalContext = React7.createContext({
-  showModal: (content) => {
+  showModal: () => {
   },
   hideModal: () => {
   }
 });
 var useModal = () => React7.useContext(ModalContext);
-var Modal = ({ onClose, children }) => {
-  const modalRef = React7.useRef(null);
-  const previouslyFocusedElement = React7.useRef(null);
+var AutoResizingTextarea = (props) => {
+  const { isInEditMode, onChange, textareaRef, value } = props;
   React7.useEffect(() => {
-    var _a;
-    if (children) {
-      previouslyFocusedElement.current = document.activeElement;
-      (_a = modalRef.current) == null ? void 0 : _a.focus();
+    if (isInEditMode && textareaRef.current) {
+      const textarea = textareaRef.current;
+      textarea.style.height = "auto";
+      textarea.style.height = `${textarea.scrollHeight}px`;
     }
-    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();
+  }, [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%"
       }
-    } else {
-      if (document.activeElement === last) {
-        e.preventDefault();
-        first.focus();
+    }
+  );
+};
+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 TagEditor({
+  title,
+  selectedTags,
+  possibleTags,
+  onToggleTag
+}) {
+  const selectedIds = React7.useMemo(() => selectedTags.map((tag) => tag.id), [selectedTags]);
+  const onTagChange = (newSelectedIds) => {
+    const addedTags = newSelectedIds.filter((id) => !selectedIds.includes(id));
+    const removedTags = selectedIds.filter((id) => !newSelectedIds.includes(id));
+    addedTags.forEach((id) => onToggleTag(id));
+    removedTags.forEach((id) => onToggleTag(id));
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(Grid10__default.default, { container: true, children: /* @__PURE__ */ jsxRuntime.jsx(Grid10__default.default, { size: { xs: 12 }, children: /* @__PURE__ */ jsxRuntime.jsxs(Card10__default.default, { children: [
+    title ? /* @__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.jsx(CardContent10__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(TagSelector, { initialTagIDs: selectedIds, allTags: possibleTags, onTagChange }) })
+  ] }) }) });
+}
+var UserAgreementModal = ({
+  open,
+  onClose,
+  markdownContent,
+  requirements,
+  onAccept,
+  title = "User Agreement",
+  forceAgreement = false
+}) => {
+  const [checkedState, setCheckedState] = React7.useState(
+    new Array(requirements.length).fill(false)
+  );
+  const handleCheckboxChange = (index) => {
+    const updatedCheckedState = checkedState.map(
+      (item, i) => i === index ? !item : item
+    );
+    setCheckedState(updatedCheckedState);
+  };
+  const isAllRequiredChecked = requirements.every((req, index) => {
+    if (req.required) {
+      return checkedState[index];
+    }
+    return true;
+  });
+  const handleAccept = () => {
+    if (isAllRequiredChecked) {
+      onAccept();
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+  const handleClose = (event, reason) => {
+    if (forceAgreement) return;
+    if (onClose) onClose();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Dialog,
     {
-      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 })
-      ] })
+      open,
+      onClose: handleClose,
+      maxWidth: "md",
+      fullWidth: true,
+      disableEscapeKeyDown: forceAgreement,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(material.DialogTitle, { children: title }),
+        /* @__PURE__ */ jsxRuntime.jsxs(material.DialogContent, { dividers: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { mb: 3 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            ReactMarkdown__default.default,
+            {
+              components: {
+                h1: ({ node, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h4", gutterBottom: true, ...props }),
+                h2: ({ node, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h5", gutterBottom: true, ...props }),
+                h3: ({ node, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h6", gutterBottom: true, ...props }),
+                h4: ({ node, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "subtitle1", gutterBottom: true, ...props }),
+                h5: ({ node, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "subtitle2", gutterBottom: true, ...props }),
+                h6: ({ node, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", gutterBottom: true, ...props }),
+                p: ({ node, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body1", gutterBottom: true, ...props }),
+                li: ({ node, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(material.Box, { component: "li", sx: { mb: 1, ml: 2 }, ...props }),
+                ul: ({ node, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(material.Box, { component: "ul", sx: { mb: 2 }, ...props }),
+                ol: ({ node, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(material.Box, { component: "ol", sx: { mb: 2 }, ...props }),
+                a: ({ node, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(material.Link, { ...props, target: "_blank", rel: "noopener" })
+              },
+              children: markdownContent
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: requirements.map((req, index) => /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "flex", alignItems: "flex-start" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            material.FormControlLabel,
+            {
+              control: /* @__PURE__ */ jsxRuntime.jsx(
+                material.Checkbox,
+                {
+                  checked: checkedState[index],
+                  onChange: () => handleCheckboxChange(index)
+                }
+              ),
+              label: /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "body2", children: [
+                req.statement,
+                req.link && req.linkText && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  " ",
+                  /* @__PURE__ */ jsxRuntime.jsx(material.Link, { href: req.link, target: "_blank", rel: "noopener", children: req.linkText })
+                ] }),
+                req.required && /* @__PURE__ */ jsxRuntime.jsx(
+                  material.Typography,
+                  {
+                    component: "span",
+                    color: "error",
+                    sx: { ml: 0.5 },
+                    children: "*"
+                  }
+                )
+              ] })
+            }
+          ) }, index)) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(material.DialogActions, { children: [
+          !forceAgreement && /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: onClose, color: "inherit", children: "Cancel" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.Button,
+            {
+              onClick: handleAccept,
+              variant: "contained",
+              disabled: !isAllRequiredChecked,
+              fullWidth: forceAgreement,
+              children: "Accept"
+            }
+          )
+        ] })
+      ]
     }
   );
 };
-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 UserAgreementModal_default = UserAgreementModal;
 var PlayerHighlightsCard = function(props) {
   const {
     allTags,
@@ -2546,16 +3040,16 @@ var PlayerHighlightsCard = function(props) {
     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(Grid8__default.default, { container: true, spacing: 2, direction: "column", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(Grid8__default.default, { container: true, direction: "row", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Grid8__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(Grid8__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h5", children: player.username }) })
+    /* @__PURE__ */ jsxRuntime.jsxs(Grid10__default.default, { container: true, spacing: 2, direction: "column", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Grid10__default.default, { container: true, direction: "row", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Grid10__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(Image2__default.default, { alt: player.username + "'s profile pic", height: 64, src: player.miniPic || DEFAULT_PROFILE_PIC, width: 64 }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Grid10__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h5", children: player.username }) })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(Grid8__default.default, { children: renderTagsFromIds(player.tags, allTags) })
+      /* @__PURE__ */ jsxRuntime.jsx(Grid10__default.default, { children: renderTagsFromIds(player.tags, allTags) })
     ] }),
-    canEdit && /* @__PURE__ */ jsxRuntime.jsxs(Grid8__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: () => {
+    canEdit && /* @__PURE__ */ jsxRuntime.jsxs(Grid10__default.default, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Button8__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(Button8__default.default, { onClick: () => {
         handleAssignToDungeonMaster(player);
         removeFromTable(player);
       }, children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Assign to DungeonMaster" }) })
@@ -2565,11 +3059,11 @@ var PlayerHighlightsCard = function(props) {
 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(Grid8__default.default, { container: true, spacing: 2, direction: "column", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Grid8__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h5", children: player.username }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Grid8__default.default, { container: true, direction: "row", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Grid8__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(Grid8__default.default, { children: renderTagsFromIds(player.tags, allTags) }),
+    /* @__PURE__ */ jsxRuntime.jsx(material.CardContent, { sx: { backgroundColor: canEdit ? "#fffbea" : "inherit" }, children: /* @__PURE__ */ jsxRuntime.jsxs(Grid10__default.default, { container: true, spacing: 2, direction: "column", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Grid10__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h5", children: player.username }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Grid10__default.default, { container: true, direction: "row", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Grid10__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(Image2__default.default, { alt: player.username + "'s profile pic", height: 120, src: player.imageUrl || DEFAULT_PROFILE_PIC, width: 256 }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Grid10__default.default, { children: renderTagsFromIds(player.tags, allTags) }),
         /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { children: player.description })
       ] })
     ] }) })
@@ -2598,12 +3092,11 @@ function TableActionsBar(props) {
     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(
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "gap-8 px-6", 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`,
+          className: `${canMovePlayersToTable ? "bg-amber-100 cursor-pointer" : "bg-gray-200"} mb-8 flex flex-row flex-start space-between items-center gap-3 p-2 rounded`,
           onClick: () => canMovePlayersToTable ? onPromoteWaitlistPlayer == null ? void 0 : onPromoteWaitlistPlayer(player.id) : void 0,
           tabIndex: 0,
           children: [
@@ -2612,7 +3105,7 @@ function TableActionsBar(props) {
               {
                 alt: player.username + "'s profile pic",
                 height: 64,
-                src: player.miniPic || "",
+                src: player.miniPic || DEFAULT_PROFILE_PIC,
                 width: 64
               }
             ),
@@ -2621,7 +3114,7 @@ function TableActionsBar(props) {
         },
         player.id
       )) }),
-      /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => hideModal(), children: "close modal" })
+      /* @__PURE__ */ jsxRuntime.jsx(DialogActions3__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(Button8__default.default, { onClick: () => hideModal(), children: "Close" }) })
     ] });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(material.Grid, { container: true, direction: "column", spacing: 1, children: [
@@ -2632,33 +3125,45 @@ function TableActionsBar(props) {
       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" }),
+      !isOwner && !isPlayer && !isDM && !onWaitlist && /* @__PURE__ */ jsxRuntime.jsx(Button8__default.default, { onClick: () => onJoinWaitlist == null ? void 0 : onJoinWaitlist(), sx: buttonStyle, children: "Join Waitlist" }),
+      !isOwner && (isPlayer || onWaitlist) && /* @__PURE__ */ jsxRuntime.jsx(Button8__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" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Button8__default.default, { onClick: () => onEditModeChange(true), sx: buttonStyle, endIcon: /* @__PURE__ */ jsxRuntime.jsx(EditIcon3__default.default, {}), children: "Edit" }),
         canViewWaitlist ? /* @__PURE__ */ jsxRuntime.jsx(
-          Button7__default.default,
+          Button8__default.default,
           {
             endIcon: /* @__PURE__ */ jsxRuntime.jsx(ListIcon__default.default, {}),
-            onClick: () => showModal(renderPlayerWaitlistModalContent(false)),
+            onClick: () => showModal(renderPlayerWaitlistModalContent(false), "Waitlist Players:"),
             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(Button8__default.default, { onClick: onSave, sx: buttonStyle, endIcon: /* @__PURE__ */ jsxRuntime.jsx(SaveIcon__default.default, {}), children: "Save" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Button8__default.default, { onClick: () => onEditModeChange(false), sx: buttonStyle, children: "Cancel" }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          Button7__default.default,
+          Button8__default.default,
           {
             endIcon: /* @__PURE__ */ jsxRuntime.jsx(ListIcon__default.default, {}),
-            onClick: () => showModal(renderPlayerWaitlistModalContent(true)),
+            onClick: () => showModal(renderPlayerWaitlistModalContent(true), "Waitlist Players:"),
             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" })
+      isOwner && /* @__PURE__ */ jsxRuntime.jsx(
+        Button8__default.default,
+        {
+          onClick: () => showModal(
+            /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { children: "Are you sure you want to delete this table? This action cannot be undone." }),
+            "Delete Table",
+            { acceptText: "Delete", onAccept: () => onDeleteTable == null ? void 0 : onDeleteTable() }
+          ),
+          sx: buttonStyle,
+          endIcon: /* @__PURE__ */ jsxRuntime.jsx(DeleteIcon__default.default, {}),
+          children: "Delete Table"
+        }
+      )
     ] })
   ] });
 }
@@ -2668,165 +3173,82 @@ var buttonStyle = {
   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 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(Grid8__default.default, { container: true, children: /* @__PURE__ */ jsxRuntime.jsx(Grid8__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.jsx(
-        Chip,
-        {
-          tag,
-          removeCallback: () => onToggleTag(tag.id)
-        },
-        tag.id
-      )) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Grid8__default.default, { container: true, spacing: 3, children: /* @__PURE__ */ jsxRuntime.jsx(Grid8__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: CustomPopper3 },
-          renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(TextField4__default.default, { ...params, label: "Select Tags" })
-        },
-        selectedIds.join("-")
-      ) }) })
-    ] })
-  ] }) }) });
-}
-var CustomPopper3 = (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 TablePageLayout(props) {
   var _a;
-  const { allTags, dungeonMaster, onDeleteTable, onJoinWaitlist, onLeaveTable, onSaveDraft, players, table, tableStatus, waitlistPlayers } = props;
+  const { hideModal, showModal } = useModal();
+  const { allTags, dungeonMaster, onDeleteTable, onJoinWaitlist, onLeaveTable, onSaveDraft, players, table, tableStatus, waitlistPlayers, startWithEditTitle, eventTagId } = props;
+  const canEdit = tableStatus.isOwner;
   const textAreaRef = React7.useRef(null);
   const [isTableInEditMode, setIsTableInEditMode] = React7.useState(false);
+  const [currentTitle, setCurrentTitle] = React7.useState(table.title);
+  const [currentSubtitle, setCurrentSubtitle] = React7.useState(table.shortDescription);
   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 : []);
+  const pendingEdits = React7.useRef({ title: currentTitle, subtitle: currentSubtitle, tags: currentTagIds });
+  const handleSaveTable = (tableData = {}) => {
+    const nextDraft = {
+      ...table,
+      description: currentDescription,
+      dungeonMaster: String(currentDungeonMaster.id),
+      players: currentPlayers.map((player) => player.id),
+      shortDescription: currentSubtitle,
+      tags: currentTagIds,
+      title: currentTitle,
+      waitlist: currentWaitlistPlayers.map((player) => player.id),
+      ...tableData
+    };
+    void (onSaveDraft == null ? void 0 : onSaveDraft(nextDraft));
+    setIsTableInEditMode(false);
+  };
+  const clean = (text) => text.replaceAll(
+    /\b(n[i1!]g+(er|a|e)s?|f[a@]g|f[a@]g+[o0]ts?|k[i1!]k[e3]s?|ch[i1!]nks?|w[e3]tb[a@]cks?|r[a@]gh[e3][a@]ds?|t[o0]w[e3]lh[e3][a@]ds?|r[e3]t[a@]rd(ed|s)?|c[o0][o0]ns?|tr[a@]nn(y|i[e3]s?)|g[o0][o0]ks?)\b/gi,
+    "dudes"
+  );
+  const editTableDetails = () => {
+    if (!canEdit) {
+      return;
+    }
+    pendingEdits.current = {
+      title: currentTitle,
+      subtitle: currentSubtitle,
+      tags: currentTagIds
+    };
+    const editContent = /* @__PURE__ */ jsxRuntime.jsx(
+      EditTableDetailsForm,
+      {
+        initialTitle: currentTitle,
+        initialSubtitle: currentSubtitle,
+        onTitleChange: (t) => pendingEdits.current.title = t,
+        onSubtitleChange: (s) => pendingEdits.current.subtitle = s,
+        onTagChange: (t) => pendingEdits.current.tags = t,
+        initialTagIDs: currentTagIds,
+        allTags: allTags.filter((t) => t.appliesTo.tables),
+        allowEditingTitles: true
+      }
+    );
+    showModal(editContent, "Edit Table Details", {
+      acceptText: "Save",
+      onAccept: () => {
+        setCurrentTitle(clean(pendingEdits.current.title));
+        setCurrentSubtitle(clean(pendingEdits.current.subtitle));
+        setCurrentTagIds(pendingEdits.current.tags);
+        handleSaveTable({
+          title: clean(pendingEdits.current.title),
+          shortDescription: clean(pendingEdits.current.subtitle),
+          tags: pendingEdits.current.tags
+        });
+      }
+    });
+  };
   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(
+    if (startWithEditTitle) {
+      editTableDetails();
+    }
+  });
+  React7.useMemo(
     () => allTags.filter((tag) => currentTagIds.includes(tag.id)),
     [allTags, currentTagIds]
   );
@@ -2846,37 +3268,17 @@ function TablePageLayout(props) {
       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(Grid8__default.default, { container: true, direction: "column", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs(Grid10__default.default, { container: true, direction: "column", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
-          Grid8__default.default,
+          Grid10__default.default,
           {
             container: true,
             direction: "column",
@@ -2889,39 +3291,49 @@ function TablePageLayout(props) {
               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,
+              /* @__PURE__ */ jsxRuntime.jsx(material.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+                material.Box,
                 {
-                  title: currentTitle,
-                  sx: {
-                    p: 0,
-                    "& .MuiCardHeader-title": {
-                      color: "white",
-                      fontWeight: 700
-                    }
-                  }
+                  className: `flex items-center gap-1 ${canEdit ? "cursor-pointer" : ""}`,
+                  sx: { "&:hover .edit-icon": { opacity: 1 } },
+                  onClick: editTableDetails,
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      material.CardHeader,
+                      {
+                        title: currentTitle,
+                        sx: {
+                          p: 0,
+                          "& .MuiCardHeader-title": {
+                            color: "white",
+                            fontWeight: 700
+                          }
+                        }
+                      }
+                    ),
+                    canEdit ? /* @__PURE__ */ jsxRuntime.jsx(EditIcon3__default.default, { className: "edit-icon text-white", sx: { opacity: 0, transition: "opacity 0.2s" } }) : ""
+                  ]
                 }
               ) }),
-              isTableInEditMode ? /* @__PURE__ */ jsxRuntime.jsx(
-                "input",
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                material.Box,
                 {
-                  onChange: (e) => setCurrentShortDescription(e.target.value),
-                  style: { backgroundColor: "#fffbea" },
-                  tabIndex: 0,
-                  type: "text",
-                  value: currentShortDescription
+                  className: `flex items-center gap-1 ${canEdit ? "cursor-pointer" : ""}`,
+                  sx: { "&:hover .edit-icon": { opacity: 1 } },
+                  onClick: editTableDetails,
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      material.Typography,
+                      {
+                        sx: { color: "white", opacity: 0.95 },
+                        children: currentSubtitle
+                      }
+                    ),
+                    canEdit ? /* @__PURE__ */ jsxRuntime.jsx(EditIcon3__default.default, { className: "edit-icon text-white", sx: { opacity: 0, transition: "opacity 0.2s", fontSize: "medium" } }) : ""
+                  ]
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { color: "white", opacity: 0.95 }, children: currentShortDescription }),
-              /* @__PURE__ */ jsxRuntime.jsx(Grid8__default.default, { container: true, children: isTableInEditMode ? renderEditableTags(currentTags, allTags, handleToggleTag) : renderTags(currentTagIds, allTags) }),
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(Grid10__default.default, { container: true, onClick: editTableDetails, className: `${canEdit ? "cursor-pointer" : ""}`, children: renderTags(currentTagIds, allTags, canEdit, table.eventTagId || eventTagId) }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 TableActionsBar,
                 {
@@ -2941,8 +3353,8 @@ function TablePageLayout(props) {
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(Grid8__default.default, { container: true, spacing: 2, sx: { mt: 2 }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Grid8__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(
+        /* @__PURE__ */ jsxRuntime.jsxs(Grid10__default.default, { container: true, spacing: 2, sx: { mt: 2 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Grid10__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,
@@ -2951,7 +3363,7 @@ function TablePageLayout(props) {
               value: currentDescription
             }
           ) : /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { whiteSpace: "pre-wrap" }, children: currentDescription }) }) }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs(Grid8__default.default, { size: { xs: 12, md: 4 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(Grid10__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: " }),
@@ -2974,36 +3386,85 @@ function TablePageLayout(props) {
     }
   );
 }
-var renderTags = function(tags, allTags) {
+var renderTags = function(tags, allTags, canEdit, eventTagId) {
   if (!tags || !allTags) {
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(Grid8__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(Grid8__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
-    }
-  ) });
+  return /* @__PURE__ */ jsxRuntime.jsxs(Grid10__default.default, { container: true, spacing: 1, sx: { pb: 1.5 }, children: [
+    renderTagsFromIds(tags, allTags, { showEventTag: true, eventTagId }),
+    canEdit ? /* @__PURE__ */ jsxRuntime.jsx(
+      material.Button,
+      {
+        variant: "text",
+        className: "inline-block text-sm px-3 py-1font-outlined m-0.5 font-stretch-105% font-sans",
+        sx: {
+          color: "white",
+          textShadow: "black 1.5px 1px 1.5px",
+          "&:hover": {
+            background: "#889"
+          }
+        },
+        children: "Edit Tags..."
+      }
+    ) : ""
+  ] });
 };
 var TablePageLayout_default = TablePageLayout;
+var ModalProvider = ({ children }) => {
+  var _a;
+  const [modalContent, setModalContent] = React7.useState(null);
+  const [displayModal, setDisplayModal] = React7.useState(false);
+  const [title, setTitle] = React7.useState("");
+  const [options, setOptions] = React7.useState({});
+  const showModal = (content, title2, opts) => {
+    setModalContent(content);
+    setTitle(title2);
+    setOptions(opts != null ? opts : {});
+    setDisplayModal(true);
+  };
+  const hideModal = () => {
+    setDisplayModal(false);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(ModalContext.Provider, { value: { showModal, hideModal }, children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsxs(Dialog3__default.default, { open: displayModal, onClose: hideModal, sx: { height: "85%" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(DialogTitle3__default.default, { sx: { marginRight: "20px", minWidth: "400px" }, children: title }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          IconButton3__default.default,
+          {
+            "aria-label": "close",
+            onClick: hideModal,
+            sx: { position: "absolute", right: 8, top: 8 },
+            children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon__default.default, {})
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(DialogContent3__default.default, { sx: { paddingTop: 0 }, children: modalContent }),
+      (options.acceptText || options.onAccept) && /* @__PURE__ */ jsxRuntime.jsxs(DialogActions3__default.default, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Button8__default.default, { variant: "contained", onClick: () => {
+          var _a2;
+          hideModal();
+          (_a2 = options.onAccept) == null ? void 0 : _a2.call(options);
+        }, children: (_a = options.acceptText) != null ? _a : "OK" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Button8__default.default, { onClick: () => {
+          var _a2;
+          hideModal();
+          (_a2 = options.onCancel) == null ? void 0 : _a2.call(options);
+        }, children: "Cancel" })
+      ] })
+    ] })
+  ] });
+};
+var ModalProvider_default = ModalProvider;
 
 exports.AutoResizingTextarea = AutoResizingTextarea_default;
 exports.BaseSearchResultCard = BaseSearchResultCard_default;
 exports.CANDIDATE_TIMEZONES = CANDIDATE_TIMEZONES;
 exports.Chip = Chip;
 exports.DMHighlightsCard = DMHighlightsCard;
+exports.DistanceFilter = DistanceFilter_default;
+exports.EditTableDetailsForm = EditTableDetailsForm;
 exports.EventBanner = EventBanner;
 exports.EventBannerEdit = EventBannerEdit;
 exports.EventBasicInfo = EventBasicInfo;
@@ -3038,10 +3499,14 @@ exports.TablePageLayout = TablePageLayout_default;
 exports.TableResultCard = TableResultCard_default;
 exports.TablesScrollableList = TablesScrollableList_default;
 exports.TagEditor = TagEditor;
+exports.TagSelector = TagSelector;
 exports.TagsFilter = TagsFilter_default;
 exports.TextSearchCard = TextSearchCard_default;
 exports.TypeFilter = TypeFilter_default;
+exports.UserAgreementModal = UserAgreementModal_default;
 exports.generateTagsDisplay = generateTagsDisplay;
+exports.getRandomTagline = getRandomTagline;
+exports.getRandomTitle = getRandomTitle;
 exports.renderTagsFromIds = renderTagsFromIds;
 exports.useEventEdit = useEventEdit;
 exports.useGameTableContext = useGameTableContext;