fansunited-frontend-components 0.0.84 → 0.0.86

package/Discussion.js

@@ -1,4 +1,4 @@
-import { M as o } from "./chunks/main-Daa4Ys1b.js";
+import { M as o } from "./chunks/main-CpXKD7Ei.js";
 const i = o;
 export {
   i as Discussion

package/EitherOrPlay.js

@@ -1,4 +1,4 @@
-import { M as r } from "./chunks/main-fcnxBtBe.js";
+import { M as r } from "./chunks/main-RD9fUvtz.js";
 const t = r;
 export {
   t as EitherOrPlay

package/EventCard.js

@@ -1,22 +1,22 @@
 import { jsxs as p, Fragment as G, jsx as r } from "react/jsx-runtime";
 import K, { useRef as Se, useState as D, useCallback as we, useEffect as fe, useMemo as de, useContext as zn, useLayoutEffect as Pn } from "react";
-import { g as on, u as rn, b as Dn, v as an, A as Mn, B as l, z as bt, a as me, f as Gn, d as Hn, y as et, O as Un, n as Bn, i as St, p as jn, o as Vn, q as Kn, r as Yn, C as Xn, s as Qn, E as qn, t as Zn, w as Jn } from "./chunks/PrizeCard-Csw_wrFV.js";
-import { S as eo } from "./chunks/Spinner-DEf9YWy9.js";
+import { g as on, u as rn, b as Dn, v as an, A as Mn, B as l, z as bt, a as me, f as Gn, d as Hn, y as et, O as Un, n as Bn, i as St, p as jn, o as Vn, q as Kn, r as Yn, C as Xn, s as Qn, E as qn, t as Zn, w as Jn } from "./chunks/PrizeCard-CwEzUVMJ.js";
+import { S as eo } from "./chunks/Spinner-DBETUiAV.js";
 import { createPortal as wt } from "react-dom";
-import { h as Me } from "./chunks/helpers-BqT5Gaj_.js";
-import { E as ft } from "./chunks/EmojiEvents-D6ZqjCfo.js";
-import { T as O } from "./chunks/Typography-BdToTTZ6.js";
-import { S as rt } from "./chunks/Sheet-Dxmq7lcU.js";
-import { T as to } from "./chunks/Tooltip-B8-odXDM.js";
-import { K as Pe, a as no } from "./chunks/KeyboardArrowDown-Ck_KYBP0.js";
-import { c as Ue } from "./chunks/createSvgIcon-vBfsa1Jk.js";
-import { I as oo } from "./chunks/InlineSpinner-vEetFsB9.js";
-import { N as ro } from "./chunks/Notification-B4yx2-ti.js";
-import { C as tt, E as io, D as It, S as ao, a as so } from "./chunks/SportsSoccer-Bjfc11jt.js";
-import { K as lo, a as co } from "./chunks/KeyboardArrowRight-Da1F75tc.js";
-import { P as mo } from "./chunks/PersonOutline-Z5sidQSN.js";
-import { P as sn } from "./chunks/Person-C3mqI-IY.js";
-import { G as uo } from "./chunks/GlobalStyles-BNqsKbp3.js";
+import { h as Me } from "./chunks/helpers-BVcELFvC.js";
+import { E as ft } from "./chunks/EmojiEvents-DFNrzPuy.js";
+import { T as O } from "./chunks/Typography-Du02dCpZ.js";
+import { S as rt } from "./chunks/Sheet-DVdyMkHi.js";
+import { T as to } from "./chunks/Tooltip-BaFJF8Hm.js";
+import { K as Pe, a as no } from "./chunks/KeyboardArrowDown-p7zQXgQW.js";
+import { c as Ue } from "./chunks/createSvgIcon-BkXgNHbb.js";
+import { I as oo } from "./chunks/InlineSpinner-BDGu6S9a.js";
+import { N as ro } from "./chunks/Notification-DEfeZ_zB.js";
+import { C as tt, E as io, D as It, S as ao, a as so } from "./chunks/SportsSoccer-DGQ7NYD7.js";
+import { K as lo, a as co } from "./chunks/KeyboardArrowRight-CxFWmjUb.js";
+import { P as mo } from "./chunks/PersonOutline-DylGIHBz.js";
+import { P as sn } from "./chunks/Person-BvTGLIe1.js";
+import { G as uo } from "./chunks/GlobalStyles-DMO_VrN7.js";
 const it = ({
   title: e,
   children: n,

package/EventGamePlay.js

@@ -1,4 +1,4 @@
-import { M as a } from "./chunks/main-B_jPxpdH.js";
+import { M as a } from "./chunks/main-CpERt7cC.js";
 const t = a;
 export {
   t as EventGamePlay

package/Leaderboard.js

@@ -1,19 +1,19 @@
 import { jsxs as E, jsx as l, Fragment as ce } from "react/jsx-runtime";
 import z, { useState as B, useEffect as Q, useCallback as me, useMemo as D } from "react";
-import { a as X, b as fe, v as he, x as ge, g as G, f as de, u as O, d as j, B as L, c as ue, m as be, p as ye, o as xe, q as Ce, r as ve, C as Te, s as Pe, E as Se, t as we, w as Ee } from "./chunks/PrizeCard-Csw_wrFV.js";
+import { a as X, b as fe, v as he, x as ge, g as G, f as de, u as O, d as j, B as L, c as ue, m as be, p as ye, o as xe, q as Ce, r as ve, C as Te, s as Pe, E as Se, t as we, w as Ee } from "./chunks/PrizeCard-CwEzUVMJ.js";
 import { createPortal as Ae } from "react-dom";
-import { A as J } from "./chunks/AlertMessage-BWlMSgbb.js";
-import { F as Ie } from "./chunks/FormLabel-Ch_UsZuc.js";
-import { T as R } from "./chunks/Typography-BdToTTZ6.js";
-import { S as Re, a as Le } from "./chunks/Select-VVas3KeU.js";
-import { P as ee } from "./chunks/Person-C3mqI-IY.js";
-import { h as U, a as Me } from "./chunks/helpers-BqT5Gaj_.js";
-import { S as ze } from "./chunks/Spinner-DEf9YWy9.js";
-import { S as Be } from "./chunks/Sheet-Dxmq7lcU.js";
-import { T as Fe } from "./chunks/Table-1CWAmBw4.js";
-import { A as te } from "./chunks/Avatar-Cl7jUti0.js";
-import { D as H } from "./chunks/DirectionScope-BIc7TWs5.js";
-import { I as k, B as re } from "./chunks/Button-BF5yQrSB.js";
+import { A as J } from "./chunks/AlertMessage-mdjyklCX.js";
+import { F as Ie } from "./chunks/FormLabel-BSFhHZnm.js";
+import { T as R } from "./chunks/Typography-Du02dCpZ.js";
+import { S as Re, a as Le } from "./chunks/Select-oNgIy1H3.js";
+import { P as ee } from "./chunks/Person-BvTGLIe1.js";
+import { h as U, a as Me } from "./chunks/helpers-BVcELFvC.js";
+import { S as ze } from "./chunks/Spinner-DBETUiAV.js";
+import { S as Be } from "./chunks/Sheet-DVdyMkHi.js";
+import { T as Fe } from "./chunks/Table-Dk1ukQa6.js";
+import { A as te } from "./chunks/Avatar-D3yp-aRF.js";
+import { D as H } from "./chunks/DirectionScope-naCviTG1.js";
+import { I as k, B as re } from "./chunks/Button-Ba88lSnz.js";
 import { C as Ue, a as $e } from "./chunks/chevrons-right-CXSpQt9w.js";
 import { C as Qe } from "./chunks/chevron-left-CxfCSZcr.js";
 import { C as He } from "./chunks/chevron-right-BEQMacFn.js";

package/List.js

@@ -1,21 +1,21 @@
 import { jsx as o, jsxs as E } from "react/jsx-runtime";
 import * as V from "react";
 import { useState as A, useRef as z, useCallback as W, useEffect as at, lazy as H, Suspense as ct } from "react";
-import { F as lt, G as dt, H as pt, _ as $, I as mt, P as h, g as ut, u as ft, f as ht, d as gt, a as J, i as et, B as x, b as yt, v as Ct } from "./chunks/PrizeCard-Csw_wrFV.js";
+import { F as lt, G as dt, H as pt, _ as $, I as mt, P as h, g as ut, u as ft, f as ht, d as gt, a as J, i as et, B as x, b as yt, v as Ct } from "./chunks/PrizeCard-CwEzUVMJ.js";
 import "react-dom";
-import { P as xt } from "./chunks/Portal-BTnSMBHa.js";
-import { S as nt } from "./chunks/Spinner-DEf9YWy9.js";
-import { a as It } from "./chunks/index-wQVvSbKD.js";
-import { C as bt } from "./chunks/Card-DZnMgLzk.js";
-import { s as St, b as wt, c as Tt, d as Pt, T as D } from "./chunks/Typography-BdToTTZ6.js";
-import { C as Et } from "./chunks/CardContent-B3da1XGq.js";
-import { C as vt } from "./chunks/Chip-04IiPdT5.js";
+import { P as xt } from "./chunks/Portal-IratSYID.js";
+import { S as nt } from "./chunks/Spinner-DBETUiAV.js";
+import { a as It } from "./chunks/index-Jo_fbxsQ.js";
+import { C as bt } from "./chunks/Card-ZbfN9iNz.js";
+import { s as St, b as wt, c as Tt, d as Pt, T as D } from "./chunks/Typography-Du02dCpZ.js";
+import { C as Et } from "./chunks/CardContent-DxoVbjf2.js";
+import { C as vt } from "./chunks/Chip-dm_ka0yY.js";
 import { U as Mt } from "./chunks/users-wbJRbqW8.js";
 import { W as Ut } from "./chunks/enums-B1lTCQvC.js";
-import { M as Lt, a as Rt } from "./chunks/ModalDialog-B85LoQPY.js";
-import { M as _t } from "./chunks/ModalClose-u-S-dkR3.js";
-import { D as k } from "./chunks/DirectionScope-BIc7TWs5.js";
-import { I as G, B as ot } from "./chunks/Button-BF5yQrSB.js";
+import { M as Lt, a as Rt } from "./chunks/ModalDialog-BfVORTO9.js";
+import { M as _t } from "./chunks/ModalClose-DvCxOJfi.js";
+import { D as k } from "./chunks/DirectionScope-naCviTG1.js";
+import { I as G, B as ot } from "./chunks/Button-Ba88lSnz.js";
 import { C as Ft, a as Ot } from "./chunks/chevrons-right-CXSpQt9w.js";
 import { C as zt } from "./chunks/chevron-left-CxfCSZcr.js";
 import { C as At } from "./chunks/chevron-right-BEQMacFn.js";
@@ -543,9 +543,9 @@ const rt = (e) => {
       ]
     }
   );
-}, qt = H(() => import("./chunks/index-C70XGGoo.js")), Jt = H(
-  () => import("./chunks/index-Bj52W3S8.js")
-), Xt = H(() => import("./chunks/index-Dy8p1aJG.js")), te = H(() => import("./chunks/index-B8BdDJ_-.js")), ee = H(() => import("./chunks/index-B4mpFAU6.js")), ne = H(() => import("./chunks/index-AigkdLMP.js")), oe = ({
+}, qt = H(() => import("./chunks/index-CwIKdVGP.js")), Jt = H(
+  () => import("./chunks/index-a8UF4nkE.js")
+), Xt = H(() => import("./chunks/index-Blkau85P.js")), te = H(() => import("./chunks/index-CnOFf4hs.js")), ee = H(() => import("./chunks/index-DjIGlrHG.js")), ne = H(() => import("./chunks/index-4WCNqsoq.js")), oe = ({
   item: e,
   open: n,
   onClose: t,

package/MatchQuizPlay.js

@@ -1,4 +1,4 @@
-import { M as a } from "./chunks/main-BodcBG7i.js";
+import { M as a } from "./chunks/main-DZoTUuoz.js";
 const t = a;
 export {
   t as MatchQuizPlay

package/PersonalityQuizPlay.js

@@ -1,4 +1,4 @@
-import { M as o } from "./chunks/main-D0W90-WP.js";
+import { M as o } from "./chunks/main-f7EUpatJ.js";
 const i = o;
 export {
   i as PersonalityQuizPlay

package/PickThePair.js

@@ -1,19 +1,19 @@
 import { jsx as t, jsxs as w, Fragment as K } from "react/jsx-runtime";
-import { g as Ie, h as se, e as We, l as De } from "./chunks/helpers-BqT5Gaj_.js";
+import { g as Ie, h as se, e as We, l as De } from "./chunks/helpers-BVcELFvC.js";
 import J, { useMemo as me, useCallback as Le, useEffect as de, useState as G } from "react";
-import { a as ne, i as Z, k as ze, f as ee, g as X, h as ge, B as x, u as re, l as Be, c as ue, d as te, m as ke, n as Ue, o as Ae, p as $e, q as _e, r as He, C as Ee, s as Oe, E as Me, t as je, w as Ne } from "./chunks/PrizeCard-Csw_wrFV.js";
+import { a as ne, i as Z, k as ze, f as ee, g as X, h as ge, B as x, u as re, l as Be, c as ue, d as te, m as ke, n as Ue, o as Ae, p as $e, q as _e, r as He, C as Ee, s as Oe, E as Me, t as je, w as Ne } from "./chunks/PrizeCard-CwEzUVMJ.js";
 import { P as le, W as fe } from "./chunks/enums-B1lTCQvC.js";
-import { S as Ve } from "./chunks/Spinner-DEf9YWy9.js";
+import { S as Ve } from "./chunks/Spinner-DBETUiAV.js";
 import { createPortal as Ye } from "react-dom";
 import { u as qe } from "./chunks/useInfoPage-BHdgKdme.js";
-import { N as Xe } from "./chunks/NotFoundSkeleton-CfNZmwRh.js";
-import { S as Ge, O as Ke } from "./chunks/OverlaySkeleton-Bs4cQ7IY.js";
-import { C as Qe } from "./chunks/CollectLeadForm-CNHJfqvi.js";
-import { u as he } from "./chunks/useImageVariant-Bv_ox-BF.js";
-import { T as p } from "./chunks/Typography-BdToTTZ6.js";
-import { T as Je } from "./chunks/TimerOutlined-565_o9Ld.js";
-import { B as pe } from "./chunks/Button-BF5yQrSB.js";
-import { d as Ze, a as et } from "./chunks/index-wQVvSbKD.js";
+import { N as Xe } from "./chunks/NotFoundSkeleton-CBL3Q0e2.js";
+import { S as Ge, O as Ke } from "./chunks/OverlaySkeleton-CYq0fXsc.js";
+import { C as Qe } from "./chunks/CollectLeadForm-CQLR-11r.js";
+import { u as he } from "./chunks/useImageVariant-DKmsQtyv.js";
+import { T as p } from "./chunks/Typography-Du02dCpZ.js";
+import { T as Je } from "./chunks/TimerOutlined-iVv_QE1G.js";
+import { B as pe } from "./chunks/Button-Ba88lSnz.js";
+import { d as Ze, a as et } from "./chunks/index-Jo_fbxsQ.js";
 const xe = ({
   sdk: e,
   contentId: n,

package/PlayerOfTheMatch.js

@@ -1,29 +1,29 @@
 import { jsx as o, jsxs as b, Fragment as de } from "react/jsx-runtime";
 import { useRef as we, useEffect as O, useState as I, useMemo as re } from "react";
-import { B as p, g as Ke, u as Xe, f as Ve, d as Ue, h as qe, a as H } from "./chunks/PrizeCard-Csw_wrFV.js";
+import { B as p, g as Ke, u as Xe, f as Ve, d as Ue, h as qe, a as H } from "./chunks/PrizeCard-CwEzUVMJ.js";
 import "react-dom";
-import { P as _e } from "./chunks/Portal-BTnSMBHa.js";
-import { h as U, c as me } from "./chunks/helpers-BqT5Gaj_.js";
-import { S as $e } from "./chunks/Spinner-DEf9YWy9.js";
-import { L as et } from "./chunks/Link-387Dz8iP.js";
-import { N as tt } from "./chunks/Notification-B4yx2-ti.js";
-import { D as Je } from "./chunks/DirectionScope-BIc7TWs5.js";
-import { I as be, B as _ } from "./chunks/Button-BF5yQrSB.js";
-import { C as ot, a as nt, S as rt } from "./chunks/Search-D-RjUXXT.js";
-import { T as f } from "./chunks/Typography-BdToTTZ6.js";
-import { C as Ee } from "./chunks/Card-DZnMgLzk.js";
-import { C as it } from "./chunks/CardContent-B3da1XGq.js";
-import { A as N } from "./chunks/Avatar-Cl7jUti0.js";
-import { C as st } from "./chunks/CardActions-CP8UZhKB.js";
+import { P as _e } from "./chunks/Portal-IratSYID.js";
+import { h as U, c as me } from "./chunks/helpers-BVcELFvC.js";
+import { S as $e } from "./chunks/Spinner-DBETUiAV.js";
+import { L as et } from "./chunks/Link-5-5Tkbsx.js";
+import { N as tt } from "./chunks/Notification-DEfeZ_zB.js";
+import { D as Je } from "./chunks/DirectionScope-naCviTG1.js";
+import { I as be, B as _ } from "./chunks/Button-Ba88lSnz.js";
+import { C as ot, a as nt, S as rt } from "./chunks/Search-B7BcOoCG.js";
+import { T as f } from "./chunks/Typography-Du02dCpZ.js";
+import { C as Ee } from "./chunks/Card-ZbfN9iNz.js";
+import { C as it } from "./chunks/CardContent-DxoVbjf2.js";
+import { A as N } from "./chunks/Avatar-D3yp-aRF.js";
+import { C as st } from "./chunks/CardActions-CmWWezXa.js";
 import { X as at } from "./chunks/x-CK4GYo7T.js";
-import { c as Se } from "./chunks/createSvgIcon-vBfsa1Jk.js";
-import { C as ct } from "./chunks/Close-BI5dwj8o.js";
-import { I as At } from "./chunks/Input-CrJDd0R2.js";
-import { C as fe } from "./chunks/Chip-04IiPdT5.js";
-import { S as K } from "./chunks/Stack-BZadM22I.js";
-import { A as Me } from "./chunks/AccessTime-DIng4pYk.js";
-import { C as lt } from "./chunks/CheckCircle-Ba6A-omo.js";
-import { S as gt } from "./chunks/Sheet-Dxmq7lcU.js";
+import { c as Se } from "./chunks/createSvgIcon-BkXgNHbb.js";
+import { C as ct } from "./chunks/Close-Da_jsGnv.js";
+import { I as At } from "./chunks/Input-Cb3solC7.js";
+import { C as fe } from "./chunks/Chip-dm_ka0yY.js";
+import { S as K } from "./chunks/Stack-CppwMpFB.js";
+import { A as Me } from "./chunks/AccessTime-DZsXIVlS.js";
+import { C as lt } from "./chunks/CheckCircle-BG2qEsq1.js";
+import { S as gt } from "./chunks/Sheet-DVdyMkHi.js";
 const Ye = Se(/* @__PURE__ */ o("path", {
   d: "M4.25 5.61C6.27 8.2 10 13 10 13v6c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-6s3.72-4.8 5.74-7.39c.51-.66.04-1.61-.79-1.61H5.04c-.83 0-1.3.95-.79 1.61"
 }), "FilterAlt"), mt = Se(/* @__PURE__ */ o("path", {

package/PollVote.js

@@ -1,4 +1,4 @@
-import { M as o } from "./chunks/main-Ctg8yMhU.js";
+import { M as o } from "./chunks/main-Che3VjMd.js";
 const r = o;
 export {
   r as PollVote

package/Predictor.js

@@ -1,4 +1,4 @@
-import { P as e } from "./chunks/Predictor-TCMMMhdo.js";
+import { P as e } from "./chunks/Predictor-C3Kr_dEA.js";
 export {
   e as Predictor
 };

package/README.md

@@ -3722,6 +3722,7 @@ Football score predictor component with two templates: the default **multi-tab**
 - Consent management with required/optional consent gates before predicting
 - Customisable banners in 6 positions within the Play tab (`"standard"` only)
 - Authentication-aware UI with configurable sign-in CTA
+- Opt-in betting odds on the match cards (`showOdds`), pinned to one operator with `operatorId` — see [Predictor Odds](#predictor-odds)
 - Built-in Betslip integration — renders the Betslip widget automatically via the `betslip` prop with two trigger modes
 - Custom theming and multi-language support
 
@@ -3748,6 +3749,8 @@ Football score predictor component with two templates: the default **multi-tab**
 | `playTabBanners`              | `PlayTabBanner[]`        | Custom banners rendered in the Play tab. Ignored by `"embed"`                                     |
 | `consents`                    | `ConsentDef[]`           | Consent definitions required before predicting                                                    |
 | `matchCardBgImageUrl`         | `string`                 | Background image URL for match prediction cards. Ignored by `"embed"`                             |
+| `showOdds`                    | `boolean`                | Render betting odds on the match cards (default: false). While false the odds request is skipped, so an `"odds-only"` betslip needs this set |
+| `operatorId`                  | `string`                 | Operator config id to show odds from, e.g. `"betano-bg"`. Unset, each match shows the first operator listed. Falls back to `betslip.operatorId`, and the Betslip falls back to it |
 | `betslip`                     | `PredictorBetslipConfig` | Betslip integration config. Omit to disable. See [Betslip Integration](#betslip-integration)      |
 | `callbacks`                   | `PredictorCallbacks`     | `onEvent` — one observer for every journey event the component emits. See [Analytics](#analytics)  |
 
@@ -3992,6 +3995,27 @@ const consents: ConsentDef[] = [
 - Optional consents are shown in the same modal but do not block progression
 - Once accepted, consents are stored and the modal does not reappear
 
+#### Predictor Odds
+
+Odds are off by default. With `showOdds` set, each upcoming match card shows full-time 1X2 odds from one operator, refreshed while a match is live — in the Play tab, the `embed` card and a league member's predictions. Odds fail silently: when the odds API has no prices for a match, the card simply shows none.
+
+- **`showOdds`** — while it is false (the default) the odds request is skipped altogether. A betslip with `trigger: "odds-only"` is fed by clicking those odds, so that trigger needs `showOdds` set.
+- **`operatorId`** pins the odds to one operator. It is sent to the odds request as the SDK's `operators` filter, so the response is narrowed server-side. Without it, each match shows whichever operator the response lists first, which is not guaranteed to stay the same. A match the chosen operator doesn't price shows no odds; it does not fall back to another operator.
+
+```tsx
+<Predictor entityId="..." sdk={sdk} language="en" showOdds operatorId="betano-bg" />
+```
+
+`operatorId` and `betslip.operatorId` resolve against each other, so the card and the betslip show the same operator unless you set both to different values:
+
+| You set              | Card odds            | Betslip              |
+| -------------------- | -------------------- | -------------------- |
+| `operatorId`         | `operatorId`         | `operatorId`         |
+| `betslip.operatorId` | `betslip.operatorId` | `betslip.operatorId` |
+| Both                 | `operatorId`         | `betslip.operatorId` |
+
+See [Choosing a Bookmaker](#choosing-a-bookmaker) for the list of available operator ids.
+
 #### Betslip Integration
 
 When the `betslip` prop is provided, the Predictor automatically renders a `Betslip` widget as a sibling alongside its own UI — you do not need to add a separate `<Betslip />` component to the page. The widget is configured entirely through `PredictorBetslipConfig`.
@@ -4023,7 +4047,7 @@ const betslipConfig: PredictorBetslipConfig = {
 | `currency`            | `string`                  | `"€"`                | Currency symbol                                                                           |
 | `ctaUrlTemplate`      | `string`                  | —                    | Bookmaker deep-link URL with `{placeholder}` substitution                                 |
 | `brandingLogoUrl`     | `string`                  | —                    | Operator logo URL                                                                         |
-| `operatorId`          | `string`                  | —                    | Operator config id the Betslip requests odds for, e.g. `"betano-bg"`                      |
+| `operatorId`          | `string`                  | —                    | Operator config id the Betslip requests odds for, e.g. `"betano-bg"`. Falls back to the top-level `operatorId` |
 | `affiliateId`         | `string`                  | —                    | Affiliate id substituted into the operator's URLs                                         |
 | `labels`              | `BetslipLabels`           | —                    | UI text overrides                                                                         |
 | `themeOptions`        | `CustomThemeOptions`      | —                    | Theme for the Betslip widget. Falls back to the Predictor's `themeOptions` when omitted   |
@@ -4039,7 +4063,7 @@ type PredictorBetslipTrigger =
 | Mode                  | When selections are sent                                                                                                                                                                                                                       |
 | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `"predictions-only"`  | Every time the user edits a score (home/away increment or decrement). If the user submits without editing (e.g. a default 0:0), the selection is sent at submit time as a fallback. Derived outcome: `"1"` (home win), `"X"` (draw), `"2"` (away win). |
-| `"odds-only"`         | Only when the user clicks an odds button on the post-submit odds display. The odds button becomes a command-bus trigger instead of a direct bookmaker link.                                                                                     |
+| `"odds-only"`         | Only when the user clicks an odds button on the post-submit odds display. The odds button becomes a command-bus trigger instead of a direct bookmaker link. Requires `showOdds`.                                                                 |
 
 **Selection format sent by Predictor:**
 
@@ -4241,6 +4265,7 @@ Selections are sent only when the user explicitly clicks an odds button on the p
   sdk={sdkInstance}
   language="en"
   userIsLoggedIn={true}
+  showOdds={true}
   betslip={{
     trigger: "odds-only",
     position: "bottom-right",
@@ -4294,6 +4319,7 @@ Full-featured competitive picks predictor component with a multi-tab interface f
 - Consent management with required/optional consent gates before predicting
 - Customisable banners in the Play tab
 - Authentication-aware UI with configurable sign-in CTA
+- Opt-in betting odds on the match cards (`showOdds`), pinned to one operator with `operatorId` — see [TopX Odds](#topx-odds)
 - Built-in Betslip integration via the `betslip` prop
 - Custom theming and multi-language support
 
@@ -4317,6 +4343,8 @@ Full-featured competitive picks predictor component with a multi-tab interface f
 | `playTabBanners`             | `PlayTabBanner[]`      | —              | Custom banners rendered in the Play tab             |
 | `consents`                   | `ConsentDef[]`         | —              | Consent definitions required before predicting      |
 | `matchCardBgImageUrl`        | `string`               | —              | Background image URL for match prediction cards     |
+| `showOdds`                   | `boolean`              | `false`        | Render betting odds on the match cards. While false the odds request is skipped, so an `"odds-only"` betslip needs this set |
+| `operatorId`                 | `string`               | —              | Operator config id to show odds from, e.g. `"betano-bg"`. Unset, each match shows the first operator listed. Falls back to `betslip.operatorId`, and the Betslip falls back to it |
 | `betslip`                    | `TopXBetslipConfig`    | —              | Betslip integration config. Omit to disable.        |
 | `showCountdown`              | `boolean`              | `true`         | Show predictions-close countdown timer on open games |
 | `gameNavLabel`               | `TopXGameNavLabel`     | `"gameWeek"`   | Controls how each game is labelled in the navigation. See [Game Navigation Label](#game-navigation-label) |
@@ -4457,6 +4485,27 @@ const consents: ConsentDef[] = [
 <TopX {...otherProps} consents={consents} />;
 ```
 
+#### TopX Odds
+
+Odds are off by default. With `showOdds` set, each upcoming match card shows full-time 1X2 odds from one operator, refreshed while a match is live — in the Play tab and in a league member's predictions. Odds fail silently: when the odds API has no prices for a match, the card simply shows none.
+
+- **`showOdds`** — while it is false (the default) the odds request is skipped altogether. A betslip with `trigger: "odds-only"` is fed by clicking those odds, so that trigger needs `showOdds` set.
+- **`operatorId`** pins the odds to one operator. It is sent to the odds request as the SDK's `operators` filter, so the response is narrowed server-side. Without it, each match shows whichever operator the response lists first, which is not guaranteed to stay the same. A match the chosen operator doesn't price shows no odds; it does not fall back to another operator.
+
+```tsx
+<TopX entityId="..." sdk={sdk} language="en" showOdds operatorId="betano-bg" />
+```
+
+`operatorId` and `betslip.operatorId` resolve against each other, so the card and the betslip show the same operator unless you set both to different values:
+
+| You set              | Card odds            | Betslip              |
+| -------------------- | -------------------- | -------------------- |
+| `operatorId`         | `operatorId`         | `operatorId`         |
+| `betslip.operatorId` | `betslip.operatorId` | `betslip.operatorId` |
+| Both                 | `operatorId`         | `betslip.operatorId` |
+
+See [Choosing a Bookmaker](#choosing-a-bookmaker) for the list of available operator ids.
+
 #### Betslip Integration
 
 When the `betslip` prop is provided, the TopX component renders a `Betslip` widget alongside its own UI — no separate `<Betslip />` component is needed.
@@ -4488,7 +4537,7 @@ const betslipConfig: TopXBetslipConfig = {
 | `currency`            | `string`               | `"€"`            | Currency symbol                                                           |
 | `ctaUrlTemplate`      | `string`               | —                | Bookmaker deep-link URL with `{placeholder}` substitution                 |
 | `brandingLogoUrl`     | `string`               | —                | Operator logo URL                                                         |
-| `operatorId`          | `string`               | —                | Operator config id the Betslip requests odds for, e.g. `"betano-bg"`      |
+| `operatorId`          | `string`               | —                | Operator config id the Betslip requests odds for, e.g. `"betano-bg"`. Falls back to the top-level `operatorId` |
 | `affiliateId`         | `string`               | —                | Affiliate id substituted into the operator's URLs                         |
 | `labels`              | `BetslipLabels`        | —                | UI text overrides                                                         |
 | `themeOptions`        | `CustomThemeOptions`   | —                | Theme for the Betslip widget. Falls back to the TopX `themeOptions` when omitted |
@@ -4803,7 +4852,7 @@ import { Predictor } from "fansunited-frontend-components";
 | Mode                  | When selections are sent to Betslip                                               |
 | --------------------- | --------------------------------------------------------------------------------- |
 | `"predictions-only"`  | Each time the user changes a score prediction (before submitting)                 |
-| `"odds-only"`         | When the user clicks an odds button on the post-submit odds view                  |
+| `"odds-only"`         | When the user clicks an odds button on the post-submit odds view (requires `showOdds`) |
 
 #### The CTA Link
 
@@ -4855,6 +4904,8 @@ It is passed to the odds request as the SDK's `operators` filter, so the respons
 
 Everything the Betslip derives from the bookmaker follows — the odds themselves, the accent color, the header and CTA logo, and the deep links. Markets the chosen bookmaker does not price are dropped from the Betslip (see the odds behavior notes below), and if it prices nothing in the betslip, the panel stays hidden.
 
+Inside `Predictor` or `TopX` you don't need to set it twice: the component's top-level `operatorId` also pins the Betslip, unless `betslip.operatorId` says otherwise. See [Predictor Odds](#predictor-odds).
+
 **Available operator ids:**
 
 ```
@@ -5284,7 +5335,8 @@ A single-event card — a competition header over the two competitors and their
 | `showStandings`   | `boolean`                | `type="detailed"` only. Show the **Table** (standings) tab. Defaults to `true` |
 | `showHeadToHead`  | `boolean`                | `type="detailed"` only. Show the **H2H** tab. Defaults to `true`             |
 | `defaultSection`  | `"preview" \| "summary" \| "stats" \| "lineups" \| "table" \| "h2h"` | `type="detailed"` only. Which tab opens first. Defaults to the first tab of the event's status |
-| `showOdds`        | `boolean`                | Render betting odds. Defaults to `true` — not yet backed by the API, so currently renders nothing |
+| `showOdds`        | `boolean`                | Render betting odds. Defaults to `false` — not yet backed by the API, so currently renders nothing |
+| `operatorId`      | `string`                 | Operator config id to show odds from, e.g. `"betano-bg"`. Not yet backed by the API, like `showOdds` |
 | `liveRefresh`     | `boolean`                | Poll while the event is `LIVE`. Defaults to `true`                           |
 | `refreshInterval` | `number`                 | Live-refresh interval in ms. Defaults to `30000` (30s)                       |
 | `userIsLoggedIn`  | `boolean`                | Whether the visitor is signed in. Required for predictions. Defaults to `false` |
@@ -5627,6 +5679,7 @@ A competitor profile card. It renders the competitor's identity, their season st
 - Teams and athletes from one component, each with its own statistics and second panel
 - Competition switcher (`All` + one per competition) as the card's single scope control — it filters statistics, form, the featured match and the fixtures panel together
 - Season-scoped: a feed that reaches back into the previous season is trimmed to the one its statistics are for
+- Multi-sport: each sport brings its own points rule, its own scoring vocabulary (`PF` / `PA` / `DIFF` rather than `GF` / `GA` / `GD`) and its own odds market
 - Recent form with per-fixture tooltips, and a featured match with a `Last | Next` toggle
 - 1X2 betting odds under an upcoming featured match, with an optional operator/prices flash mode
 - Live badge with a pulsing dot and the match minute once a fixture is in progress, plus optional polling
@@ -5638,7 +5691,7 @@ A competitor profile card. It renders the competitor's identity, their season st
 
 | Prop       | Type                 | Description       |
 | ---------- | -------------------- | ------------------ |
-| `entityId` | `string`             | Competitor ID — a team (`"fb:t:8205"`) or an athlete (`"fb:p:48824"`) |
+| `entityId` | `string`             | Competitor ID — a club or national side (`"fb:t:8205"`, `"fb:t:81770"`) or an athlete (`"fb:p:48824"`) |
 | `sdk`      | `FansUnitedSDKModel` | SDK instance        |
 | `language` | `LanguageType`       | Display language    |
 
@@ -5661,7 +5714,7 @@ A competitor profile card. It renders the competitor's identity, their season st
 | `showFeaturedMatch`          | `boolean`                                     | Render the featured next/last fixture. Defaults to `true`                    |
 | `featuredMatch`              | `CompetitorFeaturedMatchConfig`               | `type` (default `"next"`), `toggle` (default `true`), `backgroundGradient`, `matchCTA` |
 | `showOdds`                   | `boolean`                                     | Render odds inside the featured match. Defaults to `true`                    |
-| `odds`                       | `CompetitorOddsConfig`                        | `mode`, `flashInterval`, `pollingInterval`, `operators`                      |
+| `odds`                       | `CompetitorOddsConfig`                        | `mode`, `flashInterval`, `pollingInterval`, `operators`, `affiliateId`, `affiliateIds` |
 | `showFixtures`               | `boolean`                                     | Render the Fixtures header CTA and its panel. Defaults to `true`             |
 | `fixtures`                   | `CompetitorFixturesConfig`                    | `matchCTA` for fixture/result rows                                           |
 | `showSquad`                  | `boolean`                                     | Render the Squad CTA and panel. Defaults to `true`. **Teams only** — inert on an athlete |
@@ -5702,7 +5755,7 @@ Both kinds render the full card; only the statistics and the second panel differ
 | Form / fixtures | The club's own | The player's **club's**, captioned with the club's name |
 | Branding | The club's colours | The **club's** colours — a player declares none |
 
-A goalkeeper's statistics are clean sheets and goals conceded rather than goals and assists, throughout. Appearance and minute totals are measured against the club's matches in the same competition and season (`7 of 11 appearances`); minutes can exceed the total because stoppage time counts.
+A goalkeeper's statistics are clean sheets and goals conceded rather than goals and assists, throughout. Appearance and minute totals are measured against the club's matches in the same competition and season (`7 of 11 appearances`). Minutes are the one figure with no honest ceiling — the feed counts stoppage time, so an ever-present passes 90 a match — and once they reach it the minutes stand alone rather than claiming "671 of 630"; the full bar says the same thing without the false denominator.
 
 ```tsx
 <CompetitorCard entityId="fb:p:48824" sdk={sdkInstance} language="en" template="hero" />
@@ -5710,26 +5763,44 @@ A goalkeeper's statistics are clean sheets and goals conceded rather than goals
 
 #### Competition Switcher
 
-The switcher (`All`, then the domestic league, then the rest) is the card's single scope control: it filters the statistics, the form, the featured match and the fixtures panel together. The card opens on the domestic league rather than on `All`. It is drawn on the statistics title row but belongs to the whole card, which is why it is the top-level `showCompetitionSwitcher` rather than a `stats` setting.
+The switcher is the card's single scope control: it filters the statistics, the form, the featured match and the fixtures panel together. It is drawn on the statistics title row but belongs to the whole card, which is why it is the top-level `showCompetitionSwitcher` rather than a `stats` setting.
+
+The card opens on the competition its own featured match is in — the live one, else the next fixture, else the last result — and that option is listed first, directly after `All`. With no fixtures at all it falls back to the competitor's domestic league. It never opens on `All`, which mixes a league table with a cup run.
 
 Friendlies are excluded everywhere, and a cup awards no table points, so every points figure comes off while one is in scope.
 
+Wins counted here include the ones the sport settles after regulation, in whichever way the feed spells them: hockey writes `won_ot`, football `won_extratime`, and both sit beside a separate shootout key. Reading `won` alone reports a played match with no result against it — a team whose only win came in overtime showed 0 W, 0 D, 0 L on 1 played, and a World Cup won in extra time read 8 played against 6 won and 1 drawn.
+
+Totals that cannot be reconciled with the results printed above them are replaced by the results themselves: the card derives the season from its own fixtures whenever the feed covers fewer matches than it shows, or whenever the feed's own W/D/L does not add up to its played count.
+
+**Points follow the sport's own rule**, not the widget's: football pays 3 for a win and 1 for a draw; ice hockey pays 2 for any win plus 1 for losing after regulation. A league that keeps no points table at all is what `showPoints` is for.
+
+**The scoring vocabulary follows the sport too.** A sport scored in points rather than goals — American football, basketball, rugby — reads *Points for* / *Points against* / `PF` / `PA` / `DIFF` where football reads *Scored* / *Conceded* / `GF` / `GA` / `GD`; "conceded" is not a word American sports use. Those are six more `labels` keys (`pointsFor`, `pointsAgainst`, `pointsForShort`, `pointsAgainstShort`, `pointsDifference`, `pointsDifferenceShort`), overridable like every other.
+
+The figures behind those bars are read whichever way the feed states them. Football reports totals (`goals_scored`); American football reports **only averages** (`avg_pts_scored` over `matches_played`) and no total at all, so the total is recovered from the average — exactly, since the feed's two decimals round back to what the fixtures add up to. The bars are labelled with the abbreviation and carry the full name in a tooltip, so the row holds its shape in every language.
+
+A result settled after regulation is **marked wherever it appears** — `OT` beside the score on a form tile and a fixtures row, a corner tag on a form dot, and "After overtime" in the form tooltip and under the featured match's score. The score itself stays the **regulation** one, because that is all the feed reports: a hockey tie arrives as `5-5` with `winner_id: "DRAW"` and only the status saying it went further, so the card marks the fixture rather than claiming a winner it was not told about.
+
+
 The card covers **one season** — the season its statistics are for. Feeds can return fixtures from the previous season too; those are left out, so a cup run that finished last May never lands in the recent form or inflates an athlete's appearance total.
 
 #### Betting Odds
 
-Full-time 1X2 prices for the upcoming featured match, from the first operator that has them. When the odds API returns nothing the strip simply does not render.
+Outright prices for the upcoming featured match, from the first operator that has a complete set. The market follows the sport: a fixture that can be drawn is priced three ways (`FT_1X2` — 1 · X · 2), one that cannot is priced two (`WINNER_OT` — 1 · 2). Both are requested together, so one round trip settles it. When no operator has a complete market the strip simply does not render.
 
 ```tsx
 odds={{
   mode: "flash",          // "default" | "flash" — defaults to "flash" in compact, "default" elsewhere
   flashInterval: 3000,    // ms; ignored unless mode is "flash"
   pollingInterval: 30000, // ms
-  operators: ["my-operator-id"],
+  operators: ["my-operator-id"],  // preference order; the card shows one operator
+  affiliateId: "aff-123",         // substituted into the operator URLs
 }}
 ```
 
-`onAddToBetslip` receives `{ matchId, market: "FT_1X2", pick, odd }`. The widget owns no betslip, so pass this to push the selection into yours — with the Fans United `Betslip`, that is one call. The operator's own link still opens either way.
+The card shows **one** operator — the first that publishes a complete market — so `operators` is a preference order, not a filter that widens the strip. `affiliateId` is substituted into every operator URL carrying an `{affiliate_id}` placeholder, the same field as `BetslipProps.affiliateId`; `affiliateIds` sets one per operator.
+
+`onAddToBetslip` receives `{ matchId, market, pick, odd }`, where `market` is the code the price came from (`"FT_1X2"` or `"WINNER_OT"`). The widget owns no betslip, so pass this to push the selection into yours — with the Fans United `Betslip`, that is one call. The operator's own link still opens either way.
 
 ```tsx
 import { CompetitorCard, betslipApi } from "fansunited-frontend-components";
@@ -5768,7 +5839,9 @@ With `url` the row renders as an `<a href target>`, which keeps it crawlable and
 
 The competitor's colours paint the branded header (`hero` and `horizontal`), the headline tile, the featured-match panel and the expanded player card. Set `hasBranding={false}` to fall back to the theme accent, which is also what happens when the entity declares no colours.
 
-Some clubs declare a colour that *is* the card background — Real Madrid's primary is `#ffffff`. The card handles that rather than rendering something invisible: a solid fill walks the palette primary → secondary → tertiary and takes the first colour that stands out; text on a branded surface keeps the white the design intends and flips to dark only where white would be unreadable; and a gradient drops a stop that collides with the card. Both rules resolve against the *current* surface, so a competitor renders differently in light and dark mode.
+Only the **primary** is read, and the rule is deliberately narrow: **the club keeps its colour, and the text moves.** Some clubs declare a colour that *is* the card background — Real Madrid's primary is `#ffffff` — and their header stays white, with the label on it going dark. White text leads everywhere it is legible, so Manchester City's sky blue keeps the white the club itself puts on it, and gives way only where it genuinely cannot be read.
+
+A **solid fill** is the exception, because it sits *on* the card and so has no text to move: a primary that collides with the card falls back to the theme accent rather than to the club's other colours — painting Real Madrid gold reads as a different club, not as a fallback. A branded header whose colour is the card also gets a hairline where it meets the body. Everything resolves against the *current* surface, so a competitor renders differently in light and dark mode.
 
 #### Examples
 

package/Standings.js

@@ -1,17 +1,17 @@
 import { jsxs as w, jsx as r, Fragment as W } from "react/jsx-runtime";
 import P, { useState as N, useEffect as me, useMemo as V, useRef as ke } from "react";
-import { g as D, u as F, d as $, B as x, z as q, y as Y, a as Q, f as H, b as Le, v as Re, A as Te, p as De, o as ve, q as Ee, r as Pe, C as Fe, s as Ke, E as Ae, t as Oe, w as ze } from "./chunks/PrizeCard-Csw_wrFV.js";
-import { S as Ne } from "./chunks/Spinner-DEf9YWy9.js";
+import { g as D, u as F, d as $, B as x, z as q, y as Y, a as Q, f as H, b as Le, v as Re, A as Te, p as De, o as ve, q as Ee, r as Pe, C as Fe, s as Ke, E as Ae, t as Oe, w as ze } from "./chunks/PrizeCard-CwEzUVMJ.js";
+import { S as Ne } from "./chunks/Spinner-DBETUiAV.js";
 import { createPortal as pe } from "react-dom";
-import { h as ee, b as Ie } from "./chunks/helpers-BqT5Gaj_.js";
+import { h as ee, b as Ie } from "./chunks/helpers-BVcELFvC.js";
 import { l as le } from "./chunks/index-D-yn2UCo.js";
-import { E as $e } from "./chunks/EmojiEvents-D6ZqjCfo.js";
-import { T as k } from "./chunks/Typography-BdToTTZ6.js";
-import { C as Me } from "./chunks/Chip-04IiPdT5.js";
-import { I as Be } from "./chunks/InlineSpinner-vEetFsB9.js";
-import { S as fe } from "./chunks/Sheet-Dxmq7lcU.js";
-import { T as Ue } from "./chunks/Table-1CWAmBw4.js";
-import { T as ge, a as he, b as ye, c as xe } from "./chunks/Tabs-C8lKOBnZ.js";
+import { E as $e } from "./chunks/EmojiEvents-DFNrzPuy.js";
+import { T as k } from "./chunks/Typography-Du02dCpZ.js";
+import { C as Me } from "./chunks/Chip-dm_ka0yY.js";
+import { I as Be } from "./chunks/InlineSpinner-BDGu6S9a.js";
+import { S as fe } from "./chunks/Sheet-DVdyMkHi.js";
+import { T as Ue } from "./chunks/Table-Dk1ukQa6.js";
+import { T as ge, a as he, b as ye, c as xe } from "./chunks/Tabs-CmFfmpyp.js";
 const We = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/[_-]+/g, " ").trim().replace(
   /\S+/g,
   (n) => n.charAt(0).toUpperCase() + n.slice(1).toLowerCase()