@mbpockets/shared-ui 0.1.18 → 0.1.20

package/dist/index.mjs

@@ -1,7 +1,7 @@
 "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, Chip, LinearProgress, CardMedia, useTheme, useMediaQuery, CardHeader } from '@mui/material';
+import { Box, Grid, TextField, Tooltip, IconButton, Button, CircularProgress, Dialog, DialogTitle, DialogContent, DialogActions, Card, CardContent, Typography, FormControl, InputLabel, Select, MenuItem, Chip as Chip$1, LinearProgress, CardMedia, CardHeader, useTheme, useMediaQuery, NoSsr } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
 import EditIcon from '@mui/icons-material/Edit';
 import AddIcon from '@mui/icons-material/Add';
@@ -9,7 +9,7 @@ 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 Grid9 from '@mui/material/Grid';
+import Grid8 from '@mui/material/Grid';
 import Card10 from '@mui/material/Card';
 import CardContent10 from '@mui/material/CardContent';
 import CardHeader4 from '@mui/material/CardHeader';
@@ -21,12 +21,12 @@ 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 TextField3 from '@mui/material/TextField';
 import Typography10 from '@mui/material/Typography';
 import FormControl2 from '@mui/material/FormControl';
 import RadioGroup from '@mui/material/RadioGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Radio from '@mui/material/Radio';
+import TextField4 from '@mui/material/TextField';
 import FormGroup from '@mui/material/FormGroup';
 import Checkbox from '@mui/material/Checkbox';
 import Button7 from '@mui/material/Button';
@@ -87,23 +87,40 @@ function useEventEdit() {
   }
   return context;
 }
-function generateTagsDisplay(tag) {
-  return /* @__PURE__ */ jsx(
+function Chip({ tag, removeCallback }) {
+  var _a;
+  const color = (_a = tag.color) != null ? _a : "#bfbcbb";
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
     "span",
     {
-      className: "inline-block text-sm px-3 py-1 rounded-full outline-black outline-2 font-outlined",
+      className: "inline-block text-sm px-3 py-1 rounded-full border-2 font-outlined text-white m-0.5 font-stretch-105% font-sans",
       style: {
-        marginTop: "6px",
-        marginRight: "6px",
-        marginBottom: "6px",
-        background: tag.color || "#bfbcbb",
-        color: "white",
-        textShadow: "black 0.2em 0.2em 0.4em"
+        borderColor: `color-mix(in srgb, ${color}, black 50%)`,
+        background: `linear-gradient(160deg, color-mix(in srgb, ${color}, white 10%) 0%, color-mix(in srgb, ${color}, black 60%) 100%)`,
+        textShadow: "black 1.5px 1px 1.5px",
+        filter: `drop-shadow(2px 2px 1.5px color-mix(in srgb, ${color}, black 80%))`
       },
-      children: tag.label
+      children: [
+        tag.label,
+        removeCallback && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => removeCallback(tag.id),
+            className: "ml-2 text-white hover:text-red-700 focus:outline-none pl-0.5 pr-1 cursor-pointer hover:bg-white rounded-full",
+            style: {
+              textShadow: "black 1px 1px 1px"
+            },
+            children: "X"
+          }
+        )
+      ]
     },
     tag.id
-  );
+  ) });
+}
+function generateTagsDisplay(tag) {
+  return /* @__PURE__ */ jsx(Chip, { tag }, tag.id);
 }
 function renderTagsFromIds(ids, legalTags) {
   if (!ids || !legalTags || legalTags.length === 0) {
@@ -461,7 +478,7 @@ function EventBasicInfo(props) {
   );
 }
 function EventBasicInfoView({ description, locationId, startingDate, endingDate, timeInfo, timezone, isOwner, onEdit }) {
-  return /* @__PURE__ */ jsx(Grid9, { sx: { position: "relative" }, children: /* @__PURE__ */ jsx(Card, { style: {
+  return /* @__PURE__ */ jsx(Grid8, { 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: [
@@ -745,7 +762,7 @@ function EventBannerView({
 }) {
   const backgroundColor = bannerColor || "linear-gradient(135deg, rgba(25,118,210,0.8), rgba(25,118,210,1))";
   return /* @__PURE__ */ jsxs(
-    Grid9,
+    Grid8,
     {
       sx: {
         background: backgroundColor,
@@ -753,7 +770,7 @@ function EventBannerView({
         position: "relative"
       },
       children: [
-        /* @__PURE__ */ jsxs(Grid9, { children: [
+        /* @__PURE__ */ jsxs(Grid8, { children: [
           /* @__PURE__ */ jsxs(
             Box,
             {
@@ -812,7 +829,7 @@ function EventBannerView({
             }
           ),
           /* @__PURE__ */ jsxs(
-            Grid9,
+            Grid8,
             {
               display: "flex",
               justifyContent: "center",
@@ -1054,7 +1071,7 @@ var TableResultCard = ({ result, tags, onClick }) => {
         " / ",
         capacity
       ] }),
-      result.dungeonMaster ? /* @__PURE__ */ jsx(Chip, { label: "DM Present", size: "small", color: "success", variant: "outlined" }) : /* @__PURE__ */ jsx(Chip, { label: "No DM", size: "small", color: "warning", variant: "outlined" })
+      result.dungeonMaster ? /* @__PURE__ */ jsx(Chip$1, { label: "DM Present", size: "small", color: "success", variant: "outlined" }) : /* @__PURE__ */ jsx(Chip$1, { label: "No DM", size: "small", color: "warning", variant: "outlined" })
     ] }),
     /* @__PURE__ */ jsx(LinearProgress, { variant: "determinate", value: occupancy, sx: { height: 8, borderRadius: 4 } })
   ] }) });
@@ -1211,27 +1228,28 @@ function EventPageLayout({
   tables,
   allTags
 }) {
-  return /* @__PURE__ */ jsx(Grid9, { container: true, flexDirection: "column", children: /* @__PURE__ */ jsxs(EventEditProvider, { initialEvent: mergedEvent, value: { isOwner, updateEvent, updateImages }, children: [
-    /* @__PURE__ */ jsx(Grid9, { children: /* @__PURE__ */ jsx(
+  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(
       EventBanner,
       {
         attendees,
         numGames
       }
     ) }),
-    /* @__PURE__ */ jsxs(Grid9, { container: true, flexDirection: "row", spacing: 3, size: { xs: 12, md: 12 }, children: [
-      /* @__PURE__ */ jsx(Grid9, { size: { xs: 12, md: 4 }, spacing: 3, padding: 3, children: /* @__PURE__ */ jsx(
+    /* @__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(
         EventBasicInfo,
         {
           locationId: mergedEvent.location || "0"
         }
       ) }),
-      /* @__PURE__ */ jsx(Grid9, { size: { xs: 12, md: 8 }, spacing: 3, padding: 3, children: /* @__PURE__ */ jsx(EventTablesCard_default, { tables, tags: allTags }) })
+      /* @__PURE__ */ jsx(Grid8, { size: { xs: 12, md: 8 }, spacing: 3, padding: 3, children: /* @__PURE__ */ jsx(EventTablesCard_default, { tables, tags: allTags }) })
     ] }),
-    /* @__PURE__ */ jsx(Grid9, {})
+    /* @__PURE__ */ jsx(Grid8, {})
   ] }) });
 }
-var PlayerDetails = ({
+var PlayerDetailsCard = ({
+  preferredPronouns,
   age,
   yearsPlaying,
   discordUsername,
@@ -1281,6 +1299,23 @@ var PlayerDetails = ({
             }
           ),
           /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+            preferredPronouns && /* @__PURE__ */ jsxs(
+              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__ */ jsx("span", { className: "font-extrabold text-cyan-300", children: "Preferred Pronouns:" }),
+                  " ",
+                  preferredPronouns
+                ]
+              }
+            ),
             age !== null && /* @__PURE__ */ jsxs(
               Typography,
               {
@@ -1332,7 +1367,7 @@ var PlayerDetails = ({
                 ]
               }
             ),
-            preferredGames && preferredGames.length > 0 && /* @__PURE__ */ jsxs(
+            preferredGames && /* @__PURE__ */ jsxs(
               Typography,
               {
                 variant: "body2",
@@ -1345,7 +1380,7 @@ var PlayerDetails = ({
                 children: [
                   /* @__PURE__ */ jsx("span", { className: "font-extrabold text-cyan-300", children: "Preferred Games:" }),
                   " ",
-                  preferredGames.join(", ")
+                  Array.isArray(preferredGames) ? preferredGames.join(", ") : preferredGames
                 ]
               }
             )
@@ -1368,24 +1403,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] = useState("/man-walking-silhouette-clipart.jpg");
+var PlayerDisplayCard = ({ profilePicture, username, bio, preferredPronouns }) => {
+  const defaultImg = "/man-walking-silhouette-clipart.jpg";
+  const [imageSrc, setImageSrc] = useState(defaultImg);
+  const { aspectRatio } = ProfilePictureSettings;
   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();
@@ -1394,7 +1425,7 @@ var PlayerDisplayCard = ({
         setImageSrc(newImage);
       };
       img.onerror = () => {
-        setImageSrc("/man-walking-silhouette-clipart.jpg");
+        setImageSrc(defaultImg);
       };
     }
     validateImage();
@@ -1428,7 +1459,7 @@ var PlayerDisplayCard = ({
               height: "auto",
               // Updates to maintain aspect ratio and fill space nicely
               width: "100%",
-              objectFit: "scale-down"
+              objectFit: "cover"
             }
           }
         ),
@@ -1487,151 +1518,147 @@ var PlayerDisplayCard = ({
   );
 };
 var PlayerDisplayCard_default = PlayerDisplayCard;
-var PlayerPromptCard = ({ title, description }) => {
-  return /* @__PURE__ */ jsx(
-    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__ */ jsxs(CardContent, { className: "p-6", children: [
-        title && /* @__PURE__ */ jsx(
-          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__ */ jsx(
-          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__ */ jsxs(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__ */ jsx(
+      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__ */ jsx(CardContent, { className: "p-6", children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: tags.map((tag) => /* @__PURE__ */ jsx(Chip, { tag }, tag.id)) }) })
+  ] });
 };
-var PlayerPromptCard_default = PlayerPromptCard;
-function PlayerTagsCard(props) {
-  return /* @__PURE__ */ jsx(Grid9, { container: true, children: /* @__PURE__ */ jsx(Grid9, { size: { xs: 12, md: 3 }, children: /* @__PURE__ */ jsxs(Card10, { children: [
-    /* @__PURE__ */ jsx(CardHeader4, { title: "Player Tags", style: {
+var PlayerTagsCard_default = PlayerTagsCard;
+var PlayerPromptCard = ({ title, description }) => /* @__PURE__ */ jsx(
+  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__ */ jsx(CardContent10, { children: renderLabels(props.PlayerTags) })
-  ] }) }) });
-}
-var renderLabels = (tags) => {
-  return /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: tags.map((tag) => generateLabel(tag)) });
-};
-var generateLabel = (tag) => {
-  let color = "#bfbcbb";
-  if (tag.color) color = tag.color;
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: "inline-block text-sm px-3 py-1 rounded-full outline-black outline-2 font-outlined",
-      style: {
-        background: color,
-        color: "white",
-        textShadow: "black 0.2em 0.2em 0.4em"
-      },
-      children: tag.label
+      // Text contrast with the background
+      overflow: "hidden"
+      // Keeps consistent and clean card shape
     },
-    tag.id
-  );
-};
-function TagEditor({
-  title = "Tags",
-  selectedTags,
-  possibleTags,
+    className: "transition duration-300 transform hover:scale-105 hover:shadow-2xl",
+    children: /* @__PURE__ */ jsxs(CardContent, { className: "p-6", children: [
+      title && /* @__PURE__ */ jsx(
+        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__ */ jsx(
+        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] = useState("");
   const selectedIds = useMemo(() => selectedTags.map((tag) => tag.id), [selectedTags]);
   const options = 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__ */ jsx(Grid9, { container: true, children: /* @__PURE__ */ jsx(Grid9, { size: { xs: 12 }, children: /* @__PURE__ */ jsxs(Card10, { children: [
+  return /* @__PURE__ */ jsxs(Card, { sx: {
+    margin: "1rem",
+    borderRadius: "12px",
+    boxShadow: "0px 8px 15px rgba(25, 118, 210, 0.3)",
+    overflow: "hidden"
+  }, children: [
     /* @__PURE__ */ jsx(
-      CardHeader4,
+      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__ */ jsxs(CardContent10, { children: [
-      /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: selectedTags.map((tag) => /* @__PURE__ */ jsxs(
-        "span",
+    /* @__PURE__ */ jsxs(CardContent, { className: "p-6", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 mb-4", children: selectedTags.map((tag) => /* @__PURE__ */ 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__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => onToggleTag(tag.id),
-                className: "ml-2 text-red-500 bg-white bg-opacity-50 rounded-full outline-black outline-2 font-outlined",
-                children: "\xD7"
-              }
-            )
-          ]
+          tag,
+          removeCallback: () => onToggleTag(tag.id)
         },
         tag.id
       )) }),
-      /* @__PURE__ */ jsx(Grid9, { container: true, spacing: 3, children: /* @__PURE__ */ jsx(Grid9, { sx: { marginTop: 3, width: "100%" }, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(
         Autocomplete,
         {
           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) => {
@@ -1646,13 +1673,20 @@ function TagEditor({
             setInputValue("");
           },
           slots: { popper: CustomPopper },
-          renderInput: (params) => /* @__PURE__ */ jsx(TextField3, { ...params, label: "Select Tags" })
+          renderInput: (params) => /* @__PURE__ */ jsx(
+            TextField,
+            {
+              ...params,
+              label: "Select Tags",
+              variant: "outlined"
+            }
+          )
         },
         selectedIds.join("-")
-      ) }) })
+      )
     ] })
-  ] }) }) });
-}
+  ] });
+};
 var CustomPopper = (props) => {
   return /* @__PURE__ */ jsx(
     Popper,
@@ -1661,27 +1695,84 @@ 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__ */ jsx(
-    TagEditor,
+var PlayerTagsEdit_default = PlayerTagsEdit;
+function PlayerPageLayout({
+  playerData,
+  tags = [],
+  blurbs = [],
+  isOwner = false,
+  possibleTags = [],
+  onToggleTag = () => {
+  }
+}) {
+  const theme = useTheme();
+  const isSmallScreen = useMediaQuery(theme.breakpoints.down("lg"));
+  const tagsElement = isOwner ? /* @__PURE__ */ jsx(
+    PlayerTagsEdit_default,
     {
-      title: "Player Tags",
-      selectedTags: props.PlayerTags,
-      possibleTags: props.possibleTags,
-      onToggleTag: props.updatePlayerTags
+      selectedTags: tags,
+      possibleTags,
+      onToggleTag
     }
-  );
+  ) : /* @__PURE__ */ jsx(PlayerTagsCard_default, { tags });
+  return /* @__PURE__ */ jsx(NoSsr, { children: /* @__PURE__ */ jsx(Box, { sx: { padding: "2rem", marginRight: "auto", marginLeft: "auto" }, justifyContent: "center", children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 3, justifyContent: "center", sx: { marginRight: "auto", marginLeft: "auto" }, children: [
+    !isSmallScreen && /* @__PURE__ */ jsxs(Grid, { size: { xs: 12, lg: 3 }, children: [
+      /* @__PURE__ */ jsx(
+        PlayerDetailsCard_default,
+        {
+          preferredPronouns: playerData.preferredPronouns,
+          age: playerData.age,
+          yearsPlaying: playerData.yearsPlaying,
+          discordUsername: playerData.discordUsername,
+          preferredGames: playerData.preferredGames
+        }
+      ),
+      tagsElement
+    ] }),
+    /* @__PURE__ */ jsx(Grid, { size: { xs: 12, lg: 6 }, children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 3, children: [
+      /* @__PURE__ */ jsx(Grid, { size: { xs: 12, lg: 8 }, children: /* @__PURE__ */ jsx(
+        PlayerDisplayCard_default,
+        {
+          profilePicture: playerData.profilePicture,
+          username: playerData.username,
+          bio: playerData.bio,
+          preferredPronouns: playerData.preferredPronouns
+        }
+      ) }),
+      isSmallScreen && /* @__PURE__ */ jsx(Grid, { size: { xs: 12, lg: 3 }, children: /* @__PURE__ */ jsx(
+        PlayerDetailsCard_default,
+        {
+          preferredPronouns: playerData.preferredPronouns,
+          age: playerData.age,
+          yearsPlaying: playerData.yearsPlaying,
+          discordUsername: playerData.discordUsername,
+          preferredGames: playerData.preferredGames
+        }
+      ) }),
+      blurbs.map((blurb, index) => /* @__PURE__ */ jsx(Grid, { size: { xs: 12, lg: 8 }, children: /* @__PURE__ */ jsx(
+        PlayerPromptCard_default,
+        {
+          title: blurb.title,
+          description: blurb.description
+        }
+      ) }, index))
+    ] }) })
+  ] }) }) });
 }
 var SORT_OPTIONS = [
   { id: "relevance", label: "Relevance" },
@@ -1840,7 +1931,7 @@ var TagsFilter = ({
             });
           },
           slots: { popper: CustomPopper2 },
-          renderInput: (params) => /* @__PURE__ */ jsx(TextField3, { ...params, label: `Select ${label}` })
+          renderInput: (params) => /* @__PURE__ */ jsx(TextField4, { ...params, label: `Select ${label}` })
         },
         `${category}-${selectedTags.join("-")}`
       )
@@ -2010,8 +2101,8 @@ function SearchPageLayout({
         }
       }
     ) }),
-    /* @__PURE__ */ jsxs(Grid9, { container: true, spacing: 2, children: [
-      /* @__PURE__ */ jsx(Grid9, { size: { xs: 12, md: 3 }, children: /* @__PURE__ */ jsxs(Card10, { sx: { marginBottom: isMobile ? 2 : 0 }, children: [
+    /* @__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__ */ jsx(
           CardHeader4,
           {
@@ -2034,7 +2125,7 @@ function SearchPageLayout({
           }
         ) })
       ] }) }),
-      /* @__PURE__ */ jsx(Grid9, { size: { xs: 12, md: 9 }, children: /* @__PURE__ */ jsxs(Card10, { children: [
+      /* @__PURE__ */ jsx(Grid8, { size: { xs: 12, md: 9 }, children: /* @__PURE__ */ jsxs(Card10, { children: [
         /* @__PURE__ */ jsx(
           CardHeader4,
           {
@@ -2152,14 +2243,14 @@ 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(Grid9, { container: true, spacing: 2, direction: "column", children: [
-      /* @__PURE__ */ jsxs(Grid9, { container: true, direction: "row", children: [
-        /* @__PURE__ */ jsx(Grid9, { children: /* @__PURE__ */ jsx(Image2, { alt: player.username + "'s profile pic", height: 64, src: player.miniPic || "", width: 64 }) }),
-        /* @__PURE__ */ jsx(Grid9, { children: /* @__PURE__ */ jsx(Typography, { variant: "h5", children: player.username }) })
+    /* @__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__ */ jsx(Grid9, { children: renderTagsFromIds(player.tags, allTags) })
+      /* @__PURE__ */ jsx(Grid8, { children: renderTagsFromIds(player.tags, allTags) })
     ] }),
-    canEdit && /* @__PURE__ */ jsxs(Grid9, { children: [
+    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: () => {
         handleAssignToDungeonMaster(player);
@@ -2171,11 +2262,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(Grid9, { container: true, spacing: 2, direction: "column", children: [
-      /* @__PURE__ */ jsx(Grid9, { children: /* @__PURE__ */ jsx(Typography, { variant: "h5", children: player.username }) }),
-      /* @__PURE__ */ jsxs(Grid9, { container: true, direction: "row", children: [
-        /* @__PURE__ */ jsx(Grid9, { children: /* @__PURE__ */ jsx(Image2, { alt: player.username + "'s profile pic", height: 120, src: player.imageUrl ? player.imageUrl : "", width: 256 }) }),
-        /* @__PURE__ */ jsx(Grid9, { children: renderTagsFromIds(player.tags, allTags) }),
+    /* @__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(Typography, { children: player.description })
       ] })
     ] }) })
@@ -2329,6 +2420,87 @@ var NextGameCountdown = ({ nextGameTime }) => {
     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;
@@ -2399,9 +2571,9 @@ function TablePageLayout(props) {
         p: 2,
         boxShadow: "0px 8px 15px rgba(25, 118, 210, 0.3)"
       },
-      children: /* @__PURE__ */ jsxs(Grid9, { container: true, direction: "column", children: [
+      children: /* @__PURE__ */ jsxs(Grid8, { container: true, direction: "column", children: [
         /* @__PURE__ */ jsxs(
-          Grid9,
+          Grid8,
           {
             container: true,
             direction: "column",
@@ -2446,7 +2618,7 @@ function TablePageLayout(props) {
                   value: currentShortDescription
                 }
               ) : /* @__PURE__ */ jsx(Typography, { sx: { color: "white", opacity: 0.95 }, children: currentShortDescription }),
-              /* @__PURE__ */ jsx(Grid9, { container: true, children: isTableInEditMode ? renderEditableTags(currentTags, allTags, handleToggleTag) : renderTags(currentTagIds, allTags) }),
+              /* @__PURE__ */ jsx(Grid8, { container: true, children: isTableInEditMode ? renderEditableTags(currentTags, allTags, handleToggleTag) : renderTags(currentTagIds, allTags) }),
               /* @__PURE__ */ jsx(
                 TableActionsBar,
                 {
@@ -2466,8 +2638,8 @@ function TablePageLayout(props) {
             ]
           }
         ),
-        /* @__PURE__ */ jsxs(Grid9, { container: true, spacing: 2, sx: { mt: 2 }, children: [
-          /* @__PURE__ */ jsx(Grid9, { size: { xs: 12, md: 8 }, children: /* @__PURE__ */ jsx(Card, { sx: { height: "100%" }, children: /* @__PURE__ */ jsx(CardContent, { children: isTableInEditMode ? /* @__PURE__ */ jsx(
+        /* @__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(
             AutoResizingTextarea_default,
             {
               isInEditMode: isTableInEditMode,
@@ -2476,7 +2648,7 @@ function TablePageLayout(props) {
               value: currentDescription
             }
           ) : /* @__PURE__ */ jsx(Typography, { sx: { whiteSpace: "pre-wrap" }, children: currentDescription }) }) }) }),
-          /* @__PURE__ */ jsxs(Grid9, { size: { xs: 12, md: 4 }, children: [
+          /* @__PURE__ */ jsxs(Grid8, { 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: " }),
@@ -2503,13 +2675,13 @@ var renderTags = function(tags, allTags) {
   if (!tags || !allTags) {
     return /* @__PURE__ */ jsx(Fragment, {});
   }
-  return /* @__PURE__ */ jsx(Grid9, { container: true, spacing: 1, sx: { pb: 1.5 }, children: tags.map((tagId) => {
+  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(Grid9, { size: { xs: 12 }, sx: { pb: 1.5 }, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Grid8, { size: { xs: 12 }, sx: { pb: 1.5 }, children: /* @__PURE__ */ jsx(
     TagEditor,
     {
       title: "Table Tags",
@@ -2524,6 +2696,6 @@ var renderEditableTags = function(selectedTags, allTags, onToggleTag) {
 };
 var TablePageLayout_default = TablePageLayout;
 
-export { AutoResizingTextarea_default as AutoResizingTextarea, BaseSearchResultCard_default as BaseSearchResultCard, CANDIDATE_TIMEZONES, DMHighlightsCard, EventBanner, EventBannerEdit, EventBasicInfo, EventBasicInfoEdit, EventEditProvider, EventPageLayout, EventResultCard_default as EventResultCard, EventTablesCard_default as EventTablesCard, FiltersContainer_default as FiltersContainer, GameTableProvider, ModalContext, ModalProvider_default as ModalProvider, NextGameCountdown, PlayerDetailsCard_default as PlayerDetailsCard, PlayerDisplayCard_default as PlayerDisplayCard, PlayerHighlightsCard, PlayerPromptCard_default as PlayerPromptCard, PlayerResultCard_default as PlayerResultCard, PlayerTagsCard, 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, TypeFilter_default as TypeFilter, generateTagsDisplay, renderTagsFromIds, useEventEdit, useGameTableContext, useModal };
+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, FiltersContainer_default as FiltersContainer, GameTableProvider, ModalContext, ModalProvider_default as ModalProvider, NextGameCountdown, 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, TypeFilter_default as TypeFilter, generateTagsDisplay, renderTagsFromIds, useEventEdit, useGameTableContext, useModal };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map