fansunited-frontend-components 0.0.31-RC3 → 0.0.31-RC5

package/packages/match-quiz-play/src/components/Shared/Fixtures/1X2/OneXTwoFixture.js

@@ -0,0 +1,63 @@
+import { j as e } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { Box as i, Typography as d } from "@mui/joy";
+import { useColors as f, useCornerRadius as S, useFontFamily as h, useSpacingScale as C, isExtraSmall as g } 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 T from "./OneXTwoSelector.js";
+import { createStyles as p } from "./OneXTwoFixture.styles.js";
+import P from "../PointsDisplay/PointsDisplay.js";
+import { MatchQuizConstantsContext as F } from "../../../../providers/ConstantsProvider.js";
+import { useTranslation as w } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const B = (t) => {
+  const { t: r } = w(), o = f(), l = S(), n = h(), m = C(), x = g(), { points: c } = j(F), a = t.useExtraSmallLayout !== void 0 ? t.useExtraSmallLayout : x, u = t.showPoints === void 0, s = p({
+    spacingScale: m,
+    borderRadius: l,
+    fontFamilyPrimary: n.primary,
+    fontFamilySecondary: n.secondary,
+    textPrimary: o.textPrimary,
+    textSecondary: o.textSecondary,
+    ixExtraSmall: a
+  }), y = () => t.market === "HT_1X2" ? r("matchQuiz.fixtures.oneXTwoFixtureTitleHT") : r("matchQuiz.fixtures.oneXTwoFixtureTitle");
+  return /* @__PURE__ */ e.jsxs(i, { sx: s.container, children: [
+    /* @__PURE__ */ e.jsxs(
+      i,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          width: "100%"
+        },
+        children: [
+          a ? /* @__PURE__ */ e.jsx(e.Fragment, {}) : /* @__PURE__ */ e.jsx(i, { sx: { flex: 1 } }),
+          /* @__PURE__ */ e.jsx(d, { level: "h3", sx: s.title, children: y() }),
+          /* @__PURE__ */ e.jsx(i, { sx: { flex: 1, display: "flex", justifyContent: "flex-end" }, children: u && c.length > 0 && /* @__PURE__ */ e.jsx(
+            P,
+            {
+              market: t.market,
+              brandingPrimaryColor: t.brandingPrimaryColor,
+              isSplitVariant: t.isSplitVariant
+            }
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e.jsx(
+      T,
+      {
+        matchModel: t.matchModel,
+        onSelectionChange: t.onSelectionChange,
+        brandingPrimaryColor: t.brandingPrimaryColor,
+        prediction: t.prediction,
+        isSplitVariant: t.isSplitVariant
+      }
+    )
+  ] });
+};
+export {
+  B as default
+};

package/packages/match-quiz-play/src/components/Shared/Fixtures/1X2/OneXTwoFixture.styles.js

@@ -0,0 +1,29 @@
+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 x = (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.ixExtraSmall ? "left" : "center"
+    }
+  };
+};
+export {
+  x as createStyles
+};

package/packages/match-quiz-play/src/components/Shared/Fixtures/1X2/OneXTwoSelector.js

@@ -0,0 +1,143 @@
+import { j as e } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { memo as j, useState as b } from "react";
+import { Box as a, Typography as s } from "@mui/joy";
+import { useColors as T, useCornerRadius as f, useFontFamily as w, useSpacingScale as M, isMobile as P } 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 I } from "../../../../../../common/src/hooks/useConstantContext.js";
+import "../../../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+import { createStyles as L } from "./OneXTwoSelector.styles.js";
+import { MatchQuizConstantsContext as B } from "../../../../providers/ConstantsProvider.js";
+import v from "./OneXTwoSelectorSplit.js";
+import { useTranslation as F } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const h = j(({ team: o, option: t, isSelected: i, styles: r, handleSelection: m }) => {
+  var l;
+  return /* @__PURE__ */ e.jsx(a, { sx: r.iconContainer, children: /* @__PURE__ */ e.jsx(
+    a,
+    {
+      sx: {
+        ...r.teamLogo,
+        ...i ? r.selectedTeamLogo : {},
+        cursor: "pointer"
+      },
+      onClick: () => m(t),
+      children: (l = o.assets) != null && l.logo ? /* @__PURE__ */ e.jsx(
+        "img",
+        {
+          src: o.assets.logo,
+          alt: o.name,
+          style: {
+            width: "100%",
+            height: "100%",
+            objectFit: "contain"
+          }
+        }
+      ) : /* @__PURE__ */ e.jsx(
+        s,
+        {
+          level: "body-sm",
+          sx: {
+            ...r.teamLogoText,
+            ...i ? r.selectedTeamLogoText : {}
+          },
+          children: o.name
+        }
+      )
+    }
+  ) });
+});
+h.displayName = "TeamIcon";
+const y = j(({ isSelected: o, styles: t, handleSelection: i }) => /* @__PURE__ */ e.jsx(a, { sx: t.iconContainer, children: /* @__PURE__ */ e.jsx(
+  a,
+  {
+    sx: {
+      ...t.drawIcon,
+      ...o ? t.selectedDrawIcon : {},
+      cursor: "pointer"
+    },
+    onClick: () => i("x"),
+    children: /* @__PURE__ */ e.jsx(
+      s,
+      {
+        level: "h4",
+        sx: {
+          ...t.drawIconText,
+          ...o ? t.selectedDrawIconText : {}
+        },
+        children: "X"
+      }
+    )
+  }
+) }));
+y.displayName = "DrawIcon";
+const G = (o) => {
+  if (o.isSplitVariant)
+    return /* @__PURE__ */ e.jsx(
+      v,
+      {
+        matchModel: o.matchModel,
+        onSelectionChange: o.onSelectionChange,
+        brandingPrimaryColor: o.brandingPrimaryColor,
+        prediction: o.prediction
+      }
+    );
+  const t = T(), i = f(), r = w(), m = M(), l = P(), { t: g } = F(), { showTeamLabels: p } = I(B), [d, C] = b(
+    o.prediction
+  ), n = L({
+    spacingScale: m,
+    borderRadius: i,
+    fontFamilyPrimary: r.primary,
+    fontFamilySecondary: r.secondary,
+    textPrimary: t.textPrimary,
+    textSecondary: t.textSecondary,
+    neutralSoftBg: t.palette.neutral.softBg,
+    neutralOutlinedBorder: t.palette.neutral.outlinedBorder,
+    neutralPlainHoverBg: t.palette.neutral.plainHoverBg,
+    primary: o.brandingPrimaryColor || t.palette.primary.plainColor,
+    onPrimary: t.palette.primary.onPrimary,
+    isMobile: l
+  }), x = (c) => {
+    C(c), o.onSelectionChange(c);
+  }, u = ({ team: c }) => /* @__PURE__ */ e.jsx(a, { sx: n.labelContainer, children: /* @__PURE__ */ e.jsx(s, { level: "body-sm", sx: n.teamName, children: c.name }) }), S = () => /* @__PURE__ */ e.jsx(a, { sx: n.labelContainer, children: /* @__PURE__ */ e.jsx(s, { level: "body-sm", sx: n.drawLabel, children: g("matchQuiz.fixtures.draw") }) });
+  return /* @__PURE__ */ e.jsxs(a, { sx: n.container, children: [
+    /* @__PURE__ */ e.jsxs(a, { sx: n.iconsRow, children: [
+      /* @__PURE__ */ e.jsx(
+        h,
+        {
+          team: o.matchModel.homeTeam,
+          option: "1",
+          isSelected: d === "1",
+          styles: n,
+          handleSelection: x
+        }
+      ),
+      /* @__PURE__ */ e.jsx(
+        y,
+        {
+          isSelected: d === "x",
+          styles: n,
+          handleSelection: x
+        }
+      ),
+      /* @__PURE__ */ e.jsx(
+        h,
+        {
+          team: o.matchModel.awayTeam,
+          option: "2",
+          isSelected: d === "2",
+          styles: n,
+          handleSelection: x
+        }
+      )
+    ] }),
+    p && /* @__PURE__ */ e.jsxs(a, { sx: n.labelsRow, children: [
+      /* @__PURE__ */ e.jsx(u, { team: o.matchModel.homeTeam }),
+      /* @__PURE__ */ e.jsx(S, {}),
+      /* @__PURE__ */ e.jsx(u, { team: o.matchModel.awayTeam })
+    ] })
+  ] });
+};
+export {
+  G as default
+};

package/packages/match-quiz-play/src/components/Shared/Fixtures/1X2/OneXTwoSelector.styles.js

@@ -0,0 +1,101 @@
+import { createTeamLogoStyles as a } from "../shared.styles.js";
+const l = (e) => {
+  const t = a({
+    spacingScale: e.spacingScale,
+    neutralSoftBg: e.neutralSoftBg,
+    neutralPlainHoverBg: e.neutralPlainHoverBg,
+    isMobile: e.isMobile,
+    primary: e.primary,
+    onPrimary: e.onPrimary
+  });
+  return {
+    container: {
+      display: "flex",
+      flexDirection: "column",
+      gap: e.spacingScale.md,
+      pt: e.isMobile ? e.spacingScale.md : e.spacingScale.lg
+    },
+    iconsRow: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: e.isMobile ? e.spacingScale.md : e.spacingScale.lg
+    },
+    labelsRow: {
+      display: "flex",
+      alignItems: "flex-start",
+      justifyContent: "center",
+      gap: e.isMobile ? e.spacingScale.md : e.spacingScale.lg
+    },
+    iconContainer: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flex: 1
+    },
+    labelContainer: {
+      display: "flex",
+      alignItems: "flex-start",
+      justifyContent: "center",
+      flex: 1
+    },
+    teamLogo: t.base,
+    selectedTeamLogo: t.selected,
+    teamLogoText: {
+      ...t.text,
+      fontFamily: e.fontFamilySecondary,
+      color: e.textSecondary
+    },
+    selectedTeamLogoText: t.selectedText,
+    drawIcon: {
+      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
+      }
+    },
+    selectedDrawIcon: {
+      backgroundColor: e.primary,
+      borderColor: e.primary,
+      "&:hover": {
+        backgroundColor: e.primary
+      }
+    },
+    drawIconText: {
+      fontFamily: e.fontFamilyPrimary,
+      color: e.textPrimary,
+      fontSize: e.isMobile ? "1.25em" : "1.5em",
+      fontWeight: 600
+    },
+    selectedDrawIconText: {
+      color: e.onPrimary
+    },
+    teamName: {
+      fontFamily: e.fontFamilySecondary,
+      color: e.textPrimary,
+      fontSize: e.isMobile ? "0.75em" : "0.875em",
+      fontWeight: 600,
+      textAlign: "center"
+    },
+    drawLabel: {
+      fontFamily: e.fontFamilySecondary,
+      color: e.textPrimary,
+      fontSize: e.isMobile ? "0.75em" : "0.875em",
+      fontWeight: 600,
+      textAlign: "center"
+    }
+  };
+};
+export {
+  l as createStyles
+};

package/packages/match-quiz-play/src/components/Shared/Fixtures/1X2/OneXTwoSelectorSplit.js

@@ -0,0 +1,97 @@
+import { j as e } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { useState as b } from "react";
+import { Box as n, Typography as p } from "@mui/joy";
+import { useColors as C, useCornerRadius as w, useFontFamily as T, useSpacingScale as B } 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 O } from "../../../../../../common/src/hooks/useConstantContext.js";
+import "../../../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+import { createSplitStyles as P } from "./OneXTwoSelectorSplit.styles.js";
+import { MatchQuizConstantsContext as F } from "../../../../providers/ConstantsProvider.js";
+import { useTranslation as R } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const G = (a) => {
+  const r = C(), x = w(), s = T(), y = B(), { t: u } = R(), { showTeamLabels: m } = O(F), [i, h] = b(
+    a.prediction
+  ), t = P({
+    spacingScale: y,
+    borderRadius: x,
+    fontFamilyPrimary: s.primary,
+    fontFamilySecondary: s.secondary,
+    textPrimary: r.textPrimary,
+    textSecondary: r.textSecondary,
+    neutralSoftBg: r.palette.neutral.softBg,
+    neutralOutlinedBorder: r.palette.neutral.outlinedBorder,
+    neutralPlainHoverBg: r.palette.neutral.plainHoverBg,
+    primary: a.brandingPrimaryColor || r.palette.primary.plainColor,
+    onPrimary: r.palette.primary.onPrimary
+  }), S = (o) => {
+    h(o), a.onSelectionChange(o);
+  }, l = ({ team: o, option: f, label: g, isSelected: c, isDraw: j = !1 }) => {
+    var d;
+    return /* @__PURE__ */ e.jsx(
+      n,
+      {
+        sx: {
+          ...t.optionRow,
+          ...c ? t.selectedOptionRow : {},
+          cursor: "pointer"
+        },
+        onClick: () => S(f),
+        children: /* @__PURE__ */ e.jsxs(n, { sx: t.optionContent, children: [
+          !j && o && /* @__PURE__ */ e.jsx(n, { sx: t.teamLogo, children: (d = o.assets) != null && d.logo ? /* @__PURE__ */ e.jsx(
+            "img",
+            {
+              src: o.assets.logo,
+              alt: o.name,
+              style: { width: "100%", height: "100%", objectFit: "contain" }
+            }
+          ) : /* @__PURE__ */ e.jsx(p, { level: "body-sm", sx: t.teamLogoText, children: o.name }) }),
+          /* @__PURE__ */ e.jsx(
+            p,
+            {
+              level: "body-md",
+              sx: {
+                ...t.optionLabel,
+                ...c ? t.selectedOptionLabel : {}
+              },
+              children: g
+            }
+          )
+        ] })
+      }
+    );
+  };
+  return /* @__PURE__ */ e.jsxs(n, { sx: t.container, children: [
+    /* @__PURE__ */ e.jsx(
+      l,
+      {
+        team: a.matchModel.homeTeam,
+        option: "1",
+        label: m ? a.matchModel.homeTeam.name || "" : "1",
+        isSelected: i === "1"
+      }
+    ),
+    /* @__PURE__ */ e.jsx(
+      l,
+      {
+        option: "x",
+        label: u("matchQuiz.fixtures.draw"),
+        isSelected: i === "x",
+        isDraw: !0
+      }
+    ),
+    /* @__PURE__ */ e.jsx(
+      l,
+      {
+        team: a.matchModel.awayTeam,
+        option: "2",
+        label: m ? a.matchModel.awayTeam.name || "" : "2",
+        isSelected: i === "2"
+      }
+    )
+  ] });
+};
+export {
+  G as default
+};

package/packages/match-quiz-play/src/components/Shared/Fixtures/1X2/OneXTwoSelectorSplit.styles.js

@@ -0,0 +1,77 @@
+const t = (e) => ({
+  // Split variant layout container: stacked rows
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    gap: e.spacingScale.sm,
+    pt: e.spacingScale.md,
+    width: "100%"
+  },
+  // Each option row: full width, bordered box
+  optionRow: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-start",
+    minHeight: "26px",
+    backgroundColor: e.neutralSoftBg,
+    border: `1px solid ${e.neutralOutlinedBorder}`,
+    borderRadius: e.borderRadius.sm,
+    padding: e.spacingScale.sm,
+    transition: "all 0.2s ease-in-out",
+    "&:hover": {
+      backgroundColor: e.neutralPlainHoverBg,
+      borderColor: e.primary
+    }
+  },
+  // Selected option row styling
+  selectedOptionRow: {
+    backgroundColor: e.primary,
+    borderColor: e.primary,
+    "&:hover": {
+      backgroundColor: e.primary,
+      borderColor: e.primary
+    }
+  },
+  // Content within each option row
+  optionContent: {
+    display: "flex",
+    alignItems: "center",
+    gap: e.spacingScale.md,
+    width: "100%"
+  },
+  // Team logo styling
+  teamLogo: {
+    width: "26px",
+    height: "26px",
+    backgroundColor: "transparent",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+    borderRadius: e.borderRadius.xs,
+    flexShrink: 0
+  },
+  // Team logo text fallback
+  teamLogoText: {
+    fontFamily: e.fontFamilySecondary,
+    color: e.textSecondary,
+    fontSize: "0.75em",
+    fontWeight: 600,
+    textAlign: "center"
+  },
+  // Option label styling
+  optionLabel: {
+    fontFamily: e.fontFamilySecondary,
+    color: e.textPrimary,
+    fontSize: "0.875em",
+    fontWeight: 600,
+    flex: 1
+  },
+  // Selected option label styling
+  selectedOptionLabel: {
+    color: e.onPrimary
+  }
+});
+export {
+  t as createSplitStyles
+};

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

@@ -0,0 +1,61 @@
+import { j as r } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { Box as o, Typography as d } from "@mui/joy";
+import { useColors as u, isExtraSmall as f, useCornerRadius as h, useFontFamily as C, useSpacingScale as S } 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 p } from "../../../../../../common/src/hooks/useConstantContext.js";
+import "../../../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+import j from "./CornersSelector.js";
+import { createStyles as g } from "./CornersFixture.styles.js";
+import F from "../PointsDisplay/PointsDisplay.js";
+import { MatchQuizConstantsContext as P } from "../../../../providers/ConstantsProvider.js";
+import { useTranslation as E } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const q = (t) => {
+  const { t: a } = E(), e = u(), l = f(), m = h(), i = C(), x = S(), { points: c } = p(P), n = t.useExtraSmallLayout !== void 0 ? t.useExtraSmallLayout : l, y = t.showPoints === void 0, s = g({
+    spacingScale: x,
+    borderRadius: m,
+    fontFamilyPrimary: i.primary,
+    fontFamilySecondary: i.secondary,
+    textPrimary: e.textPrimary,
+    textSecondary: e.textSecondary,
+    isExtraSmall: n
+  });
+  return /* @__PURE__ */ r.jsxs(o, { sx: s.container, children: [
+    /* @__PURE__ */ r.jsxs(
+      o,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          width: "100%"
+        },
+        children: [
+          n ? /* @__PURE__ */ r.jsx(r.Fragment, {}) : /* @__PURE__ */ r.jsx(o, { sx: { flex: 1 } }),
+          /* @__PURE__ */ r.jsx(d, { level: "h3", sx: s.title, children: a("matchQuiz.fixtures.cornersFixtureTitle") }),
+          /* @__PURE__ */ r.jsx(o, { sx: { flex: 1, display: "flex", justifyContent: "flex-end" }, children: y && c.length > 0 && /* @__PURE__ */ r.jsx(
+            F,
+            {
+              market: t.market,
+              brandingPrimaryColor: t.brandingPrimaryColor,
+              isSplitVariant: t.isSplitVariant
+            }
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ r.jsx(
+      j,
+      {
+        matchModel: t.matchModel,
+        onCornersChange: t.onCornersChange,
+        prediction: t.prediction
+      }
+    )
+  ] });
+};
+export {
+  q as default
+};

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

@@ -0,0 +1,29 @@
+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/Corners/CornersSelector.js

@@ -0,0 +1,63 @@
+import { j as r } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { useState as h } from "react";
+import { Box as m, IconButton as u, Typography as C } from "@mui/joy";
+import { useColors as S, useCornerRadius as g, useFontFamily as j, useSpacingScale as B, isMobile as b } 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 I from "../../../../../../../node_modules/@mui/icons-material/esm/KeyboardArrowLeft.js";
+import v from "../../../../../../../node_modules/@mui/icons-material/esm/KeyboardArrowRight.js";
+import { createStyles as F } from "./CornersSelector.styles.js";
+const L = (t) => {
+  const e = S(), d = g(), l = j(), x = B(), y = b(), [i, p] = h(t.prediction || 6), o = F({
+    spacingScale: x,
+    borderRadius: d,
+    fontFamilyPrimary: l.primary,
+    fontFamilySecondary: l.secondary,
+    textPrimary: e.textPrimary,
+    textSecondary: e.textSecondary,
+    neutralSoftBg: e.palette.neutral.softBg,
+    neutralOutlinedBorder: e.palette.neutral.outlinedBorder,
+    neutralPlainHoverBg: e.palette.neutral.plainHoverBg,
+    isMobile: y
+  }), c = (n) => {
+    var a;
+    const s = n ? Math.min(i + 1, 99) : Math.max(i - 1, 0);
+    p(s), (a = t.onCornersChange) == null || a.call(t, s);
+  }, f = ({ corners: n, onIncrement: s, onDecrement: a }) => /* @__PURE__ */ r.jsxs(m, { sx: o.cornersInputContainer, children: [
+    /* @__PURE__ */ r.jsx(
+      u,
+      {
+        size: "sm",
+        variant: "plain",
+        onClick: a,
+        sx: o.cornersButton,
+        disabled: n === 0,
+        children: /* @__PURE__ */ r.jsx(I, { fontSize: "small" })
+      }
+    ),
+    /* @__PURE__ */ r.jsx(C, { level: "h2", sx: o.cornersDisplay, children: n }),
+    /* @__PURE__ */ r.jsx(
+      u,
+      {
+        size: "sm",
+        variant: "plain",
+        onClick: s,
+        sx: o.cornersButton,
+        children: /* @__PURE__ */ r.jsx(v, { fontSize: "small" })
+      }
+    )
+  ] });
+  return /* @__PURE__ */ r.jsx(m, { sx: o.container, children: /* @__PURE__ */ r.jsx(
+    f,
+    {
+      corners: i,
+      onIncrement: () => c(!0),
+      onDecrement: () => c(!1)
+    }
+  ) });
+};
+export {
+  L as default
+};