@mbpockets/shared-ui 0.1.21 → 0.2.5

package/dist/index.mjs

@@ -1,15 +1,15 @@
 "use client";
 import React7, { createContext, useState, useEffect, useContext, useMemo, useRef } from 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { Box, Grid, TextField, Tooltip, IconButton, Button, CircularProgress, Dialog, DialogTitle, DialogContent, DialogActions, Card, CardContent, Typography, FormControl, InputLabel, Select, MenuItem, CardMedia, CardHeader, useTheme, useMediaQuery, NoSsr } from '@mui/material';
+import { Box, Grid, TextField, Tooltip, IconButton, Button, CircularProgress, Dialog, DialogTitle, DialogContent, DialogActions, Card, CardContent, Typography, FormControl, InputLabel, Select, MenuItem, CardMedia, CardHeader, useTheme, useMediaQuery, NoSsr, Link, FormControlLabel as FormControlLabel$1, Checkbox as Checkbox$1 } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
-import EditIcon from '@mui/icons-material/Edit';
+import EditIcon3 from '@mui/icons-material/Edit';
 import AddIcon from '@mui/icons-material/Add';
 import ColorizeIcon from '@mui/icons-material/Colorize';
 import CancelIcon from '@mui/icons-material/Cancel';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import Box2 from '@mui/material/Box';
-import Grid8 from '@mui/material/Grid';
+import Grid10 from '@mui/material/Grid';
 import Card10 from '@mui/material/Card';
 import CardContent10 from '@mui/material/CardContent';
 import CardHeader4 from '@mui/material/CardHeader';
@@ -17,6 +17,7 @@ import Divider3 from '@mui/material/Divider';
 import Typography4 from '@mui/material/Typography';
 import Pagination from '@mui/material/Pagination';
 import Avatar from '@mui/material/Avatar';
+import { useRouter } from 'next/navigation';
 import Chip2 from '@mui/material/Chip';
 import LinearProgress from '@mui/material/LinearProgress';
 import PersonIcon from '@mui/icons-material/Person';
@@ -27,19 +28,29 @@ import LocationOnIcon from '@mui/icons-material/LocationOn';
 import EventIcon from '@mui/icons-material/Event';
 import Autocomplete from '@mui/material/Autocomplete';
 import Popper from '@mui/material/Popper';
+import FormControl2 from '@mui/material/FormControl';
+import Select2 from '@mui/material/Select';
+import MenuItem2 from '@mui/material/MenuItem';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Checkbox from '@mui/material/Checkbox';
-import FormControl2 from '@mui/material/FormControl';
 import RadioGroup from '@mui/material/RadioGroup';
 import Radio from '@mui/material/Radio';
-import TextField4 from '@mui/material/TextField';
+import TextField7 from '@mui/material/TextField';
 import FormGroup from '@mui/material/FormGroup';
-import Button7 from '@mui/material/Button';
+import Button8 from '@mui/material/Button';
 import SearchIcon from '@mui/icons-material/Search';
 import CircularProgress3 from '@mui/material/CircularProgress';
+import CasinoIcon from '@mui/icons-material/Casino';
+import Dialog3 from '@mui/material/Dialog';
+import DialogContent3 from '@mui/material/DialogContent';
+import DialogActions3 from '@mui/material/DialogActions';
+import IconButton3 from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import ReactMarkdown from 'react-markdown';
 import Image2 from 'next/image';
 import ListIcon from '@mui/icons-material/List';
 import SaveIcon from '@mui/icons-material/Save';
+import DialogTitle3 from '@mui/material/DialogTitle';
 
 // src/components/EventPage/editMode/EventBannerEdit.tsx
 var defaultValue = {
@@ -128,12 +139,29 @@ function Chip({ tag, removeCallback }) {
 function generateTagsDisplay(tag) {
   return /* @__PURE__ */ jsx(Chip, { tag }, tag.id);
 }
-function renderTagsFromIds(ids, legalTags) {
+function renderTagsFromIds(ids, legalTags, options = {}) {
   if (!ids || !legalTags || legalTags.length === 0) {
     return /* @__PURE__ */ jsx(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,
@@ -357,7 +385,7 @@ function EventBannerEdit({
                     children: [
                       link.text,
                       /* @__PURE__ */ jsxs(Box, { sx: { ml: 1, display: "flex" }, children: [
-                        /* @__PURE__ */ jsx(Tooltip, { title: "Edit Link", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => openEditLink(index), sx: { color: "white", p: 0.2 }, children: /* @__PURE__ */ jsx(EditIcon, { fontSize: "inherit" }) }) }),
+                        /* @__PURE__ */ jsx(Tooltip, { title: "Edit Link", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => openEditLink(index), sx: { color: "white", p: 0.2 }, children: /* @__PURE__ */ jsx(EditIcon3, { fontSize: "inherit" }) }) }),
                         /* @__PURE__ */ jsx(Tooltip, { title: "Remove Link", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => removeLink(index), sx: { color: "error.light", p: 0.2 }, children: /* @__PURE__ */ jsx(DeleteIcon, { fontSize: "inherit" }) }) })
                       ] })
                     ]
@@ -484,7 +512,7 @@ function EventBasicInfo(props) {
   );
 }
 function EventBasicInfoView({ description, locationId, startingDate, endingDate, timeInfo, timezone, isOwner, onEdit }) {
-  return /* @__PURE__ */ jsx(Grid8, { sx: { position: "relative" }, children: /* @__PURE__ */ jsx(Card, { style: {
+  return /* @__PURE__ */ jsx(Grid10, { sx: { position: "relative" }, children: /* @__PURE__ */ jsx(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__ */ jsxs(CardContent, { children: [
@@ -768,7 +796,7 @@ function EventBannerView({
 }) {
   const backgroundColor = bannerColor || "linear-gradient(135deg, rgba(25,118,210,0.8), rgba(25,118,210,1))";
   return /* @__PURE__ */ jsxs(
-    Grid8,
+    Grid10,
     {
       sx: {
         background: backgroundColor,
@@ -776,7 +804,7 @@ function EventBannerView({
         position: "relative"
       },
       children: [
-        /* @__PURE__ */ jsxs(Grid8, { children: [
+        /* @__PURE__ */ jsxs(Grid10, { children: [
           /* @__PURE__ */ jsxs(
             Box,
             {
@@ -835,7 +863,7 @@ function EventBannerView({
             }
           ),
           /* @__PURE__ */ jsxs(
-            Grid8,
+            Grid10,
             {
               display: "flex",
               justifyContent: "center",
@@ -943,6 +971,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__ */ jsxs(Typography, { variant: "caption", sx: { display: "block", mb: 1, color: "primary.main", fontWeight: "bold" }, children: [
@@ -956,17 +989,22 @@ var BaseSearchResultCard = ({
   onClick,
   children,
   icon,
-  tags
+  tags,
+  showEventTag,
+  eventTagId
 }) => {
+  const router = 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__ */ jsx(
@@ -975,7 +1013,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": {
@@ -994,11 +1032,10 @@ var BaseSearchResultCard = ({
           result.type === "table" ? /* @__PURE__ */ jsx(Typography4, { variant: "body1", children: (() => {
             var _a, _b;
             const full = (_b = (_a = result.fullDescription) != null ? _a : result.description) != null ? _b : "";
-            if (typeof full !== "string") return "";
             const text = full || "";
             return text.length > 200 ? `${text.slice(0, 200).trimEnd()}...` : text;
           })() }) : /* @__PURE__ */ jsx(Typography4, { variant: "body1", children: result.description }),
-          result.tags && result.tags.length > 0 && /* @__PURE__ */ jsx(Box2, { sx: { mt: 1, display: "flex", flexWrap: "wrap", gap: 1 }, children: renderTagsFromIds(result.tags, tags) })
+          result.tags && result.tags.length > 0 && /* @__PURE__ */ jsx(Box2, { sx: { mt: 1, display: "flex", flexWrap: "wrap", gap: 1 }, children: renderTagsFromIds(result.tags, tags, { showEventTag, eventTagId }) })
         ] })
       ] })
     }
@@ -1040,7 +1077,7 @@ var PlayerResultCard = ({
   const playerIcon = /* @__PURE__ */ jsx(
     Avatar,
     {
-      src: result.imageUrl,
+      src: result.imageUrl || DEFAULT_PROFILE_PIC,
       alt: result.title,
       sx: {
         width: 40,
@@ -1056,7 +1093,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;
@@ -1074,40 +1113,51 @@ var TableResultCard = ({
       }
     }
   );
-  return /* @__PURE__ */ jsx(BaseSearchResultCard_default, { result, onClick, icon: tableIcon, tags, children: /* @__PURE__ */ jsxs(Box2, { sx: { mb: 2 }, children: [
-    /* @__PURE__ */ jsxs(Box2, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1 }, children: [
-      /* @__PURE__ */ jsxs(Typography4, { variant: "body2", children: [
-        /* @__PURE__ */ jsx("strong", { children: "Players:" }),
-        " ",
-        hasDefinedCapacity ? `${activePlayers}/${capacity}` : activePlayers
-      ] }),
-      typeof hasDM === "boolean" && /* @__PURE__ */ jsx(
-        Chip2,
-        {
-          icon: hasDM ? /* @__PURE__ */ jsx(SupervisorAccountIcon, {}) : /* @__PURE__ */ jsx(PersonIcon, {}),
-          label: hasDM ? "DM Present" : "No DM",
-          color: hasDM ? "success" : "warning",
-          size: "small"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx(
-      LinearProgress,
-      {
-        variant: "determinate",
-        value: occupancyPercentage,
-        sx: {
-          height: 10,
-          borderRadius: 5,
-          backgroundColor: "#e0e0e0",
-          "& .MuiLinearProgress-bar": {
-            backgroundColor: hasDefinedCapacity ? availableSlots > 0 ? "#4caf50" : "#f44336" : "#2196f3"
+  return /* @__PURE__ */ jsx(
+    BaseSearchResultCard_default,
+    {
+      result,
+      onClick,
+      icon: tableIcon,
+      tags,
+      showEventTag,
+      eventTagId,
+      children: /* @__PURE__ */ jsxs(Box2, { sx: { mb: 2 }, children: [
+        /* @__PURE__ */ jsxs(Box2, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1 }, children: [
+          /* @__PURE__ */ jsxs(Typography4, { variant: "body2", children: [
+            /* @__PURE__ */ jsx("strong", { children: "Players:" }),
+            " ",
+            hasDefinedCapacity ? `${activePlayers}/${capacity}` : activePlayers
+          ] }),
+          typeof hasDM === "boolean" && /* @__PURE__ */ jsx(
+            Chip2,
+            {
+              icon: hasDM ? /* @__PURE__ */ jsx(SupervisorAccountIcon, {}) : /* @__PURE__ */ jsx(PersonIcon, {}),
+              label: hasDM ? "DM Present" : "No DM",
+              color: hasDM ? "success" : "warning",
+              size: "small"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          LinearProgress,
+          {
+            variant: "determinate",
+            value: occupancyPercentage,
+            sx: {
+              height: 10,
+              borderRadius: 5,
+              backgroundColor: "#e0e0e0",
+              "& .MuiLinearProgress-bar": {
+                backgroundColor: hasDefinedCapacity ? availableSlots > 0 ? "#4caf50" : "#f44336" : "#2196f3"
+              }
+            }
           }
-        }
-      }
-    ),
-    hasDefinedCapacity && /* @__PURE__ */ jsx(Typography4, { variant: "body2", sx: { mt: 0.5, textAlign: "right" }, children: availableSlots > 0 ? `${availableSlots} slot${availableSlots !== 1 ? "s" : ""} available` : "Table full" })
-  ] }) });
+        ),
+        hasDefinedCapacity && /* @__PURE__ */ jsx(Typography4, { 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 = ({
@@ -1125,7 +1175,7 @@ var EventResultCard = ({
     try {
       const date = new Date(dateString);
       return date.toLocaleDateString("en-US", options);
-    } catch (error) {
+    } catch (__) {
       return dateString;
     }
   };
@@ -1170,20 +1220,22 @@ var ResultsContainer = ({
   onResultClick,
   tags,
   pagination,
-  onPacketChange
+  onPacketChange,
+  showEventTag,
+  eventTagId
 }) => {
   if (!results || results.length === 0 || !results.map) {
     return /* @__PURE__ */ jsx(Box2, { 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);
   };
@@ -1199,7 +1251,7 @@ var ResultsContainer = ({
       pagination.totalResults,
       " results"
     ] }) }),
-    results.map((result, index) => {
+    results.map((result) => {
       switch (result.type) {
         case "player":
           return /* @__PURE__ */ jsx(
@@ -1217,7 +1269,9 @@ var ResultsContainer = ({
             {
               result,
               onClick: onTableClick,
-              tags
+              tags,
+              showEventTag,
+              eventTagId
             },
             result.id
           );
@@ -1253,17 +1307,30 @@ var ScrollableResultsList = ({
   tags,
   maxHeight = 400,
   onResultClick,
-  emptyText
+  emptyText,
+  showEventTag,
+  eventTagId
 }) => {
   const hasResults = Array.isArray(results) && results.length > 0;
-  return /* @__PURE__ */ jsx(Box2, { sx: { maxHeight, overflowY: "auto", pr: 1 }, children: hasResults ? /* @__PURE__ */ jsx(ResultsContainer_default, { results, onResultClick, tags }) : /* @__PURE__ */ jsx(Box2, { sx: { textAlign: "center", py: 2 }, children: emptyText || "No results to display." }) });
+  return /* @__PURE__ */ jsx(Box2, { sx: { maxHeight, overflowY: "auto", pr: 1 }, children: hasResults ? /* @__PURE__ */ jsx(
+    ResultsContainer_default,
+    {
+      results,
+      onResultClick,
+      tags,
+      showEventTag,
+      eventTagId
+    }
+  ) : /* @__PURE__ */ jsx(Box2, { 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);
@@ -1275,7 +1342,9 @@ var TablesScrollableList = ({
       maxHeight,
       onResultClick: (id, type) => {
         if (type === "table") handleClick(id);
-      }
+      },
+      showEventTag,
+      eventTagId
     }
   );
 };
@@ -1303,24 +1372,24 @@ function EventPageLayout({
   tables,
   allTags
 }) {
-  return /* @__PURE__ */ jsx(Grid8, { container: true, flexDirection: "column", children: /* @__PURE__ */ jsxs(EventEditProvider, { initialEvent: mergedEvent, value: { isOwner, updateEvent, updateImages }, children: [
-    /* @__PURE__ */ jsx(Grid8, { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Grid10, { container: true, flexDirection: "column", children: /* @__PURE__ */ jsxs(EventEditProvider, { initialEvent: mergedEvent, value: { isOwner, updateEvent, updateImages }, children: [
+    /* @__PURE__ */ jsx(Grid10, { children: /* @__PURE__ */ jsx(
       EventBanner,
       {
         attendees,
         numGames
       }
     ) }),
-    /* @__PURE__ */ jsxs(Grid8, { container: true, flexDirection: "row", spacing: 3, size: { xs: 12, md: 12 }, children: [
-      /* @__PURE__ */ jsx(Grid8, { size: { xs: 12, md: 4 }, spacing: 3, padding: 3, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs(Grid10, { container: true, flexDirection: "row", spacing: 3, size: { xs: 12, md: 12 }, children: [
+      /* @__PURE__ */ jsx(Grid10, { size: { xs: 12, md: 4 }, spacing: 3, padding: 3, children: /* @__PURE__ */ jsx(
         EventBasicInfo,
         {
           locationId: mergedEvent.location || "0"
         }
       ) }),
-      /* @__PURE__ */ jsx(Grid8, { size: { xs: 12, md: 8 }, spacing: 3, padding: 3, children: /* @__PURE__ */ jsx(EventTablesCard_default, { tables, tags: allTags }) })
+      /* @__PURE__ */ jsx(Grid10, { size: { xs: 12, md: 8 }, spacing: 3, padding: 3, children: /* @__PURE__ */ jsx(EventTablesCard_default, { tables, tags: allTags }) })
     ] }),
-    /* @__PURE__ */ jsx(Grid8, {})
+    /* @__PURE__ */ jsx(Grid10, {})
   ] }) });
 }
 var PlayerDetailsCard = ({
@@ -1479,19 +1548,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] = useState(defaultImg);
-  const { aspectRatio } = ProfilePictureSettings;
+var PlayerDisplayCard = ({
+  profilePicture,
+  username,
+  bio,
+  preferredPronouns
+}) => {
+  const [imageSrc, setImageSrc] = useState(DEFAULT_PROFILE_PIC);
   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();
@@ -1500,7 +1568,7 @@ var PlayerDisplayCard = ({ profilePicture, username, bio, preferredPronouns }) =
         setImageSrc(newImage);
       };
       img.onerror = () => {
-        setImageSrc(defaultImg);
+        setImageSrc(DEFAULT_PROFILE_PIC);
       };
     }
     validateImage();
@@ -1530,7 +1598,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%",
@@ -1849,6 +1917,24 @@ function PlayerPageLayout({
     ] }) })
   ] }) }) });
 }
+var DistanceFilter = ({ distances, selectedDistance, onChange }) => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Typography4, { variant: "h6", gutterBottom: true, children: "Distance" }),
+    /* @__PURE__ */ jsx(FormControl2, { fullWidth: true, size: "small", children: /* @__PURE__ */ jsxs(
+      Select2,
+      {
+        value: selectedDistance !== void 0 ? selectedDistance : "",
+        onChange: (e) => onChange(Number(e.target.value)),
+        displayEmpty: true,
+        children: [
+          /* @__PURE__ */ jsx(MenuItem2, { value: "", children: /* @__PURE__ */ jsx("em", { children: "Any Distance" }) }),
+          distances.map((option) => /* @__PURE__ */ jsx(MenuItem2, { value: option.value, children: option.display }, option.value))
+        ]
+      }
+    ) })
+  ] });
+};
+var DistanceFilter_default = DistanceFilter;
 var ExpiredTablesFilter = ({
   includeExpiredTables,
   onChange
@@ -1917,13 +2003,13 @@ var TagsFilter = ({
     shouldHaveAtLeastOne: ""
   });
   const tagOptions = React7.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 = [];
@@ -1951,8 +2037,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);
       }
@@ -2018,7 +2103,7 @@ var TagsFilter = ({
             });
           },
           slots: { popper: CustomPopper2 },
-          renderInput: (params) => /* @__PURE__ */ jsx(TextField4, { ...params, label: `Select ${label}` })
+          renderInput: (params) => /* @__PURE__ */ jsx(TextField7, { ...params, label: `Select ${label}` })
         },
         `${category}-${selectedTags.join("-")}`
       )
@@ -2090,7 +2175,7 @@ var TextSearchCard = ({ onChange, selectedTypes, initialTextSearch }) => {
     /* @__PURE__ */ jsx(Typography4, { variant: "h6", gutterBottom: true, children: "Text Search" }),
     /* @__PURE__ */ jsxs(Box2, { sx: { mb: 2 }, children: [
       /* @__PURE__ */ jsx(
-        TextField4,
+        TextField7,
         {
           fullWidth: true,
           label: "Search in title and description",
@@ -2139,9 +2224,7 @@ var TypeFilter = ({ types, initialSelectedTypes = [], onChange }) => {
           Checkbox,
           {
             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
@@ -2156,10 +2239,13 @@ var FiltersContainer = ({
   initialSelectedTags,
   initialTextSearch,
   includeExpiredTables = false,
+  distance,
+  distances,
   onTypeChange,
   onTagChange,
   onTextSearchChange,
   onIncludeExpiredTablesChange,
+  onDistanceChange,
   onSubmit,
   tags,
   searchTypes
@@ -2174,7 +2260,10 @@ var FiltersContainer = ({
       onTypeChange(types);
     }
   };
-  return /* @__PURE__ */ jsxs(Box2, { children: [
+  return /* @__PURE__ */ jsxs(Box2, { component: "form", onSubmit: (e) => {
+    e.preventDefault();
+    if (onSubmit) onSubmit();
+  }, children: [
     /* @__PURE__ */ jsx(
       TypeFilter_default,
       {
@@ -2184,6 +2273,16 @@ var FiltersContainer = ({
       }
     ),
     /* @__PURE__ */ jsx(Divider3, { sx: { my: 2 } }),
+    /* @__PURE__ */ jsx(
+      DistanceFilter_default,
+      {
+        distances,
+        selectedDistance: distance,
+        onChange: onDistanceChange || (() => {
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx(Divider3, { sx: { my: 2 } }),
     /* @__PURE__ */ jsx(
       TextSearchCard_default,
       {
@@ -2214,13 +2313,13 @@ var FiltersContainer = ({
       /* @__PURE__ */ jsx(Divider3, { sx: { my: 2 } })
     ] }),
     /* @__PURE__ */ jsx(Box2, { sx: { display: "flex", justifyContent: "center", mt: 2 }, children: /* @__PURE__ */ jsx(
-      Button7,
+      Button8,
       {
+        type: "submit",
         variant: "contained",
         color: "primary",
         size: "large",
         startIcon: /* @__PURE__ */ jsx(SearchIcon, {}),
-        onClick: onSubmit,
         sx: {
           width: "100%",
           py: 1.5,
@@ -2280,11 +2379,13 @@ function SearchPageLayout({
     query: "",
     titleOnly: false
   },
-  includeExpiredTables: initialIncludeExpiredTables = false,
+  initialDistance,
+  distances,
   onTypeChange,
   onTagChange,
   onTextSearchChange,
   onIncludeExpiredTablesChange,
+  onDistanceChange,
   onSubmit,
   onResultClick,
   onPacketChange,
@@ -2292,14 +2393,16 @@ function SearchPageLayout({
   validTags,
   allTags,
   searchTypes,
-  isLoading = false
+  isLoading = false,
+  eventTagId
 }) {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down("md"));
   const [selectedTypes, setSelectedTypes] = useState(initialSelectedTypes);
   const [selectedTags, setSelectedTags] = useState(initialSelectedTags);
   const [textSearch, setTextSearch] = useState(initialTextSearch);
-  const [includeExpiredTables, setIncludeExpiredTables] = useState(initialIncludeExpiredTables);
+  const [includeExpiredTables, setIncludeExpiredTables] = useState(false);
+  const [distance, setDistance] = useState(initialDistance);
   useEffect(() => {
     setSelectedTypes(initialSelectedTypes);
   }, [initialSelectedTypes]);
@@ -2310,8 +2413,8 @@ function SearchPageLayout({
     setTextSearch(initialTextSearch);
   }, [initialTextSearch]);
   useEffect(() => {
-    setIncludeExpiredTables(initialIncludeExpiredTables);
-  }, [initialIncludeExpiredTables]);
+    setDistance(initialDistance);
+  }, [initialDistance]);
   const handleTypeChange = (types) => {
     setSelectedTypes(types);
     if (onTypeChange) onTypeChange(types);
@@ -2328,12 +2431,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);
@@ -2352,8 +2460,8 @@ function SearchPageLayout({
         }
       }
     ) }),
-    /* @__PURE__ */ jsxs(Grid8, { container: true, spacing: 2, children: [
-      /* @__PURE__ */ jsx(Grid8, { size: { xs: 12, md: 3 }, children: /* @__PURE__ */ jsxs(Card10, { sx: { marginBottom: isMobile ? 2 : 0 }, children: [
+    /* @__PURE__ */ jsxs(Grid10, { container: true, spacing: 2, children: [
+      /* @__PURE__ */ jsx(Grid10, { size: { xs: 12, md: 3 }, children: /* @__PURE__ */ jsxs(Card10, { sx: { marginBottom: isMobile ? 2 : 0 }, children: [
         /* @__PURE__ */ jsx(
           CardHeader4,
           {
@@ -2373,17 +2481,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__ */ jsx(Grid8, { size: { xs: 12, md: 9 }, children: /* @__PURE__ */ jsxs(Card10, { children: [
+      /* @__PURE__ */ jsx(Grid10, { size: { xs: 12, md: 9 }, children: /* @__PURE__ */ jsxs(Card10, { children: [
         /* @__PURE__ */ jsx(
           CardHeader4,
           {
@@ -2403,13 +2514,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] = useState(initialTagIDs);
+  const [inputValue, setInputValue] = 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 = useMemo(() => allTags.filter((tag) => tagList.includes(tag.id)), [allTags, tagList]);
+  const options = useMemo(
+    () => allTags.map((tag) => ({ value: tag.id, label: tag.label })),
+    [allTags]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: selectedTags.map((tag) => /* @__PURE__ */ jsx(
+      Chip,
+      {
+        tag,
+        removeCallback: () => toggleTag(tag.id)
+      },
+      tag.id
+    )) }),
+    /* @__PURE__ */ jsx(Grid10, { container: true, spacing: 3, children: /* @__PURE__ */ jsx(Grid10, { sx: { marginTop: 3, width: "100%", minWidth: "550px" }, children: /* @__PURE__ */ jsx(
+      Autocomplete,
+      {
+        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__ */ jsx(TextField7, { ...params, label: "Select Tags" })
+      },
+      tagList.join("-")
+    ) }) })
+  ] });
+}
+function EditTableDetailsForm({ initialTitle, initialSubtitle, onTitleChange, onSubtitleChange, allowEditingTitles, initialTagIDs, allTags, onTagChange }) {
+  const [title, setTitle] = useState(initialTitle);
+  const [subtitle, setSubtitle] = useState(initialSubtitle);
+  const handleTitleChange = (newTitle) => {
+    setTitle(newTitle);
+    onTitleChange(newTitle);
+  };
+  const handleSubtitleChange = (newSubtitle) => {
+    setSubtitle(newSubtitle);
+    onSubtitleChange(newSubtitle);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    allowEditingTitles && /* @__PURE__ */ jsxs(Box, { className: "flex flex-col gap-4 mb-8", children: [
+      /* @__PURE__ */ jsxs(Box, { className: "inline-flex", children: [
+        /* @__PURE__ */ jsx(
+          TextField7,
+          {
+            sx: { minWidth: "400px" },
+            label: "Title",
+            onChange: (e) => handleTitleChange(e.target.value),
+            variant: "filled",
+            value: title
+          }
+        ),
+        /* @__PURE__ */ jsx(Tooltip, { title: "Randomize", children: /* @__PURE__ */ jsx(
+          CasinoIcon,
+          {
+            sx: { cursor: "pointer", alignSelf: "center", ml: 1 },
+            onClick: () => handleTitleChange(getRandomTitle())
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxs(Box, { className: "inline-flex min-w-96", children: [
+        /* @__PURE__ */ jsx(
+          TextField7,
+          {
+            sx: { minWidth: "400px" },
+            label: "Short Description or Tagline",
+            onChange: (e) => handleSubtitleChange(e.target.value),
+            variant: "filled",
+            value: subtitle
+          }
+        ),
+        /* @__PURE__ */ jsx(Tooltip, { title: "Randomize", children: /* @__PURE__ */ jsx(
+          CasinoIcon,
+          {
+            sx: { cursor: "pointer", alignSelf: "center", ml: 1 },
+            onClick: () => handleSubtitleChange(getRandomTagline())
+          }
+        ) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(TagSelector, { initialTagIDs, allTags, onTagChange })
+  ] });
+}
 var GameTableContext = React7.createContext(void 0);
 function GameTableProvider(props) {
   return /* @__PURE__ */ jsx(Fragment, { children: props.children });
@@ -2422,76 +2775,206 @@ function useGameTableContext() {
   throw new Error("useGameTableContext is deprecated in the package build. Pass table data through props instead.");
 }
 var ModalContext = createContext({
-  showModal: (content) => {
+  showModal: () => {
   },
   hideModal: () => {
   }
 });
 var useModal = () => useContext(ModalContext);
-var Modal = ({ onClose, children }) => {
-  const modalRef = useRef(null);
-  const previouslyFocusedElement = useRef(null);
+var AutoResizingTextarea = (props) => {
+  const { isInEditMode, onChange, textareaRef, value } = props;
   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__ */ 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] = useState("");
+  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__ */ jsxs(Typography, { variant: "body2", color: "primary", sx: { fontWeight: "bold" }, children: [
+    "Next Game: ",
+    timeLeft
+  ] });
+};
+function TagEditor({
+  title,
+  selectedTags,
+  possibleTags,
+  onToggleTag
+}) {
+  const selectedIds = 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__ */ jsx(Grid10, { container: true, children: /* @__PURE__ */ jsx(Grid10, { size: { xs: 12 }, children: /* @__PURE__ */ jsxs(Card10, { children: [
+    title ? /* @__PURE__ */ jsx(
+      CardHeader4,
+      {
+        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__ */ jsx(CardContent10, { children: /* @__PURE__ */ jsx(TagSelector, { initialTagIDs: selectedIds, allTags: possibleTags, onTagChange }) })
+  ] }) }) });
+}
+var UserAgreementModal = ({
+  open,
+  onClose,
+  markdownContent,
+  requirements,
+  onAccept,
+  title = "User Agreement",
+  forceAgreement = false
+}) => {
+  const [checkedState, setCheckedState] = 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__ */ jsx(
-    "div",
+  const handleClose = (event, reason) => {
+    if (forceAgreement) return;
+    if (onClose) onClose();
+  };
+  return /* @__PURE__ */ jsxs(
+    Dialog,
     {
-      className: "modal-overlay",
-      onKeyDown: handleKeyDown,
-      ref: modalRef,
-      role: "dialog",
-      tabIndex: -1,
-      children: /* @__PURE__ */ jsxs("div", { className: "modal-container", children: [
-        /* @__PURE__ */ jsx("div", { className: "modal-control-strip", children: /* @__PURE__ */ jsx("button", { onClick: handleOnClose, children: "X" }) }),
-        /* @__PURE__ */ jsx("div", { className: "modal-content", children })
-      ] })
+      open,
+      onClose: handleClose,
+      maxWidth: "md",
+      fullWidth: true,
+      disableEscapeKeyDown: forceAgreement,
+      children: [
+        /* @__PURE__ */ jsx(DialogTitle, { children: title }),
+        /* @__PURE__ */ jsxs(DialogContent, { dividers: true, children: [
+          /* @__PURE__ */ jsx(Box, { sx: { mb: 3 }, children: /* @__PURE__ */ jsx(
+            ReactMarkdown,
+            {
+              components: {
+                h1: ({ node, ...props }) => /* @__PURE__ */ jsx(Typography, { variant: "h4", gutterBottom: true, ...props }),
+                h2: ({ node, ...props }) => /* @__PURE__ */ jsx(Typography, { variant: "h5", gutterBottom: true, ...props }),
+                h3: ({ node, ...props }) => /* @__PURE__ */ jsx(Typography, { variant: "h6", gutterBottom: true, ...props }),
+                h4: ({ node, ...props }) => /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", gutterBottom: true, ...props }),
+                h5: ({ node, ...props }) => /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", gutterBottom: true, ...props }),
+                h6: ({ node, ...props }) => /* @__PURE__ */ jsx(Typography, { variant: "caption", gutterBottom: true, ...props }),
+                p: ({ node, ...props }) => /* @__PURE__ */ jsx(Typography, { variant: "body1", gutterBottom: true, ...props }),
+                li: ({ node, ...props }) => /* @__PURE__ */ jsx(Box, { component: "li", sx: { mb: 1, ml: 2 }, ...props }),
+                ul: ({ node, ...props }) => /* @__PURE__ */ jsx(Box, { component: "ul", sx: { mb: 2 }, ...props }),
+                ol: ({ node, ...props }) => /* @__PURE__ */ jsx(Box, { component: "ol", sx: { mb: 2 }, ...props }),
+                a: ({ node, ...props }) => /* @__PURE__ */ jsx(Link, { ...props, target: "_blank", rel: "noopener" })
+              },
+              children: markdownContent
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: requirements.map((req, index) => /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "flex-start" }, children: /* @__PURE__ */ jsx(
+            FormControlLabel$1,
+            {
+              control: /* @__PURE__ */ jsx(
+                Checkbox$1,
+                {
+                  checked: checkedState[index],
+                  onChange: () => handleCheckboxChange(index)
+                }
+              ),
+              label: /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
+                req.statement,
+                req.link && req.linkText && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  " ",
+                  /* @__PURE__ */ jsx(Link, { href: req.link, target: "_blank", rel: "noopener", children: req.linkText })
+                ] }),
+                req.required && /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    component: "span",
+                    color: "error",
+                    sx: { ml: 0.5 },
+                    children: "*"
+                  }
+                )
+              ] })
+            }
+          ) }, index)) })
+        ] }),
+        /* @__PURE__ */ jsxs(DialogActions, { children: [
+          !forceAgreement && /* @__PURE__ */ jsx(Button, { onClick: onClose, color: "inherit", children: "Cancel" }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              onClick: handleAccept,
+              variant: "contained",
+              disabled: !isAllRequiredChecked,
+              fullWidth: forceAgreement,
+              children: "Accept"
+            }
+          )
+        ] })
+      ]
     }
   );
 };
-var Modal_default = Modal;
-var ModalProvider = ({ children }) => {
-  const [modalContent, setModalContent] = useState(null);
-  const showModal = (content) => setModalContent(content);
-  const hideModal = () => setModalContent(null);
-  return /* @__PURE__ */ jsxs(ModalContext.Provider, { value: { showModal, hideModal }, children: [
-    children,
-    modalContent && /* @__PURE__ */ jsx(Modal_default, { onClose: hideModal, children: modalContent })
-  ] });
-};
-var ModalProvider_default = ModalProvider;
+var UserAgreementModal_default = UserAgreementModal;
 var PlayerHighlightsCard = function(props) {
   const {
     allTags,
@@ -2503,16 +2986,16 @@ var PlayerHighlightsCard = function(props) {
     removeFromTable
   } = props;
   return /* @__PURE__ */ jsx(Card, { elevation: 3, sx: { backgroundColor: canEdit ? "#fffbea" : "#f5f9fa", marginBottom: "6px" }, children: /* @__PURE__ */ jsxs(CardContent, { children: [
-    /* @__PURE__ */ jsxs(Grid8, { container: true, spacing: 2, direction: "column", children: [
-      /* @__PURE__ */ jsxs(Grid8, { container: true, direction: "row", children: [
-        /* @__PURE__ */ jsx(Grid8, { children: /* @__PURE__ */ jsx(Image2, { alt: player.username + "'s profile pic", height: 64, src: player.miniPic || "", width: 64 }) }),
-        /* @__PURE__ */ jsx(Grid8, { children: /* @__PURE__ */ jsx(Typography, { variant: "h5", children: player.username }) })
+    /* @__PURE__ */ jsxs(Grid10, { container: true, spacing: 2, direction: "column", children: [
+      /* @__PURE__ */ jsxs(Grid10, { container: true, direction: "row", children: [
+        /* @__PURE__ */ jsx(Grid10, { children: /* @__PURE__ */ jsx(Image2, { alt: player.username + "'s profile pic", height: 64, src: player.miniPic || DEFAULT_PROFILE_PIC, width: 64 }) }),
+        /* @__PURE__ */ jsx(Grid10, { children: /* @__PURE__ */ jsx(Typography, { variant: "h5", children: player.username }) })
       ] }),
-      /* @__PURE__ */ jsx(Grid8, { children: renderTagsFromIds(player.tags, allTags) })
+      /* @__PURE__ */ jsx(Grid10, { children: renderTagsFromIds(player.tags, allTags) })
     ] }),
-    canEdit && /* @__PURE__ */ jsxs(Grid8, { children: [
-      /* @__PURE__ */ jsx(Button7, { onClick: () => removeFromTable(player), children: isWaitList ? /* @__PURE__ */ jsx("p", { children: "Deny Player" }) : /* @__PURE__ */ jsx("p", { children: "Remove Player" }) }),
-      canChangeDungeonMaster && /* @__PURE__ */ jsx(Button7, { onClick: () => {
+    canEdit && /* @__PURE__ */ jsxs(Grid10, { children: [
+      /* @__PURE__ */ jsx(Button8, { onClick: () => removeFromTable(player), children: isWaitList ? /* @__PURE__ */ jsx("p", { children: "Deny Player" }) : /* @__PURE__ */ jsx("p", { children: "Remove Player" }) }),
+      canChangeDungeonMaster && /* @__PURE__ */ jsx(Button8, { onClick: () => {
         handleAssignToDungeonMaster(player);
         removeFromTable(player);
       }, children: /* @__PURE__ */ jsx("p", { children: "Assign to DungeonMaster" }) })
@@ -2522,11 +3005,11 @@ var PlayerHighlightsCard = function(props) {
 var DMHighlightsCard = function({ canEdit, player, allTags }) {
   return /* @__PURE__ */ jsxs(Card, { elevation: 3, sx: { backgroundColor: "#f5f9fa", marginBottom: "6px" }, children: [
     /* @__PURE__ */ jsx(CardHeader, { slotProps: { title: { variant: "h4" } }, title: "Game Master" }),
-    /* @__PURE__ */ jsx(CardContent, { sx: { backgroundColor: canEdit ? "#fffbea" : "inherit" }, children: /* @__PURE__ */ jsxs(Grid8, { container: true, spacing: 2, direction: "column", children: [
-      /* @__PURE__ */ jsx(Grid8, { children: /* @__PURE__ */ jsx(Typography, { variant: "h5", children: player.username }) }),
-      /* @__PURE__ */ jsxs(Grid8, { container: true, direction: "row", children: [
-        /* @__PURE__ */ jsx(Grid8, { children: /* @__PURE__ */ jsx(Image2, { alt: player.username + "'s profile pic", height: 120, src: player.imageUrl ? player.imageUrl : "", width: 256 }) }),
-        /* @__PURE__ */ jsx(Grid8, { children: renderTagsFromIds(player.tags, allTags) }),
+    /* @__PURE__ */ jsx(CardContent, { sx: { backgroundColor: canEdit ? "#fffbea" : "inherit" }, children: /* @__PURE__ */ jsxs(Grid10, { container: true, spacing: 2, direction: "column", children: [
+      /* @__PURE__ */ jsx(Grid10, { children: /* @__PURE__ */ jsx(Typography, { variant: "h5", children: player.username }) }),
+      /* @__PURE__ */ jsxs(Grid10, { container: true, direction: "row", children: [
+        /* @__PURE__ */ jsx(Grid10, { children: /* @__PURE__ */ jsx(Image2, { alt: player.username + "'s profile pic", height: 120, src: player.imageUrl || DEFAULT_PROFILE_PIC, width: 256 }) }),
+        /* @__PURE__ */ jsx(Grid10, { children: renderTagsFromIds(player.tags, allTags) }),
         /* @__PURE__ */ jsx(Typography, { children: player.description })
       ] })
     ] }) })
@@ -2555,12 +3038,11 @@ function TableActionsBar(props) {
     if (waitlistPlayers.length === 0) {
       return /* @__PURE__ */ jsx("p", { children: "Waitlist is empty!" });
     }
-    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
-      /* @__PURE__ */ jsx(CardHeader4, { slotProps: { title: { variant: "h4" } }, title: "Waitlist Players: " }),
-      /* @__PURE__ */ jsx("ul", { className: "gap-8", children: waitlistPlayers.map((player) => /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("ul", { className: "gap-8 px-6", children: waitlistPlayers.map((player) => /* @__PURE__ */ 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: [
@@ -2569,7 +3051,7 @@ function TableActionsBar(props) {
               {
                 alt: player.username + "'s profile pic",
                 height: 64,
-                src: player.miniPic || "",
+                src: player.miniPic || DEFAULT_PROFILE_PIC,
                 width: 64
               }
             ),
@@ -2578,7 +3060,7 @@ function TableActionsBar(props) {
         },
         player.id
       )) }),
-      /* @__PURE__ */ jsx("button", { onClick: () => hideModal(), children: "close modal" })
+      /* @__PURE__ */ jsx(DialogActions3, { children: /* @__PURE__ */ jsx(Button8, { onClick: () => hideModal(), children: "Close" }) })
     ] });
   };
   return /* @__PURE__ */ jsxs(Grid, { container: true, direction: "column", spacing: 1, children: [
@@ -2589,33 +3071,45 @@ function TableActionsBar(props) {
       slots
     ] }) }),
     /* @__PURE__ */ jsxs(Grid, { container: true, direction: "row", children: [
-      !isOwner && !isPlayer && !isDM && !onWaitlist && /* @__PURE__ */ jsx(Button7, { onClick: () => onJoinWaitlist == null ? void 0 : onJoinWaitlist(), sx: buttonStyle, children: "Join Waitlist" }),
-      !isOwner && (isPlayer || onWaitlist) && /* @__PURE__ */ jsx(Button7, { onClick: () => onLeaveTable == null ? void 0 : onLeaveTable(), sx: buttonStyle, children: onWaitlist ? "Leave Waitlist" : "Leave Table" }),
+      !isOwner && !isPlayer && !isDM && !onWaitlist && /* @__PURE__ */ jsx(Button8, { onClick: () => onJoinWaitlist == null ? void 0 : onJoinWaitlist(), sx: buttonStyle, children: "Join Waitlist" }),
+      !isOwner && (isPlayer || onWaitlist) && /* @__PURE__ */ jsx(Button8, { onClick: () => onLeaveTable == null ? void 0 : onLeaveTable(), sx: buttonStyle, children: onWaitlist ? "Leave Waitlist" : "Leave Table" }),
       canEditTable ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Button7, { onClick: () => onEditModeChange(true), sx: buttonStyle, endIcon: /* @__PURE__ */ jsx(EditIcon, {}), children: "Edit" }),
+        /* @__PURE__ */ jsx(Button8, { onClick: () => onEditModeChange(true), sx: buttonStyle, endIcon: /* @__PURE__ */ jsx(EditIcon3, {}), children: "Edit" }),
         canViewWaitlist ? /* @__PURE__ */ jsx(
-          Button7,
+          Button8,
           {
             endIcon: /* @__PURE__ */ jsx(ListIcon, {}),
-            onClick: () => showModal(renderPlayerWaitlistModalContent(false)),
+            onClick: () => showModal(renderPlayerWaitlistModalContent(false), "Waitlist Players:"),
             sx: buttonStyle,
             children: "View Waitlist"
           }
         ) : null
       ] }) : canSaveTable ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Button7, { onClick: onSave, sx: buttonStyle, endIcon: /* @__PURE__ */ jsx(SaveIcon, {}), children: "Save" }),
-        /* @__PURE__ */ jsx(Button7, { onClick: () => onEditModeChange(false), sx: buttonStyle, children: "Cancel" }),
+        /* @__PURE__ */ jsx(Button8, { onClick: onSave, sx: buttonStyle, endIcon: /* @__PURE__ */ jsx(SaveIcon, {}), children: "Save" }),
+        /* @__PURE__ */ jsx(Button8, { onClick: () => onEditModeChange(false), sx: buttonStyle, children: "Cancel" }),
         /* @__PURE__ */ jsx(
-          Button7,
+          Button8,
           {
             endIcon: /* @__PURE__ */ jsx(ListIcon, {}),
-            onClick: () => showModal(renderPlayerWaitlistModalContent(true)),
+            onClick: () => showModal(renderPlayerWaitlistModalContent(true), "Waitlist Players:"),
             sx: buttonStyle,
             children: "Edit Waitlist"
           }
         )
       ] }) : null,
-      isOwner && /* @__PURE__ */ jsx(Button7, { onClick: () => onDeleteTable == null ? void 0 : onDeleteTable(), sx: buttonStyle, endIcon: /* @__PURE__ */ jsx(DeleteIcon, {}), children: "Delete Table" })
+      isOwner && /* @__PURE__ */ jsx(
+        Button8,
+        {
+          onClick: () => showModal(
+            /* @__PURE__ */ jsx(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__ */ jsx(DeleteIcon, {}),
+          children: "Delete Table"
+        }
+      )
     ] })
   ] });
 }
@@ -2625,165 +3119,82 @@ var buttonStyle = {
   color: "white",
   borderRadius: "5px"
 };
-var AutoResizingTextarea = (props) => {
-  const { isInEditMode, onChange, textareaRef, value } = props;
-  useEffect(() => {
-    if (isInEditMode && textareaRef.current) {
-      const textarea = textareaRef.current;
-      textarea.style.height = "auto";
-      textarea.style.height = `${textarea.scrollHeight}px`;
-    }
-  }, [isInEditMode, textareaRef, value]);
-  return /* @__PURE__ */ 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] = useState("");
-  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__ */ jsxs(Typography, { variant: "body2", color: "primary", sx: { fontWeight: "bold" }, children: [
-    "Next Game: ",
-    timeLeft
-  ] });
-};
-function TagEditor({
-  title = "Tags",
-  selectedTags,
-  possibleTags,
-  onToggleTag
-}) {
-  const [inputValue, setInputValue] = useState("");
-  const selectedIds = useMemo(() => selectedTags.map((tag) => tag.id), [selectedTags]);
-  const options = useMemo(
-    () => possibleTags.map((tag) => ({ value: tag.id, label: tag.label })),
-    [possibleTags]
-  );
-  return /* @__PURE__ */ jsx(Grid8, { container: true, children: /* @__PURE__ */ jsx(Grid8, { size: { xs: 12 }, children: /* @__PURE__ */ jsxs(Card10, { children: [
-    /* @__PURE__ */ jsx(
-      CardHeader4,
-      {
-        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__ */ jsxs(CardContent10, { children: [
-      /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: selectedTags.map((tag) => /* @__PURE__ */ jsx(
-        Chip,
-        {
-          tag,
-          removeCallback: () => onToggleTag(tag.id)
-        },
-        tag.id
-      )) }),
-      /* @__PURE__ */ jsx(Grid8, { container: true, spacing: 3, children: /* @__PURE__ */ jsx(Grid8, { sx: { marginTop: 3, width: "100%" }, children: /* @__PURE__ */ jsx(
-        Autocomplete,
-        {
-          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__ */ jsx(TextField4, { ...params, label: "Select Tags" })
-        },
-        selectedIds.join("-")
-      ) }) })
-    ] })
-  ] }) }) });
-}
-var CustomPopper3 = (props) => {
-  return /* @__PURE__ */ jsx(
-    Popper,
-    {
-      ...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 = useRef(null);
   const [isTableInEditMode, setIsTableInEditMode] = useState(false);
+  const [currentTitle, setCurrentTitle] = useState(table.title);
+  const [currentSubtitle, setCurrentSubtitle] = useState(table.shortDescription);
   const [currentDescription, setCurrentDescription] = useState(table.description);
   const [currentDungeonMaster, setCurrentDungeonMaster] = useState(dungeonMaster);
   const [currentPlayers, setCurrentPlayers] = useState(players);
-  const [currentShortDescription, setCurrentShortDescription] = useState(table.shortDescription);
-  const [currentTitle, setCurrentTitle] = useState(table.title);
   const [currentWaitlistPlayers, setCurrentWaitlistPlayers] = useState(waitlistPlayers);
   const [currentTagIds, setCurrentTagIds] = useState((_a = table.tags) != null ? _a : []);
+  const pendingEdits = 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__ */ 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
+        });
+      }
+    });
+  };
   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 = useMemo(
+    if (startWithEditTitle) {
+      editTableDetails();
+    }
+  });
+  useMemo(
     () => allTags.filter((tag) => currentTagIds.includes(tag.id)),
     [allTags, currentTagIds]
   );
@@ -2803,37 +3214,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__ */ jsx(
     Card,
     {
       sx: {
         backgroundColor: isTableInEditMode ? "lightsalmon" : "white",
-        borderRadius: "5%",
         p: 2,
         boxShadow: "0px 8px 15px rgba(25, 118, 210, 0.3)"
       },
-      children: /* @__PURE__ */ jsxs(Grid8, { container: true, direction: "column", children: [
+      children: /* @__PURE__ */ jsxs(Grid10, { container: true, direction: "column", children: [
         /* @__PURE__ */ jsxs(
-          Grid8,
+          Grid10,
           {
             container: true,
             direction: "column",
@@ -2846,39 +3237,49 @@ function TablePageLayout(props) {
               textShadow: "4px 4px 6px rgba(0, 0, 0, 0.5)"
             },
             children: [
-              /* @__PURE__ */ jsx(Box, { children: isTableInEditMode ? /* @__PURE__ */ jsx(
-                "input",
-                {
-                  onChange: (e) => setCurrentTitle(e.target.value),
-                  style: { backgroundColor: "#fffbea" },
-                  tabIndex: 0,
-                  type: "text",
-                  value: currentTitle
-                }
-              ) : /* @__PURE__ */ jsx(
-                CardHeader,
+              /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(
+                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__ */ jsx(
+                      CardHeader,
+                      {
+                        title: currentTitle,
+                        sx: {
+                          p: 0,
+                          "& .MuiCardHeader-title": {
+                            color: "white",
+                            fontWeight: 700
+                          }
+                        }
+                      }
+                    ),
+                    canEdit ? /* @__PURE__ */ jsx(EditIcon3, { className: "edit-icon text-white", sx: { opacity: 0, transition: "opacity 0.2s" } }) : ""
+                  ]
                 }
               ) }),
-              isTableInEditMode ? /* @__PURE__ */ jsx(
-                "input",
+              /* @__PURE__ */ jsxs(
+                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__ */ jsx(
+                      Typography,
+                      {
+                        sx: { color: "white", opacity: 0.95 },
+                        children: currentSubtitle
+                      }
+                    ),
+                    canEdit ? /* @__PURE__ */ jsx(EditIcon3, { className: "edit-icon text-white", sx: { opacity: 0, transition: "opacity 0.2s", fontSize: "medium" } }) : ""
+                  ]
                 }
-              ) : /* @__PURE__ */ jsx(Typography, { sx: { color: "white", opacity: 0.95 }, children: currentShortDescription }),
-              /* @__PURE__ */ jsx(Grid8, { container: true, children: isTableInEditMode ? renderEditableTags(currentTags, allTags, handleToggleTag) : renderTags(currentTagIds, allTags) }),
+              ),
+              /* @__PURE__ */ jsx(Grid10, { container: true, onClick: editTableDetails, className: `${canEdit ? "cursor-pointer" : ""}`, children: renderTags(currentTagIds, allTags, canEdit, table.eventTagId || eventTagId) }),
               /* @__PURE__ */ jsx(
                 TableActionsBar,
                 {
@@ -2898,8 +3299,8 @@ function TablePageLayout(props) {
             ]
           }
         ),
-        /* @__PURE__ */ jsxs(Grid8, { container: true, spacing: 2, sx: { mt: 2 }, children: [
-          /* @__PURE__ */ jsx(Grid8, { size: { xs: 12, md: 8 }, children: /* @__PURE__ */ jsx(Card, { sx: { height: "100%" }, children: /* @__PURE__ */ jsx(CardContent, { children: isTableInEditMode ? /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(Grid10, { container: true, spacing: 2, sx: { mt: 2 }, children: [
+          /* @__PURE__ */ jsx(Grid10, { size: { xs: 12, md: 8 }, children: /* @__PURE__ */ jsx(Card, { sx: { height: "100%" }, children: /* @__PURE__ */ jsx(CardContent, { children: isTableInEditMode ? /* @__PURE__ */ jsx(
             AutoResizingTextarea_default,
             {
               isInEditMode: isTableInEditMode,
@@ -2908,7 +3309,7 @@ function TablePageLayout(props) {
               value: currentDescription
             }
           ) : /* @__PURE__ */ jsx(Typography, { sx: { whiteSpace: "pre-wrap" }, children: currentDescription }) }) }) }),
-          /* @__PURE__ */ jsxs(Grid8, { size: { xs: 12, md: 4 }, children: [
+          /* @__PURE__ */ jsxs(Grid10, { size: { xs: 12, md: 4 }, children: [
             /* @__PURE__ */ jsx(DMHighlightsCard, { canEdit: isTableInEditMode, player: currentDungeonMaster, allTags }),
             /* @__PURE__ */ jsxs(Card, { sx: { height: "100%" }, children: [
               /* @__PURE__ */ jsx(CardHeader, { slotProps: { title: { variant: "h4" } }, title: "Players: " }),
@@ -2931,31 +3332,78 @@ function TablePageLayout(props) {
     }
   );
 }
-var renderTags = function(tags, allTags) {
+var renderTags = function(tags, allTags, canEdit, eventTagId) {
   if (!tags || !allTags) {
     return /* @__PURE__ */ jsx(Fragment, {});
   }
-  return /* @__PURE__ */ jsx(Grid8, { 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__ */ jsx(Fragment, {});
-  }) });
-};
-var renderEditableTags = function(selectedTags, allTags, onToggleTag) {
-  return /* @__PURE__ */ jsx(Grid8, { size: { xs: 12 }, sx: { pb: 1.5 }, children: /* @__PURE__ */ jsx(
-    TagEditor,
-    {
-      title: "Table Tags",
-      possibleTags: allTags.filter((tag) => {
-        var _a;
-        return (_a = tag.appliesTo) == null ? void 0 : _a.tables;
-      }),
-      selectedTags,
-      onToggleTag
-    }
-  ) });
+  return /* @__PURE__ */ jsxs(Grid10, { container: true, spacing: 1, sx: { pb: 1.5 }, children: [
+    renderTagsFromIds(tags, allTags, { showEventTag: true, eventTagId }),
+    canEdit ? /* @__PURE__ */ jsx(
+      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] = useState(null);
+  const [displayModal, setDisplayModal] = useState(false);
+  const [title, setTitle] = useState("");
+  const [options, setOptions] = useState({});
+  const showModal = (content, title2, opts) => {
+    setModalContent(content);
+    setTitle(title2);
+    setOptions(opts != null ? opts : {});
+    setDisplayModal(true);
+  };
+  const hideModal = () => {
+    setDisplayModal(false);
+  };
+  return /* @__PURE__ */ jsxs(ModalContext.Provider, { value: { showModal, hideModal }, children: [
+    children,
+    /* @__PURE__ */ jsxs(Dialog3, { open: displayModal, onClose: hideModal, sx: { height: "85%" }, children: [
+      /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(DialogTitle3, { sx: { marginRight: "20px", minWidth: "400px" }, children: title }),
+        /* @__PURE__ */ jsx(
+          IconButton3,
+          {
+            "aria-label": "close",
+            onClick: hideModal,
+            sx: { position: "absolute", right: 8, top: 8 },
+            children: /* @__PURE__ */ jsx(CloseIcon, {})
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(DialogContent3, { sx: { paddingTop: 0 }, children: modalContent }),
+      (options.acceptText || options.onAccept) && /* @__PURE__ */ jsxs(DialogActions3, { children: [
+        /* @__PURE__ */ jsx(Button8, { variant: "contained", onClick: () => {
+          var _a2;
+          hideModal();
+          (_a2 = options.onAccept) == null ? void 0 : _a2.call(options);
+        }, children: (_a = options.acceptText) != null ? _a : "OK" }),
+        /* @__PURE__ */ jsx(Button8, { onClick: () => {
+          var _a2;
+          hideModal();
+          (_a2 = options.onCancel) == null ? void 0 : _a2.call(options);
+        }, children: "Cancel" })
+      ] })
+    ] })
+  ] });
+};
+var ModalProvider_default = ModalProvider;
 
-export { AutoResizingTextarea_default as AutoResizingTextarea, BaseSearchResultCard_default as BaseSearchResultCard, CANDIDATE_TIMEZONES, Chip, DMHighlightsCard, EventBanner, EventBannerEdit, EventBasicInfo, EventBasicInfoEdit, EventEditProvider, EventPageLayout, EventResultCard_default as EventResultCard, EventTablesCard_default as EventTablesCard, ExpiredTablesFilter_default as ExpiredTablesFilter, FiltersContainer_default as FiltersContainer, GameTableProvider, ModalContext, ModalProvider_default as ModalProvider, NextGameCountdown, NextGameLabel_default as NextGameLabel, PlayerDetailsCard_default as PlayerDetailsCard, PlayerDisplayCard_default as PlayerDisplayCard, PlayerHighlightsCard, PlayerPageLayout, PlayerPromptCard_default as PlayerPromptCard, PlayerResultCard_default as PlayerResultCard, PlayerTagsCard_default as PlayerTagsCard, PlayerTagsEdit_default as PlayerTagsEdit, PlayersScrollableList_default as PlayersScrollableList, ResultsContainer_default as ResultsContainer, ScrollableResultsList_default as ScrollableResultsList, SearchPageLayout, SearchResultCard_default as SearchResultCard, SortOptions_default as SortOptions, TableActionsBar, TablePageLayout_default as TablePageLayout, TableResultCard_default as TableResultCard, TablesScrollableList_default as TablesScrollableList, TagEditor, TagsFilter_default as TagsFilter, TextSearchCard_default as TextSearchCard, TypeFilter_default as TypeFilter, generateTagsDisplay, renderTagsFromIds, useEventEdit, useGameTableContext, useModal };
+export { AutoResizingTextarea_default as AutoResizingTextarea, BaseSearchResultCard_default as BaseSearchResultCard, CANDIDATE_TIMEZONES, Chip, DMHighlightsCard, DistanceFilter_default as DistanceFilter, EditTableDetailsForm, EventBanner, EventBannerEdit, EventBasicInfo, EventBasicInfoEdit, EventEditProvider, EventPageLayout, EventResultCard_default as EventResultCard, EventTablesCard_default as EventTablesCard, ExpiredTablesFilter_default as ExpiredTablesFilter, FiltersContainer_default as FiltersContainer, GameTableProvider, ModalContext, ModalProvider_default as ModalProvider, NextGameCountdown, NextGameLabel_default as NextGameLabel, PlayerDetailsCard_default as PlayerDetailsCard, PlayerDisplayCard_default as PlayerDisplayCard, PlayerHighlightsCard, PlayerPageLayout, PlayerPromptCard_default as PlayerPromptCard, PlayerResultCard_default as PlayerResultCard, PlayerTagsCard_default as PlayerTagsCard, PlayerTagsEdit_default as PlayerTagsEdit, PlayersScrollableList_default as PlayersScrollableList, ResultsContainer_default as ResultsContainer, ScrollableResultsList_default as ScrollableResultsList, SearchPageLayout, SearchResultCard_default as SearchResultCard, SortOptions_default as SortOptions, TableActionsBar, TablePageLayout_default as TablePageLayout, TableResultCard_default as TableResultCard, TablesScrollableList_default as TablesScrollableList, TagEditor, TagSelector, TagsFilter_default as TagsFilter, TextSearchCard_default as TextSearchCard, TypeFilter_default as TypeFilter, UserAgreementModal_default as UserAgreementModal, generateTagsDisplay, getRandomTagline, getRandomTitle, renderTagsFromIds, useEventEdit, useGameTableContext, useModal };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map