fansunited-frontend-components 0.0.39 → 0.0.40

package/PickThePair.js

@@ -1,12 +1,14 @@
 import { jsx as t, jsxs as w, Fragment as Q } from "react/jsx-runtime";
-import { g as Ie, u as me, h as se, c as We, d as De, a as ze, l as Le } from "./chunks/useImageVariant-Do8kOVs2.js";
-import K, { useMemo as ge, useCallback as Be, useEffect as de, useState as G } from "react";
-import { a0 as ne, e as Z, a3 as Ue, w as ee, x as X, a2 as ue, B as h, ap as le, v as re, a7 as Ae, T as p, u as fe, f as te, a5 as ke, aq as pe, W as he, a6 as $e, i as _e, c as He, C as Ee, a as Oe, E as je, b as Me } from "./chunks/ConstantsProvider-BPJJz9fq.js";
-import { S as Ne } from "./chunks/Spinner-m59ZJZ35.js";
-import { createPortal as Ve } from "react-dom";
-import { N as Ye, S as qe, O as Xe, u as Ge } from "./chunks/useInfoPage-v91yL5SS.js";
-import { C as Qe } from "./chunks/CollectLeadForm-o9NdYQgu.js";
-import { T as Je } from "./chunks/TimerOutlined-DiX8hCoC.js";
+import { g as Ie, u as me, h as se, b as We, l as De } from "./chunks/useImageVariant-pnFelF9A.js";
+import K, { useMemo as ge, useCallback as ze, useEffect as de, useState as G } from "react";
+import { A as ne, e as Z, S as Le, j as ee, k as X, F as ue, B as h, ap as ae, h as re, ac as Be, T as p, u as fe, f as te, D as ke, aq as pe, W as he, ab as Ue, i as Ae, a as $e, C as _e, b as He, E as Ee, d as Oe } from "./chunks/PrizeCard-gMp7I66d.js";
+import { S as je } from "./chunks/Spinner-BBA89t5s.js";
+import { createPortal as Me } from "react-dom";
+import { O as Ne, u as Ve } from "./chunks/useInfoPage-DPkzE5Gn.js";
+import { N as Ye, S as qe } from "./chunks/NotFoundSkeleton-B3RNa8KJ.js";
+import { C as Xe } from "./chunks/CollectLeadForm-0vVnu4DL.js";
+import { T as Ge } from "./chunks/TimerOutlined-DmKZDDI-.js";
+import { d as Qe, a as Je } from "./chunks/default-quiz-bg-vertical-CT7rrg9o.js";
 const xe = ({
   sdk: e,
   contentId: n,
@@ -14,9 +16,9 @@ const xe = ({
   contentName: c,
   brandingColors: i,
   brandingUrls: s,
-  campaignId: a,
+  campaignId: l,
   campaignName: d,
-  startGame: l,
+  startGame: a,
   fields: o = ["fullName", "email"],
   leadTitle: y,
   leadDescription: g,
@@ -27,9 +29,9 @@ const xe = ({
   isSubmittingParticipation: S = !1,
   onSuccessLabel: W
 }) => {
-  const { t: R } = ne(), T = y ?? R("leads.header.title"), N = g ?? R("leads.header.description"), L = u ?? R("leads.buttons.submit"), z = x ?? R("leads.success.title"), I = b ?? R("leads.success.description"), U = l ? {
+  const { t: R } = ne(), T = y ?? R("leads.header.title"), N = g ?? R("leads.header.description"), L = u ?? R("leads.buttons.submit"), z = x ?? R("leads.success.title"), I = b ?? R("leads.success.description"), U = a ? {
     defaultLabel: W,
-    onClick: l
+    onClick: a
   } : void 0, F = {
     id: n,
     type: r,
@@ -45,14 +47,14 @@ const xe = ({
     }
   };
   return /* @__PURE__ */ t(
-    Qe,
+    Xe,
     {
       sdk: e,
       content: F,
       onSuccessCta: U,
       branding: $,
       campaign: {
-        id: a,
+        id: l,
         name: d
       },
       fields: o,
@@ -72,7 +74,7 @@ const xe = ({
   brandingBorderColor: n,
   state: r
 }) => {
-  const c = Z(), i = Ue(), s = r === "play" ? i : c, a = ee().md, d = n || X().secondaryContainer, o = ue().size + " solid " + d;
+  const c = Z(), i = Le(), s = r === "play" ? i : c, l = ee().md, d = n || X().secondaryContainer, o = ue().size + " solid " + d;
   return /* @__PURE__ */ t(
     h,
     {
@@ -80,7 +82,7 @@ const xe = ({
         display: "flex",
         flexDirection: s ? "column" : "row",
         width: "100%",
-        borderRadius: a,
+        borderRadius: l,
         boxShadow: "md",
         border: o,
         overflow: "hidden",
@@ -98,12 +100,12 @@ const xe = ({
       notFoundMessage: n("pickThePair.pickThePairNotFoundDescription")
     }
   );
-  return e === le.LANDING_PAGE ? r : /* @__PURE__ */ t(we, { brandingBorderColor: null, children: r });
+  return e === ae.LANDING_PAGE ? r : /* @__PURE__ */ t(we, { brandingBorderColor: null, children: r });
 }, Re = (e) => {
-  const n = re().secondary, r = Ae(), c = e.isSplitVariant && r, i = Z(), s = Ie(e.primaryUrl, e.secondaryUrl, "logo");
+  const n = re().secondary, r = Be(), c = e.isSplitVariant && r, i = Z(), s = Ie(e.primaryUrl, e.secondaryUrl, "logo");
   if (!e.brandingLogo)
     return null;
-  const a = () => {
+  const l = () => {
     s && window.open(s, "_blank", "noopener,noreferrer");
   }, d = /* @__PURE__ */ t(
     "img",
@@ -115,7 +117,7 @@ const xe = ({
         maxWidth: "100px"
       }
     }
-  ), l = s ? typeof window > "u" ? /* @__PURE__ */ t(
+  ), a = s ? typeof window > "u" ? /* @__PURE__ */ t(
     h,
     {
       component: "a",
@@ -132,7 +134,7 @@ const xe = ({
   ) : /* @__PURE__ */ t(
     h,
     {
-      onClick: a,
+      onClick: l,
       sx: {
         cursor: "pointer",
         display: "inline-flex"
@@ -169,7 +171,7 @@ const xe = ({
             children: e.label
           }
         ),
-        l
+        a
       ]
     }
   ) : /* @__PURE__ */ w(
@@ -200,7 +202,7 @@ const xe = ({
             children: e.label
           }
         ),
-        l
+        a
       ]
     }
   );
@@ -211,7 +213,7 @@ const xe = ({
     textColor: c,
     bgcolor: i,
     mdBorderRadius: s,
-    isExtraSmall: a
+    isExtraSmall: l
   } = e;
   return {
     leadCollectionContainer: {
@@ -259,7 +261,7 @@ const xe = ({
       fontFamily: r,
       color: c,
       textAlign: "center",
-      fontSize: a ? "16px" : "18px",
+      fontSize: l ? "16px" : "18px",
       fontWeight: 500
     },
     instructions: {
@@ -273,35 +275,35 @@ const xe = ({
     },
     footerContainer: {
       display: "flex",
-      flexDirection: a ? "column" : "row",
+      flexDirection: l ? "column" : "row",
       justifyContent: "space-between",
-      alignItems: a ? "stretch" : "center",
+      alignItems: l ? "stretch" : "center",
       gap: n.md,
       px: n.md
       // mb: spacingScale.md,
     },
     footerContainerNoLogo: {
       display: "flex",
-      justifyContent: a ? "center" : "flex-end",
+      justifyContent: l ? "center" : "flex-end",
       gap: n.md,
       px: n.md
       // mb: spacingScale.md,
     },
-    getTimeUpOverlayStyle: (d, l) => {
+    getTimeUpOverlayStyle: (d, a) => {
       const o = (g, u) => {
         const x = parseInt(g.slice(1, 3), 16), b = parseInt(g.slice(3, 5), 16), P = parseInt(g.slice(5, 7), 16);
         return `rgba(${x}, ${b}, ${P}, ${u})`;
       }, y = d.startsWith("#") ? o(d, 0.5) : d.startsWith("rgb") ? d.replace(")", ", 0.50)").replace("rgb", "rgba") : "rgba(0, 0, 0, 0.50)";
       return {
-        position: l ? "relative" : "absolute",
-        top: l ? "auto" : 0,
-        left: l ? "auto" : 0,
-        right: l ? "auto" : 0,
-        bottom: l ? "auto" : 0,
-        minHeight: l ? "300px" : "auto",
+        position: a ? "relative" : "absolute",
+        top: a ? "auto" : 0,
+        left: a ? "auto" : 0,
+        right: a ? "auto" : 0,
+        bottom: a ? "auto" : 0,
+        minHeight: a ? "300px" : "auto",
         // Match questionContentContainer width and margins on mobile
-        maxWidth: l ? "1200px" : "auto",
-        margin: l ? `0 ${n.md}` : "auto",
+        maxWidth: a ? "1200px" : "auto",
+        margin: a ? `0 ${n.md}` : "auto",
         width: "auto",
         backgroundColor: y,
         backdropFilter: "blur(4px)",
@@ -325,13 +327,13 @@ const xe = ({
     timeUpText: {
       color: "#FFFFFF",
       fontWeight: 700,
-      fontSize: a ? "32px" : "48px",
+      fontSize: l ? "32px" : "48px",
       lineHeight: 1.2,
       textAlign: "center",
       textShadow: "0 2px 20px rgba(0, 0, 0, 0.3)",
       animation: "slideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)",
-      padding: a ? 2 : 3,
-      maxWidth: a ? "280px" : "500px",
+      padding: l ? 2 : 3,
+      maxWidth: l ? "280px" : "500px",
       "@keyframes slideUp": {
         from: {
           transform: "translateY(20px)",
@@ -346,7 +348,7 @@ const xe = ({
     welcome: {
       fontFamily: r,
       color: c,
-      fontSize: a ? "0.875em" : "1em",
+      fontSize: l ? "0.875em" : "1em",
       fontWeight: 400,
       lineHeight: 1.5,
       maxWidth: "800px",
@@ -361,9 +363,9 @@ const xe = ({
     whiteTextColor: c,
     successColor: i,
     dangerColor: s,
-    optionBackground: a,
+    optionBackground: l,
     spacingScale: d,
-    xlBorderRadius: l,
+    xlBorderRadius: a,
     borderSize: o
   } = e;
   return {
@@ -391,8 +393,8 @@ const xe = ({
       gap: d["2xs"],
       justifyContent: "space-between",
       padding: `${d.xs} ${d.sm}`,
-      backgroundColor: u ? s : g ? i : y ? n : a,
-      borderRadius: l,
+      backgroundColor: u ? s : g ? i : y ? n : l,
+      borderRadius: a,
       cursor: "pointer",
       transition: "all 0.3s ease",
       position: "relative",
@@ -405,7 +407,7 @@ const xe = ({
       WebkitTapHighlightColor: "transparent",
       "&:hover": y || g || u ? {} : {
         border: `${o} solid ${n}`,
-        backgroundColor: a,
+        backgroundColor: l,
         transform: "translateY(-2px)"
       }
     }),
@@ -496,9 +498,9 @@ function Fe(e, n) {
     const d = ce(s);
     c.push(...d);
   }
-  const a = r.filter((d) => !i.includes(d));
-  if (a.length > 0) {
-    const d = ce(a);
+  const l = r.filter((d) => !i.includes(d));
+  if (l.length > 0) {
+    const d = ce(l);
     i.push(...d);
   }
   return {
@@ -513,13 +515,13 @@ const ve = ({
   selectedLeft: c,
   selectedRight: i,
   showError: s,
-  onSelectLeft: a,
+  onSelectLeft: l,
   onSelectRight: d,
-  brandingColors: l,
+  brandingColors: a,
   disabled: o = !1,
   isTimeUp: y = !1
 }) => {
-  const g = Z(), u = X(), x = fe(), b = te(), P = ee().xl, S = ue().size, W = (l == null ? void 0 : l.primary_color) || u.palette.primary.plainColor, R = (l == null ? void 0 : l.content_color) || x.colorSchemes.light.textColor, T = x.colorSchemes.dark.textColor, N = u.palette.success.plainColor, L = u.palette.danger.plainColor, I = et({
+  const g = Z(), u = X(), x = fe(), b = te(), P = ee().xl, S = ue().size, W = (a == null ? void 0 : a.primary_color) || u.palette.primary.plainColor, R = (a == null ? void 0 : a.content_color) || x.colorSchemes.light.textColor, T = x.colorSchemes.dark.textColor, N = u.palette.success.plainColor, L = u.palette.danger.plainColor, I = et({
     primaryColor: W,
     textColor: R,
     whiteTextColor: T,
@@ -537,7 +539,7 @@ const ve = ({
     const C = F(k);
     if (!C) return null;
     const m = f === "left" ? $(k) : E(k), v = f === "left" && c === k || f === "right" && i === k, H = (v || m) && C.images, A = g ? ((B = C.images) == null ? void 0 : B.mobile) || ((j = C.images) == null ? void 0 : j.main) : (M = C.images) == null ? void 0 : M.main, O = f === "left" ? C.optionA : C.optionB, V = () => {
-      o || s || y || (f === "left" ? a(k) : d(k));
+      o || s || y || (f === "left" ? l(k) : d(k));
     }, D = s && v, Y = s && !v;
     return /* @__PURE__ */ w(
       h,
@@ -589,7 +591,7 @@ const ve = ({
   ] });
 }, ye = (e) => {
   let n;
-  const r = X(), c = te(), i = r.palette.danger.softBg, s = r.palette.danger.plainColor, a = r.palette.warning.softBg, d = r.palette.warning.plainColor, l = e.brandingPrimaryColor || r.palette.primary.plainColor, o = ee().xl, y = re().secondary, g = r.palette.primary.onPrimary, u = {
+  const r = X(), c = te(), i = r.palette.danger.softBg, s = r.palette.danger.plainColor, l = r.palette.warning.softBg, d = r.palette.warning.plainColor, a = e.brandingPrimaryColor || r.palette.primary.plainColor, o = ee().xl, y = re().secondary, g = r.palette.primary.onPrimary, u = {
     "@keyframes pulse": {
       "0%": {
         transform: "scale(1)"
@@ -601,7 +603,7 @@ const ve = ({
         transform: "scale(1)"
       }
     }
-  }, x = Be(() => {
+  }, x = ze(() => {
     const S = e.timer - 1;
     e.onTimeUpdate(S);
   }, [e.onTimeUpdate, e.timer]);
@@ -619,11 +621,11 @@ const ve = ({
       iconColor: s,
       animation: "pulse 1s infinite"
     } : S <= 50 ? {
-      background: a,
+      background: l,
       color: d,
       iconColor: d
     } : {
-      background: l,
+      background: a,
       color: g,
       iconColor: g
     };
@@ -649,7 +651,7 @@ const ve = ({
       },
       children: [
         /* @__PURE__ */ t(
-          Je,
+          Ge,
           {
             sx: {
               width: "24px",
@@ -684,10 +686,10 @@ const ve = ({
   meetsThreshold: c,
   totalPairs: i,
   matchedPairs: s,
-  brandingColors: a,
+  brandingColors: l,
   bgcolor: d
 }) => {
-  const { t: l } = ne(), o = Z(), y = X(), g = te(), u = ee().md, x = (a == null ? void 0 : a.content_color) || y.textColor, b = (a == null ? void 0 : a.primary_color) || y.palette.primary.plainColor, P = y.palette.danger.plainColor, S = y.palette.success.plainColor, W = y.surface, R = i - s, T = c ? S : P;
+  const { t: a } = ne(), o = Z(), y = X(), g = te(), u = ee().md, x = (l == null ? void 0 : l.content_color) || y.textColor, b = (l == null ? void 0 : l.primary_color) || y.palette.primary.plainColor, P = y.palette.danger.plainColor, S = y.palette.success.plainColor, W = y.surface, R = i - s, T = c ? S : P;
   return /* @__PURE__ */ t(
     h,
     {
@@ -738,7 +740,7 @@ const ve = ({
                     opacity: 0.7,
                     fontSize: o ? "0.75em" : "0.875em"
                   },
-                  children: l("pickThePair.challengeStats.attempts")
+                  children: a("pickThePair.challengeStats.attempts")
                 }
               )
             ] }),
@@ -767,7 +769,7 @@ const ve = ({
                     opacity: 0.7,
                     fontSize: o ? "0.75em" : "0.875em"
                   },
-                  children: l("pickThePair.challengeStats.accuracy")
+                  children: a("pickThePair.challengeStats.accuracy")
                 }
               )
             ] }),
@@ -796,7 +798,7 @@ const ve = ({
                     opacity: 0.7,
                     fontSize: o ? "0.75em" : "0.875em"
                   },
-                  children: l("pickThePair.challengeStats.target")
+                  children: a("pickThePair.challengeStats.target")
                 }
               )
             ] }),
@@ -822,7 +824,7 @@ const ve = ({
                     opacity: 0.7,
                     fontSize: o ? "0.75em" : "0.875em"
                   },
-                  children: l("pickThePair.challengeStats.remaining")
+                  children: a("pickThePair.challengeStats.remaining")
                 }
               )
             ] })
@@ -897,7 +899,7 @@ const ve = ({
   ) });
 }, nt = (e) => {
   var T, N, L, z, I, U, F, $, E, _, k, f, C, m, v, H, A, O, V, D, Y, B, j;
-  const { t: n } = ne(), r = Z(), c = pe(), i = ((T = e.infoPage.branding) == null ? void 0 : T.colors) || null, s = r ? ((L = (N = e.infoPage.branding) == null ? void 0 : N.images) == null ? void 0 : L.mobile_logo) || ((I = (z = e.infoPage.branding) == null ? void 0 : z.images) == null ? void 0 : I.main_logo) || "" : ((F = (U = e.infoPage.branding) == null ? void 0 : U.images) == null ? void 0 : F.main_logo) || "", a = e.imagePosition || "left", [d, l] = G(!1), o = me(
+  const { t: n } = ne(), r = Z(), c = pe(), i = ((T = e.infoPage.branding) == null ? void 0 : T.colors) || null, s = r ? ((L = (N = e.infoPage.branding) == null ? void 0 : N.images) == null ? void 0 : L.mobile_logo) || ((I = (z = e.infoPage.branding) == null ? void 0 : z.images) == null ? void 0 : I.main_logo) || "" : ((F = (U = e.infoPage.branding) == null ? void 0 : U.images) == null ? void 0 : F.main_logo) || "", l = e.imagePosition || "left", [d, a] = G(!1), o = me(
     {
       images: e.infoPage.images,
       imagePlaceholder: e.defaultImagePlaceholderUrl || ""
@@ -911,7 +913,7 @@ const ve = ({
     mdBorderRadius: b,
     isExtraSmall: y
   }), W = e.matchedPairs.length === e.pairData.pairs.length, R = (M) => {
-    var q, J, ie, oe, ae;
+    var q, J, ie, oe, le;
     return /* @__PURE__ */ t(
       Re,
       {
@@ -919,7 +921,7 @@ const ve = ({
         textColor: M,
         label: ((q = e.infoPage.labels) == null ? void 0 : q.sponsor) || null,
         primaryUrl: (ie = (J = e.infoPage.branding) == null ? void 0 : J.urls) == null ? void 0 : ie.primary_url,
-        secondaryUrl: (ae = (oe = e.infoPage.branding) == null ? void 0 : oe.urls) == null ? void 0 : ae.secondary_url
+        secondaryUrl: (le = (oe = e.infoPage.branding) == null ? void 0 : oe.urls) == null ? void 0 : le.secondary_url
       }
     );
   };
@@ -934,7 +936,7 @@ const ve = ({
       },
       headline: n("pickThePair.headline"),
       finalImage: o,
-      imagePosition: a,
+      imagePosition: l,
       embedCodeContainerRef: void 0,
       hasEmbedCode: !1,
       children: /* @__PURE__ */ w(Q, { children: [
@@ -1091,7 +1093,7 @@ const ve = ({
                     label: n("pickThePair.buttons.continue"),
                     buttonColor: (i == null ? void 0 : i.primary_color) || X().palette.primary.plainColor,
                     isVoting: !1,
-                    onClick: () => l(!0)
+                    onClick: () => a(!0)
                   }
                 )
               ]
@@ -1109,7 +1111,7 @@ const ve = ({
     textColor: c,
     bgcolor: i,
     mdBorderRadius: s,
-    mobile: a,
+    mobile: l,
     surface: d
   } = e;
   return {
@@ -1135,19 +1137,19 @@ const ve = ({
       flexDirection: "column",
       gap: n.md,
       textAlign: "center",
-      padding: a ? `0 ${n.md}` : `0 ${n.lg}`
+      padding: l ? `0 ${n.md}` : `0 ${n.lg}`
     },
     title: {
       fontFamily: r,
       color: c,
-      fontSize: a ? "1.75em" : "2.25em",
+      fontSize: l ? "1.75em" : "2.25em",
       fontWeight: 700,
       lineHeight: 1.2
     },
     subtitle: {
       fontFamily: r,
       color: c,
-      fontSize: a ? "1em" : "1.125em",
+      fontSize: l ? "1em" : "1.125em",
       fontWeight: 400,
       lineHeight: 1.5,
       maxWidth: "800px",
@@ -1156,7 +1158,7 @@ const ve = ({
     welcome: {
       fontFamily: r,
       color: c,
-      fontSize: a ? "0.875em" : "1em",
+      fontSize: l ? "0.875em" : "1em",
       fontWeight: 400,
       lineHeight: 1.5,
       maxWidth: "800px",
@@ -1166,7 +1168,7 @@ const ve = ({
     instructions: {
       fontFamily: r,
       color: c,
-      fontSize: a ? "1em" : "1.3em",
+      fontSize: l ? "1em" : "1.3em",
       fontWeight: 500,
       lineHeight: 1.5,
       textAlign: "center"
@@ -1174,7 +1176,7 @@ const ve = ({
     disclaimer: {
       fontFamily: r,
       color: c,
-      fontSize: a ? "0.75em" : "0.875em",
+      fontSize: l ? "0.75em" : "0.875em",
       fontWeight: 400,
       lineHeight: 1.5,
       textAlign: "center",
@@ -1186,10 +1188,10 @@ const ve = ({
       gap: n.md,
       backgroundColor: d,
       borderRadius: s,
-      padding: a ? n.lg : n.xl,
+      padding: l ? n.lg : n.xl,
       maxWidth: "600px",
       margin: "0 auto",
-      width: a ? `calc(100% - ${n.md} * 2)` : `calc(100% - ${n.lg} * 2)`,
+      width: l ? `calc(100% - ${n.md} * 2)` : `calc(100% - ${n.lg} * 2)`,
       boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
       backdropFilter: "blur(4px)",
       boxSizing: "border-box"
@@ -1200,11 +1202,11 @@ const ve = ({
       gap: n.md,
       backgroundColor: d,
       borderRadius: s,
-      px: a ? n.md : n.lg,
-      py: a ? n.md : n.lg,
+      px: l ? n.md : n.lg,
+      py: l ? n.md : n.lg,
       maxWidth: "1200px",
       margin: "0 auto",
-      width: a ? `calc(100% - ${n.md} * 2)` : `calc(100% - ${n.lg} * 2)`,
+      width: l ? `calc(100% - ${n.md} * 2)` : `calc(100% - ${n.lg} * 2)`,
       boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
       overflow: "hidden",
       boxSizing: "border-box"
@@ -1216,11 +1218,11 @@ const ve = ({
       alignItems: "center",
       gap: n.sm
     },
-    getTimeUpOverlayStyle: (l, o) => {
+    getTimeUpOverlayStyle: (a, o) => {
       const y = (u, x) => {
         const b = parseInt(u.slice(1, 3), 16), P = parseInt(u.slice(3, 5), 16), S = parseInt(u.slice(5, 7), 16);
         return `rgba(${b}, ${P}, ${S}, ${x})`;
-      }, g = l.startsWith("#") ? y(l, 0.5) : l.startsWith("rgb") ? l.replace(")", ", 0.50)").replace("rgb", "rgba") : "rgba(0, 0, 0, 0.50)";
+      }, g = a.startsWith("#") ? y(a, 0.5) : a.startsWith("rgb") ? a.replace(")", ", 0.50)").replace("rgb", "rgba") : "rgba(0, 0, 0, 0.50)";
       return {
         position: o ? "relative" : "absolute",
         top: o ? "auto" : 0,
@@ -1255,13 +1257,13 @@ const ve = ({
     timeUpText: {
       color: "#FFFFFF",
       fontWeight: 700,
-      fontSize: a ? "2em" : "3em",
+      fontSize: l ? "2em" : "3em",
       lineHeight: 1.2,
       textAlign: "center",
       textShadow: "0 2px 20px rgba(0, 0, 0, 0.3)",
       animation: "slideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)",
-      padding: a ? 2 : 3,
-      maxWidth: a ? "280px" : "500px",
+      padding: l ? 2 : 3,
+      maxWidth: l ? "280px" : "500px",
       "@keyframes slideUp": {
         from: {
           transform: "translateY(20px)",
@@ -1281,9 +1283,9 @@ const ve = ({
     whiteTextColor: c,
     successColor: i,
     dangerColor: s,
-    optionBackground: a,
+    optionBackground: l,
     surface: d,
-    mobile: l,
+    mobile: a,
     spacingScale: o,
     xlBorderRadius: y,
     borderSize: g
@@ -1291,19 +1293,19 @@ const ve = ({
   return {
     container: {
       display: "flex",
-      flexDirection: l ? "column" : "row",
-      gap: l ? o.xs : o["2xl"],
+      flexDirection: a ? "column" : "row",
+      gap: a ? o.xs : o["2xl"],
       width: "100%",
       maxWidth: "100%",
       boxSizing: "border-box",
       overflow: "hidden",
       bgcolor: d,
-      pt: l ? 0 : o["2xs"]
+      pt: a ? 0 : o["2xs"]
     },
     column: {
       display: "flex",
       flexDirection: "column",
-      gap: l ? o.xs : o.sm,
+      gap: a ? o.xs : o.sm,
       flex: 1,
       minWidth: 0,
       maxWidth: "100%"
@@ -1314,26 +1316,26 @@ const ve = ({
       gap: o["2xs"],
       justifyContent: "space-between",
       padding: `${o.xs} ${o.sm}`,
-      backgroundColor: P ? s : b ? i : x ? n : a,
-      borderTopLeftRadius: u === "left" && l ? "0px" : y,
-      borderBottomLeftRadius: u === "left" && l ? "0px" : y,
-      borderTopRightRadius: u === "right" && l ? "0px" : y,
-      borderBottomRightRadius: u === "right" && l ? "0px" : y,
+      backgroundColor: P ? s : b ? i : x ? n : l,
+      borderTopLeftRadius: u === "left" && a ? "0px" : y,
+      borderBottomLeftRadius: u === "left" && a ? "0px" : y,
+      borderTopRightRadius: u === "right" && a ? "0px" : y,
+      borderBottomRightRadius: u === "right" && a ? "0px" : y,
       cursor: "pointer",
       transition: "all 0.3s ease",
       position: "relative",
-      minHeight: l ? "48px" : "56px",
-      width: l ? "90%" : "100%",
+      minHeight: a ? "48px" : "56px",
+      width: a ? "90%" : "100%",
       maxWidth: "100%",
       boxSizing: "border-box",
       overflow: "visible",
       border: `${g} solid ${x && !b && !P ? n : "transparent"}`,
       WebkitTapHighlightColor: "transparent",
-      marginLeft: l && u === "right" ? "auto" : 0,
-      marginRight: l && u === "left" ? "auto" : 0,
+      marginLeft: a && u === "right" ? "auto" : 0,
+      marginRight: a && u === "left" ? "auto" : 0,
       "&:hover": x || b || P ? {} : {
         border: `${g} solid ${n}`,
-        backgroundColor: a,
+        backgroundColor: l,
         transform: "translateY(-2px)"
       }
     }),
@@ -1355,8 +1357,8 @@ const ve = ({
       }
     },
     getImageContainerStyle: (u, x, b) => ({
-      width: l ? "48px" : "56px",
-      height: l ? "48px" : "56px",
+      width: a ? "48px" : "56px",
+      height: a ? "48px" : "56px",
       borderRadius: "50%",
       overflow: "hidden",
       backgroundColor: "#FFFFFF",
@@ -1365,7 +1367,7 @@ const ve = ({
       top: "50%",
       transform: "translateY(-50%)",
       zIndex: 10,
-      ...b === "left" ? { right: l ? "-12px" : "-14px" } : { left: l ? "-12px" : "-14px" },
+      ...b === "left" ? { right: a ? "-12px" : "-14px" } : { left: a ? "-12px" : "-14px" },
       border: x ? `${g} solid ${s}` : u ? `${g} solid ${i}` : `${g} solid ${n}`,
       boxShadow: "0 2px 12px rgba(0, 0, 0, 0.15)"
     }),
@@ -1380,7 +1382,7 @@ const ve = ({
     getOptionTitleStyle: (u, x, b, P) => ({
       color: x || b || P ? c : r,
       fontWeight: 600,
-      fontSize: l ? "0.8125em" : "0.9375em",
+      fontSize: a ? "0.8125em" : "0.9375em",
       lineHeight: 1.3,
       wordBreak: "break-word",
       overflowWrap: "break-word",
@@ -1390,7 +1392,7 @@ const ve = ({
     getOptionSubtitleStyle: (u, x, b, P) => ({
       color: x || b || P ? c : r,
       opacity: 0.7,
-      fontSize: l ? "0.6875em" : "0.8125em",
+      fontSize: a ? "0.6875em" : "0.8125em",
       lineHeight: 1.3,
       wordBreak: "break-word",
       overflowWrap: "break-word",
@@ -1399,25 +1401,25 @@ const ve = ({
     }),
     matchIndicator: {
       position: "absolute",
-      right: l ? o.xs : o.sm,
+      right: a ? o.xs : o.sm,
       top: "50%",
       transform: "translateY(-50%)"
     }
   };
-}, at = ({
+}, lt = ({
   pairs: e,
   order: n,
   matchedPairs: r,
   selectedLeft: c,
   selectedRight: i,
   showError: s,
-  onSelectLeft: a,
+  onSelectLeft: l,
   onSelectRight: d,
-  brandingColors: l,
+  brandingColors: a,
   disabled: o = !1,
   isTimeUp: y = !1
 }) => {
-  const g = Z(), u = fe(), x = X(), b = $e(), P = te(), S = ee().xl, W = ue().size, R = (l == null ? void 0 : l.primary_color) || x.palette.primary.plainColor, T = (l == null ? void 0 : l.content_color) || u.colorSchemes.light.textColor, N = u.colorSchemes.dark.textColor, L = x.palette.success.plainColor, z = x.palette.danger.plainColor, I = b === "dark" ? "#FFFFFF" : x.onSurface, U = x.surface, F = ot({
+  const g = Z(), u = fe(), x = X(), b = Ue(), P = te(), S = ee().xl, W = ue().size, R = (a == null ? void 0 : a.primary_color) || x.palette.primary.plainColor, T = (a == null ? void 0 : a.content_color) || u.colorSchemes.light.textColor, N = u.colorSchemes.dark.textColor, L = x.palette.success.plainColor, z = x.palette.danger.plainColor, I = b === "dark" ? "#FFFFFF" : x.onSurface, U = x.surface, F = ot({
     primaryColor: R,
     textColor: T,
     whiteTextColor: N,
@@ -1437,7 +1439,7 @@ const ve = ({
     const v = E(C);
     if (!v) return null;
     const H = m === "left" ? _(C) : k(C), A = m === "left" && c === C || m === "right" && i === C, O = (A || H) && v.images, V = g ? ((M = v.images) == null ? void 0 : M.mobile) || ((q = v.images) == null ? void 0 : q.main) : (J = v.images) == null ? void 0 : J.main, D = m === "left" ? v.optionA : v.optionB, Y = () => {
-      o || s || y || (m === "left" ? a(C) : d(C));
+      o || s || y || (m === "left" ? l(C) : d(C));
     }, B = s && A, j = s && !A;
     return /* @__PURE__ */ w(
       h,
@@ -1504,7 +1506,7 @@ const ve = ({
     /* @__PURE__ */ t(h, { sx: F.column, children: $.columnA.map((C) => f(C, "left")) }),
     /* @__PURE__ */ t(h, { sx: F.column, children: $.columnB.map((C) => f(C, "right")) })
   ] });
-}, lt = (e) => {
+}, at = (e) => {
   var P, S, W, R, T, N, L, z, I, U, F, $, E, _, k, f, C, m, v, H, A, O, V, D, Y, B, j, M, q;
   const { t: n } = ne(), r = Z(), c = ((P = e.infoPage.branding) == null ? void 0 : P.colors) || null, i = me(
     {
@@ -1512,9 +1514,9 @@ const ve = ({
       imagePlaceholder: e.defaultImagePlaceholderUrl || ""
     },
     he.STANDARD
-  ), s = e.matchedPairs.length === e.pairData.pairs.length, a = X(), d = (c == null ? void 0 : c.content_color) || a.textColor, l = re().primary, o = (c == null ? void 0 : c.background_color) || a.surfaceVariant, y = ee().md, g = (c == null ? void 0 : c.primary_color) || a.palette.primary.plainColor, u = te(), x = a.surface, b = it({
+  ), s = e.matchedPairs.length === e.pairData.pairs.length, l = X(), d = (c == null ? void 0 : c.content_color) || l.textColor, a = re().primary, o = (c == null ? void 0 : c.background_color) || l.surfaceVariant, y = ee().md, g = (c == null ? void 0 : c.primary_color) || l.palette.primary.plainColor, u = te(), x = l.surface, b = it({
     spacingScale: u,
-    fontFamilyPrimary: l,
+    fontFamilyPrimary: a,
     textColor: d,
     bgcolor: se(o || ""),
     mdBorderRadius: y,
@@ -1580,7 +1582,7 @@ const ve = ({
       /* @__PURE__ */ w(h, { sx: { ...b.pairSection, position: "relative" }, children: [
         ((R = e.infoPage.labels) == null ? void 0 : R.instructions) && /* @__PURE__ */ t(p, { level: "title-md", sx: b.instructions, children: e.infoPage.labels.instructions }),
         /* @__PURE__ */ t(
-          at,
+          lt,
           {
             pairs: e.pairData.pairs,
             order: e.pairData.config.order,
@@ -1732,7 +1734,7 @@ const ve = ({
   }
 }), ct = (e) => {
   var $, E, _, k, f, C, m, v, H, A, O, V;
-  const [n, r] = K.useState(!1), c = te(), i = fe(), { t: s } = ne(), a = Z(), d = pe(), { brandingImage: l, brandingColors: o, brandingLogo: y } = We(e.infoPage.branding || null), g = e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : a ? De : ze, u = l || me(
+  const [n, r] = K.useState(!1), c = te(), i = fe(), { t: s } = ne(), l = Z(), d = pe(), { brandingImage: a, brandingColors: o, brandingLogo: y } = We(e.infoPage.branding || null), g = e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : l ? Qe : Je, u = a || me(
     {
       images: e.infoPage.images,
       imagePlaceholder: g
@@ -1747,7 +1749,7 @@ const ve = ({
     onPrimaryColor: W,
     fontFamilyPrimary: R,
     darkTextColor: T,
-    isMobile: a,
+    isMobile: l,
     isExtraSmall: d,
     textColor: N,
     opacity: "60%"
@@ -1764,7 +1766,7 @@ const ve = ({
       }
     );
   }, F = () => {
-    var D, Y, B, j, M, q, J, ie, oe, ae, Pe, Se, Ce, Te;
+    var D, Y, B, j, M, q, J, ie, oe, le, Pe, Se, Ce, Te;
     return /* @__PURE__ */ t(Q, { children: n ? /* @__PURE__ */ w(Q, { children: [
       /* @__PURE__ */ t(h, { sx: z.contentContainerWithBackdrop, children: /* @__PURE__ */ t(
         xe,
@@ -1782,7 +1784,7 @@ const ve = ({
           leadTitle: (J = e.infoPage.labels) == null ? void 0 : J.leadTitle,
           leadDescription: (ie = e.infoPage.labels) == null ? void 0 : ie.leadDescription,
           leadCta: (oe = e.infoPage.labels) == null ? void 0 : oe.leadCta,
-          leadSuccessTitle: (ae = e.infoPage.labels) == null ? void 0 : ae.leadSuccessTitle,
+          leadSuccessTitle: (le = e.infoPage.labels) == null ? void 0 : le.leadSuccessTitle,
           leadSuccessDescription: (Pe = e.infoPage.labels) == null ? void 0 : Pe.leadSuccessDescription,
           syncWithProfile: (Se = e.leads) == null ? void 0 : Se.syncWithProfile
         }
@@ -1871,7 +1873,7 @@ const ve = ({
     ] }) });
   };
   return /* @__PURE__ */ t(
-    Xe,
+    Ne,
     {
       entity: {
         ...e.infoPage,
@@ -1885,9 +1887,9 @@ const ve = ({
     }
   );
 }, st = (e) => {
-  const [n, r] = G([]), [c, i] = G(null), [s, a] = G(null), [d, l] = G(!1), [o, y] = G(0), [g, u] = G(!1), [x, b] = G(!1), [P, S] = G(0), [W, R] = G(0), { infoPage: T } = Ge(e.entityId, "pick-the-pair", e.sdk), N = () => {
+  const [n, r] = G([]), [c, i] = G(null), [s, l] = G(null), [d, a] = G(!1), [o, y] = G(0), [g, u] = G(!1), [x, b] = G(!1), [P, S] = G(0), [W, R] = G(0), { infoPage: T } = Ve(e.entityId, "pick-the-pair", e.sdk), N = () => {
     if (T && T.id !== "not-found") {
-      const f = Object.keys(Le);
+      const f = Object.keys(De);
       if (T.language && f.includes(T.language))
         return T.language;
       if (T.language)
@@ -1897,7 +1899,7 @@ const ve = ({
   };
   de(() => {
     const f = N();
-    _e(f);
+    Ae(f);
   }, [e.language, T]);
   const L = ge(() => {
     if (!T || T.id === "not-found")
@@ -1929,7 +1931,7 @@ const ve = ({
   }, [L.config.timeLimit]);
   const z = L.config.mode.toLowerCase() === "challenge", I = n.length, U = P > 0 ? I / P * 100 : 0, F = U >= L.config.successThresholdPercent;
   if (!T)
-    return /* @__PURE__ */ t(Ne, { my: 20 });
+    return /* @__PURE__ */ t(je, { my: 20 });
   if (T.id === "not-found")
     return /* @__PURE__ */ t(Ke, { template: e.template });
   const $ = (f) => {
@@ -1944,12 +1946,12 @@ const ve = ({
     s ? f === s ? (S((m) => m + 1), r((m) => [
       ...m,
       { leftId: f, rightId: s }
-    ]), i(null), a(null)) : (S((m) => m + 1), R((m) => m + 1), i(f), l(!0), setTimeout(() => {
-      l(!1), i(null), a(null);
+    ]), i(null), l(null)) : (S((m) => m + 1), R((m) => m + 1), i(f), a(!0), setTimeout(() => {
+      a(!1), i(null), l(null);
     }, 800)) : i(f);
   }, E = (f) => {
     if (s === f) {
-      a(null);
+      l(null);
       return;
     }
     if (n.some((m) => m.rightId === f)) {
@@ -1959,16 +1961,16 @@ const ve = ({
     c ? f === c ? (S((m) => m + 1), r((m) => [
       ...m,
       { leftId: c, rightId: f }
-    ]), i(null), a(null)) : (S((m) => m + 1), R((m) => m + 1), a(f), l(!0), setTimeout(() => {
-      l(!1), i(null), a(null);
-    }, 800)) : a(f);
+    ]), i(null), l(null)) : (S((m) => m + 1), R((m) => m + 1), l(f), a(!0), setTimeout(() => {
+      a(!1), i(null), l(null);
+    }, 800)) : l(f);
   }, _ = (f) => {
     y(f), f === 0 && (u(!1), b(!0));
   }, k = async () => {
     u(!1);
   };
-  return e.template === le.LANDING_PAGE ? /* @__PURE__ */ t(
-    lt,
+  return e.template === ae.LANDING_PAGE ? /* @__PURE__ */ t(
+    at,
     {
       infoPage: T,
       pairData: L,
@@ -1992,7 +1994,7 @@ const ve = ({
       onSubmit: k,
       onTimeUpdate: _
     }
-  ) : e.template === le.OVERLAY ? /* @__PURE__ */ t(
+  ) : e.template === ae.OVERLAY ? /* @__PURE__ */ t(
     ct,
     {
       infoPage: T,
@@ -2029,7 +2031,7 @@ const ve = ({
       sdk: e.sdk,
       leads: e.leads,
       defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
-      imagePosition: e.template === le.STANDARD ? e.imagePosition : void 0,
+      imagePosition: e.template === ae.STANDARD ? e.imagePosition : void 0,
       timer: o,
       isTimerRunning: g,
       isTimeUp: x,
@@ -2048,12 +2050,12 @@ const ve = ({
   var u;
   const [n, r] = K.useState(!1), c = K.useRef(
     `pick-the-pair-shadow-root-${Math.random().toString(36).substring(2, 11)}`
-  ), i = K.useRef(null), s = K.useRef(null), a = K.useRef(null), d = K.useRef(null);
+  ), i = K.useRef(null), s = K.useRef(null), l = K.useRef(null), d = K.useRef(null);
   K.useEffect(() => {
     if (i.current)
-      return i.current.shadowRoot ? (s.current = i.current.shadowRoot, a.current = s.current.getElementById(
+      return i.current.shadowRoot ? (s.current = i.current.shadowRoot, l.current = s.current.getElementById(
         c.current
-      ), a.current || (a.current = document.createElement("div"), a.current.id = c.current, s.current.appendChild(a.current))) : (s.current = i.current.attachShadow({ mode: "open" }), a.current = document.createElement("div"), a.current.id = c.current, s.current.appendChild(a.current)), d.current || (d.current = He({
+      ), l.current || (l.current = document.createElement("div"), l.current.id = c.current, s.current.appendChild(l.current))) : (s.current = i.current.attachShadow({ mode: "open" }), l.current = document.createElement("div"), l.current.id = c.current, s.current.appendChild(l.current)), d.current || (d.current = $e({
         key: "pick-the-pair-css",
         prepend: !0,
         container: s.current
@@ -2061,20 +2063,20 @@ const ve = ({
         r(!1);
       };
   }, []);
-  const l = e.themeOptions, o = {
-    ...l,
-    mode: e.template === le.OVERLAY ? "dark" : l == null ? void 0 : l.mode
-  }, y = /* @__PURE__ */ t(h, { ref: i }), g = n && i.current && a.current && d.current ? Ve(
-    /* @__PURE__ */ t(Ee, { value: d.current, children: /* @__PURE__ */ t(Oe, { containerRef: i, children: /* @__PURE__ */ t(
-      je,
+  const a = e.themeOptions, o = {
+    ...a,
+    mode: e.template === ae.OVERLAY ? "dark" : a == null ? void 0 : a.mode
+  }, y = /* @__PURE__ */ t(h, { ref: i }), g = n && i.current && l.current && d.current ? Me(
+    /* @__PURE__ */ t(_e, { value: d.current, children: /* @__PURE__ */ t(He, { containerRef: i, children: /* @__PURE__ */ t(
+      Ee,
       {
         customTheme: o,
         mode: o == null ? void 0 : o.mode,
-        shadowRootElement: a.current,
+        shadowRootElement: l.current,
         children: /* @__PURE__ */ t(
-          Me,
+          Oe,
           {
-            shadowRootElement: a.current,
+            shadowRootElement: l.current,
             leadPhoneCountryCode: ((u = e.leads) == null ? void 0 : u.phoneCountryCode) || null,
             language: null,
             optionsLayout: null,
@@ -2083,13 +2085,13 @@ const ve = ({
         )
       }
     ) }) }),
-    a.current
+    l.current
   ) : null;
   return /* @__PURE__ */ w(Q, { children: [
     y,
     g
   ] });
-}, mt = (e) => /* @__PURE__ */ t(dt, { ...e, children: /* @__PURE__ */ t(st, { ...e }) }), Ct = mt;
+}, mt = (e) => /* @__PURE__ */ t(dt, { ...e, children: /* @__PURE__ */ t(st, { ...e }) }), kt = mt;
 export {
-  Ct as PickThePair
+  kt as PickThePair
 };