@jmeirinkmarimed/form-popup 1.0.0

package/dist/form-popup.es.js

@@ -0,0 +1,1052 @@
+import Tt, { useState as E, useEffect as V, useCallback as wt } from "react";
+import ot from "react-dom";
+import { jsxs as S, Fragment as kt, jsx as c } from "react/jsx-runtime";
+var Zt = Object.defineProperty, Qt = (t, e, o) => e in t ? Zt(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o, U = (t, e, o) => Qt(t, typeof e != "symbol" ? e + "" : e, o);
+const te = {
+  stringify: (t) => t ? "true" : "false",
+  parse: (t) => /^[ty1-9]/i.test(t)
+}, ee = {
+  stringify: (t) => t.name,
+  parse: (t, e, o) => {
+    const r = (() => {
+      if (typeof window < "u" && t in window)
+        return window[t];
+      if (typeof global < "u" && t in global)
+        return global[t];
+    })();
+    return typeof r == "function" ? r.bind(o) : void 0;
+  }
+}, oe = {
+  stringify: (t) => JSON.stringify(t),
+  parse: (t) => JSON.parse(t)
+}, re = {
+  stringify: (t) => `${t}`,
+  parse: (t) => parseFloat(t)
+}, ne = {
+  stringify: (t) => t,
+  parse: (t) => t
+}, tt = {
+  string: ne,
+  number: re,
+  boolean: te,
+  function: ee,
+  json: oe
+};
+function ie(t) {
+  return t.replace(
+    /([a-z0-9])([A-Z])/g,
+    (e, o, r) => `${o}-${r.toLowerCase()}`
+  );
+}
+const P = Symbol.for("r2wc.render"), $ = Symbol.for("r2wc.connected"), H = Symbol.for("r2wc.context"), k = Symbol.for("r2wc.props");
+function se(t, e, o) {
+  var r, n, u;
+  e.props || (e.props = t.propTypes ? Object.keys(t.propTypes) : []), e.events || (e.events = []);
+  const s = Array.isArray(e.props) ? e.props.slice() : Object.keys(e.props), y = Array.isArray(e.events) ? e.events.slice() : Object.keys(e.events), p = {}, w = {}, v = {}, A = {};
+  for (const i of s) {
+    p[i] = Array.isArray(e.props) ? "string" : e.props[i];
+    const a = ie(i);
+    v[i] = a, A[a] = i;
+  }
+  for (const i of y)
+    w[i] = Array.isArray(e.events) ? {} : e.events[i];
+  class F extends HTMLElement {
+    constructor() {
+      super(), U(this, u, !0), U(this, n), U(this, r, {}), U(this, "container"), e.shadow ? this.container = this.attachShadow({
+        mode: e.shadow
+      }) : this.container = this, this[k].container = this.container;
+      for (const a of s) {
+        const h = v[a], f = this.getAttribute(h), d = p[a], g = d ? tt[d] : null;
+        g != null && g.parse && f && (this[k][a] = g.parse(f, h, this));
+      }
+      for (const a of y)
+        this[k][a] = (h) => {
+          const f = a.replace(/^on/, "").toLowerCase();
+          this.dispatchEvent(
+            new CustomEvent(f, { detail: h, ...w[a] })
+          );
+        };
+    }
+    static get observedAttributes() {
+      return Object.keys(A);
+    }
+    connectedCallback() {
+      this[$] = !0, this[P]();
+    }
+    disconnectedCallback() {
+      this[$] = !1, this[H] && o.unmount(this[H]), delete this[H];
+    }
+    attributeChangedCallback(a, h, f) {
+      const d = A[a], g = p[d], C = g ? tt[g] : null;
+      d in p && C != null && C.parse && f && (this[k][d] = C.parse(f, a, this), this[P]());
+    }
+    [(u = $, n = H, r = k, P)]() {
+      this[$] && (this[H] ? o.update(this[H], this[k]) : this[H] = o.mount(
+        this.container,
+        t,
+        this[k]
+      ));
+    }
+  }
+  for (const i of s) {
+    const a = v[i], h = p[i];
+    Object.defineProperty(F.prototype, i, {
+      enumerable: !0,
+      configurable: !0,
+      get() {
+        return this[k][i];
+      },
+      set(f) {
+        this[k][i] = f;
+        const d = h ? tt[h] : null;
+        if (d != null && d.stringify) {
+          const g = d.stringify(f, a, this);
+          this.getAttribute(a) !== g && this.setAttribute(a, g);
+        } else
+          this[P]();
+      }
+    });
+  }
+  return F;
+}
+function ae(t, e, o) {
+  const r = Tt.createElement(e, o);
+  return ot.render(r, t), {
+    container: t,
+    ReactComponent: e
+  };
+}
+function le({ container: t, ReactComponent: e }, o) {
+  const r = Tt.createElement(e, o);
+  ot.render(r, t);
+}
+function ce({ container: t }) {
+  ot.unmountComponentAtNode(t);
+}
+function ue(t, e = {}) {
+  return se(t, e, { mount: ae, update: le, unmount: ce });
+}
+const m = {
+  boxSizing: "border-box",
+  margin: "0",
+  padding: "0",
+  letterSpacing: "normal"
+}, me = "#d4ecec", de = "#111111", xt = "#000000", vt = "#ffffff", pe = 'system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif', fe = 'Georgia, "Times New Roman", Times, serif', he = (t) => {
+  const e = t.fontFamily || pe, o = t.headingFontFamily || fe, r = t.textColor || de;
+  return {
+    overlay: {
+      ...m,
+      fontFamily: e,
+      position: "fixed",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      minHeight: "100vh",
+      maxWidth: "100vw",
+      zIndex: 2147483647,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: t.overlayColor || "rgba(0, 0, 0, 0.55)",
+      overflow: "auto",
+      WebkitTextSizeAdjust: "100%",
+      WebkitFontSmoothing: "antialiased",
+      MozOsxFontSmoothing: "grayscale",
+      padding: "1.5rem"
+    },
+    card: {
+      ...m,
+      fontFamily: e,
+      position: "relative",
+      width: "100%",
+      maxWidth: "440px",
+      minHeight: "480px",
+      justifyContent: "center",
+      backgroundColor: t.backgroundColor || me,
+      color: r,
+      padding: "3rem 2.25rem 1.5rem",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      textAlign: "center",
+      boxShadow: "0 12px 40px rgba(0, 0, 0, 0.18)"
+    },
+    closeButton: {
+      ...m,
+      position: "absolute",
+      top: "14px",
+      right: "14px",
+      width: "28px",
+      height: "28px",
+      borderRadius: "50%",
+      border: "none",
+      backgroundColor: "#cfcfcf",
+      color: "#4a4a4a",
+      cursor: "pointer",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      padding: "0",
+      lineHeight: 1
+    },
+    formTitle: {
+      ...m,
+      fontFamily: o,
+      fontSize: "30px",
+      fontWeight: 700,
+      lineHeight: 1.25,
+      color: r,
+      maxWidth: "22ch"
+    },
+    formSubtitle: {
+      ...m,
+      fontFamily: e,
+      fontSize: "15px",
+      fontWeight: 400,
+      lineHeight: 1.4,
+      color: r,
+      marginTop: "0.85rem",
+      marginBottom: "1.35rem"
+    },
+    form: {
+      ...m,
+      width: "100%",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "stretch",
+      textAlign: "left"
+    },
+    emailInput: {
+      ...m,
+      fontFamily: o,
+      width: "100%",
+      height: "48px",
+      padding: "0 14px",
+      fontSize: "16px",
+      backgroundColor: "#ffffff",
+      color: "#111111",
+      border: "1px solid #e6e6e6",
+      borderRadius: "0",
+      outline: "none",
+      appearance: "none",
+      WebkitAppearance: "none"
+    },
+    stateLabel: {
+      ...m,
+      fontFamily: e,
+      fontSize: "15px",
+      fontWeight: 700,
+      color: r,
+      marginTop: "1.15rem",
+      marginBottom: "0.75rem"
+    },
+    stateGrid: {
+      ...m,
+      display: "grid",
+      gridTemplateColumns: "1fr 1fr",
+      columnGap: "1.25rem",
+      rowGap: "0.7rem",
+      width: "100%"
+    },
+    radioRow: {
+      ...m,
+      display: "flex",
+      alignItems: "center",
+      gap: "0.5rem",
+      cursor: "pointer",
+      fontFamily: o,
+      fontSize: "16px",
+      color: r,
+      userSelect: "none"
+    },
+    radio: {
+      ...m,
+      width: "16px",
+      height: "16px",
+      flexShrink: 0,
+      accentColor: r,
+      cursor: "pointer"
+    },
+    consentList: {
+      ...m,
+      display: "flex",
+      flexDirection: "column",
+      gap: "0.65rem",
+      width: "100%",
+      marginTop: "1.15rem"
+    },
+    consentRow: {
+      ...m,
+      display: "flex",
+      alignItems: "flex-start",
+      gap: "0.5rem",
+      cursor: "pointer",
+      fontFamily: e,
+      fontSize: "12px",
+      lineHeight: 1.4,
+      color: r,
+      userSelect: "none"
+    },
+    consentCheckbox: {
+      ...m,
+      width: "16px",
+      height: "16px",
+      marginTop: "1px",
+      flexShrink: 0,
+      accentColor: r,
+      cursor: "pointer"
+    },
+    consentRequired: {
+      ...m,
+      color: "#9b1c1c",
+      fontSize: "16px",
+      fontWeight: 700,
+      lineHeight: 1,
+      marginLeft: "0.15em"
+    },
+    submitButton: {
+      ...m,
+      fontFamily: o,
+      alignSelf: "center",
+      marginTop: "1.75rem",
+      minWidth: "168px",
+      height: "46px",
+      padding: "0 2rem",
+      border: "none",
+      borderRadius: "0",
+      backgroundColor: t.buttonColor || xt,
+      color: t.buttonTextColor || vt,
+      fontSize: "20px",
+      fontWeight: 700,
+      cursor: "pointer",
+      lineHeight: 1
+    },
+    error: {
+      ...m,
+      fontFamily: e,
+      fontSize: "13px",
+      color: "#9b1c1c",
+      textAlign: "center",
+      marginTop: "0.75rem"
+    },
+    recaptcha: {
+      ...m,
+      fontFamily: e,
+      fontSize: "11px",
+      color: r,
+      textAlign: "center",
+      marginTop: "1.75rem"
+    },
+    confirmationTitle: {
+      ...m,
+      fontFamily: o,
+      fontSize: "26px",
+      fontWeight: 700,
+      lineHeight: 1.3,
+      color: r,
+      maxWidth: "20ch"
+    },
+    confirmationMessage: {
+      ...m,
+      fontFamily: e,
+      fontSize: "15px",
+      fontWeight: 400,
+      lineHeight: 1.45,
+      color: r,
+      marginTop: "1rem",
+      maxWidth: "34ch"
+    },
+    confirmationButton: {
+      ...m,
+      fontFamily: o,
+      marginTop: "1.75rem",
+      minWidth: "168px",
+      height: "46px",
+      padding: "0 1.5rem",
+      border: "none",
+      borderRadius: "0",
+      backgroundColor: t.buttonColor || xt,
+      color: t.buttonTextColor || vt,
+      fontSize: "18px",
+      fontWeight: 700,
+      cursor: "pointer",
+      lineHeight: 1
+    }
+  };
+};
+function ge(t) {
+  const { buttonHoverColor: e, buttonHoverTextColor: o } = t;
+  return `
+    .sr-only {
+      position: absolute !important;
+      width: 1px !important;
+      height: 1px !important;
+      padding: 0 !important;
+      margin: -1px !important;
+      overflow: hidden !important;
+      clip: rect(0, 0, 0, 0) !important;
+      white-space: nowrap !important;
+      border: 0 !important;
+    }
+    #form-popup-email:focus {
+      border-color: #111111 !important;
+      box-shadow: 0 0 0 1px #111111 !important;
+    }
+    #form-popup-email::placeholder {
+      color: #9a9a9a !important;
+      font-family: inherit !important;
+    }
+    #form-popup-close:hover {
+      background-color: #bdbdbd !important;
+    }
+    #form-popup-submit:hover:not(:disabled),
+    #form-popup-confirmation-button:hover {
+      background-color: ${e} !important;
+      color: ${o} !important;
+    }
+    #form-popup-submit:disabled {
+      opacity: 0.65 !important;
+      cursor: wait !important;
+    }
+    @media screen and (max-width: 480px) {
+      #form-popup-card {
+        padding: 2.5rem 1.25rem 1.25rem !important;
+      }
+      #form-popup-form-title {
+        font-size: 24px !important;
+      }
+      #form-popup-confirmation-title {
+        font-size: 22px !important;
+      }
+    }
+  `;
+}
+function Et(t) {
+  return `formPopupSubmitted:${t || "default"}`;
+}
+function Ct(t) {
+  return typeof window > "u" || !t ? !1 : localStorage.getItem(Et(t)) === "true";
+}
+function be(t) {
+  const [e, o] = E(
+    () => t ? !Ct(t) : !1
+  );
+  V(() => {
+    t && o(!Ct(t));
+  }, [t]);
+  const r = wt(() => {
+    t && localStorage.setItem(Et(t), "true");
+  }, [t]), n = wt(() => {
+    o(!1);
+  }, []);
+  return { showModal: e, markSubmitted: r, dismiss: n };
+}
+const ye = "ageVerified", we = "true", rt = "age-gate", xe = "#age-gate-modal";
+function ve(t, e) {
+  return typeof window > "u" ? !1 : localStorage.getItem(t) === e;
+}
+function St(t, e) {
+  var o;
+  try {
+    const r = document.querySelectorAll(t);
+    for (const n of r) {
+      const u = (o = n.shadowRoot) == null ? void 0 : o.querySelector(e);
+      if (u) return u;
+    }
+  } catch {
+    return null;
+  }
+  return null;
+}
+function Ce(t, e) {
+  if (typeof document > "u" || !t) return null;
+  try {
+    const o = document.querySelector(t);
+    if (o) return o;
+  } catch {
+    return null;
+  }
+  {
+    const o = St(e, t);
+    if (o) return o;
+  }
+  return St(rt, t);
+}
+function At(t) {
+  var s, y, p, w;
+  const e = !!t.waitForAgeGate, o = ((s = t.waitForStorageKey) == null ? void 0 : s.trim()) || (e ? ye : ""), r = ((y = t.waitForStorageValue) == null ? void 0 : y.trim()) || we, n = ((p = t.waitUntilHidden) == null ? void 0 : p.trim()) || (e ? xe : ""), u = ((w = t.waitUntilHiddenHost) == null ? void 0 : w.trim()) || rt;
+  return !o && !n ? !0 : !(o && !ve(o, r) || n && Ce(n, u));
+}
+function Se(t) {
+  var p, w, v, A;
+  const e = !!t.waitForAgeGate, o = ((p = t.waitForStorageKey) == null ? void 0 : p.trim()) || "", r = ((w = t.waitForStorageValue) == null ? void 0 : w.trim()) || "", n = ((v = t.waitUntilHidden) == null ? void 0 : v.trim()) || "", u = ((A = t.waitUntilHiddenHost) == null ? void 0 : A.trim()) || "", [s, y] = E(() => At(t));
+  return V(() => {
+    const F = {
+      waitForAgeGate: e,
+      waitForStorageKey: o,
+      waitForStorageValue: r,
+      waitUntilHidden: n,
+      waitUntilHiddenHost: u
+    };
+    if (!e && !o && !n) {
+      y(!0);
+      return;
+    }
+    const i = () => y(At(F));
+    i();
+    const a = [], h = /* @__PURE__ */ new WeakSet(), f = () => {
+      const C = u || rt;
+      try {
+        document.querySelectorAll(C).forEach((_) => {
+          const l = _.shadowRoot;
+          if (!l || h.has(l)) return;
+          h.add(l);
+          const x = new MutationObserver(i);
+          x.observe(l, {
+            childList: !0,
+            subtree: !0
+          }), a.push(x);
+        });
+      } catch {
+      }
+    };
+    f();
+    const d = new MutationObserver(() => {
+      f(), i();
+    });
+    d.observe(document.documentElement, {
+      childList: !0,
+      subtree: !0
+    });
+    const g = window.setInterval(i, 250);
+    return () => {
+      d.disconnect(), a.forEach((C) => C.disconnect()), window.clearInterval(g);
+    };
+  }, [e, o, r, n, u]), s;
+}
+function Ae(t) {
+  return t ? Array.isArray(t) ? t.map((e) => e.trim()).filter(Boolean) : String(t).split(",").map((e) => e.trim()).filter(Boolean) : [];
+}
+function nt(t) {
+  if (!t) return;
+  if (t instanceof ShadowRoot) return t.host;
+  const e = t.getRootNode();
+  if (e instanceof ShadowRoot) return e.host;
+}
+function G(t, e) {
+  const o = nt(t);
+  if (!(o != null && o.hasAttribute(e))) return;
+  const r = o.getAttribute(e);
+  return r ?? void 0;
+}
+function Te(t, e, o) {
+  const r = nt(e);
+  if (r != null && r.hasAttribute(o)) {
+    const n = (r.getAttribute(o) ?? "").trim().toLowerCase();
+    return !(n === "false" || n === "0" || n === "no" || n === "off");
+  }
+  return t === !0 || t === "true";
+}
+const ke = "This site is protected by reCAPTCHA.", Ee = /* @__PURE__ */ new Set(["", "false", "none", "off", "hidden"]);
+function Fe(t, e) {
+  const o = nt(e), r = (o == null ? void 0 : o.hasAttribute("recaptcha-text")) === !0 ? o.getAttribute("recaptcha-text") ?? "" : t;
+  return r === void 0 ? ke : Ee.has(String(r).trim().toLowerCase()) ? "" : String(r);
+}
+function Re(t) {
+  if (!t || typeof t != "object") return null;
+  const e = t, o = String(e.text ?? "").trim(), r = e.subscriptionTypeId;
+  return !o || typeof r != "string" && typeof r != "number" || String(r).trim() === "" ? null : {
+    subscriptionTypeId: r,
+    text: o,
+    required: !!e.required
+  };
+}
+function He(t) {
+  if (!t) return [];
+  let e = [];
+  if (Array.isArray(t))
+    e = t;
+  else {
+    const o = t.trim();
+    if (!o) return [];
+    try {
+      const r = JSON.parse(o);
+      if (!Array.isArray(r)) return [];
+      e = r;
+    } catch {
+      return [];
+    }
+  }
+  return e.flatMap((o) => {
+    const r = Re(o);
+    return r ? [r] : [];
+  });
+}
+function et(t) {
+  return String(t.subscriptionTypeId);
+}
+function Le(t) {
+  if (typeof document > "u") return;
+  const e = document.cookie.match(new RegExp(`(?:^|; )${t}=([^;]*)`));
+  return e ? decodeURIComponent(e[1]) : void 0;
+}
+async function Oe(t) {
+  var u;
+  const e = Le("hubspotutk"), o = t.legalConsent, r = (u = o == null ? void 0 : o.communications) == null ? void 0 : u.map((s) => ({
+    subscriptionTypeId: s.subscriptionTypeId,
+    text: s.text,
+    value: s.value
+  })), n = await fetch(
+    `https://api.hsforms.com/submissions/v3/integration/submit/${t.portalId}/${t.formId}`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        fields: t.fields.map((s) => ({
+          objectTypeId: "0-1",
+          name: s.name,
+          value: s.value
+        })),
+        context: {
+          pageUri: window.location.href,
+          pageName: document.title,
+          ...e ? { hutk: e } : {}
+        },
+        ...o ? {
+          legalConsentOptions: {
+            consent: {
+              consentToProcess: o.consentToProcess,
+              ...o.text ? { text: o.text } : {},
+              ...r != null && r.length ? { communications: r } : {}
+            }
+          }
+        } : {}
+      })
+    }
+  );
+  if (!n.ok) {
+    let s = "";
+    try {
+      s = await n.text();
+    } catch {
+      s = "";
+    }
+    throw new Error(s || `HubSpot submission failed (${n.status})`);
+  }
+}
+function We({
+  styles: t,
+  formTitle: e,
+  formSubtitle: o,
+  email: r,
+  emailPlaceholder: n,
+  state: u,
+  stateLabel: s,
+  states: y,
+  consentToProcessText: p,
+  consentToProcess: w,
+  communicationConsents: v,
+  communicationValues: A,
+  submitButtonText: F,
+  recaptchaText: i,
+  error: a,
+  submitting: h,
+  onEmailChange: f,
+  onStateChange: d,
+  onConsentToProcessChange: g,
+  onCommunicationChange: C,
+  onSubmit: _
+}) {
+  return /* @__PURE__ */ S(kt, { children: [
+    /* @__PURE__ */ c("h1", { id: "form-popup-form-title", style: t.formTitle, children: e }),
+    o != null && o.trim() ? /* @__PURE__ */ c("p", { id: "form-popup-form-subtitle", style: t.formSubtitle, children: o }) : null,
+    /* @__PURE__ */ S("form", { id: "form-popup-form", style: t.form, onSubmit: _, noValidate: !0, children: [
+      /* @__PURE__ */ c("label", { htmlFor: "form-popup-email", className: "sr-only", children: "Email" }),
+      /* @__PURE__ */ c(
+        "input",
+        {
+          id: "form-popup-email",
+          name: "email",
+          type: "email",
+          autoComplete: "email",
+          required: !0,
+          value: r,
+          placeholder: n,
+          onChange: (l) => f(l.target.value),
+          style: t.emailInput,
+          "aria-required": "true"
+        }
+      ),
+      /* @__PURE__ */ c("p", { id: "form-popup-state-label", style: t.stateLabel, children: s }),
+      /* @__PURE__ */ c(
+        "div",
+        {
+          role: "radiogroup",
+          "aria-labelledby": "form-popup-state-label",
+          "aria-required": "true",
+          style: t.stateGrid,
+          children: y.map((l) => {
+            const x = `form-popup-state-${l.replace(/\s+/g, "-").toLowerCase()}`;
+            return /* @__PURE__ */ S("label", { htmlFor: x, style: t.radioRow, children: [
+              /* @__PURE__ */ c(
+                "input",
+                {
+                  id: x,
+                  type: "radio",
+                  name: "form-popup-state",
+                  value: l,
+                  checked: u === l,
+                  onChange: () => d(l),
+                  style: t.radio
+                }
+              ),
+              l
+            ] }, l);
+          })
+        }
+      ),
+      p || v.length > 0 ? /* @__PURE__ */ S("div", { style: t.consentList, children: [
+        p ? /* @__PURE__ */ S("label", { htmlFor: "form-popup-consent-process", style: t.consentRow, children: [
+          /* @__PURE__ */ c(
+            "input",
+            {
+              id: "form-popup-consent-process",
+              type: "checkbox",
+              checked: w,
+              required: !0,
+              "aria-required": "true",
+              onChange: (l) => g(l.target.checked),
+              style: t.consentCheckbox
+            }
+          ),
+          /* @__PURE__ */ S("span", { children: [
+            p,
+            /* @__PURE__ */ c("span", { style: t.consentRequired, "aria-hidden": "true", children: "*" })
+          ] })
+        ] }) : null,
+        v.map((l) => {
+          const x = et(l), D = `form-popup-consent-comm-${x}`;
+          return /* @__PURE__ */ S("label", { htmlFor: D, style: t.consentRow, children: [
+            /* @__PURE__ */ c(
+              "input",
+              {
+                id: D,
+                type: "checkbox",
+                checked: !!A[x],
+                required: l.required,
+                "aria-required": l.required ? !0 : void 0,
+                onChange: (N) => C(x, N.target.checked),
+                style: t.consentCheckbox
+              }
+            ),
+            /* @__PURE__ */ S("span", { children: [
+              l.text,
+              l.required ? /* @__PURE__ */ c("span", { style: t.consentRequired, "aria-hidden": "true", children: "*" }) : null
+            ] })
+          ] }, x);
+        })
+      ] }) : null,
+      /* @__PURE__ */ c(
+        "button",
+        {
+          id: "form-popup-submit",
+          type: "submit",
+          style: t.submitButton,
+          disabled: h,
+          children: h ? "Submitting…" : F
+        }
+      ),
+      a ? /* @__PURE__ */ c("p", { id: "form-popup-error", role: "alert", style: t.error, children: a }) : null
+    ] }),
+    i != null && i.trim() ? /* @__PURE__ */ c("p", { id: "form-popup-recaptcha", style: t.recaptcha, children: i }) : null
+  ] });
+}
+function Ge({
+  styles: t,
+  confirmationTitle: e,
+  confirmationMessage: o,
+  confirmationButtonText: r,
+  onButtonClick: n
+}) {
+  const u = !!(r != null && r.trim());
+  return /* @__PURE__ */ S(kt, { children: [
+    /* @__PURE__ */ c("h1", { id: "form-popup-confirmation-title", style: t.confirmationTitle, children: e }),
+    o != null && o.trim() ? /* @__PURE__ */ c("p", { id: "form-popup-confirmation-message", style: t.confirmationMessage, children: o }) : null,
+    u ? /* @__PURE__ */ c(
+      "button",
+      {
+        id: "form-popup-confirmation-button",
+        type: "button",
+        style: t.confirmationButton,
+        onClick: n,
+        children: r
+      }
+    ) : null
+  ] });
+}
+const _e = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+function qe(t) {
+  return !t || t === "demo";
+}
+const Be = ({
+  hubspotPortalId: t,
+  hubspotFormId: e,
+  emailProperty: o = "email",
+  stateProperty: r = "state",
+  additionalPropertyName: n,
+  additionalPropertyValue: u,
+  consentToProcessText: s,
+  communicationConsents: y,
+  formTitle: p,
+  formSubtitle: w,
+  states: v,
+  submitButtonText: A = "Submit",
+  emailPlaceholder: F = "Email *",
+  stateLabel: i = "Select A State *",
+  confirmationTitle: a,
+  confirmationMessage: h,
+  confirmationButtonText: f,
+  confirmationButtonUrl: d,
+  recaptchaText: g,
+  backgroundColor: C,
+  overlayColor: _,
+  textColor: l = "#111111",
+  buttonColor: x = "#000000",
+  buttonTextColor: D = "#ffffff",
+  buttonHoverColor: N = "#333333",
+  buttonHoverTextColor: Rt = "#ffffff",
+  fontFamily: Ht,
+  headingFontFamily: Lt,
+  waitForAgeGate: Ot,
+  waitForStorageKey: M,
+  waitForStorageValue: K,
+  waitUntilHidden: J,
+  waitUntilHiddenHost: X,
+  container: R
+}) => {
+  var mt, dt, pt, ft, ht, gt;
+  const q = he({
+    backgroundColor: C,
+    overlayColor: _,
+    textColor: l,
+    buttonColor: x,
+    buttonTextColor: D,
+    fontFamily: Ht,
+    headingFontFamily: Lt
+  }), it = (e == null ? void 0 : e.trim()) || ((mt = G(R, "hubspot-form-id")) == null ? void 0 : mt.trim()) || "", st = (t == null ? void 0 : t.trim()) || ((dt = G(R, "hubspot-portal-id")) == null ? void 0 : dt.trim()) || "", Wt = Te(
+    Ot,
+    R,
+    "wait-for-age-gate"
+  ), Gt = (M == null ? void 0 : M.trim()) || ((pt = G(R, "wait-for-storage-key")) == null ? void 0 : pt.trim()) || "", _t = (K == null ? void 0 : K.trim()) || ((ft = G(R, "wait-for-storage-value")) == null ? void 0 : ft.trim()) || "", qt = (J == null ? void 0 : J.trim()) || ((ht = G(R, "wait-until-hidden")) == null ? void 0 : ht.trim()) || "", Bt = (X == null ? void 0 : X.trim()) || ((gt = G(R, "wait-until-hidden-host")) == null ? void 0 : gt.trim()) || "", { showModal: It, markSubmitted: zt, dismiss: B } = be(it), Dt = Se({
+    waitForAgeGate: Wt,
+    waitForStorageKey: Gt,
+    waitForStorageValue: _t,
+    waitUntilHidden: qt,
+    waitUntilHiddenHost: Bt
+  }), I = It && Dt, [at, jt] = E("form"), [lt, Ut] = E(""), [Y, Pt] = E(""), [Z, $t] = E(!1), [Q, Vt] = E({}), [ct, ut] = E(!1), [j, T] = E(""), Nt = Ae(v), Mt = Fe(g, R), L = (s == null ? void 0 : s.trim()) || "", z = He(y), Kt = !!L || z.length > 0;
+  V(() => {
+    if (!I) return;
+    const b = document.body.style.overflow;
+    return document.body.style.overflow = "hidden", () => {
+      document.body.style.overflow = b;
+    };
+  }, [I]), V(() => {
+    if (!I) return;
+    const b = (O) => {
+      O.key === "Escape" && B();
+    };
+    return window.addEventListener("keydown", b), () => window.removeEventListener("keydown", b);
+  }, [I, B]);
+  const Jt = async (b) => {
+    b.preventDefault();
+    const O = lt.trim();
+    if (!_e.test(O)) {
+      T("Please enter a valid email address.");
+      return;
+    }
+    if (!Y) {
+      T("Please select a state.");
+      return;
+    }
+    if (L && !Z) {
+      T("Please agree to the privacy terms.");
+      return;
+    }
+    if (z.find(
+      (W) => W.required && !Q[et(W)]
+    )) {
+      T("Please agree to the required communications terms.");
+      return;
+    }
+    T(""), ut(!0);
+    const yt = [
+      { name: o, value: O },
+      { name: r, value: Y }
+    ];
+    n != null && n.trim() && u != null && yt.push({
+      name: n.trim(),
+      value: u
+    });
+    try {
+      qe(st) || await Oe({
+        portalId: st,
+        formId: it,
+        fields: yt,
+        legalConsent: Kt ? {
+          consentToProcess: !!(L && Z),
+          ...L ? { text: L } : {},
+          ...z.length ? {
+            communications: z.map((W) => ({
+              subscriptionTypeId: Number(W.subscriptionTypeId),
+              text: W.text,
+              value: !!Q[et(W)]
+            }))
+          } : {}
+        } : void 0
+      }), zt(), jt("confirmation");
+    } catch {
+      T("Something went wrong. Please try again.");
+    } finally {
+      ut(!1);
+    }
+  }, Xt = () => {
+    if (d) {
+      window.location.href = d;
+      return;
+    }
+    B();
+  };
+  if (!I) return null;
+  const Yt = at === "form" ? "form-popup-form-title" : "form-popup-confirmation-title";
+  return /* @__PURE__ */ S(
+    "div",
+    {
+      id: "form-popup-overlay",
+      style: q.overlay,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": Yt,
+      onClick: (b) => {
+        b.target === b.currentTarget && !ct && B();
+      },
+      children: [
+        /* @__PURE__ */ c("style", { children: ge({
+          buttonHoverColor: N,
+          buttonHoverTextColor: Rt
+        }) }),
+        /* @__PURE__ */ S("div", { id: "form-popup-card", style: q.card, role: "document", children: [
+          /* @__PURE__ */ c(
+            "button",
+            {
+              id: "form-popup-close",
+              type: "button",
+              style: q.closeButton,
+              "aria-label": "Close",
+              onClick: B,
+              children: /* @__PURE__ */ c("svg", { width: "10", height: "10", viewBox: "0 0 10 10", "aria-hidden": "true", children: /* @__PURE__ */ c(
+                "path",
+                {
+                  d: "M1 1l8 8M9 1L1 9",
+                  stroke: "currentColor",
+                  strokeWidth: "1.5",
+                  strokeLinecap: "round"
+                }
+              ) })
+            }
+          ),
+          at === "form" ? /* @__PURE__ */ c(
+            We,
+            {
+              styles: q,
+              formTitle: p,
+              formSubtitle: w,
+              email: lt,
+              emailPlaceholder: F,
+              state: Y,
+              stateLabel: i,
+              states: Nt,
+              consentToProcessText: L || void 0,
+              consentToProcess: Z,
+              communicationConsents: z,
+              communicationValues: Q,
+              submitButtonText: A,
+              recaptchaText: Mt,
+              error: j,
+              submitting: ct,
+              onEmailChange: Ut,
+              onStateChange: (b) => {
+                Pt(b), j && T("");
+              },
+              onConsentToProcessChange: (b) => {
+                $t(b), j && T("");
+              },
+              onCommunicationChange: (b, O) => {
+                Vt((bt) => ({
+                  ...bt,
+                  [b]: O
+                })), j && T("");
+              },
+              onSubmit: Jt
+            }
+          ) : /* @__PURE__ */ c(
+            Ge,
+            {
+              styles: q,
+              confirmationTitle: a,
+              confirmationMessage: h,
+              confirmationButtonText: f,
+              onButtonClick: Xt
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}, Ie = ue(Be, {
+  props: {
+    hubspotPortalId: "string",
+    hubspotFormId: "string",
+    emailProperty: "string",
+    stateProperty: "string",
+    additionalPropertyName: "string",
+    additionalPropertyValue: "string",
+    consentToProcessText: "string",
+    communicationConsents: "string",
+    formTitle: "string",
+    formSubtitle: "string",
+    states: "string",
+    submitButtonText: "string",
+    emailPlaceholder: "string",
+    stateLabel: "string",
+    confirmationTitle: "string",
+    confirmationMessage: "string",
+    confirmationButtonText: "string",
+    confirmationButtonUrl: "string",
+    recaptchaText: "string",
+    backgroundColor: "string",
+    overlayColor: "string",
+    textColor: "string",
+    buttonColor: "string",
+    buttonTextColor: "string",
+    buttonHoverColor: "string",
+    buttonHoverTextColor: "string",
+    fontFamily: "string",
+    headingFontFamily: "string",
+    waitForAgeGate: "string",
+    waitForStorageKey: "string",
+    waitForStorageValue: "string",
+    waitUntilHidden: "string",
+    waitUntilHiddenHost: "string"
+  },
+  shadow: "open"
+});
+function Ft() {
+  typeof customElements > "u" || customElements.get("form-popup") || customElements.define("form-popup", Ie);
+}
+Ft();
+Ft();
+export {
+  Be as FormPopup
+};
+//# sourceMappingURL=form-popup.es.js.map