fansunited-frontend-components 0.0.86 → 0.0.87

package/CompetitionStatistics.js

@@ -0,0 +1,2802 @@
+import { jsx as r, jsxs as y, Fragment as pe } from "react/jsx-runtime";
+import z, { useState as J, useEffect as le, useMemo as de, useRef as rt, useCallback as st } from "react";
+import { g as it, u as at, f as lt, n as dt, z as ct, a as ut, B as h, i as xe, m as pt, p as mt, o as ht, q as gt, r as ft, C as yt, s as xt, E as bt, t as wt, w as Ct } from "./chunks/PrizeCard-nRBh9VU_.js";
+import { S as St } from "./chunks/Spinner-wUVcNUtR.js";
+import { createPortal as It } from "react-dom";
+import { f as vt } from "./chunks/searchEntities-SJcoznz0.js";
+import { h as kt } from "./chunks/helpers-CqPvv3gw.js";
+import { p as Re, c as Tt, d as $t } from "./chunks/index-D-yn2UCo.js";
+import { B as _t } from "./chunks/DirectionScope-8YC2_4GO.js";
+import { T as Et } from "./chunks/Typography-DaXtC0md.js";
+import { c as Rt } from "./chunks/createLucideIcon-YBRjY5Kl.js";
+import { G as Mt } from "./chunks/GlobalStyles-Cu-OUtHY.js";
+/**
+ * @license lucide-react v0.454.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const At = Rt("Tv", [
+  ["rect", { width: "20", height: "15", x: "2", y: "7", rx: "2", ry: "2", key: "10ag99" }],
+  ["polyline", { points: "17 2 12 7 7 2", key: "11pgbg" }]
+]), Fe = "https://sports.fansunitedapi.com/v1", Be = (e) => {
+  try {
+    const t = e.helpers.getSDKConfiguration();
+    return !(t != null && t.apiKey) || !(t != null && t.clientId) ? null : { apiKey: t.apiKey, clientId: t.clientId };
+  } catch {
+    return null;
+  }
+}, je = (e) => {
+  const t = Be(e);
+  return t ? new URLSearchParams({ key: t.apiKey, client_id: t.clientId }) : null;
+}, Lt = async (e, t, o, s) => {
+  const i = je(e);
+  if (!i || !t) return null;
+  o && i.set("season_id", o);
+  const a = await fetch(
+    `${Fe}/competitions/${encodeURIComponent(t)}?${i.toString()}`,
+    { signal: s }
+  );
+  if (!a.ok) throw new Error(`Sports API responded ${a.status}`);
+  const d = await a.json(), l = (d == null ? void 0 : d.data) ?? d;
+  return l != null && l.id ? l : null;
+}, zt = async (e, t, o) => {
+  var i;
+  const s = je(e);
+  if (!s) return null;
+  s.set("disable_cache", String(Date.now()));
+  try {
+    const a = await fetch(
+      `${Fe}/events/${encodeURIComponent(t)}?${s.toString()}`,
+      { signal: o }
+    );
+    if (!a.ok) return null;
+    const d = await a.json(), l = (i = (d == null ? void 0 : d.data) ?? d) == null ? void 0 : i.event;
+    return l != null && l.id ? l : null;
+  } catch {
+    return null;
+  }
+}, Dt = async (e, t, o) => {
+  const s = /* @__PURE__ */ new Map(), i = Be(e);
+  return !i || t.length === 0 || (await vt(i, t, {
+    signal: o,
+    partial: !0
+  })).forEach((d) => s.set(d.id, d)), s;
+}, Pt = ["1_15", "16_30", "31_45", "46_60", "61_75", "76_90"], be = (e) => {
+  const t = /* @__PURE__ */ new Map();
+  return (e ?? []).forEach((o) => {
+    o.key && o.value != null && t.set(o.key.toLowerCase(), o.value);
+  }), t;
+}, Q = (e, t) => {
+  const o = e.get(t);
+  if (o == null || o === "") return null;
+  const s = Number(o);
+  return Number.isFinite(s) ? s : null;
+}, N = (e, t) => Q(e, t) ?? 0, Wt = [
+  [/POSTPON/, "postponed"],
+  [/CANCEL/, "cancelled"],
+  [/INTERRUPT|SUSPEND/, "interrupted"],
+  [/ABANDON/, "abandoned"]
+], He = (e) => {
+  var o;
+  const t = `${(e == null ? void 0 : e.type) ?? ""} ${(e == null ? void 0 : e.code) ?? ""} ${(e == null ? void 0 : e.sub_type) ?? ""}`.toUpperCase();
+  return ((o = Wt.find(([s]) => s.test(t))) == null ? void 0 : o[1]) ?? null;
+}, Ge = (e) => {
+  if (He(e)) return "CANCELLED";
+  const t = `${(e == null ? void 0 : e.type) ?? ""} ${(e == null ? void 0 : e.code) ?? ""}`.toUpperCase();
+  return /(FINISH|ENDED|CLOSED|AFTER_)/.test(t) ? "FINISHED" : /(LIVE|PROGRESS|INPLAY|IN_PLAY|HALF|PERIOD)/.test(t) ? "LIVE" : "UPCOMING";
+}, Ot = {
+  "1st_half": 0,
+  "2nd_half": 45,
+  extra_time: 90,
+  extra_time_1: 90,
+  extra_time_2: 105
+}, Nt = (e) => {
+  var i, a;
+  const t = (((i = e.status) == null ? void 0 : i.sub_type) ?? "").toLowerCase(), o = Ot[t], s = ((a = e.timing) == null ? void 0 : a.current_minute) ?? 0;
+  return o === void 0 || s <= 0 ? null : o + s;
+}, he = (e, t) => {
+  const o = (e.score ?? []).find((a) => a.key === t);
+  if (!o || o.competitor_one == null || o.competitor_two == null)
+    return null;
+  const s = Number(o.competitor_one), i = Number(o.competitor_two);
+  return Number.isFinite(s) && Number.isFinite(i) ? [s, i] : null;
+}, Me = (e) => {
+  const t = be(e == null ? void 0 : e.stats);
+  return {
+    id: (e == null ? void 0 : e.id) ?? "",
+    yellowCards: Q(t, "yellow_cards"),
+    redCards: Q(t, "red_cards"),
+    shotsOnTarget: Q(t, "shots_on_target"),
+    possession: Q(t, "ball_possession_percentage"),
+    corners: Q(t, "corners"),
+    goalsByPeriod: Pt.map((o) => N(t, `goals_${o}`))
+  };
+}, Ft = 3 * 24 * 60 * 60 * 1e3, Bt = (e, t) => {
+  const o = t.filter((a) => !!a.id).map((a) => {
+    const d = /* @__PURE__ */ new Set();
+    (a.groups ?? []).forEach(
+      (u) => (u.standings ?? []).forEach((g) => g.competitor_id && d.add(g.competitor_id))
+    );
+    const l = Date.parse(a.start_date ?? ""), c = Date.parse(a.end_date ?? "") + 24 * 60 * 60 * 1e3;
+    return { id: a.id, teams: d, from: l, to: c };
+  }), s = (a, d) => !Number.isFinite(a.from) || !Number.isFinite(a.to) ? 1 / 0 : d < a.from ? a.from - d : d > a.to ? d - a.to : 0, i = /* @__PURE__ */ new Map();
+  return e.forEach((a) => {
+    var b, m, I, x, $;
+    if ((b = a.round) != null && b.stage_id) {
+      i.set(a, a.round.stage_id);
+      return;
+    }
+    if (o.length <= 1) {
+      i.set(a, ((m = o[0]) == null ? void 0 : m.id) ?? null);
+      return;
+    }
+    const d = Date.parse(((I = a.timing) == null ? void 0 : I.start_time) ?? ""), l = ((x = a.competitor_one) == null ? void 0 : x.id) ?? "", c = (($ = a.competitor_two) == null ? void 0 : $.id) ?? "", u = (v) => s(v, d) <= Ft, g = o.filter((v) => v.teams.has(l) && v.teams.has(c) && u(v)).sort((v, E) => v.teams.size - E.teams.size)[0];
+    if (g) {
+      i.set(a, g.id);
+      return;
+    }
+    const f = (v) => [...v].sort((E, D) => s(E, d) - s(D, d))[0], w = f(o.filter((v) => v.teams.size === 0 || u(v))) ?? f(o);
+    i.set(a, (w == null ? void 0 : w.id) ?? null);
+  }), i;
+}, jt = (e, t, o) => {
+  var a, d;
+  const s = Ge(e.status), i = s === "FINISHED" || s === "LIVE";
+  return {
+    id: e.id ?? "",
+    status: s,
+    start: ((a = e.timing) == null ? void 0 : a.start_time) ?? "",
+    stageId: o,
+    round: t,
+    home: Me(e.competitor_one),
+    away: Me(e.competitor_two),
+    fullTime: i ? he(e, "result") ?? he(e, "full_time") ?? [0, 0] : null,
+    halfTime: i ? he(e, "half_time") : null,
+    liveMinute: s === "LIVE" ? Nt(e) : null,
+    notPlayedReason: He(e.status),
+    isHalfTime: s === "LIVE" && (((d = e.status) == null ? void 0 : d.sub_type) ?? "").toLowerCase() === "halftime"
+  };
+}, Ht = (e) => {
+  const t = /* @__PURE__ */ new Map();
+  e.forEach((s) => {
+    var l, c;
+    const i = ((l = s.round) == null ? void 0 : l.id) ?? "", a = ((c = s.timing) == null ? void 0 : c.start_time) ?? "", d = t.get(i);
+    (d === void 0 || a < d) && t.set(i, a);
+  });
+  const o = new Map(
+    Array.from(t.entries()).sort((s, i) => s[1].localeCompare(i[1])).map(([s], i) => [s, i + 1])
+  );
+  return new Map(
+    e.map((s) => {
+      var i, a;
+      return [
+        s,
+        ((i = s.round) == null ? void 0 : i.matchday) ?? o.get(((a = s.round) == null ? void 0 : a.id) ?? "") ?? 1
+      ];
+    })
+  );
+}, Ae = (e) => {
+  const t = be(e.statistics);
+  return {
+    teamId: e.team_id ?? "",
+    matchesPlayed: N(t, "matches_played"),
+    won: N(t, "won"),
+    draw: N(t, "draw"),
+    lost: N(t, "lost"),
+    homeWon: N(t, "home_won"),
+    awayWon: N(t, "away_won"),
+    goalsScored: N(t, "goals_scored"),
+    goalsAllowed: N(t, "goals_allowed"),
+    avgTotalGoals: Q(t, "avg_total_goals")
+  };
+}, Gt = (e) => {
+  const t = be(e.statistics);
+  return {
+    athleteId: e.athlete_id ?? "",
+    teamId: e.team_id ?? "",
+    goals: N(t, "goals"),
+    assists: N(t, "assists"),
+    minutes: N(t, "minutes"),
+    appearances: N(t, "appearances"),
+    yellowCards: N(t, "yellow_cards"),
+    redCards: N(t, "red_cards"),
+    cleanSheets: N(t, "clean_sheets")
+  };
+}, Ut = (e, t, o) => {
+  const s = e.season, i = ((s == null ? void 0 : s.events) ?? []).filter((m) => !!m.id).map((m) => {
+    const I = o.get(m.id);
+    if (!I) return m;
+    const x = ($, v) => $ && typeof $ == "object" ? $ : v;
+    return {
+      ...m,
+      ...I,
+      round: m.round ?? I.round,
+      competitor_one: x(I.competitor_one, m.competitor_one),
+      competitor_two: x(I.competitor_two, m.competitor_two)
+    };
+  }), a = (s == null ? void 0 : s.stages) ?? [], d = Bt(i, a), l = t ? i.filter((m) => d.get(m) === t) : i, c = Ht(l), u = new Set(l.map((m) => d.get(m))), g = a.filter((m) => !!m.id && u.has(m.id)).map((m) => ({
+    id: m.id,
+    nameId: m.stage_name_id || null,
+    order: m.order ?? 0
+  })).sort((m, I) => m.order - I.order), f = /* @__PURE__ */ new Map(), w = (s == null ? void 0 : s.team_stats) ?? [], b = t || null;
+  return w.filter((m) => (m.stage_id ?? null) === b).forEach((m) => m.team_id && f.set(m.team_id, Ae(m))), t && f.size === 0 && w.filter((m) => m.stage_id == null).forEach((m) => m.team_id && f.set(m.team_id, Ae(m))), {
+    id: e.id ?? "",
+    sport: e.sport ?? null,
+    season: {
+      id: (s == null ? void 0 : s.id) ?? null,
+      name: (s == null ? void 0 : s.name) ?? null,
+      startDate: (s == null ? void 0 : s.start_date) ?? null,
+      endDate: (s == null ? void 0 : s.end_date) ?? null
+    },
+    matches: l.map((m) => jt(m, c.get(m) ?? 1, d.get(m) ?? null)),
+    stages: g,
+    teamStats: f,
+    athletes: ((s == null ? void 0 : s.athlete_stats) ?? []).filter((m) => !!m.athlete_id && (m.statistics ?? []).length > 0).map(Gt)
+  };
+}, Kt = (e) => (e ?? "").split("-")[0].toUpperCase(), Vt = (e, t, o) => {
+  const s = Kt(t), i = (a, d) => {
+    var l, c, u;
+    return ((u = (c = (l = e.get(a)) == null ? void 0 : l.assets) == null ? void 0 : c.find((g) => g.key === d)) == null ? void 0 : u.value) ?? null;
+  };
+  return {
+    has: (a) => e.has(a),
+    name: (a) => {
+      var c, u;
+      const d = e.get(a);
+      return d && (((u = (c = d.translations) == null ? void 0 : c.find(
+        (g) => {
+          var f;
+          return ((f = g.language) == null ? void 0 : f.toUpperCase()) === s;
+        }
+      )) == null ? void 0 : u.name) || d.name) || o;
+    },
+    logo: (a) => i(a, "LOGO"),
+    photo: (a) => i(a, "HEADSHOT"),
+    position: (a) => {
+      var d;
+      return ((d = e.get(a)) == null ? void 0 : d.position) ?? null;
+    }
+  };
+}, Yt = 4 * 60 * 60 * 1e3, Xt = (e) => {
+  var o, s, i, a, d, l, c, u, g;
+  const t = new Set(((o = e.meta) == null ? void 0 : o.entity_ids) ?? []);
+  return e.id && t.add(e.id), (i = (s = e.season) == null ? void 0 : s.stages) == null || i.forEach((f) => f.stage_name_id && t.add(f.stage_name_id)), (d = (a = e.season) == null ? void 0 : a.events) == null || d.forEach((f) => {
+    var w, b;
+    (w = f.competitor_one) != null && w.id && t.add(f.competitor_one.id), (b = f.competitor_two) != null && b.id && t.add(f.competitor_two.id);
+  }), (c = (l = e.season) == null ? void 0 : l.team_stats) == null || c.forEach((f) => f.team_id && t.add(f.team_id)), (g = (u = e.season) == null ? void 0 : u.athlete_stats) == null || g.forEach((f) => {
+    f.athlete_id && t.add(f.athlete_id), f.team_id && t.add(f.team_id);
+  }), Array.from(t);
+}, qt = (e, t) => {
+  var i;
+  const o = Ge(e.status);
+  if (o === "LIVE") return !0;
+  if (o !== "UPCOMING") return !1;
+  const s = Date.parse(((i = e.timing) == null ? void 0 : i.start_time) ?? "");
+  return Number.isFinite(s) && s <= t && t - s < Yt;
+}, Jt = (e, t, o, s, i) => {
+  const { seasonId: a, stageId: d, liveRefresh: l, refreshInterval: c } = i, [u, g] = J(null), [f, w] = J(
+    () => /* @__PURE__ */ new Map()
+  ), [b, m] = J(
+    () => /* @__PURE__ */ new Map()
+  ), [I, x] = J(!0), [$, v] = J(!1);
+  le(() => {
+    if (!e || !t) {
+      x(!1);
+      return;
+    }
+    const T = new AbortController();
+    return x(!0), v(!1), m(/* @__PURE__ */ new Map()), (async () => {
+      try {
+        const R = await Lt(
+          e,
+          t,
+          a,
+          T.signal
+        );
+        if (T.signal.aborted) return;
+        const O = R ? await Dt(
+          e,
+          Xt(R),
+          T.signal
+        ) : /* @__PURE__ */ new Map();
+        if (T.signal.aborted) return;
+        g(R), w(O);
+      } catch (R) {
+        if (T.signal.aborted || (R == null ? void 0 : R.name) === "AbortError")
+          return;
+        g(null), v(!0);
+      } finally {
+        T.signal.aborted || x(!1);
+      }
+    })(), () => T.abort();
+  }, [e, t, a]);
+  const [E, D] = J(() => Date.now());
+  le(() => {
+    if (!u || !l) return;
+    const T = setInterval(() => D(Date.now()), 6e4);
+    return () => clearInterval(T);
+  }, [u, l]);
+  const M = de(() => {
+    var T;
+    return !u || !l || c <= 0 ? "" : (((T = u.season) == null ? void 0 : T.events) ?? []).map((R) => R.id ? b.get(R.id) ?? R : R).filter((R) => R.id && qt(R, E)).map((R) => R.id).join(",");
+  }, [u, b, l, c, E]);
+  le(() => {
+    if (!M) return;
+    const T = M.split(","), R = new AbortController(), H = setInterval(async () => {
+      const G = await Promise.all(
+        T.map((p) => zt(e, p, R.signal))
+      );
+      R.signal.aborted || m((p) => {
+        const _ = new Map(p);
+        return G.forEach((k) => (k == null ? void 0 : k.id) && _.set(k.id, k)), _;
+      });
+    }, c);
+    return () => {
+      R.abort(), clearInterval(H);
+    };
+  }, [e, M, c]);
+  const A = de(
+    () => u ? Ut(u, d, b) : null,
+    [u, d, b]
+  ), L = de(
+    () => Vt(f, o, s),
+    [f, o, s]
+  );
+  return { data: A, competitionId: (u == null ? void 0 : u.id) ?? t, entities: L, loading: I, error: $ };
+}, n = (e, t = 16) => `${Math.round(e / t * 1e4) / 1e4}em`, W = () => {
+  const e = it(), t = at(), o = lt(), s = dt() === "dark", i = (d, l) => `rgba(${kt(d)}, ${l})`, a = e.palette.primary.plainColor;
+  return {
+    fonts: t,
+    radius: o,
+    alpha: i,
+    colors: {
+      surface: e.surface,
+      onSurface: e.onSurface,
+      variant: e.surfaceVariant,
+      border: e.outlineEnabledBorder,
+      text: e.textPrimary,
+      body: e.textBody,
+      dim: i(e.textSecondary, 0.62),
+      primary: a,
+      primaryContainer: e.palette.primary.primaryContainer,
+      onPrimary: e.palette.primary.onPrimary,
+      success: e.palette.success.plainColor,
+      danger: e.palette.danger.plainColor,
+      tint: i(a, s ? 0.14 : 0.08),
+      tint2: i(a, s ? 0.26 : 0.16),
+      // Card colours are the real-world card colour, not a theme accent.
+      yellowCard: "#F5C400"
+    }
+  };
+}, we = (e) => e.status === "FINISHED" && !!e.fullTime, ce = (e) => e.fullTime ? e.fullTime[0] + e.fullTime[1] : 0, Le = (e, t, o) => e.filter(
+  (s) => (s.home.id === t || s.away.id === t) && s.start < o
+).sort((s, i) => i.start.localeCompare(s.start)).slice(0, 5).reverse().map((s) => {
+  const i = s.home.id === t, [a, d] = s.fullTime, l = i ? a : d, c = i ? d : a;
+  return { match: s, isHome: i, result: l > c ? "W" : l < c ? "L" : "D" };
+}), Qt = (e) => {
+  const t = /* @__PURE__ */ new Map();
+  return e.forEach((o) => {
+    const [s, i] = o.fullTime;
+    [
+      { side: o.home, conceded: i },
+      { side: o.away, conceded: s }
+    ].forEach(({ side: a, conceded: d }) => {
+      const l = t.get(a.id) ?? { cleanSheets: 0, yellowCards: 0, redCards: 0 };
+      d === 0 && (l.cleanSheets += 1), l.yellowCards += a.yellowCards ?? 0, l.redCards += a.redCards ?? 0, t.set(a.id, l);
+    });
+  }), t;
+}, Zt = (e, t) => e.find(
+  (o) => o.id !== t.id && (o.home.id === t.home.id && o.away.id === t.away.id || o.home.id === t.away.id && o.away.id === t.home.id)
+) ?? null, B = (e, t) => t ? Math.round(e / t * 100) : 0, eo = (e) => {
+  const t = e.filter(we), o = (c) => t.reduce((u, g) => u + c(g), 0), s = o(ce), i = t.filter((c) => c.fullTime[0] > c.fullTime[1]).length, a = t.filter((c) => c.fullTime[1] > c.fullTime[0]).length, d = o((c) => c.halfTime ? c.halfTime[0] + c.halfTime[1] : 0), l = [0, 1, 2, 3, 4, 5].map(
+    (c) => o((u) => (u.home.goalsByPeriod[c] ?? 0) + (u.away.goalsByPeriod[c] ?? 0))
+  );
+  return {
+    total: e.length,
+    played: t.length,
+    goals: s,
+    homeWins: i,
+    awayWins: a,
+    draws: t.length - i - a,
+    firstHalfGoals: d,
+    secondHalfGoals: s - d,
+    goalsByPeriod: l,
+    yellowCards: o((c) => (c.home.yellowCards ?? 0) + (c.away.yellowCards ?? 0)),
+    redCards: o((c) => (c.home.redCards ?? 0) + (c.away.redCards ?? 0)),
+    shotsOnTarget: o((c) => (c.home.shotsOnTarget ?? 0) + (c.away.shotsOnTarget ?? 0)),
+    corners: o((c) => (c.home.corners ?? 0) + (c.away.corners ?? 0)),
+    bothScored: t.filter((c) => c.fullTime[0] > 0 && c.fullTime[1] > 0).length,
+    goalless: t.filter((c) => ce(c) === 0).length,
+    over: (c) => t.filter((u) => ce(u) > c).length
+  };
+}, to = 10, Ue = {
+  scorers: (e) => e.goals,
+  assists: (e) => e.assists,
+  contributions: (e) => e.goals + e.assists,
+  cleanSheets: (e) => e.cleanSheets,
+  minutes: (e) => e.minutes,
+  cards: (e) => e.yellowCards + e.redCards
+}, ge = Object.keys(Ue), oo = (e, t) => {
+  const o = Ue[t];
+  return e.map((i) => ({ athlete: i, value: o(i) })).filter((i) => i.value > 0).sort(
+    (i, a) => a.value - i.value || (t === "cards" ? a.athlete.redCards - i.athlete.redCards : t === "minutes" ? 0 : i.athlete.minutes - a.athlete.minutes)
+  ).slice(0, to).map((i, a, d) => {
+    let l = a + 1;
+    for (; l > 1 && d[l - 2].value === i.value; ) l -= 1;
+    const c = a > 0 && d[a - 1].value === i.value || a < d.length - 1 && d[a + 1].value === i.value;
+    return { ...i, rank: c ? `${l}=` : `${l}` };
+  });
+}, U = (e, t, o = 1) => [...e].sort((s, i) => o * (t(i) - t(s)))[0], no = (e) => Array.from(e.values()), ro = (e) => {
+  const t = ct(e), o = /* @__PURE__ */ new Map();
+  return {
+    date: (s, i) => {
+      const a = new Date(s);
+      return Number.isNaN(a.getTime()) ? "" : a.toLocaleDateString(t, i);
+    },
+    time: (s) => {
+      const i = new Date(s);
+      return Number.isNaN(i.getTime()) ? "" : i.toLocaleTimeString(t, { hour: "2-digit", minute: "2-digit" });
+    },
+    decimal: (s, i) => {
+      let a = o.get(i);
+      return a || (a = new Intl.NumberFormat(t, {
+        minimumFractionDigits: i,
+        maximumFractionDigits: i
+      }), o.set(i, a)), a.format(Number.isFinite(s) ? s : 0);
+    }
+  };
+}, so = (e, t) => t ? e.replace(
+  /\{\{\s*(\w+)\s*\}\}/g,
+  (o, s) => s in t ? String(t[s]) : o
+) : e, io = (e) => {
+  const { t } = ut("common");
+  return de(
+    () => (o, s) => {
+      const i = e == null ? void 0 : e[o];
+      return typeof i == "string" && i.trim() ? so(i, s) : t(`competitionStatistics.${o}`, s ?? {});
+    },
+    [e, t]
+  );
+}, S = ({
+  size: e,
+  font: t = "primary",
+  weight: o,
+  color: s,
+  upper: i,
+  cms: a,
+  ellipsis: d,
+  parentSize: l = 16,
+  component: c = "span",
+  sx: u,
+  children: g
+}) => {
+  const { fonts: f } = W();
+  return /* @__PURE__ */ r(
+    h,
+    {
+      component: c,
+      sx: [
+        {
+          fontSize: n(e, l),
+          fontFamily: t === "primary" ? f.primary : f.secondary,
+          ...o ? { fontWeight: o } : {},
+          ...s ? { color: s } : {},
+          ...i ? { textTransform: "uppercase", letterSpacing: n(0.5, e) } : {},
+          ...a ? { unicodeBidi: "plaintext" } : {},
+          ...d ? { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" } : {}
+        },
+        ...Array.isArray(u) ? u : [u]
+      ],
+      children: g
+    }
+  );
+}, j = ({
+  url: e,
+  size: t,
+  sx: o
+}) => e ? /* @__PURE__ */ r(
+  h,
+  {
+    sx: [
+      {
+        width: n(t),
+        height: n(t),
+        flexShrink: 0,
+        backgroundImage: `url("${e}")`,
+        backgroundSize: "contain",
+        backgroundRepeat: "no-repeat",
+        backgroundPosition: "center"
+      },
+      ...Array.isArray(o) ? o : [o]
+    ]
+  }
+) : null, Z = ({ sx: e, ...t }) => {
+  const { colors: o, radius: s } = W();
+  return /* @__PURE__ */ r(
+    h,
+    {
+      ...t,
+      sx: [
+        {
+          backgroundColor: o.surface,
+          border: `1px solid ${o.border}`,
+          borderRadius: s.md
+        },
+        ...Array.isArray(e) ? e : [e]
+      ]
+    }
+  );
+}, Ke = ({ children: e }) => {
+  const { colors: t } = W();
+  return /* @__PURE__ */ r(S, { size: 13, weight: 700, upper: !0, color: t.text, sx: { padding: `0 ${n(2, 13)}` }, children: e });
+}, Y = ({
+  size: e = 11,
+  children: t,
+  sx: o
+}) => {
+  const { colors: s } = W();
+  return /* @__PURE__ */ r(S, { size: e, font: "secondary", weight: 700, upper: !0, color: s.dim, sx: o, children: t });
+}, Ve = z.createContext(null), ao = Ve.Provider, K = () => {
+  const e = z.useContext(Ve);
+  if (!e) throw new Error("useWidget must be used inside WidgetProvider");
+  return e;
+}, lo = () => {
+  var m;
+  const { colors: e, radius: t } = W(), { data: o, competitionId: s, entities: i, finished: a, label: d, fmt: l } = K(), c = a.length, u = o.matches.length, g = B(c, u), f = (m = o.matches.filter((I) => I.status === "UPCOMING" || I.status === "LIVE").sort((I, x) => I.round - x.round)[0]) == null ? void 0 : m.round, w = {
+    day: "numeric",
+    month: "short",
+    year: "numeric"
+  }, b = o.season.startDate && o.season.endDate ? `${l.date(o.season.startDate, w)} – ${l.date(o.season.endDate, w)}` : "";
+  return /* @__PURE__ */ y(
+    Z,
+    {
+      sx: {
+        padding: `${n(12)} ${n(16)}`,
+        display: "flex",
+        alignItems: "center",
+        gap: n(12),
+        flexWrap: "wrap"
+      },
+      children: [
+        /* @__PURE__ */ r(j, { url: i.logo(s), size: 40 }),
+        /* @__PURE__ */ y(h, { sx: { minWidth: 0, flex: `1 1 ${n(200)}` }, children: [
+          /* @__PURE__ */ y(h, { sx: { display: "flex", alignItems: "center", gap: n(8), flexWrap: "wrap" }, children: [
+            /* @__PURE__ */ r(S, { size: 17, weight: 700, color: e.text, cms: !0, children: i.name(s) }),
+            o.season.name ? /* @__PURE__ */ r(
+              S,
+              {
+                size: 10,
+                weight: 600,
+                color: e.primary,
+                sx: {
+                  backgroundColor: e.tint,
+                  borderRadius: t.full,
+                  padding: `${n(3, 10)} ${n(8, 10)}`
+                },
+                children: o.season.name
+              }
+            ) : null
+          ] }),
+          b ? /* @__PURE__ */ r(
+            S,
+            {
+              component: "div",
+              size: 11,
+              font: "secondary",
+              color: e.dim,
+              sx: { marginTop: n(2, 11) },
+              children: b
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ y(h, { sx: { flex: `1 1 ${n(220)}`, minWidth: 0 }, children: [
+          /* @__PURE__ */ y(
+            S,
+            {
+              component: "div",
+              size: 11,
+              font: "secondary",
+              color: e.dim,
+              sx: {
+                display: "flex",
+                justifyContent: "space-between",
+                marginBottom: n(5, 11)
+              },
+              children: [
+                /* @__PURE__ */ r("span", { children: f !== void 0 ? d("upcomingRound", { round: f }) : d("seasonFinished") }),
+                /* @__PURE__ */ y("span", { children: [
+                  /* @__PURE__ */ r(h, { component: "b", sx: { color: e.text }, children: c }),
+                  " ",
+                  d("seasonProgress", {
+                    matches: d("matchesCount", { count: u }),
+                    pct: g
+                  })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ r(
+            h,
+            {
+              sx: {
+                height: n(6),
+                borderRadius: t.full,
+                backgroundColor: e.variant,
+                overflow: "hidden"
+              },
+              children: /* @__PURE__ */ r(
+                h,
+                {
+                  sx: {
+                    height: "100%",
+                    width: `${g}%`,
+                    backgroundColor: e.primary,
+                    borderRadius: t.full
+                  }
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}, co = {
+  match: "matchId",
+  team: "competitorId",
+  player: "athleteId"
+}, ue = (e) => {
+  var t;
+  return !!(e != null && e.onClick || (t = e == null ? void 0 : e.url) != null && t.trim());
+}, ye = (e, t, o) => {
+  var d;
+  if (!ue(e)) return null;
+  const s = ((d = e == null ? void 0 : e.url) == null ? void 0 : d.trim()) ?? "", i = encodeURIComponent(o);
+  return {
+    href: s ? s.replace(
+      /\{(\w+)\}/g,
+      (l, c) => c === "id" || c === co[t] ? i : l
+    ) : null,
+    target: (e == null ? void 0 : e.target) ?? void 0,
+    onClick: e != null && e.onClick ? (l) => {
+      var c;
+      l.stopPropagation(), l.preventDefault(), (c = e.onClick) == null || c.call(e, o);
+    } : (l) => l.stopPropagation()
+  };
+}, oe = (e, t) => Math.round(e.minutes / t), X = (e, t) => t("matchesCount", { count: e.appearances }), ne = (e, t) => t("minutesCount", { count: e.minutes }), Ye = {
+  scorers: {
+    title: "scorers",
+    unit: "unitGoals",
+    secondary: (e, t, o) => [X(e, o), ne(e, o), o("goalEvery", { count: oe(e, t) })],
+    chips: (e, t, o) => [X(e, o), ne(e, o), o("goalRate", { count: oe(e, t) })]
+  },
+  assists: {
+    title: "assists",
+    unit: "unitAssists",
+    secondary: (e, t, o) => [X(e, o), ne(e, o), o("assistEvery", { count: oe(e, t) })],
+    chips: (e, t, o) => [X(e, o), ne(e, o), o("assistRate", { count: oe(e, t) })]
+  },
+  contributions: {
+    title: "contributions",
+    unit: "unitContributions",
+    secondary: (e, t, o) => [
+      o("goalsCount", { count: e.goals }),
+      o("assistsCount", { count: e.assists }),
+      o("contributionEvery", { count: oe(e, t) })
+    ],
+    chips: (e, t, o) => [
+      o("goalsShort", { count: e.goals }),
+      o("assistsShort", { count: e.assists }),
+      o("contributionRate", { count: oe(e, t) })
+    ]
+  },
+  cleanSheets: {
+    title: "cleanSheets",
+    unit: "unitMatches",
+    secondary: (e, t, o) => [X(e, o), ne(e, o)],
+    chips: (e, t, o) => [X(e, o), ne(e, o)]
+  },
+  minutes: {
+    title: "mostMinutes",
+    unit: "unitMinutes",
+    secondary: (e, t, o) => [
+      X(e, o),
+      o("minutesPerMatch", { count: e.appearances ? Math.round(t / e.appearances) : 0 })
+    ],
+    chips: (e, t, o) => [
+      X(e, o),
+      o("minutesPerMatch", { count: e.appearances ? Math.round(t / e.appearances) : 0 })
+    ]
+  },
+  cards: {
+    title: "mostCards",
+    unit: "unitCards",
+    secondary: (e, t, o) => [
+      o("yellowCount", { count: e.yellowCards }),
+      o("redCount", { count: e.redCards })
+    ],
+    chips: (e, t, o) => [
+      o("yellowCount", { count: e.yellowCards }),
+      o("redCount", { count: e.redCards })
+    ]
+  }
+}, uo = {
+  goalkeeper: "goalkeeper",
+  defender: "defender",
+  midfielder: "midfielder",
+  forward: "forward"
+}, ze = ({ photo: e, initial: t, size: o, badge: s, teamLogo: i, hero: a }) => {
+  const { colors: d } = W(), l = a ? 22 : 12;
+  return /* @__PURE__ */ y(
+    h,
+    {
+      sx: {
+        position: "relative",
+        flexShrink: 0,
+        ...a ? {} : { width: n(o), height: n(o) }
+      },
+      children: [
+        /* @__PURE__ */ r(
+          S,
+          {
+            component: "div",
+            size: l,
+            weight: 700,
+            color: d.dim,
+            sx: {
+              width: n(o, l),
+              height: n(o, l),
+              borderRadius: "50%",
+              backgroundColor: a ? d.surface : d.variant,
+              ...a ? { border: `2px solid ${d.primary}` } : {},
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              overflow: "hidden",
+              ...e ? {
+                backgroundImage: `url("${e}")`,
+                backgroundSize: "cover",
+                backgroundPosition: "top center"
+              } : {}
+            },
+            children: e ? null : t
+          }
+        ),
+        i ? /* @__PURE__ */ r(
+          h,
+          {
+            sx: {
+              position: "absolute",
+              right: n(-4),
+              bottom: n(a ? -2 : -3),
+              width: n(s),
+              height: n(s),
+              borderRadius: "50%",
+              backgroundColor: d.surface,
+              border: `1px solid ${d.border}`,
+              backgroundImage: `url("${i}")`,
+              backgroundSize: "70%",
+              backgroundRepeat: "no-repeat",
+              backgroundPosition: "center"
+            }
+          }
+        ) : null
+      ]
+    }
+  );
+}, po = ({ category: e }) => {
+  var $, v, E, D;
+  const { colors: t, radius: o, fonts: s } = W(), { data: i, entities: a, label: d, props: l } = K(), [c, u] = z.useState(!1), g = Ye[e], f = z.useMemo(() => oo(i.athletes, e), [i.athletes, e]), w = Math.min(10, Math.max(1, Math.round(l.playerRankingsRows ?? 5))), b = f.slice(0, c ? 10 : w), m = ue(l.playerCTA), I = (M) => {
+    const A = M.athlete.athleteId, L = a.name(A), T = uo[a.position(A) ?? ""];
+    return {
+      id: A,
+      name: L,
+      photo: a.photo(A),
+      initial: L.trim().charAt(0),
+      team: a.name(M.athlete.teamId),
+      teamLogo: a.logo(M.athlete.teamId),
+      position: T ? d(T) : "",
+      cta: ye(l.playerCTA, "player", A)
+    };
+  }, x = b[0] ? I(b[0]) : null;
+  return /* @__PURE__ */ y(
+    h,
+    {
+      sx: {
+        backgroundColor: t.surface,
+        border: `1px solid ${t.border}`,
+        borderRadius: o.md,
+        overflow: "hidden",
+        display: "flex",
+        flexDirection: "column"
+      },
+      children: [
+        /* @__PURE__ */ r(
+          S,
+          {
+            component: "div",
+            size: 11,
+            font: "secondary",
+            weight: 700,
+            upper: !0,
+            color: t.dim,
+            sx: { padding: `${n(10, 11)} ${n(14, 11)} 0` },
+            children: d(g.title)
+          }
+        ),
+        x && b[0] ? /* @__PURE__ */ y(
+          h,
+          {
+            component: ($ = x.cta) != null && $.href ? "a" : "div",
+            href: ((v = x.cta) == null ? void 0 : v.href) ?? void 0,
+            target: (E = x.cta) == null ? void 0 : E.target,
+            onClick: (D = x.cta) == null ? void 0 : D.onClick,
+            sx: {
+              margin: n(10),
+              padding: n(12),
+              borderRadius: `calc(${o.md} - 2px)`,
+              background: `linear-gradient(135deg, ${t.tint2}, ${t.tint})`,
+              display: "flex",
+              alignItems: "center",
+              gap: n(12),
+              cursor: m ? "pointer" : "default",
+              textDecoration: "none",
+              color: "inherit"
+            },
+            children: [
+              /* @__PURE__ */ r(
+                ze,
+                {
+                  photo: x.photo,
+                  initial: x.initial,
+                  size: 60,
+                  badge: 24,
+                  teamLogo: x.teamLogo,
+                  hero: !0
+                }
+              ),
+              /* @__PURE__ */ y(h, { sx: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ r(S, { component: "div", size: 15, weight: 700, color: t.text, ellipsis: !0, cms: !0, children: x.name }),
+                /* @__PURE__ */ r(
+                  S,
+                  {
+                    component: "div",
+                    size: 11,
+                    font: "secondary",
+                    color: t.dim,
+                    ellipsis: !0,
+                    cms: !0,
+                    sx: { marginTop: n(2, 11) },
+                    children: [x.team, x.position].filter(Boolean).join(" · ")
+                  }
+                ),
+                /* @__PURE__ */ r(h, { sx: { display: "flex", gap: n(4), flexWrap: "wrap", marginTop: n(6) }, children: g.chips(b[0].athlete, b[0].value, d).map((M) => /* @__PURE__ */ r(
+                  S,
+                  {
+                    size: 10,
+                    font: "secondary",
+                    weight: 600,
+                    color: t.body,
+                    sx: {
+                      backgroundColor: t.surface,
+                      borderRadius: o.full,
+                      padding: `${n(2, 10)} ${n(7, 10)}`
+                    },
+                    children: M
+                  },
+                  M
+                )) })
+              ] }),
+              /* @__PURE__ */ y(h, { sx: { textAlign: "right", flexShrink: 0 }, children: [
+                /* @__PURE__ */ r(S, { component: "div", size: 32, weight: 700, color: t.primary, sx: { lineHeight: 1 }, children: b[0].value }),
+                /* @__PURE__ */ r(
+                  S,
+                  {
+                    component: "div",
+                    size: 10,
+                    font: "secondary",
+                    upper: !0,
+                    color: t.dim,
+                    sx: { marginTop: n(3, 10) },
+                    children: d(g.unit)
+                  }
+                )
+              ] })
+            ]
+          }
+        ) : null,
+        b.slice(1).map((M) => {
+          var L, T, R, O;
+          const A = I(M);
+          return /* @__PURE__ */ y(
+            h,
+            {
+              component: (L = A.cta) != null && L.href ? "a" : "div",
+              href: ((T = A.cta) == null ? void 0 : T.href) ?? void 0,
+              target: (R = A.cta) == null ? void 0 : R.target,
+              onClick: (O = A.cta) == null ? void 0 : O.onClick,
+              sx: {
+                display: "grid",
+                gridTemplateColumns: `${n(28)} ${n(32)} minmax(0,1fr) auto`,
+                alignItems: "center",
+                gap: n(10),
+                padding: `${n(8)} ${n(14)}`,
+                borderTop: `1px solid ${t.border}`,
+                cursor: m ? "pointer" : "default",
+                textDecoration: "none",
+                color: "inherit",
+                "&:hover": { backgroundColor: m ? t.onSurface : "transparent" }
+              },
+              children: [
+                /* @__PURE__ */ r(S, { size: 12, font: "secondary", weight: 700, color: t.dim, children: M.rank }),
+                /* @__PURE__ */ r(ze, { photo: A.photo, initial: A.initial, size: 32, badge: 16, teamLogo: A.teamLogo }),
+                /* @__PURE__ */ y(h, { sx: { minWidth: 0 }, children: [
+                  /* @__PURE__ */ r(S, { component: "div", size: 13, weight: 600, color: t.text, ellipsis: !0, cms: !0, children: A.name }),
+                  /* @__PURE__ */ r(S, { component: "div", size: 11, font: "secondary", color: t.dim, ellipsis: !0, children: g.secondary(M.athlete, M.value, d).join(" · ") })
+                ] }),
+                /* @__PURE__ */ r(S, { size: 16, weight: 700, color: t.primary, children: M.value })
+              ]
+            },
+            A.id
+          );
+        }),
+        f.length > w ? /* @__PURE__ */ r(
+          h,
+          {
+            component: "button",
+            type: "button",
+            onClick: () => u(!c),
+            sx: {
+              border: "none",
+              borderTop: `1px solid ${t.border}`,
+              background: "transparent",
+              cursor: "pointer",
+              padding: n(9, 12),
+              fontFamily: s.secondary,
+              fontSize: n(12),
+              fontWeight: 700,
+              color: t.primary
+            },
+            children: c ? d("showLess") : d("showAll", { count: f.length })
+          }
+        ) : null
+      ]
+    }
+  );
+}, mo = () => {
+  const { colors: e, radius: t, fonts: o } = W(), { label: s, props: i } = K(), a = xe(), [d, l] = z.useState(0), c = i.playerRankingsLayout ?? "auto", u = c === "tabs" || c === "auto" && a, g = u ? [ge[d]] : ge;
+  return /* @__PURE__ */ y(h, { sx: { display: "flex", flexDirection: "column", gap: n(10) }, children: [
+    /* @__PURE__ */ r(Ke, { children: s("leadersTitle") }),
+    u ? /* @__PURE__ */ r(
+      h,
+      {
+        sx: {
+          display: "flex",
+          gap: n(4),
+          overflowX: "auto",
+          padding: n(3),
+          backgroundColor: e.surface,
+          border: `1px solid ${e.border}`,
+          borderRadius: t.full
+        },
+        children: ge.map((f, w) => {
+          const b = w === d;
+          return /* @__PURE__ */ r(
+            h,
+            {
+              component: "button",
+              type: "button",
+              onClick: () => l(w),
+              sx: {
+                flex: "1 0 auto",
+                whiteSpace: "nowrap",
+                border: "none",
+                cursor: "pointer",
+                borderRadius: t.full,
+                padding: `${n(6, 12)} ${n(12, 12)}`,
+                fontFamily: o.primary,
+                fontSize: n(12),
+                fontWeight: 700,
+                backgroundColor: b ? e.primary : "transparent",
+                color: b ? e.onPrimary : e.dim
+              },
+              children: s(Ye[f].title)
+            },
+            f
+          );
+        })
+      }
+    ) : null,
+    /* @__PURE__ */ r(
+      h,
+      {
+        sx: {
+          display: "grid",
+          gridTemplateColumns: u ? "1fr" : `repeat(auto-fit,minmax(${n(300)},1fr))`,
+          gap: n(12)
+        },
+        children: g.map((f) => /* @__PURE__ */ r(po, { category: f }, f))
+      }
+    )
+  ] });
+}, ho = 3e4, re = {
+  threeWay: { code: "FT_1X2", outcomes: ["1", "X", "2"] },
+  twoWay: { code: "WINNER_OT", outcomes: ["1", "2"] }
+}, go = /* @__PURE__ */ new Set(["FOOTBALL", "HOCKEY", "ICE_HOCKEY"]), fo = (e) => go.has((e ?? "").toUpperCase()) ? [re.threeWay, re.twoWay] : [re.twoWay, re.threeWay], yo = (e, t) => {
+  const o = (e || t || "").trim().toUpperCase();
+  return o === "1" || o === "HOME" || o === "HOME_TEAM" ? "1" : o === "X" || o === "DRAW" ? "X" : o === "2" || o === "AWAY" || o === "AWAY_TEAM" ? "2" : null;
+}, De = (e) => {
+  if (!Array.isArray(e)) return null;
+  const t = e.find((o) => typeof (o == null ? void 0 : o.url) == "string" && o.url);
+  return t ? t.url : null;
+}, xo = (e, t, o, s, i) => {
+  var a, d;
+  for (const l of t) {
+    if (`${(l == null ? void 0 : l.type) ?? "PRE_EVENT"}`.toUpperCase() === "LIVE" !== i) continue;
+    const u = o.map((x) => ({
+      candidate: x,
+      market: (l.markets ?? []).find(
+        ($) => {
+          var v, E;
+          return (((v = $ == null ? void 0 : $.type) == null ? void 0 : v.code) || ((E = $ == null ? void 0 : $.type) == null ? void 0 : E.id) || "").toUpperCase() === x.code;
+        }
+      )
+    })).find((x) => !!x.market);
+    if (!(u != null && u.market)) continue;
+    const { candidate: g, market: f } = u, w = [];
+    if ((f.selections ?? []).forEach((x) => {
+      const $ = yo(x == null ? void 0 : x.code, x == null ? void 0 : x.name);
+      if (!$) return;
+      const v = Number(x == null ? void 0 : x.odds);
+      if (!Number.isFinite(v) || v <= 0 || w.some((A) => A.label === $)) return;
+      const E = s == null ? void 0 : s.get($), D = ((x == null ? void 0 : x.movement) ?? "").toUpperCase(), M = D === "UP" || D === "DOWN" ? D.toLowerCase() : E === void 0 || E === v ? "none" : v > E ? "up" : "down";
+      w.push({ label: $, value: v.toFixed(2), odd: v, change: M, url: De(x == null ? void 0 : x.urls) });
+    }), !g.outcomes.every((x) => w.some(($) => $.label === x))) continue;
+    const b = g.outcomes;
+    w.sort((x, $) => b.indexOf(x.label) - b.indexOf($.label));
+    const m = l.bookmaker, I = ((m == null ? void 0 : m.assets) ?? [])[0];
+    return {
+      matchId: e,
+      market: g.code,
+      operator: m ? {
+        name: m.name ?? "",
+        logo: (I == null ? void 0 : I.transparentBackgroundUrl) || (I == null ? void 0 : I.logo) || null,
+        url: De(m.eventUrls) ?? m.url ?? null,
+        backgroundColor: ((a = m.branding) == null ? void 0 : a.backgroundColor) ?? (I == null ? void 0 : I.backgroundColor) ?? null,
+        textColor: ((d = m.branding) == null ? void 0 : d.textColor) ?? null
+      } : null,
+      values: w
+    };
+  }
+  return null;
+}, bo = (e, t, o) => {
+  const {
+    enabled: s,
+    liveMatchIds: i = [],
+    sport: a,
+    pollingIntervalMs: d = ho,
+    operators: l,
+    affiliateId: c,
+    affiliateIds: u
+  } = o, [g, f] = J(() => /* @__PURE__ */ new Map()), w = rt(/* @__PURE__ */ new Map()), b = [...t].sort().join(","), m = [...i].sort().join(","), I = (l ?? []).join(","), x = `${c ?? ""}|${JSON.stringify(u ?? {})}`, $ = st(async () => {
+    const v = b ? b.split(",") : [], E = new Set(m ? m.split(",") : []);
+    if (!e || v.length === 0) {
+      f(/* @__PURE__ */ new Map());
+      return;
+    }
+    try {
+      const D = fo(a), M = {
+        oddType: E.size ? Re.ALL : Re.PRE_EVENT,
+        scopeType: Tt.ORDINARY_TIME,
+        oddFormat: $t.DECIMAL,
+        marketTypes: D.map((T) => T.code),
+        ...l && l.length ? { operators: l } : {},
+        ...c ? { affiliateId: c } : {},
+        ...u && Object.keys(u).length ? { affiliateIds: u } : {}
+      }, A = await e.odds.getByMatchIds(v, M), L = /* @__PURE__ */ new Map();
+      v.forEach((T) => {
+        const R = xo(
+          T,
+          (A == null ? void 0 : A.get(T)) ?? [],
+          D,
+          w.current.get(T),
+          E.has(T)
+        );
+        R && (L.set(T, R), w.current.set(T, new Map(R.values.map((O) => [O.label, O.odd]))));
+      }), f(L);
+    } catch {
+      f(/* @__PURE__ */ new Map());
+    }
+  }, [e, b, m, a, I, x]);
+  return le(() => {
+    if (!s || !b) {
+      f(/* @__PURE__ */ new Map());
+      return;
+    }
+    let v = !1;
+    const E = () => {
+      v || $();
+    };
+    if (E(), d <= 0) return () => {
+      v = !0;
+    };
+    const D = setInterval(E, d);
+    return () => {
+      v = !0, clearInterval(D);
+    };
+  }, [s, b, d, $]), g;
+}, F = ({ label: e, home: t, away: o, percent: s, format: i }) => {
+  const { colors: a, radius: d } = W(), l = t ?? 0, c = o ?? 0, u = l + c || 1, g = s ? Math.round(l) : l, f = s ? Math.round(c) : c, w = (b) => b == null ? "–" : s ? `${Math.round(b)}%` : i ? i(b) : String(b);
+  return /* @__PURE__ */ y(
+    h,
+    {
+      sx: {
+        display: "grid",
+        gridTemplateColumns: `${n(44)} 1fr ${n(44)}`,
+        alignItems: "center",
+        gap: n(12)
+      },
+      children: [
+        /* @__PURE__ */ r(
+          S,
+          {
+            size: 14,
+            weight: 700,
+            font: "secondary",
+            color: g > f ? a.text : a.dim,
+            sx: { textAlign: "right" },
+            children: w(t)
+          }
+        ),
+        /* @__PURE__ */ y(h, { sx: { display: "flex", flexDirection: "column", gap: n(4) }, children: [
+          /* @__PURE__ */ r(S, { size: 10, font: "secondary", upper: !0, color: a.dim, sx: { textAlign: "center" }, children: e }),
+          /* @__PURE__ */ y(h, { sx: { display: "flex", gap: n(2), height: n(6) }, children: [
+            /* @__PURE__ */ r(
+              h,
+              {
+                sx: {
+                  flex: 1,
+                  display: "flex",
+                  justifyContent: "flex-end",
+                  backgroundColor: a.variant,
+                  borderRadius: `${d.full} 0 0 ${d.full}`,
+                  overflow: "hidden"
+                },
+                children: /* @__PURE__ */ r(h, { sx: { width: `${B(l, u)}%`, backgroundColor: a.primary } })
+              }
+            ),
+            /* @__PURE__ */ r(
+              h,
+              {
+                sx: {
+                  flex: 1,
+                  backgroundColor: a.variant,
+                  borderRadius: `0 ${d.full} ${d.full} 0`,
+                  overflow: "hidden"
+                },
+                children: /* @__PURE__ */ r(
+                  h,
+                  {
+                    sx: {
+                      width: `${B(c, u)}%`,
+                      height: "100%",
+                      backgroundColor: a.primaryContainer
+                    }
+                  }
+                )
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ r(S, { size: 14, weight: 700, font: "secondary", color: f > g ? a.text : a.dim, children: w(o) })
+      ]
+    }
+  );
+}, wo = [0, 15, 30, 45, 60, 75, 90], Co = 5.5, So = ({
+  x: e,
+  top: t,
+  logo: o,
+  color: s
+}) => {
+  const { colors: i } = W();
+  return /* @__PURE__ */ r(
+    h,
+    {
+      sx: {
+        position: "absolute",
+        left: `${e}%`,
+        top: t ? "22%" : "78%",
+        transform: "translate(-50%,-50%)",
+        display: "flex"
+      },
+      children: /* @__PURE__ */ y(
+        h,
+        {
+          sx: {
+            position: "relative",
+            width: n(26),
+            height: n(26),
+            borderRadius: "50%",
+            backgroundColor: i.surface,
+            border: `2px solid ${s}`,
+            boxShadow: "0 1px 3px rgba(0,0,0,.18)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          },
+          children: [
+            o ? /* @__PURE__ */ r(
+              h,
+              {
+                component: "img",
+                src: o,
+                alt: "",
+                sx: { width: n(18), height: n(18), objectFit: "contain", display: "block" }
+              }
+            ) : null,
+            /* @__PURE__ */ r(
+              h,
+              {
+                sx: {
+                  position: "absolute",
+                  right: n(-6),
+                  bottom: n(-6),
+                  width: n(14),
+                  height: n(14),
+                  borderRadius: "50%",
+                  backgroundColor: i.surface,
+                  border: `1px solid ${i.border}`,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  color: i.text
+                },
+                children: /* @__PURE__ */ y(
+                  "svg",
+                  {
+                    width: "0.5625em",
+                    height: "0.5625em",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2.4",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: [
+                      /* @__PURE__ */ r("circle", { cx: "12", cy: "12", r: "10" }),
+                      /* @__PURE__ */ r("path", { d: "m12 7 4.5 3.3-1.7 5.4H9.2L7.5 10.3z" })
+                    ]
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}, Io = ({ match: e }) => {
+  const { colors: t } = W(), { entities: o, label: s } = K(), i = o.logo(e.home.id), a = o.logo(e.away.id), [d, l] = e.fullTime ?? [0, 0], c = [];
+  return e.home.goalsByPeriod.forEach((u, g) => {
+    const f = (m, I) => (g * 15 + 7.5 + (I - (m - 1) / 2) * Co) / 90 * 100, w = e.home.goalsByPeriod[g] ?? 0, b = e.away.goalsByPeriod[g] ?? 0;
+    for (let m = 0; m < w; m += 1) c.push({ x: f(w, m), top: !0, key: `h${g}-${m}` });
+    for (let m = 0; m < b; m += 1) c.push({ x: f(b, m), top: !1, key: `a${g}-${m}` });
+  }), /* @__PURE__ */ y(pe, { children: [
+    /* @__PURE__ */ r(F, { label: s("possession"), home: e.home.possession, away: e.away.possession, percent: !0 }),
+    /* @__PURE__ */ r(F, { label: s("shotsOnTarget"), home: e.home.shotsOnTarget, away: e.away.shotsOnTarget }),
+    /* @__PURE__ */ r(F, { label: s("corners"), home: e.home.corners, away: e.away.corners }),
+    /* @__PURE__ */ r(F, { label: s("yellowCards"), home: e.home.yellowCards, away: e.away.yellowCards }),
+    /* @__PURE__ */ r(F, { label: s("redCards"), home: e.home.redCards, away: e.away.redCards }),
+    /* @__PURE__ */ y(
+      h,
+      {
+        sx: {
+          display: "grid",
+          gridTemplateColumns: `${n(44)} 1fr ${n(44)}`,
+          alignItems: "center",
+          gap: n(12),
+          marginTop: n(4)
+        },
+        children: [
+          /* @__PURE__ */ r(j, { url: i, size: 30, sx: { justifySelf: "end" } }),
+          /* @__PURE__ */ y(h, { sx: { position: "relative", height: n(84), gridColumn: 2 }, children: [
+            /* @__PURE__ */ r(
+              h,
+              {
+                sx: {
+                  position: "absolute",
+                  left: 0,
+                  right: 0,
+                  top: "50%",
+                  height: "2px",
+                  backgroundColor: t.border,
+                  transform: "translateY(-50%)"
+                }
+              }
+            ),
+            wo.map((u) => {
+              const g = u === 45, f = g ? t.text : t.dim;
+              return /* @__PURE__ */ y(z.Fragment, { children: [
+                /* @__PURE__ */ r(
+                  h,
+                  {
+                    sx: {
+                      position: "absolute",
+                      left: `${u / 90 * 100}%`,
+                      top: "50%",
+                      transform: "translate(-50%,-50%)",
+                      width: g ? "2px" : "1px",
+                      height: n(g ? 14 : 8),
+                      backgroundColor: f,
+                      borderRadius: "1px"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ r(
+                  S,
+                  {
+                    size: 10,
+                    font: "secondary",
+                    weight: g ? 700 : 400,
+                    color: f,
+                    sx: {
+                      position: "absolute",
+                      left: `${u / 90 * 100}%`,
+                      bottom: 0,
+                      transform: "translateX(-50%)",
+                      whiteSpace: "nowrap"
+                    },
+                    children: g ? s("halfTimeShort") : s("minuteTick", { minute: u })
+                  }
+                )
+              ] }, u);
+            }),
+            c.map((u) => /* @__PURE__ */ r(
+              So,
+              {
+                x: u.x,
+                top: u.top,
+                logo: u.top ? i : a,
+                color: u.top ? t.primary : t.primaryContainer
+              },
+              u.key
+            )),
+            d + l === 0 ? /* @__PURE__ */ r(
+              S,
+              {
+                size: 11,
+                font: "secondary",
+                color: t.dim,
+                sx: {
+                  position: "absolute",
+                  left: "50%",
+                  top: n(14, 11),
+                  transform: "translateX(-50%)"
+                },
+                children: s("noGoals")
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ r(j, { url: a, size: 30, sx: { justifySelf: "start", gridColumn: 3 } })
+        ]
+      }
+    )
+  ] });
+}, vo = 3e3, ko = ({ odds: e, config: t, onAddToBetslip: o }) => {
+  const { colors: s, fonts: i, radius: a } = W(), d = "1.625em", l = ((t == null ? void 0 : t.mode) ?? "default") === "flash", c = (t == null ? void 0 : t.flashInterval) ?? vo, [u, g] = z.useState(!1);
+  z.useEffect(() => {
+    if (!l) return;
+    const m = setInterval(() => g((I) => !I), c);
+    return () => clearInterval(m);
+  }, [l, c]);
+  const f = e.operator, w = (m) => f ? /* @__PURE__ */ r(
+    h,
+    {
+      component: f.url ? "a" : "div",
+      href: f.url ?? void 0,
+      target: f.url ? "_blank" : void 0,
+      rel: f.url ? "noopener noreferrer" : void 0,
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "0.375em",
+        height: d,
+        paddingInline: "0.375em",
+        borderRadius: a.xs,
+        boxSizing: "border-box",
+        textDecoration: "none",
+        flexShrink: 0,
+        whiteSpace: "nowrap",
+        // The operator's brand colours are data, not theme.
+        backgroundColor: f.backgroundColor ?? s.onSurface,
+        color: f.textColor ?? s.text,
+        ...m ? { flex: 1 } : { maxWidth: "5.25em", width: "100%" }
+      },
+      children: f.logo ? /* @__PURE__ */ r(
+        h,
+        {
+          component: "img",
+          src: f.logo,
+          alt: f.name,
+          loading: "lazy",
+          sx: { height: "100%", width: "auto", objectFit: "contain" }
+        }
+      ) : /* @__PURE__ */ r(
+        Et,
+        {
+          sx: {
+            fontFamily: i.primary,
+            fontSize: "0.75em",
+            fontWeight: 600,
+            lineHeight: 1.35,
+            color: "inherit",
+            whiteSpace: "nowrap",
+            unicodeBidi: "plaintext"
+          },
+          children: f.name
+        }
+      )
+    }
+  ) : null, b = (m) => /* @__PURE__ */ y(
+    h,
+    {
+      component: m.url ? "a" : "button",
+      type: m.url ? void 0 : "button",
+      href: m.url ?? void 0,
+      target: m.url ? "_blank" : void 0,
+      rel: m.url ? "noopener noreferrer" : void 0,
+      onClick: () => o == null ? void 0 : o({
+        matchId: e.matchId,
+        market: e.market,
+        pick: m.label,
+        odd: m.odd
+      }),
+      sx: {
+        flex: 1,
+        minWidth: 0,
+        height: d,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: "0.25em",
+        paddingInline: "0.5em",
+        borderRadius: a.xs,
+        border: `1px solid ${s.border}`,
+        boxSizing: "border-box",
+        backgroundColor: s.surface,
+        color: s.text,
+        cursor: "pointer",
+        textDecoration: "none",
+        fontFamily: i.secondary,
+        // A <button> doesn't inherit font-size, and `height` in em resolves against its own.
+        fontSize: "1em",
+        lineHeight: 1.35,
+        "&:hover": { borderColor: s.dim }
+      },
+      children: [
+        /* @__PURE__ */ r(h, { component: "span", sx: { color: s.dim, fontSize: "0.75em" }, children: m.label }),
+        /* @__PURE__ */ y(
+          h,
+          {
+            component: "span",
+            sx: { fontSize: "0.75em", fontWeight: 700, fontVariantNumeric: "tabular-nums" },
+            children: [
+              /* @__PURE__ */ r(_t, { children: m.value }),
+              /* @__PURE__ */ r(
+                h,
+                {
+                  component: "span",
+                  "aria-hidden": !0,
+                  sx: {
+                    marginInlineStart: "0.25em",
+                    // Always takes its space, so a price without movement sits where the others do.
+                    visibility: m.change === "none" ? "hidden" : "visible",
+                    color: m.change === "up" ? s.success : s.danger
+                  },
+                  children: m.change === "down" ? "↓" : "↑"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    },
+    m.label
+  );
+  return /* @__PURE__ */ r(h, { sx: { display: "flex", alignItems: "center", gap: "0.3125em" }, children: l ? u && f ? w(!0) : e.values.map(b) : /* @__PURE__ */ y(pe, { children: [
+    w(!1),
+    e.values.map(b)
+  ] }) });
+}, To = { W: "formWin", D: "formDraw", L: "formLoss" }, Pe = ({ entry: e, side: t }) => {
+  const { colors: o, radius: s } = W(), { entities: i, label: a, fmt: d } = K(), [l, c] = z.useState(!1), { match: u, result: g } = e, f = { W: o.success, D: o.variant, L: o.danger }[g], w = t === "away" ? { right: n(-4) } : { left: n(-4) }, b = t === "away" ? { right: n(10) } : { left: n(10) }, [m, I] = u.fullTime ?? [0, 0], x = ($, v) => /* @__PURE__ */ y(
+    h,
+    {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: n(6),
+        minWidth: 0,
+        ...v ? { flexDirection: "row-reverse" } : {}
+      },
+      children: [
+        /* @__PURE__ */ r(j, { url: i.logo($), size: 22 }),
+        /* @__PURE__ */ r(S, { size: 12, weight: 600, ellipsis: !0, cms: !0, sx: v ? { textAlign: "end" } : void 0, children: i.name($) })
+      ]
+    }
+  );
+  return /* @__PURE__ */ y(
+    h,
+    {
+      onMouseEnter: () => c(!0),
+      onMouseLeave: () => c(!1),
+      sx: { position: "relative", display: "flex" },
+      children: [
+        /* @__PURE__ */ r(
+          S,
+          {
+            size: 11,
+            font: "secondary",
+            weight: 700,
+            color: g === "D" ? o.body : o.onPrimary,
+            sx: {
+              width: n(24, 11),
+              height: n(24, 11),
+              borderRadius: `calc(${s.sm} - 2px)`,
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: f,
+              cursor: "help",
+              outline: `2px solid ${l ? o.primary : "transparent"}`,
+              outlineOffset: "1px"
+            },
+            children: a(To[g])
+          }
+        ),
+        l ? /* @__PURE__ */ y(
+          h,
+          {
+            sx: {
+              position: "absolute",
+              bottom: `calc(100% + ${n(10)})`,
+              ...w,
+              zIndex: 50,
+              width: n(240),
+              backgroundColor: o.surface,
+              color: o.text,
+              borderRadius: s.sm,
+              padding: `${n(8)} ${n(10)}`,
+              boxShadow: "0 6px 20px rgba(33,33,33,.18)",
+              display: "flex",
+              flexDirection: "column",
+              gap: n(6),
+              pointerEvents: "none"
+            },
+            children: [
+              /* @__PURE__ */ r(S, { size: 11, font: "secondary", weight: 500, color: o.dim, sx: { textAlign: "center" }, children: a("formMeta", {
+                round: u.round,
+                date: d.date(u.start, { day: "numeric", month: "long", year: "numeric" })
+              }) }),
+              /* @__PURE__ */ y(
+                h,
+                {
+                  sx: {
+                    display: "grid",
+                    gridTemplateColumns: "minmax(0,1fr) auto minmax(0,1fr)",
+                    alignItems: "center",
+                    gap: n(8)
+                  },
+                  children: [
+                    x(u.home.id, !1),
+                    /* @__PURE__ */ r(S, { size: 15, weight: 700, sx: { whiteSpace: "nowrap", fontVariantNumeric: "tabular-nums" }, children: `${m} – ${I}` }),
+                    x(u.away.id, !0)
+                  ]
+                }
+              ),
+              /* @__PURE__ */ r(
+                h,
+                {
+                  component: "span",
+                  sx: {
+                    position: "absolute",
+                    top: "100%",
+                    ...b,
+                    border: `${n(6)} solid transparent`,
+                    borderTopColor: o.surface
+                  }
+                }
+              )
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}, $o = ({ match: e }) => {
+  var m, I;
+  const { colors: t } = W(), { data: o, entities: s, finished: i, tally: a, label: d, fmt: l } = K(), c = o.teamStats.get(e.home.id), u = o.teamStats.get(e.away.id), g = Zt(i, e), f = Le(i, e.home.id, e.start), w = Le(i, e.away.id, e.start), b = (x) => l.decimal(x, 1);
+  return /* @__PURE__ */ y(pe, { children: [
+    /* @__PURE__ */ y(
+      h,
+      {
+        sx: {
+          display: "grid",
+          gridTemplateColumns: `${n(44)} 1fr ${n(44)}`,
+          alignItems: "center",
+          gap: n(12)
+        },
+        children: [
+          /* @__PURE__ */ r(j, { url: s.logo(e.home.id), size: 30, sx: { justifySelf: "end" } }),
+          /* @__PURE__ */ y(
+            h,
+            {
+              sx: {
+                gridColumn: 2,
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                gap: n(12)
+              },
+              children: [
+                /* @__PURE__ */ r(h, { sx: { display: "flex", gap: n(4) }, children: f.map((x) => /* @__PURE__ */ r(Pe, { entry: x, side: "home" }, x.match.id)) }),
+                /* @__PURE__ */ r(S, { size: 10, font: "secondary", upper: !0, color: t.dim, sx: { textAlign: "center" }, children: d("formLast5") }),
+                /* @__PURE__ */ r(h, { sx: { display: "flex", gap: n(4) }, children: w.map((x) => /* @__PURE__ */ r(Pe, { entry: x, side: "away" }, x.match.id)) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ r(
+            j,
+            {
+              url: s.logo(e.away.id),
+              size: 30,
+              sx: { justifySelf: "start", gridColumn: 3 }
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ r(F, { label: d("wins"), home: (c == null ? void 0 : c.won) ?? null, away: (u == null ? void 0 : u.won) ?? null }),
+    /* @__PURE__ */ r(F, { label: d("draws"), home: (c == null ? void 0 : c.draw) ?? null, away: (u == null ? void 0 : u.draw) ?? null }),
+    /* @__PURE__ */ r(F, { label: d("losses"), home: (c == null ? void 0 : c.lost) ?? null, away: (u == null ? void 0 : u.lost) ?? null }),
+    /* @__PURE__ */ r(F, { label: d("goalsScored"), home: (c == null ? void 0 : c.goalsScored) ?? null, away: (u == null ? void 0 : u.goalsScored) ?? null }),
+    /* @__PURE__ */ r(F, { label: d("goalsConceded"), home: (c == null ? void 0 : c.goalsAllowed) ?? null, away: (u == null ? void 0 : u.goalsAllowed) ?? null }),
+    /* @__PURE__ */ r(
+      F,
+      {
+        label: d("goalsPerMatch"),
+        home: (c == null ? void 0 : c.avgTotalGoals) != null ? Number(c.avgTotalGoals.toFixed(1)) : null,
+        away: (u == null ? void 0 : u.avgTotalGoals) != null ? Number(u.avgTotalGoals.toFixed(1)) : null,
+        format: b
+      }
+    ),
+    /* @__PURE__ */ r(F, { label: d("homeAwayWins"), home: (c == null ? void 0 : c.homeWon) ?? null, away: (u == null ? void 0 : u.awayWon) ?? null }),
+    /* @__PURE__ */ r(
+      F,
+      {
+        label: d("cleanSheets"),
+        home: ((m = a.get(e.home.id)) == null ? void 0 : m.cleanSheets) ?? 0,
+        away: ((I = a.get(e.away.id)) == null ? void 0 : I.cleanSheets) ?? 0
+      }
+    ),
+    g != null && g.fullTime ? /* @__PURE__ */ y(S, { component: "div", size: 11, font: "secondary", color: t.dim, children: [
+      d("previousMeeting"),
+      " ",
+      /* @__PURE__ */ y(h, { component: "b", sx: { color: t.text }, children: [
+        /* @__PURE__ */ r(h, { component: "span", sx: { unicodeBidi: "plaintext" }, children: s.name(g.home.id) }),
+        " ",
+        `${g.fullTime[0]}:${g.fullTime[1]}`,
+        " ",
+        /* @__PURE__ */ r(h, { component: "span", sx: { unicodeBidi: "plaintext" }, children: s.name(g.away.id) }),
+        " ",
+        d("previousMeetingRound", { round: g.round })
+      ] })
+    ] }) : null
+  ] });
+}, _o = ({ match: e, odds: t, open: o, onToggle: s }) => {
+  var H, G;
+  const { colors: i, radius: a } = W(), { entities: d, label: l, fmt: c, props: u } = K(), g = (H = u.callbacks) == null ? void 0 : H.onBroadcastClick, f = e.status === "FINISHED", w = e.status === "LIVE", [b, m] = e.fullTime ?? [0, 0], I = f && b > m, x = f && m > b, $ = f && b === m, v = e.status === "CANCELLED", E = !v, D = !f && !v, M = w ? e.liveMinute !== null ? l("liveMinute", { minute: e.liveMinute }) : e.isHalfTime ? l("halfTimeShort") : l("live") : c.time(e.start), A = xe(), L = (u.showOdds ?? !1) && !A && (e.status === "UPCOMING" || w), T = t ? /* @__PURE__ */ r(
+    ko,
+    {
+      odds: t,
+      config: u.odds,
+      onAddToBetslip: (G = u.callbacks) == null ? void 0 : G.onAddToBetslip
+    }
+  ) : null, R = {
+    // A price click must not toggle the row.
+    onClick: (p) => p.stopPropagation(),
+    onKeyDown: (p) => p.stopPropagation()
+  }, O = (p, _, k, V) => /* @__PURE__ */ r(
+    S,
+    {
+      size: 14,
+      weight: _ ? 700 : 500,
+      color: k && !$ ? i.dim : i.text,
+      ellipsis: !0,
+      cms: !0,
+      sx: V ? { textAlign: "right" } : void 0,
+      children: d.name(p)
+    }
+  );
+  return /* @__PURE__ */ y(h, { sx: { borderBottom: `1px solid ${i.border}` }, children: [
+    /* @__PURE__ */ y(
+      h,
+      {
+        ...E ? {
+          role: "button",
+          "aria-expanded": o,
+          tabIndex: 0,
+          onClick: s,
+          onKeyDown: (p) => {
+            (p.key === "Enter" || p.key === " ") && (p.preventDefault(), s());
+          }
+        } : {},
+        sx: {
+          display: "grid",
+          gridTemplateColumns: [
+            D ? n(g ? 80 : 60) : null,
+            "minmax(0,1fr) auto minmax(0,1fr)",
+            L ? n(300) : null,
+            n(20)
+          ].filter(Boolean).join(" "),
+          alignItems: "center",
+          columnGap: n(8),
+          rowGap: n(6),
+          // Minus the 3px accent border, so the rail lines up with the day header's text.
+          padding: `${n(6)} ${n(16)} ${n(6)} calc(${n(16)} - 3px)`,
+          cursor: E ? "pointer" : "default",
+          backgroundColor: o ? i.onSurface : "transparent",
+          borderLeft: `3px solid ${w ? i.danger : "transparent"}`,
+          // Not onSurface: that is the day-header fill, so a hovered row would merge into it.
+          ...E ? {
+            "&:hover": {
+              backgroundColor: o ? i.onSurface : i.tint
+            }
+          } : {}
+        },
+        children: [
+          D ? /* @__PURE__ */ y(
+            h,
+            {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: n(6),
+                whiteSpace: "nowrap"
+              },
+              children: [
+                w ? /* @__PURE__ */ r(
+                  h,
+                  {
+                    component: "span",
+                    sx: {
+                      width: n(7),
+                      height: n(7),
+                      borderRadius: "50%",
+                      backgroundColor: i.danger,
+                      animation: "cs-pulse 1s ease-in-out infinite"
+                    }
+                  }
+                ) : null,
+                /* @__PURE__ */ r(
+                  S,
+                  {
+                    size: 13,
+                    font: "secondary",
+                    weight: 700,
+                    color: w ? i.danger : i.text,
+                    children: M
+                  }
+                ),
+                g && e.status === "UPCOMING" ? /* @__PURE__ */ r(
+                  h,
+                  {
+                    component: "button",
+                    type: "button",
+                    "aria-label": l("watchOnTv"),
+                    title: l("watchOnTv"),
+                    onClick: (p) => {
+                      p.stopPropagation(), g(e.id);
+                    },
+                    onKeyDown: (p) => p.stopPropagation(),
+                    sx: {
+                      display: "inline-flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      padding: 0,
+                      border: "none",
+                      background: "transparent",
+                      cursor: "pointer",
+                      fontSize: n(16),
+                      color: i.dim,
+                      "&:hover": { color: i.primary }
+                    },
+                    children: /* @__PURE__ */ r(At, { size: "1em", "aria-hidden": !0 })
+                  }
+                ) : null
+              ]
+            }
+          ) : null,
+          /* @__PURE__ */ y(
+            h,
+            {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "flex-end",
+                gap: n(8),
+                minWidth: 0
+              },
+              children: [
+                O(e.home.id, I, x, !0),
+                /* @__PURE__ */ r(j, { url: d.logo(e.home.id), size: 24 })
+              ]
+            }
+          ),
+          /* @__PURE__ */ y(
+            h,
+            {
+              sx: {
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                minWidth: n(56)
+              },
+              children: [
+                v && e.notPlayedReason ? /* @__PURE__ */ r(
+                  S,
+                  {
+                    size: 11,
+                    font: "secondary",
+                    weight: 700,
+                    upper: !0,
+                    color: i.dim,
+                    sx: {
+                      backgroundColor: i.onSurface,
+                      borderRadius: a.sm,
+                      padding: `${n(5, 11)} ${n(8, 11)}`,
+                      whiteSpace: "nowrap"
+                    },
+                    children: l(e.notPlayedReason)
+                  }
+                ) : /* @__PURE__ */ r(
+                  S,
+                  {
+                    size: 15,
+                    weight: 700,
+                    color: i.text,
+                    sx: {
+                      letterSpacing: n(1, 15),
+                      backgroundColor: f || w ? i.onSurface : "transparent",
+                      borderRadius: a.sm,
+                      padding: `${n(3, 15)} ${n(8, 15)}`,
+                      whiteSpace: "nowrap"
+                    },
+                    children: f || w ? `${b} : ${m}` : "–"
+                  }
+                ),
+                (f || w) && e.halfTime ? /* @__PURE__ */ r(
+                  S,
+                  {
+                    size: 10,
+                    font: "secondary",
+                    color: i.dim,
+                    sx: { marginTop: n(2, 10) },
+                    children: `(${e.halfTime[0]}:${e.halfTime[1]})`
+                  }
+                ) : null
+              ]
+            }
+          ),
+          /* @__PURE__ */ y(
+            h,
+            {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: n(8),
+                minWidth: 0
+              },
+              children: [
+                /* @__PURE__ */ r(j, { url: d.logo(e.away.id), size: 24 }),
+                O(e.away.id, x, I, !1)
+              ]
+            }
+          ),
+          L ? /* @__PURE__ */ r(h, { ...R, sx: { minWidth: 0, cursor: "default" }, children: T }) : null,
+          /* @__PURE__ */ r(
+            h,
+            {
+              component: "svg",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              sx: {
+                width: n(16),
+                height: n(16),
+                color: i.dim,
+                // Hidden, not removed, so the teams stay aligned with the expandable rows.
+                visibility: E ? "visible" : "hidden",
+                transform: o ? "rotate(180deg)" : "rotate(0)",
+                transition: "transform .2s"
+              },
+              children: /* @__PURE__ */ r("path", { d: "m6 9 6 6 6-6" })
+            }
+          ),
+          T && !L ? /* @__PURE__ */ r(
+            h,
+            {
+              ...R,
+              sx: {
+                gridColumn: D ? "2 / 5" : "1 / 4",
+                display: "flex",
+                justifyContent: "center",
+                cursor: "default"
+              },
+              children: /* @__PURE__ */ r(h, { sx: { width: "100%", maxWidth: n(300) }, children: T })
+            }
+          ) : null
+        ]
+      }
+    ),
+    o && E ? /* @__PURE__ */ r(
+      h,
+      {
+        sx: {
+          padding: `${n(6)} ${n(16)} ${n(16)}`,
+          display: "flex",
+          flexDirection: "column",
+          gap: n(14),
+          backgroundColor: i.onSurface,
+          borderTop: `1px solid ${i.border}`
+        },
+        children: f || w ? /* @__PURE__ */ r(Io, { match: e }) : /* @__PURE__ */ r($o, { match: e })
+      }
+    ) : null
+  ] });
+}, We = (e, t) => e.start.localeCompare(t.start), Eo = (e) => e.status === "UPCOMING" || e.status === "LIVE", Ro = () => {
+  var ve, ke, Te, $e, _e;
+  const { colors: e, radius: t, fonts: o } = W(), { sdk: s, data: i, entities: a, label: d, fmt: l, props: c } = K(), [u, g] = z.useState("upcoming"), [f, w] = z.useState(null), [b, m] = z.useState(null), [I, x] = z.useState(null), [$, v] = z.useState(null), [E, D] = z.useState(null), M = u === "upcoming", A = (C) => Eo(C) === M, L = i.matches.filter(A).sort(We), T = i.stages.filter(
+    (C) => L.some((P) => P.stageId === C.id)
+  ), R = M ? T : [...T].reverse(), O = R.length > 1, H = M ? f : b, G = (ve = M ? L[0] : L[L.length - 1]) == null ? void 0 : ve.stageId, p = O ? R.some((C) => C.id === H) ? H : G ?? R[0].id : null, _ = (C) => !O || C.stageId === p, k = Array.from(
+    new Set(L.filter(_).map((C) => C.round))
+  ).sort((C, P) => C - P), V = M ? k : [...k].reverse(), q = M ? I : $, Ce = q !== null && k.includes(q) ? q : M ? k[0] : k[k.length - 1], ee = i.matches.filter((C) => C.round === Ce && _(C)).sort(We), te = ee.filter(A), Xe = z.useMemo(
+    () => te.filter((C) => C.status === "UPCOMING" || C.status === "LIVE").map((C) => C.id),
+    [te]
+  ), qe = z.useMemo(
+    () => te.filter((C) => C.status === "LIVE").map((C) => C.id),
+    [te]
+  ), Je = bo(s, Xe, {
+    enabled: c.showOdds ?? !1,
+    liveMatchIds: qe,
+    sport: i.sport,
+    pollingIntervalMs: (ke = c.odds) == null ? void 0 : ke.pollingInterval,
+    operators: (Te = c.odds) == null ? void 0 : Te.operators,
+    affiliateId: ($e = c.odds) == null ? void 0 : $e.affiliateId,
+    affiliateIds: (_e = c.odds) == null ? void 0 : _e.affiliateIds
+  }), Se = (C) => l.date(C, { day: "numeric", month: "short" }), Qe = ee.length ? d("roundSummary", {
+    from: Se(ee[0].start),
+    to: Se(ee[ee.length - 1].start),
+    matches: d("matchesCount", { count: ee.length })
+  }) : "", me = [];
+  te.forEach((C) => {
+    const P = l.date(C.start, {
+      weekday: "long",
+      day: "numeric",
+      month: "long"
+    }), Ee = me.find((nt) => nt.label === P);
+    Ee ? Ee.rows.push(C) : me.push({ label: P, rows: [C] });
+  });
+  const Ze = (C) => {
+    g(C), D(null);
+  }, et = (C) => {
+    M ? x(C) : v(C), D(null);
+  }, tt = (C) => {
+    M ? (w(C), x(null)) : (m(C), v(null)), D(null);
+  }, ot = (C) => C.nameId && a.has(C.nameId) ? a.name(C.nameId) : d("stage", { number: i.stages.indexOf(C) + 1 }), Ie = (C) => {
+    const P = u === C;
+    return /* @__PURE__ */ r(
+      h,
+      {
+        component: "button",
+        type: "button",
+        onClick: () => Ze(C),
+        sx: {
+          border: "none",
+          cursor: "pointer",
+          borderRadius: t.full,
+          padding: `${n(7, 13)} ${n(14, 13)}`,
+          fontFamily: o.primary,
+          fontSize: n(13),
+          fontWeight: 700,
+          backgroundColor: P ? e.surface : "transparent",
+          color: P ? e.text : e.dim,
+          boxShadow: P ? "0 1px 2px rgba(0,0,0,.12)" : "none"
+        },
+        children: d(C)
+      }
+    );
+  };
+  return /* @__PURE__ */ y(Z, { sx: { overflow: "hidden" }, children: [
+    /* @__PURE__ */ y(
+      h,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: n(12),
+          padding: `${n(12)} ${n(16)}`,
+          borderBottom: `1px solid ${e.border}`,
+          flexWrap: "wrap"
+        },
+        children: [
+          /* @__PURE__ */ y(
+            h,
+            {
+              sx: {
+                display: "flex",
+                gap: n(4),
+                padding: n(3),
+                backgroundColor: e.onSurface,
+                borderRadius: t.full
+              },
+              children: [
+                Ie("upcoming"),
+                Ie("results")
+              ]
+            }
+          ),
+          /* @__PURE__ */ r(S, { size: 11, font: "secondary", color: e.dim, children: Qe })
+        ]
+      }
+    ),
+    O ? (
+      // Pills styled like the Standings stage tabs.
+      /* @__PURE__ */ r(
+        h,
+        {
+          role: "tablist",
+          sx: {
+            display: "flex",
+            gap: n(4),
+            overflowX: "auto",
+            padding: `${n(10)} ${n(16)}`,
+            borderBottom: `1px solid ${e.border}`,
+            scrollbarWidth: "none",
+            "&::-webkit-scrollbar": { display: "none" }
+          },
+          children: R.map((C) => {
+            const P = C.id === p;
+            return /* @__PURE__ */ r(
+              h,
+              {
+                component: "button",
+                type: "button",
+                role: "tab",
+                "aria-selected": P,
+                onClick: () => tt(C.id),
+                sx: {
+                  flexShrink: 0,
+                  border: "none",
+                  cursor: "pointer",
+                  borderRadius: t.full,
+                  padding: `${n(6, 12)} ${n(12, 12)}`,
+                  fontFamily: o.primary,
+                  fontSize: n(12),
+                  fontWeight: 700,
+                  lineHeight: 1,
+                  textTransform: "uppercase",
+                  letterSpacing: "0.025em",
+                  whiteSpace: "nowrap",
+                  unicodeBidi: "plaintext",
+                  backgroundColor: P ? e.primary : "transparent",
+                  color: P ? e.onPrimary : e.dim,
+                  "&:hover": P ? {} : { backgroundColor: e.variant, color: e.primary }
+                },
+                children: ot(C)
+              },
+              C.id
+            );
+          })
+        }
+      )
+    ) : null,
+    V.length > (O ? 1 : 0) ? /* @__PURE__ */ r(
+      h,
+      {
+        sx: {
+          display: "flex",
+          gap: n(6),
+          overflowX: "auto",
+          padding: `${n(10)} ${n(16)}`,
+          borderBottom: `1px solid ${e.border}`,
+          scrollbarWidth: "none",
+          "&::-webkit-scrollbar": { display: "none" }
+        },
+        children: V.map((C) => {
+          const P = C === Ce;
+          return /* @__PURE__ */ r(
+            h,
+            {
+              component: "button",
+              type: "button",
+              onClick: () => et(C),
+              sx: {
+                flexShrink: 0,
+                border: `1px solid ${P ? e.primary : e.border}`,
+                cursor: "pointer",
+                borderRadius: t.full,
+                padding: `${n(5, 12)} ${n(12, 12)}`,
+                fontFamily: o.secondary,
+                fontSize: n(12),
+                fontWeight: 700,
+                backgroundColor: P ? e.primary : e.surface,
+                color: P ? e.onPrimary : e.body,
+                whiteSpace: "nowrap"
+              },
+              children: d("round", { round: C })
+            },
+            C
+          );
+        })
+      }
+    ) : null,
+    me.map((C) => /* @__PURE__ */ y(z.Fragment, { children: [
+      /* @__PURE__ */ r(
+        S,
+        {
+          component: "div",
+          size: 11,
+          font: "secondary",
+          weight: 700,
+          upper: !0,
+          color: e.dim,
+          sx: {
+            padding: `${n(8, 11)} ${n(16, 11)} ${n(4, 11)}`,
+            backgroundColor: e.onSurface
+          },
+          children: C.label
+        }
+      ),
+      C.rows.map((P) => /* @__PURE__ */ r(
+        _o,
+        {
+          match: P,
+          odds: Je.get(P.id) ?? null,
+          open: E === P.id,
+          onToggle: () => D(E === P.id ? null : P.id)
+        },
+        P.id
+      ))
+    ] }, C.label)),
+    te.length === 0 ? /* @__PURE__ */ r(
+      S,
+      {
+        component: "div",
+        size: 14,
+        font: "secondary",
+        color: e.dim,
+        sx: { padding: n(24, 14), textAlign: "center" },
+        children: L.length > 0 ? d("noMatches") : d(M ? "noUpcomingMatches" : "noResultsYet")
+      }
+    ) : null
+  ] });
+}, Oe = ["1-15'", "16-30'", "31-45'", "46-60'", "61-75'", "76-90'"], fe = `repeat(auto-fit,minmax(${n(280)},1fr))`, se = ({ children: e }) => /* @__PURE__ */ r(
+  Z,
+  {
+    sx: {
+      padding: `${n(14)} ${n(16)}`,
+      display: "flex",
+      flexDirection: "column",
+      gap: n(10)
+    },
+    children: e
+  }
+), Ne = ({
+  widths: e,
+  height: t
+}) => {
+  const { radius: o } = W();
+  return /* @__PURE__ */ r(
+    h,
+    {
+      sx: {
+        display: "flex",
+        height: n(t),
+        borderRadius: o.full,
+        overflow: "hidden",
+        gap: "2px"
+      },
+      children: e.map((s, i) => /* @__PURE__ */ r(h, { sx: { width: `${s.w}%`, backgroundColor: s.color } }, i))
+    }
+  );
+}, ie = ({
+  icon: e,
+  caption: t,
+  children: o
+}) => {
+  const { colors: s, radius: i } = W();
+  return /* @__PURE__ */ y(
+    h,
+    {
+      sx: {
+        backgroundColor: s.onSurface,
+        borderRadius: `calc(${i.md} - 2px)`,
+        padding: n(12),
+        display: "flex",
+        alignItems: "center",
+        gap: n(10)
+      },
+      children: [
+        /* @__PURE__ */ r(
+          h,
+          {
+            component: "span",
+            sx: {
+              width: n(34),
+              height: n(34),
+              borderRadius: "50%",
+              backgroundColor: s.tint,
+              color: s.primary,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: 0,
+              "& svg": { width: n(18), height: n(18) }
+            },
+            children: e
+          }
+        ),
+        /* @__PURE__ */ y(h, { children: [
+          o,
+          /* @__PURE__ */ r(S, { component: "div", size: 10, font: "secondary", color: s.dim, sx: { marginTop: n(3, 10) }, children: t })
+        ] })
+      ]
+    }
+  );
+}, ae = {
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+}, Mo = 4, Ao = (e, t, o, s) => {
+  if (s) return 12;
+  if (o) return e === t - 1 && t % 2 === 1 ? 12 : 6;
+  const i = Math.min(t, Mo), a = e < i ? i : t - i;
+  return Math.floor(12 / a);
+}, Lo = () => {
+  const { colors: e, radius: t } = W(), o = xe(), s = pt(), { data: i, entities: a, tally: d, label: l, fmt: c, props: u } = K(), g = z.useMemo(() => eo(i.matches), [i.matches]), f = g.played, w = (p) => l("ofMatches", { value: p, matches: l("matchesCount", { count: f }) }), b = (p) => c.decimal(f ? p / f : 0, 1), m = (p, _ = 22) => /* @__PURE__ */ r(S, { size: _, weight: 700, color: e.text, sx: { lineHeight: 1 }, children: p }), I = [
+    {
+      label: l("matchesPlayed"),
+      value: f,
+      sub: l("remaining", { count: g.total - f })
+    },
+    {
+      label: l("totalGoals"),
+      value: g.goals,
+      sub: l("goalsPerMatchValue", { value: c.decimal(f ? g.goals / f : 0, 2) })
+    },
+    { label: l("homeWins"), value: `${B(g.homeWins, f)}%`, sub: w(g.homeWins) },
+    {
+      label: l("bothTeamsScored"),
+      value: `${B(g.bothScored, f)}%`,
+      sub: l("bttsSummary", {
+        matches: l("matchesCount", { count: g.bothScored }),
+        goalless: g.goalless
+      })
+    }
+  ], x = [
+    { label: l("homeWin"), n: g.homeWins, color: e.primary },
+    { label: l("draw"), n: g.draws, color: e.border },
+    { label: l("awayWin"), n: g.awayWins, color: e.primaryContainer }
+  ], $ = Math.max(...g.goalsByPeriod, 1), v = [
+    ...[1.5, 2.5, 3.5].map((p) => ({
+      // "Over 1.5" reads better as the whole number it means: 2+.
+      label: l("goalsOrMore", { count: Math.ceil(p) }),
+      pct: B(g.over(p), f)
+    })),
+    { label: l("bothTeamsScored"), pct: B(g.bothScored, f) },
+    { label: l("goallessDraw"), pct: B(g.goalless, f) }
+  ], E = no(i.teamStats), D = Array.from(d.keys()), M = ue(u.teamCTA), A = [], L = (p, _, k, V, q) => {
+    _ !== void 0 && A.push({ label: l(p), teamId: k(_), value: V(_), unit: q(_) });
+  };
+  L("mostWins", U(E, (p) => p.won), (p) => p.teamId, (p) => p.won, (p) => l("unitWins", { count: p.won })), L("bestAttack", U(E, (p) => p.goalsScored), (p) => p.teamId, (p) => p.goalsScored, () => l("unitGoals")), L("bestDefence", U(E, (p) => p.goalsAllowed, -1), (p) => p.teamId, (p) => p.goalsAllowed, (p) => l("unitConceded", { count: p.goalsAllowed })), L(
+    "cleanSheets",
+    U(D, (p) => {
+      var _;
+      return ((_ = d.get(p)) == null ? void 0 : _.cleanSheets) ?? 0;
+    }),
+    (p) => p,
+    (p) => {
+      var _;
+      return ((_ = d.get(p)) == null ? void 0 : _.cleanSheets) ?? 0;
+    },
+    () => l("unitMatches")
+  ), L("bestHome", U(E, (p) => p.homeWon), (p) => p.teamId, (p) => p.homeWon, (p) => l("unitWins", { count: p.homeWon })), L("bestAway", U(E, (p) => p.awayWon), (p) => p.teamId, (p) => p.awayWon, (p) => l("unitWins", { count: p.awayWon })), L(
+    "mostCards",
+    U(D, (p) => {
+      var _, k;
+      return (((_ = d.get(p)) == null ? void 0 : _.yellowCards) ?? 0) + (((k = d.get(p)) == null ? void 0 : k.redCards) ?? 0);
+    }),
+    (p) => p,
+    (p) => {
+      var _, k;
+      return (((_ = d.get(p)) == null ? void 0 : _.yellowCards) ?? 0) + (((k = d.get(p)) == null ? void 0 : k.redCards) ?? 0);
+    },
+    (p) => {
+      var _, k;
+      return `${l("yellowCount", { count: ((_ = d.get(p)) == null ? void 0 : _.yellowCards) ?? 0 })} · ${l("redCount", {
+        count: ((k = d.get(p)) == null ? void 0 : k.redCards) ?? 0
+      })}`;
+    }
+  );
+  const T = i.matches.filter(we), R = [], O = U(T, ce), H = U(T, (p) => Math.abs(p.fullTime[0] - p.fullTime[1]));
+  O && R.push({ label: l("highestScoring"), match: O }), H && R.push({ label: l("biggestWin"), match: H });
+  const G = ue(u.matchCTA);
+  return /* @__PURE__ */ y(h, { sx: { display: "flex", flexDirection: "column", gap: n(12) }, children: [
+    /* @__PURE__ */ r(Ke, { children: l("seasonTitle") }),
+    /* @__PURE__ */ r(h, { sx: { display: "grid", gridTemplateColumns: `repeat(auto-fit,minmax(${n(150)},1fr))`, gap: n(12) }, children: I.map((p) => /* @__PURE__ */ y(
+      Z,
+      {
+        sx: { padding: `${n(14)} ${n(16)}`, display: "flex", flexDirection: "column", gap: n(4) },
+        children: [
+          /* @__PURE__ */ r(Y, { size: 10, children: p.label }),
+          /* @__PURE__ */ r(S, { size: 28, weight: 700, color: e.primary, sx: { lineHeight: 1 }, children: p.value }),
+          /* @__PURE__ */ r(S, { size: 11, font: "secondary", color: e.dim, children: p.sub })
+        ]
+      },
+      p.label
+    )) }),
+    /* @__PURE__ */ y(h, { sx: { display: "grid", gridTemplateColumns: fe, gap: n(12) }, children: [
+      /* @__PURE__ */ y(se, { children: [
+        /* @__PURE__ */ r(Y, { children: l("outcomeTitle") }),
+        /* @__PURE__ */ r(Ne, { height: 14, widths: x.map((p) => ({ w: B(p.n, f), color: p.color })) }),
+        /* @__PURE__ */ r(h, { sx: { display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: n(8) }, children: x.map((p) => /* @__PURE__ */ y(
+          h,
+          {
+            sx: {
+              display: "flex",
+              flexDirection: "column",
+              gap: n(2),
+              textAlign: "left",
+              borderLeft: `3px solid ${p.color}`,
+              paddingLeft: n(8)
+            },
+            children: [
+              m(`${B(p.n, f)}%`),
+              /* @__PURE__ */ r(S, { size: 11, font: "secondary", color: e.dim, sx: { marginTop: n(3, 11) }, children: p.label }),
+              /* @__PURE__ */ r(S, { size: 11, font: "secondary", color: e.body, children: w(p.n) })
+            ]
+          },
+          p.label
+        )) })
+      ] }),
+      /* @__PURE__ */ y(se, { children: [
+        /* @__PURE__ */ y(h, { sx: { display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: n(8) }, children: [
+          /* @__PURE__ */ r(Y, { children: l("goalTimingTitle") }),
+          /* @__PURE__ */ y(S, { size: 11, font: "secondary", color: e.dim, children: [
+            l("firstHalf"),
+            " ",
+            /* @__PURE__ */ r(h, { component: "b", sx: { color: e.text }, children: g.firstHalfGoals }),
+            " ",
+            "· ",
+            l("secondHalf"),
+            " ",
+            /* @__PURE__ */ r(h, { component: "b", sx: { color: e.text }, children: g.secondHalfGoals })
+          ] })
+        ] }),
+        /* @__PURE__ */ r(
+          Ne,
+          {
+            height: 8,
+            widths: [
+              { w: B(g.firstHalfGoals, g.goals), color: e.primaryContainer },
+              { w: B(g.secondHalfGoals, g.goals), color: e.primary }
+            ]
+          }
+        ),
+        /* @__PURE__ */ r(
+          h,
+          {
+            sx: {
+              display: "grid",
+              gridTemplateColumns: "repeat(6,1fr)",
+              gap: n(6),
+              alignItems: "end",
+              height: n(72)
+            },
+            children: g.goalsByPeriod.map((p, _) => /* @__PURE__ */ y(
+              h,
+              {
+                sx: {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  gap: n(3),
+                  height: "100%",
+                  justifyContent: "flex-end"
+                },
+                children: [
+                  /* @__PURE__ */ r(S, { size: 11, font: "secondary", weight: 700, color: e.text, children: p }),
+                  /* @__PURE__ */ r(
+                    h,
+                    {
+                      sx: {
+                        width: "100%",
+                        height: n(Math.max(6, Math.round(p / $ * 56))),
+                        borderRadius: `${t.xs} ${t.xs} 0 0`,
+                        backgroundColor: p === $ ? e.primary : e.tint2
+                      }
+                    }
+                  )
+                ]
+              },
+              Oe[_]
+            ))
+          }
+        ),
+        /* @__PURE__ */ r(h, { sx: { display: "grid", gridTemplateColumns: "repeat(6,1fr)", gap: n(6) }, children: Oe.map((p) => /* @__PURE__ */ r(S, { size: 10, font: "secondary", color: e.dim, sx: { textAlign: "center", unicodeBidi: "isolate" }, children: p }, p)) })
+      ] })
+    ] }),
+    /* @__PURE__ */ y(h, { sx: { display: "grid", gridTemplateColumns: fe, gap: n(12) }, children: [
+      /* @__PURE__ */ y(se, { children: [
+        /* @__PURE__ */ r(Y, { children: l("scoringTitle") }),
+        v.map((p) => /* @__PURE__ */ y(
+          h,
+          {
+            sx: {
+              display: "grid",
+              gridTemplateColumns: `${n(150)} 1fr ${n(44)}`,
+              alignItems: "center",
+              gap: n(10)
+            },
+            children: [
+              /* @__PURE__ */ r(S, { size: 12, font: "secondary", weight: 500, color: e.body, ellipsis: !0, children: p.label }),
+              /* @__PURE__ */ r(h, { sx: { height: n(8), borderRadius: t.full, backgroundColor: e.variant, overflow: "hidden" }, children: /* @__PURE__ */ r(h, { sx: { height: "100%", width: `${p.pct}%`, backgroundColor: e.primary, borderRadius: t.full } }) }),
+              /* @__PURE__ */ r(S, { size: 12, font: "secondary", weight: 700, color: e.text, sx: { textAlign: "right" }, children: `${p.pct}%` })
+            ]
+          },
+          p.label
+        ))
+      ] }),
+      /* @__PURE__ */ y(se, { children: [
+        /* @__PURE__ */ r(Y, { children: l("averagesTitle") }),
+        /* @__PURE__ */ y(h, { sx: { display: "grid", gridTemplateColumns: "repeat(2,1fr)", gap: n(8) }, children: [
+          /* @__PURE__ */ r(
+            ie,
+            {
+              caption: l("avgShotsOnTarget"),
+              icon: /* @__PURE__ */ y("svg", { ...ae, children: [
+                /* @__PURE__ */ r("circle", { cx: "12", cy: "12", r: "10" }),
+                /* @__PURE__ */ r("circle", { cx: "12", cy: "12", r: "6" }),
+                /* @__PURE__ */ r("circle", { cx: "12", cy: "12", r: "2" })
+              ] }),
+              children: m(b(g.shotsOnTarget))
+            }
+          ),
+          /* @__PURE__ */ r(
+            ie,
+            {
+              caption: l("avgCorners"),
+              icon: /* @__PURE__ */ y("svg", { ...ae, children: [
+                /* @__PURE__ */ r("path", { d: "M4 22V4" }),
+                /* @__PURE__ */ r("path", { d: "M4 4h12l-3 4 3 4H4" }),
+                /* @__PURE__ */ r("path", { d: "M2 22h6" })
+              ] }),
+              children: m(b(g.corners))
+            }
+          ),
+          /* @__PURE__ */ r(
+            ie,
+            {
+              caption: l("avgCards"),
+              icon: /* @__PURE__ */ r("svg", { ...ae, children: /* @__PURE__ */ r("rect", { x: "6", y: "3", width: "12", height: "18", rx: "2" }) }),
+              children: m(b(g.yellowCards + g.redCards))
+            }
+          ),
+          /* @__PURE__ */ r(
+            ie,
+            {
+              caption: l("avgGoalsByHalf"),
+              icon: /* @__PURE__ */ y("svg", { ...ae, children: [
+                /* @__PURE__ */ r("circle", { cx: "12", cy: "12", r: "10" }),
+                /* @__PURE__ */ r("path", { d: "M12 2a10 10 0 0 1 0 20z", fill: "currentColor", stroke: "none", opacity: ".35" }),
+                /* @__PURE__ */ r("path", { d: "M12 2v20" })
+              ] }),
+              children: /* @__PURE__ */ y(h, { sx: { display: "flex", alignItems: "baseline", gap: n(4) }, children: [
+                m(b(g.firstHalfGoals)),
+                /* @__PURE__ */ r(S, { size: 11, font: "secondary", color: e.dim, children: "/" }),
+                m(b(g.secondHalfGoals))
+              ] })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ y(
+          h,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: n(12),
+              borderTop: `1px solid ${e.border}`,
+              paddingTop: n(12),
+              flexWrap: "wrap"
+            },
+            children: [
+              /* @__PURE__ */ r(Y, { children: l("totalCards") }),
+              /* @__PURE__ */ r(h, { sx: { display: "flex", gap: n(20) }, children: [
+                { n: g.yellowCards, color: e.yellowCard, key: "yellow" },
+                { n: g.redCards, color: e.danger, key: "red" }
+              ].map((p) => /* @__PURE__ */ y(h, { sx: { display: "flex", alignItems: "center", gap: n(10) }, children: [
+                /* @__PURE__ */ y(h, { component: "span", sx: { position: "relative", width: n(22), height: n(26), flexShrink: 0 }, children: [
+                  /* @__PURE__ */ r(
+                    h,
+                    {
+                      component: "span",
+                      sx: {
+                        position: "absolute",
+                        left: 0,
+                        top: n(4),
+                        width: n(14),
+                        height: n(20),
+                        borderRadius: "3px",
+                        backgroundColor: p.color,
+                        opacity: 0.45,
+                        transform: "rotate(-12deg)"
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ r(
+                    h,
+                    {
+                      component: "span",
+                      sx: {
+                        position: "absolute",
+                        left: n(6),
+                        top: 0,
+                        width: n(14),
+                        height: n(20),
+                        borderRadius: "3px",
+                        backgroundColor: p.color,
+                        boxShadow: "0 1px 3px rgba(0,0,0,.2)"
+                      }
+                    }
+                  )
+                ] }),
+                m(p.n, 20)
+              ] }, p.key)) })
+            ]
+          }
+        )
+      ] })
+    ] }),
+    A.length ? /* @__PURE__ */ r(
+      h,
+      {
+        sx: {
+          display: "grid",
+          gridTemplateColumns: "repeat(12, minmax(0, 1fr))",
+          gap: n(12)
+        },
+        children: A.map((p, _) => {
+          const k = ye(u.teamCTA, "team", p.teamId);
+          return /* @__PURE__ */ y(
+            Z,
+            {
+              component: k != null && k.href ? "a" : "div",
+              href: (k == null ? void 0 : k.href) ?? void 0,
+              target: k == null ? void 0 : k.target,
+              onClick: k == null ? void 0 : k.onClick,
+              sx: {
+                padding: `${n(12)} ${n(14)}`,
+                display: "flex",
+                alignItems: "center",
+                gap: n(10),
+                cursor: M ? "pointer" : "default",
+                gridColumn: `span ${Ao(_, A.length, o, s)}`,
+                textDecoration: "none",
+                color: "inherit",
+                "&:hover": { backgroundColor: M ? e.onSurface : e.surface }
+              },
+              children: [
+                /* @__PURE__ */ r(j, { url: a.logo(p.teamId), size: 36 }),
+                /* @__PURE__ */ y(h, { sx: { minWidth: 0, flex: 1 }, children: [
+                  /* @__PURE__ */ r(Y, { size: 10, sx: { display: "block" }, children: p.label }),
+                  /* @__PURE__ */ r(S, { component: "div", size: 13, weight: 700, color: e.text, ellipsis: !0, cms: !0, children: a.name(p.teamId) })
+                ] }),
+                /* @__PURE__ */ y(h, { sx: { textAlign: "right", flexShrink: 0 }, children: [
+                  /* @__PURE__ */ r(S, { component: "div", size: 22, weight: 700, color: e.primary, sx: { lineHeight: 1 }, children: p.value }),
+                  /* @__PURE__ */ r(S, { component: "div", size: 10, font: "secondary", color: e.dim, sx: { marginTop: n(2, 10) }, children: p.unit })
+                ] })
+              ]
+            },
+            p.label
+          );
+        })
+      }
+    ) : null,
+    R.length ? /* @__PURE__ */ r(h, { sx: { display: "grid", gridTemplateColumns: fe, gap: n(12) }, children: R.map(({ label: p, match: _ }) => {
+      const k = ye(u.matchCTA, "match", _.id), [V, q] = _.fullTime ?? [0, 0];
+      return /* @__PURE__ */ y(
+        Z,
+        {
+          component: k != null && k.href ? "a" : "div",
+          href: (k == null ? void 0 : k.href) ?? void 0,
+          target: k == null ? void 0 : k.target,
+          onClick: k == null ? void 0 : k.onClick,
+          sx: {
+            padding: `${n(12)} ${n(16)}`,
+            display: "flex",
+            flexDirection: "column",
+            gap: n(8),
+            cursor: G ? "pointer" : "default",
+            textDecoration: "none",
+            color: "inherit",
+            "&:hover": { backgroundColor: G ? e.onSurface : e.surface }
+          },
+          children: [
+            /* @__PURE__ */ y(Y, { size: 10, sx: { display: "flex", justifyContent: "space-between" }, children: [
+              /* @__PURE__ */ r("span", { children: p }),
+              /* @__PURE__ */ r("span", { children: l("recordRound", {
+                round: _.round,
+                date: c.date(_.start, { day: "2-digit", month: "2-digit" })
+              }) })
+            ] }),
+            /* @__PURE__ */ y(
+              h,
+              {
+                sx: {
+                  display: "grid",
+                  gridTemplateColumns: "minmax(0,1fr) auto minmax(0,1fr)",
+                  alignItems: "center",
+                  gap: n(8)
+                },
+                children: [
+                  /* @__PURE__ */ y(h, { sx: { display: "flex", alignItems: "center", justifyContent: "flex-end", gap: n(8), minWidth: 0 }, children: [
+                    /* @__PURE__ */ r(S, { size: 13, weight: 600, color: e.text, ellipsis: !0, cms: !0, children: a.name(_.home.id) }),
+                    /* @__PURE__ */ r(j, { url: a.logo(_.home.id), size: 28 })
+                  ] }),
+                  /* @__PURE__ */ r(
+                    S,
+                    {
+                      size: 18,
+                      weight: 700,
+                      color: e.text,
+                      sx: {
+                        letterSpacing: n(1, 18),
+                        backgroundColor: e.onSurface,
+                        borderRadius: t.sm,
+                        padding: `${n(4, 18)} ${n(10, 18)}`
+                      },
+                      children: `${V} : ${q}`
+                    }
+                  ),
+                  /* @__PURE__ */ y(h, { sx: { display: "flex", alignItems: "center", gap: n(8), minWidth: 0 }, children: [
+                    /* @__PURE__ */ r(j, { url: a.logo(_.away.id), size: 28 }),
+                    /* @__PURE__ */ r(S, { size: 13, weight: 600, color: e.text, ellipsis: !0, cms: !0, children: a.name(_.away.id) })
+                  ] })
+                ]
+              }
+            )
+          ]
+        },
+        p
+      );
+    }) }) : null
+  ] });
+}, zo = ["header", "matches", "players", "season"], Do = 3e4, Po = (e) => {
+  const {
+    entityId: t,
+    sdk: o,
+    language: s,
+    seasonId: i,
+    stageId: a,
+    sections: d = zo,
+    liveRefresh: l = !0,
+    refreshInterval: c = Do,
+    labels: u
+  } = e, { colors: g, fonts: f } = W(), w = io(u), b = z.useMemo(() => ro(s), [s]), { data: m, competitionId: I, entities: x, loading: $, error: v } = Jt(
+    o,
+    t,
+    s,
+    "–",
+    { seasonId: i, stageId: a, liveRefresh: l, refreshInterval: c }
+  ), E = z.useMemo(() => m ? m.matches.filter(we) : [], [m]), D = z.useMemo(() => Qt(E), [E]), M = Array.from(new Set(d)), A = (T) => /* @__PURE__ */ r(Z, { sx: { padding: n(24) }, children: /* @__PURE__ */ r(S, { component: "div", size: 14, font: "secondary", color: g.dim, sx: { textAlign: "center" }, children: T }) });
+  let L;
+  return $ ? L = /* @__PURE__ */ r(St, { my: 10 }) : v ? L = A(w("loadFailed")) : !m || m.matches.length === 0 ? L = A(w("noData")) : L = /* @__PURE__ */ r(
+    ao,
+    {
+      value: { sdk: o, data: m, competitionId: I, entities: x, finished: E, tally: D, label: w, fmt: b, props: e },
+      children: M.map((T) => T === "header" ? /* @__PURE__ */ r(lo, {}, T) : T === "matches" ? /* @__PURE__ */ r(Ro, {}, T) : T === "players" ? m.athletes.length ? /* @__PURE__ */ r(mo, {}, T) : null : T === "season" ? /* @__PURE__ */ r(Lo, {}, T) : null)
+    }
+  ), /* @__PURE__ */ r(
+    h,
+    {
+      sx: {
+        fontSize: "1em",
+        fontFamily: f.primary,
+        color: g.text,
+        lineHeight: "normal",
+        display: "flex",
+        flexDirection: "column",
+        gap: n(16)
+      },
+      children: L
+    }
+  );
+}, Wo = (e) => {
+  const [t, o] = z.useState(!1), [s, i] = z.useState(!1), a = mt(e.language), d = z.useRef(
+    `competition-statistics-shadow-root-${Math.random().toString(36).substring(2, 11)}`
+  ), l = z.useRef(null), c = z.useRef(null), u = z.useRef(null), [g, f] = z.useState(null);
+  z.useEffect(() => {
+    ht(e.language || "en").finally(() => i(!0));
+  }, [e.language]), z.useEffect(() => {
+    if (!l.current) return;
+    l.current.shadowRoot ? (c.current = l.current.shadowRoot, u.current = c.current.getElementById(
+      d.current
+    ), u.current || (u.current = document.createElement("div"), u.current.id = d.current, u.current.style.height = "100%", c.current.appendChild(u.current))) : (c.current = l.current.attachShadow({ mode: "open" }), u.current = document.createElement("div"), u.current.id = d.current, u.current.style.height = "100%", c.current.appendChild(u.current)), gt(u.current, a);
+    const I = Ct("competition-statistics", a);
+    return f(
+      (x) => (x == null ? void 0 : x.key) === I ? x : ft(
+        "competition-statistics",
+        c.current,
+        a
+      )
+    ), o(!0), () => {
+      o(!1);
+    };
+  }, [a]);
+  const w = e.themeOptions, b = /* @__PURE__ */ r(h, { ref: l, sx: { height: "100%", display: "block" } }), m = t && s && u.current && g ? It(
+    // Keyed on the cache, not on `direction`: it must change in the same render that adopts
+    // the new cache, or CssVarsProvider writes its CSS variables into the outgoing cache and
+    // never repeats.
+    /* @__PURE__ */ r(yt, { value: g, children: /* @__PURE__ */ r(xt, { containerRef: l, children: /* @__PURE__ */ r(
+      bt,
+      {
+        customTheme: w,
+        mode: w == null ? void 0 : w.mode,
+        shadowRootElement: u.current,
+        direction: a,
+        children: /* @__PURE__ */ y(
+          wt,
+          {
+            shadowRootElement: u.current,
+            leadPhoneCountryCode: null,
+            language: e.language,
+            optionsLayout: null,
+            direction: a,
+            children: [
+              /* @__PURE__ */ r(
+                Mt,
+                {
+                  styles: {
+                    "@keyframes cs-pulse": {
+                      "0%, 100%": { opacity: 1, transform: "scale(1)" },
+                      "50%": { opacity: 0.4, transform: "scale(.7)" }
+                    }
+                  }
+                }
+              ),
+              e.children
+            ]
+          }
+        )
+      }
+    ) }) }, g.key),
+    u.current
+  ) : null;
+  return /* @__PURE__ */ y(pe, { children: [
+    b,
+    m
+  ] });
+}, Oo = (e) => /* @__PURE__ */ r(Wo, { ...e, children: /* @__PURE__ */ r(Po, { ...e }) }), Jo = Oo;
+export {
+  Jo as CompetitionStatistics
+};