fansunited-frontend-components 0.0.31-RC4 → 0.0.31-RC5

package/packages/match-quiz-play/src/components/Variants/Overlay/MatchQuizOverlayVariant.styles.js

@@ -0,0 +1,213 @@
+const t = (e) => ({
+  // Content container with backdrop
+  contentContainerWithBackdrop: {
+    borderRadius: e.mdBorderRadius,
+    p: e.spacingScale.md,
+    display: "flex",
+    flexDirection: "column",
+    gap: e.spacingScale.md,
+    backdropFilter: "blur(4px)",
+    position: "relative",
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: e.contentBgColor,
+      opacity: 0.5,
+      borderRadius: "inherit",
+      zIndex: 0
+    },
+    "& > *": {
+      position: "relative",
+      zIndex: 1
+    },
+    zIndex: 2
+  },
+  // Alternative title section
+  alternativeTitleSection: {
+    display: "flex",
+    gap: "8px",
+    alignItems: "flex-start",
+    justifyContent: "center"
+  },
+  // Alternative title text
+  alternativeTitleText: {
+    fontFamily: e.fontFamilyPrimary,
+    lineHeight: "150%",
+    letterSpacing: "0.15px",
+    fontWeight: 500,
+    fontSize: "1.25em",
+    textAlign: "center",
+    color: e.darkTextColor
+  },
+  // Bottom footer container
+  bottomFooterContainer: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    flexDirection: e.isMobile ? "column-reverse" : "row",
+    gap: e.spacingScale.md
+  },
+  // Next button
+  nextButton: {
+    borderRadius: e.buttonRadius,
+    py: "10px",
+    px: "16px",
+    bgcolor: e.primaryColor,
+    color: e.onPrimaryColor,
+    transition: "all 300ms cubic-bezier(0.2, 0, 0, 1)",
+    transform: "scale(1)",
+    ml: { md: "auto" },
+    "&:hover": {
+      bgcolor: e.primaryColor,
+      transform: "scale(1.02)"
+    },
+    "&:active": {
+      color: e.onPrimaryColor,
+      transform: "scale(0.98)"
+    },
+    "&:disabled": {
+      bgcolor: e.primaryColor,
+      color: e.onPrimaryColor,
+      opacity: "34%"
+    },
+    "--Icon-color": e.onPrimaryColor,
+    fontSize: "0.9375em"
+  },
+  // Next button text
+  nextButtonText: {
+    fontFamily: e.fontFamilyPrimary,
+    fontWeight: 500,
+    fontSize: "0.9375em",
+    lineHeight: "24px",
+    letterSpacing: "0.46px",
+    textTransform: "uppercase",
+    color: e.onPrimaryColor,
+    gap: "8px",
+    display: "flex",
+    alignItems: "center"
+  },
+  // Game State Styles
+  gameStateContainer: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    textAlign: "center",
+    padding: `${e.spacingScale.xs} ${e.spacingScale.sm}`,
+    gap: e.spacingScale["3xs"]
+  },
+  stateTitle: {
+    fontFamily: e.fontFamilyPrimary,
+    fontSize: "1.5em",
+    fontWeight: 700,
+    color: e.textColor || e.darkTextColor,
+    lineHeight: 1.3
+  },
+  stateDescription: {
+    fontFamily: e.fontFamilyPrimary,
+    fontSize: "1.25em",
+    letterSpacing: "0.15px",
+    fontWeight: 400,
+    color: e.textColor || e.darkTextColor,
+    lineHeight: 1.4,
+    opacity: e.opacity || "60%"
+  },
+  liveIndicatorContainer: {
+    display: "flex",
+    alignItems: "center",
+    gap: e.spacingScale.xs,
+    marginTop: e.spacingScale.xs
+  },
+  liveIndicator: {
+    width: "12px",
+    height: "12px",
+    borderRadius: "50%",
+    backgroundColor: e.dangerColor || "#d32f2f",
+    animation: "pulse 2s infinite",
+    "@keyframes pulse": {
+      "0%": {
+        transform: "scale(0.95)",
+        boxShadow: `0 0 0 0 ${e.dangerColor || "#d32f2f"}40`
+      },
+      "70%": {
+        transform: "scale(1)",
+        boxShadow: `0 0 0 10px ${e.dangerColor || "#d32f2f"}00`
+      },
+      "100%": {
+        transform: "scale(0.95)",
+        boxShadow: `0 0 0 0 ${e.dangerColor || "#d32f2f"}00`
+      }
+    }
+  },
+  liveText: {
+    fontFamily: e.fontFamilyPrimary,
+    fontSize: "0.875em",
+    color: e.dangerColor || "#d32f2f",
+    fontWeight: 600,
+    textTransform: "uppercase",
+    letterSpacing: "0.5px"
+  },
+  closedStateHeader: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: e.spacingScale.sm,
+    flexWrap: "wrap"
+  },
+  // Match Result Badge Styles
+  matchResultBadge: {
+    display: "flex",
+    alignItems: "center",
+    gap: e.spacingScale.xs,
+    fontSize: "0.75em",
+    padding: "2px 6px",
+    borderRadius: e.mdBorderRadius,
+    border: `1px solid ${e.textColor || e.darkTextColor}20`,
+    backgroundColor: (e.textColor || e.darkTextColor) + "10",
+    width: "fit-content"
+  },
+  matchResultTeamLogo: {
+    width: e.isExtraSmall ? "16px" : "20px",
+    height: e.isExtraSmall ? "16px" : "20px",
+    borderRadius: "50%",
+    overflow: "hidden",
+    flexShrink: 0
+  },
+  matchResultScoreText: {
+    fontFamily: e.fontFamilyPrimary,
+    fontSize: "0.75em",
+    fontWeight: 600,
+    color: e.textColor || e.darkTextColor,
+    lineHeight: 1
+  },
+  // Footer container
+  footerContainer: {
+    display: "flex",
+    flexDirection: e.isExtraSmall ? "column" : "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    gap: e.spacingScale.lg
+  },
+  // Footer container (no logo)
+  footerContainerNoLogo: {
+    display: "flex",
+    flexDirection: e.isExtraSmall ? "column" : "row",
+    justifyContent: "flex-end",
+    alignItems: "center",
+    gap: e.spacingScale.lg
+  },
+  // Navigation container
+  navigationContainer: {
+    display: "flex",
+    gap: e.spacingScale.md,
+    justifyContent: "center",
+    alignItems: "center"
+  }
+});
+export {
+  t as createStyles
+};

package/packages/match-quiz-play/src/components/Variants/Overlay/ScoreState/MatchQuizOverlayScoreState.js

@@ -0,0 +1,178 @@
+import { j as t } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { Box as a } from "@mui/joy";
+import { useInternalTheme as F, useSpacingScale as U, isMobile as v, useImageBackgroundGradient as O } from "../../../../../../common/src/functions/theme.js";
+import { extractBrandingProperties as V, sanitizeBackgroundUrl as w } from "../../../../../../common/src/functions/helpers.js";
+import "../../../../../../../node_modules/i18next/dist/esm/i18next.js";
+import "../../../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
+import { WidgetTemplate as S } from "../../../../../../common/src/enums/enums.js";
+import C from "../../../../../../common/src/components/AdditionalCTA.js";
+import "react";
+import "../../../../../../common/src/providers/ConstantsProvider.js";
+import M from "../../../../../../common/src/components/Skeletons/Overlay/ScoreState/OverlayScoreStateSkeleton.js";
+import { useImageVariant as D } from "../../../../../../common/src/hooks/useImageVariant.js";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+import W from "../../../../assets/default-quiz-bg.png.js";
+import L from "../../../../assets/default-quiz-bg-vertical.jpg.js";
+import p from "../../../Shared/PresentedBy.js";
+import { createStyles as q } from "./MatchQuizOverlayScoreState.styles.js";
+import G from "../../../Shared/AlertMessage.js";
+import Y from "../../../Shared/Summary/PredictionSummary.js";
+import { useTranslation as H } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const xe = (e) => {
+  const o = F(), r = U(), { t: s } = H(), i = v(), j = O(
+    S.OVERLAY
+  ), { brandingImage: P, brandingColors: n, brandingLogo: l } = V(e.matchQuiz.branding), b = e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : i ? L : W, I = P || D(
+    {
+      images: e.matchQuiz.images,
+      imagePlaceholder: b
+    },
+    S.OVERLAY
+  ), k = w(I), T = (n == null ? void 0 : n.secondaryColor) || o.colorSchemes.dark.textSecondary, d = o.colorSchemes.dark.secondaryContainer, z = o.colorSchemes.dark.textPrimary, u = o.customFontFamily.light.primary, A = o.customRadius.light.md, x = o.customRadius.light.xl, B = (n == null ? void 0 : n.backgroundColor) || o.colorSchemes.dark.surfaceVariant, R = e.matchQuiz.status === "OPEN" && e.prediction && e.squads && e.onPredictionUpdate, Q = (c) => {
+    console.log(`Edit prediction for fixture at index: ${c}`);
+  }, m = q({
+    spacingScale: r,
+    textPrimary: z,
+    fontFamilyPrimary: u,
+    mdBorderRadius: A,
+    xlBorderRadius: x,
+    contentBgColor: B,
+    onSurfaceColor: o.colorSchemes.dark.onSurface,
+    surfaceVariantColor: o.colorSchemes.dark.surfaceVariant
+  }), y = {
+    display: "flex",
+    py: i ? r.xs : r.sm,
+    px: i ? r.sm : r.md,
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: "8px",
+    borderRadius: x,
+    bgcolor: d,
+    "&:hover": {
+      bgcolor: d,
+      opacity: 0.9
+    },
+    fontSize: i ? "0.750em" : "0.8125em",
+    fontWeight: 500,
+    textTransform: "uppercase"
+  }, g = {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: "8px"
+  }, f = {
+    color: T,
+    fontFamily: u,
+    fontStyle: "normal",
+    lineHeight: "24px",
+    letterSpacing: "0.40px",
+    textTransform: "uppercase"
+  }, E = () => {
+    var c, h;
+    return /* @__PURE__ */ t.jsxs(a, { sx: m.mainContentWrapper, children: [
+      e.isUnauthorized ? /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsx(
+        G,
+        {
+          variant: "error",
+          title: s("common.authentication.accessRequired"),
+          message: s("common.authentication.invalidOrMissingAuth")
+        }
+      ) }) : /* @__PURE__ */ t.jsx(a, { sx: m.resultsContainer, children: /* @__PURE__ */ t.jsx(a, { sx: m.resultsWrapper, children: R ? /* @__PURE__ */ t.jsx(
+        Y,
+        {
+          fixtures: e.matchQuiz.fixtures,
+          prediction: e.prediction,
+          brandingPrimaryColor: n == null ? void 0 : n.primaryColor,
+          onEditPrediction: Q,
+          onPredictionUpdate: e.onPredictionUpdate,
+          play: e.play,
+          view: "score",
+          onPlayResult: e.onPlayResult
+        }
+      ) : null }) }),
+      i ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+        e.additionalCTA && /* @__PURE__ */ t.jsx(
+          a,
+          {
+            sx: {
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center"
+            },
+            children: /* @__PURE__ */ t.jsx(
+              C,
+              {
+                additionalCTA: e.additionalCTA,
+                buttonStyle: y,
+                buttonContentStyle: g,
+                textStyle: f
+              }
+            )
+          }
+        ),
+        l && /* @__PURE__ */ t.jsx(
+          a,
+          {
+            sx: {
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center"
+            },
+            children: /* @__PURE__ */ t.jsx(
+              p,
+              {
+                brandingLogo: l,
+                textColor: o.colorSchemes.dark.textColor,
+                label: ((c = e.matchQuiz.labels) == null ? void 0 : c.sponsor) || null
+              }
+            )
+          }
+        )
+      ] }) : /* @__PURE__ */ t.jsx(t.Fragment, { children: (l || e.additionalCTA) && /* @__PURE__ */ t.jsxs(
+        a,
+        {
+          sx: {
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: r.md
+          },
+          children: [
+            l && /* @__PURE__ */ t.jsx(
+              p,
+              {
+                brandingLogo: l,
+                textColor: o.colorSchemes.dark.textColor,
+                label: ((h = e.matchQuiz.labels) == null ? void 0 : h.sponsor) || null
+              }
+            ),
+            /* @__PURE__ */ t.jsx(
+              C,
+              {
+                additionalCTA: e.additionalCTA,
+                buttonStyle: y,
+                buttonContentStyle: g,
+                textStyle: f
+              }
+            )
+          ]
+        }
+      ) })
+    ] });
+  };
+  return /* @__PURE__ */ t.jsx(
+    M,
+    {
+      entity: e.matchQuiz,
+      headline: s("matchQuiz.headline"),
+      backgroundImage: k,
+      imageBackgroundGradient: j,
+      rulesDisplay: e.rulesDisplay,
+      children: E()
+    }
+  );
+};
+export {
+  xe as default
+};

package/packages/match-quiz-play/src/components/Variants/Overlay/ScoreState/MatchQuizOverlayScoreState.styles.js

@@ -0,0 +1,128 @@
+const t = (e) => ({
+  // Main content wrapper
+  mainContentWrapper: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "24px",
+    zIndex: 10
+  },
+  resultsContainer: {
+    borderRadius: e.mdBorderRadius,
+    p: e.spacingScale.md,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    alignSelf: "stretch",
+    gap: e.spacingScale.md,
+    backdropFilter: "blur(4px)",
+    position: "relative",
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: e.contentBgColor,
+      opacity: 0.25,
+      borderRadius: "inherit",
+      zIndex: 0,
+      backdropFilter: "blur(4px)"
+    },
+    "& > *": {
+      position: "relative",
+      zIndex: 1
+    }
+  },
+  resultsWrapper: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    alignSelf: "stretch"
+  },
+  ctaSection: {
+    borderRadius: e.mdBorderRadius,
+    py: e.spacingScale.md,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    alignSelf: "stretch",
+    gap: e.spacingScale.md,
+    backdropFilter: "blur(4px)",
+    position: "relative",
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: e.contentBgColor,
+      opacity: 0.25,
+      borderRadius: "inherit",
+      zIndex: 0,
+      backdropFilter: "blur(4px)"
+    },
+    "& > *": {
+      position: "relative",
+      zIndex: 1
+    }
+  },
+  // Buttons container
+  buttonsContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: e.spacingScale.md
+  },
+  // Play again button
+  playAgainButton: {
+    display: "flex",
+    minHeight: "48px",
+    py: "12px",
+    pr: "24px",
+    pl: "16px",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: "8px",
+    borderRadius: e.xlBorderRadius,
+    bgcolor: e.onSurfaceColor,
+    "&:hover": {
+      bgcolor: e.surfaceVariantColor
+    },
+    fontSize: "0.9375em"
+  },
+  // Play again button content
+  playAgainButtonContent: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: "8px",
+    alignSelf: "stretch"
+  },
+  // Play again icon
+  playAgainIcon: {
+    display: "flex",
+    width: "24px",
+    height: "24px",
+    justifyContent: "center",
+    alignItems: "center",
+    color: e.textPrimary
+  },
+  // Play again text
+  playAgainText: {
+    color: e.textPrimary,
+    textAlign: "center",
+    fontFamily: e.fontFamilyPrimary,
+    fontSize: "0.9375em",
+    fontStyle: "normal",
+    fontWeight: 500,
+    lineHeight: "24px",
+    letterSpacing: "0.46px",
+    textTransform: "uppercase"
+  }
+});
+export {
+  t as createStyles
+};

package/packages/match-quiz-play/src/components/Variants/Overlay/SignIn/MatchQuizOverlaySignIn.js

@@ -0,0 +1,120 @@
+import { j as e } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { Button as a, Typography as r, Box as V } from "@mui/joy";
+import { useInternalTheme as _, isMobile as G, useImageBackgroundGradient as M } from "../../../../../../common/src/functions/theme.js";
+import { extractBrandingProperties as Y, sanitizeBackgroundUrl as p } from "../../../../../../common/src/functions/helpers.js";
+import "../../../../../../../node_modules/i18next/dist/esm/i18next.js";
+import "../../../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
+import { WidgetTemplate as P } from "../../../../../../common/src/enums/enums.js";
+import "react";
+import "../../../../../../common/src/providers/ConstantsProvider.js";
+import W from "../../../../../../common/src/components/Skeletons/Overlay/SignIn/OverlaySignInSkeleton.js";
+import { useImageVariant as q } from "../../../../../../common/src/hooks/useImageVariant.js";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+import H from "../../../../assets/default-quiz-bg.png.js";
+import J from "../../../../assets/default-quiz-bg-vertical.jpg.js";
+import K from "../../../Shared/PresentedBy.js";
+import { createStyles as N } from "./MatchQuizOverlaySignIn.styles.js";
+import { useTranslation as X } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const xn = (n) => {
+  var s, m, g, c, u, d, I, f, x, h, C;
+  const o = _(), { t: i } = X(), S = G(), z = M(
+    P.OVERLAY
+  ), { brandingImage: L, brandingColors: l, brandingLogo: v } = Y(n.matchQuiz.branding || null), w = n.defaultImagePlaceholderUrl ? n.defaultImagePlaceholderUrl : S ? J : H, Q = L || q(
+    {
+      images: n.matchQuiz.images,
+      imagePlaceholder: w
+    },
+    P.OVERLAY
+  ), R = p(Q), O = (m = (s = o.customRadius) == null ? void 0 : s.light) == null ? void 0 : m.xl, D = (l == null ? void 0 : l.primaryColor) || ((d = (u = (c = (g = o.colorSchemes) == null ? void 0 : g.light) == null ? void 0 : c.palette) == null ? void 0 : u.primary) == null ? void 0 : d.plainColor), E = (h = (x = (f = (I = o.colorSchemes) == null ? void 0 : I.light) == null ? void 0 : f.palette) == null ? void 0 : x.primary) == null ? void 0 : h.onPrimary, F = o.customFontFamily.dark.primary, t = N({
+    buttonRadius: O,
+    primaryColor: D,
+    onPrimaryColor: E,
+    fontFamilyPrimary: F
+  }), U = () => {
+    var T, y, A, b;
+    return n.signInCTA ? (T = n.signInCTA) != null && T.component ? n.signInCTA.component : (y = n.signInCTA) != null && y.onClick ? /* @__PURE__ */ e.jsx(
+      a,
+      {
+        variant: "soft",
+        sx: {
+          ...t.signInButton,
+          ...t.pulseAnimation
+        },
+        onClick: n.signInCTA.onClick,
+        children: /* @__PURE__ */ e.jsx(r, { sx: t.signInButtonText, children: n.signInCTA.defaultLabel || i("common.signIn") })
+      }
+    ) : (A = n.signInCTA) != null && A.url ? typeof window > "u" ? /* @__PURE__ */ e.jsx(
+      V,
+      {
+        component: "a",
+        href: n.signInCTA.url,
+        target: ((b = n.signInCTA) == null ? void 0 : b.target) || "_self",
+        sx: {
+          ...t.signInButton,
+          ...t.pulseAnimation,
+          textDecoration: "none",
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: /* @__PURE__ */ e.jsx(r, { sx: t.signInButtonText, children: n.signInCTA.defaultLabel || i("common.signIn") })
+      }
+    ) : /* @__PURE__ */ e.jsx(
+      a,
+      {
+        variant: "soft",
+        sx: {
+          ...t.signInButton,
+          ...t.pulseAnimation
+        },
+        onClick: () => {
+          var B, j, k;
+          ((B = n.signInCTA) == null ? void 0 : B.target) === "_blank" ? window.open((j = n.signInCTA) == null ? void 0 : j.url, "_blank") : window.location.href = (k = n.signInCTA) == null ? void 0 : k.url;
+        },
+        children: /* @__PURE__ */ e.jsx(r, { sx: t.signInButtonText, children: n.signInCTA.defaultLabel || i("common.signIn") })
+      }
+    ) : /* @__PURE__ */ e.jsx(
+      a,
+      {
+        variant: "soft",
+        sx: {
+          ...t.signInButton
+        },
+        disabled: !0,
+        children: /* @__PURE__ */ e.jsx(r, { sx: t.signInButtonText, children: n.signInCTA.defaultLabel || i("common.signIn") })
+      }
+    ) : /* @__PURE__ */ e.jsx(
+      a,
+      {
+        variant: "soft",
+        sx: {
+          ...t.signInButton
+        },
+        disabled: !0,
+        children: /* @__PURE__ */ e.jsx(r, { sx: t.signInButtonText, children: i("common.signIn") })
+      }
+    );
+  };
+  return /* @__PURE__ */ e.jsx(
+    W,
+    {
+      entity: n.matchQuiz,
+      headline: i("matchQuiz.headline"),
+      backgroundImage: R,
+      imageBackgroundGradient: z,
+      signInContent: U(),
+      brandingContent: /* @__PURE__ */ e.jsx(
+        K,
+        {
+          brandingLogo: v,
+          textColor: o.colorSchemes.dark.textColor,
+          label: ((C = n.matchQuiz.labels) == null ? void 0 : C.sponsor) || null
+        }
+      ),
+      rulesDisplay: n.rulesDisplay
+    }
+  );
+};
+export {
+  xn as default
+};

package/packages/match-quiz-play/src/components/Variants/Overlay/SignIn/MatchQuizOverlaySignIn.styles.js

@@ -0,0 +1,42 @@
+const o = (e) => ({
+  // Pulse animation for buttons
+  pulseAnimation: {
+    "@keyframes pulse": {
+      "0%": { transform: "scale(1)" },
+      "50%": { transform: "scale(1.05)" },
+      "100%": { transform: "scale(1)" }
+    }
+  },
+  // Sign In button
+  signInButton: {
+    borderRadius: e.buttonRadius,
+    bgcolor: e.primaryColor,
+    color: "#FFFFFF",
+    py: "10px",
+    px: "16px",
+    "&:hover": {
+      bgcolor: e.primaryColor
+    },
+    "&:active": {
+      color: e.onPrimaryColor
+    },
+    animation: "pulse 1s infinite",
+    fontSize: "0.9375em"
+  },
+  // Start button text
+  signInButtonText: {
+    fontFamily: e.fontFamilyPrimary,
+    fontWeight: 500,
+    fontSize: "0.9375em",
+    lineHeight: "24px",
+    letterSpacing: "0.46px",
+    textTransform: "uppercase",
+    color: e.onPrimaryColor,
+    gap: "8px",
+    display: "flex",
+    alignItems: "center"
+  }
+});
+export {
+  o as createStyles
+};