@mbpockets/shared-ui 0.1.18

package/README.md

@@ -0,0 +1,85 @@
+# @pockets/shared-ui
+
+A shareable UI library of React/Next components and supporting code (components, mocks, etc.). This package is published as a tarball attached to a GitHub Release and can be installed directly from the release URL.
+
+## How to publish a new release
+
+Prerequisites:
+- EITHER: GitHub CLI installed and authenticated (`gh auth status`)
+- OR: Set an environment token `GITHUB_TOKEN` (or `GH_TOKEN`) with repo scope
+- Clean working tree (no uncommitted changes).
+- Node.js 20+.
+
+If you don't have gh installed, set a token and run locally:
+- PowerShell (Windows):  $env:GITHUB_TOKEN = "<your-token>"
+- bash/zsh (macOS/Linux): export GITHUB_TOKEN="<your-token>"
+
+The release script will use gh when available; otherwise it will use the GitHub REST API with the token.
+
+Local release:
+
+- patch bump (default):
+  npm run publish:web
+
+- minor or major bump:
+  node scripts/release.mjs minor
+  node scripts/release.mjs major
+
+The script will:
+- Bump the version in package.json via `npm version <type>` (commit + tag)
+- Build the package (`tsup`)
+- Create a tarball via `npm pack`
+- Push commit and tag
+- Create a GitHub Release and upload the tarball asset
+
+GitHub Action alternative:
+- Use the Release workflow manually (workflow_dispatch) and pass input `bump` as `patch|minor|major`.
+
+## How to consume
+
+Install from a GitHub Release (replace <ORG>/<REPO> and version):
+
+  npm i https://github.com/<ORG>/<REPO>/releases/download/vX.Y.Z/pockets-shared-ui-X.Y.Z.tgz
+
+In your Next.js app’s next.config.mjs (or next.config.ts), add:
+
+  import { defineConfig } from 'next/config';
+
+  export default {
+    experimental: {
+      // Ensure the package is transpiled by Next
+      transpilePackages: ["@pockets/shared-ui"],
+    },
+  };
+
+Peer dependencies expected from the consuming app:
+- react ^19
+- react-dom ^19
+- next ^15
+- @mui/material ^7 (required if you use components that rely on MUI)
+- @mui/icons-material ^7 (optional; only if you use components that render icons)
+- @mui/joy ^5.0.0-beta (optional)
+- @emotion/react ^11 and @emotion/styled ^11
+
+### MUI version alignment note
+
+If your app uses @mui/icons-material, ensure its minor version matches your installed @mui/material minor version. For example:
+- If you have @mui/material@7.1.x, use @mui/icons-material@~7.1.0
+- If you upgrade to @mui/material@7.3.x, then use @mui/icons-material@^7.3.0
+
+NPM may otherwise attempt to install the latest @mui/icons-material (e.g., 7.3.x) which requires @mui/material^7.3.x and can cause ERESOLVE in projects pinned to @mui/material 7.1.x.
+
+## Package entry points
+
+This package ships ESM and CJS builds with type declarations. The main barrel is `src/index.ts` which re-exports from:
+- components
+- mocks
+- data (placeholder)
+- hooks (placeholder)
+- utils (placeholder)
+
+You can import like:
+
+  import { SearchPageLayout, Tags, Players } from "@pockets/shared-ui";
+
+Or deep-import specific modules if desired (paths are preserved in the build).

package/dist/EventPage/editMode/index.cjs

@@ -0,0 +1,573 @@
+"use client";
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var material = require('@mui/material');
+var DeleteIcon = require('@mui/icons-material/Delete');
+var EditIcon = require('@mui/icons-material/Edit');
+var AddIcon = require('@mui/icons-material/Add');
+var ColorizeIcon = require('@mui/icons-material/Colorize');
+var CancelIcon = require('@mui/icons-material/Cancel');
+var CheckCircleIcon = require('@mui/icons-material/CheckCircle');
+require('@mui/material/Box');
+require('@mui/material/Grid');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var DeleteIcon__default = /*#__PURE__*/_interopDefault(DeleteIcon);
+var EditIcon__default = /*#__PURE__*/_interopDefault(EditIcon);
+var AddIcon__default = /*#__PURE__*/_interopDefault(AddIcon);
+var ColorizeIcon__default = /*#__PURE__*/_interopDefault(ColorizeIcon);
+var CancelIcon__default = /*#__PURE__*/_interopDefault(CancelIcon);
+var CheckCircleIcon__default = /*#__PURE__*/_interopDefault(CheckCircleIcon);
+
+var defaultValue = {
+  isOwner: false,
+  updateEvent: async () => false,
+  updateImages: () => {
+  },
+  event: null
+};
+var EventEditContext = react.createContext(defaultValue);
+function EventEditProvider({
+  value,
+  initialEvent,
+  children
+}) {
+  const [event, setEvent] = react.useState(initialEvent);
+  react.useEffect(() => {
+    setEvent(initialEvent);
+  }, [initialEvent]);
+  const handleUpdateEvent = async (patch) => {
+    if (value == null ? void 0 : value.updateEvent) {
+      const result = value.updateEvent(patch);
+      if (result instanceof Promise) {
+        const success = await result;
+        if (success) {
+          setEvent((prev) => ({ ...prev, ...patch }));
+        }
+        return success;
+      } else {
+        const success = result === false ? false : true;
+        if (success) {
+          setEvent((prev) => ({ ...prev, ...patch }));
+        }
+        return success;
+      }
+    }
+    return false;
+  };
+  const mergedValue = {
+    ...defaultValue,
+    ...value,
+    event,
+    updateEvent: handleUpdateEvent
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(EventEditContext.Provider, { value: mergedValue, children });
+}
+function useEventEdit() {
+  const context = react.useContext(EventEditContext);
+  if (!context) {
+    throw new Error("useEventEdit must be used within an EventEditProvider");
+  }
+  return context;
+}
+function generateTagsDisplay(tag) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: "inline-block text-sm px-3 py-1 rounded-full outline-black outline-2 font-outlined",
+      style: {
+        marginTop: "6px",
+        marginRight: "6px",
+        marginBottom: "6px",
+        background: tag.color || "#bfbcbb",
+        color: "white",
+        textShadow: "black 0.2em 0.2em 0.4em"
+      },
+      children: tag.label
+    },
+    tag.id
+  );
+}
+function EventBannerEdit({
+  initialValue,
+  onCancel,
+  onSave
+}) {
+  const { updateImages } = useEventEdit();
+  const [title, setTitle] = react.useState(initialValue.title);
+  const [bannerColor, setBannerColor] = react.useState(initialValue.bannerColor || "");
+  const [desktopBanner, setDesktopBanner] = react.useState(initialValue.bannerUrl.desktop);
+  const [mobileBanner, setMobileBanner] = react.useState(initialValue.bannerUrl.mobile || "");
+  const [links, setLinks] = react.useState(initialValue.links);
+  const [linkToEdit, setLinkToEdit] = react.useState(null);
+  const [isSaving, setIsSaving] = react.useState(false);
+  const backgroundColor = bannerColor || "linear-gradient(135deg, rgba(25,118,210,0.8), rgba(25,118,210,1))";
+  const handleSave = async () => {
+    setIsSaving(true);
+    try {
+      const patch = {};
+      if (title !== initialValue.title) {
+        patch.title = title;
+      }
+      const currentBannerColor = bannerColor || void 0;
+      const initialBannerColor = initialValue.bannerColor || void 0;
+      if (currentBannerColor !== initialBannerColor) {
+        patch.bannerColor = currentBannerColor;
+      }
+      const currentMobile = mobileBanner || void 0;
+      const initialMobile = initialValue.bannerUrl.mobile || void 0;
+      if (desktopBanner !== initialValue.bannerUrl.desktop || currentMobile !== initialMobile) {
+        patch.bannerUrl = {
+          desktop: desktopBanner,
+          mobile: currentMobile
+        };
+      }
+      if (JSON.stringify(links) !== JSON.stringify(initialValue.links)) {
+        patch.links = links;
+      }
+      if (Object.keys(patch).length > 0) {
+        await onSave(patch);
+      } else {
+        onCancel();
+      }
+    } catch (error) {
+      console.error("Failed to save banner changes", error);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  const removeLink = (index) => {
+    setLinks(links.filter((_, i) => i !== index));
+  };
+  const openEditLink = (index) => {
+    setLinkToEdit({
+      index,
+      text: links[index].text,
+      url: links[index].url
+    });
+  };
+  const saveEditedLink = () => {
+    if (linkToEdit) {
+      const newLinks = [...links];
+      if (linkToEdit.index === -1) {
+        newLinks.push({ text: linkToEdit.text, url: linkToEdit.url });
+      } else {
+        newLinks[linkToEdit.index] = { text: linkToEdit.text, url: linkToEdit.url };
+      }
+      setLinks(newLinks);
+      setLinkToEdit(null);
+    }
+  };
+  const handleEyeDropper = async () => {
+    if (!window.EyeDropper) {
+      alert("EyeDropper API is not supported in this browser");
+      return;
+    }
+    const eyeDropper = new window.EyeDropper();
+    try {
+      const result = await eyeDropper.open();
+      setBannerColor(result.sRGBHex);
+    } catch (e) {
+      console.log("EyeDropper cancelled or failed", e);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { position: "relative", width: "100%" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      material.Grid,
+      {
+        sx: {
+          background: backgroundColor,
+          paddingTop: "8px",
+          position: "relative",
+          border: "2px dashed rgba(255,255,255,0.5)",
+          borderRadius: 1
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: {
+            position: "absolute",
+            top: 8,
+            left: 8,
+            zIndex: 10,
+            display: "flex",
+            flexDirection: "column",
+            gap: 1,
+            bgcolor: "rgba(0,0,0,0.5)",
+            p: 1,
+            borderRadius: 1,
+            width: "300px"
+          }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              material.TextField,
+              {
+                label: "Title",
+                variant: "outlined",
+                size: "small",
+                value: title,
+                onChange: (e) => setTitle(e.target.value),
+                sx: { input: { color: "white" }, label: { color: "rgba(255,255,255,0.7)" }, "& .MuiOutlinedInput-root": { "& fieldset": { borderColor: "rgba(255,255,255,0.3)" } } }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                material.TextField,
+                {
+                  label: "Banner Color",
+                  variant: "outlined",
+                  size: "small",
+                  value: bannerColor,
+                  onChange: (e) => setBannerColor(e.target.value),
+                  placeholder: "#HEX or linear-gradient(...)",
+                  sx: { flex: 1, input: { color: "white" }, label: { color: "rgba(255,255,255,0.7)" }, "& .MuiOutlinedInput-root": { "& fieldset": { borderColor: "rgba(255,255,255,0.3)" } } }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Eye Dropper", children: /* @__PURE__ */ jsxRuntime.jsx(
+                material.IconButton,
+                {
+                  size: "small",
+                  onClick: handleEyeDropper,
+                  sx: { color: "white", bgcolor: "rgba(255,255,255,0.1)", "&:hover": { bgcolor: "rgba(255,255,255,0.2)" } },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(ColorizeIcon__default.default, { fontSize: "small" })
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "color",
+                  value: bannerColor.startsWith("#") ? bannerColor : "#1976d2",
+                  onChange: (e) => setBannerColor(e.target.value),
+                  style: { width: "40px", height: "40px", padding: 0, border: "none", background: "transparent", cursor: "pointer" }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "flex", gap: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+              material.Button,
+              {
+                variant: "contained",
+                size: "small",
+                fullWidth: true,
+                onClick: updateImages,
+                children: "Update Images"
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.Box,
+            {
+              sx: {
+                width: "100%",
+                height: "auto",
+                maxHeight: "250px",
+                overflow: "hidden",
+                display: "flex",
+                justifyContent: "center",
+                opacity: 0.8
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                material.Box,
+                {
+                  component: "img",
+                  src: desktopBanner,
+                  alt: title,
+                  sx: {
+                    width: "100%",
+                    height: "auto",
+                    objectFit: "contain"
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            material.Grid,
+            {
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              paddingTop: "3px",
+              paddingBottom: "3px",
+              sx: { gap: 1.5, flexWrap: "wrap" },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { px: 1.5, py: 0.5, color: "rgba(255,255,255,0.5)", bgcolor: "rgba(0,0,0,0.4)", borderRadius: 2, border: "1px dashed rgba(255,255,255,0.2)" }, children: "Stats Placeholder" }),
+                generateTagsDisplay(initialValue.eventTag),
+                links.map((link, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+                  material.Box,
+                  {
+                    sx: {
+                      position: "relative",
+                      display: "flex",
+                      alignItems: "center",
+                      px: 1.5,
+                      py: 0.5,
+                      color: "#fff",
+                      bgcolor: "rgba(0,0,0,0.7)",
+                      borderRadius: 2,
+                      boxShadow: "0 8px 16px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.15)",
+                      border: "1px solid rgba(255,255,255,0.25)",
+                      backdropFilter: "blur(6px)",
+                      fontWeight: 700,
+                      letterSpacing: 0.2
+                    },
+                    children: [
+                      link.text,
+                      /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { ml: 1, display: "flex" }, children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Edit Link", children: /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { size: "small", onClick: () => openEditLink(index), sx: { color: "white", p: 0.2 }, children: /* @__PURE__ */ jsxRuntime.jsx(EditIcon__default.default, { fontSize: "inherit" }) }) }),
+                        /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Remove Link", children: /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { size: "small", onClick: () => removeLink(index), sx: { color: "error.light", p: 0.2 }, children: /* @__PURE__ */ jsxRuntime.jsx(DeleteIcon__default.default, { fontSize: "inherit" }) }) })
+                      ] })
+                    ]
+                  },
+                  index
+                )),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  material.Button,
+                  {
+                    variant: "outlined",
+                    size: "small",
+                    startIcon: /* @__PURE__ */ jsxRuntime.jsx(AddIcon__default.default, {}),
+                    onClick: () => setLinkToEdit({ index: -1, text: "", url: "" }),
+                    sx: {
+                      color: "white",
+                      borderColor: "rgba(255,255,255,0.5)",
+                      borderRadius: 2,
+                      "&:hover": { borderColor: "white", bgcolor: "rgba(255,255,255,0.1)" }
+                    },
+                    children: "Add Link"
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", justifyContent: "flex-end", gap: 2, mt: 2 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: onCancel, color: "inherit", disabled: isSaving, children: "Cancel" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        material.Button,
+        {
+          onClick: handleSave,
+          variant: "contained",
+          color: "primary",
+          disabled: isSaving,
+          startIcon: isSaving ? /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 20, color: "inherit" }) : null,
+          children: isSaving ? "Saving..." : "Save Changes"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(material.Dialog, { open: linkToEdit !== null, onClose: () => setLinkToEdit(null), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(material.DialogTitle, { children: (linkToEdit == null ? void 0 : linkToEdit.index) === -1 ? "Add Link" : "Edit Link" }),
+      /* @__PURE__ */ jsxRuntime.jsx(material.DialogContent, { children: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", flexDirection: "column", gap: 2, pt: 1, width: "400px" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.TextField,
+          {
+            label: "Link Text",
+            fullWidth: true,
+            value: (linkToEdit == null ? void 0 : linkToEdit.text) || "",
+            onChange: (e) => setLinkToEdit((prev) => prev ? { ...prev, text: e.target.value } : null)
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.TextField,
+          {
+            label: "Link URL",
+            fullWidth: true,
+            value: (linkToEdit == null ? void 0 : linkToEdit.url) || "",
+            onChange: (e) => setLinkToEdit((prev) => prev ? { ...prev, url: e.target.value } : null)
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(material.DialogActions, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: () => setLinkToEdit(null), children: "Cancel" }),
+        /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: saveEditedLink, variant: "contained", children: "Confirm" })
+      ] })
+    ] })
+  ] });
+}
+var CANDIDATE_TIMEZONES = [
+  "America/New_York",
+  "America/Chicago",
+  "America/Denver",
+  "America/Los_Angeles",
+  "America/Anchorage",
+  "America/Adak",
+  "Pacific/Honolulu",
+  "UTC"
+];
+function EventBasicInfoEdit({
+  initialValue,
+  onCancel,
+  onSave
+}) {
+  const toWallTimeISO = (dateInput, timeZone) => {
+    if (!dateInput) return "";
+    const d = new Date(dateInput);
+    if (isNaN(d.getTime())) return "";
+    const parts = new Intl.DateTimeFormat("en-US", {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: false,
+      timeZone
+    }).formatToParts(d);
+    const f = (type) => {
+      var _a;
+      return (_a = parts.find((p) => p.type === type)) == null ? void 0 : _a.value;
+    };
+    const year = f("year");
+    const month = f("month");
+    const day = f("day");
+    let hour = f("hour");
+    if (hour === "24") hour = "00";
+    const minute = f("minute");
+    return `${year}-${month}-${day}T${hour}:${minute}`;
+  };
+  const toUTCISOString = (wallTime, timeZone) => {
+    var _a;
+    if (!wallTime) return void 0;
+    const d = /* @__PURE__ */ new Date(wallTime + ":00Z");
+    const parts = new Intl.DateTimeFormat("en-US", {
+      timeZone,
+      timeZoneName: "longOffset"
+    }).formatToParts(d);
+    const offsetPart = ((_a = parts.find((p) => p.type === "timeZoneName")) == null ? void 0 : _a.value) || "GMT";
+    const offset = offsetPart.replace("GMT", "");
+    const isoWithOffset = `${wallTime}:00${offset || "+00:00"}`;
+    return new Date(isoWithOffset).toISOString();
+  };
+  const [description, setDescription] = react.useState(initialValue.description);
+  const [timezone, setTimezone] = react.useState(initialValue.timezone);
+  const [startingDate, setStartingDate] = react.useState(toWallTimeISO(initialValue.startingDate, initialValue.timezone));
+  const [endingDate, setEndingDate] = react.useState(toWallTimeISO(initialValue.endingDate, initialValue.timezone));
+  const [timeInfo, setTimeInfo] = react.useState(initialValue.date);
+  const [isSaving, setIsSaving] = react.useState(false);
+  const handleSave = async () => {
+    setIsSaving(true);
+    try {
+      const patch = {};
+      if (description !== initialValue.description) patch.description = description;
+      if (timeInfo !== initialValue.date) patch.date = timeInfo;
+      if (timezone !== initialValue.timezone) patch.timezone = timezone;
+      if (startingDate !== toWallTimeISO(initialValue.startingDate, timezone) || timezone !== initialValue.timezone) {
+        patch.startingDate = toUTCISOString(startingDate, timezone);
+      }
+      if (endingDate !== toWallTimeISO(initialValue.endingDate, timezone) || timezone !== initialValue.timezone) {
+        patch.endingDate = toUTCISOString(endingDate, timezone);
+      }
+      if (Object.keys(patch).length > 0) {
+        await onSave(patch);
+      } else {
+        onCancel();
+      }
+    } catch (error) {
+      console.error("Failed to save basic info changes", error);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(material.Card, { sx: {
+    boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.1)",
+    background: "linear-gradient(135deg, rgba(225, 225, 225, 1), rgba(250, 250, 250, 1))",
+    border: "2px dashed rgba(25,118,210,0.5)",
+    width: "100%"
+  }, children: /* @__PURE__ */ jsxRuntime.jsxs(material.CardContent, { sx: { position: "relative" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", justifyContent: "flex-end", mb: 1, gap: 1 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Cancel", children: /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { size: "small", onClick: onCancel, color: "error", disabled: isSaving, children: /* @__PURE__ */ jsxRuntime.jsx(CancelIcon__default.default, {}) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Apply Changes", children: /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { size: "small", onClick: handleSave, color: "primary", disabled: isSaving, children: isSaving ? /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 24 }) : /* @__PURE__ */ jsxRuntime.jsx(CheckCircleIcon__default.default, {}) }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { mt: 2 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body1", fontSize: "x-large", fontWeight: "bold", sx: { mb: 1 }, children: "Event Dates & Times:" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(material.Grid, { container: true, spacing: 2, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { size: { xs: 12, sm: 4 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          material.TextField,
+          {
+            fullWidth: true,
+            label: "Starting Date",
+            type: "datetime-local",
+            size: "small",
+            value: startingDate,
+            onChange: (e) => setStartingDate(e.target.value),
+            InputLabelProps: { shrink: true }
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { size: { xs: 12, sm: 4 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          material.TextField,
+          {
+            fullWidth: true,
+            label: "Ending Date",
+            type: "datetime-local",
+            size: "small",
+            value: endingDate,
+            onChange: (e) => setEndingDate(e.target.value),
+            InputLabelProps: { shrink: true }
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { size: { xs: 12, sm: 4 }, children: /* @__PURE__ */ jsxRuntime.jsxs(material.FormControl, { fullWidth: true, size: "small", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(material.InputLabel, { children: "Display Timezone" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.Select,
+            {
+              label: "Display Timezone",
+              value: timezone,
+              onChange: (e) => setTimezone(e.target.value),
+              children: CANDIDATE_TIMEZONES.map((tz) => /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: tz, children: tz }, tz))
+            }
+          )
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { mt: 2 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h5", children: "Hours of Operation:" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.TextField,
+          {
+            fullWidth: true,
+            multiline: true,
+            variant: "standard",
+            placeholder: "e.g. Mon-Fri 9am-5pm",
+            value: timeInfo,
+            onChange: (e) => setTimeInfo(e.target.value),
+            sx: { mt: 1 }
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h5", paddingTop: 2, children: "About:" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      material.TextField,
+      {
+        fullWidth: true,
+        multiline: true,
+        variant: "standard",
+        value: description,
+        onChange: (e) => setDescription(e.target.value),
+        sx: {
+          paddingTop: 1,
+          "& .MuiInputBase-root": {
+            lineHeight: 1.5,
+            whiteSpace: "pre-wrap"
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: {
+      mt: 2,
+      width: "100%",
+      p: 1.5,
+      borderRadius: 2,
+      boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.1)",
+      background: "linear-gradient(135deg, rgba(180, 180,180, 1), rgba(225, 225, 225, 0.8))",
+      color: "rgba(0,0,0,0.5)",
+      border: "1px dashed rgba(0,0,0,0.2)"
+    }, children: "Location Data (Not Editable)" })
+  ] }) });
+}
+
+exports.EventBannerEdit = EventBannerEdit;
+exports.EventBasicInfoEdit = EventBasicInfoEdit;
+exports.EventEditProvider = EventEditProvider;
+exports.useEventEdit = useEventEdit;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map