fansunited-frontend-components 0.0.31-RC5 → 0.0.31-RC6

package/chunks/CollectLeadForm-DtmR2Vuf.js

@@ -0,0 +1,844 @@
+import { jsx as o, Fragment as W, jsxs as C } from "react/jsx-runtime";
+import { useTheme as ie, FormControl as B, Box as K, Checkbox as ke, Typography as w, Link as J, Stack as ae, FormLabel as _, Input as j, Select as ye, Option as xe, Autocomplete as Je, AutocompleteOption as Ke, ListItemDecorator as Qe, ListItemContent as Ve, Textarea as Xe, Button as le } from "@mui/joy";
+import { b as Pe, C as Le, g as be, c as Ne, d as Ye, e as Ze, f as ce, h as Fe, j as eo, k as Be, A as ve, m as oo } from "./Portal-BWqqFvVm.js";
+import { useState as q, useEffect as ro, createElement as to } from "react";
+function no(d) {
+  const {
+    sdk: h,
+    fields: a = ["fullName", "email"],
+    campaignId: u = "",
+    campaignName: p = "",
+    contentType: c = "",
+    contentId: S = "",
+    contentName: D = "",
+    syncWithProfile: A = !1
+  } = d, { leadPhoneCountryCode: N, language: P } = Pe(Le), [t, b] = q({
+    firstName: "",
+    lastName: "",
+    fullName: "",
+    email: "",
+    gender: "",
+    country: "",
+    phoneCountryCode: N ? be(N) : Ne(P || "en"),
+    phoneNumber: "",
+    customFields: {}
+  });
+  ro(() => {
+    const s = N ? be(N) : Ne(P || "en");
+    b((g) => !g.phoneNumber || !g.phoneCountryCode ? { ...g, phoneCountryCode: s } : g);
+  }, [N, P]);
+  const [r, e] = q({}), [L, k] = q(!1), [m, v] = q(!1), [E, f] = q(null), M = () => f(null), F = (s) => (g) => {
+    b((l) => ({
+      ...l,
+      [s]: g.target.value
+    }));
+  }, Q = (s) => (g) => {
+    const l = g.target.value;
+    e((y) => ({ ...y, [s]: l }));
+  }, V = (s, g) => {
+    b((l) => ({
+      ...l,
+      phoneCountryCode: g
+    }));
+  }, Z = (s, g) => {
+    b((l) => ({
+      ...l,
+      country: g || ""
+    }));
+  }, ee = (s, g) => {
+    b((l) => ({
+      ...l,
+      gender: g || ""
+    }));
+  }, oe = async () => {
+    if (A)
+      try {
+        const s = h.profile.getOwn();
+        if (t.fullName && a.includes("fullName") ? s.setName(t.fullName.trim()) : t.firstName && a.includes("firstName") && t.lastName && a.includes("lastName") ? s.setName(
+          t.firstName.trim() + " " + t.lastName.trim()
+        ) : t.firstName && a.includes("firstName") ? s.setName(t.firstName.trim()) : t.lastName && a.includes("lastName") && s.setName(t.lastName.trim()), t.email && a.includes("email") && s.setEmail(t.email.trim()), t.gender && a.includes("gender") && s.setGender(t.gender), t.country && a.includes("country")) {
+          const g = await h.profile.getCountries(), l = Ze(t.country), y = g.find(($) => $.name === (l == null ? void 0 : l.label));
+          y && s.setCountry(y.id);
+        }
+        t.phoneCountryCode && a.includes("phoneCountryCode") && s.setPhoneCountryCode(
+          "+" + t.phoneCountryCode.phone
+        ), t.phoneNumber && a.includes("phoneNumber") && s.setPhoneNumber(t.phoneNumber.trim()), await s.update();
+      } catch (s) {
+        console.warn("[LeadForm] Failed to sync profile data:", s);
+      }
+  };
+  return {
+    formData: t,
+    setFormData: b,
+    isLoading: L,
+    isSuccess: m,
+    error: E,
+    clearError: M,
+    handleInputChange: F,
+    handleCustomFieldChange: Q,
+    customFieldsData: r,
+    handlePhoneCountryChange: V,
+    handleCountryChange: Z,
+    handleGenderChange: ee,
+    handleSubmit: async (s) => {
+      var $;
+      s && s.preventDefault(), f(null);
+      const g = {
+        firstName: t.firstName,
+        lastName: t.lastName,
+        fullName: t.fullName,
+        email: t.email,
+        gender: t.gender,
+        country: t.country,
+        phoneCountryCode: "+" + ((($ = t.phoneCountryCode) == null ? void 0 : $.phone) ?? ""),
+        phoneNumber: t.phoneNumber,
+        campaignId: u,
+        campaignName: p,
+        contentType: c,
+        contentId: S,
+        contentName: D,
+        customFields: r
+      }, l = [
+        "firstName",
+        "lastName",
+        "fullName",
+        "email",
+        "gender",
+        "country",
+        "phoneCountryCode",
+        "phoneNumber",
+        "customFields"
+      ], y = Object.fromEntries(
+        Object.entries(g).map(([I, T]) => l.includes(I) ? I === "customFields" ? [I, T] : a.includes(I) && T !== "" && T !== null ? [I, T] : [I, null] : [I, T])
+      );
+      k(!0);
+      try {
+        await h.profile.collectLead(y), await oe(), v(!0);
+      } catch {
+        f("leads.form.error");
+      } finally {
+        k(!1);
+      }
+    },
+    countries: Ye
+  };
+}
+const lo = (d) => {
+  const h = ie(), { t: a } = ce();
+  if (!d.brandingUrls)
+    return /* @__PURE__ */ o(W, {});
+  const { privacyPolicyUrl: u, termsAndConditionsUrl: p } = d.brandingUrls;
+  if (!u && !p)
+    return /* @__PURE__ */ o(W, {});
+  const c = () => u && !p ? /* @__PURE__ */ C(w, { children: [
+    a("common.labels.iAgreeToThe"),
+    " ",
+    /* @__PURE__ */ o(
+      J,
+      {
+        href: u,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        sx: {
+          color: d.primaryColor,
+          textDecorationColor: d.primaryColor
+        },
+        children: a("leads.form.privacyPolicy")
+      }
+    )
+  ] }) : !u && p ? /* @__PURE__ */ C(w, { children: [
+    a("common.labels.iAgreeToThe"),
+    " ",
+    /* @__PURE__ */ o(
+      J,
+      {
+        href: p,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        sx: {
+          color: d.primaryColor,
+          textDecorationColor: d.primaryColor
+        },
+        children: a("leads.form.termsAndConditions")
+      }
+    )
+  ] }) : /* @__PURE__ */ C(w, { children: [
+    a("common.labels.iAgreeToThe"),
+    " ",
+    /* @__PURE__ */ o(
+      J,
+      {
+        href: u,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        sx: {
+          color: d.primaryColor,
+          textDecorationColor: d.primaryColor
+        },
+        children: a("leads.form.privacyPolicy")
+      }
+    ),
+    " ",
+    a("common.labels.andThe"),
+    " ",
+    /* @__PURE__ */ o(
+      J,
+      {
+        href: p,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        sx: {
+          color: d.primaryColor,
+          textDecorationColor: d.primaryColor
+        },
+        children: a("leads.form.termsAndConditions")
+      }
+    )
+  ] });
+  return /* @__PURE__ */ o(B, { required: !0, disabled: d.isDisabled, size: "sm", children: /* @__PURE__ */ C(K, { sx: { display: "inline-flex", alignItems: "center", gap: "8px" }, children: [
+    /* @__PURE__ */ o(
+      ke,
+      {
+        slotProps: {
+          input: {
+            sx: {}
+          },
+          checkbox: {
+            sx: {
+              "&.Mui-checked": {
+                bgcolor: d.primaryColor,
+                "--Icon-color": "#FFF"
+              },
+              "&:not(.Mui-checked):not(.Mui-disabled):hover": {
+                bgcolor: h.colorSchemes.light.palette.neutral.outlinedHoverBg
+              },
+              bgcolor: h.colorSchemes.light.palette.background.surface
+            }
+          }
+        }
+      }
+    ),
+    c()
+  ] }) });
+}, io = (d) => {
+  const { consents: h, isDisabled: a, primaryColor: u, brandingUrls: p, labels: c, onChange: S } = d, D = ie(), { t: A } = ce(), [N, P] = q({}), t = (r) => (e) => {
+    const L = { ...N, [r]: e.target.checked };
+    P(L), S == null || S(L);
+  }, b = (r) => {
+    const e = [], L = /\{\{(privacyPolicyUrl|termsAndConditionsUrl)\}\}/g;
+    let k = 0, m;
+    for (; (m = L.exec(r)) !== null; ) {
+      const E = r.slice(k, m.index);
+      E && e.push(
+        /* @__PURE__ */ o(w, { component: "span", children: E }, `text-${k}`)
+      );
+      const f = m[1], M = p == null ? void 0 : p[f], F = f === "privacyPolicyUrl" ? (c == null ? void 0 : c.privacyPolicyUrlLabel) || A("leads.form.privacyPolicy") : (c == null ? void 0 : c.termsAndConditionsUrlLabel) || A("leads.form.termsAndConditions");
+      M ? e.push(
+        /* @__PURE__ */ o(
+          J,
+          {
+            href: M,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            sx: { color: u, textDecorationColor: u },
+            children: F
+          },
+          `link-${e.length}`
+        )
+      ) : (console.warn(
+        `[CollectLead] Consent label contains {{${f}}} but branding.urls.${f} is not provided.`
+      ), e.push(
+        /* @__PURE__ */ o(w, { component: "span", children: F }, `plain-${e.length}`)
+      )), k = L.lastIndex;
+    }
+    const v = r.slice(k);
+    return v && e.push(
+      /* @__PURE__ */ o(w, { component: "span", children: v }, "text-after")
+    ), /* @__PURE__ */ o(w, { component: "span", children: e });
+  };
+  return /* @__PURE__ */ o(ae, { spacing: 1, children: h.map((r) => /* @__PURE__ */ o(
+    B,
+    {
+      disabled: a,
+      size: "sm",
+      children: /* @__PURE__ */ C(
+        K,
+        {
+          sx: { display: "inline-flex", alignItems: "center", gap: "8px" },
+          children: [
+            /* @__PURE__ */ o(
+              ke,
+              {
+                checked: !!N[r.id],
+                onChange: t(r.id),
+                slotProps: {
+                  checkbox: {
+                    sx: {
+                      "&.Mui-checked": {
+                        bgcolor: u,
+                        "--Icon-color": "#FFF"
+                      },
+                      "&:not(.Mui-checked):not(.Mui-disabled):hover": {
+                        bgcolor: D.colorSchemes.light.palette.neutral.outlinedHoverBg
+                      },
+                      bgcolor: D.colorSchemes.light.palette.background.surface
+                    }
+                  }
+                }
+              }
+            ),
+            b(r.label)
+          ]
+        }
+      )
+    },
+    `consent-${r.id}`
+  )) });
+}, ao = [
+  "fullName",
+  "firstName",
+  "lastName",
+  "email",
+  "gender",
+  "country",
+  "phoneCountryCode",
+  "phoneNumber"
+], O = {
+  phoneContainer: { display: "flex", gap: 1 },
+  countrySelect: { width: "45%" },
+  phoneInput: { width: "100%" },
+  listItemContent: { fontSize: "sm" },
+  submitButton: { mt: 2 }
+}, co = (d) => {
+  var de, ue, me, he, pe, fe;
+  const [h, a] = q({}), {
+    sdk: u,
+    brandingColors: p,
+    brandingUrls: c,
+    fields: S = ["fullName", "email"],
+    campaignId: D = "",
+    campaignName: A = "",
+    contentType: N = "",
+    contentId: P = "",
+    contentName: t = "",
+    formCustomFields: b,
+    onSuccessCta: r,
+    labels: e,
+    syncWithProfile: L = !1,
+    isSubmittingParticipation: k = !1
+  } = d, m = S.map((n) => n && n.trim()).filter((n) => ao.includes(n)), {
+    formData: v,
+    isLoading: E,
+    isSuccess: f,
+    error: M,
+    handleInputChange: F,
+    handleCustomFieldChange: Q,
+    customFieldsData: V,
+    handlePhoneCountryChange: Z,
+    handleCountryChange: ee,
+    handleGenderChange: oe,
+    handleSubmit: se,
+    countries: s
+  } = no({
+    sdk: u,
+    fields: m,
+    campaignId: D,
+    campaignName: A,
+    contentType: N,
+    contentId: P,
+    contentName: t,
+    syncWithProfile: L
+  }), { shadowRootElement: g } = Pe(Le), { t: l } = ce(), y = ie(), $ = Fe(), I = eo(), T = Be().primary, we = $.textPrimary, R = (p == null ? void 0 : p.primaryColor) || ((ue = (de = $.palette) == null ? void 0 : de.primary) == null ? void 0 : ue.plainColor), z = (he = (me = $.palette) == null ? void 0 : me.primary) == null ? void 0 : he.onPrimary, X = (p == null ? void 0 : p.primaryColor) || ((fe = (pe = $.palette) == null ? void 0 : pe.primary) == null ? void 0 : fe.primaryContainer), re = I.sm, i = {
+    background: {
+      surface: y.colorSchemes.light.palette.background.surface,
+      popup: y.colorSchemes.light.palette.background.popup
+    },
+    neutral: {
+      outlinedBorder: y.colorSchemes.light.palette.neutral.outlinedBorder,
+      outlinedColor: y.colorSchemes.light.palette.neutral.outlinedColor,
+      outlinedHoverBg: y.colorSchemes.light.palette.neutral.outlinedHoverBg,
+      plainActiveBg: y.colorSchemes.light.palette.neutral.plainActiveBg,
+      plainHoverBg: y.colorSchemes.light.palette.neutral.plainHoverBg,
+      plainHoverColor: y.colorSchemes.light.palette.neutral.plainHoverColor
+    }
+  }, Se = [
+    { value: "male", label: l("leads.form.genderOptions.male") },
+    { value: "female", label: l("leads.form.genderOptions.female") },
+    { value: "other", label: l("leads.form.genderOptions.other") },
+    { value: "prefer_not_to_say", label: l("leads.form.genderOptions.notSay") }
+  ], H = {
+    color: `${we} !important`,
+    fontSize: "0.875em"
+  }, U = {
+    fontFamily: T,
+    borderRadius: re,
+    bgcolor: i.background.surface,
+    borderColor: i.neutral.outlinedBorder,
+    color: i.neutral.outlinedColor,
+    fontSize: "1em",
+    lineHeight: "2.25em",
+    "&:hover": {
+      bgcolor: i.neutral.outlinedHoverBg
+    },
+    "&.Mui-disabled": {
+      borderColor: i.neutral.outlinedBorder
+    },
+    "& input:-webkit-autofill": {
+      WebkitBoxShadow: `0 0 0 1000px ${i.background.surface} inset !important`,
+      WebkitTextFillColor: `${i.neutral.outlinedColor} !important`,
+      caretColor: i.neutral.outlinedColor,
+      borderRadius: re
+    },
+    "& input:-webkit-autofill:hover": {
+      WebkitBoxShadow: `0 0 0 1000px ${i.background.surface} inset !important`,
+      WebkitTextFillColor: `${i.neutral.outlinedColor} !important`
+    },
+    "& input:-webkit-autofill:focus": {
+      WebkitBoxShadow: `0 0 0 1000px ${i.background.surface} inset !important`,
+      WebkitTextFillColor: `${i.neutral.outlinedColor} !important`
+    },
+    "& input:-webkit-autofill:active": {
+      WebkitBoxShadow: `0 0 0 1000px ${i.background.surface} inset !important`,
+      WebkitTextFillColor: `${i.neutral.outlinedColor} !important`
+    },
+    "& input:-moz-autofill": {
+      backgroundColor: `${i.background.surface} !important`,
+      color: `${i.neutral.outlinedColor} !important`
+    },
+    "& input:autofill": {
+      backgroundColor: `${i.background.surface} !important`,
+      color: `${i.neutral.outlinedColor} !important`
+    }
+  }, Y = {
+    root: {
+      sx: {
+        ...U,
+        "&:hover": { bgcolor: i.neutral.outlinedHoverBg }
+      }
+    },
+    listbox: {
+      container: g,
+      sx: {
+        zIndex: 10,
+        bgcolor: i.background.popup,
+        border: `1px solid ${i.neutral.outlinedBorder}`,
+        borderRadius: re,
+        boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)"
+      }
+    }
+  }, te = {
+    fontFamily: T,
+    color: `${i.neutral.outlinedColor} !important`,
+    bgcolor: "transparent",
+    "&:hover": {
+      bgcolor: `${i.neutral.plainHoverBg} !important`,
+      color: `${i.neutral.plainHoverColor} !important`
+    },
+    "&.Mui-selected": {
+      bgcolor: `${i.neutral.plainActiveBg} !important`,
+      color: `${i.neutral.outlinedColor} !important`
+    },
+    "&.Mui-selected:hover": {
+      bgcolor: `${i.neutral.plainActiveBg} !important`,
+      color: `${i.neutral.outlinedColor} !important`
+    }
+  }, $e = (e == null ? void 0 : e.fullNameLabel) || l("leads.form.fullName"), Ie = (e == null ? void 0 : e.fullNamePlaceholder) || l("leads.form.fullNamePlaceholder"), Te = (e == null ? void 0 : e.firstNameLabel) || l("leads.form.firstName"), De = (e == null ? void 0 : e.firstNamePlaceholder) || l("leads.form.firstNamePlaceholder"), Ae = (e == null ? void 0 : e.lastNameLabel) || l("leads.form.lastName"), ze = (e == null ? void 0 : e.lastNamePlaceholder) || l("leads.form.lastNamePlaceholder"), He = (e == null ? void 0 : e.emailLabel) || l("leads.form.email"), Ue = (e == null ? void 0 : e.genderLabel) || l("leads.form.gender"), _e = (e == null ? void 0 : e.genderPlaceholder) || l("leads.form.genderPlaceholder"), Oe = (e == null ? void 0 : e.countryLabel) || l("leads.form.country"), We = (e == null ? void 0 : e.countryPlaceholder) || l("leads.form.countryPlaceholder"), Me = (e == null ? void 0 : e.phoneNumberLabel) || l("leads.form.phone"), qe = (e == null ? void 0 : e.phoneNumberPlaceholder) || l("leads.form.phonePlaceholder"), Ee = (n) => {
+    const x = (e == null ? void 0 : e.privacyPolicyUrlLabel) || "Privacy Policy", G = (e == null ? void 0 : e.termsAndConditionsUrlLabel) || "Terms and Conditions";
+    return n.replace(/\{\{privacyPolicyUrl\}\}/g, x).replace(/\{\{termsAndConditionsUrl\}\}/g, G);
+  }, Re = (n) => {
+    a(n);
+  }, je = async (n) => {
+    await se(n);
+    try {
+      const x = (d.consents || []).filter(
+        (G) => h[G.id]
+      );
+      if (x.length > 0) {
+        const G = x.map((ge) => {
+          const ne = {
+            consentId: ge.id,
+            content: Ee(ge.label)
+          };
+          P && (ne.entityId = P);
+          const Ce = oo(N);
+          return Ce && (ne.entityType = Ce), ne;
+        });
+        await u.profile.collectConsents(G);
+      }
+    } catch (x) {
+      console.warn("[CollectLead] Failed to collect consents", x);
+    }
+  }, Ge = () => r != null && r.component ? r.component : r != null && r.onClick ? /* @__PURE__ */ o(
+    le,
+    {
+      size: "lg",
+      loading: k,
+      sx: {
+        ...O.submitButton,
+        bgcolor: R,
+        color: z,
+        ":hover": {
+          bgcolor: X,
+          color: z
+        },
+        fontSize: "1em"
+      },
+      onClick: r.onClick,
+      children: r.defaultLabel
+    }
+  ) : r != null && r.url ? typeof window > "u" ? /* @__PURE__ */ o(
+    K,
+    {
+      component: "a",
+      href: r.url,
+      target: (r == null ? void 0 : r.target) || "_self",
+      sx: {
+        ...O.submitButton,
+        bgcolor: R,
+        color: z,
+        ":hover": {
+          bgcolor: X,
+          color: z
+        },
+        fontSize: "1em",
+        textDecoration: "none",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: r.defaultLabel
+    }
+  ) : /* @__PURE__ */ o(
+    le,
+    {
+      size: "lg",
+      sx: {
+        ...O.submitButton,
+        bgcolor: R,
+        color: z,
+        ":hover": {
+          bgcolor: X,
+          color: z
+        },
+        fontSize: "1em"
+      },
+      onClick: () => {
+        (r == null ? void 0 : r.target) === "_blank" ? window.open(r == null ? void 0 : r.url, "_blank") : window.location.href = r == null ? void 0 : r.url;
+      },
+      children: r.defaultLabel
+    }
+  ) : /* @__PURE__ */ o(W, {});
+  return /* @__PURE__ */ o("form", { onSubmit: je, children: /* @__PURE__ */ C(ae, { spacing: 2, sx: { fontFamily: T }, children: [
+    m.includes("fullName") && /* @__PURE__ */ C(B, { required: !0, disabled: f, children: [
+      /* @__PURE__ */ o(_, { sx: H, children: $e }),
+      /* @__PURE__ */ o(
+        j,
+        {
+          value: v.fullName,
+          onChange: F("fullName"),
+          placeholder: Ie,
+          sx: U
+        }
+      )
+    ] }),
+    m.includes("firstName") && /* @__PURE__ */ C(B, { required: !0, disabled: f, children: [
+      /* @__PURE__ */ o(_, { sx: H, children: Te }),
+      /* @__PURE__ */ o(
+        j,
+        {
+          value: v.firstName,
+          onChange: F("firstName"),
+          placeholder: De,
+          sx: U
+        }
+      )
+    ] }),
+    m.includes("lastName") && /* @__PURE__ */ C(B, { required: !0, disabled: f, children: [
+      /* @__PURE__ */ o(_, { sx: H, children: Ae }),
+      /* @__PURE__ */ o(
+        j,
+        {
+          value: v.lastName,
+          onChange: F("lastName"),
+          placeholder: ze,
+          sx: U
+        }
+      )
+    ] }),
+    m.includes("email") && /* @__PURE__ */ C(B, { required: !0, disabled: f, children: [
+      /* @__PURE__ */ o(_, { sx: H, children: He }),
+      /* @__PURE__ */ o(
+        j,
+        {
+          type: "email",
+          value: v.email,
+          onChange: F("email"),
+          placeholder: "your.email@example.com",
+          sx: U
+        }
+      )
+    ] }),
+    m.includes("gender") && /* @__PURE__ */ C(B, { disabled: f, children: [
+      /* @__PURE__ */ o(_, { sx: H, children: Ue }),
+      /* @__PURE__ */ o(
+        ye,
+        {
+          value: v.gender,
+          onChange: oe,
+          placeholder: _e,
+          slotProps: Y,
+          children: Se.map((n) => /* @__PURE__ */ o(
+            xe,
+            {
+              value: n.value,
+              sx: te,
+              children: n.label
+            },
+            n.value
+          ))
+        }
+      )
+    ] }),
+    m.includes("country") && /* @__PURE__ */ C(B, { required: !0, disabled: f, children: [
+      /* @__PURE__ */ o(_, { sx: H, children: Oe }),
+      /* @__PURE__ */ o(
+        ye,
+        {
+          value: v.country,
+          onChange: ee,
+          placeholder: We,
+          slotProps: Y,
+          children: s.map((n) => /* @__PURE__ */ o(
+            xe,
+            {
+              value: n.code,
+              sx: te,
+              children: n.label
+            },
+            `${n.code}-${n.label}`
+          ))
+        }
+      )
+    ] }),
+    (m.includes("phoneCountryCode") || m.includes("phoneNumber")) && /* @__PURE__ */ C(B, { required: !0, disabled: f, children: [
+      /* @__PURE__ */ o(_, { sx: H, children: Me }),
+      /* @__PURE__ */ C(K, { sx: O.phoneContainer, children: [
+        m.includes("phoneCountryCode") && /* @__PURE__ */ o(
+          Je,
+          {
+            value: v.phoneCountryCode,
+            onChange: Z,
+            slotProps: {
+              input: { autoComplete: "new-phone-country-code" },
+              listbox: Y.listbox,
+              root: Y.root,
+              clearIndicator: {
+                sx: {
+                  "&:hover": {
+                    bgcolor: i.neutral.plainHoverBg,
+                    color: i.neutral.plainHoverColor
+                  }
+                }
+              },
+              popupIndicator: {
+                sx: {
+                  "&:hover": {
+                    bgcolor: i.neutral.plainHoverBg,
+                    color: i.neutral.plainHoverColor
+                  }
+                }
+              }
+            },
+            sx: O.countrySelect,
+            options: s,
+            autoHighlight: !0,
+            getOptionLabel: (n) => `+${n.phone}`,
+            renderOption: (n, x) => /* @__PURE__ */ to(
+              Ke,
+              {
+                ...n,
+                key: `autocomplete-${x.code}-${x.label}`,
+                sx: {
+                  ...te,
+                  "&[aria-selected='true']": {
+                    bgcolor: i.neutral.plainActiveBg
+                  }
+                }
+              },
+              /* @__PURE__ */ o(Qe, { children: /* @__PURE__ */ o(
+                "img",
+                {
+                  loading: "lazy",
+                  width: "20",
+                  srcSet: `https://flagcdn.com/w40/${x.code.toLowerCase()}.png 2x`,
+                  src: `https://flagcdn.com/w20/${x.code.toLowerCase()}.png`,
+                  alt: ""
+                }
+              ) }),
+              /* @__PURE__ */ C(Ve, { sx: O.listItemContent, children: [
+                x.label,
+                /* @__PURE__ */ C(w, { level: "body-xs", children: [
+                  "+",
+                  x.phone
+                ] })
+              ] })
+            )
+          }
+        ),
+        m.includes("phoneNumber") && /* @__PURE__ */ o(
+          j,
+          {
+            value: v.phoneNumber,
+            onChange: F("phoneNumber"),
+            placeholder: qe,
+            sx: {
+              ...O.phoneInput,
+              ...U
+            }
+          }
+        )
+      ] })
+    ] }),
+    b && b.length > 0 ? b.map((n, x) => /* @__PURE__ */ C(
+      B,
+      {
+        disabled: f,
+        required: n.required || !1,
+        children: [
+          /* @__PURE__ */ o(_, { sx: H, children: n.label }),
+          n.type === "textarea" ? /* @__PURE__ */ o(
+            Xe,
+            {
+              value: V[n.key] || "",
+              onChange: Q(n.key),
+              placeholder: n.placeholder || "",
+              sx: U,
+              minRows: 3
+            }
+          ) : /* @__PURE__ */ o(
+            j,
+            {
+              value: V[n.key] || "",
+              onChange: Q(n.key),
+              placeholder: n.placeholder,
+              sx: U
+            }
+          )
+        ]
+      },
+      `custom-field-${n.key}-${x}`
+    )) : null,
+    d.consents && d.consents.length > 0 ? /* @__PURE__ */ o(
+      io,
+      {
+        consents: d.consents,
+        isDisabled: f,
+        primaryColor: R,
+        brandingUrls: c,
+        labels: e,
+        onChange: Re
+      }
+    ) : /* @__PURE__ */ o(
+      lo,
+      {
+        primaryColor: R,
+        brandingUrls: c,
+        isDisabled: f
+      }
+    ),
+    M && /* @__PURE__ */ o(ve, { variant: "error", message: l(M) }),
+    f ? /* @__PURE__ */ C(W, { children: [
+      e != null && e.successTitle || e != null && e.successDescription ? /* @__PURE__ */ o(
+        ve,
+        {
+          variant: "success",
+          title: e == null ? void 0 : e.successTitle,
+          description: e == null ? void 0 : e.successDescription
+        }
+      ) : /* @__PURE__ */ o(W, {}),
+      Ge()
+    ] }) : /* @__PURE__ */ o(
+      le,
+      {
+        type: "submit",
+        loading: E,
+        size: "lg",
+        sx: {
+          ...O.submitButton,
+          bgcolor: R,
+          color: z,
+          ":hover": { bgcolor: X, color: z },
+          fontSize: "0.8125em"
+        },
+        children: e == null ? void 0 : e.submitButtonLabel
+      }
+    )
+  ] }) });
+}, po = ({
+  sdk: d,
+  content: h,
+  campaign: a,
+  branding: u,
+  fields: p = ["fullName", "email"],
+  labels: c,
+  onSuccessCta: S,
+  customFields: D,
+  consents: A,
+  syncWithProfile: N = !1,
+  isSubmittingParticipation: P = !1
+}) => {
+  var k;
+  const t = Fe(), b = t.textColor, r = ((k = u == null ? void 0 : u.colors) == null ? void 0 : k.secondaryColor) || t.textColor, e = Be().primary, L = p.map((m) => m && m.trim());
+  return /* @__PURE__ */ C(ae, { spacing: 2, zIndex: 10, width: "100%", children: [
+    c != null && c.title || c != null && c.description ? /* @__PURE__ */ C(K, { children: [
+      c != null && c.title ? /* @__PURE__ */ o(
+        w,
+        {
+          level: "h4",
+          sx: {
+            fontFamily: e,
+            color: b,
+            fontSize: "1.25em"
+          },
+          children: c.title
+        }
+      ) : /* @__PURE__ */ o(W, {}),
+      c != null && c.description ? /* @__PURE__ */ o(
+        w,
+        {
+          level: "body-sm",
+          sx: {
+            fontFamily: e,
+            color: r,
+            opacity: 0.6,
+            fontSize: "0.875em"
+          },
+          children: c == null ? void 0 : c.description
+        }
+      ) : /* @__PURE__ */ o(W, {})
+    ] }) : /* @__PURE__ */ o(W, {}),
+    /* @__PURE__ */ o(
+      co,
+      {
+        sdk: d,
+        brandingColors: u == null ? void 0 : u.colors,
+        brandingUrls: u == null ? void 0 : u.urls,
+        campaignId: a == null ? void 0 : a.id,
+        campaignName: a == null ? void 0 : a.name,
+        contentName: h == null ? void 0 : h.name,
+        contentType: h == null ? void 0 : h.type,
+        contentId: h == null ? void 0 : h.id,
+        onSuccessCta: S,
+        fields: L,
+        labels: c,
+        formCustomFields: D,
+        consents: A,
+        syncWithProfile: N,
+        isSubmittingParticipation: P
+      }
+    )
+  ] });
+};
+export {
+  po as C
+};