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

package/packages/event-game-play/src/components/Variants/Split/EventGameSplitVariant.styles.js

@@ -0,0 +1,149 @@
+const t = (e) => ({
+  // Question area
+  questionArea: {
+    flex: e.isMobile ? "1" : "0 0 50%",
+    width: e.isMobile ? "100%" : "50%",
+    minWidth: e.isMobile ? "100%" : "50%",
+    maxWidth: e.isMobile ? "100%" : "50%",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center"
+  },
+  // Lead content container (filter screen)
+  leadContentContainer: {
+    p: e.spacingScale.md,
+    gap: e.spacingScale.md,
+    display: "flex",
+    flexDirection: "column",
+    backdropFilter: "blur(4px)",
+    bgcolor: `rgba(${e.bgcolor ? e.bgcolor.replace(/[^\d,]/g, "") : ""}, 0.5)`,
+    borderRadius: e.borderRadius.sm
+  },
+  // Question area content wrapper
+  questionAreaContent: {
+    p: e.spacingScale.lg,
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    gap: "16px"
+  },
+  // Main content container
+  mainContentContainer: {
+    p: e.spacingScale.lg,
+    gap: e.spacingScale.md,
+    display: "flex",
+    flexDirection: "column",
+    backdropFilter: "blur(4px)",
+    bgcolor: `rgba(${e.bgcolor ? e.bgcolor.replace(/[^\d,]/g, "") : ""}, 0.5)`,
+    borderRadius: e.borderRadius.sm,
+    position: "relative",
+    zIndex: 2
+  },
+  // Game state container
+  gameStateContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: e.spacingScale.xs,
+    textAlign: "center"
+  },
+  // State title
+  stateTitle: {
+    fontFamily: e.fontFamilyPrimary,
+    fontWeight: 700,
+    fontSize: "1.5em",
+    lineHeight: "133%",
+    letterSpacing: "0.15px",
+    color: e.textColor
+  },
+  // State description
+  stateDescription: {
+    fontFamily: e.fontFamilyPrimary,
+    fontWeight: 400,
+    fontSize: "1.25em",
+    lineHeight: "140%",
+    letterSpacing: "0.15px",
+    color: e.secondaryColor,
+    opacity: "60%"
+  },
+  // Live indicator container
+  liveIndicatorContainer: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: e.spacingScale.xs
+  },
+  // Live indicator
+  liveIndicator: {
+    width: "12px",
+    height: "12px",
+    borderRadius: "50%",
+    backgroundColor: e.dangerColor,
+    animation: "pulse 2s infinite",
+    "@keyframes pulse": {
+      "0%": {
+        opacity: 1,
+        transform: "scale(1)"
+      },
+      "50%": {
+        opacity: 0.7,
+        transform: "scale(1.1)"
+      },
+      "100%": {
+        opacity: 1,
+        transform: "scale(1)"
+      }
+    }
+  },
+  // Live text
+  liveText: {
+    fontFamily: e.fontFamilyPrimary,
+    fontWeight: 600,
+    fontSize: "1em",
+    color: e.dangerColor,
+    textTransform: "uppercase",
+    letterSpacing: "0.5px"
+  },
+  // Pagination container
+  paginationContainer: {
+    display: "flex",
+    justifyContent: "center",
+    px: e.spacingScale.lg
+  },
+  // Navigation container
+  navigationContainer: {
+    display: "flex",
+    gap: e.spacingScale.md,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  matchResultBadge: {
+    display: "flex",
+    alignItems: "center",
+    alignSelf: "center",
+    gap: e.spacingScale.xs,
+    fontSize: "0.75em",
+    padding: "2px 6px",
+    minHeight: "20px",
+    borderRadius: e.borderRadius.sm,
+    border: `1px solid ${e.textColor}20`,
+    backgroundColor: e.textColor + "10",
+    width: "fit-content"
+  },
+  matchResultTeamLogo: {
+    width: "20px",
+    height: "20px",
+    borderRadius: "50%",
+    overflow: "hidden",
+    flexShrink: 0
+  },
+  matchResultScoreText: {
+    fontFamily: e.fontFamilyPrimary,
+    fontSize: "0.75em",
+    fontWeight: 600,
+    color: e.textColor,
+    lineHeight: 1
+  }
+});
+export {
+  t as createStyles
+};

package/packages/event-game-play/src/components/Variants/Split/FinishedGame/EventGameSplitFinishedGame.js

@@ -0,0 +1,119 @@
+import { j as e } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { Box as r, Typography as s } from "@mui/joy";
+import { useInternalTheme as D, isMobile as G, useColors as i, useFontFamily as c, useCornerRadius as w, useSpacingScale as B, useImageBackgroundGradient as N } from "../../../../../../common/src/functions/theme.js";
+import { hexToRgb as V, stripHtmlTags as L } 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 x } from "../../../../../../common/src/enums/enums.js";
+import M from "../../../../../../common/src/components/Rules.js";
+import "react";
+import "../../../../../../common/src/providers/ConstantsProvider.js";
+import { useImageVariant as E } from "../../../../../../common/src/hooks/useImageVariant.js";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+import H from "../../../Shared/MainCard.js";
+import O from "../../../../assets/default-quiz-bg.png.js";
+import U from "../../../../assets/default-quiz-bg-vertical.jpg.js";
+import { createStyles as W } from "./EventGameSplitFinishedGame.styles.js";
+import q from "../../../Shared/FinishedGameWrapper/FinishedGameWrapper.js";
+import A from "../../../Shared/Leaderboard/LeaderboardComponent.js";
+import z from "../../../Shared/Leaderboard/LeaderboardPagination.js";
+import { useEventRankings as J } from "../../../../hooks/useEventRankings.js";
+import { useTranslation as K } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const ue = (t) => {
+  const g = D(), { t: h } = K(), a = G(), u = t.defaultImagePlaceholderUrl ? t.defaultImagePlaceholderUrl : a ? U : O, f = E(
+    {
+      images: t.event.images,
+      imagePlaceholder: u
+    },
+    x.SPLIT
+  ), P = i().palette.danger.plainColor, p = i().textColor, j = i().textColor, C = c().secondary, y = "60%", T = c().primary, b = i().surfaceVariant, v = w(), l = B(), S = N(
+    x.SPLIT
+  ), { rankings: I, pagination: o, loading: k, goToNextPage: F, goToPreviousPage: R } = J(t.event.id, t.sdk), n = W({
+    finalImage: f,
+    spacingScale: l,
+    borderRadius: v,
+    fontFamilyPrimary: T,
+    fontFamilySecondary: C,
+    secondaryColor: j,
+    opacity: y,
+    bgcolor: V(b || ""),
+    textColor: p,
+    darkTextColor: g.colorSchemes.dark.textColor,
+    imageBackgroundGradient: S,
+    isMobile: a,
+    dangerColor: P,
+    isTabulated: t.showPredictionDetails || !1
+  }), m = () => /* @__PURE__ */ e.jsx(e.Fragment, { children: /* @__PURE__ */ e.jsx(r, { sx: n.questionAreaContent, children: /* @__PURE__ */ e.jsxs(r, { sx: n.mainContentContainer, children: [
+    /* @__PURE__ */ e.jsx(
+      A,
+      {
+        leaderboard: I,
+        userRanking: t.prediction,
+        showHeading: !t.showPredictionDetails,
+        isSplitVariant: !0,
+        loading: k
+      }
+    ),
+    o && (o.hasNextPage || o.hasPreviousPage) && /* @__PURE__ */ e.jsx(r, { sx: n.paginationContainer, children: /* @__PURE__ */ e.jsx(
+      z,
+      {
+        hasNextPage: o.hasNextPage,
+        hasPreviousPage: o.hasPreviousPage,
+        onNextPage: F,
+        onPreviousPage: R,
+        isOverlayVariant: !1,
+        justifyContent: "center"
+      }
+    ) })
+  ] }) }) }), d = () => /* @__PURE__ */ e.jsx(r, { sx: n.headlineSection, children: /* @__PURE__ */ e.jsx(r, { sx: n.headlineContent, children: /* @__PURE__ */ e.jsxs(r, { children: [
+    /* @__PURE__ */ e.jsxs(
+      r,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          gap: l["3xs"]
+        },
+        children: [
+          /* @__PURE__ */ e.jsx(s, { sx: n.headlineText, children: h("eventGame.headline") }),
+          /* @__PURE__ */ e.jsx(
+            M,
+            {
+              rules: t.event.rules || "",
+              rulesDisplay: t.rulesDisplay,
+              isOverlayVariant: !1
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ e.jsxs(r, { sx: n.contentContainer, children: [
+      /* @__PURE__ */ e.jsx(s, { sx: n.titleText, children: t.event.title }),
+      /* @__PURE__ */ e.jsx(s, { sx: n.descriptionText, children: L(t.event.description) })
+    ] })
+  ] }) }) });
+  return /* @__PURE__ */ e.jsx(H, { brandingBorderColor: null, children: t.showPredictionDetails ? /* @__PURE__ */ e.jsxs(
+    q,
+    {
+      prediction: t.prediction,
+      game: t.event,
+      resultsTabPanelSxProps: {
+        display: "flex",
+        flexDirection: a ? "column" : "row",
+        px: 0,
+        pb: 0,
+        pt: 0
+      },
+      children: [
+        d(),
+        m()
+      ]
+    }
+  ) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    d(),
+    m()
+  ] }) });
+};
+export {
+  ue as default
+};

package/packages/event-game-play/src/components/Variants/Split/FinishedGame/EventGameSplitFinishedGame.styles.js

@@ -0,0 +1,230 @@
+const i = (e) => ({
+  // Main headline section with background image
+  headlineSection: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between",
+    gap: "10px",
+    flex: e.isMobile ? "1" : "0 0 50%",
+    width: e.isMobile ? "100%" : "50%",
+    minWidth: e.isMobile ? "100%" : "50%",
+    maxWidth: e.isMobile ? "100%" : "50%",
+    backgroundImage: `url(${e.finalImage})`,
+    backgroundSize: "cover",
+    backgroundPosition: "center",
+    borderTopLeftRadius: e.isTabulated ? 0 : e.borderRadius.md,
+    borderTopRightRadius: e.isMobile ? e.isTabulated ? 0 : e.borderRadius.md : 0,
+    borderBottomLeftRadius: e.isMobile ? 0 : e.borderRadius.md,
+    overflow: "hidden",
+    height: "auto",
+    position: "relative",
+    minHeight: e.isMobile ? "210px" : "430px",
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      background: e.imageBackgroundGradient,
+      borderTopLeftRadius: "5px",
+      borderTopRightRadius: "5px"
+    }
+  },
+  // Headline content wrapper
+  headlineContent: {
+    zIndex: 1,
+    height: "100%",
+    p: e.spacingScale.xl,
+    gap: e.spacingScale.xl,
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between"
+  },
+  // Headline typography
+  headlineText: {
+    fontWeight: 500,
+    lineHeight: "166%",
+    letterSpacing: "1px",
+    fontSize: "0.75em",
+    color: e.darkTextColor,
+    opacity: "70%",
+    textTransform: "uppercase",
+    fontFamily: e.fontFamilySecondary,
+    textAlign: e.isMobile ? "center" : "left"
+  },
+  // Content container
+  contentContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: e.spacingScale["3xs"]
+  },
+  // Title typography
+  titleText: {
+    fontWeight: 700,
+    lineHeight: "133%",
+    fontSize: "1.5em",
+    letterSpacing: "0.15px",
+    color: e.darkTextColor,
+    fontFamily: e.fontFamilyPrimary,
+    textAlign: e.isMobile ? "center" : "left"
+  },
+  // Description typography
+  descriptionText: {
+    fontWeight: 400,
+    lineHeight: "140%",
+    fontSize: "1.25em",
+    letterSpacing: "0.15px",
+    color: e.darkTextColor,
+    opacity: "70%",
+    fontFamily: e.fontFamilyPrimary,
+    textAlign: e.isMobile ? "center" : "left"
+  },
+  // Question area
+  questionArea: {
+    flex: e.isMobile ? "1" : "0 0 50%",
+    width: e.isMobile ? "100%" : "50%",
+    minWidth: e.isMobile ? "100%" : "50%",
+    maxWidth: e.isMobile ? "100%" : "50%",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center"
+  },
+  // Lead content container (filter screen)
+  leadContentContainer: {
+    p: e.spacingScale.md,
+    gap: e.spacingScale.md,
+    display: "flex",
+    flexDirection: "column",
+    backdropFilter: "blur(4px)",
+    bgcolor: `rgba(${e.bgcolor ? e.bgcolor.replace(/[^\d,]/g, "") : ""}, 0.5)`,
+    borderRadius: e.borderRadius.sm
+  },
+  // Question area content wrapper
+  questionAreaContent: {
+    p: e.spacingScale.lg,
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    gap: "16px",
+    width: e.isMobile ? "auto" : "100%"
+  },
+  // Main content container
+  mainContentContainer: {
+    p: e.spacingScale.lg,
+    gap: e.spacingScale.md,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    backdropFilter: "blur(4px)",
+    bgcolor: `rgba(${e.bgcolor ? e.bgcolor.replace(/[^\d,]/g, "") : ""}, 0.5)`,
+    borderRadius: e.borderRadius.sm,
+    minHeight: "300px"
+  },
+  // Game state container
+  gameStateContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: e.spacingScale.xs,
+    textAlign: "center"
+  },
+  // State title
+  stateTitle: {
+    fontFamily: e.fontFamilyPrimary,
+    fontWeight: 700,
+    fontSize: "1.5em",
+    lineHeight: "133%",
+    letterSpacing: "0.15px",
+    color: e.textColor
+  },
+  // State description
+  stateDescription: {
+    fontFamily: e.fontFamilyPrimary,
+    fontWeight: 400,
+    fontSize: "1.25em",
+    lineHeight: "140%",
+    letterSpacing: "0.15px",
+    color: e.secondaryColor,
+    opacity: e.opacity
+  },
+  // Live indicator container
+  liveIndicatorContainer: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: e.spacingScale.xs
+  },
+  // Live indicator
+  liveIndicator: {
+    width: "12px",
+    height: "12px",
+    borderRadius: "50%",
+    backgroundColor: e.dangerColor,
+    animation: "pulse 2s infinite",
+    "@keyframes pulse": {
+      "0%": {
+        opacity: 1,
+        transform: "scale(1)"
+      },
+      "50%": {
+        opacity: 0.7,
+        transform: "scale(1.1)"
+      },
+      "100%": {
+        opacity: 1,
+        transform: "scale(1)"
+      }
+    }
+  },
+  // Live text
+  liveText: {
+    fontFamily: e.fontFamilyPrimary,
+    fontWeight: 600,
+    fontSize: "1em",
+    color: e.dangerColor,
+    textTransform: "uppercase",
+    letterSpacing: "0.5px"
+  },
+  // Pagination container
+  paginationContainer: {
+    display: "flex",
+    justifyContent: "center",
+    ml: 0
+  },
+  // Navigation container
+  navigationContainer: {
+    display: "flex",
+    gap: e.spacingScale.md,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  matchResultBadge: {
+    display: "flex",
+    alignItems: "center",
+    alignSelf: "center",
+    gap: e.spacingScale.xs,
+    fontSize: "0.75em",
+    padding: "2px 6px",
+    minHeight: "20px",
+    borderRadius: e.borderRadius.sm,
+    border: `1px solid ${e.textColor}20`,
+    backgroundColor: e.textColor + "10",
+    width: "fit-content"
+  },
+  matchResultTeamLogo: {
+    width: "20px",
+    height: "20px",
+    borderRadius: "50%",
+    overflow: "hidden",
+    flexShrink: 0
+  },
+  matchResultScoreText: {
+    fontFamily: e.fontFamilyPrimary,
+    fontSize: "0.75em",
+    fontWeight: 600,
+    color: e.textColor,
+    lineHeight: 1
+  }
+});
+export {
+  i as createStyles
+};

package/packages/event-game-play/src/components/Variants/Split/ScoreState/EventGameSplitScoreState.js

@@ -0,0 +1,139 @@
+import { j as t } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { Box as r } from "@mui/joy";
+import { isMobile as v, useColors as m, useFontFamily as T, useCornerRadius as I, useSpacingScale as A, useBorderSize as M } from "../../../../../../common/src/functions/theme.js";
+import { hexToRgb as d } 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 R } from "../../../../../../common/src/enums/enums.js";
+import w from "../../../../../../common/src/components/AdditionalCTA.js";
+import "react";
+import "../../../../../../common/src/providers/ConstantsProvider.js";
+import B from "../../../../../../common/src/components/Skeletons/Split/ScoreState/SplitScoreStateSkeleton.js";
+import { useImageVariant as E } from "../../../../../../common/src/hooks/useImageVariant.js";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+import F from "../../../Shared/MainCard.js";
+import G from "../../../../assets/default-quiz-bg.png.js";
+import U from "../../../../assets/default-quiz-bg-vertical.jpg.js";
+import { createStyles as z } from "./EventGameSplitScoreState.styles.js";
+import D from "../../../Shared/AlertMessage.js";
+import $ from "../../../Shared/Summary/PredictionSummary.js";
+import { useTranslation as V } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const ae = (e) => {
+  const { t: n } = V(), i = v(), u = e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : i ? U : G, g = E(
+    {
+      images: e.eventGame.images,
+      imagePlaceholder: u
+    },
+    R.SPLIT
+  ), x = m().textSecondary, a = m().secondaryContainer, f = T().primary, l = m().surfaceVariant, s = I(), o = A(), y = M().size, p = e.eventGame.status === "OPEN" && e.prediction && e.onPredictionUpdate, S = (P) => {
+    console.log(`Edit prediction for fixture at index: ${P}`);
+  }, c = z({
+    spacingScale: o,
+    borderRadius: s,
+    bgcolor: d(l || ""),
+    isMobile: i
+  }), b = {
+    display: "flex",
+    py: i ? o.xs : o.sm,
+    px: i ? o.sm : o.md,
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: "8px",
+    borderRadius: s.xl,
+    bgcolor: a,
+    border: `${y} solid ${a}`,
+    "&:hover": {
+      bgcolor: a,
+      opacity: 0.9
+    },
+    fontSize: i ? "0.750em" : "0.8125em",
+    textTransform: "uppercase"
+  }, h = {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: "8px"
+  }, C = {
+    color: x,
+    fontFamily: f,
+    fontStyle: "normal",
+    fontWeight: 500,
+    lineHeight: "22px",
+    letterSpacing: "0.46px",
+    textTransform: "uppercase"
+  }, j = () => /* @__PURE__ */ t.jsx(
+    B,
+    {
+      entity: { ...e.eventGame, labels: null },
+      headline: n("eventGame.headline"),
+      finalImage: g,
+      brandingContent: /* @__PURE__ */ t.jsx(t.Fragment, {}),
+      isTabulated: !1,
+      alwaysShowImage: !0,
+      rulesDisplay: e.rulesDisplay,
+      children: e.isUnauthorized ? /* @__PURE__ */ t.jsx(r, { sx: c.alertMessageArea, children: /* @__PURE__ */ t.jsx(r, { sx: c.alertMessageWrapper, children: /* @__PURE__ */ t.jsx(
+        D,
+        {
+          variant: "error",
+          title: n("common.authentication.accessRequired"),
+          message: n("common.authentication.invalidOrMissingAuth")
+        }
+      ) }) }) : /* @__PURE__ */ t.jsxs(r, { sx: c.questionAreaContent, children: [
+        /* @__PURE__ */ t.jsx(
+          r,
+          {
+            sx: {
+              p: o.lg,
+              gap: o.lg,
+              display: "flex",
+              flexDirection: "column",
+              backdropFilter: "blur(4px)",
+              bgcolor: `rgba(${l ? d(l || "").replace(/[^\d,]/g, "") : ""}, 0.5)`,
+              borderRadius: s.sm,
+              position: "relative",
+              overflow: "visible"
+            },
+            children: p ? /* @__PURE__ */ t.jsx(
+              $,
+              {
+                fixtures: e.eventGame.fixtures,
+                prediction: e.prediction,
+                onEditPrediction: S,
+                onPredictionUpdate: e.onPredictionUpdate,
+                play: e.play,
+                view: "score",
+                isSplitVariant: !0,
+                onPlayResult: e.onPlayResult
+              }
+            ) : null
+          }
+        ),
+        e.additionalCTA && /* @__PURE__ */ t.jsx(
+          r,
+          {
+            sx: {
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              padding: i ? o.sm : o.md
+            },
+            children: /* @__PURE__ */ t.jsx(
+              w,
+              {
+                additionalCTA: e.additionalCTA,
+                buttonStyle: b,
+                buttonContentStyle: h,
+                textStyle: C
+              }
+            )
+          }
+        )
+      ] })
+    }
+  );
+  return /* @__PURE__ */ t.jsx(F, { brandingBorderColor: null, children: j() });
+};
+export {
+  ae as default
+};

package/packages/event-game-play/src/components/Variants/Split/ScoreState/EventGameSplitScoreState.styles.js

@@ -0,0 +1,45 @@
+const l = (e) => ({
+  // Question area content wrapper
+  questionAreaContent: {
+    p: e.spacingScale.lg,
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    gap: e.spacingScale.lg,
+    flex: 1,
+    height: "100%"
+  },
+  // Lead collection container
+  leadCollectionContainer: {
+    p: e.spacingScale.lg,
+    gap: e.spacingScale.md,
+    display: "flex",
+    flexDirection: "column",
+    backdropFilter: "blur(4px)",
+    bgcolor: `rgba(${e.bgcolor ? e.bgcolor.replace(/[^\d,]/g, "") : ""}, 0.5)`,
+    borderRadius: e.borderRadius.sm
+  },
+  // Lead content wrapper
+  leadContentWrapper: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    alignSelf: "stretch"
+  },
+  alertMessageArea: {
+    flex: e.isMobile ? 1 : "0 0 50%",
+    width: e.isMobile ? "100%" : "50%",
+    minWidth: e.isMobile ? "100%" : "50%",
+    maxWidth: e.isMobile ? "100%" : "50%",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center"
+  },
+  alertMessageWrapper: {
+    p: e.spacingScale.lg
+  }
+});
+export {
+  l as createStyles
+};