@saasquatch/mint-components 2.0.8-7 → 2.0.9-0

package/dist/esm/{sqm-big-stat_47.entry.js → sqm-big-stat_49.entry.js}

@@ -1,33 +1,32 @@
 import { r as registerInstance, h as h$1, c as Host } from './index-b3a06de8.js';
-import { b as buildFontsCssUrl, i as intl } from './global-58a69018.js';
+import { b as buildFontsCssUrl, i as intl } from './global-5d501632.js';
 import { n as h, f as useEffect, i as d, k as useState, m as useRef, u as useMemo, b as browser, j as useReducer } from './dom-context-hooks.module-63370afd.js';
-import { i as isDemo, _ as _$1, d as dist, J, H, B, $ as $e, w as wn, u as useCallback, L, y as yn, j as jn, q as Ue, r as un, V as Ve, b as setUserIdentity, Q as Qe, k as kn, M as Mn, I as In, S as Sn } from './index.module-c9811a48.js';
+import { i as isDemo, _ as _$1, d as dist, J, H, B, $ as $e, w as wn, u as useCallback, L, y as yn, j as jn, o as Ue, p as un, q as je, r as hn, V as Ve, b as setUserIdentity, Q as Qe, k as kn, M as Mn, I as In, S as Sn } from './index.module-234e8f5e.js';
 import { j as jsonpointer } from './jsonpointer-388a7082.js';
 import { c as cjs } from './cjs-bdfb4486.js';
-import { g as getProps, a as getMissingProps } from './utils-334c1e34.js';
+import { g as getProps, a as getMissingProps, s as sanitizeUrlPath } from './utils-334c1e34.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import './useReferralCodes-c2e809cf.js';
+import './useReferralCodes-75d67509.js';
 import './mixins-f750863a.js';
 import { C as CopyTextView } from './copy-text-view-fac47254.js';
-import { a as useRequestRerender } from './re-render-7e22fb0d.js';
-import { u as useChildElements } from './useChildElements-3d872cef.js';
+import { a as useRequestRerender } from './re-render-b56bc163.js';
+import { u as useChildElements } from './useChildElements-daf489b1.js';
 import './luxon-bbf75a9d.js';
 import './sqm-text-span-view-4c17b8c9.js';
 import { p as pathToRegexp } from './index-ffa26b43.js';
 import { E as EmailRegistrationView } from './email-registration-view-1f587f8b.js';
-import { R as REGISTRATION_FORM_STATE_CONTEXT, u as useRegistrationFormState } from './useRegistrationFormState-24d594ea.js';
-import { u as useInstantAccessRegistration } from './useInstantAccessRegistration-dda1f52b.js';
-import { R as RequiredPropsError, L as LEAD_FORM_STATE_CONTEXT, u as useLeadFormState } from './useLeadFormState-8d4b2620.js';
-import { P as PortalLoginView } from './sqm-portal-login-view-7670cd86.js';
-import { u as usePortalLogin } from './usePortalLogin-f95bbc67.js';
-import { A as AsYouType } from './AsYouType-46f67d0d.js';
-import { i as isEmpty } from './utilities-72c07b09.js';
+import { R as REGISTRATION_FORM_STATE_CONTEXT, a as useRegistrationForm, u as useRegistrationFormState } from './useRegistrationFormState-a9e156e6.js';
+import { u as useInstantAccessRegistration } from './useInstantAccessRegistration-89e7dfc8.js';
+import { R as RequiredPropsError, L as LEAD_FORM_STATE_CONTEXT, u as useLeadFormState } from './useLeadFormState-d2f1c87d.js';
+import { i as isEmpty } from './utilities-e6f8716e.js';
+import { P as PortalRegistrationFormView } from './sqm-portal-registration-form-view-8bdc3804.js';
+import { A as AsYouType, u as usePortalRegistrationForm } from './usePortalRegistrationForm-fb06b600.js';
 import { E as ErrorView } from './ErrorView-bbf0a042.js';
-import { u as useDemoBigStat, W as useBigStat, B as BigStatView, C as CardFeedView, c as CheckboxFieldView, e as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, U as LeadDropdownFieldView, Q as LeadFormView, X as withShadowView, L as LeaderboardView, N as NameFieldsView, f as ChangeMarktingView, P as PortalChangePasswordView, g as PortalFooterView, h as PortalForgotPasswordView, i as PortalFrameView, d as PortalRegisterView, R as ReferralIframeView, j as RewardExchangeView, Y as demoRewardExchange, J as useShareButton, a as ShareButtonView, K as useShareLink, S as StatContainerView, T as TaskCardView } from './ShadowViewAddon-78a1c35c.js';
+import { u as useDemoBigStat, Y as useBigStat, B as BigStatView, C as CardFeedView, d as CheckboxFieldView, f as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, W as LeadDropdownFieldView, V as LeadFormView, Z as withShadowView, L as LeaderboardView, N as NameFieldsView, g as ChangeMarktingView, P as PortalChangePasswordView, h as PortalFooterView, i as PortalForgotPasswordView, j as PortalFrameView, k as PortalLoginView, c as BaseRegistrationFormView, e as PortalRegisterView, R as ReferralIframeView, l as RewardExchangeView, _ as demoRewardExchange, M as useShareButton, a as ShareButtonView, O as useShareLink, S as StatContainerView, T as TaskCardView } from './ShadowViewAddon-49bebd13.js';
 import './sqm-portal-container-view-176e92e3.js';
-import { T as TAX_CONTEXT_NAMESPACE, a as TAX_FORM_CONTEXT_NAMESPACE, U as USER_FORM_CONTEXT_NAMESPACE, C as CURRENCIES_NAMESPACE, b as COUNTRIES_NAMESPACE, S as SORTED_COUNTRIES_NAMESPACE, g as getCountryObj, c as USER_QUERY_NAMESPACE, G as GET_USER$2, d as COUNTRIES_QUERY_NAMESPACE, e as GET_COUNTRIES, h as FINANCE_NETWORK_SETTINGS_NAMESPACE, i as GET_FINANCE_NETWORK_SETTINGS, j as CURRENCIES_QUERY_NAMESPACE, k as GET_CURRENCIES, L as LoadingView } from './data-a581119a.js';
+import { T as TAX_CONTEXT_NAMESPACE, a as TAX_FORM_CONTEXT_NAMESPACE, U as USER_FORM_CONTEXT_NAMESPACE, C as CURRENCIES_NAMESPACE, b as COUNTRIES_NAMESPACE, S as SORTED_COUNTRIES_NAMESPACE, g as getCountryObj, c as USER_QUERY_NAMESPACE, G as GET_USER$2, d as COUNTRIES_QUERY_NAMESPACE, e as GET_COUNTRIES, h as FINANCE_NETWORK_SETTINGS_NAMESPACE, i as GET_FINANCE_NETWORK_SETTINGS, j as CURRENCIES_QUERY_NAMESPACE, k as GET_CURRENCIES, L as LoadingView } from './data-f2f77358.js';
 import { p as parseStates, e as extractProps } from './extractProps-54064fb0.js';
-import { u as usePayoutStatus } from './usePayoutStatus-7404eb9d.js';
+import { u as usePayoutStatus } from './usePayoutStatus-6be47a64.js';
 
 /**
  *
@@ -2939,7 +2938,6 @@ const sheet$2 = createStyleSheet(style$2);
 const styleString$2 = sheet$2.toString();
 function PayoutStatusAlertView(props) {
   const { text, states, data, callbacks } = props;
-  console.log("test 123456");
   function getAlert(status) {
     if (states.error)
       return {
@@ -3173,7 +3171,6 @@ function PayoutStatusAlertView(props) {
     return h$1("sl-skeleton", { class: sheet$2.classes.SkeletonOne });
   }
   const alertDetails = getAlert(states.status);
-  console.log("status is ", states.status, alertDetails);
   if (states.status === "DONE" || !alertDetails) {
     return h$1("div", null);
   }
@@ -3364,16 +3361,10 @@ const PayoutStatusAlert = class {
   }
 };
 function useDemoPayoutStatusAlert(props) {
-  var _a, _b;
   const states = parseStates(props.stateController);
   const formatted = Object.keys(states).reduce((prev, key) => key === "sqm-payout-status-alert"
     ? { ...prev, ...states[key] }
     : { ...prev, [`${key}_stateController`]: states[key] }, {});
-  const status = states.status ? states.status : (_b = (_a = props.demoData) === null || _a === void 0 ? void 0 : _a.states) === null || _b === void 0 ? void 0 : _b.status;
-  console.log("the value of the status variable is", status);
-  console.log("the value of states.status is ", states.status);
-  console.log("the value of states is ", states);
-  console.log("the value of formatted states is ", formatted);
   return cjs({
     states: {
       error: false,
@@ -4032,7 +4023,73 @@ function usePortalFrameDemo(footerContent, headerContent, props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-const PortalLogin = class {
+function usePortalLogin(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+  const [request, { loading, errors, data }] = je();
+  const [loginWithGoogle, { loading: gLoading, errors: gErrors }] = hn();
+  const [error, setError] = useState("");
+  const urlParams = new URLSearchParams(jn.location.search);
+  const nextPageOverride = urlParams.get("nextPage");
+  const googleSubmit = async (e) => {
+    var _a, _b, _c, _d;
+    if (!((_a = e.detail) === null || _a === void 0 ? void 0 : _a.credential))
+      return;
+    const result = await loginWithGoogle({ idToken: e.detail.credential });
+    if (result instanceof Error) {
+      if ((result === null || result === void 0 ? void 0 : result.message) || ((_b = result === null || result === void 0 ? void 0 : result["response"]) === null || _b === void 0 ? void 0 : _b["error"]))
+        if ((_c = result === null || result === void 0 ? void 0 : result["response"]) === null || _c === void 0 ? void 0 : _c["errors"].some((error) => { var _a; return ((_a = error === null || error === void 0 ? void 0 : error["extensions"]) === null || _a === void 0 ? void 0 : _a["message"]) === "Invalid Credentials."; })) {
+          setError(props.googleUserNotRegisteredError);
+        }
+        else {
+          setError(props.networkErrorMessage);
+        }
+      return;
+    }
+    if ((_d = result.authenticateManagedIdentityWithGoogle) === null || _d === void 0 ? void 0 : _d.token) {
+      urlParams.delete("nextPage");
+      const url = sanitizeUrlPath(nextPageOverride || props.nextPage);
+      jn.push(url.href);
+    }
+  };
+  const submit = async (event) => {
+    var _a, _b;
+    setError("");
+    let formData = event.detail.formData;
+    formData === null || formData === void 0 ? void 0 : formData.forEach((value, key) => {
+      jsonpointer.set(formData, key, value);
+    });
+    const variables = { email: formData.email, password: formData.password };
+    const result = await request(variables);
+    if (result instanceof Error) {
+      if ((result === null || result === void 0 ? void 0 : result.message) || ((_a = result === null || result === void 0 ? void 0 : result["response"]) === null || _a === void 0 ? void 0 : _a["error"]))
+        setError(props.networkErrorMessage);
+      return;
+    }
+    if ((_b = result.authenticateManagedIdentityWithEmailAndPassword) === null || _b === void 0 ? void 0 : _b.token) {
+      urlParams.delete("nextPage");
+      const url = sanitizeUrlPath(nextPageOverride || props.nextPage);
+      jn.push(url.href);
+    }
+  };
+  const errorMessage = ((_d = (_c = (_b = (_a = errors === null || errors === void 0 ? void 0 : errors.response) === null || _a === void 0 ? void 0 : _a.errors) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.extensions) === null || _d === void 0 ? void 0 : _d.message) || ((_g = (_f = (_e = errors === null || errors === void 0 ? void 0 : errors.response) === null || _e === void 0 ? void 0 : _e.errors) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.message) ||
+    error;
+  const googleErrorMessage = ((_l = (_k = (_j = (_h = gErrors === null || gErrors === void 0 ? void 0 : gErrors.response) === null || _h === void 0 ? void 0 : _h.errors) === null || _j === void 0 ? void 0 : _j[0]) === null || _k === void 0 ? void 0 : _k.extensions) === null || _l === void 0 ? void 0 : _l.message) || ((_p = (_o = (_m = gErrors === null || gErrors === void 0 ? void 0 : gErrors.response) === null || _m === void 0 ? void 0 : _m.errors) === null || _o === void 0 ? void 0 : _o[0]) === null || _p === void 0 ? void 0 : _p.message) ||
+    error;
+  return {
+    states: {
+      loading: loading || gLoading,
+      error: errorMessage || googleErrorMessage,
+      registerPath: props.registerPath,
+      forgotPasswordPath: props.forgotPasswordPath,
+    },
+    callbacks: {
+      googleSubmit,
+      submit,
+    },
+  };
+}
+
+const PortalGoogleLogin = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ignored = true;
@@ -4081,10 +4138,15 @@ const PortalLogin = class {
      */
     this.pageLabel = "Sign in to your account";
     /**
-     * Displayed when the login fails due to a network error. The participant can try refreshing the page.
      * @uiName Network error message
+     * Displayed when the login fails due to a network error. The participant can try refreshing the page.
      */
     this.networkErrorMessage = "An error occurred while logging you in. Please refresh the page and try again.";
+    /**
+     * @uiName Google account error message
+     * Displayed when user tries to sign in with Google account but has not registered.
+     */
+    this.googleUserNotRegisteredError = "Your Google account has not registered on our platform. Please complete the registration process with your Google account.";
     /**
      * @uiName Register CTA
      */
@@ -4105,6 +4167,473 @@ const PortalLogin = class {
     };
     const sheet = createStyleSheet(styles);
     const styleString = sheet.toString();
+    const content = {
+      forgotPasswordButton: (h$1("slot", { name: "forgotPassword" }, h$1("a", { onClick: () => jn.push(states.forgotPasswordPath) }, this.forgotPasswordLabel))),
+      googleButton: (h$1("sqm-google-sign-in", { onInitComplete: callbacks.googleSubmit })),
+      secondaryButton: (h$1("slot", { name: "secondaryButton" }, h$1("style", null, styleString), h$1("span", null, this.registerCTA, " ", h$1("sl-button", { size: "large", type: "text", disabled: states.loading, onClick: () => jn.push(states.registerPath), className: sheet.classes.RegisterButton }, this.registerLabel)))),
+      emailLabel: this.emailLabel,
+      passwordLabel: this.passwordLabel,
+      submitLabel: this.submitLabel,
+      pageLabel: this.pageLabel,
+    };
+    return (h$1(PortalLoginView, { states: states, callbacks: callbacks, content: content }));
+  }
+};
+function useLoginDemo(props) {
+  var _a, _b;
+  return cjs({
+    states: {
+      error: ((_b = (_a = props.demoData) === null || _a === void 0 ? void 0 : _a.states) === null || _b === void 0 ? void 0 : _b.error) || "",
+      loading: false,
+      forgotPasswordPath: "/forgotPassword",
+      registerPath: "/register",
+      showLoginForm: "manual",
+    },
+    callbacks: {
+      googleSubmit: async () => {
+        console.log("google submit");
+      },
+      submit: async (_event) => {
+        console.log("submit");
+      },
+    },
+    content: {
+      googleButton: null,
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
+class InvalidTokenError extends Error {
+}
+InvalidTokenError.prototype.name = "InvalidTokenError";
+function b64DecodeUnicode(str) {
+    return decodeURIComponent(atob(str).replace(/(.)/g, (m, p) => {
+        let code = p.charCodeAt(0).toString(16).toUpperCase();
+        if (code.length < 2) {
+            code = "0" + code;
+        }
+        return "%" + code;
+    }));
+}
+function base64UrlDecode(str) {
+    let output = str.replace(/-/g, "+").replace(/_/g, "/");
+    switch (output.length % 4) {
+        case 0:
+            break;
+        case 2:
+            output += "==";
+            break;
+        case 3:
+            output += "=";
+            break;
+        default:
+            throw new Error("base64 string is not of the correct length");
+    }
+    try {
+        return b64DecodeUnicode(output);
+    }
+    catch (err) {
+        return atob(output);
+    }
+}
+function jwtDecode(token, options) {
+    if (typeof token !== "string") {
+        throw new InvalidTokenError("Invalid token specified: must be a string");
+    }
+    options || (options = {});
+    const pos = options.header === true ? 0 : 1;
+    const part = token.split(".")[pos];
+    if (typeof part !== "string") {
+        throw new InvalidTokenError(`Invalid token specified: missing part #${pos + 1}`);
+    }
+    let decoded;
+    try {
+        decoded = base64UrlDecode(part);
+    }
+    catch (e) {
+        throw new InvalidTokenError(`Invalid token specified: invalid base64 for part #${pos + 1} (${e.message})`);
+    }
+    try {
+        return JSON.parse(decoded);
+    }
+    catch (e) {
+        throw new InvalidTokenError(`Invalid token specified: invalid json for part #${pos + 1} (${e.message})`);
+    }
+}
+
+function usePortalGoogleRegistrationForm(props) {
+  const [registrationFormState, setRegistrationFormState] = useRegistrationForm();
+  const [showRegistrationForm, setShowRegistrationForm] = useState({
+    mode: "base",
+  });
+  const handleEmailSubmit = async (event) => {
+    const formControls = event.target.getFormControls();
+    let formData = {};
+    let validationErrors = {};
+    formControls.forEach((control) => {
+      if (!control.name)
+        return;
+      const key = control.name;
+      const value = control.value;
+      jsonpointer.set(formData, key, value);
+      if (control.required && !value) {
+        jsonpointer.set(validationErrors, key, props.requiredFieldErrorMessage);
+      }
+      if (typeof control.validationError === "function") {
+        const validate = control.validationError;
+        const validationError = validate({
+          control,
+          key,
+          value,
+        });
+        if (validationError)
+          jsonpointer.set(validationErrors, key, validationError);
+      }
+    });
+    if (Object.keys(validationErrors).length) {
+      // early return for validation errors
+      setRegistrationFormState({
+        ...registrationFormState,
+        loading: false,
+        error: "",
+        validationErrors,
+      });
+      return;
+    }
+    setRegistrationFormState({
+      ...registrationFormState,
+      validationErrors: {},
+      initialData: {
+        ...registrationFormState === null || registrationFormState === void 0 ? void 0 : registrationFormState.initialData,
+        ...formData,
+      },
+    });
+    setShowRegistrationForm({ mode: "manual" });
+  };
+  const handleGoogleInit = (event) => {
+    var _a;
+    if (!((_a = event.detail) === null || _a === void 0 ? void 0 : _a.credential))
+      return;
+    try {
+      const res = jwtDecode(event.detail.credential);
+      setRegistrationFormState({
+        ...registrationFormState,
+        _googleOAuthIdToken: event.detail.credential,
+        initialData: {
+          email: res.email,
+          firstName: res.given_name,
+          lastName: res.family_name,
+        },
+      });
+      setShowRegistrationForm({ mode: "google" });
+    }
+    catch (e) {
+      console.error("Failed to decode Google Sign In credential JWT:", e);
+    }
+  };
+  return {
+    registrationFormState,
+    showRegistrationForm,
+    validationErrors: registrationFormState.validationErrors,
+    handleGoogleInit,
+    handleEmailSubmit,
+  };
+}
+
+const PortalGoogleRegistrationForm = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ignored = true;
+    /**
+     * Redirect participants to this page after they successfully register.
+     *
+     * @uiName Registration redirect
+     * @uiWidget pageSelect
+     */
+    this.nextPage = "/";
+    /**
+     * Redirect participants to this page from their verification email
+     *
+     * @uiName Email verification redirect
+     * @uiWidget pageSelect
+     */
+    this.redirectPath = "/verifyEmail";
+    /**
+     * @uiName Email field label
+     */
+    this.emailLabel = "Email";
+    /**
+     * @uiName Password field label
+     */
+    this.passwordLabel = "Password";
+    /**
+     * @uiName Submit button text
+     */
+    this.submitLabel = "Register";
+    /**
+     * @uiName Login button text
+     */
+    this.loginLabel = "Sign in";
+    /**
+     * @uiName Confirm password field label
+     */
+    this.confirmPasswordLabel = "Confirm Password";
+    /**
+     * @uiName Show confirm password field
+     */
+    this.confirmPassword = false;
+    /**
+     * @uiName Disable password validation
+     */
+    this.disablePasswordValidation = false;
+    /**
+     * Hides the email and password fields. Note: If you hide default inputs, you must add additional input fields. They must have the input name attributes "email" and "password" for this form to succeed.
+     *
+     * @uiName Hide default fields
+     */
+    this.hideInputs = false;
+    /**
+     * @uiName Header text
+     */
+    this.pageLabel = "Register";
+    /**
+     * Redirect participants to this page after clicking the login button.
+     *
+     * @uiName Login redirect
+     * @uiWidget pageSelect
+     */
+    this.loginPath = "/login";
+    /**
+     * Login Call-to-action
+     *
+     * @uiName Login CTA
+     */
+    this.loginCTA = "Already have an account?";
+    /**
+     * The message to be displayed when a required field is not filled.
+     *
+     * @uiName Required field message
+     * @uiWidget textArea
+     */
+    this.requiredFieldErrorMessage = "Cannot be empty";
+    /**
+     * The message to be displayed when a the form submission fails unexpectedly.
+     *
+     * @uiName Network error message
+     * @uiWidget textArea
+     */
+    this.networkErrorMessage = "Network request failed.";
+    /**
+     * The message to be displayed when password inputs do not match.
+     *
+     * @uiName Password mismatch message
+     * @uiWidget textArea
+     */
+    this.passwordMismatchErrorMessage = "Passwords do not match.";
+    /**
+     * The message to be displayed when the email used is invalid or blocked.
+     *
+     * @uiName Invalid email message
+     * @uiWidget textArea
+     */
+    this.invalidEmailErrorMessage = "Must be a valid email address";
+    /**
+     * The message to be displayed when the registration form is disabled.
+     *
+     * @uiName Form disabled message
+     * @uiWidget textArea
+     */
+    this.formDisabledErrorMessage = "The registration form is currently disabled.";
+    /**
+     * @uiName Password requirement met
+     */
+    this.meetsRequirementsText = "Password has met all requirements";
+    /**
+     * @uiName Password requirement failed
+     */
+    this.doesNotMeetRequirementsText = "Password must meet the following requirements:";
+    /**
+     * @uiName Minimum length text
+     */
+    this.minErrorText = "be a minimum of 8 characters";
+    /**
+     * @uiName Missing uppercase text
+     */
+    this.uppercaseErrorText = "contain at least 1 uppercase character";
+    /**
+     * @uiName Missing lowercase text
+     */
+    this.lowercaseErrorText = "contain at least 1 lowercase character";
+    /**
+     * @uiName Missing number or symbol text
+     */
+    this.hasErrorText = "contain at least 1 number or symbol";
+    /**
+     * Can be "signup_with", "signin_with", "continue_with", or "signin"
+     *
+     * @uiName Google button text
+     */
+    this.googleButtonText = "signup_with";
+    h(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const { states, callbacks, refs } = isDemo()
+      ? useRegisterDemo$1(this)
+      : usePortalRegistrationForm(this);
+    const styles = {
+      LoginButton: {
+        "&::part(label)": {
+          padding: "0",
+        },
+      },
+    };
+    const sheet = createStyleSheet(styles);
+    const styleString = sheet.toString();
+    const { handleGoogleInit, handleEmailSubmit, showRegistrationForm, validationErrors, } = isDemo() ? useGoogleDemo(this) : usePortalGoogleRegistrationForm(this);
+    const content = {
+      formData: h$1("slot", { name: "formData" }),
+      googleButton: (h$1("sqm-google-sign-in", { text: this.googleButtonText, onInitComplete: handleGoogleInit })),
+      secondaryButton: (h$1("slot", { name: "secondaryButton" }, h$1("style", null, styleString), h$1("span", null, this.loginCTA, " ", h$1("sl-button", { size: "large", type: "text", disabled: states.loading, onClick: () => jn.push(states.loginPath), className: sheet.classes.LoginButton }, this.loginLabel), " "))),
+      terms: h$1("slot", { name: "terms" }),
+      emailLabel: this.emailLabel,
+      passwordLabel: this.passwordLabel,
+      submitLabel: this.submitLabel,
+      pageLabel: this.pageLabel,
+      confirmPasswordLabel: this.confirmPasswordLabel,
+      networkErrorMessage: this.networkErrorMessage,
+      passwordMismatchErrorMessage: this.passwordMismatchErrorMessage,
+      invalidEmailErrorMessage: this.invalidEmailErrorMessage,
+      formDisabledErrorMessage: this.formDisabledErrorMessage,
+      requiredFieldErrorMessage: this.requiredFieldErrorMessage,
+      meetsRequirementsText: this.meetsRequirementsText,
+      doesNotMeetRequirementsText: this.doesNotMeetRequirementsText,
+      minErrorText: this.minErrorText,
+      uppercaseErrorText: this.uppercaseErrorText,
+      lowercaseErrorText: this.lowercaseErrorText,
+      hasErrorText: this.hasErrorText,
+    };
+    if (showRegistrationForm.mode === "base") {
+      return (h$1(BaseRegistrationFormView, { states: {
+          validationErrors,
+        }, callbacks: { handleEmailSubmit }, content: content }));
+    }
+    return (h$1(PortalRegistrationFormView, { states: {
+        ...states,
+        emailDisabled: true,
+        hidePasswords: showRegistrationForm.mode === "google",
+      }, callbacks: callbacks, content: content, refs: refs }));
+  }
+};
+function useRegisterDemo$1(props) {
+  return cjs({
+    states: {
+      error: "",
+      loading: false,
+      confirmPassword: props.confirmPassword,
+      hideInputs: props.hideInputs || false,
+      customPasswordField: false,
+      loginPath: "/login",
+    },
+    callbacks: {
+      handleGoogleInit: () => { },
+      setShowRegistrationForm: () => { },
+      submit: async (_event) => {
+        console.log("submit");
+      },
+      inputFunction: () => { },
+    },
+    content: {
+      pageLabel: "Register",
+      formData: null,
+      passwordField: null,
+    },
+    refs: {
+      formRef: {},
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+function useGoogleDemo(props) {
+  const [showRegistrationForm, setShowRegistrationForm] = useState({
+    mode: "base",
+  });
+  return cjs({
+    validationErrors: {},
+    handleEmailSubmit: () => setShowRegistrationForm({ mode: "manual" }),
+    showRegistrationForm,
+    handleGoogleInit: () => setShowRegistrationForm({ mode: "google" }),
+  }, props.demoGoogleData || {}, { arrayMerge: (_, a) => a });
+}
+
+const PortalLogin = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ignored = true;
+    /**
+     * Redirect participants to this page after they successfully login.
+     *
+     * @uiName Login redirect
+     * @uiWidget pageSelect
+     */
+    this.nextPage = "/";
+    /**
+     * @uiName Email field label
+     */
+    this.emailLabel = "Email";
+    /**
+     * @uiName Password field label
+     */
+    this.passwordLabel = "Password";
+    /**
+     * @uiName Submit button text
+     */
+    this.submitLabel = "Sign In";
+    /**
+     * Redirect participants to this page to reset their password
+     * @uiName Forgot password redirect
+     * @uiWidget pageSelect
+     */
+    this.forgotPasswordPath = "/forgotPassword";
+    /**
+     * @uiName Forgot password text
+     */
+    this.forgotPasswordLabel = "Forgot Password?";
+    /**
+     * @uiName Register button text
+     */
+    this.registerLabel = "Register";
+    /**
+     * Redirect participants to this page to start registration.
+     * @uiName Register button redirect
+     * @uiWidget pageSelect
+     */
+    this.registerPath = "/register";
+    /**
+     * @uiName Heading label
+     * @uiWidget textArea
+     */
+    this.pageLabel = "Sign in to your account";
+    /**
+     * Displayed when the login fails due to a network error. The participant can try refreshing the page.
+     * @uiName Network error message
+     */
+    this.networkErrorMessage = "An error occurred while logging you in. Please refresh the page and try again.";
+    h(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const { states, callbacks } = isDemo()
+      ? useLoginDemo$1(this)
+      : usePortalLogin(this);
+    const styles = {
+      RegisterButton: {
+        "&::part(label)": {
+          padding: "0",
+        },
+      },
+    };
+    const sheet = createStyleSheet(styles);
+    const styleString = sheet.toString();
     const content = {
       forgotPasswordButton: (h$1("slot", { name: "forgotPassword" }, h$1("a", { onClick: () => jn.push(states.forgotPasswordPath) }, this.forgotPasswordLabel))),
       googleButton: null,
@@ -4117,7 +4646,7 @@ const PortalLogin = class {
     return (h$1(PortalLoginView, { states: states, callbacks: callbacks, content: content }));
   }
 };
-function useLoginDemo(props) {
+function useLoginDemo$1(props) {
   return cjs({
     states: {
       error: "",
@@ -4387,7 +4916,7 @@ const PortalRegister = class {
   disconnectedCallback() { }
   render() {
     const { states, callbacks, refs } = isDemo()
-      ? useRegisterDemo$1(this)
+      ? useRegisterDemo$2(this)
       : usePortalRegister(this);
     const content = {
       formData: h$1("slot", { name: "formData" }),
@@ -4410,7 +4939,7 @@ const PortalRegister = class {
     return (h$1(PortalRegisterView, { states: states, callbacks: callbacks, content: content, refs: refs }));
   }
 };
-function useRegisterDemo$1(props) {
+function useRegisterDemo$2(props) {
   return cjs({
     states: {
       error: "",
@@ -8086,4 +8615,4 @@ function useUserNameDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-export { BigStat as sqm_big_stat, BrandComponent as sqm_brand, SqmBrandSelector as sqm_brand_selector, CardFeed as sqm_card_feed, CheckboxField as sqm_checkbox_field, CouponCode as sqm_coupon_code, DividedLayout as sqm_divided_layout, DropdownField as sqm_dropdown_field, EditProfile as sqm_edit_profile, Hero as sqm_hero, HeroImage as sqm_hero_image, SqmHookStoryContainer as sqm_hook_story_container, Image as sqm_image, InputField as sqm_input_field, LeadDropdownField as sqm_lead_dropdown_field, LeadForm as sqm_lead_form, Leaderboard as sqm_leaderboard, LinkButton as sqm_link_button, MarketingEmailsCheckbox as sqm_marketing_emails_checkbox, NameFields as sqm_name_fields, NavigationMenu as sqm_navigation_menu, PayoutButtonScroll as sqm_payout_button_scroll, PayoutStatusAlert as sqm_payout_status_alert, PortalChangeMarketing as sqm_portal_change_marketing, PortalChangePassword as sqm_portal_change_password, PortalFooter as sqm_portal_footer, PortalForgotPassword as sqm_portal_forgot_password, PortalFrame as sqm_portal_frame, PortalLogin as sqm_portal_login, PortalRegister as sqm_portal_register, ProgramExplainer as sqm_program_explainer, ProgramExplainerStep as sqm_program_explainer_step, ProgramMenu as sqm_program_menu, ReferralCard as sqm_referral_card, SqmReferralIframe as sqm_referral_iframe, ReferredRegistration as sqm_referred_registration, SqmRewardExchangeList as sqm_reward_exchange_list, SqmRouter as sqm_router, ShareButton as sqm_share_button, ShareCode as sqm_share_code, ShareLink as sqm_share_link, StatContainer as sqm_stat_container, TaskCard as sqm_task_card, TaxAndCashMonolith as sqm_tax_and_cash, Timeline as sqm_timeline, TimelineReward as sqm_timeline_entry, UserName as sqm_user_name };
+export { BigStat as sqm_big_stat, BrandComponent as sqm_brand, SqmBrandSelector as sqm_brand_selector, CardFeed as sqm_card_feed, CheckboxField as sqm_checkbox_field, CouponCode as sqm_coupon_code, DividedLayout as sqm_divided_layout, DropdownField as sqm_dropdown_field, EditProfile as sqm_edit_profile, Hero as sqm_hero, HeroImage as sqm_hero_image, SqmHookStoryContainer as sqm_hook_story_container, Image as sqm_image, InputField as sqm_input_field, LeadDropdownField as sqm_lead_dropdown_field, LeadForm as sqm_lead_form, Leaderboard as sqm_leaderboard, LinkButton as sqm_link_button, MarketingEmailsCheckbox as sqm_marketing_emails_checkbox, NameFields as sqm_name_fields, NavigationMenu as sqm_navigation_menu, PayoutButtonScroll as sqm_payout_button_scroll, PayoutStatusAlert as sqm_payout_status_alert, PortalChangeMarketing as sqm_portal_change_marketing, PortalChangePassword as sqm_portal_change_password, PortalFooter as sqm_portal_footer, PortalForgotPassword as sqm_portal_forgot_password, PortalFrame as sqm_portal_frame, PortalGoogleLogin as sqm_portal_google_login, PortalGoogleRegistrationForm as sqm_portal_google_registration_form, PortalLogin as sqm_portal_login, PortalRegister as sqm_portal_register, ProgramExplainer as sqm_program_explainer, ProgramExplainerStep as sqm_program_explainer_step, ProgramMenu as sqm_program_menu, ReferralCard as sqm_referral_card, SqmReferralIframe as sqm_referral_iframe, ReferredRegistration as sqm_referred_registration, SqmRewardExchangeList as sqm_reward_exchange_list, SqmRouter as sqm_router, ShareButton as sqm_share_button, ShareCode as sqm_share_code, ShareLink as sqm_share_link, StatContainer as sqm_stat_container, TaskCard as sqm_task_card, TaxAndCashMonolith as sqm_tax_and_cash, Timeline as sqm_timeline, TimelineReward as sqm_timeline_entry, UserName as sqm_user_name };