fansunited-widgets-cdn 0.0.86-RC4 → 0.0.86-RC5

package/chunks/Tutorial-CRJLOovs.js

@@ -0,0 +1,1072 @@
+import { r as i, m as q, j as l, U as re, W as ne, _ as v, v as xe, g as Q, d as X, e as Z, f as ee, h as V, s as A, w as ge, k as te, V as ae, i as L, x as J, u as ve, B as ye } from "./main-Bh6iw92_.js";
+import { d as Ce, A as Ee } from "./default-quiz-bg-ADjjIfPj.js";
+import { o as W, g as be, u as se, c as K } from "./createSvgIcon-D9D4a1R9.js";
+import { S as ie } from "./Stack-DbDi7kPO.js";
+import { i as Re, S as Me, C as le, B as U, T as _ } from "./resolveProps-Bgg0H6c2.js";
+import { C as Te } from "./CardContent-NCZhfGcZ.js";
+import { r as Se } from "./index-CJqcqbHq.js";
+import { G as de } from "./Grid-yjqNNhEx.js";
+function ce(...t) {
+  return t.reduce((e, r) => r == null ? e : function(...s) {
+    e.apply(this, s), r.apply(this, s);
+  }, () => {
+  });
+}
+function oe(t) {
+  return W(t).defaultView || window;
+}
+function ke(t) {
+  const e = t.documentElement.clientWidth;
+  return Math.abs(window.innerWidth - e);
+}
+const Ie = ["input", "select", "textarea", "a[href]", "button", "[tabindex]", "audio[controls]", "video[controls]", '[contenteditable]:not([contenteditable="false"])'].join(",");
+function we(t) {
+  const e = parseInt(t.getAttribute("tabindex") || "", 10);
+  return Number.isNaN(e) ? t.contentEditable === "true" || (t.nodeName === "AUDIO" || t.nodeName === "VIDEO" || t.nodeName === "DETAILS") && t.getAttribute("tabindex") === null ? 0 : t.tabIndex : e;
+}
+function Pe(t) {
+  if (t.tagName !== "INPUT" || t.type !== "radio" || !t.name)
+    return !1;
+  const e = (o) => t.ownerDocument.querySelector(`input[type="radio"]${o}`);
+  let r = e(`[name="${t.name}"]:checked`);
+  return r || (r = e(`[name="${t.name}"]`)), r !== t;
+}
+function je(t) {
+  return !(t.disabled || t.tagName === "INPUT" && t.type === "hidden" || Pe(t));
+}
+function De(t) {
+  const e = [], r = [];
+  return Array.from(t.querySelectorAll(Ie)).forEach((o, s) => {
+    const n = we(o);
+    n === -1 || !je(o) || (n === 0 ? e.push(o) : r.push({
+      documentOrder: s,
+      tabIndex: n,
+      node: o
+    }));
+  }), r.sort((o, s) => o.tabIndex === s.tabIndex ? o.documentOrder - s.documentOrder : o.tabIndex - s.tabIndex).map((o) => o.node).concat(e);
+}
+function Oe() {
+  return !0;
+}
+function ze(t) {
+  const {
+    children: e,
+    disableAutoFocus: r = !1,
+    disableEnforceFocus: o = !1,
+    disableRestoreFocus: s = !1,
+    getTabbable: n = De,
+    isEnabled: a = Oe,
+    open: d
+  } = t, c = i.useRef(!1), m = i.useRef(null), f = i.useRef(null), h = i.useRef(null), C = i.useRef(null), y = i.useRef(!1), p = i.useRef(null), T = q(be(e), p), I = i.useRef(null);
+  i.useEffect(() => {
+    !d || !p.current || (y.current = !r);
+  }, [r, d]), i.useEffect(() => {
+    if (!d || !p.current)
+      return;
+    const u = W(p.current);
+    return p.current.contains(u.activeElement) || (p.current.hasAttribute("tabIndex") || p.current.setAttribute("tabIndex", "-1"), y.current && p.current.focus()), () => {
+      s || (h.current && h.current.focus && (c.current = !0, h.current.focus()), h.current = null);
+    };
+  }, [d]), i.useEffect(() => {
+    if (!d || !p.current)
+      return;
+    const u = W(p.current), E = (M) => {
+      I.current = M, !(o || !a() || M.key !== "Tab") && u.activeElement === p.current && M.shiftKey && (c.current = !0, f.current && f.current.focus());
+    }, R = () => {
+      const M = p.current;
+      if (M === null)
+        return;
+      if (!u.hasFocus() || !a() || c.current) {
+        c.current = !1;
+        return;
+      }
+      if (M.contains(u.activeElement) || o && u.activeElement !== m.current && u.activeElement !== f.current)
+        return;
+      if (u.activeElement !== C.current)
+        C.current = null;
+      else if (C.current !== null)
+        return;
+      if (!y.current)
+        return;
+      let S = [];
+      if ((u.activeElement === m.current || u.activeElement === f.current) && (S = n(p.current)), S.length > 0) {
+        var O, x;
+        const j = !!((O = I.current) != null && O.shiftKey && ((x = I.current) == null ? void 0 : x.key) === "Tab"), k = S[0], z = S[S.length - 1];
+        typeof k != "string" && typeof z != "string" && (j ? z.focus() : k.focus());
+      } else
+        M.focus();
+    };
+    u.addEventListener("focusin", R), u.addEventListener("keydown", E, !0);
+    const P = setInterval(() => {
+      u.activeElement && u.activeElement.tagName === "BODY" && R();
+    }, 50);
+    return () => {
+      clearInterval(P), u.removeEventListener("focusin", R), u.removeEventListener("keydown", E, !0);
+    };
+  }, [r, o, s, a, d, n]);
+  const D = (u) => {
+    h.current === null && (h.current = u.relatedTarget), y.current = !0, C.current = u.target;
+    const E = e.props.onFocus;
+    E && E(u);
+  }, w = (u) => {
+    h.current === null && (h.current = u.relatedTarget), y.current = !0;
+  };
+  return /* @__PURE__ */ l.jsxs(i.Fragment, {
+    children: [/* @__PURE__ */ l.jsx("div", {
+      tabIndex: d ? 0 : -1,
+      onFocus: w,
+      ref: m,
+      "data-testid": "sentinelStart"
+    }), /* @__PURE__ */ i.cloneElement(e, {
+      ref: T,
+      onFocus: D
+    }), /* @__PURE__ */ l.jsx("div", {
+      tabIndex: d ? 0 : -1,
+      onFocus: w,
+      ref: f,
+      "data-testid": "sentinelEnd"
+    })]
+  });
+}
+function Ne(t) {
+  return typeof t == "function" ? t() : t;
+}
+const We = /* @__PURE__ */ i.forwardRef(function(e, r) {
+  const {
+    children: o,
+    container: s,
+    disablePortal: n = !1
+  } = e, [a, d] = i.useState(null), c = q(/* @__PURE__ */ i.isValidElement(o) ? be(o) : null, r);
+  if (re(() => {
+    n || d(Ne(s) || document.body);
+  }, [s, n]), re(() => {
+    if (a && !n)
+      return ne(r, a), () => {
+        ne(r, null);
+      };
+  }, [r, a, n]), n) {
+    if (/* @__PURE__ */ i.isValidElement(o)) {
+      const m = {
+        ref: c
+      };
+      return /* @__PURE__ */ i.cloneElement(o, m);
+    }
+    return /* @__PURE__ */ l.jsx(i.Fragment, {
+      children: o
+    });
+  }
+  return /* @__PURE__ */ l.jsx(i.Fragment, {
+    children: a && /* @__PURE__ */ Se.createPortal(o, a)
+  });
+});
+function Fe(t) {
+  const e = W(t);
+  return e.body === t ? oe(t).innerWidth > e.documentElement.clientWidth : t.scrollHeight > t.clientHeight;
+}
+function H(t, e) {
+  e ? t.setAttribute("aria-hidden", "true") : t.removeAttribute("aria-hidden");
+}
+function ue(t) {
+  return parseInt(oe(t).getComputedStyle(t).paddingRight, 10) || 0;
+}
+function Ae(t) {
+  const r = ["TEMPLATE", "SCRIPT", "STYLE", "LINK", "MAP", "META", "NOSCRIPT", "PICTURE", "COL", "COLGROUP", "PARAM", "SLOT", "SOURCE", "TRACK"].indexOf(t.tagName) !== -1, o = t.tagName === "INPUT" && t.getAttribute("type") === "hidden";
+  return r || o;
+}
+function pe(t, e, r, o, s) {
+  const n = [e, r, ...o];
+  [].forEach.call(t.children, (a) => {
+    const d = n.indexOf(a) === -1, c = !Ae(a);
+    d && c && H(a, s);
+  });
+}
+function Y(t, e) {
+  let r = -1;
+  return t.some((o, s) => e(o) ? (r = s, !0) : !1), r;
+}
+function $e(t, e) {
+  const r = [], o = t.container;
+  if (!e.disableScrollLock) {
+    if (Fe(o)) {
+      const a = ke(W(o));
+      r.push({
+        value: o.style.paddingRight,
+        property: "padding-right",
+        el: o
+      }), o.style.paddingRight = `${ue(o) + a}px`;
+      const d = W(o).querySelectorAll(".mui-fixed");
+      [].forEach.call(d, (c) => {
+        r.push({
+          value: c.style.paddingRight,
+          property: "padding-right",
+          el: c
+        }), c.style.paddingRight = `${ue(c) + a}px`;
+      });
+    }
+    let n;
+    if (o.parentNode instanceof DocumentFragment)
+      n = W(o).body;
+    else {
+      const a = o.parentElement, d = oe(o);
+      n = (a == null ? void 0 : a.nodeName) === "HTML" && d.getComputedStyle(a).overflowY === "scroll" ? a : o;
+    }
+    r.push({
+      value: n.style.overflow,
+      property: "overflow",
+      el: n
+    }, {
+      value: n.style.overflowX,
+      property: "overflow-x",
+      el: n
+    }, {
+      value: n.style.overflowY,
+      property: "overflow-y",
+      el: n
+    }), n.style.overflow = "hidden";
+  }
+  return () => {
+    r.forEach(({
+      value: n,
+      el: a,
+      property: d
+    }) => {
+      n ? a.style.setProperty(d, n) : a.style.removeProperty(d);
+    });
+  };
+}
+function Be(t) {
+  const e = [];
+  return [].forEach.call(t.children, (r) => {
+    r.getAttribute("aria-hidden") === "true" && e.push(r);
+  }), e;
+}
+class He {
+  constructor() {
+    this.containers = void 0, this.modals = void 0, this.modals = [], this.containers = [];
+  }
+  add(e, r) {
+    let o = this.modals.indexOf(e);
+    if (o !== -1)
+      return o;
+    o = this.modals.length, this.modals.push(e), e.modalRef && H(e.modalRef, !1);
+    const s = Be(r);
+    pe(r, e.mount, e.modalRef, s, !0);
+    const n = Y(this.containers, (a) => a.container === r);
+    return n !== -1 ? (this.containers[n].modals.push(e), o) : (this.containers.push({
+      modals: [e],
+      container: r,
+      restore: null,
+      hiddenSiblings: s
+    }), o);
+  }
+  mount(e, r) {
+    const o = Y(this.containers, (n) => n.modals.indexOf(e) !== -1), s = this.containers[o];
+    s.restore || (s.restore = $e(s, r));
+  }
+  remove(e, r = !0) {
+    const o = this.modals.indexOf(e);
+    if (o === -1)
+      return o;
+    const s = Y(this.containers, (a) => a.modals.indexOf(e) !== -1), n = this.containers[s];
+    if (n.modals.splice(n.modals.indexOf(e), 1), this.modals.splice(o, 1), n.modals.length === 0)
+      n.restore && n.restore(), e.modalRef && H(e.modalRef, r), pe(n.container, e.mount, e.modalRef, n.hiddenSiblings, !1), this.containers.splice(s, 1);
+    else {
+      const a = n.modals[n.modals.length - 1];
+      a.modalRef && H(a.modalRef, !1);
+    }
+    return o;
+  }
+  isTopModal(e) {
+    return this.modals.length > 0 && this.modals[this.modals.length - 1] === e;
+  }
+}
+function Le(t) {
+  return typeof t == "function" ? t() : t;
+}
+function Ue(t) {
+  return t ? t.props.hasOwnProperty("in") : !1;
+}
+const Ve = new He();
+function Ke(t) {
+  const {
+    container: e,
+    disableEscapeKeyDown: r = !1,
+    disableScrollLock: o = !1,
+    // @ts-ignore internal logic - Base UI supports the manager as a prop too
+    manager: s = Ve,
+    closeAfterTransition: n = !1,
+    onTransitionEnter: a,
+    onTransitionExited: d,
+    children: c,
+    onClose: m,
+    open: f,
+    rootRef: h
+  } = t, C = i.useRef({}), y = i.useRef(null), p = i.useRef(null), T = q(p, h), [I, D] = i.useState(!f), w = Ue(c);
+  let u = !0;
+  (t["aria-hidden"] === "false" || t["aria-hidden"] === !1) && (u = !1);
+  const E = () => W(y.current), R = () => (C.current.modalRef = p.current, C.current.mount = y.current, C.current), P = () => {
+    s.mount(R(), {
+      disableScrollLock: o
+    }), p.current && (p.current.scrollTop = 0);
+  }, M = se(() => {
+    const b = Le(e) || E().body;
+    s.add(R(), b), p.current && P();
+  }), S = i.useCallback(() => s.isTopModal(R()), [s]), O = se((b) => {
+    y.current = b, b && (f && S() ? P() : p.current && H(p.current, u));
+  }), x = i.useCallback(() => {
+    s.remove(R(), u);
+  }, [u, s]);
+  i.useEffect(() => () => {
+    x();
+  }, [x]), i.useEffect(() => {
+    f ? M() : (!w || !n) && x();
+  }, [f, x, w, n, M]);
+  const j = (b) => (g) => {
+    var N;
+    (N = b.onKeyDown) == null || N.call(b, g), !(g.key !== "Escape" || g.which === 229 || // Wait until IME is settled.
+    !S()) && (r || (g.stopPropagation(), m && m(g, "escapeKeyDown")));
+  }, k = (b) => (g) => {
+    var N;
+    (N = b.onClick) == null || N.call(b, g), g.target === g.currentTarget && m && m(g, "backdropClick");
+  };
+  return {
+    getRootProps: (b = {}) => {
+      const g = xe(t);
+      delete g.onTransitionEnter, delete g.onTransitionExited;
+      const N = v({}, g, b);
+      return v({
+        role: "presentation"
+      }, N, {
+        onKeyDown: j(N),
+        ref: T
+      });
+    },
+    getBackdropProps: (b = {}) => {
+      const g = b;
+      return v({
+        "aria-hidden": !0
+      }, g, {
+        onClick: k(g),
+        open: f
+      });
+    },
+    getTransitionProps: () => {
+      const b = () => {
+        D(!1), a && a();
+      }, g = () => {
+        D(!0), d && d(), n && x();
+      };
+      return {
+        onEnter: ce(b, c == null ? void 0 : c.props.onEnter),
+        onExited: ce(g, c == null ? void 0 : c.props.onExited)
+      };
+    },
+    rootRef: T,
+    portalRef: O,
+    isTopModal: S,
+    exited: I,
+    hasTransition: w
+  };
+}
+function _e(t) {
+  return Q("MuiCardCover", t);
+}
+X("MuiCardCover", ["root"]);
+const Ye = ["className", "component", "children", "slots", "slotProps"], Ge = () => te({
+  root: ["root"]
+}, _e, {}), Je = A("div", {
+  name: "JoyCardCover",
+  slot: "Root",
+  overridesResolver: (t, e) => e.root
+})({
+  position: "absolute",
+  zIndex: 0,
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  borderRadius: "var(--CardCover-radius)",
+  // use data-attribute instead of :first-child to support zero config SSR (emotion)
+  // use nested selector for integrating with nextjs image `fill` layout (spans are inserted on top of the img)
+  "& [data-first-child]": {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    width: "100%",
+    height: "100%",
+    objectFit: "cover",
+    boxSizing: "border-box",
+    borderRadius: "var(--CardCover-radius)",
+    margin: 0,
+    padding: 0,
+    "& > img": {
+      // support art-direction that uses <picture><img /></picture>
+      width: "100%",
+      height: "100%",
+      objectFit: "cover"
+    }
+  }
+}), fe = /* @__PURE__ */ i.forwardRef(function(e, r) {
+  const o = Z({
+    props: e,
+    name: "JoyCardCover"
+  }), {
+    className: s,
+    component: n = "div",
+    children: a,
+    slots: d = {},
+    slotProps: c = {}
+  } = o, m = ee(o, Ye), f = v({}, o, {
+    component: n
+  }), h = Ge(), C = v({}, m, {
+    component: n,
+    slots: d,
+    slotProps: c
+  }), [y, p] = V("root", {
+    ref: r,
+    className: ge(h.root, s),
+    elementType: Je,
+    externalForwardedProps: C,
+    ownerState: f
+  });
+  return /* @__PURE__ */ l.jsx(y, v({}, p, {
+    children: i.Children.map(a, (T, I) => I === 0 && /* @__PURE__ */ i.isValidElement(T) ? /* @__PURE__ */ i.cloneElement(T, {
+      "data-first-child": ""
+    }) : T)
+  }));
+});
+function qe(t) {
+  return Q("MuiModalDialog", t);
+}
+const Tt = X("MuiModalDialog", ["root", "colorPrimary", "colorNeutral", "colorDanger", "colorSuccess", "colorWarning", "colorContext", "variantPlain", "variantOutlined", "variantSoft", "variantSolid", "sizeSm", "sizeMd", "sizeLg", "layoutCenter", "layoutFullscreen"]), Qe = /* @__PURE__ */ i.createContext(void 0), Xe = /* @__PURE__ */ i.createContext(void 0);
+function Ze(t) {
+  return Q("MuiModal", t);
+}
+X("MuiModal", ["root", "hidden", "backdrop"]);
+const et = /* @__PURE__ */ i.createContext(void 0), tt = ["children", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onClose", "onKeyDown", "open", "component", "slots", "slotProps"], ot = (t) => {
+  const {
+    open: e
+  } = t;
+  return te({
+    root: ["root", !e && "hidden"],
+    backdrop: ["backdrop"]
+  }, Ze, {});
+}, rt = A("div")(({
+  ownerState: t,
+  theme: e
+}) => v({
+  "--unstable_popup-zIndex": `calc(${e.vars.zIndex.modal} + 1)`,
+  '& ~ [role="listbox"]': {
+    // target all the listbox (Autocomplete, Menu, Select, etc.) that uses portal
+    "--unstable_popup-zIndex": `calc(${e.vars.zIndex.modal} + 1)`
+  },
+  position: "fixed",
+  zIndex: e.vars.zIndex.modal,
+  right: 0,
+  bottom: 0,
+  top: 0,
+  left: 0
+}, !t.open && {
+  visibility: "hidden"
+})), nt = A(rt, {
+  name: "JoyModal",
+  slot: "Root",
+  overridesResolver: (t, e) => e.root
+})({}), at = A("div")(({
+  theme: t
+}) => ({
+  zIndex: -1,
+  position: "fixed",
+  right: 0,
+  bottom: 0,
+  top: 0,
+  left: 0,
+  backgroundColor: t.vars.palette.background.backdrop,
+  WebkitTapHighlightColor: "transparent",
+  backdropFilter: "blur(8px)"
+})), st = A(at, {
+  name: "JoyModal",
+  slot: "Backdrop",
+  overridesResolver: (t, e) => e.backdrop
+})({}), it = /* @__PURE__ */ i.forwardRef(function(e, r) {
+  const o = Z({
+    props: e,
+    name: "JoyModal"
+  }), {
+    children: s,
+    container: n,
+    disableAutoFocus: a = !1,
+    disableEnforceFocus: d = !1,
+    disableEscapeKeyDown: c = !1,
+    disablePortal: m = !1,
+    disableRestoreFocus: f = !1,
+    disableScrollLock: h = !1,
+    hideBackdrop: C = !1,
+    keepMounted: y = !1,
+    onClose: p,
+    open: T,
+    component: I,
+    slots: D = {},
+    slotProps: w = {}
+  } = o, u = ee(o, tt), E = v({}, o, {
+    disableAutoFocus: a,
+    disableEnforceFocus: d,
+    disableEscapeKeyDown: c,
+    disablePortal: m,
+    disableRestoreFocus: f,
+    disableScrollLock: h,
+    hideBackdrop: C,
+    keepMounted: y
+  }), {
+    getRootProps: R,
+    getBackdropProps: P,
+    rootRef: M,
+    portalRef: S,
+    isTopModal: O
+  } = Ke(v({}, E, {
+    rootRef: r
+  })), x = ot(E), j = v({}, u, {
+    component: I,
+    slots: D,
+    slotProps: w
+  }), [k, z] = V("root", {
+    ref: M,
+    className: x.root,
+    elementType: nt,
+    externalForwardedProps: j,
+    getSlotProps: R,
+    ownerState: E
+  }), [$, F] = V("backdrop", {
+    className: x.backdrop,
+    elementType: st,
+    externalForwardedProps: j,
+    getSlotProps: P,
+    ownerState: E
+  });
+  return !y && !T ? null : /* @__PURE__ */ l.jsx(et.Provider, {
+    value: p,
+    children: /* @__PURE__ */ l.jsx(We, {
+      ref: S,
+      container: n,
+      disablePortal: m,
+      children: /* @__PURE__ */ l.jsxs(k, v({}, z, {
+        children: [C ? null : /* @__PURE__ */ l.jsx($, v({}, F)), /* @__PURE__ */ l.jsx(ze, {
+          disableEnforceFocus: d,
+          disableAutoFocus: a,
+          disableRestoreFocus: f,
+          isEnabled: O,
+          open: T,
+          children: i.Children.only(s) && /* @__PURE__ */ i.cloneElement(s, v({}, s.props.tabIndex === void 0 && {
+            tabIndex: -1
+          }))
+        })]
+      }))
+    })
+  });
+}), lt = ["className", "children", "invertedColors", "orientation", "color", "component", "variant", "size", "layout", "maxWidth", "minWidth", "slots", "slotProps"], dt = (t) => {
+  const {
+    variant: e,
+    color: r,
+    size: o,
+    layout: s
+  } = t, n = {
+    root: ["root", e && `variant${L(e)}`, r && `color${L(r)}`, o && `size${L(o)}`, s && `layout${L(s)}`]
+  };
+  return te(n, qe, {});
+};
+function me(t, e) {
+  var r, o;
+  return e && (r = t.breakpoints) != null && r.values[e] ? `${(o = t.breakpoints) == null ? void 0 : o.values[e]}px` : e;
+}
+const ct = A(Me, {
+  name: "JoyModalDialog",
+  slot: "Root",
+  overridesResolver: (t, e) => e.root
+})(({
+  theme: t,
+  ownerState: e
+}) => v({
+  "--ModalDialog-minWidth": typeof e.minWidth == "number" ? `${e.minWidth}px` : me(t, e.minWidth),
+  "--ModalDialog-maxWidth": typeof e.maxWidth == "number" ? `${e.maxWidth}px` : me(t, e.maxWidth),
+  "--ModalClose-radius": "max((var(--Card-radius) - var(--variant-borderWidth, 0px)) - var(--ModalClose-inset), min(var(--ModalClose-inset) / 2, (var(--Card-radius) - var(--variant-borderWidth, 0px)) / 2))"
+}, e.variant === "solid" && {
+  "--DialogContent-color": "currentColor"
+}, e.size === "sm" && {
+  "--Card-padding": "1rem",
+  "--ModalDialog-titleOffset": t.spacing(0.25),
+  "--ModalDialog-descriptionOffset": t.spacing(0.25),
+  "--ModalClose-inset": "0.375rem"
+}, e.size === "md" && {
+  "--Card-padding": "1.25rem",
+  "--ModalDialog-titleOffset": t.spacing(0.25),
+  "--ModalDialog-descriptionOffset": t.spacing(0.75),
+  "--ModalClose-inset": "0.5rem"
+}, e.size === "lg" && {
+  "--Card-padding": "1.5rem",
+  "--ModalDialog-titleOffset": t.spacing(0.5),
+  "--ModalDialog-descriptionOffset": t.spacing(1),
+  "--ModalClose-inset": "0.625rem"
+}, {
+  boxSizing: "border-box",
+  boxShadow: t.shadow.md,
+  minWidth: "min(calc(100vw - 2 * var(--Card-padding)), var(--ModalDialog-minWidth, 300px))",
+  outline: 0,
+  position: "absolute"
+}, e.layout === "fullscreen" && {
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  border: 0,
+  borderRadius: 0
+}, e.layout === "center" && {
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  maxWidth: "min(calc(100vw - 2 * var(--Card-padding)), var(--ModalDialog-maxWidth, 100vw))",
+  maxHeight: "calc(100% - 2 * var(--Card-padding))"
+}, {
+  [`& [id="${e["aria-labelledby"]}"]`]: {
+    "--Typography-margin": "calc(-1 * var(--ModalDialog-titleOffset)) 0 var(--ModalDialog-gap) 0",
+    "--Typography-fontSize": "1.125em",
+    [`& + [id="${e["aria-describedby"]}"]`]: {
+      "--unstable_ModalDialog-descriptionOffset": "calc(-1 * var(--ModalDialog-descriptionOffset))"
+    }
+  },
+  [`& [id="${e["aria-describedby"]}"]`]: {
+    "--Typography-fontSize": "1em",
+    "--Typography-margin": "var(--unstable_ModalDialog-descriptionOffset, var(--ModalDialog-gap)) 0 0 0",
+    "&:not(:last-child)": {
+      // create spacing between description and the next element.
+      "--Typography-margin": "var(--unstable_ModalDialog-descriptionOffset, var(--ModalDialog-gap)) 0 var(--ModalDialog-gap) 0"
+    }
+  }
+})), ut = /* @__PURE__ */ i.forwardRef(function(e, r) {
+  const o = Z({
+    props: e,
+    name: "JoyModalDialog"
+  }), {
+    className: s,
+    children: n,
+    invertedColors: a = !1,
+    orientation: d = "vertical",
+    color: c = "neutral",
+    component: m = "div",
+    variant: f = "outlined",
+    size: h = "md",
+    layout: C = "center",
+    maxWidth: y,
+    minWidth: p,
+    slots: T = {},
+    slotProps: I = {}
+  } = o, D = ee(o, lt), w = v({}, o, {
+    color: c,
+    component: m,
+    maxWidth: y,
+    minWidth: p,
+    layout: C,
+    size: h,
+    variant: f,
+    invertedColors: a
+  }), u = dt(w), E = v({}, D, {
+    component: m,
+    slots: T,
+    slotProps: I
+  }), R = ae(), P = ae(), M = i.useMemo(() => ({
+    variant: f,
+    color: c,
+    labelledBy: R,
+    describedBy: P
+  }), [c, f, R, P]), [S, O] = V("root", {
+    ref: r,
+    className: ge(u.root, s),
+    elementType: ct,
+    externalForwardedProps: E,
+    ownerState: w,
+    additionalProps: {
+      as: m,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": R,
+      "aria-describedby": P
+    }
+  });
+  return /* @__PURE__ */ l.jsx(Xe.Provider, {
+    value: h,
+    children: /* @__PURE__ */ l.jsx(Qe.Provider, {
+      value: M,
+      children: /* @__PURE__ */ l.jsx(S, v({}, O, {
+        children: i.Children.map(n, (x, j) => {
+          if (!/* @__PURE__ */ i.isValidElement(x))
+            return x;
+          const k = {};
+          if (Re(x, ["Divider"])) {
+            var z, $;
+            const F = x.props;
+            k.inset = (z = F == null ? void 0 : F.inset) != null ? z : "context";
+            const b = d === "vertical" ? "horizontal" : "vertical";
+            k.orientation = ($ = F == null ? void 0 : F.orientation) != null ? $ : b;
+          }
+          return j === 0 && (k["data-first-child"] = ""), j === i.Children.count(n) - 1 && (k["data-last-child"] = ""), /* @__PURE__ */ i.cloneElement(x, k);
+        })
+      }))
+    })
+  });
+}), pt = K(/* @__PURE__ */ l.jsx("path", {
+  d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z"
+}), "Info"), St = {
+  LOADING: "loading",
+  TUTORIAL: "tutorial",
+  PLAYING: "playing",
+  RESULTS: "results"
+}, ft = K(/* @__PURE__ */ l.jsx("path", {
+  d: "m12 21.35-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54z"
+}), "Favorite"), mt = J`
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+`, kt = {
+  pointsAdded: {
+    position: "absolute",
+    top: -20,
+    right: 0,
+    color: "primary.500",
+    animation: `${mt} 1s ease-out forwards`
+  },
+  optionWrapper: {
+    position: "relative",
+    flex: 1,
+    transition: "transform 0.2s"
+  },
+  dividerWrapper: {
+    width: { xs: "100%", sm: "40px" },
+    my: { xs: 2, sm: 0 }
+  },
+  dividerButton: {
+    borderRadius: "50%",
+    bgcolor: "background.surface",
+    boxShadow: "sm",
+    width: "30px",
+    height: "30px",
+    "&:hover": { bgcolor: "background.level1" }
+  },
+  dividerText: {
+    fontWeight: "lg",
+    color: "text.secondary",
+    display: { xs: "none", sm: "block" },
+    textTransform: "uppercase",
+    fontSize: "0.675em !important"
+  },
+  timerProgressWrapper: {
+    position: "relative",
+    width: "100%",
+    height: 8,
+    bgcolor: "neutral.200",
+    borderRadius: "4px",
+    overflow: "hidden"
+  },
+  timerProgress: {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    height: "100%",
+    transition: "width 1s linear, background-color 0.3s ease",
+    borderRadius: "inherit",
+    transform: "translateZ(0)"
+  }
+}, It = (t, e) => ({
+  flex: 1,
+  mx: 0.5,
+  height: 4,
+  bgcolor: e < t ? "primary.500" : "primary.softBg",
+  borderRadius: "2px",
+  transition: "background-color 0.3s ease"
+}), G = {
+  fadeInUp: J`
+      from {
+        opacity: 0;
+        transform: translateY(20px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    `,
+  pulse: J`
+      0% {
+        transform: scale(1);
+      }
+      50% {
+        transform: scale(1.02);
+      }
+      100% {
+        transform: scale(1);
+      }
+    `
+}, wt = {
+  wrapper: {
+    animation: `${G.fadeInUp} 0.6s ease-out`
+  },
+  mainCard: {
+    mb: 3,
+    minHeight: "300px",
+    position: "relative",
+    overflow: "hidden",
+    background: (t) => `linear-gradient(135deg, ${t.vars.palette.background.level2} 0%, ${t.vars.palette.background.surface} 100%)`
+  },
+  fieldPattern: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    opacity: 0.1,
+    pointerEvents: "none",
+    background: (t) => `
+        linear-gradient(to right, ${t.vars.palette.neutral[400]} 1px, transparent 1px) 0 0 / 50px 100%,
+        linear-gradient(${t.vars.palette.neutral[400]} 1px, transparent 1px) 0 0 / 100% 50px
+      `
+  },
+  mainContent: {
+    height: "100%",
+    position: "relative",
+    zIndex: 1,
+    p: 2
+  },
+  scoreSection: {
+    color: "primary.500"
+  },
+  scoreValue: {
+    fontSize: "4.5em",
+    fontWeight: "bold",
+    color: "primary.500",
+    animation: `${G.pulse} 2s infinite`,
+    textShadow: "0 2px 4px rgba(0,0,0,0.1)"
+  },
+  statsSection: {
+    width: "100%",
+    direction: { xs: "column", sm: "row" }
+  },
+  statsCard: {
+    p: 2,
+    borderRadius: "lg",
+    minWidth: "200px",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: 1
+  },
+  leaderboardCard: {
+    mb: 3,
+    background: "background.surface",
+    borderColor: "divider",
+    "&:hover": { borderColor: "divider" }
+  },
+  rankNumber: {
+    width: 20,
+    textAlign: "center"
+  },
+  actionButton: {
+    transition: "all 0.2s",
+    "&:hover": {
+      transform: "translateY(-2px)"
+    },
+    animation: `${G.fadeInUp} 0.6s ease-out 0.3s backwards`
+  },
+  getLeaderboardItemStyles: {
+    bgcolor: "transparent",
+    borderRadius: "sm",
+    transition: "all 0.2s",
+    "&:hover": {
+      bgcolor: (t) => `${t.vars.palette.primary[500]}10`
+    }
+  }
+}, Pt = (t) => ({
+  fontWeight: "bold",
+  color: (e) => t ? e.vars.palette.primary[500] : "inherit"
+}), jt = (t) => (e) => t === 0 ? e.vars.palette.warning[400] : t === 1 ? e.vars.palette.neutral[400] : e.vars.palette.warning[700], he = {
+  shadow: {
+    background: {
+      xs: "linear-gradient(to top, rgba(0,0,0,0.4), rgba(0,0,0,0) 120px), linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0) 180px)",
+      md: "linear-gradient(to top, rgba(0,0,0,0.4), rgba(0,0,0,0) 200px), linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0) 300px)"
+    }
+  },
+  contentWrapper: {
+    justifyContent: "flex-end",
+    pb: { xs: 3, sm: 4, md: 5 },
+    px: { xs: 2, md: 5 },
+    width: "100%"
+  }
+}, B = {
+  iconWrapper: {
+    mb: 2,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 48,
+    height: 48,
+    borderRadius: "50%",
+    bgcolor: "primary.100",
+    color: "primary.500"
+  },
+  ruleCard: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    p: 3,
+    mb: 2,
+    textAlign: "center",
+    backgroundColor: "background.level1"
+  },
+  mainButton: {
+    px: 10,
+    position: "relative",
+    transition: "transform 0.2s ease",
+    animation: "pulse 2s infinite",
+    "@keyframes pulse": {
+      "0%": {
+        boxShadow: "0 0 0 0 rgba(var(--joy-palette-primary-500), 0.4)",
+        transform: "scale(1)"
+      },
+      "70%": {
+        boxShadow: "0 0 0 10px rgba(var(--joy-palette-primary-500), 0)",
+        transform: "scale(1.02)"
+      },
+      "100%": {
+        boxShadow: "0 0 0 0 rgba(var(--joy-palette-primary-500), 0)",
+        transform: "scale(1)"
+      }
+    },
+    "&:hover": {
+      animation: "none",
+      transform: "scale(1.05)",
+      transition: "transform 0.2s ease"
+    }
+  },
+  infoButton: {
+    position: "absolute",
+    top: 8,
+    right: 8,
+    minWidth: 40,
+    p: 1
+  }
+}, Dt = {
+  wrapper: {
+    cursor: "pointer",
+    border: "none",
+    "&:hover": { border: "none" },
+    "&:focus": { border: "none" },
+    "&:active": { border: "none" }
+  },
+  card: {
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    borderRadius: "sm",
+    border: "none",
+    "--Card-padding": "0px"
+  },
+  image: {
+    width: "100%",
+    height: "100%",
+    objectFit: "cover"
+  },
+  overlay: {
+    transition: "background 0.3s ease"
+  },
+  iconWrapper: {
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 2
+  },
+  icon: {
+    fontSize: 64,
+    width: 64,
+    height: 64,
+    filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.4))"
+  },
+  content: {
+    justifyContent: "flex-end",
+    p: 2
+  },
+  label: {
+    color: "#fff",
+    textAlign: "center",
+    fontWeight: 700,
+    textShadow: "0 1px 2px rgba(0,0,0,0.4)"
+  }
+}, ht = K(/* @__PURE__ */ l.jsx("path", {
+  d: "M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94.63 1.5 1.98 2.63 3.61 2.96V19H7v2h10v-2h-4v-3.1c1.63-.33 2.98-1.46 3.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2M5 8V7h2v3.82C5.84 10.4 5 9.3 5 8m14 0c0 1.3-.84 2.4-2 2.82V7h2z"
+}), "EmojiEvents"), gt = K(/* @__PURE__ */ l.jsx("path", {
+  d: "M9 1h6v2H9zm10.03 6.39 1.42-1.42c-.43-.51-.9-.99-1.41-1.41l-1.42 1.42C16.07 4.74 14.12 4 12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9 9-4.03 9-9c0-2.12-.74-4.07-1.97-5.61M13 14h-2V8h2z"
+}), "Timer"), Ot = ({ onStart: t, game: e, signInCTA: r, showSignInCTA: o }) => {
+  var m;
+  const [s, n] = i.useState(!1), { t: a } = ve(), d = [
+    {
+      icon: /* @__PURE__ */ l.jsx(gt, {}),
+      title: a("eitherOr.tutorial.step1Title"),
+      description: a("eitherOr.tutorial.step1Description", { seconds: (e == null ? void 0 : e.time) ?? 10 })
+    },
+    {
+      icon: /* @__PURE__ */ l.jsx(ft, {}),
+      title: a("eitherOr.tutorial.step2Title", { lives: (e == null ? void 0 : e.lives) ?? 3 }),
+      description: a("eitherOr.tutorial.step2Description", { lives: (e == null ? void 0 : e.lives) ?? 3 })
+    },
+    {
+      icon: /* @__PURE__ */ l.jsx(ht, {}),
+      title: a("eitherOr.tutorial.step3Title"),
+      description: a("eitherOr.tutorial.step3Description")
+    }
+  ];
+  if (!e) return null;
+  const c = ((m = e == null ? void 0 : e.images) == null ? void 0 : m.main) || Ce;
+  return /* @__PURE__ */ l.jsxs(ie, { spacing: 3, children: [
+    /* @__PURE__ */ l.jsx(Ee, { ratio: 16 / 9, children: /* @__PURE__ */ l.jsxs(le, { sx: { borderColor: "divider", "&:hover": { borderColor: "divider" } }, children: [
+      /* @__PURE__ */ l.jsx(fe, { children: /* @__PURE__ */ l.jsx("img", { src: c, srcSet: `${c} 1x, ${c} 2x`, loading: "lazy", alt: e.title }) }),
+      /* @__PURE__ */ l.jsx(fe, { sx: he.shadow }),
+      /* @__PURE__ */ l.jsxs(Te, { sx: he.contentWrapper, children: [
+        /* @__PURE__ */ l.jsx(U, { size: "sm", variant: "soft", color: "primary", onClick: () => n(!0), sx: B.infoButton, children: /* @__PURE__ */ l.jsx(pt, {}) }),
+        /* @__PURE__ */ l.jsx(ie, { justifyContent: "center", alignItems: "center", spacing: 2, children: o && r ? /* @__PURE__ */ l.jsx(U, { size: "md", variant: "solid", color: "primary", onClick: r.onClick, sx: B.mainButton, children: r.defaultLabel }) : /* @__PURE__ */ l.jsx(U, { size: "md", variant: "solid", color: "primary", onClick: t, sx: B.mainButton, children: a("eitherOr.buttons.start") }) })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ l.jsx(it, { open: s, onClose: () => n(!1), children: /* @__PURE__ */ l.jsxs(ut, { children: [
+      /* @__PURE__ */ l.jsx(_, { level: "h4", sx: { mb: 3, textAlign: "center" }, children: a("eitherOr.tutorial.howToPlay") }),
+      /* @__PURE__ */ l.jsx(de, { container: !0, spacing: 2, sx: { overflow: "auto" }, children: d.map((f, h) => /* @__PURE__ */ l.jsx(de, { xs: 12, md: 4, children: /* @__PURE__ */ l.jsxs(le, { sx: B.ruleCard, variant: "outlined", children: [
+        /* @__PURE__ */ l.jsx(ye, { sx: B.iconWrapper, children: f.icon }),
+        /* @__PURE__ */ l.jsx(_, { level: "h4", sx: { mb: 1 }, children: f.title }),
+        /* @__PURE__ */ l.jsx(_, { level: "body-sm", children: f.description })
+      ] }) }, h)) }),
+      /* @__PURE__ */ l.jsx(U, { size: "lg", variant: "solid", color: "primary", onClick: () => n(!1), sx: { mt: 3, alignSelf: "center" }, children: a("common.close") })
+    ] }) })
+  ] });
+};
+export {
+  fe as C,
+  ft as F,
+  St as G,
+  pt as I,
+  it as M,
+  We as P,
+  Ot as T,
+  ut as a,
+  Qe as b,
+  Xe as c,
+  et as d,
+  Dt as e,
+  kt as f,
+  It as g,
+  wt as h,
+  jt as i,
+  Pt as j,
+  Tt as m
+};