fansunited-frontend-components 0.0.31-RC5 → 0.0.31-RC7

package/packages/match-quiz-play/src/components/Shared/Fixtures/PointsDisplay/PointsDisplay.js

@@ -1,116 +0,0 @@
-import { j as t } from "../../../../../../../node_modules/react/jsx-runtime.js";
-import { useState as O } from "react";
-import { Tooltip as x, IconButton as T, Box as d, Typography as n } from "@mui/joy";
-import { useColors as S, useCornerRadius as F, useFontFamily as R, useSpacingScale as A, isMobile as E } from "../../../../../../common/src/functions/theme.js";
-import "../../../../../../../node_modules/i18next/dist/esm/i18next.js";
-import "../../../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
-import { useConstantContext as P } from "../../../../../../common/src/hooks/useConstantContext.js";
-import "../../../../../../common/src/providers/ConstantsProvider.js";
-import "../../../../../../common/src/providers/ContainerProvider.js";
-import g from "../../../../../../../node_modules/@mui/icons-material/esm/HelpOutline.js";
-import { createStyles as z } from "./PointsDisplay.styles.js";
-import { MatchQuizConstantsContext as Q } from "../../../../providers/ConstantsProvider.js";
-import { useTranslation as B } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
-const V = (l) => {
-  const { t: o } = B(), i = S(), f = F(), c = R(), h = A(), y = E(), [p, m] = O(!1), { points: C } = P(Q), e = z({
-    spacingScale: h,
-    borderRadius: f,
-    fontFamilyPrimary: c.primary,
-    fontFamilySecondary: c.secondary,
-    textPrimary: i.textPrimary,
-    textSecondary: i.textSecondary,
-    neutralSoftBg: i.palette.neutral.softBg,
-    neutralOutlinedBorder: i.palette.neutral.outlinedBorder,
-    neutralPlainHoverBg: i.palette.neutral.plainHoverBg
-  }), s = C.find((r) => r.id === l.market);
-  if (!s)
-    return null;
-  const v = s.alternative && Object.values(s.alternative).some(
-    (r) => r > 0
-  ), u = () => {
-    if (!v)
-      return /* @__PURE__ */ t.jsx(n, { level: "body-sm", sx: e.tooltipText, children: o("matchQuiz.points.earnPointsForCorrect", {
-        points: s.points
-      }) });
-    const r = Object.entries(s.alternative).filter(
-      ([, a]) => a > 0
-    );
-    return /* @__PURE__ */ t.jsxs(d, { sx: e.tooltipContainer, children: [
-      /* @__PURE__ */ t.jsx(n, { level: "body-sm", sx: e.tooltipText, children: o("matchQuiz.points.earnPointsForCompletelyCorrect", {
-        points: s.points
-      }) }),
-      r.length > 0 && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-        /* @__PURE__ */ t.jsx(n, { level: "body-sm", sx: e.tooltipSubtext, children: o("matchQuiz.points.canAlsoEarnForPartial") }),
-        r.map(([a, j]) => /* @__PURE__ */ t.jsxs(
-          n,
-          {
-            level: "body-sm",
-            sx: e.tooltipAlternative,
-            children: [
-              "• ",
-              j,
-              " ",
-              o("matchQuiz.points.pts"),
-              " -",
-              " ",
-              b(a)
-            ]
-          },
-          a
-        ))
-      ] })
-    ] });
-  }, b = (r) => {
-    switch (r) {
-      case "CORRECT_OUTCOME_1X2":
-        return o("matchQuiz.points.alternatives.correctOutcome1X2");
-      case "CORRECT_HOME_GOALS":
-        return o("matchQuiz.points.alternatives.correctHomeGoals");
-      case "CORRECT_AWAY_GOALS":
-        return o("matchQuiz.points.alternatives.correctAwayGoals");
-      case "CORRECT_GOAL_DIFFERENCE":
-        return o("matchQuiz.points.alternatives.correctGoalDifference");
-      default:
-        return r.replace(/_/g, " ").toLowerCase();
-    }
-  };
-  return y || l.isSplitVariant ? /* @__PURE__ */ t.jsx(
-    x,
-    {
-      title: u(),
-      placement: "top-start",
-      variant: "soft",
-      sx: e.tooltip,
-      disablePortal: !0,
-      open: p,
-      onClose: () => m(!1),
-      disableHoverListener: !0,
-      disableFocusListener: !0,
-      disableTouchListener: !0,
-      children: /* @__PURE__ */ t.jsx(
-        T,
-        {
-          onClick: () => m(!p),
-          sx: e.mobileIconButton,
-          children: /* @__PURE__ */ t.jsx(g, { sx: e.mobileIcon })
-        }
-      )
-    }
-  ) : /* @__PURE__ */ t.jsx(
-    x,
-    {
-      title: u(),
-      placement: "top-start",
-      variant: "soft",
-      sx: e.tooltip,
-      disablePortal: !0,
-      children: /* @__PURE__ */ t.jsxs(d, { sx: e.container, children: [
-        /* @__PURE__ */ t.jsx(n, { level: "body-sm", sx: e.pointsText, children: s.points }),
-        /* @__PURE__ */ t.jsx(n, { level: "body-xs", sx: e.ptsLabel, children: o("matchQuiz.points.pts") })
-      ] })
-    }
-  );
-};
-export {
-  V as default
-};

package/packages/match-quiz-play/src/components/Shared/Fixtures/PointsDisplay/PointsDisplay.styles.js

@@ -1,98 +0,0 @@
-const e = (t) => ({
-  container: {
-    backgroundColor: t.neutralSoftBg,
-    color: t.textPrimary,
-    borderRadius: t.borderRadius.md,
-    border: `1px solid ${t.neutralOutlinedBorder}`,
-    padding: `${t.spacingScale.xs} ${t.spacingScale.sm}`,
-    display: "flex",
-    alignItems: "center",
-    gap: t.spacingScale.xs,
-    cursor: "default",
-    transition: "all 0.2s ease-in-out",
-    boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
-    zIndex: 10,
-    minWidth: "56px",
-    justifyContent: "center",
-    "&:hover": {
-      backgroundColor: t.neutralPlainHoverBg,
-      transform: "scale(1.05)",
-      boxShadow: "0 4px 12px rgba(0, 0, 0, 0.2)"
-    }
-  },
-  pointsText: {
-    fontFamily: t.fontFamilyPrimary,
-    fontWeight: 700,
-    fontSize: "0.875em",
-    lineHeight: 1,
-    color: t.textPrimary
-  },
-  ptsLabel: {
-    fontFamily: t.fontFamilySecondary,
-    fontWeight: 500,
-    fontSize: "0.75em",
-    lineHeight: 1,
-    color: t.textSecondary,
-    opacity: 0.9
-  },
-  tooltip: {
-    maxWidth: "280px",
-    backgroundColor: t.neutralSoftBg,
-    color: t.textPrimary,
-    border: `1px solid ${t.neutralOutlinedBorder}`,
-    borderRadius: t.borderRadius.sm,
-    p: t.spacingScale.xs
-  },
-  tooltipContainer: {
-    display: "flex",
-    flexDirection: "column",
-    gap: t.spacingScale.xs
-  },
-  tooltipText: {
-    fontFamily: t.fontFamilySecondary,
-    color: t.textPrimary,
-    fontSize: "0.875em",
-    lineHeight: 1.3
-  },
-  tooltipSubtext: {
-    fontFamily: t.fontFamilySecondary,
-    color: t.textSecondary,
-    fontSize: "0.75em",
-    lineHeight: 1.3
-  },
-  tooltipAlternative: {
-    fontFamily: t.fontFamilySecondary,
-    color: t.textPrimary,
-    fontSize: "0.75em",
-    lineHeight: 1.3,
-    paddingLeft: t.spacingScale.xs
-  },
-  // Mobile-specific styles
-  mobileIconButton: {
-    backgroundColor: "transparent",
-    color: t.textPrimary,
-    border: "none",
-    borderRadius: "50%",
-    width: "32px",
-    height: "32px",
-    minHeight: "32px",
-    minWidth: "32px",
-    padding: 0,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    transition: "all 0.2s ease-in-out",
-    zIndex: 10,
-    "&:hover": {
-      backgroundColor: "transparent",
-      transform: "scale(1.1)"
-    }
-  },
-  mobileIcon: {
-    fontSize: "1em",
-    color: t.textPrimary
-  }
-});
-export {
-  e as createStyles
-};

package/packages/match-quiz-play/src/components/Shared/Fixtures/YesNo/YesNoFixture.js

@@ -1,72 +0,0 @@
-import { j as e } from "../../../../../../../node_modules/react/jsx-runtime.js";
-import { Box as i, Typography as y } from "@mui/joy";
-import { useColors as S, isExtraSmall as C, useCornerRadius as g, useFontFamily as F, useSpacingScale as R } from "../../../../../../common/src/functions/theme.js";
-import "../../../../../../../node_modules/i18next/dist/esm/i18next.js";
-import "../../../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
-import "react";
-import { useConstantContext as j } from "../../../../../../common/src/hooks/useConstantContext.js";
-import "../../../../../../common/src/providers/ConstantsProvider.js";
-import "../../../../../../common/src/providers/ContainerProvider.js";
-import E from "./YesNoSelector.js";
-import { createStyles as _ } from "./YesNoFixture.styles.js";
-import P from "../PointsDisplay/PointsDisplay.js";
-import { MatchQuizConstantsContext as k } from "../../../../providers/ConstantsProvider.js";
-import { useTranslation as p } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
-const W = (t) => {
-  const { t: r } = p(), n = S(), c = C(), x = g(), s = F(), u = R(), { points: d } = j(k), l = t.useExtraSmallLayout !== void 0 ? t.useExtraSmallLayout : c, f = t.showPoints === void 0, m = _({
-    spacingScale: u,
-    borderRadius: x,
-    fontFamilyPrimary: s.primary,
-    fontFamilySecondary: s.secondary,
-    textPrimary: n.textPrimary,
-    textSecondary: n.textSecondary,
-    isExtraSmall: l
-  }), h = () => {
-    if (t.market.startsWith("OVER_GOALS_")) {
-      const a = t.market.replace("OVER_GOALS_", "").replace("_", "."), o = Math.floor(parseFloat(a));
-      return r("matchQuiz.fixtures.overGoalsFixtureTitle", { threshold: o });
-    }
-    if (t.market.startsWith("OVER_CORNERS_")) {
-      const a = t.market.replace("OVER_CORNERS_", "").replace("_", "."), o = Math.floor(parseFloat(a));
-      return r("matchQuiz.fixtures.overCornersFixtureTitle", { threshold: o });
-    }
-    return t.market === "RED_CARD_MATCH" ? r("matchQuiz.fixtures.redCardFixtureTitle") : r("matchQuiz.fixtures.penaltyFixtureTitle");
-  };
-  return /* @__PURE__ */ e.jsxs(i, { sx: m.container, children: [
-    /* @__PURE__ */ e.jsxs(
-      i,
-      {
-        sx: {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          width: "100%"
-        },
-        children: [
-          l ? /* @__PURE__ */ e.jsx(e.Fragment, {}) : /* @__PURE__ */ e.jsx(i, { sx: { flex: 1 } }),
-          /* @__PURE__ */ e.jsx(y, { level: "h3", sx: m.title, children: h() }),
-          /* @__PURE__ */ e.jsx(i, { sx: { flex: 1, display: "flex", justifyContent: "flex-end" }, children: f && d.length > 0 && /* @__PURE__ */ e.jsx(
-            P,
-            {
-              market: t.market,
-              brandingPrimaryColor: t.brandingPrimaryColor,
-              isSplitVariant: t.isSplitVariant
-            }
-          ) })
-        ]
-      }
-    ),
-    /* @__PURE__ */ e.jsx(
-      E,
-      {
-        market: t.market,
-        onSelectionChange: t.onSelectionChange,
-        brandingPrimaryColor: t.brandingPrimaryColor,
-        prediction: t.prediction
-      }
-    )
-  ] });
-};
-export {
-  W as default
-};

package/packages/match-quiz-play/src/components/Shared/Fixtures/YesNo/YesNoFixture.styles.js

@@ -1,29 +0,0 @@
-import { isMobile as e } from "../../../../../../common/src/functions/theme.js";
-import "../../../../../../../node_modules/i18next/dist/esm/i18next.js";
-import "../../../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
-import "../../../../../../../node_modules/react/jsx-runtime.js";
-import "@mui/joy";
-import "react";
-import "../../../../../../common/src/providers/ConstantsProvider.js";
-import "../../../../../../common/src/providers/ContainerProvider.js";
-const p = (t) => {
-  const i = e();
-  return {
-    container: {
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center"
-    },
-    title: {
-      fontFamily: t.fontFamilyPrimary,
-      fontWeight: 600,
-      fontSize: i ? "1.125em" : "1.25em",
-      lineHeight: 1.2,
-      color: t.textPrimary,
-      textAlign: t.isExtraSmall ? "left" : "center"
-    }
-  };
-};
-export {
-  p as createStyles
-};

package/packages/match-quiz-play/src/components/Shared/Fixtures/YesNo/YesNoSelector.js

@@ -1,108 +0,0 @@
-import { j as e } from "../../../../../../../node_modules/react/jsx-runtime.js";
-import { useState as g } from "react";
-import { Box as s, Typography as m } from "@mui/joy";
-import { useColors as f, useCornerRadius as j, useFontFamily as S, useSpacingScale as b, isMobile as w } from "../../../../../../common/src/functions/theme.js";
-import "../../../../../../../node_modules/i18next/dist/esm/i18next.js";
-import "../../../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
-import "../../../../../../common/src/providers/ConstantsProvider.js";
-import "../../../../../../common/src/providers/ContainerProvider.js";
-import { createStyles as L } from "./YesNoSelector.styles.js";
-import { useTranslation as k } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
-const Y = (i) => {
-  const { t: l } = k(), o = f(), C = j(), a = S(), u = b(), n = w(), [c, x] = g(
-    i.prediction
-  ), t = L({
-    spacingScale: u,
-    borderRadius: C,
-    fontFamilyPrimary: a.primary,
-    fontFamilySecondary: a.secondary,
-    textPrimary: o.textPrimary,
-    textSecondary: o.textSecondary,
-    neutralSoftBg: o.palette.neutral.softBg,
-    neutralOutlinedBorder: o.palette.neutral.outlinedBorder,
-    neutralPlainHoverBg: o.palette.neutral.plainHoverBg,
-    primary: i.brandingPrimaryColor || o.palette.primary.plainColor,
-    onPrimary: o.palette.primary.onPrimary,
-    successMain: o.palette.success.plainColor,
-    dangerMain: o.palette.danger.plainColor,
-    isMobile: n
-  }), p = (r) => {
-    x(r), i.onSelectionChange(r);
-  }, d = {
-    yes: l("matchQuiz.fixtures.yes"),
-    no: l("matchQuiz.fixtures.no")
-  }, y = ({ isSelected: r }) => /* @__PURE__ */ e.jsxs(s, { sx: t.optionContainer, children: [
-    /* @__PURE__ */ e.jsx(
-      s,
-      {
-        sx: {
-          ...t.optionIcon,
-          ...r ? t.selectedYesIcon : {},
-          cursor: "pointer"
-        },
-        onClick: () => p(!0),
-        children: /* @__PURE__ */ e.jsx(
-          "svg",
-          {
-            width: n ? "20" : "24",
-            height: n ? "20" : "24",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            xmlns: "http://www.w3.org/2000/svg",
-            children: /* @__PURE__ */ e.jsx(
-              "path",
-              {
-                d: "M7 22H4C3.46957 22 2.96086 21.7893 2.58579 21.4142C2.21071 21.0391 2 20.5304 2 20V13C2 12.4696 2.21071 11.9609 2.58579 11.5858C2.96086 11.2107 3.46957 11 4 11H7M14 9V5C14 4.20435 13.6839 3.44129 13.1213 2.87868C12.5587 2.31607 11.7956 2 11 2L7 11V22H18.28C18.7623 22.0055 19.2304 21.8364 19.5979 21.524C19.9654 21.2116 20.2077 20.7769 20.28 20.3L21.66 11.3C21.7035 11.0134 21.6842 10.7207 21.6033 10.4423C21.5225 10.1638 21.3821 9.90629 21.1919 9.68751C21.0016 9.46873 20.7661 9.29393 20.5016 9.17522C20.2371 9.0565 19.9499 8.99672 19.66 9H14Z",
-                stroke: "currentColor",
-                strokeWidth: "2",
-                strokeLinecap: "round",
-                strokeLinejoin: "round"
-              }
-            )
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ e.jsx(m, { level: "body-sm", sx: t.optionLabel, children: d.yes })
-  ] }), h = ({ isSelected: r }) => /* @__PURE__ */ e.jsxs(s, { sx: t.optionContainer, children: [
-    /* @__PURE__ */ e.jsx(
-      s,
-      {
-        sx: {
-          ...t.optionIcon,
-          ...r ? t.selectedNoIcon : {},
-          cursor: "pointer"
-        },
-        onClick: () => p(!1),
-        children: /* @__PURE__ */ e.jsx(
-          "svg",
-          {
-            width: n ? "20" : "24",
-            height: n ? "20" : "24",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            xmlns: "http://www.w3.org/2000/svg",
-            children: /* @__PURE__ */ e.jsx(
-              "path",
-              {
-                d: "M17 2H20C20.5304 2 21.0391 2.21071 21.4142 2.58579C21.7893 2.96086 22 3.46957 22 4V11C22 11.5304 21.7893 12.0391 21.4142 12.4142C21.0391 12.7893 20.5304 13 20 13H17M10 15V19C10 19.7956 10.3161 20.5587 10.8787 21.1213C11.4413 21.6839 12.2044 22 13 22L17 13V2H5.72C5.23766 1.99448 4.76962 2.16361 4.40206 2.47596C4.03451 2.78831 3.79232 3.22305 3.72 3.7L2.34 12.7C2.29648 12.9866 2.31583 13.2793 2.39668 13.5577C2.47753 13.8362 2.61793 14.0937 2.80816 14.3125C2.99839 14.5313 3.23394 14.7061 3.49843 14.8248C3.76291 14.9435 4.05011 15.0033 4.34 15H10Z",
-                stroke: "currentColor",
-                strokeWidth: "2",
-                strokeLinecap: "round",
-                strokeLinejoin: "round"
-              }
-            )
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ e.jsx(m, { level: "body-sm", sx: t.optionLabel, children: d.no })
-  ] });
-  return /* @__PURE__ */ e.jsxs(s, { sx: t.container, children: [
-    /* @__PURE__ */ e.jsx(y, { isSelected: c === !0 }),
-    /* @__PURE__ */ e.jsx(h, { isSelected: c === !1 })
-  ] });
-};
-export {
-  Y as default
-};

package/packages/match-quiz-play/src/components/Shared/Fixtures/YesNo/YesNoSelector.styles.js

@@ -1,44 +0,0 @@
-import { createOptionIconStyles as t } from "../shared.styles.js";
-const a = (e) => {
-  const n = t({
-    spacingScale: e.spacingScale,
-    neutralSoftBg: e.neutralSoftBg,
-    neutralPlainHoverBg: e.neutralPlainHoverBg,
-    isMobile: e.isMobile,
-    primary: e.primary,
-    onPrimary: e.onPrimary,
-    successMain: e.successMain,
-    dangerMain: e.dangerMain
-  });
-  return {
-    container: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      gap: e.isMobile ? e.spacingScale.xl : e.spacingScale["2xl"],
-      pt: e.isMobile ? e.spacingScale.md : e.spacingScale.lg
-    },
-    optionContainer: {
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      gap: e.spacingScale.sm
-    },
-    optionIcon: {
-      ...n.base,
-      color: e.textSecondary
-    },
-    selectedYesIcon: n.selectedYes,
-    selectedNoIcon: n.selectedNo,
-    optionLabel: {
-      fontFamily: e.fontFamilySecondary,
-      color: e.textPrimary,
-      fontSize: e.isMobile ? "0.875em" : "1em",
-      fontWeight: 600,
-      textAlign: "center"
-    }
-  };
-};
-export {
-  a as createStyles
-};

package/packages/match-quiz-play/src/components/Shared/Fixtures/shared.styles.js

@@ -1,63 +0,0 @@
-const a = (e) => ({
-  base: {
-    width: e.isMobile ? "48px" : "64px",
-    height: e.isMobile ? "48px" : "64px",
-    backgroundColor: e.neutralSoftBg,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    overflow: "hidden",
-    padding: e.isMobile ? e.spacingScale.xs : e.spacingScale.sm,
-    borderRadius: e.spacingScale.sm,
-    boxShadow: "0 5px 15px 0 rgba(49, 84, 139, .1)",
-    flexShrink: 0,
-    transition: "all 0.2s ease-in-out",
-    "&:hover": {
-      backgroundColor: e.neutralPlainHoverBg
-    }
-  },
-  selected: e.primary ? {
-    backgroundColor: e.primary,
-    "&:hover": {
-      backgroundColor: e.primary
-    },
-    borderRadius: e.spacingScale.sm
-  } : {
-    borderRadius: e.spacingScale.sm
-  },
-  text: {
-    fontFamily: "inherit",
-    fontSize: e.isMobile ? "0.625em" : "0.75em",
-    fontWeight: 600,
-    textAlign: "center"
-  },
-  selectedText: e.onPrimary ? {
-    color: e.onPrimary
-  } : {}
-}), n = (e) => ({
-  ...a(e),
-  selectedYes: e.successMain ? {
-    backgroundColor: e.successMain,
-    color: "white",
-    "&:hover": {
-      backgroundColor: e.successMain
-    },
-    borderRadius: e.spacingScale.sm
-  } : {
-    borderRadius: e.spacingScale.sm
-  },
-  selectedNo: e.dangerMain ? {
-    backgroundColor: e.dangerMain,
-    color: "white",
-    "&:hover": {
-      backgroundColor: e.dangerMain
-    },
-    borderRadius: e.spacingScale.sm
-  } : {
-    borderRadius: e.spacingScale.sm
-  }
-});
-export {
-  n as createOptionIconStyles,
-  a as createTeamLogoStyles
-};