@saasquatch/mint-components 2.1.1-1 → 2.1.1

package/dist/cjs/{sqm-big-stat_45.cjs.entry.js → sqm-big-stat_49.cjs.entry.js}

@@ -2,35 +2,35 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8277cbb3.js');
-const global = require('./global-0f8b1267.js');
-const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
-const index_module = require('./index.module-42d413d9.js');
+const index = require('./index-a43a63b4.js');
+const global = require('./global-a0e651c9.js');
+const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
+const index_module = require('./index.module-56edbb0b.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
 const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');
 const JSS = require('./JSS-8503a151.js');
-require('./useReferralCodes-89c2b972.js');
+require('./useReferralCodes-7a49a3d7.js');
 require('./mixins-4761d472.js');
-const copyTextView = require('./copy-text-view-bb2c0ea7.js');
-require('./sqm-text-span-view-f274fdf2.js');
-const usePortalRegistrationForm = require('./usePortalRegistrationForm-31822dc4.js');
-const useRegistrationFormState = require('./useRegistrationFormState-a223f597.js');
-const sqmPortalRegistrationFormView = require('./sqm-portal-registration-form-view-020f661c.js');
-const reRender = require('./re-render-69bde9ee.js');
-const useChildElements = require('./useChildElements-89bc50a9.js');
-require('./luxon-c1ad356a.js');
+const copyTextView = require('./copy-text-view-322436c2.js');
+const reRender = require('./re-render-283966e8.js');
+const useChildElements = require('./useChildElements-8e4e37cc.js');
+require('./luxon-949beaf2.js');
+require('./sqm-text-span-view-7a61ae4c.js');
 const index$1 = require('./index-8c6255f5.js');
-const emailRegistrationView = require('./email-registration-view-306c8878.js');
-const useInstantAccessRegistration = require('./useInstantAccessRegistration-651aa95b.js');
-const useLeadFormState = require('./useLeadFormState-76d3b511.js');
-const utilities = require('./utilities-096934ea.js');
-const ErrorView = require('./ErrorView-ee7b0f36.js');
-const ShadowViewAddon = require('./ShadowViewAddon-41b86f34.js');
-require('./sqm-portal-container-view-70a47420.js');
-const data = require('./data-e83f8a41.js');
+const emailRegistrationView = require('./email-registration-view-ace50780.js');
+const useRegistrationFormState = require('./useRegistrationFormState-967f00f3.js');
+const useInstantAccessRegistration = require('./useInstantAccessRegistration-79567a01.js');
+const useLeadFormState = require('./useLeadFormState-62bf856f.js');
+const utilities = require('./utilities-84ae62cd.js');
+const sqmPortalRegistrationFormView = require('./sqm-portal-registration-form-view-5a96c2f5.js');
+const usePortalRegistrationForm = require('./usePortalRegistrationForm-ce49f0a0.js');
+const ErrorView = require('./ErrorView-3f91e5ab.js');
+const ShadowViewAddon = require('./ShadowViewAddon-fcf5ba5c.js');
+require('./sqm-portal-container-view-07e4343f.js');
+const data = require('./data-415c191f.js');
 const extractProps = require('./extractProps-e9c55ba8.js');
-const usePayoutStatus = require('./usePayoutStatus-da7c44b3.js');
+const usePayoutStatus = require('./usePayoutStatus-8a926978.js');
 
 /**
  *
@@ -56,10 +56,6 @@ const Netflix = {
     borderThickness: 1,
   },
   color: {
-    loadingSkeleton: {
-      background: "#272727",
-      animationBackground: "#E50914",
-    },
     textColorShades: {
       mainText: "white",
       subduedText: "#B3B3B3",
@@ -151,10 +147,6 @@ const Amazon = {
   },
   color: {
     backgroundColor: "#ffffff",
-    loadingSkeleton: {
-      background: "hsl(240 4.8% 95.9%)",
-      animationBackground: "#FF9900",
-    },
     textColorShades: {
       mainText: "#2f2f2f",
       subduedText: "#565959",
@@ -243,10 +235,6 @@ const Spotify = {
     borderThickness: 1,
   },
   color: {
-    loadingSkeleton: {
-      background: "#282928",
-      animationBackground: "#1ed760",
-    },
     textColorShades: {
       mainText: "white",
       subduedText: "white",
@@ -3080,8 +3068,8 @@ function PayoutStatusAlertView(props) {
             supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
           button: (index.h("div", { class: sheet$2.classes.ButtonContainer },
-            index.h("sl-button", { disabled: states.loading, type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton),
-            index.h("sl-button", { disabled: states.loading, type: "secondary", exportparts: "base: secondarybutton-base", onClick: callbacks.onNewFormClick }, text.newFormButton))),
+            index.h("sl-button", { disabled: states.loading, type: "primary", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton),
+            index.h("sl-button", { disabled: states.loading, type: "default", onClick: callbacks.onNewFormClick }, text.newFormButton))),
           alertType: "warning",
           icon: "exclamation-triangle",
         };
@@ -3095,8 +3083,8 @@ function PayoutStatusAlertView(props) {
             supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
           button: (index.h("div", { class: sheet$2.classes.ButtonContainer },
-            index.h("sl-button", { disabled: states.loading, type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton),
-            index.h("sl-button", { disabled: states.loading, type: "secondary", exportparts: "base: secondarybutton-base", onClick: callbacks.onNewFormClick }, text.newFormButton))),
+            index.h("sl-button", { disabled: states.loading, type: "primary", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton),
+            index.h("sl-button", { disabled: states.loading, type: "default", onClick: callbacks.onNewFormClick }, text.newFormButton))),
           alertType: "warning",
           icon: "exclamation-triangle",
         };
@@ -3110,8 +3098,8 @@ function PayoutStatusAlertView(props) {
             supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
           button: (index.h("div", { class: sheet$2.classes.ButtonContainer },
-            index.h("sl-button", { disabled: states.loading, type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton),
-            index.h("sl-button", { disabled: states.loading, type: "secondary", exportparts: "base: secondarybutton-base", onClick: callbacks.onNewFormClick }, text.newFormButton))),
+            index.h("sl-button", { disabled: states.loading, type: "primary", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton),
+            index.h("sl-button", { disabled: states.loading, type: "default", onClick: callbacks.onNewFormClick }, text.newFormButton))),
           alertType: "warning",
           icon: "exclamation-triangle",
         };
@@ -3125,7 +3113,7 @@ function PayoutStatusAlertView(props) {
             supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
           button: (index.h("div", { class: sheet$2.classes.ButtonContainer },
-            index.h("sl-button", { disabled: states.loading, type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton))),
+            index.h("sl-button", { disabled: states.loading, type: "primary", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton))),
           alertType: "warning",
           icon: "exclamation-triangle",
         };
@@ -3139,7 +3127,7 @@ function PayoutStatusAlertView(props) {
             supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
           button: (index.h("div", { class: sheet$2.classes.ButtonContainer },
-            index.h("sl-button", { disabled: states.loading, type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton))),
+            index.h("sl-button", { disabled: states.loading, type: "primary", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton))),
           alertType: "error",
           icon: "exclamation-triangle",
         };
@@ -3164,9 +3152,9 @@ function PayoutStatusAlertView(props) {
       case "OVER_W9_THRESHOLD":
         if (states.enforceUsTaxComplianceOption === "CASH_ONLY")
           return;
-        return data.type === "SquatchJS2" ? (index.h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.w9RequiredButtonText, "scroll-animation": "smooth" })) : data.type === "SquatchPortal" ? (index.h("sl-button", { type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onTermsClick }, text.w9RequiredButtonText)) : (
+        return data.type === "SquatchJS2" ? (index.h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.w9RequiredButtonText, "scroll-animation": "smooth" })) : data.type === "SquatchPortal" ? (index.h("sl-button", { type: "default", onClick: callbacks.onTermsClick }, text.w9RequiredButtonText)) : (
         // Demo case
-        index.h("sl-button", { type: "primary", exportparts: "base: primarybutton-base" }, text.w9RequiredButtonText));
+        index.h("sl-button", { type: "default" }, text.w9RequiredButtonText));
       case "INFORMATION_REQUIRED":
         return data.type === "SquatchJS2" ? (index.h("div", { style: { paddingTop: "10px" } },
           index.h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.informationRequiredButtonText, "scroll-animation": "smooth" }))) : data.type === "SquatchPortal" ? (index.h("div", { style: { paddingTop: "10px" } },
@@ -3183,6 +3171,9 @@ function PayoutStatusAlertView(props) {
         return;
     }
   }
+  if (states.loading) {
+    return index.h("sl-skeleton", { class: sheet$2.classes.SkeletonOne });
+  }
   const alertDetails = getAlert(states.status);
   if (states.status === "DONE" || !alertDetails) {
     return index.h("div", null);
@@ -3190,7 +3181,7 @@ function PayoutStatusAlertView(props) {
   return (index.h("div", { part: "sqm-base" },
     index.h("style", { type: "text/css" }, styleString$2),
     index.h("style", { type: "text/css" }, vanillaStyle$1),
-    index.h("sqm-form-message", { loading: states.loading, type: alertDetails.alertType },
+    index.h("sqm-form-message", { type: alertDetails.alertType },
       index.h("p", { part: "alert-title" }, alertDetails.header),
       index.h("p", { part: "alert-description" }, alertDetails.description),
       getButton(states.status))));
@@ -3821,6 +3812,147 @@ const PortalFooter = class {
   static get assetsDirs() { return ["../../assets"]; }
 };
 
+function usePortalForgotPassword(props) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const [success, setSuccess] = domContextHooks_module.useState(false);
+  const [error, setError] = domContextHooks_module.useState("");
+  const [request, { loading, data, errors }] = index_module.un();
+  const urlParams = new URLSearchParams(index_module.jn.location.search);
+  const nextPage = urlParams.get("nextPage");
+  const submit = async (event) => {
+    var _a;
+    setError("");
+    setSuccess(false);
+    let formData = event.detail.formData;
+    formData === null || formData === void 0 ? void 0 : formData.forEach((value, key) => {
+      jsonpointer.jsonpointer.set(formData, key, value);
+    });
+    const urlParams = nextPage ? { nextPage } : null;
+    const redirectPath = props.redirectPath;
+    const variables = { email: formData.email, urlParams, redirectPath };
+    const result = await request(variables);
+    if (result instanceof Error) {
+      if (result.message)
+        setError(props.networkErrorMessage);
+      return;
+    }
+    if ((_a = result.requestManagedIdentityPasswordResetEmail) === null || _a === void 0 ? void 0 : _a.success) {
+      setSuccess(true);
+    }
+  };
+  return {
+    states: {
+      loading,
+      error: ((_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,
+      success,
+      loginPath: props.loginPath,
+      headerText: props.headerText,
+      loginText: props.loginText,
+    },
+    callbacks: {
+      submit,
+    },
+  };
+}
+
+const PortalForgotPassword = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ignored = true;
+    /**
+     * Redirect participants to this page after they verify their email.
+     *
+     * @uiName Email redirect
+     * @uiWidget pageSelect
+     */
+    this.redirectPath = "/resetPassword";
+    /**
+     * @uiName Email field label
+     */
+    this.emailLabel = "Email";
+    /**
+     * @uiName Password reset button text
+     */
+    this.submitLabel = "Request Password Reset";
+    /**
+     * @uiName Login redirect path
+     * @uiWidget pageSelect
+     */
+    this.loginPath = "/login";
+    /**
+     * @uiName Header text
+     * @uiWidget textArea
+     */
+    this.headerText = "Enter your email below to receive a password reset link.";
+    /**
+     * @uiName Sign in link text
+     */
+    this.loginText = "Sign In";
+    /**
+     * Displayed when the forgot password action fails due to a network error. The participant can try refreshing the page.
+     * @uiName Network error message
+     */
+    this.networkErrorMessage = "An error occurred while loading this page. Please refresh the page.";
+    /**
+     * @uiName Email verification sent text
+     */
+    this.successAlertText = "If an account with that email exists, a password reset email will be sent.";
+    /**
+     * @uiName Background color
+     * @uiWidget color
+     */
+    this.backgroundColor = "var(--sqm-portal-background, #ffffff)";
+    /**
+     * @uiName Border radius
+     * @uiWidget number
+     */
+    this.borderRadius = "var(--sqm-border-radius-normal, 8px)";
+    /**
+     * @uiName Border style
+     * @uiWidget textArea
+     */
+    this.border = "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color, #eaeaea)";
+    domContextHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const { states, callbacks } = index_module.isDemo()
+      ? usePortalForgotPasswordDemo(this)
+      : usePortalForgotPassword(this);
+    const content = {
+      messageSlot: index.h("slot", { name: "messageSlot" }, this.headerText),
+      emailLabel: this.emailLabel,
+      submitLabel: this.submitLabel,
+      successAlertText: this.successAlertText,
+      loginText: this.loginText,
+      backgroundColor: this.backgroundColor,
+      borderRadius: this.borderRadius,
+      border: this.border,
+    };
+    return (index.h(ShadowViewAddon.PortalForgotPasswordView, { states: states, callbacks: callbacks, content: content }));
+  }
+};
+function usePortalForgotPasswordDemo(props) {
+  return cjs.cjs({
+    states: { error: "", loading: false, success: false },
+    callbacks: {
+      submit: async (_event) => { },
+    },
+    content: {
+      secondaryButton: (index.h("sl-button", { type: "secondary", exportparts: "base: secondarybutton-base", disabled: false, onClick: () => index_module.jn.push(props.loginPath) }, props.loginText)),
+      messageSlot: index.h("span", null, props.headerText),
+      emailLabel: props.emailLabel,
+      submitLabel: props.submitLabel,
+      successAlertText: props.successAlertText,
+      loginText: props.loginText,
+      backgroundColor: props.backgroundColor,
+      borderRadius: props.borderRadius,
+      border: props.border,
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
 function usePortalFrame(footerContent, headerContent, props) {
   const [, rerender] = index_module.yn();
   return {
@@ -3895,6 +4027,186 @@ function usePortalFrameDemo(footerContent, headerContent, props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
+function usePortalLogin(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+  const [request, { loading, errors, data }] = index_module.je();
+  const [loginWithGoogle, { loading: gLoading, errors: gErrors }] = index_module.hn();
+  const [error, setError] = domContextHooks_module.useState("");
+  const urlParams = new URLSearchParams(index_module.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 = utils.sanitizeUrlPath(nextPageOverride || props.nextPage);
+      index_module.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.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 = utils.sanitizeUrlPath(nextPageOverride || props.nextPage);
+      index_module.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) {
+    index.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";
+    /**
+     * @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
+     */
+    this.registerCTA = "Don't have an account?";
+    domContextHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const { states, callbacks } = index_module.isDemo()
+      ? useLoginDemo(this)
+      : usePortalLogin(this);
+    const styles = {
+      RegisterButton: {
+        "&::part(label)": {
+          padding: "0",
+        },
+      },
+    };
+    const sheet = JSS.createStyleSheet(styles);
+    const styleString = sheet.toString();
+    const content = {
+      forgotPasswordButton: (index.h("slot", { name: "forgotPassword" }, index.h("a", { onClick: () => index_module.jn.push(states.forgotPasswordPath) }, this.forgotPasswordLabel))),
+      googleButton: (index.h("sqm-google-sign-in", { onInitComplete: callbacks.googleSubmit })),
+      secondaryButton: (index.h("slot", { name: "secondaryButton" }, index.h("style", null, styleString), index.h("span", null, this.registerCTA, " ", index.h("sl-button", { size: "large", type: "text", disabled: states.loading, onClick: () => index_module.jn.push(states.registerPath), className: sheet.classes.RegisterButton }, this.registerLabel)))),
+      emailLabel: this.emailLabel,
+      passwordLabel: this.passwordLabel,
+      submitLabel: this.submitLabel,
+      pageLabel: this.pageLabel,
+    };
+    return (index.h(ShadowViewAddon.PortalLoginView, { states: states, callbacks: callbacks, content: content }));
+  }
+};
+function useLoginDemo(props) {
+  var _a, _b;
+  return cjs.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";
@@ -4257,6 +4569,403 @@ function useGoogleDemo(props) {
   }, props.demoGoogleData || {}, { arrayMerge: (_, a) => a });
 }
 
+const PortalLogin = class {
+  constructor(hostRef) {
+    index.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.";
+    domContextHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const { states, callbacks } = index_module.isDemo()
+      ? useLoginDemo$1(this)
+      : usePortalLogin(this);
+    const styles = {
+      RegisterButton: {
+        "&::part(label)": {
+          padding: "0",
+        },
+      },
+    };
+    const sheet = JSS.createStyleSheet(styles);
+    const styleString = sheet.toString();
+    const content = {
+      forgotPasswordButton: (index.h("slot", { name: "forgotPassword" }, index.h("a", { onClick: () => index_module.jn.push(states.forgotPasswordPath) }, this.forgotPasswordLabel))),
+      googleButton: null,
+      secondaryButton: (index.h("slot", { name: "secondaryButton" }, index.h("style", null, styleString), index.h("sl-button", { exportparts: "base: secondarybutton-base", type: "text", disabled: states.loading, onClick: () => index_module.jn.push(states.registerPath) }, this.registerLabel))),
+      emailLabel: this.emailLabel,
+      passwordLabel: this.passwordLabel,
+      submitLabel: this.submitLabel,
+      pageLabel: this.pageLabel,
+    };
+    return (index.h(ShadowViewAddon.PortalLoginView, { states: states, callbacks: callbacks, content: content }));
+  }
+};
+function useLoginDemo$1(props) {
+  return cjs.cjs({
+    states: {
+      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 });
+}
+
+function usePortalRegister(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+  const formRef = domContextHooks_module.useRef(null);
+  const { registrationFormState, setRegistrationFormState } = useRegistrationFormState.useRegistrationFormState({});
+  const [request, { loading, errors, data }] = index_module.Ve();
+  domContextHooks_module.useEffect(() => {
+    if (!formRef.current)
+      return;
+    const form = formRef.current;
+    form.addEventListener("sl-input", inputFunction);
+    return () => {
+      form.removeEventListener("sl-input", inputFunction);
+    };
+  }, [formRef.current]);
+  const submit = async (event) => {
+    var _a;
+    let formControls = event.target.getFormControls();
+    let formData = {};
+    let validationErrors = {};
+    formControls === null || formControls === void 0 ? void 0 : formControls.forEach((control) => {
+      if (!control.name)
+        return;
+      const key = control.name;
+      const value = control.value;
+      jsonpointer.jsonpointer.set(formData, key, value);
+      // required validation
+      if (control.required && !value) {
+        jsonpointer.jsonpointer.set(validationErrors, key, props.requiredFieldErrorMessage);
+      }
+      // custom validation
+      if (typeof control.validationError === "function") {
+        const validate = control.validationError;
+        const validationError = validate({ control, key, value });
+        if (validationError)
+          jsonpointer.jsonpointer.set(validationErrors, key, validationError);
+      }
+    });
+    if ((props.confirmPassword || formData.confirmPassword) &&
+      formData.password !== formData.confirmPassword) {
+      validationErrors = {
+        ...validationErrors,
+        confirmPassword: props.passwordMismatchErrorMessage,
+      };
+    }
+    if (Object.keys(validationErrors).length) {
+      setRegistrationFormState({ loading: false, error: "", validationErrors });
+      // early return for validation errors
+      return;
+    }
+    setRegistrationFormState({
+      loading: true,
+      error: "",
+      validationErrors: {},
+    });
+    const { email, password } = formData;
+    delete formData.email;
+    delete formData.password;
+    delete formData.confirmPassword;
+    formData = { ...formData };
+    const redirectPath = props.redirectPath;
+    const variables = {
+      email,
+      password,
+      formData,
+      redirectPath,
+    };
+    try {
+      const result = await request(variables);
+      if (result instanceof Error) {
+        throw result;
+      }
+      setRegistrationFormState({
+        loading: false,
+        error: "",
+        validationErrors: {},
+      });
+      if ((_a = result.registerManagedIdentityWithEmailAndPassword) === null || _a === void 0 ? void 0 : _a.token) {
+        index_module.jn.push(props.nextPage);
+      }
+    }
+    catch (error) {
+      setRegistrationFormState({
+        loading: false,
+        error: props.networkErrorMessage,
+        validationErrors: {},
+      });
+    }
+  };
+  const inputFunction = index_module.useCallback((e) => {
+    var _a, _b;
+    const name = (_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.toLowerCase();
+    if (name !== "tel")
+      return;
+    const asYouType = new usePortalRegistrationForm.AsYouType("US");
+    e.target.value = asYouType.input(e.target.value);
+  }, []);
+  let errorMessage = "";
+  if ((_a = errors === null || errors === void 0 ? void 0 : errors.response) === null || _a === void 0 ? void 0 : _a["error"]) {
+    errorMessage = props.networkErrorMessage;
+  }
+  else if ((errors === null || errors === void 0 ? void 0 : errors.message) && !((_b = errors === null || errors === void 0 ? void 0 : errors.response) === null || _b === void 0 ? void 0 : _b.errors.length)) {
+    errorMessage = props.networkErrorMessage;
+  }
+  else {
+    errorMessage =
+      ((_f = (_e = (_d = (_c = errors === null || errors === void 0 ? void 0 : errors.response) === null || _c === void 0 ? void 0 : _c.errors) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.extensions) === null || _f === void 0 ? void 0 : _f.message) || ((_j = (_h = (_g = errors === null || errors === void 0 ? void 0 : errors.response) === null || _g === void 0 ? void 0 : _g.errors) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.message) || (registrationFormState === null || registrationFormState === void 0 ? void 0 : registrationFormState.error);
+  }
+  return {
+    states: {
+      loading,
+      error: errorMessage,
+      registrationFormState,
+      confirmPassword: props.confirmPassword,
+      hideInputs: props.hideInputs,
+      loginPath: props.loginPath,
+      disablePasswordValidation: props.disablePasswordValidation,
+    },
+    callbacks: {
+      submit,
+      inputFunction,
+    },
+    refs: {
+      formRef,
+    },
+  };
+}
+
+const PortalRegister = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ignored = false;
+    /**
+     * Redirect participants to this page from their verification email
+     *
+     * @uiName Registration redirect
+     * @uiWidget pageSelect
+     */
+    this.nextPage = "/";
+    /**
+     * The page that participants are redirected to from the 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";
+    /**
+     * 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";
+    /**
+     * @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";
+    domContextHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const { states, callbacks, refs } = index_module.isDemo()
+      ? useRegisterDemo$2(this)
+      : usePortalRegister(this);
+    const content = {
+      formData: index.h("slot", { name: "formData" }),
+      secondaryButton: (index.h("slot", { name: "secondaryButton" }, index.h("sl-button", { type: "text", disabled: states.loading, onClick: () => index_module.jn.push(states.loginPath) }, this.loginLabel))),
+      terms: index.h("slot", { name: "terms" }),
+      emailLabel: this.emailLabel,
+      passwordLabel: this.passwordLabel,
+      submitLabel: this.submitLabel,
+      pageLabel: this.pageLabel,
+      confirmPasswordLabel: this.confirmPasswordLabel,
+      invalidEmailErrorMessage: this.invalidEmailErrorMessage,
+      requiredFieldErrorMessage: this.requiredFieldErrorMessage,
+      meetsRequirementsText: this.meetsRequirementsText,
+      doesNotMeetRequirementsText: this.doesNotMeetRequirementsText,
+      minErrorText: this.minErrorText,
+      uppercaseErrorText: this.uppercaseErrorText,
+      lowercaseErrorText: this.lowercaseErrorText,
+      hasErrorText: this.hasErrorText,
+    };
+    return (index.h(ShadowViewAddon.PortalRegisterView, { states: states, callbacks: callbacks, content: content, refs: refs }));
+  }
+};
+function useRegisterDemo$2(props) {
+  return cjs.cjs({
+    states: {
+      error: "",
+      loading: false,
+      confirmPassword: props.confirmPassword,
+      hideInputs: props.hideInputs || false,
+      customPasswordField: false,
+      loginPath: props.loginPath,
+      disablePasswordValidation: props.disablePasswordValidation,
+    },
+    callbacks: {
+      submit: async (_event) => {
+        console.log("submit");
+      },
+      inputFunction: () => { },
+    },
+    refs: {
+      formRef: {},
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
 function ProgramExplainerView(props, children) {
   const style = {
     Container: {
@@ -7936,8 +8645,12 @@ exports.sqm_payout_status_alert = PayoutStatusAlert;
 exports.sqm_portal_change_marketing = PortalChangeMarketing;
 exports.sqm_portal_change_password = PortalChangePassword;
 exports.sqm_portal_footer = PortalFooter;
+exports.sqm_portal_forgot_password = PortalForgotPassword;
 exports.sqm_portal_frame = PortalFrame;
+exports.sqm_portal_google_login = PortalGoogleLogin;
 exports.sqm_portal_google_registration_form = PortalGoogleRegistrationForm;
+exports.sqm_portal_login = PortalLogin;
+exports.sqm_portal_register = PortalRegister;
 exports.sqm_program_explainer = ProgramExplainer;
 exports.sqm_program_explainer_step = ProgramExplainerStep;
 exports.sqm_program_menu = ProgramMenu;