@mbpockets/shared-ui 0.1.19 → 0.1.21

package/dist/index.cjs

@@ -11,28 +11,34 @@ var ColorizeIcon = require('@mui/icons-material/Colorize');
 var CancelIcon = require('@mui/icons-material/Cancel');
 var CheckCircleIcon = require('@mui/icons-material/CheckCircle');
 var Box2 = require('@mui/material/Box');
-var Grid9 = require('@mui/material/Grid');
+var Grid8 = require('@mui/material/Grid');
 var Card10 = require('@mui/material/Card');
 var CardContent10 = require('@mui/material/CardContent');
 var CardHeader4 = require('@mui/material/CardHeader');
-var Divider2 = require('@mui/material/Divider');
+var Divider3 = require('@mui/material/Divider');
+var Typography4 = require('@mui/material/Typography');
+var Pagination = require('@mui/material/Pagination');
 var Avatar = require('@mui/material/Avatar');
-var CasinoIcon = require('@mui/icons-material/Casino');
+var Chip2 = require('@mui/material/Chip');
+var LinearProgress = require('@mui/material/LinearProgress');
+var PersonIcon = require('@mui/icons-material/Person');
+var SupervisorAccountIcon = require('@mui/icons-material/SupervisorAccount');
+var TableRestaurantIcon = require('@mui/icons-material/TableRestaurant');
 var CalendarTodayIcon = require('@mui/icons-material/CalendarToday');
 var LocationOnIcon = require('@mui/icons-material/LocationOn');
 var EventIcon = require('@mui/icons-material/Event');
 var Autocomplete = require('@mui/material/Autocomplete');
 var Popper = require('@mui/material/Popper');
-var TextField3 = require('@mui/material/TextField');
-var Typography10 = require('@mui/material/Typography');
+var FormControlLabel = require('@mui/material/FormControlLabel');
+var Checkbox = require('@mui/material/Checkbox');
 var FormControl2 = require('@mui/material/FormControl');
 var RadioGroup = require('@mui/material/RadioGroup');
-var FormControlLabel = require('@mui/material/FormControlLabel');
 var Radio = require('@mui/material/Radio');
+var TextField4 = require('@mui/material/TextField');
 var FormGroup = require('@mui/material/FormGroup');
-var Checkbox = require('@mui/material/Checkbox');
 var Button7 = require('@mui/material/Button');
 var SearchIcon = require('@mui/icons-material/Search');
+var CircularProgress3 = require('@mui/material/CircularProgress');
 var Image2 = require('next/image');
 var ListIcon = require('@mui/icons-material/List');
 var SaveIcon = require('@mui/icons-material/Save');
@@ -47,28 +53,34 @@ var ColorizeIcon__default = /*#__PURE__*/_interopDefault(ColorizeIcon);
 var CancelIcon__default = /*#__PURE__*/_interopDefault(CancelIcon);
 var CheckCircleIcon__default = /*#__PURE__*/_interopDefault(CheckCircleIcon);
 var Box2__default = /*#__PURE__*/_interopDefault(Box2);
-var Grid9__default = /*#__PURE__*/_interopDefault(Grid9);
+var Grid8__default = /*#__PURE__*/_interopDefault(Grid8);
 var Card10__default = /*#__PURE__*/_interopDefault(Card10);
 var CardContent10__default = /*#__PURE__*/_interopDefault(CardContent10);
 var CardHeader4__default = /*#__PURE__*/_interopDefault(CardHeader4);
-var Divider2__default = /*#__PURE__*/_interopDefault(Divider2);
+var Divider3__default = /*#__PURE__*/_interopDefault(Divider3);
+var Typography4__default = /*#__PURE__*/_interopDefault(Typography4);
+var Pagination__default = /*#__PURE__*/_interopDefault(Pagination);
 var Avatar__default = /*#__PURE__*/_interopDefault(Avatar);
-var CasinoIcon__default = /*#__PURE__*/_interopDefault(CasinoIcon);
+var Chip2__default = /*#__PURE__*/_interopDefault(Chip2);
+var LinearProgress__default = /*#__PURE__*/_interopDefault(LinearProgress);
+var PersonIcon__default = /*#__PURE__*/_interopDefault(PersonIcon);
+var SupervisorAccountIcon__default = /*#__PURE__*/_interopDefault(SupervisorAccountIcon);
+var TableRestaurantIcon__default = /*#__PURE__*/_interopDefault(TableRestaurantIcon);
 var CalendarTodayIcon__default = /*#__PURE__*/_interopDefault(CalendarTodayIcon);
 var LocationOnIcon__default = /*#__PURE__*/_interopDefault(LocationOnIcon);
 var EventIcon__default = /*#__PURE__*/_interopDefault(EventIcon);
 var Autocomplete__default = /*#__PURE__*/_interopDefault(Autocomplete);
 var Popper__default = /*#__PURE__*/_interopDefault(Popper);
-var TextField3__default = /*#__PURE__*/_interopDefault(TextField3);
-var Typography10__default = /*#__PURE__*/_interopDefault(Typography10);
+var FormControlLabel__default = /*#__PURE__*/_interopDefault(FormControlLabel);
+var Checkbox__default = /*#__PURE__*/_interopDefault(Checkbox);
 var FormControl2__default = /*#__PURE__*/_interopDefault(FormControl2);
 var RadioGroup__default = /*#__PURE__*/_interopDefault(RadioGroup);
-var FormControlLabel__default = /*#__PURE__*/_interopDefault(FormControlLabel);
 var Radio__default = /*#__PURE__*/_interopDefault(Radio);
+var TextField4__default = /*#__PURE__*/_interopDefault(TextField4);
 var FormGroup__default = /*#__PURE__*/_interopDefault(FormGroup);
-var Checkbox__default = /*#__PURE__*/_interopDefault(Checkbox);
 var Button7__default = /*#__PURE__*/_interopDefault(Button7);
 var SearchIcon__default = /*#__PURE__*/_interopDefault(SearchIcon);
+var CircularProgress3__default = /*#__PURE__*/_interopDefault(CircularProgress3);
 var Image2__default = /*#__PURE__*/_interopDefault(Image2);
 var ListIcon__default = /*#__PURE__*/_interopDefault(ListIcon);
 var SaveIcon__default = /*#__PURE__*/_interopDefault(SaveIcon);
@@ -516,7 +528,7 @@ function EventBasicInfo(props) {
   );
 }
 function EventBasicInfoView({ description, locationId, startingDate, endingDate, timeInfo, timezone, isOwner, onEdit }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Grid9__default.default, { sx: { position: "relative" }, children: /* @__PURE__ */ jsxRuntime.jsx(material.Card, { style: {
+  return /* @__PURE__ */ jsxRuntime.jsx(Grid8__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: [
@@ -800,7 +812,7 @@ function EventBannerView({
 }) {
   const backgroundColor = bannerColor || "linear-gradient(135deg, rgba(25,118,210,0.8), rgba(25,118,210,1))";
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    Grid9__default.default,
+    Grid8__default.default,
     {
       sx: {
         background: backgroundColor,
@@ -808,7 +820,7 @@ function EventBannerView({
         position: "relative"
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(Grid9__default.default, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Grid8__default.default, { children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
             material.Box,
             {
@@ -867,7 +879,7 @@ function EventBannerView({
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs(
-            Grid9__default.default,
+            Grid8__default.default,
             {
               display: "flex",
               justifyContent: "center",
@@ -975,6 +987,14 @@ var generateLink = function(link) {
     link.text
   );
 };
+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: [
+    "Next Game: ",
+    date.toLocaleString()
+  ] });
+};
+var NextGameLabel_default = NextGameLabel;
 var BaseSearchResultCard = ({
   result,
   onClick,
@@ -982,13 +1002,19 @@ var BaseSearchResultCard = ({
   icon,
   tags
 }) => {
-  const handleClick = () => {
+  const handleClick = (e) => {
     if (onClick) {
-      onClick(result.id);
+      if (e.ctrlKey || e.metaKey || e.shiftKey) {
+        e.stopPropagation();
+        const url = `/${result.type}/${result.id}`;
+        window.open(url, "_blank");
+      } else {
+        onClick(result.id);
+      }
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
-    material.Card,
+    Card10__default.default,
     {
       elevation: 6,
       sx: {
@@ -1001,48 +1027,22 @@ var BaseSearchResultCard = ({
         },
         marginBottom: 2
       },
-      onClick: handleClick,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(material.CardContent, { sx: { display: "flex", alignItems: "flex-start" }, children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { mr: 2, display: "flex", alignItems: "center", pt: 0.5 }, children: icon }),
-        /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { flex: 1 }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h6", sx: { mb: 1 }, children: result.title }),
+      onClick: (e) => handleClick(e),
+      children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent10__default.default, { sx: { display: "flex", alignItems: "flex-start" }, children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx(Box2__default.default, { sx: { mr: 2, display: "flex", alignItems: "center", pt: 0.5 }, children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Box2__default.default, { sx: { flex: 1 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Typography4__default.default, { variant: "h6", sx: { mb: 1 }, children: result.title }),
+          result.nextGameTime && /* @__PURE__ */ jsxRuntime.jsx(NextGameLabel_default, { nextGameTime: result.nextGameTime }),
+          result.type === "table" && result.shortDescription ? /* @__PURE__ */ jsxRuntime.jsx(Typography4__default.default, { variant: "body2", sx: { mb: 1 }, children: result.shortDescription }) : null,
           children,
-          /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body1", children: result.description }),
-          result.tags && result.tags.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { mt: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: {
-            display: "block",
-            whiteSpace: "nowrap",
-            overflow: "hidden",
-            textOverflow: "clip",
-            pl: 0.5
-            // Add some padding to prevent clipping of the leftmost tag
-          }, children: (() => {
-            const MAX_VISIBLE = 5;
-            const tagObjs = result.tags.map((tagId) => tags.find((t) => t.id === tagId)).filter((t) => Boolean(t));
-            const visible = tagObjs.slice(0, MAX_VISIBLE);
-            const hiddenCount = Math.max(tagObjs.length - visible.length, 0);
-            return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              visible.map((tag) => generateTagsDisplay(tag)),
-              hiddenCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
-                "span",
-                {
-                  className: "inline-block text-sm px-3 py-1 rounded-full outline-black outline-2 font-outlined",
-                  style: {
-                    marginTop: "6px",
-                    marginRight: "6px",
-                    marginBottom: "6px",
-                    background: "#9e9e9e",
-                    color: "white",
-                    textShadow: "black 0.2em 0.2em 0.4em"
-                  },
-                  children: [
-                    "+",
-                    hiddenCount,
-                    " more"
-                  ]
-                }
-              )
-            ] });
-          })() }) })
+          result.type === "table" ? /* @__PURE__ */ jsxRuntime.jsx(Typography4__default.default, { 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__ */ 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) })
         ] })
       ] })
     }
@@ -1097,21 +1097,60 @@ var PlayerResultCard = ({
   return /* @__PURE__ */ jsxRuntime.jsx(BaseSearchResultCard_default, { result, onClick, icon: playerIcon, tags });
 };
 var PlayerResultCard_default = PlayerResultCard;
-var TableResultCard = ({ result, tags, onClick }) => {
-  const capacity = result.capacity || 1;
-  const numPlayers = result.numPlayers || 0;
-  const occupancy = numPlayers / capacity * 100;
-  return /* @__PURE__ */ jsxRuntime.jsx(BaseSearchResultCard, { result, tags, onClick, icon: /* @__PURE__ */ jsxRuntime.jsx(CasinoIcon__default.default, { color: "primary" }), children: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { mb: 1 }, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 0.5 }, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "body2", color: "text.secondary", children: [
-        "Players: ",
-        numPlayers,
-        " / ",
-        capacity
+var TableResultCard = ({
+  result,
+  onClick,
+  tags
+}) => {
+  const rawCapacity = result.capacity;
+  const hasDefinedCapacity = typeof rawCapacity === "number" && Number.isFinite(rawCapacity) && rawCapacity > 0;
+  const capacity = hasDefinedCapacity ? rawCapacity : 0;
+  const activePlayers = typeof result.numPlayers === "number" ? result.numPlayers : 0;
+  const availableSlots = Math.max(capacity - activePlayers, 0);
+  const hasDM = typeof result.hasDM === "boolean" ? result.hasDM : Boolean(result.dungeonMaster);
+  const occupancyPercentage = hasDefinedCapacity ? activePlayers / capacity * 100 : 100;
+  const tableIcon = /* @__PURE__ */ jsxRuntime.jsx(
+    TableRestaurantIcon__default.default,
+    {
+      sx: {
+        fontSize: 40,
+        color: "primary.main"
+      }
+    }
+  );
+  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
       ] }),
-      result.dungeonMaster ? /* @__PURE__ */ jsxRuntime.jsx(material.Chip, { label: "DM Present", size: "small", color: "success", variant: "outlined" }) : /* @__PURE__ */ jsxRuntime.jsx(material.Chip, { label: "No DM", size: "small", color: "warning", variant: "outlined" })
+      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(material.LinearProgress, { variant: "determinate", value: occupancy, sx: { height: 8, borderRadius: 4 } })
+    /* @__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" })
   ] }) });
 };
 var TableResultCard_default = TableResultCard;
@@ -1130,20 +1169,42 @@ var EventResultCard = ({
     try {
       const date = new Date(dateString);
       return date.toLocaleDateString("en-US", options);
-    } catch {
+    } catch (error) {
       return dateString;
     }
   };
   const formattedDate = result.date ? formatDate(result.date) : "Date TBD";
   const location = result.location || "Location TBD";
-  return /* @__PURE__ */ jsxRuntime.jsx(BaseSearchResultCard_default, { result, onClick, icon: /* @__PURE__ */ jsxRuntime.jsx(EventIcon__default.default, { color: "primary" }), tags, children: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { mb: 1 }, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", mb: 0.5 }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(CalendarTodayIcon__default.default, { sx: { mr: 1, fontSize: "small", color: "text.secondary" } }),
-      /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", color: "text.secondary", children: formattedDate })
+  const eventIcon = /* @__PURE__ */ jsxRuntime.jsx(
+    EventIcon__default.default,
+    {
+      sx: {
+        fontSize: 40,
+        color: "primary.main"
+      }
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(BaseSearchResultCard_default, { result, onClick, icon: eventIcon, tags, children: /* @__PURE__ */ jsxRuntime.jsxs(Box2__default.default, { sx: { mb: 2 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Box2__default.default, { sx: { display: "flex", alignItems: "center", mb: 1 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CalendarTodayIcon__default.default, { sx: { mr: 1, color: "primary.main" } }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Typography4__default.default, { variant: "body2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Date:" }),
+        " ",
+        formattedDate
+      ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", mb: 1 }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(LocationOnIcon__default.default, { sx: { mr: 1, fontSize: "small", color: "text.secondary" } }),
-      /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", color: "text.secondary", children: location })
+    /* @__PURE__ */ jsxRuntime.jsxs(Box2__default.default, { sx: { display: "flex", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(LocationOnIcon__default.default, { sx: { mr: 1, color: "primary.main" } }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Typography4__default.default, { variant: "body2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Location:" }),
+        " ",
+        location
+      ] })
+    ] }),
+    result.organizer && /* @__PURE__ */ jsxRuntime.jsxs(Typography4__default.default, { variant: "body2", sx: { mt: 1 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Organizer:" }),
+      " ",
+      result.organizer
     ] })
   ] }) });
 };
@@ -1151,9 +1212,11 @@ var EventResultCard_default = EventResultCard;
 var ResultsContainer = ({
   results,
   onResultClick,
-  tags
+  tags,
+  pagination,
+  onPacketChange
 }) => {
-  if (results.length === 0 || !results.map) {
+  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) => {
@@ -1165,43 +1228,68 @@ var ResultsContainer = ({
   const onEventClick = (id) => {
     onResultClick == null ? void 0 : onResultClick(id, "event");
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(Box2__default.default, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: results.map((result) => {
-    switch (result.type) {
-      case "player":
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          PlayerResultCard_default,
-          {
-            result,
-            onClick: onPlayerClick,
-            tags
-          },
-          result.id
-        );
-      case "table":
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          TableResultCard_default,
-          {
-            result,
-            onClick: onTableClick,
-            tags
-          },
-          result.id
-        );
-      case "event":
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          EventResultCard_default,
-          {
-            result,
-            onClick: onEventClick,
-            tags
-          },
-          result.id
-        );
-      default:
-        console.error(`Unknown result type: ${result.type}`);
-        return null;
-    }
-  }) });
+  const handlePacketChange = (_event, packet) => {
+    onPacketChange == null ? void 0 : onPacketChange(packet);
+  };
+  const startResult = pagination ? (pagination.currentPacket - 1) * pagination.packetSize + 1 : 1;
+  const endResult = pagination ? Math.min(pagination.currentPacket * pagination.packetSize, pagination.totalResults) : results.length;
+  return /* @__PURE__ */ jsxRuntime.jsxs(Box2__default.default, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+    pagination && /* @__PURE__ */ jsxRuntime.jsx(Box2__default.default, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1 }, children: /* @__PURE__ */ jsxRuntime.jsxs(Typography4__default.default, { variant: "body2", color: "text.secondary", children: [
+      "Showing ",
+      startResult,
+      "-",
+      endResult,
+      " of ",
+      pagination.totalResults,
+      " results"
+    ] }) }),
+    results.map((result, index) => {
+      switch (result.type) {
+        case "player":
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            PlayerResultCard_default,
+            {
+              result,
+              onClick: onPlayerClick,
+              tags
+            },
+            result.id
+          );
+        case "table":
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            TableResultCard_default,
+            {
+              result,
+              onClick: onTableClick,
+              tags
+            },
+            result.id
+          );
+        case "event":
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            EventResultCard_default,
+            {
+              result,
+              onClick: onEventClick,
+              tags
+            },
+            result.id
+          );
+        default:
+          console.error(`Unknown result type: ${result.type}`);
+          return null;
+      }
+    }),
+    pagination && pagination.totalPackets > 1 && /* @__PURE__ */ jsxRuntime.jsx(Box2__default.default, { sx: { display: "flex", justifyContent: "center", mt: 4 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Pagination__default.default,
+      {
+        count: pagination.totalPackets,
+        page: pagination.currentPacket,
+        onChange: handlePacketChange,
+        color: "primary"
+      }
+    ) })
+  ] });
 };
 var ResultsContainer_default = ResultsContainer;
 var ScrollableResultsList = ({
@@ -1219,21 +1307,14 @@ var TablesScrollableList = ({
   results,
   tags,
   maxHeight,
-  onResultClick,
-  sortBy = "availability"
+  onResultClick
 }) => {
   const tables = (results || []).filter((r) => (r == null ? void 0 : r.type) === "table");
-  const getAvailableSlots = (r) => {
-    const capacity = typeof r.capacity === "number" ? r.capacity : 0;
-    const playersCount = typeof r.numPlayers === "number" ? r.numPlayers : 0;
-    return Math.max(capacity - playersCount, 0);
-  };
-  const sortedTables = sortBy === "availability" ? [...tables].sort((a, b) => getAvailableSlots(b) - getAvailableSlots(a)) : tables;
   const handleClick = (id) => onResultClick == null ? void 0 : onResultClick(id);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ScrollableResultsList_default,
     {
-      results: sortedTables,
+      results: tables,
       tags,
       maxHeight,
       onResultClick: (id, type) => {
@@ -1251,8 +1332,8 @@ var EventTablesCard = ({
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(Card10__default.default, { elevation: 6, sx: { width: "100%", boxShadow: "0px 8px 24px rgba(0, 0, 0, 0.15)" }, children: [
     /* @__PURE__ */ jsxRuntime.jsx(CardHeader4__default.default, { title: "Tables" }),
-    /* @__PURE__ */ jsxRuntime.jsx(Divider2__default.default, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(CardContent10__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(TablesScrollableList_default, { results: tables, tags, maxHeight, onResultClick: onTableClick, sortBy: "availability" }) })
+    /* @__PURE__ */ jsxRuntime.jsx(Divider3__default.default, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(CardContent10__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(TablesScrollableList_default, { results: tables, tags, maxHeight, onResultClick: onTableClick }) })
   ] });
 };
 var EventTablesCard_default = EventTablesCard;
@@ -1266,27 +1347,28 @@ function EventPageLayout({
   tables,
   allTags
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Grid9__default.default, { container: true, flexDirection: "column", children: /* @__PURE__ */ jsxRuntime.jsxs(EventEditProvider, { initialEvent: mergedEvent, value: { isOwner, updateEvent, updateImages }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Grid9__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(
+  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(
       EventBanner,
       {
         attendees,
         numGames
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(Grid9__default.default, { container: true, flexDirection: "row", spacing: 3, size: { xs: 12, md: 12 }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Grid9__default.default, { size: { xs: 12, md: 4 }, spacing: 3, padding: 3, children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__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(
         EventBasicInfo,
         {
           locationId: mergedEvent.location || "0"
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Grid9__default.default, { size: { xs: 12, md: 8 }, spacing: 3, padding: 3, children: /* @__PURE__ */ jsxRuntime.jsx(EventTablesCard_default, { tables, tags: allTags }) })
+      /* @__PURE__ */ jsxRuntime.jsx(Grid8__default.default, { size: { xs: 12, md: 8 }, spacing: 3, padding: 3, children: /* @__PURE__ */ jsxRuntime.jsx(EventTablesCard_default, { tables, tags: allTags }) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(Grid9__default.default, {})
+    /* @__PURE__ */ jsxRuntime.jsx(Grid8__default.default, {})
   ] }) });
 }
-var PlayerDetails = ({
+var PlayerDetailsCard = ({
+  preferredPronouns,
   age,
   yearsPlaying,
   discordUsername,
@@ -1336,6 +1418,23 @@ var PlayerDetails = ({
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+            preferredPronouns && /* @__PURE__ */ jsxRuntime.jsxs(
+              material.Typography,
+              {
+                variant: "body2",
+                className: "text-sm font-medium",
+                sx: {
+                  color: "#FFFFFF",
+                  textShadow: "0px 2px 6px rgba(0, 0, 0, 0.5)",
+                  fontWeight: "bold"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-extrabold text-cyan-300", children: "Preferred Pronouns:" }),
+                  " ",
+                  preferredPronouns
+                ]
+              }
+            ),
             age !== null && /* @__PURE__ */ jsxRuntime.jsxs(
               material.Typography,
               {
@@ -1387,7 +1486,7 @@ var PlayerDetails = ({
                 ]
               }
             ),
-            preferredGames && preferredGames.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+            preferredGames && /* @__PURE__ */ jsxRuntime.jsxs(
               material.Typography,
               {
                 variant: "body2",
@@ -1400,7 +1499,7 @@ var PlayerDetails = ({
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-extrabold text-cyan-300", children: "Preferred Games:" }),
                   " ",
-                  preferredGames.join(", ")
+                  Array.isArray(preferredGames) ? preferredGames.join(", ") : preferredGames
                 ]
               }
             )
@@ -1423,24 +1522,20 @@ var PlayerDetails = ({
     }
   );
 };
-var PlayerDetailsCard_default = PlayerDetails;
+var PlayerDetailsCard_default = PlayerDetailsCard;
 
 // src/data/values.tsx
 var ProfilePictureSettings = {
   aspectRatio: 4 / 5};
-var { aspectRatio } = ProfilePictureSettings;
-var PlayerDisplayCard = ({
-  profilePicture,
-  username,
-  bio,
-  preferredPronouns
-}) => {
-  const [imageSrc, setImageSrc] = React7.useState("/man-walking-silhouette-clipart.jpg");
+var PlayerDisplayCard = ({ profilePicture, username, bio, preferredPronouns }) => {
+  const defaultImg = "/man-walking-silhouette-clipart.jpg";
+  const [imageSrc, setImageSrc] = React7.useState(defaultImg);
+  const { aspectRatio } = ProfilePictureSettings;
   React7.useEffect(() => {
     async function validateImage() {
-      const newImage = profilePicture || "/man-walking-silhouette-clipart.jpg";
+      const newImage = profilePicture || defaultImg;
       if (!profilePicture) {
-        setImageSrc("/man-walking-silhouette-clipart.jpg");
+        setImageSrc(defaultImg);
         return;
       }
       const img = new Image();
@@ -1449,7 +1544,7 @@ var PlayerDisplayCard = ({
         setImageSrc(newImage);
       };
       img.onerror = () => {
-        setImageSrc("/man-walking-silhouette-clipart.jpg");
+        setImageSrc(defaultImg);
       };
     }
     validateImage();
@@ -1483,7 +1578,7 @@ var PlayerDisplayCard = ({
               height: "auto",
               // Updates to maintain aspect ratio and fill space nicely
               width: "100%",
-              objectFit: "scale-down"
+              objectFit: "cover"
             }
           }
         ),
@@ -1542,104 +1637,127 @@ var PlayerDisplayCard = ({
   );
 };
 var PlayerDisplayCard_default = PlayerDisplayCard;
-var PlayerPromptCard = ({ title, description }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    material.Card,
-    {
-      sx: {
-        margin: "1rem",
-        background: "linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(25, 118, 210, 1))",
-        // Gradient color scheme
-        boxShadow: "0px 8px 15px rgba(25, 118, 210, 0.3)",
-        // Card shadow
-        borderRadius: "12px",
-        // Rounded corners
-        color: "#FFFFFF",
-        // Text contrast with the background
-        overflow: "hidden"
-        // Keeps consistent and clean card shape
-      },
-      className: "transition duration-300 transform hover:scale-105 hover:shadow-2xl",
-      children: /* @__PURE__ */ jsxRuntime.jsxs(material.CardContent, { className: "p-6", children: [
-        title && /* @__PURE__ */ jsxRuntime.jsx(
-          material.Typography,
-          {
-            variant: "h5",
-            className: "font-bold text-lg uppercase text-center tracking-wide mb-4",
-            sx: {
-              color: "#FFFFFF",
-              // Bright white for high visibility
-              textShadow: "0px 3px 6px rgba(0, 0, 0, 0.5)",
-              // Strong text shadow for contrast
-              fontSize: "1.5rem"
-            },
-            children: title
-          }
-        ),
-        description && /* @__PURE__ */ jsxRuntime.jsx(
-          material.Typography,
-          {
-            variant: "body2",
-            className: "text-sm font-medium text-center",
-            sx: {
-              color: "#E3F2FD",
-              // Softer light blue for description
-              textShadow: "0px 2px 4px rgba(0, 0, 0, 0.3)",
-              // Subtle shadow
-              lineHeight: 1.6,
-              marginTop: "1rem"
-            },
-            children: description
+var PlayerTagsCard = ({ tags = [] }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(material.Card, { sx: {
+    margin: "1rem",
+    borderRadius: "12px",
+    boxShadow: "0px 8px 15px rgba(25, 118, 210, 0.3)",
+    overflow: "hidden"
+  }, className: "transition duration-300 transform hover:scale-105 hover:shadow-2xl", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      material.CardHeader,
+      {
+        title: "Player Tags",
+        sx: {
+          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)",
+          "& .MuiCardHeader-title": {
+            fontWeight: "bold",
+            fontSize: "1.5rem",
+            textAlign: "center",
+            textTransform: "uppercase",
+            letterSpacing: "0.05em"
           }
-        )
-      ] })
-    }
-  );
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(material.CardContent, { className: "p-6", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: tags.map((tag) => /* @__PURE__ */ jsxRuntime.jsx(Chip, { tag }, tag.id)) }) })
+  ] });
 };
-var PlayerPromptCard_default = PlayerPromptCard;
-function PlayerTagsCard(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Grid9__default.default, { container: true, children: /* @__PURE__ */ jsxRuntime.jsx(Grid9__default.default, { size: { xs: 12, md: 3 }, children: /* @__PURE__ */ jsxRuntime.jsxs(Card10__default.default, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(CardHeader4__default.default, { title: "Player Tags", style: {
+var PlayerTagsCard_default = PlayerTagsCard;
+var PlayerPromptCard = ({ title, description }) => /* @__PURE__ */ jsxRuntime.jsx(
+  material.Card,
+  {
+    sx: {
+      margin: "1rem",
       background: "linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(25, 118, 210, 1))",
+      // Gradient color scheme
+      boxShadow: "0px 8px 15px rgba(25, 118, 210, 0.3)",
+      // Card shadow
+      borderRadius: "12px",
+      // Rounded corners
       color: "#FFFFFF",
-      // Pure white for username
-      fontSize: "1.5rem",
-      textShadow: "0px 3px 6px rgba(0, 0, 0, 0.5)"
-      // Strong shadow for visibility
-    } }),
-    /* @__PURE__ */ jsxRuntime.jsx(CardContent10__default.default, { children: renderLabels(props.PlayerTags) })
-  ] }) }) });
-}
-var renderLabels = (tags) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: tags.map((tag) => /* @__PURE__ */ jsxRuntime.jsx(Chip, { tag }, tag.id)) });
-};
-function TagEditor({
-  title = "Tags",
-  selectedTags,
-  possibleTags,
+      // Text contrast with the background
+      overflow: "hidden"
+      // Keeps consistent and clean card shape
+    },
+    className: "transition duration-300 transform hover:scale-105 hover:shadow-2xl",
+    children: /* @__PURE__ */ jsxRuntime.jsxs(material.CardContent, { className: "p-6", children: [
+      title && /* @__PURE__ */ jsxRuntime.jsx(
+        material.Typography,
+        {
+          variant: "h5",
+          className: "font-bold text-lg uppercase text-center tracking-wide mb-4",
+          sx: {
+            color: "#FFFFFF",
+            // Bright white for high visibility
+            textShadow: "0px 3px 6px rgba(0, 0, 0, 0.5)",
+            // Strong text shadow for contrast
+            fontSize: "1.5rem"
+          },
+          children: title
+        }
+      ),
+      description && /* @__PURE__ */ jsxRuntime.jsx(
+        material.Typography,
+        {
+          variant: "body2",
+          className: "text-sm font-medium text-center",
+          sx: {
+            color: "#E3F2FD",
+            // Softer light blue for description
+            textShadow: "0px 2px 4px rgba(0, 0, 0, 0.3)",
+            // Subtle shadow
+            lineHeight: 1.6,
+            marginTop: "1rem"
+          },
+          children: description
+        }
+      )
+    ] })
+  }
+);
+var PlayerPromptCard_default = PlayerPromptCard;
+var PlayerTagsEdit = ({
+  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.map((tag) => ({ value: tag.id, label: tag.label, alternate_title: tag.alternate_title })),
     [possibleTags]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(Grid9__default.default, { container: true, children: /* @__PURE__ */ jsxRuntime.jsx(Grid9__default.default, { size: { xs: 12 }, children: /* @__PURE__ */ jsxRuntime.jsxs(Card10__default.default, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(material.Card, { sx: {
+    margin: "1rem",
+    borderRadius: "12px",
+    boxShadow: "0px 8px 15px rgba(25, 118, 210, 0.3)",
+    overflow: "hidden"
+  }, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      CardHeader4__default.default,
+      material.CardHeader,
       {
-        title,
-        style: {
+        title: "Player Tags",
+        sx: {
           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)"
+          textShadow: "0px 3px 6px rgba(0, 0, 0, 0.5)",
+          "& .MuiCardHeader-title": {
+            fontWeight: "bold",
+            fontSize: "1.5rem",
+            textAlign: "center",
+            textTransform: "uppercase",
+            letterSpacing: "0.05em"
+          }
         }
       }
     ),
-    /* @__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(
+    /* @__PURE__ */ jsxRuntime.jsxs(material.CardContent, { className: "p-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2 mb-4", children: selectedTags.map((tag) => /* @__PURE__ */ jsxRuntime.jsx(
         Chip,
         {
           tag,
@@ -1647,13 +1765,19 @@ function TagEditor({
         },
         tag.id
       )) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Grid9__default.default, { container: true, spacing: 3, children: /* @__PURE__ */ jsxRuntime.jsx(Grid9__default.default, { sx: { marginTop: 3, width: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__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),
+          filterOptions: (availableOptions, state) => {
+            const query = state.inputValue.toLowerCase();
+            return availableOptions.filter(
+              (option) => {
+                var _a;
+                return !selectedIds.includes(option.value) && (option.label.toLowerCase().includes(query) || ((_a = option.alternate_title) == null ? void 0 : _a.some((title) => title.toLowerCase().includes(query))));
+              }
+            ).slice(0, 5);
+          },
           value: null,
           inputValue,
           onInputChange: (event, newInputValue) => {
@@ -1668,13 +1792,20 @@ function TagEditor({
             setInputValue("");
           },
           slots: { popper: CustomPopper },
-          renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(TextField3__default.default, { ...params, label: "Select Tags" })
+          renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(
+            material.TextField,
+            {
+              ...params,
+              label: "Select Tags",
+              variant: "outlined"
+            }
+          )
         },
         selectedIds.join("-")
-      ) }) })
+      )
     ] })
-  ] }) }) });
-}
+  ] });
+};
 var CustomPopper = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     Popper__default.default,
@@ -1683,28 +1814,105 @@ var CustomPopper = (props) => {
       modifiers: [
         {
           name: "preventOverflow",
-          options: { boundary: "viewport" }
+          options: {
+            boundary: "viewport"
+          }
         },
         {
           name: "offset",
-          options: { offset: [0, -10] }
+          options: {
+            offset: [0, -10]
+          }
         }
       ],
       placement: "top-start"
     }
   );
 };
-function PlayerTagsEdit(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    TagEditor,
+var PlayerTagsEdit_default = PlayerTagsEdit;
+function PlayerPageLayout({
+  playerData,
+  tags = [],
+  blurbs = [],
+  isOwner = false,
+  possibleTags = [],
+  onToggleTag = () => {
+  }
+}) {
+  const theme = material.useTheme();
+  const isSmallScreen = material.useMediaQuery(theme.breakpoints.down("lg"));
+  const tagsElement = isOwner ? /* @__PURE__ */ jsxRuntime.jsx(
+    PlayerTagsEdit_default,
     {
-      title: "Player Tags",
-      selectedTags: props.PlayerTags,
-      possibleTags: props.possibleTags,
-      onToggleTag: props.updatePlayerTags
+      selectedTags: tags,
+      possibleTags,
+      onToggleTag
     }
-  );
+  ) : /* @__PURE__ */ jsxRuntime.jsx(PlayerTagsCard_default, { tags });
+  return /* @__PURE__ */ jsxRuntime.jsx(material.NoSsr, { children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { padding: "2rem", marginRight: "auto", marginLeft: "auto" }, justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsxs(material.Grid, { container: true, spacing: 3, justifyContent: "center", sx: { marginRight: "auto", marginLeft: "auto" }, children: [
+    !isSmallScreen && /* @__PURE__ */ jsxRuntime.jsxs(material.Grid, { size: { xs: 12, lg: 3 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        PlayerDetailsCard_default,
+        {
+          preferredPronouns: playerData.preferredPronouns,
+          age: playerData.age,
+          yearsPlaying: playerData.yearsPlaying,
+          discordUsername: playerData.discordUsername,
+          preferredGames: playerData.preferredGames
+        }
+      ),
+      tagsElement
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { size: { xs: 12, lg: 6 }, children: /* @__PURE__ */ jsxRuntime.jsxs(material.Grid, { container: true, spacing: 3, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { size: { xs: 12, lg: 8 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+        PlayerDisplayCard_default,
+        {
+          profilePicture: playerData.profilePicture,
+          username: playerData.username,
+          bio: playerData.bio,
+          preferredPronouns: playerData.preferredPronouns
+        }
+      ) }),
+      isSmallScreen && /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { size: { xs: 12, lg: 3 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+        PlayerDetailsCard_default,
+        {
+          preferredPronouns: playerData.preferredPronouns,
+          age: playerData.age,
+          yearsPlaying: playerData.yearsPlaying,
+          discordUsername: playerData.discordUsername,
+          preferredGames: playerData.preferredGames
+        }
+      ) }),
+      blurbs.map((blurb, index) => /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { size: { xs: 12, lg: 8 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+        PlayerPromptCard_default,
+        {
+          title: blurb.title,
+          description: blurb.description
+        }
+      ) }, index))
+    ] }) })
+  ] }) }) });
 }
+var ExpiredTablesFilter = ({
+  includeExpiredTables,
+  onChange
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Box2__default.default, { sx: { mt: 2 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    FormControlLabel__default.default,
+    {
+      control: /* @__PURE__ */ jsxRuntime.jsx(
+        Checkbox__default.default,
+        {
+          checked: includeExpiredTables,
+          onChange: (e) => onChange(e.target.checked),
+          color: "primary"
+        }
+      ),
+      label: "Show expired tables"
+    }
+  ) });
+};
+var ExpiredTablesFilter_default = ExpiredTablesFilter;
 var SORT_OPTIONS = [
   { id: "relevance", label: "Relevance" },
   { id: "newest", label: "Newest" },
@@ -1718,7 +1926,7 @@ var SortOptions = ({
     onChange == null ? void 0 : onChange(event.target.value);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Typography10__default.default, { variant: "h6", gutterBottom: true, children: "Sort By" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Typography4__default.default, { variant: "h6", gutterBottom: true, children: "Sort By" }),
     /* @__PURE__ */ jsxRuntime.jsx(FormControl2__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(RadioGroup__default.default, { defaultValue: defaultValue2, onChange: handleSortChange, children: SORT_OPTIONS.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
       FormControlLabel__default.default,
       {
@@ -1733,11 +1941,19 @@ var SortOptions = ({
 var SortOptions_default = SortOptions;
 var TagsFilter = ({
   onChange,
-  tags: Tags = []
+  tags: Tags = [],
+  initialSelectedTags
 }) => {
-  const [mustHaveTags, setMustHaveTags] = React7__default.default.useState([]);
-  const [mustNotHaveTags, setMustNotHaveTags] = React7__default.default.useState([]);
-  const [shouldHaveAtLeastOneTags, setShouldHaveAtLeastOneTags] = React7__default.default.useState([]);
+  const [mustHaveTags, setMustHaveTags] = React7__default.default.useState((initialSelectedTags == null ? void 0 : initialSelectedTags.mustHave) || []);
+  const [mustNotHaveTags, setMustNotHaveTags] = React7__default.default.useState((initialSelectedTags == null ? void 0 : initialSelectedTags.mustNotHave) || []);
+  const [shouldHaveAtLeastOneTags, setShouldHaveAtLeastOneTags] = React7__default.default.useState((initialSelectedTags == null ? void 0 : initialSelectedTags.shouldHaveAtLeastOne) || []);
+  React7__default.default.useEffect(() => {
+    if (initialSelectedTags) {
+      setMustHaveTags(initialSelectedTags.mustHave || []);
+      setMustNotHaveTags(initialSelectedTags.mustNotHave || []);
+      setShouldHaveAtLeastOneTags(initialSelectedTags.shouldHaveAtLeastOne || []);
+    }
+  }, [initialSelectedTags]);
   Tags = !!Tags ? Tags : [];
   const [inputValues, setInputValues] = React7__default.default.useState({
     mustHave: "",
@@ -1747,7 +1963,7 @@ var TagsFilter = ({
   const tagOptions = React7__default.default.useMemo(() => {
     console.log("available tags: " + JSON.stringify(Tags));
     console.log(!Tags);
-    if (!Tags || Tags.length == 0 || !Tags.map) return [];
+    if (!Tags || Tags.length === 0 || !Tags.map) return [];
     return Tags.map((tag) => ({
       value: tag.id,
       label: tag.label
@@ -1779,7 +1995,7 @@ var TagsFilter = ({
   };
   const renderSelectedTags = (selectedTags, category) => {
     const tagValues = [];
-    if (!Tags || Tags.length == 0 || !Tags.map) return null;
+    if (!Tags || Tags.length === 0 || !Tags.map) return null;
     Tags.forEach((tag) => {
       if (selectedTags.includes(tag.id)) {
         tagValues.push(tag);
@@ -1788,27 +2004,11 @@ var TagsFilter = ({
     if (tagValues.length === 0) {
       return null;
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(Box2__default.default, { sx: { display: "flex", flexWrap: "wrap", gap: 1, mb: 2 }, children: tagValues.map((tag) => /* @__PURE__ */ jsxRuntime.jsxs(
-      "span",
+    return /* @__PURE__ */ jsxRuntime.jsx(Box2__default.default, { sx: { display: "flex", flexWrap: "wrap", gap: 1, mb: 2 }, children: tagValues.map((tag) => /* @__PURE__ */ jsxRuntime.jsx(
+      Chip,
       {
-        className: "inline-block text-sm px-3 py-1 rounded-full outline-black outline-2 font-outlined",
-        style: {
-          background: tag.color || "#bfbcbb",
-          color: "white",
-          textShadow: "black 0.2em 0.2em 0.4em"
-        },
-        children: [
-          tag.label,
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => handleTagChange(tag.id, category),
-              className: "ml-2 text-red-500 bg-white bg-opacity-50 rounded-full outline-black outline-2 font-outlined",
-              children: "\xD7"
-            }
-          )
-        ]
+        tag,
+        removeCallback: (tagId) => handleTagChange(tagId, category)
       },
       tag.id
     )) });
@@ -1816,7 +2016,7 @@ var TagsFilter = ({
   const createTagSelector = (category, label) => {
     const selectedTags = category === "mustHave" ? mustHaveTags : category === "mustNotHave" ? mustNotHaveTags : shouldHaveAtLeastOneTags;
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Typography10__default.default, { variant: "subtitle1", gutterBottom: true, sx: { mt: 2 }, children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx(Typography4__default.default, { variant: "subtitle1", gutterBottom: true, sx: { mt: 2 }, children: label }),
       renderSelectedTags(selectedTags, category),
       /* @__PURE__ */ jsxRuntime.jsx(
         Autocomplete__default.default,
@@ -1862,18 +2062,18 @@ var TagsFilter = ({
             });
           },
           slots: { popper: CustomPopper2 },
-          renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(TextField3__default.default, { ...params, label: `Select ${label}` })
+          renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(TextField4__default.default, { ...params, label: `Select ${label}` })
         },
         `${category}-${selectedTags.join("-")}`
       )
     ] });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Typography10__default.default, { variant: "h6", gutterBottom: true, children: "Tags" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Typography4__default.default, { variant: "h6", gutterBottom: true, children: "Tags" }),
     createTagSelector("mustHave", "Must Have Tags"),
-    /* @__PURE__ */ jsxRuntime.jsx(Divider2__default.default, { sx: { my: 2 } }),
+    /* @__PURE__ */ jsxRuntime.jsx(Divider3__default.default, { sx: { my: 2 } }),
     createTagSelector("mustNotHave", "Must Not Have Tags"),
-    /* @__PURE__ */ jsxRuntime.jsx(Divider2__default.default, { sx: { my: 2 } }),
+    /* @__PURE__ */ jsxRuntime.jsx(Divider3__default.default, { sx: { my: 2 } }),
     createTagSelector("shouldHaveAtLeastOne", "Should Contain At Least One Tag")
   ] });
 };
@@ -1903,21 +2103,80 @@ var CustomPopper2 = (props) => {
   );
 };
 var TagsFilter_default = TagsFilter;
-var FILTER_TYPES = [
-  { id: "player", label: "Players" },
-  { id: "event", label: "Events", disabled: true },
-  { id: "table", label: "Tables", disabled: true }
-];
-var TypeFilter = ({ onChange }) => {
-  const [selectedTypes, setSelectedTypes] = React7__default.default.useState([]);
+var TextSearchCard = ({ onChange, selectedTypes, initialTextSearch }) => {
+  const [query, setQuery] = React7__default.default.useState((initialTextSearch == null ? void 0 : initialTextSearch.query) || "");
+  const [titleOnly, setTitleOnly] = React7__default.default.useState((initialTextSearch == null ? void 0 : initialTextSearch.titleOnly) || false);
+  React7.useEffect(() => {
+    if (initialTextSearch) {
+      setQuery(initialTextSearch.query || "");
+      setTitleOnly(initialTextSearch.titleOnly || false);
+    }
+  }, [initialTextSearch]);
+  const shouldShow = selectedTypes.includes("table") || selectedTypes.includes("event");
+  if (!shouldShow) {
+    return null;
+  }
+  const handleQueryChange = (e) => {
+    const newQuery = e.target.value;
+    setQuery(newQuery);
+    if (onChange) {
+      onChange({ query: newQuery, titleOnly });
+    }
+  };
+  const handleTitleOnlyChange = (e) => {
+    const newTitleOnly = e.target.checked;
+    setTitleOnly(newTitleOnly);
+    if (onChange) {
+      onChange({ query, titleOnly: newTitleOnly });
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__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,
+        {
+          fullWidth: true,
+          label: "Search in title and description",
+          variant: "outlined",
+          value: query,
+          onChange: handleQueryChange,
+          placeholder: "Enter search terms...",
+          sx: { mb: 1 }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormControlLabel__default.default,
+        {
+          control: /* @__PURE__ */ jsxRuntime.jsx(
+            Checkbox__default.default,
+            {
+              checked: titleOnly,
+              onChange: handleTitleOnlyChange
+            }
+          ),
+          label: "Search in title only"
+        }
+      )
+    ] })
+  ] });
+};
+var TextSearchCard_default = TextSearchCard;
+var TypeFilter = ({ types, initialSelectedTypes = [], onChange }) => {
+  const [selectedTypes, setSelectedTypes] = React7__default.default.useState(initialSelectedTypes);
+  React7.useEffect(() => {
+    setSelectedTypes(initialSelectedTypes);
+  }, [initialSelectedTypes]);
   const handleTypeChange = (typeId) => {
     const newSelectedTypes = selectedTypes.includes(typeId) ? selectedTypes.filter((id) => id !== typeId) : [...selectedTypes, typeId];
     setSelectedTypes(newSelectedTypes);
-    onChange == null ? void 0 : onChange(newSelectedTypes);
+    if (onChange) {
+      onChange(newSelectedTypes);
+    }
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Typography10__default.default, { variant: "h6", gutterBottom: true, children: "Type" }),
-    /* @__PURE__ */ jsxRuntime.jsx(FormGroup__default.default, { children: FILTER_TYPES.map((type) => /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(Typography4__default.default, { variant: "h6", gutterBottom: true, children: "Type" }),
+    /* @__PURE__ */ jsxRuntime.jsx(FormGroup__default.default, { children: types.map((type) => /* @__PURE__ */ jsxRuntime.jsx(
       FormControlLabel__default.default,
       {
         control: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1925,7 +2184,8 @@ var TypeFilter = ({ onChange }) => {
           {
             checked: selectedTypes.includes(type.id),
             onChange: () => handleTypeChange(type.id),
-            disabled: type.disabled
+            disabled: type.id === "event",
+            title: type.id === "event" ? "Coming soon! Currently only player and table search are supported." : ""
           }
         ),
         label: type.label
@@ -1936,22 +2196,67 @@ var TypeFilter = ({ onChange }) => {
 };
 var TypeFilter_default = TypeFilter;
 var FiltersContainer = ({
+  initialSelectedTypes = [],
+  initialSelectedTags,
+  initialTextSearch,
+  includeExpiredTables = false,
   onTypeChange,
   onTagChange,
+  onTextSearchChange,
+  onIncludeExpiredTablesChange,
   onSubmit,
-  tags
+  tags,
+  searchTypes
 }) => {
+  const [selectedTypes, setSelectedTypes] = React7__default.default.useState(initialSelectedTypes);
+  React7.useEffect(() => {
+    setSelectedTypes(initialSelectedTypes);
+  }, [initialSelectedTypes]);
+  const handleTypeChange = (types) => {
+    setSelectedTypes(types);
+    if (onTypeChange) {
+      onTypeChange(types);
+    }
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(Box2__default.default, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(TypeFilter_default, { onChange: onTypeChange }),
-    /* @__PURE__ */ jsxRuntime.jsx(Divider2__default.default, { sx: { my: 2 } }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TypeFilter_default,
+      {
+        types: searchTypes,
+        initialSelectedTypes,
+        onChange: handleTypeChange
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(Divider3__default.default, { sx: { my: 2 } }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TextSearchCard_default,
+      {
+        selectedTypes,
+        initialTextSearch,
+        onChange: onTextSearchChange
+      }
+    ),
+    (selectedTypes.includes("table") || selectedTypes.includes("event")) && /* @__PURE__ */ jsxRuntime.jsx(Divider3__default.default, { sx: { my: 2 } }),
     /* @__PURE__ */ jsxRuntime.jsx(
       TagsFilter_default,
       {
         tags,
+        initialSelectedTags,
         onChange: onTagChange
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(Divider2__default.default, { sx: { my: 2 } }),
+    /* @__PURE__ */ jsxRuntime.jsx(Divider3__default.default, { sx: { my: 2 } }),
+    selectedTypes.includes("table") && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ExpiredTablesFilter_default,
+        {
+          includeExpiredTables,
+          onChange: onIncludeExpiredTablesChange || (() => {
+          })
+        }
+      ),
+      /* @__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,
       {
@@ -2009,16 +2314,75 @@ var SearchResultCard_default = SearchResultCard;
 function SearchPageLayout({
   results,
   title = "Search Results",
+  initialSelectedTypes = [],
+  initialSelectedTags = {
+    mustHave: [],
+    mustNotHave: [],
+    shouldHaveAtLeastOne: []
+  },
+  initialTextSearch = {
+    query: "",
+    titleOnly: false
+  },
+  includeExpiredTables: initialIncludeExpiredTables = false,
   onTypeChange,
   onTagChange,
+  onTextSearchChange,
+  onIncludeExpiredTablesChange,
   onSubmit,
   onResultClick,
+  onPacketChange,
+  pagination,
   validTags,
-  allTags
+  allTags,
+  searchTypes,
+  isLoading = false
 }) {
-  "use client";
   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);
+  React7.useEffect(() => {
+    setSelectedTypes(initialSelectedTypes);
+  }, [initialSelectedTypes]);
+  React7.useEffect(() => {
+    setSelectedTags(initialSelectedTags);
+  }, [initialSelectedTags]);
+  React7.useEffect(() => {
+    setTextSearch(initialTextSearch);
+  }, [initialTextSearch]);
+  React7.useEffect(() => {
+    setIncludeExpiredTables(initialIncludeExpiredTables);
+  }, [initialIncludeExpiredTables]);
+  const handleTypeChange = (types) => {
+    setSelectedTypes(types);
+    if (onTypeChange) onTypeChange(types);
+  };
+  const handleTagChange = (tags) => {
+    setSelectedTags(tags);
+    if (onTagChange) onTagChange(tags);
+  };
+  const handleTextSearchChange = (ts) => {
+    setTextSearch(ts);
+    if (onTextSearchChange) onTextSearchChange(ts);
+  };
+  const handleIncludeExpiredTablesChange = (include) => {
+    setIncludeExpiredTables(include);
+    if (onIncludeExpiredTablesChange) onIncludeExpiredTablesChange(include);
+  };
+  const handleSubmit = () => {
+    const currentCriteria = {
+      selectedTypes,
+      selectedTags,
+      textSearch,
+      includeExpiredTables
+    };
+    if (onSubmit) {
+      onSubmit(currentCriteria);
+    }
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(Box2__default.default, { sx: { padding: 2 }, children: [
     /* @__PURE__ */ jsxRuntime.jsx(Card10__default.default, { sx: { marginBottom: 2 }, children: /* @__PURE__ */ jsxRuntime.jsx(
       CardHeader4__default.default,
@@ -2032,8 +2396,8 @@ function SearchPageLayout({
         }
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(Grid9__default.default, { container: true, spacing: 2, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Grid9__default.default, { size: { xs: 12, md: 3 }, children: /* @__PURE__ */ jsxRuntime.jsxs(Card10__default.default, { sx: { marginBottom: isMobile ? 2 : 0 }, children: [
+    /* @__PURE__ */ jsxRuntime.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.jsx(
           CardHeader4__default.default,
           {
@@ -2049,14 +2413,21 @@ function SearchPageLayout({
         /* @__PURE__ */ jsxRuntime.jsx(CardContent10__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(
           FiltersContainer_default,
           {
-            onTypeChange,
-            onTagChange,
-            onSubmit,
-            tags: validTags
+            initialSelectedTypes: selectedTypes,
+            initialSelectedTags: selectedTags,
+            initialTextSearch: textSearch,
+            includeExpiredTables,
+            onTypeChange: handleTypeChange,
+            onTagChange: handleTagChange,
+            onTextSearchChange: handleTextSearchChange,
+            onIncludeExpiredTablesChange: handleIncludeExpiredTablesChange,
+            onSubmit: handleSubmit,
+            tags: validTags,
+            searchTypes
           }
         ) })
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Grid9__default.default, { size: { xs: 12, md: 9 }, children: /* @__PURE__ */ jsxRuntime.jsxs(Card10__default.default, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Grid8__default.default, { size: { xs: 12, md: 9 }, children: /* @__PURE__ */ jsxRuntime.jsxs(Card10__default.default, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           CardHeader4__default.default,
           {
@@ -2069,10 +2440,12 @@ function SearchPageLayout({
             }
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(CardContent10__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(CardContent10__default.default, { children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(Box2__default.default, { sx: { display: "flex", justifyContent: "center", py: 8 }, children: /* @__PURE__ */ jsxRuntime.jsx(CircularProgress3__default.default, { size: 60, thickness: 4 }) }) : /* @__PURE__ */ jsxRuntime.jsx(
           ResultsContainer_default,
           {
             results,
+            pagination,
+            onPacketChange,
             onResultClick,
             tags: allTags
           }
@@ -2174,14 +2547,14 @@ 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(Grid9__default.default, { container: true, spacing: 2, direction: "column", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(Grid9__default.default, { container: true, direction: "row", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Grid9__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(Image2__default.default, { alt: player.username + "'s profile pic", height: 64, src: player.miniPic || "", width: 64 }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(Grid9__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h5", children: player.username }) })
+    /* @__PURE__ */ jsxRuntime.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.jsx(Grid9__default.default, { children: renderTagsFromIds(player.tags, allTags) })
+      /* @__PURE__ */ jsxRuntime.jsx(Grid8__default.default, { children: renderTagsFromIds(player.tags, allTags) })
     ] }),
-    canEdit && /* @__PURE__ */ jsxRuntime.jsxs(Grid9__default.default, { children: [
+    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: () => {
         handleAssignToDungeonMaster(player);
@@ -2193,11 +2566,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(Grid9__default.default, { container: true, spacing: 2, direction: "column", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Grid9__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h5", children: player.username }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Grid9__default.default, { container: true, direction: "row", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Grid9__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(Image2__default.default, { alt: player.username + "'s profile pic", height: 120, src: player.imageUrl ? player.imageUrl : "", width: 256 }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(Grid9__default.default, { children: renderTagsFromIds(player.tags, allTags) }),
+    /* @__PURE__ */ jsxRuntime.jsx(material.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.Typography, { children: player.description })
       ] })
     ] }) })
@@ -2351,6 +2724,87 @@ var NextGameCountdown = ({ nextGameTime }) => {
     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;
@@ -2421,9 +2875,9 @@ function TablePageLayout(props) {
         p: 2,
         boxShadow: "0px 8px 15px rgba(25, 118, 210, 0.3)"
       },
-      children: /* @__PURE__ */ jsxRuntime.jsxs(Grid9__default.default, { container: true, direction: "column", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs(Grid8__default.default, { container: true, direction: "column", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
-          Grid9__default.default,
+          Grid8__default.default,
           {
             container: true,
             direction: "column",
@@ -2468,7 +2922,7 @@ function TablePageLayout(props) {
                   value: currentShortDescription
                 }
               ) : /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { color: "white", opacity: 0.95 }, children: currentShortDescription }),
-              /* @__PURE__ */ jsxRuntime.jsx(Grid9__default.default, { container: true, children: isTableInEditMode ? renderEditableTags(currentTags, allTags, handleToggleTag) : renderTags(currentTagIds, allTags) }),
+              /* @__PURE__ */ jsxRuntime.jsx(Grid8__default.default, { container: true, children: isTableInEditMode ? renderEditableTags(currentTags, allTags, handleToggleTag) : renderTags(currentTagIds, allTags) }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 TableActionsBar,
                 {
@@ -2488,8 +2942,8 @@ function TablePageLayout(props) {
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(Grid9__default.default, { container: true, spacing: 2, sx: { mt: 2 }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Grid9__default.default, { size: { xs: 12, md: 8 }, children: /* @__PURE__ */ jsxRuntime.jsx(material.Card, { sx: { height: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(material.CardContent, { children: isTableInEditMode ? /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__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(
             AutoResizingTextarea_default,
             {
               isInEditMode: isTableInEditMode,
@@ -2498,7 +2952,7 @@ function TablePageLayout(props) {
               value: currentDescription
             }
           ) : /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { whiteSpace: "pre-wrap" }, children: currentDescription }) }) }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs(Grid9__default.default, { size: { xs: 12, md: 4 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(Grid8__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: " }),
@@ -2525,13 +2979,13 @@ var renderTags = function(tags, allTags) {
   if (!tags || !allTags) {
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(Grid9__default.default, { container: true, spacing: 1, sx: { pb: 1.5 }, children: tags.map((tagId) => {
+  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(Grid9__default.default, { size: { xs: 12 }, sx: { pb: 1.5 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(Grid8__default.default, { size: { xs: 12 }, sx: { pb: 1.5 }, children: /* @__PURE__ */ jsxRuntime.jsx(
     TagEditor,
     {
       title: "Table Tags",
@@ -2559,18 +3013,21 @@ exports.EventEditProvider = EventEditProvider;
 exports.EventPageLayout = EventPageLayout;
 exports.EventResultCard = EventResultCard_default;
 exports.EventTablesCard = EventTablesCard_default;
+exports.ExpiredTablesFilter = ExpiredTablesFilter_default;
 exports.FiltersContainer = FiltersContainer_default;
 exports.GameTableProvider = GameTableProvider;
 exports.ModalContext = ModalContext;
 exports.ModalProvider = ModalProvider_default;
 exports.NextGameCountdown = NextGameCountdown;
+exports.NextGameLabel = NextGameLabel_default;
 exports.PlayerDetailsCard = PlayerDetailsCard_default;
 exports.PlayerDisplayCard = PlayerDisplayCard_default;
 exports.PlayerHighlightsCard = PlayerHighlightsCard;
+exports.PlayerPageLayout = PlayerPageLayout;
 exports.PlayerPromptCard = PlayerPromptCard_default;
 exports.PlayerResultCard = PlayerResultCard_default;
-exports.PlayerTagsCard = PlayerTagsCard;
-exports.PlayerTagsEdit = PlayerTagsEdit;
+exports.PlayerTagsCard = PlayerTagsCard_default;
+exports.PlayerTagsEdit = PlayerTagsEdit_default;
 exports.PlayersScrollableList = PlayersScrollableList_default;
 exports.ResultsContainer = ResultsContainer_default;
 exports.ScrollableResultsList = ScrollableResultsList_default;
@@ -2583,6 +3040,7 @@ exports.TableResultCard = TableResultCard_default;
 exports.TablesScrollableList = TablesScrollableList_default;
 exports.TagEditor = TagEditor;
 exports.TagsFilter = TagsFilter_default;
+exports.TextSearchCard = TextSearchCard_default;
 exports.TypeFilter = TypeFilter_default;
 exports.generateTagsDisplay = generateTagsDisplay;
 exports.renderTagsFromIds = renderTagsFromIds;