fansunited-frontend-components 0.0.47 → 0.0.49

package/PickThePair.js

@@ -1,14 +1,14 @@
-import { jsx as t, jsxs as w, Fragment as Q } from "react/jsx-runtime";
-import { g as Ie, h as se, b as We, l as De } from "./chunks/helpers-CV2Mo9Pu.js";
-import Z, { useMemo as me, useCallback as ze, useEffect as de, useState as G } from "react";
-import { Z as ne, m as K, ab as Le, t as ee, k as X, a0 as ge, B as h, aq as ae, r as re, ai as Be, T as p, n as ue, o as te, $ as ke, ae as pe, W as fe, ah as Ue, i as Ae, g as $e, C as _e, h as He, E as Ee, j as Oe } from "./chunks/PrizeCard-B0HczmXj.js";
-import { S as je } from "./chunks/Spinner-VF7pS8cz.js";
+import { jsx as t, jsxs as w, Fragment as J } from "react/jsx-runtime";
+import { g as Ie, h as se, c as We, l as De } from "./chunks/helpers-NuC1SzL3.js";
+import K, { useMemo as me, useCallback as Le, useEffect as de, useState as G } from "react";
+import { f as ne, i as Z, h as ze, b as ee, a as X, d as ge, B as h, G as ae, c as re, p as Be, T as p, u as ue, e as te, j as ke, l as pe, W as fe, H as Ue, o as Ae, J as $e, K as _e, L as He, M as Oe, N as Ee } from "./chunks/PrizeCard-DF3QxwQJ.js";
+import { S as je } from "./chunks/Spinner-DbUB64Gj.js";
 import { createPortal as Me } from "react-dom";
 import { u as Ne } from "./chunks/useInfoPage-BHdgKdme.js";
-import { N as Ve, S as Ye, O as qe } from "./chunks/NotFoundSkeleton-B_cooMQ9.js";
-import { C as Xe } from "./chunks/CollectLeadForm-DFIhLeYH.js";
-import { u as he, d as Ge, a as Qe } from "./chunks/useImageVariant-DalagjyR.js";
-import { T as Je } from "./chunks/TimerOutlined-azUFE6Ed.js";
+import { N as Ve, S as Ye, O as qe } from "./chunks/NotFoundSkeleton-Cs6DtD9u.js";
+import { C as Xe } from "./chunks/CollectLeadForm-DnLKA8qz.js";
+import { b as he, d as Ge, a as Je } from "./chunks/useImageVariant-Cex1eIqq.js";
+import { T as Qe } from "./chunks/TimerOutlined-DWE7f0YX.js";
 const xe = ({
   sdk: e,
   contentId: n,
@@ -29,7 +29,7 @@ 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 = a ? {
+  const { t: R } = ne(), T = y ?? R("leads.header.title"), N = g ?? R("leads.header.description"), z = u ?? R("leads.buttons.submit"), L = x ?? R("leads.success.title"), I = b ?? R("leads.success.description"), U = a ? {
     defaultLabel: W,
     onClick: a
   } : void 0, F = {
@@ -61,8 +61,8 @@ const xe = ({
       labels: {
         title: T,
         description: N,
-        submitButtonLabel: L,
-        successTitle: z,
+        submitButtonLabel: z,
+        successTitle: L,
         successDescription: I
       },
       syncWithProfile: P,
@@ -74,7 +74,7 @@ const xe = ({
   brandingBorderColor: n,
   state: r
 }) => {
-  const c = K(), i = Le(), s = r === "play" ? i : c, l = ee().md, d = n || X().secondaryContainer, o = ge().size + " solid " + d;
+  const c = Z(), i = ze(), s = r === "play" ? i : c, l = ee().md, d = n || X().secondaryContainer, o = ge().size + " solid " + d;
   return /* @__PURE__ */ t(
     h,
     {
@@ -92,7 +92,7 @@ const xe = ({
       children: e
     }
   );
-}, Ze = ({ template: e }) => {
+}, Ke = ({ template: e }) => {
   const { t: n } = ne(), r = /* @__PURE__ */ t(
     Ve,
     {
@@ -102,7 +102,7 @@ const xe = ({
   );
   return e === ae.LANDING_PAGE ? r : /* @__PURE__ */ t(we, { brandingBorderColor: null, children: r });
 }, Re = (e) => {
-  const n = re().secondary, r = Be(), c = e.isSplitVariant && r, i = K(), 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 l = () => {
@@ -206,7 +206,7 @@ const xe = ({
       ]
     }
   );
-}, Ke = (e) => {
+}, Ze = (e) => {
   const {
     spacingScale: n,
     fontFamilyPrimary: r,
@@ -521,12 +521,12 @@ const ve = ({
   disabled: o = !1,
   isTimeUp: y = !1
 }) => {
-  const g = K(), u = X(), x = ue(), b = te(), P = ee().xl, S = ge().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({
+  const g = Z(), u = X(), x = ue(), b = te(), P = ee().xl, S = ge().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, z = u.palette.danger.plainColor, I = et({
     primaryColor: W,
     textColor: R,
     whiteTextColor: T,
     successColor: N,
-    dangerColor: L,
+    dangerColor: z,
     optionBackground: "#FFFFFF",
     spacingScale: b,
     xlBorderRadius: P,
@@ -534,11 +534,11 @@ const ve = ({
   }), U = me(
     () => Fe(e, n),
     [e, n]
-  ), F = (k) => e.find((f) => f.id === k), $ = (k) => r.some((f) => f.leftId === k), E = (k) => r.some((f) => f.rightId === k), _ = (k, f) => {
+  ), F = (k) => e.find((f) => f.id === k), $ = (k) => r.some((f) => f.leftId === k), O = (k) => r.some((f) => f.rightId === k), _ = (k, f) => {
     var B, j, M;
     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 = () => {
+    const m = f === "left" ? $(k) : O(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, E = f === "left" ? C.optionA : C.optionB, V = () => {
       o || s || y || (f === "left" ? l(k) : d(k));
     }, D = s && v, Y = s && !v;
     return /* @__PURE__ */ w(
@@ -556,18 +556,18 @@ const ve = ({
             {
               loading: "lazy",
               src: A,
-              alt: O.title,
+              alt: E.title,
               style: { width: "100%", height: "100%", objectFit: "cover" }
             }
           ) }),
           /* @__PURE__ */ w(h, { sx: I.textContainer, children: [
-            /* @__PURE__ */ t(p, { level: "body-md", sx: I.getOptionTitleStyle(f, v, m, D), children: O.title }),
-            O.subtitle && /* @__PURE__ */ t(
+            /* @__PURE__ */ t(p, { level: "body-md", sx: I.getOptionTitleStyle(f, v, m, D), children: E.title }),
+            E.subtitle && /* @__PURE__ */ t(
               p,
               {
                 level: "body-sm",
                 sx: I.getOptionSubtitleStyle(f, v, m, D),
-                children: O.subtitle
+                children: E.subtitle
               }
             )
           ] }),
@@ -576,7 +576,7 @@ const ve = ({
             {
               loading: "lazy",
               src: A,
-              alt: O.title,
+              alt: E.title,
               style: { width: "100%", height: "100%", objectFit: "cover" }
             }
           ) })
@@ -603,7 +603,7 @@ const ve = ({
         transform: "scale(1)"
       }
     }
-  }, x = ze(() => {
+  }, x = Le(() => {
     const S = e.timer - 1;
     e.onTimeUpdate(S);
   }, [e.onTimeUpdate, e.timer]);
@@ -651,7 +651,7 @@ const ve = ({
       },
       children: [
         /* @__PURE__ */ t(
-          Je,
+          Qe,
           {
             sx: {
               width: "24px",
@@ -689,7 +689,7 @@ const ve = ({
   brandingColors: l,
   bgcolor: d
 }) => {
-  const { t: a } = ne(), o = K(), 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;
+  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,
     {
@@ -835,7 +835,7 @@ const ve = ({
   );
 }, tt = (e) => {
   const n = re().primary, r = ee().xl, c = X().palette.primary.onPrimary, i = e.selectedOptions.length === 0 || e.isVoting;
-  return /* @__PURE__ */ t(Q, { children: /* @__PURE__ */ t(
+  return /* @__PURE__ */ t(J, { children: /* @__PURE__ */ t(
     ke,
     {
       variant: "soft",
@@ -898,14 +898,14 @@ 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 = K(), 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 = he(
+  var T, N, z, L, I, U, F, $, O, _, k, f, C, m, v, H, A, E, 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 ? ((z = (N = e.infoPage.branding) == null ? void 0 : N.images) == null ? void 0 : z.mobile_logo) || ((I = (L = e.infoPage.branding) == null ? void 0 : L.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 = he(
     {
       images: e.infoPage.images,
       imagePlaceholder: e.defaultImagePlaceholderUrl || ""
     },
     fe.STANDARD
-  ), y = c || r && !!o, g = (i == null ? void 0 : i.content_color) || X().textColor, u = re().primary, x = (i == null ? void 0 : i.background_color) || X().surfaceVariant, b = ee().md, P = te(), S = Ke({
+  ), y = c || r && !!o, g = (i == null ? void 0 : i.content_color) || X().textColor, u = re().primary, x = (i == null ? void 0 : i.background_color) || X().surfaceVariant, b = ee().md, P = te(), S = Ze({
     spacingScale: P,
     fontFamilyPrimary: u,
     textColor: g,
@@ -913,14 +913,14 @@ const ve = ({
     mdBorderRadius: b,
     isExtraSmall: y
   }), W = e.matchedPairs.length === e.pairData.pairs.length, R = (M) => {
-    var q, J, ie, oe, le;
+    var q, Q, ie, oe, le;
     return /* @__PURE__ */ t(
       Re,
       {
         brandingLogo: s,
         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,
+        primaryUrl: (ie = (Q = e.infoPage.branding) == null ? void 0 : Q.urls) == null ? void 0 : ie.primary_url,
         secondaryUrl: (le = (oe = e.infoPage.branding) == null ? void 0 : oe.urls) == null ? void 0 : le.secondary_url
       }
     );
@@ -939,7 +939,7 @@ const ve = ({
       imagePosition: l,
       embedCodeContainerRef: void 0,
       hasEmbedCode: !1,
-      children: /* @__PURE__ */ w(Q, { children: [
+      children: /* @__PURE__ */ w(J, { children: [
         (($ = e.infoPage.labels) == null ? void 0 : $.welcome) && /* @__PURE__ */ t(
           p,
           {
@@ -1008,7 +1008,7 @@ const ve = ({
                 sdk: e.sdk,
                 contentId: e.infoPage.id,
                 contentType: e.infoPage.type,
-                onSuccessLabel: ((E = e.infoPage.labels) == null ? void 0 : E.buttonLabel) || n("pickThePair.buttons.submit"),
+                onSuccessLabel: ((O = e.infoPage.labels) == null ? void 0 : O.buttonLabel) || n("pickThePair.buttons.submit"),
                 contentName: e.infoPage.title,
                 brandingColors: (_ = e.infoPage.branding) == null ? void 0 : _.colors,
                 brandingUrls: (k = e.infoPage.branding) == null ? void 0 : k.urls,
@@ -1018,7 +1018,7 @@ const ve = ({
                 leadTitle: (v = e.infoPage.labels) == null ? void 0 : v.leadTitle,
                 leadDescription: (H = e.infoPage.labels) == null ? void 0 : H.leadDescription,
                 leadCta: (A = e.infoPage.labels) == null ? void 0 : A.leadCta,
-                leadSuccessTitle: (O = e.infoPage.labels) == null ? void 0 : O.successTitle,
+                leadSuccessTitle: (E = e.infoPage.labels) == null ? void 0 : E.successTitle,
                 leadSuccessDescription: (V = e.infoPage.labels) == null ? void 0 : V.successDescription,
                 syncWithProfile: (D = e.leads) == null ? void 0 : D.syncWithProfile,
                 isSubmittingParticipation: !W || e.isChallengeMode && !e.meetsThreshold
@@ -1026,7 +1026,7 @@ const ve = ({
             ) }),
             R(g)
           ] }) })
-        ) : /* @__PURE__ */ w(Q, { children: [
+        ) : /* @__PURE__ */ w(J, { children: [
           r && e.isTimeUp ? (
             // Mobile: Time's Up - Show only overlay with fixed height
             ((Y = e.infoPage.labels) == null ? void 0 : Y.timeUp) && /* @__PURE__ */ t(
@@ -1085,7 +1085,7 @@ const ve = ({
             {
               sx: s ? S.footerContainer : S.footerContainerNoLogo,
               children: [
-                s && !y ? R(g) : /* @__PURE__ */ t(Q, {}),
+                s && !y ? R(g) : /* @__PURE__ */ t(J, {}),
                 /* @__PURE__ */ t(
                   tt,
                   {
@@ -1099,7 +1099,7 @@ const ve = ({
               ]
             }
           ),
-          s && y ? R(g) : /* @__PURE__ */ t(Q, {})
+          s && y ? R(g) : /* @__PURE__ */ t(J, {})
         ] })
       ] })
     }
@@ -1419,12 +1419,12 @@ const ve = ({
   disabled: o = !1,
   isTimeUp: y = !1
 }) => {
-  const g = K(), u = ue(), x = X(), b = Ue(), P = te(), S = ee().xl, W = ge().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({
+  const g = Z(), u = ue(), x = X(), b = Ue(), P = te(), S = ee().xl, W = ge().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, z = x.palette.success.plainColor, L = x.palette.danger.plainColor, I = b === "dark" ? "#FFFFFF" : x.onSurface, U = x.surface, F = ot({
     primaryColor: R,
     textColor: T,
     whiteTextColor: N,
-    successColor: L,
-    dangerColor: z,
+    successColor: z,
+    dangerColor: L,
     optionBackground: I,
     surface: U,
     mobile: g,
@@ -1434,11 +1434,11 @@ const ve = ({
   }), $ = me(
     () => Fe(e, n),
     [e, n]
-  ), E = (C) => e.find((m) => m.id === C), _ = (C) => r.some((m) => m.leftId === C), k = (C) => r.some((m) => m.rightId === C), f = (C, m) => {
-    var M, q, J;
-    const v = E(C);
+  ), O = (C) => e.find((m) => m.id === C), _ = (C) => r.some((m) => m.leftId === C), k = (C) => r.some((m) => m.rightId === C), f = (C, m) => {
+    var M, q, Q;
+    const v = O(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 = () => {
+    const H = m === "left" ? _(C) : k(C), A = m === "left" && c === C || m === "right" && i === C, E = (A || H) && v.images, V = g ? ((M = v.images) == null ? void 0 : M.mobile) || ((q = v.images) == null ? void 0 : q.main) : (Q = v.images) == null ? void 0 : Q.main, D = m === "left" ? v.optionA : v.optionB, Y = () => {
       o || s || y || (m === "left" ? l(C) : d(C));
     }, B = s && A, j = s && !A;
     return /* @__PURE__ */ w(
@@ -1451,7 +1451,7 @@ const ve = ({
           B && F.errorItem
         ],
         children: [
-          m === "right" && O && V && /* @__PURE__ */ t(h, { sx: F.getImageContainerStyle(H, B, m), children: /* @__PURE__ */ t(
+          m === "right" && E && V && /* @__PURE__ */ t(h, { sx: F.getImageContainerStyle(H, B, m), children: /* @__PURE__ */ t(
             "img",
             {
               loading: "lazy",
@@ -1488,7 +1488,7 @@ const ve = ({
               }
             )
           ] }),
-          m === "left" && O && V && /* @__PURE__ */ t(h, { sx: F.getImageContainerStyle(H, B, m), children: /* @__PURE__ */ t(
+          m === "left" && E && V && /* @__PURE__ */ t(h, { sx: F.getImageContainerStyle(H, B, m), children: /* @__PURE__ */ t(
             "img",
             {
               loading: "lazy",
@@ -1507,8 +1507,8 @@ const ve = ({
     /* @__PURE__ */ t(h, { sx: F.column, children: $.columnB.map((C) => f(C, "right")) })
   ] });
 }, 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 = K(), c = ((P = e.infoPage.branding) == null ? void 0 : P.colors) || null, i = he(
+  var P, S, W, R, T, N, z, L, I, U, F, $, O, _, k, f, C, m, v, H, A, E, 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 = he(
     {
       images: e.infoPage.images,
       imagePlaceholder: e.defaultImagePlaceholderUrl || ""
@@ -1608,13 +1608,13 @@ const ve = ({
         contentId: e.infoPage.id,
         onSuccessLabel: ((N = e.infoPage.labels) == null ? void 0 : N.buttonLabel) || n("pickThePair.buttons.submit"),
         contentName: e.infoPage.title,
-        brandingColors: (L = e.infoPage.branding) == null ? void 0 : L.colors,
-        brandingUrls: (z = e.infoPage.branding) == null ? void 0 : z.urls,
+        brandingColors: (z = e.infoPage.branding) == null ? void 0 : z.colors,
+        brandingUrls: (L = e.infoPage.branding) == null ? void 0 : L.urls,
         campaignId: (I = e.leads) == null ? void 0 : I.campaignId,
         campaignName: (U = e.leads) == null ? void 0 : U.campaignName,
         fields: (F = e.leads) == null ? void 0 : F.fields,
         leadTitle: ($ = e.infoPage.labels) == null ? void 0 : $.leadTitle,
-        leadDescription: (E = e.infoPage.labels) == null ? void 0 : E.leadDescription,
+        leadDescription: (O = e.infoPage.labels) == null ? void 0 : O.leadDescription,
         leadCta: (_ = e.infoPage.labels) == null ? void 0 : _.buttonLabel,
         leadSuccessTitle: (k = e.infoPage.labels) == null ? void 0 : k.successTitle,
         leadSuccessDescription: (f = e.infoPage.labels) == null ? void 0 : f.successDescription,
@@ -1624,7 +1624,7 @@ const ve = ({
     ) }),
     (((v = (m = e.infoPage.branding) == null ? void 0 : m.images) == null ? void 0 : v.main_logo) || ((H = e.infoPage.labels) == null ? void 0 : H.disclaimer)) && /* @__PURE__ */ w(h, { sx: b.footer, children: [
       ((A = e.infoPage.labels) == null ? void 0 : A.disclaimer) && /* @__PURE__ */ t(p, { level: "body-sm", sx: b.disclaimer, children: e.infoPage.labels.disclaimer }),
-      ((V = (O = e.infoPage.branding) == null ? void 0 : O.images) == null ? void 0 : V.main_logo) && /* @__PURE__ */ t(
+      ((V = (E = e.infoPage.branding) == null ? void 0 : E.images) == null ? void 0 : V.main_logo) && /* @__PURE__ */ t(
         "img",
         {
           src: r ? ((Y = (D = e.infoPage.branding) == null ? void 0 : D.images) == null ? void 0 : Y.mobile_logo) || ((j = (B = e.infoPage.branding) == null ? void 0 : B.images) == null ? void 0 : j.main_logo) : (q = (M = e.infoPage.branding) == null ? void 0 : M.images) == null ? void 0 : q.main_logo,
@@ -1733,14 +1733,14 @@ const ve = ({
     opacity: 0.9
   }
 }), ct = (e) => {
-  var $, E, _, k, f, C, m, v, H, A, O, V;
-  const [n, r] = Z.useState(!1), c = te(), i = ue(), { t: s } = ne(), l = K(), d = pe(), { brandingImage: a, brandingColors: o, brandingLogo: y } = We(e.infoPage.branding || null), g = e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : l ? Ge : Qe, u = a || he(
+  var $, O, _, k, f, C, m, v, H, A, E, V;
+  const [n, r] = K.useState(!1), c = te(), i = ue(), { t: s } = ne(), l = Z(), d = pe(), { brandingImage: a, brandingColors: o, brandingLogo: y } = We(e.infoPage.branding || null), g = e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : l ? Ge : Je, u = a || he(
     {
       images: e.infoPage.images,
       imagePlaceholder: g
     },
     fe.OVERLAY
-  ), x = i.customRadius.dark.md, b = (o == null ? void 0 : o.background_color) || ((E = ($ = i.colorSchemes) == null ? void 0 : $.dark) == null ? void 0 : E.surfaceVariant), P = (k = (_ = i.customRadius) == null ? void 0 : _.light) == null ? void 0 : k.xl, S = (o == null ? void 0 : o.primary_color) || ((v = (m = (C = (f = i.colorSchemes) == null ? void 0 : f.light) == null ? void 0 : C.palette) == null ? void 0 : m.primary) == null ? void 0 : v.plainColor), W = (V = (O = (A = (H = i.colorSchemes) == null ? void 0 : H.light) == null ? void 0 : A.palette) == null ? void 0 : O.primary) == null ? void 0 : V.onPrimary, R = i.customFontFamily.dark.primary, T = i.colorSchemes.dark.textColor, N = (o == null ? void 0 : o.content_color) || i.colorSchemes.dark.textColor, z = rt({
+  ), x = i.customRadius.dark.md, b = (o == null ? void 0 : o.background_color) || ((O = ($ = i.colorSchemes) == null ? void 0 : $.dark) == null ? void 0 : O.surfaceVariant), P = (k = (_ = i.customRadius) == null ? void 0 : _.light) == null ? void 0 : k.xl, S = (o == null ? void 0 : o.primary_color) || ((v = (m = (C = (f = i.colorSchemes) == null ? void 0 : f.light) == null ? void 0 : C.palette) == null ? void 0 : m.primary) == null ? void 0 : v.plainColor), W = (V = (E = (A = (H = i.colorSchemes) == null ? void 0 : H.light) == null ? void 0 : A.palette) == null ? void 0 : E.primary) == null ? void 0 : V.onPrimary, R = i.customFontFamily.dark.primary, T = i.colorSchemes.dark.textColor, N = (o == null ? void 0 : o.content_color) || i.colorSchemes.dark.textColor, L = rt({
     spacingScale: c,
     mdBorderRadius: x,
     contentBgColor: b,
@@ -1766,9 +1766,9 @@ const ve = ({
       }
     );
   }, F = () => {
-    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(
+    var D, Y, B, j, M, q, Q, ie, oe, le, Pe, Se, Ce, Te;
+    return /* @__PURE__ */ t(J, { children: n ? /* @__PURE__ */ w(J, { children: [
+      /* @__PURE__ */ t(h, { sx: L.contentContainerWithBackdrop, children: /* @__PURE__ */ t(
         xe,
         {
           sdk: e.sdk,
@@ -1781,7 +1781,7 @@ const ve = ({
           campaignId: (j = e.leads) == null ? void 0 : j.campaignId,
           campaignName: (M = e.leads) == null ? void 0 : M.campaignName,
           fields: (q = e.leads) == null ? void 0 : q.fields,
-          leadTitle: (J = e.infoPage.labels) == null ? void 0 : J.leadTitle,
+          leadTitle: (Q = e.infoPage.labels) == null ? void 0 : Q.leadTitle,
           leadDescription: (ie = e.infoPage.labels) == null ? void 0 : ie.leadDescription,
           leadCta: (oe = e.infoPage.labels) == null ? void 0 : oe.leadCta,
           leadSuccessTitle: (le = e.infoPage.labels) == null ? void 0 : le.leadSuccessTitle,
@@ -1789,19 +1789,19 @@ const ve = ({
           syncWithProfile: (Se = e.leads) == null ? void 0 : Se.syncWithProfile
         }
       ) }),
-      y ? U() : /* @__PURE__ */ t(Q, {})
-    ] }) : /* @__PURE__ */ w(Q, { children: [
+      y ? U() : /* @__PURE__ */ t(J, {})
+    ] }) : /* @__PURE__ */ w(J, { children: [
       ((Ce = e.infoPage.labels) == null ? void 0 : Ce.welcome) && /* @__PURE__ */ t(
         p,
         {
           level: "body-md",
           sx: {
-            ...z.welcome
+            ...L.welcome
           },
           children: e.infoPage.labels.welcome
         }
       ),
-      e.pairData.config.timeLimit > 0 && /* @__PURE__ */ t(h, { sx: z.stopwatchContainer, children: /* @__PURE__ */ t(
+      e.pairData.config.timeLimit > 0 && /* @__PURE__ */ t(h, { sx: L.stopwatchContainer, children: /* @__PURE__ */ t(
         ye,
         {
           isRunning: e.isTimerRunning,
@@ -1811,7 +1811,7 @@ const ve = ({
           onTimeUpdate: e.onTimeUpdate
         }
       ) }),
-      e.isChallengeMode && /* @__PURE__ */ t(h, { sx: z.challengeStatsContainer, children: /* @__PURE__ */ t(
+      e.isChallengeMode && /* @__PURE__ */ t(h, { sx: L.challengeStatsContainer, children: /* @__PURE__ */ t(
         be,
         {
           totalAttempts: e.totalAttempts,
@@ -1824,8 +1824,8 @@ const ve = ({
           bgcolor: b
         }
       ) }),
-      /* @__PURE__ */ w(h, { sx: z.contentContainerWithBackdrop, children: [
-        ((Te = e.infoPage.labels) == null ? void 0 : Te.instructions) && /* @__PURE__ */ t(p, { level: "body-lg", sx: z.instructions, children: e.infoPage.labels.instructions }),
+      /* @__PURE__ */ w(h, { sx: L.contentContainerWithBackdrop, children: [
+        ((Te = e.infoPage.labels) == null ? void 0 : Te.instructions) && /* @__PURE__ */ t(p, { level: "body-lg", sx: L.instructions, children: e.infoPage.labels.instructions }),
         /* @__PURE__ */ t(
           ve,
           {
@@ -1843,14 +1843,14 @@ const ve = ({
           }
         )
       ] }),
-      /* @__PURE__ */ w(h, { sx: z.bottomFooterContainer, children: [
+      /* @__PURE__ */ w(h, { sx: L.bottomFooterContainer, children: [
         U(),
         e.leads && /* @__PURE__ */ t(
           ke,
           {
             variant: "soft",
             disabled: !I || e.isChallengeMode && !e.meetsThreshold || e.isTimeUp,
-            sx: z.continueButton,
+            sx: L.continueButton,
             onClick: () => r(!0),
             children: /* @__PURE__ */ t(
               p,
@@ -1901,7 +1901,7 @@ const ve = ({
     const f = N();
     Ae(f);
   }, [e.language, T]);
-  const L = me(() => {
+  const z = me(() => {
     if (!T || T.id === "not-found")
       return {
         pairs: [],
@@ -1927,13 +1927,13 @@ const ve = ({
     }
   }, [T]);
   de(() => {
-    L.config.timeLimit && L.config.timeLimit > 0 && (y(L.config.timeLimit), u(!0));
-  }, [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;
+    z.config.timeLimit && z.config.timeLimit > 0 && (y(z.config.timeLimit), u(!0));
+  }, [z.config.timeLimit]);
+  const L = z.config.mode.toLowerCase() === "challenge", I = n.length, U = P > 0 ? I / P * 100 : 0, F = U >= z.config.successThresholdPercent;
   if (!T)
     return /* @__PURE__ */ t(je, { my: 20 });
   if (T.id === "not-found")
-    return /* @__PURE__ */ t(Ze, { template: e.template });
+    return /* @__PURE__ */ t(Ke, { template: e.template });
   const $ = (f) => {
     if (c === f) {
       i(null);
@@ -1949,7 +1949,7 @@ const ve = ({
     ]), 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) => {
+  }, O = (f) => {
     if (s === f) {
       l(null);
       return;
@@ -1973,7 +1973,7 @@ const ve = ({
     at,
     {
       infoPage: T,
-      pairData: L,
+      pairData: z,
       matchedPairs: n,
       selectedLeft: c,
       selectedRight: s,
@@ -1988,9 +1988,9 @@ const ve = ({
       incorrectAttempts: W,
       accuracy: U,
       meetsThreshold: F,
-      isChallengeMode: z,
+      isChallengeMode: L,
       onSelectLeft: $,
-      onSelectRight: E,
+      onSelectRight: O,
       onSubmit: k,
       onTimeUpdate: _
     }
@@ -1998,7 +1998,7 @@ const ve = ({
     ct,
     {
       infoPage: T,
-      pairData: L,
+      pairData: z,
       matchedPairs: n,
       selectedLeft: c,
       selectedRight: s,
@@ -2013,9 +2013,9 @@ const ve = ({
       incorrectAttempts: W,
       accuracy: U,
       meetsThreshold: F,
-      isChallengeMode: z,
+      isChallengeMode: L,
       onSelectLeft: $,
-      onSelectRight: E,
+      onSelectRight: O,
       onSubmit: k,
       onTimeUpdate: _
     }
@@ -2023,7 +2023,7 @@ const ve = ({
     nt,
     {
       infoPage: T,
-      pairData: L,
+      pairData: z,
       matchedPairs: n,
       selectedLeft: c,
       selectedRight: s,
@@ -2039,19 +2039,19 @@ const ve = ({
       incorrectAttempts: W,
       accuracy: U,
       meetsThreshold: F,
-      isChallengeMode: z,
+      isChallengeMode: L,
       onSelectLeft: $,
-      onSelectRight: E,
+      onSelectRight: O,
       onSubmit: k,
       onTimeUpdate: _
     }
   );
 }, dt = (e) => {
   var u;
-  const [n, r] = Z.useState(!1), c = Z.useRef(
+  const [n, r] = K.useState(!1), c = K.useRef(
     `pick-the-pair-shadow-root-${Math.random().toString(36).substring(2, 11)}`
-  ), i = Z.useRef(null), s = Z.useRef(null), l = Z.useRef(null), d = Z.useRef(null);
-  Z.useEffect(() => {
+  ), 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, l.current = s.current.getElementById(
         c.current
@@ -2068,13 +2068,13 @@ const ve = ({
     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,
+      Oe,
       {
         customTheme: o,
         mode: o == null ? void 0 : o.mode,
         shadowRootElement: l.current,
         children: /* @__PURE__ */ t(
-          Oe,
+          Ee,
           {
             shadowRootElement: l.current,
             leadPhoneCountryCode: ((u = e.leads) == null ? void 0 : u.phoneCountryCode) || null,
@@ -2087,7 +2087,7 @@ const ve = ({
     ) }) }),
     l.current
   ) : null;
-  return /* @__PURE__ */ w(Q, { children: [
+  return /* @__PURE__ */ w(J, { children: [
     y,
     g
   ] });