@jmeirinkmarimed/form-popup 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024-2026 Jesse Meirink / Marimed Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,162 @@
+# Form Popup
+
+Email-capture modal for React apps and plain HTML sites. Ships as a React component and as a `<form-popup>` custom element (IIFE for static pages). Submits to HubSpot, then shows a confirmation screen. After a successful submit, the popup stays dismissed on later visits via `localStorage`.
+
+## Features
+
+- Form screen, then confirmation screen after submit
+- Persists completion in `localStorage` (`formPopupSubmitted:<formId>`) so returning visitors do not see it again
+- Maps email, state, and one extra property to HubSpot field names of your choosing
+- Optional GDPR processing consent and HubSpot communication/subscription checkboxes
+- Customizable copy, state list, colors, and fonts
+- Style isolation via Shadow DOM on the web-component path
+
+## Install
+
+```bash
+npm install @jmeirinkmarimed/form-popup
+```
+
+Peer dependency: React 17 or 18.
+
+### React
+
+```jsx
+import { FormPopup } from '@jmeirinkmarimed/form-popup';
+
+function App() {
+  return (
+    <FormPopup
+      hubspotPortalId="YOUR_PORTAL_ID"
+      hubspotFormId="YOUR_FORM_GUID"
+      emailProperty="email"
+      stateProperty="state"
+      additionalPropertyName="signup_source"
+      additionalPropertyValue="homepage_popup"
+      consentToProcessText="I agree to allow Example Company to store and process my personal data."
+      formTitle="Sign up for 10% off your first purchase!"
+      formSubtitle="Enter your email to join our mailing list."
+      states={[
+        "Delaware",
+        "Maryland",
+        "Massachusetts",
+        "Illinois",
+        "Missouri",
+        "Just Browsing",
+      ]}
+      confirmationTitle="Use code WELCOME10 for 10% off!"
+      confirmationMessage="You're officially on the list for sweet updates delivered straight to your inbox."
+      confirmationButtonText="Shop Betty's"
+      confirmationButtonUrl="https://shopbettys.com"
+      waitForAgeGate
+    />
+  );
+}
+```
+
+### HTML
+
+```html
+<script src="https://unpkg.com/@jmeirinkmarimed/form-popup/dist/form-popup.min.js"></script>
+
+<form-popup
+  hubspot-portal-id="YOUR_PORTAL_ID"
+  hubspot-form-id="YOUR_FORM_GUID"
+  email-property="email"
+  state-property="state"
+  additional-property-name="signup_source"
+  additional-property-value="homepage_popup"
+  consent-to-process-text="I agree to allow Example Company to store and process my personal data."
+  communication-consents='[{"subscriptionTypeId":999,"text":"I agree to receive other communications from Example Company."}]'
+  form-title="Sign up for 10% off your first purchase!"
+  form-subtitle="Enter your email to join our mailing list."
+  states="Delaware,Maryland,Massachusetts,Illinois,Missouri,Just Browsing"
+  confirmation-title="Use code WELCOME10 for 10% off!"
+  confirmation-message="You're officially on the list for sweet updates delivered straight to your inbox."
+  confirmation-button-text="Shop Betty's"
+  confirmation-button-url="https://shopbettys.com"
+  wait-for-age-gate="true"
+></form-popup>
+```
+
+Attribute names are kebab-case versions of the React props. `states` is a comma-separated list in HTML. `communicationConsents` is a JSON array in HTML.
+
+## Props / attributes
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `hubspotPortalId` | string | — | HubSpot portal ID (required). Use `"demo"` to skip the API in local previews. |
+| `hubspotFormId` | string | — | HubSpot form GUID fields are submitted to (required) |
+| `emailProperty` | string | `"email"` | HubSpot property name for the email address |
+| `stateProperty` | string | `"state"` | HubSpot property name for the selected state |
+| `additionalPropertyName` | string | — | Extra HubSpot property name (for lists/segments) |
+| `additionalPropertyValue` | string | — | Value sent for `additionalPropertyName` |
+| `consentToProcessText` | string | — | GDPR processing-consent checkbox label. Omit to skip consent UI and `legalConsentOptions` |
+| `communicationConsents` | `CommunicationConsent[]` \| string | — | Optional marketing opt-ins. React: array. HTML: JSON array. Each item: `subscriptionTypeId`, `text`, optional `required` |
+| `formTitle` | string | — | Form-screen headline (required) |
+| `formSubtitle` | string | — | Form-screen supporting line |
+| `states` | string[] \| string | — | Radio options. React: array. HTML: comma-separated (required) |
+| `submitButtonText` | string | `"Submit"` | Form submit label |
+| `emailPlaceholder` | string | `"Email *"` | Email input placeholder |
+| `stateLabel` | string | `"Select A State *"` | State radio group label |
+| `confirmationTitle` | string | — | Confirmation-screen headline (required) |
+| `confirmationMessage` | string | — | Confirmation-screen supporting line |
+| `confirmationButtonText` | string | — | Confirmation CTA label (hidden if omitted) |
+| `confirmationButtonUrl` | string | — | Confirmation CTA destination |
+| `recaptchaText` | string | `"This site is protected by reCAPTCHA."` | Footer disclaimer. Hide with `""` or `"false"` (`recaptcha-text=""` / `recaptcha-text="false"` in HTML) |
+| `backgroundColor` | string | `#d4ecec` | Modal card background |
+| `overlayColor` | string | `rgba(0, 0, 0, 0.55)` | Page overlay |
+| `textColor` | string | `#111111` | Text color |
+| `buttonColor` | string | `#000000` | Button background |
+| `buttonTextColor` | string | `#ffffff` | Button text |
+| `buttonHoverColor` | string | `#333333` | Button hover background |
+| `buttonHoverTextColor` | string | `#ffffff` | Button hover text |
+| `fontFamily` | string | system sans | Body / UI font stack |
+| `headingFontFamily` | string | Georgia / serif | Headline and submit font stack |
+| `waitForAgeGate` | boolean | `false` | Wait for `@jmeirinkmarimed/age-gate`: `localStorage.ageVerified === "true"` and `#age-gate-modal` gone |
+| `waitForStorageKey` | string | — | Wait until this localStorage key equals `waitForStorageValue` |
+| `waitForStorageValue` | string | `"true"` | Expected value for `waitForStorageKey` |
+| `waitUntilHidden` | string | — | Wait until this selector matches no overlay (light DOM or `<age-gate>` shadow root) |
+| `waitUntilHiddenHost` | string | `"age-gate"` | Shadow-host selector for `waitUntilHidden` |
+
+## Behavior
+
+- Closing the popup (X, overlay click, or Escape) hides it for the current page view only.
+- After a successful HubSpot submit, `localStorage` is set so the popup does not return on later visits. The confirmation screen still shows until the user closes it or follows the CTA.
+- Set `hubspotPortalId="demo"` in local examples to skip the network call and still reach the confirmation screen.
+- HubSpot forms with a required GDPR processing checkbox need `consentToProcessText` (copy the checkbox label from the form). Optional email-subscription checkboxes go in `communicationConsents`, using each checkbox’s HubSpot subscription type ID. Leave both unset for forms with no legal-consent options.
+- Both this popup and `@jmeirinkmarimed/age-gate` use the maximum `z-index`. Put `<age-gate>` on the page and set `wait-for-age-gate="true"` so the form waits until `ageVerified` is `"true"` **and** `#age-gate-modal` has unmounted. Do not treat a missing overlay as done — the gate may not have rendered yet. Returning visitors already in `localStorage` see the form immediately. Put `<age-gate>` before `<form-popup>` in the theme.
+
+## Custom fonts
+
+Import fonts in your app (or `<link>` / `@font-face` in HTML). Set `headingFontFamily` / `fontFamily` to match. The Betty's preview loads Alegreya for headlines.
+
+## Local development
+
+This repo uses **Bun** only (`bun.lock`). Do not commit `package-lock.json`.
+
+```bash
+bun install
+bun run dev              # playground → http://localhost:5173
+bun run build            # dist/ (ES + CJS + UMD + IIFE + .d.ts)
+bun run examples:serve   # previews :8080, playground :5173, react-consumer :5174
+bun run lint
+```
+
+HTML previews live in [`examples/previews/`](examples/previews/) and load a locally built `form-popup.min.js` (gitignored; created by `examples:serve`). Customize a preview here, then copy the `<form-popup>` markup onto the live site.
+
+## Publishing
+
+`bun run build` produces:
+
+| File | Purpose |
+|------|---------|
+| `dist/form-popup.es.js` | ESM (React peer externals) |
+| `dist/form-popup.cjs.js` | CommonJS |
+| `dist/form-popup.umd.js` | UMD |
+| `dist/form-popup.min.js` | Standalone IIFE (React bundled) for `<script>` / unpkg |
+| `dist/index.d.ts` | TypeScript declarations |
+
+Importing the package registers `<form-popup>` as a side effect. The IIFE build also exposes `window.React` / `window.ReactDOM`.
+
+See [CONTRIBUTING.md](CONTRIBUTING.md) for contribution notes.

package/dist/FormPopup/FormPopup.d.ts

@@ -0,0 +1,5 @@
+import type { FormPopupProps } from "./types";
+declare const FormPopup: ({ hubspotPortalId, hubspotFormId, emailProperty, stateProperty, additionalPropertyName, additionalPropertyValue, consentToProcessText, communicationConsents, formTitle, formSubtitle, states, submitButtonText, emailPlaceholder, stateLabel, confirmationTitle, confirmationMessage, confirmationButtonText, confirmationButtonUrl, recaptchaText, backgroundColor, overlayColor, textColor, buttonColor, buttonTextColor, buttonHoverColor, buttonHoverTextColor, fontFamily, headingFontFamily, waitForAgeGate, waitForStorageKey, waitForStorageValue, waitUntilHidden, waitUntilHiddenHost, container, }: FormPopupProps & {
+    container?: HTMLElement;
+}) => import("react").JSX.Element | null;
+export default FormPopup;

package/dist/FormPopup/FormPopup.injected.css.d.ts

@@ -0,0 +1,5 @@
+/** Runtime CSS injected into the modal (needed for Shadow DOM + host-page isolation). */
+export declare function getInjectedCss(options: {
+    buttonHoverColor: string;
+    buttonHoverTextColor: string;
+}): string;

package/dist/FormPopup/FormPopup.styles.d.ts

@@ -0,0 +1,13 @@
+import type { CSSProperties } from "react";
+interface StyleProps {
+    backgroundColor?: string;
+    overlayColor?: string;
+    textColor?: string;
+    buttonColor?: string;
+    buttonTextColor?: string;
+    fontFamily?: string;
+    headingFontFamily?: string;
+}
+export declare const resetStyles: CSSProperties;
+export declare const createStyles: (props: StyleProps) => Record<string, CSSProperties>;
+export {};

package/dist/FormPopup/api/submitHubSpotForm.d.ts

@@ -0,0 +1,20 @@
+export interface HubSpotField {
+    name: string;
+    value: string;
+}
+export interface HubSpotCommunicationConsent {
+    subscriptionTypeId: number;
+    text: string;
+    value: boolean;
+}
+export interface HubSpotLegalConsent {
+    consentToProcess: boolean;
+    text?: string;
+    communications?: HubSpotCommunicationConsent[];
+}
+export declare function submitHubSpotForm(options: {
+    portalId: string;
+    formId: string;
+    fields: HubSpotField[];
+    legalConsent?: HubSpotLegalConsent;
+}): Promise<void>;

package/dist/FormPopup/getWebComponentHost.d.ts

@@ -0,0 +1,3 @@
+export declare function getWebComponentHost(container?: HTMLElement): HTMLElement | undefined;
+export declare function readHostAttribute(container: HTMLElement | undefined, attribute: string): string | undefined;
+export declare function resolveHostFlag(prop: boolean | string | undefined, container: HTMLElement | undefined, attribute: string): boolean;

package/dist/FormPopup/hooks/useDeferredReady.d.ts

@@ -0,0 +1,8 @@
+export interface DeferredReadyOptions {
+    waitForAgeGate?: boolean;
+    waitForStorageKey?: string;
+    waitForStorageValue?: string;
+    waitUntilHidden?: string;
+    waitUntilHiddenHost?: string;
+}
+export declare function useDeferredReady(options: DeferredReadyOptions): boolean;

package/dist/FormPopup/hooks/useFormPopupVisibility.d.ts

@@ -0,0 +1,5 @@
+export declare function useFormPopupVisibility(formId: string): {
+    showModal: boolean;
+    markSubmitted: () => void;
+    dismiss: () => void;
+};

package/dist/FormPopup/parseCommunicationConsents.d.ts

@@ -0,0 +1,3 @@
+import type { CommunicationConsent } from "./types";
+export declare function parseCommunicationConsents(value: CommunicationConsent[] | string | undefined): CommunicationConsent[];
+export declare function communicationConsentKey(consent: CommunicationConsent): string;

package/dist/FormPopup/parseStates.d.ts

@@ -0,0 +1 @@
+export declare function parseStates(states: string | string[] | undefined): string[];

package/dist/FormPopup/resolveRecaptchaText.d.ts

@@ -0,0 +1,6 @@
+/**
+ * r2wc skips empty HTML attributes (`if (value)`), so `recaptcha-text=""` never
+ * reaches React. Read the host attribute when present, and treat empty / false /
+ * none / off / hidden as hidden.
+ */
+export declare function resolveRecaptchaText(recaptchaText: string | undefined, container?: HTMLElement): string;

package/dist/FormPopup/screens/ConfirmationScreen.d.ts

@@ -0,0 +1,10 @@
+import type { CSSProperties } from "react";
+interface ConfirmationScreenProps {
+    styles: Record<string, CSSProperties>;
+    confirmationTitle: string;
+    confirmationMessage?: string;
+    confirmationButtonText?: string;
+    onButtonClick: () => void;
+}
+export default function ConfirmationScreen({ styles, confirmationTitle, confirmationMessage, confirmationButtonText, onButtonClick, }: ConfirmationScreenProps): import("react").JSX.Element;
+export {};

package/dist/FormPopup/screens/FormScreen.d.ts

@@ -0,0 +1,27 @@
+import type { CSSProperties, FormEvent } from "react";
+import type { CommunicationConsent } from "../types";
+interface FormScreenProps {
+    styles: Record<string, CSSProperties>;
+    formTitle: string;
+    formSubtitle?: string;
+    email: string;
+    emailPlaceholder: string;
+    state: string;
+    stateLabel: string;
+    states: string[];
+    consentToProcessText?: string;
+    consentToProcess: boolean;
+    communicationConsents: CommunicationConsent[];
+    communicationValues: Record<string, boolean>;
+    submitButtonText: string;
+    recaptchaText?: string;
+    error?: string;
+    submitting: boolean;
+    onEmailChange: (value: string) => void;
+    onStateChange: (value: string) => void;
+    onConsentToProcessChange: (value: boolean) => void;
+    onCommunicationChange: (key: string, value: boolean) => void;
+    onSubmit: (event: FormEvent<HTMLFormElement>) => void;
+}
+export default function FormScreen({ styles, formTitle, formSubtitle, email, emailPlaceholder, state, stateLabel, states, consentToProcessText, consentToProcess, communicationConsents, communicationValues, submitButtonText, recaptchaText, error, submitting, onEmailChange, onStateChange, onConsentToProcessChange, onCommunicationChange, onSubmit, }: FormScreenProps): import("react").JSX.Element;
+export {};

package/dist/FormPopup/types.d.ts

@@ -0,0 +1,82 @@
+export interface CommunicationConsent {
+    /** HubSpot subscription type ID from the form’s communication-consent checkbox. */
+    subscriptionTypeId: number | string;
+    /** Checkbox label; also sent as HubSpot `communications[].text`. */
+    text: string;
+    /** When true, the visitor must check this box to submit. Defaults to false. */
+    required?: boolean;
+}
+export interface FormPopupProps {
+    /** HubSpot portal (hub) ID. Use `"demo"` to skip the network call in local fixtures. */
+    hubspotPortalId: string;
+    /** HubSpot form GUID that fields are submitted to. */
+    hubspotFormId: string;
+    /** HubSpot contact property that receives the email address. Defaults to `"email"`. */
+    emailProperty?: string;
+    /** HubSpot contact property that receives the selected state. Defaults to `"state"`. */
+    stateProperty?: string;
+    /** Extra HubSpot property name, e.g. for list/segment membership. */
+    additionalPropertyName?: string;
+    /** Value sent for `additionalPropertyName`. */
+    additionalPropertyValue?: string;
+    /**
+     * GDPR processing-consent checkbox label. When set, a required checkbox is shown
+     * and HubSpot `legalConsentOptions.consent` is sent on submit.
+     * Use the form’s processing-consent checkbox label from HubSpot.
+     */
+    consentToProcessText?: string;
+    /**
+     * Optional marketing subscription checkboxes (HubSpot communication consent).
+     * React: array. HTML: JSON array string.
+     */
+    communicationConsents?: CommunicationConsent[] | string;
+    /** Form-screen headline. */
+    formTitle: string;
+    /** Form-screen supporting line under the headline. */
+    formSubtitle?: string;
+    /**
+     * Radio options for the state field.
+     * React: string array. HTML: comma-separated string.
+     */
+    states: string | string[];
+    submitButtonText?: string;
+    emailPlaceholder?: string;
+    stateLabel?: string;
+    /** Confirmation-screen headline. */
+    confirmationTitle: string;
+    /** Confirmation-screen supporting line. */
+    confirmationMessage?: string;
+    confirmationButtonText?: string;
+    confirmationButtonUrl?: string;
+    /** Footer disclaimer. Omit for the default reCAPTCHA line; `""` or `"false"` hides it. */
+    recaptchaText?: string;
+    /** Modal card background. */
+    backgroundColor?: string;
+    overlayColor?: string;
+    textColor?: string;
+    buttonColor?: string;
+    buttonTextColor?: string;
+    buttonHoverColor?: string;
+    buttonHoverTextColor?: string;
+    /** Body / UI font stack. */
+    fontFamily?: string;
+    /** Headline font stack (form title, submit, state labels). */
+    headingFontFamily?: string;
+    /**
+     * Wait for `@jmeirinkmarimed/age-gate` before showing.
+     * Requires `localStorage.ageVerified === "true"` and `#age-gate-modal` gone
+     * (including inside `<age-gate>` shadow root). Returning visitors who are
+     * already verified see the popup immediately.
+     */
+    waitForAgeGate?: boolean;
+    /** Wait until this localStorage key equals `waitForStorageValue` (default `"true"`). */
+    waitForStorageKey?: string;
+    waitForStorageValue?: string;
+    /**
+     * Wait until this selector matches no element in the light DOM or in
+     * `waitUntilHiddenHost` / `<age-gate>` open shadow roots.
+     */
+    waitUntilHidden?: string;
+    /** Shadow-host selector used with `waitUntilHidden`. Defaults to `"age-gate"`. */
+    waitUntilHiddenHost?: string;
+}

package/dist/form-popup.cjs.js

@@ -0,0 +1,45 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react"),tt=require("react-dom"),n=require("react/jsx-runtime");var Kt=Object.defineProperty,Jt=(t,e,o)=>e in t?Kt(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,D=(t,e,o)=>Jt(t,typeof e!="symbol"?e+"":e,o);const Xt={stringify:t=>t?"true":"false",parse:t=>/^[ty1-9]/i.test(t)},Yt={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}},Zt={stringify:t=>JSON.stringify(t),parse:t=>JSON.parse(t)},Qt={stringify:t=>`${t}`,parse:t=>parseFloat(t)},te={stringify:t=>t,parse:t=>t},Z={string:te,number:Qt,boolean:Xt,function:Yt,json:Zt};function ee(t){return t.replace(/([a-z0-9])([A-Z])/g,(e,o,r)=>`${o}-${r.toLowerCase()}`)}const P=Symbol.for("r2wc.render"),U=Symbol.for("r2wc.connected"),j=Symbol.for("r2wc.context"),E=Symbol.for("r2wc.props");function oe(t,e,o){var r,i,u;e.props||(e.props=t.propTypes?Object.keys(t.propTypes):[]),e.events||(e.events=[]);const a=Array.isArray(e.props)?e.props.slice():Object.keys(e.props),x=Array.isArray(e.events)?e.events.slice():Object.keys(e.events),p={},w={},v={},A={};for(const s of a){p[s]=Array.isArray(e.props)?"string":e.props[s];const l=ee(s);v[s]=l,A[l]=s}for(const s of x)w[s]=Array.isArray(e.events)?{}:e.events[s];class k extends HTMLElement{constructor(){super(),D(this,u,!0),D(this,i),D(this,r,{}),D(this,"container"),e.shadow?this.container=this.attachShadow({mode:e.shadow}):this.container=this,this[E].container=this.container;for(const l of a){const g=v[l],f=this.getAttribute(g),d=p[l],b=d?Z[d]:null;b!=null&&b.parse&&f&&(this[E][l]=b.parse(f,g,this))}for(const l of x)this[E][l]=g=>{const f=l.replace(/^on/,"").toLowerCase();this.dispatchEvent(new CustomEvent(f,{detail:g,...w[l]}))}}static get observedAttributes(){return Object.keys(A)}connectedCallback(){this[U]=!0,this[P]()}disconnectedCallback(){this[U]=!1,this[j]&&o.unmount(this[j]),delete this[j]}attributeChangedCallback(l,g,f){const d=A[l],b=p[d],C=b?Z[b]:null;d in p&&C!=null&&C.parse&&f&&(this[E][d]=C.parse(f,l,this),this[P]())}[(u=U,i=j,r=E,P)](){this[U]&&(this[j]?o.update(this[j],this[E]):this[j]=o.mount(this.container,t,this[E]))}}for(const s of a){const l=v[s],g=p[s];Object.defineProperty(k.prototype,s,{enumerable:!0,configurable:!0,get(){return this[E][s]},set(f){this[E][s]=f;const d=g?Z[g]:null;if(d!=null&&d.stringify){const b=d.stringify(f,l,this);this.getAttribute(l)!==b&&this.setAttribute(l,b)}else this[P]()}})}return k}function re(t,e,o){const r=h.createElement(e,o);return tt.render(r,t),{container:t,ReactComponent:e}}function ne({container:t,ReactComponent:e},o){const r=h.createElement(e,o);tt.render(r,t)}function ie({container:t}){tt.unmountComponentAtNode(t)}function se(t,e={}){return oe(t,e,{mount:re,update:ne,unmount:ie})}const m={boxSizing:"border-box",margin:"0",padding:"0",letterSpacing:"normal"},ae="#d4ecec",le="#111111",bt="#000000",yt="#ffffff",ce='system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',ue='Georgia, "Times New Roman", Times, serif',me=t=>{const e=t.fontFamily||ce,o=t.headingFontFamily||ue,r=t.textColor||le;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||ae,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||bt,color:t.buttonTextColor||yt,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||bt,color:t.buttonTextColor||yt,fontSize:"18px",fontWeight:700,cursor:"pointer",lineHeight:1}}};function de(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 vt(t){return`formPopupSubmitted:${t||"default"}`}function xt(t){return typeof window>"u"||!t?!1:localStorage.getItem(vt(t))==="true"}function pe(t){const[e,o]=h.useState(()=>t?!xt(t):!1);h.useEffect(()=>{t&&o(!xt(t))},[t]);const r=h.useCallback(()=>{t&&localStorage.setItem(vt(t),"true")},[t]),i=h.useCallback(()=>{o(!1)},[]);return{showModal:e,markSubmitted:r,dismiss:i}}const fe="ageVerified",he="true",et="age-gate",ge="#age-gate-modal";function be(t,e){return typeof window>"u"?!1:localStorage.getItem(t)===e}function wt(t,e){var o;try{const r=document.querySelectorAll(t);for(const i of r){const u=(o=i.shadowRoot)==null?void 0:o.querySelector(e);if(u)return u}}catch{return null}return null}function ye(t,e){if(typeof document>"u"||!t)return null;try{const o=document.querySelector(t);if(o)return o}catch{return null}{const o=wt(e,t);if(o)return o}return wt(et,t)}function St(t){var a,x,p,w;const e=!!t.waitForAgeGate,o=((a=t.waitForStorageKey)==null?void 0:a.trim())||(e?fe:""),r=((x=t.waitForStorageValue)==null?void 0:x.trim())||he,i=((p=t.waitUntilHidden)==null?void 0:p.trim())||(e?ge:""),u=((w=t.waitUntilHiddenHost)==null?void 0:w.trim())||et;return!o&&!i?!0:!(o&&!be(o,r)||i&&ye(i,u))}function xe(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())||"",i=((v=t.waitUntilHidden)==null?void 0:v.trim())||"",u=((A=t.waitUntilHiddenHost)==null?void 0:A.trim())||"",[a,x]=h.useState(()=>St(t));return h.useEffect(()=>{const k={waitForAgeGate:e,waitForStorageKey:o,waitForStorageValue:r,waitUntilHidden:i,waitUntilHiddenHost:u};if(!e&&!o&&!i){x(!0);return}const s=()=>x(St(k));s();const l=[],g=new WeakSet,f=()=>{const C=u||et;try{document.querySelectorAll(C).forEach(W=>{const c=W.shadowRoot;if(!c||g.has(c))return;g.add(c);const S=new MutationObserver(s);S.observe(c,{childList:!0,subtree:!0}),l.push(S)})}catch{}};f();const d=new MutationObserver(()=>{f(),s()});d.observe(document.documentElement,{childList:!0,subtree:!0});const b=window.setInterval(s,250);return()=>{d.disconnect(),l.forEach(C=>C.disconnect()),window.clearInterval(b)}},[e,o,r,i,u]),a}function we(t){return t?Array.isArray(t)?t.map(e=>e.trim()).filter(Boolean):String(t).split(",").map(e=>e.trim()).filter(Boolean):[]}function ot(t){if(!t)return;if(t instanceof ShadowRoot)return t.host;const e=t.getRootNode();if(e instanceof ShadowRoot)return e.host}function O(t,e){const o=ot(t);if(!(o!=null&&o.hasAttribute(e)))return;const r=o.getAttribute(e);return r??void 0}function Se(t,e,o){const r=ot(e);if(r!=null&&r.hasAttribute(o)){const i=(r.getAttribute(o)??"").trim().toLowerCase();return!(i==="false"||i==="0"||i==="no"||i==="off")}return t===!0||t==="true"}const ve="This site is protected by reCAPTCHA.",Ce=new Set(["","false","none","off","hidden"]);function Ae(t,e){const o=ot(e),r=(o==null?void 0:o.hasAttribute("recaptcha-text"))===!0?o.getAttribute("recaptcha-text")??"":t;return r===void 0?ve:Ce.has(String(r).trim().toLowerCase())?"":String(r)}function Te(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 Ee(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=Te(o);return r?[r]:[]})}function Q(t){return String(t.subscriptionTypeId)}function ke(t){if(typeof document>"u")return;const e=document.cookie.match(new RegExp(`(?:^|; )${t}=([^;]*)`));return e?decodeURIComponent(e[1]):void 0}async function Fe(t){var u;const e=ke("hubspotutk"),o=t.legalConsent,r=(u=o==null?void 0:o.communications)==null?void 0:u.map(a=>({subscriptionTypeId:a.subscriptionTypeId,text:a.text,value:a.value})),i=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(a=>({objectTypeId:"0-1",name:a.name,value:a.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(!i.ok){let a="";try{a=await i.text()}catch{a=""}throw new Error(a||`HubSpot submission failed (${i.status})`)}}function je({styles:t,formTitle:e,formSubtitle:o,email:r,emailPlaceholder:i,state:u,stateLabel:a,states:x,consentToProcessText:p,consentToProcess:w,communicationConsents:v,communicationValues:A,submitButtonText:k,recaptchaText:s,error:l,submitting:g,onEmailChange:f,onStateChange:d,onConsentToProcessChange:b,onCommunicationChange:C,onSubmit:W}){return n.jsxs(n.Fragment,{children:[n.jsx("h1",{id:"form-popup-form-title",style:t.formTitle,children:e}),o!=null&&o.trim()?n.jsx("p",{id:"form-popup-form-subtitle",style:t.formSubtitle,children:o}):null,n.jsxs("form",{id:"form-popup-form",style:t.form,onSubmit:W,noValidate:!0,children:[n.jsx("label",{htmlFor:"form-popup-email",className:"sr-only",children:"Email"}),n.jsx("input",{id:"form-popup-email",name:"email",type:"email",autoComplete:"email",required:!0,value:r,placeholder:i,onChange:c=>f(c.target.value),style:t.emailInput,"aria-required":"true"}),n.jsx("p",{id:"form-popup-state-label",style:t.stateLabel,children:a}),n.jsx("div",{role:"radiogroup","aria-labelledby":"form-popup-state-label","aria-required":"true",style:t.stateGrid,children:x.map(c=>{const S=`form-popup-state-${c.replace(/\s+/g,"-").toLowerCase()}`;return n.jsxs("label",{htmlFor:S,style:t.radioRow,children:[n.jsx("input",{id:S,type:"radio",name:"form-popup-state",value:c,checked:u===c,onChange:()=>d(c),style:t.radio}),c]},c)})}),p||v.length>0?n.jsxs("div",{style:t.consentList,children:[p?n.jsxs("label",{htmlFor:"form-popup-consent-process",style:t.consentRow,children:[n.jsx("input",{id:"form-popup-consent-process",type:"checkbox",checked:w,required:!0,"aria-required":"true",onChange:c=>b(c.target.checked),style:t.consentCheckbox}),n.jsxs("span",{children:[p,n.jsx("span",{style:t.consentRequired,"aria-hidden":"true",children:"*"})]})]}):null,v.map(c=>{const S=Q(c),I=`form-popup-consent-comm-${S}`;return n.jsxs("label",{htmlFor:I,style:t.consentRow,children:[n.jsx("input",{id:I,type:"checkbox",checked:!!A[S],required:c.required,"aria-required":c.required?!0:void 0,onChange:$=>C(S,$.target.checked),style:t.consentCheckbox}),n.jsxs("span",{children:[c.text,c.required?n.jsx("span",{style:t.consentRequired,"aria-hidden":"true",children:"*"}):null]})]},S)})]}):null,n.jsx("button",{id:"form-popup-submit",type:"submit",style:t.submitButton,disabled:g,children:g?"Submitting…":k}),l?n.jsx("p",{id:"form-popup-error",role:"alert",style:t.error,children:l}):null]}),s!=null&&s.trim()?n.jsx("p",{id:"form-popup-recaptcha",style:t.recaptcha,children:s}):null]})}function Re({styles:t,confirmationTitle:e,confirmationMessage:o,confirmationButtonText:r,onButtonClick:i}){const u=!!(r!=null&&r.trim());return n.jsxs(n.Fragment,{children:[n.jsx("h1",{id:"form-popup-confirmation-title",style:t.confirmationTitle,children:e}),o!=null&&o.trim()?n.jsx("p",{id:"form-popup-confirmation-message",style:t.confirmationMessage,children:o}):null,u?n.jsx("button",{id:"form-popup-confirmation-button",type:"button",style:t.confirmationButton,onClick:i,children:r}):null]})}const He=/^[^\s@]+@[^\s@]+\.[^\s@]+$/;function Le(t){return!t||t==="demo"}const Ct=({hubspotPortalId:t,hubspotFormId:e,emailProperty:o="email",stateProperty:r="state",additionalPropertyName:i,additionalPropertyValue:u,consentToProcessText:a,communicationConsents:x,formTitle:p,formSubtitle:w,states:v,submitButtonText:A="Submit",emailPlaceholder:k="Email *",stateLabel:s="Select A State *",confirmationTitle:l,confirmationMessage:g,confirmationButtonText:f,confirmationButtonUrl:d,recaptchaText:b,backgroundColor:C,overlayColor:W,textColor:c="#111111",buttonColor:S="#000000",buttonTextColor:I="#ffffff",buttonHoverColor:$="#333333",buttonHoverTextColor:Tt="#ffffff",fontFamily:Et,headingFontFamily:kt,waitForAgeGate:Ft,waitForStorageKey:V,waitForStorageValue:N,waitUntilHidden:M,waitUntilHiddenHost:K,container:F})=>{var ct,ut,mt,dt,pt,ft;const q=me({backgroundColor:C,overlayColor:W,textColor:c,buttonColor:S,buttonTextColor:I,fontFamily:Et,headingFontFamily:kt}),rt=(e==null?void 0:e.trim())||((ct=O(F,"hubspot-form-id"))==null?void 0:ct.trim())||"",nt=(t==null?void 0:t.trim())||((ut=O(F,"hubspot-portal-id"))==null?void 0:ut.trim())||"",jt=Se(Ft,F,"wait-for-age-gate"),Rt=(V==null?void 0:V.trim())||((mt=O(F,"wait-for-storage-key"))==null?void 0:mt.trim())||"",Ht=(N==null?void 0:N.trim())||((dt=O(F,"wait-for-storage-value"))==null?void 0:dt.trim())||"",Lt=(M==null?void 0:M.trim())||((pt=O(F,"wait-until-hidden"))==null?void 0:pt.trim())||"",Ot=(K==null?void 0:K.trim())||((ft=O(F,"wait-until-hidden-host"))==null?void 0:ft.trim())||"",{showModal:Wt,markSubmitted:qt,dismiss:G}=pe(rt),Gt=xe({waitForAgeGate:jt,waitForStorageKey:Rt,waitForStorageValue:Ht,waitUntilHidden:Lt,waitUntilHiddenHost:Ot}),_=Wt&&Gt,[it,_t]=h.useState("form"),[st,Bt]=h.useState(""),[J,It]=h.useState(""),[X,zt]=h.useState(!1),[Y,Dt]=h.useState({}),[at,lt]=h.useState(!1),[z,T]=h.useState(""),Pt=we(v),Ut=Ae(b,F),R=(a==null?void 0:a.trim())||"",B=Ee(x),$t=!!R||B.length>0;h.useEffect(()=>{if(!_)return;const y=document.body.style.overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=y}},[_]),h.useEffect(()=>{if(!_)return;const y=H=>{H.key==="Escape"&&G()};return window.addEventListener("keydown",y),()=>window.removeEventListener("keydown",y)},[_,G]);const Vt=async y=>{y.preventDefault();const H=st.trim();if(!He.test(H)){T("Please enter a valid email address.");return}if(!J){T("Please select a state.");return}if(R&&!X){T("Please agree to the privacy terms.");return}if(B.find(L=>L.required&&!Y[Q(L)])){T("Please agree to the required communications terms.");return}T(""),lt(!0);const gt=[{name:o,value:H},{name:r,value:J}];i!=null&&i.trim()&&u!=null&&gt.push({name:i.trim(),value:u});try{Le(nt)||await Fe({portalId:nt,formId:rt,fields:gt,legalConsent:$t?{consentToProcess:!!(R&&X),...R?{text:R}:{},...B.length?{communications:B.map(L=>({subscriptionTypeId:Number(L.subscriptionTypeId),text:L.text,value:!!Y[Q(L)]}))}:{}}:void 0}),qt(),_t("confirmation")}catch{T("Something went wrong. Please try again.")}finally{lt(!1)}},Nt=()=>{if(d){window.location.href=d;return}G()};if(!_)return null;const Mt=it==="form"?"form-popup-form-title":"form-popup-confirmation-title";return n.jsxs("div",{id:"form-popup-overlay",style:q.overlay,role:"dialog","aria-modal":"true","aria-labelledby":Mt,onClick:y=>{y.target===y.currentTarget&&!at&&G()},children:[n.jsx("style",{children:de({buttonHoverColor:$,buttonHoverTextColor:Tt})}),n.jsxs("div",{id:"form-popup-card",style:q.card,role:"document",children:[n.jsx("button",{id:"form-popup-close",type:"button",style:q.closeButton,"aria-label":"Close",onClick:G,children:n.jsx("svg",{width:"10",height:"10",viewBox:"0 0 10 10","aria-hidden":"true",children:n.jsx("path",{d:"M1 1l8 8M9 1L1 9",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})})}),it==="form"?n.jsx(je,{styles:q,formTitle:p,formSubtitle:w,email:st,emailPlaceholder:k,state:J,stateLabel:s,states:Pt,consentToProcessText:R||void 0,consentToProcess:X,communicationConsents:B,communicationValues:Y,submitButtonText:A,recaptchaText:Ut,error:z,submitting:at,onEmailChange:Bt,onStateChange:y=>{It(y),z&&T("")},onConsentToProcessChange:y=>{zt(y),z&&T("")},onCommunicationChange:(y,H)=>{Dt(ht=>({...ht,[y]:H})),z&&T("")},onSubmit:Vt}):n.jsx(Re,{styles:q,confirmationTitle:l,confirmationMessage:g,confirmationButtonText:f,onButtonClick:Nt})]})]})},Oe=se(Ct,{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 At(){typeof customElements>"u"||customElements.get("form-popup")||customElements.define("form-popup",Oe)}At();At();exports.FormPopup=Ct;
+//# sourceMappingURL=form-popup.cjs.js.map