@saasquatch/mint-components 1.12.0-2 → 1.12.0-20

package/dist/esm/sqm-big-stat_39.entry.js

@@ -1,23 +1,23 @@
 import { r as registerInstance, h as h$1, c as Host } from './index-17b4da69.js';
-import { j as h, d as useEffect, f as useState, k as d, u as useMemo, e as useRef, b as browser, h as useReducer } from './stencil-hooks.module-3c7f7c90.js';
-import { i as intl } from './global-adae7650.js';
-import { i as isDemo, T, K, z, b as xe, E as En, n as ne, Q, w as wn, x as xn, m as ze, W as We, U as Ue, a as useCallback, o as Ye, j as jn } from './index.module-c0eb7dc2.js';
+import { n as h, f as useEffect, k as useState, i as d, u as useMemo, m as useRef, b as browser, j as useReducer } from './stencil-hooks.module-ac12ca1c.js';
+import { i as intl } from './global-6306a9b8.js';
+import { i as isDemo, T, d as dist, K, z, c as xe, E as En, n as ne, Q, w as wn, x as xn, q as ze, W as We, U as Ue, b as useCallback, r as Ye, j as jn } from './index.module-6c840c4e.js';
+import { j as jsonpointer } from './jsonpointer-388a7082.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import './mixins-f60a614c.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import { a as useRequestRerender } from './re-render-5882a144.js';
-import { u as useChildElements } from './useChildElements-fe94b660.js';
-import './luxon-63e24900.js';
-import { d as dist } from './index-0c7b14c5.js';
+import { a as useRequestRerender } from './re-render-1bcfd0de.js';
+import { u as useChildElements } from './useChildElements-fc84e640.js';
+import './luxon-7600be8d.js';
 import { g as getProps, a as getMissingProps, s as sanitizeUrlPath } from './utils-334c1e34.js';
 import './sqm-text-span-view-8d140661.js';
 import { p as pathToRegexp } from './index-ffa26b43.js';
-import { j as jsonpointer } from './jsonpointer-388a7082.js';
-import { R as REGISTRATION_FORM_STATE_CONTEXT, u as useRegistrationFormState } from './useRegistrationFormState-4cfd1a8d.js';
-import { i as isEmpty } from './utilities-98445452.js';
+import { R as REGISTRATION_FORM_STATE_CONTEXT, u as useRegistrationFormState } from './useRegistrationFormState-849e27f7.js';
+import { i as isEmpty } from './utilities-443732be.js';
 import { A as AsYouType } from './AsYouType-46f67d0d.js';
-import { b as useDemoBigStat, V as useBigStat, B as BigStatView, Q as autoColorScaleCss, K as CardFeedView, j as CheckboxFieldView, M as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, W as withShadowView, L as LeaderboardView, N as NameFieldsView, d as PortalChangePasswordView, i as PortalFooterView, P as PortalFrameView, e as PortalLoginView, f as PortalRegisterView, R as ReferralIframeView, X as demoRewardExchange, k as RewardExchangeView, a as useShareButton, S as ShareButtonView, C as CopyTextView, u as useShareLink, c as StatContainerView, T as TaskCardView } from './ShadowViewAddon-72e231a5.js';
+import { b as useDemoBigStat, V as useBigStat, B as BigStatView, Q as autoColorScaleCss, K as CardFeedView, j as CheckboxFieldView, M as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, W as withShadowView, L as LeaderboardView, N as NameFieldsView, d as PortalChangePasswordView, i as PortalFooterView, P as PortalFrameView, e as PortalLoginView, f as PortalRegisterView, R as ReferralIframeView, X as demoRewardExchange, k as RewardExchangeView, a as useShareButton, S as ShareButtonView, C as CopyTextView, u as useShareLink, c as StatContainerView, T as TaskCardView } from './ShadowViewAddon-69b61037.js';
 import './sqm-portal-container-view-6c582684.js';
+import { u as usePayoutStatus } from './usePayoutStatus-0bc0380f.js';
 
 const BigStat = class {
   constructor(hostRef) {
@@ -1720,6 +1720,7 @@ NavigationMenu.style = sqmNavigationMenuCss;
 const style$2 = {
   Wrapper: {
     maxWidth: "200px",
+    marginLeft: "auto",
   },
   PayoutButtonDescription: {
     color: "var(--sl-color-neutral-500)",
@@ -1733,12 +1734,47 @@ function PayoutButtonScrollView(props) {
   const { text, states } = props;
   if (!states.payoutSettingsComplete)
     return h$1("div", null);
-  return (h$1("div", { part: "sqm-base", class: sheet$2.classes.Wrapper },
+  return (h$1("div", { class: sheet$2.classes.Wrapper },
     h$1("style", { type: "text/css" }, styleString$2),
     h$1("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.payoutButtonText, "scroll-animation": "smooth" }),
     h$1("p", { class: sheet$2.classes.PayoutButtonDescription }, text.payoutButtonDescription)));
 }
 
+const GET_PAYOUT_DETAILS = dist.gql `
+  query getPayoutDetails {
+    user: viewer {
+      ... on User {
+        id
+        impactConnection {
+          connected
+          publisher {
+            id
+            payoutsAccount {
+              hold
+              balance
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+function usePayoutButton(props) {
+  var _a, _b, _c;
+  const { data, refetch } = En(GET_PAYOUT_DETAILS, {});
+  useEffect(() => {
+    const cb = () => refetch();
+    window.addEventListener("sqm:tax-form-updated", cb);
+    return () => window.removeEventListener("sqm:tax-form-updated", cb);
+  }, []);
+  return {
+    states: {
+      payoutSettingsComplete: !!((_c = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.impactConnection) === null || _b === void 0 ? void 0 : _b.publisher) === null || _c === void 0 ? void 0 : _c.payoutsAccount),
+    },
+    text: props.getTextProps(),
+  };
+}
+
 const PayoutButtonScroll = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -1759,7 +1795,9 @@ const PayoutButtonScroll = class {
     return getProps(this);
   }
   render() {
-    const props = useDemoPayoutButtonScroll(this);
+    const props = isDemo()
+      ? useDemoPayoutButtonScroll(this)
+      : usePayoutButton(this);
     return h$1(PayoutButtonScrollView, Object.assign({}, props));
   }
 };
@@ -1781,6 +1819,15 @@ const style$3 = {
     margin: "0",
     marginBottom: "var(--sl-spacing-small)",
   },
+  ErrorAlertContainer: {
+    "&::part(base)": {
+      backgroundColor: "var(--sl-color-red-100)",
+      borderTop: "none",
+    },
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-danger-500)",
+    },
+  },
   WarningAlertContainer: {
     "&::part(base)": {
       backgroundColor: "var(--sl-color-yellow-100)",
@@ -1799,12 +1846,26 @@ const style$3 = {
       color: "var(--sl-color-blue-500)",
     },
   },
+  Dialog: {
+    "&::part(panel)": {
+      height: "600px",
+    },
+    "&::part(close-button)": {
+      marginBottom: "var(--sl-spacing-xx-large)",
+    },
+    "&::part(title)": {
+      display: "none",
+    },
+    "&::part(header)": {},
+    "&::part(body)": { padding: "0" },
+    "&::part(footer)": {},
+  },
 };
 const sheet$3 = createStyleSheet(style$3);
 const styleString$3 = sheet$3.toString();
 function PayoutStatusAlertView(props) {
   var _a, _b, _c, _d, _e;
-  const { text, states } = props;
+  const { text, states, data, callbacks } = props;
   if (states.loading) {
     return h$1("sl-skeleton", { class: sheet$3.classes.SkeletonOne });
   }
@@ -1812,29 +1873,87 @@ function PayoutStatusAlertView(props) {
     return h$1("div", null);
   }
   function getAlert(status) {
+    if (states.error)
+      return {
+        header: text.errorHeader,
+        description: text.errorDescription,
+        buttonText: null,
+        alertType: "critical",
+        icon: "exclamation-triangle",
+        class: sheet$3.classes.ErrorAlertContainer,
+      };
     switch (status) {
       case "INFORMATION_REQUIRED":
         return {
           header: text.informationRequiredHeader,
           description: text.informationRequiredDescription,
-          buttonText: text.verificationRequiredButtonText,
+          buttonText: text.informationRequiredButtonText,
           alertType: "info",
           icon: "info-circle",
           class: sheet$3.classes.InfoAlertContainer,
         };
-      case "VERIFICATION_NEEDED":
+      case "VERIFICATION:REQUIRED":
         return {
           header: text.verificationRequiredHeader,
-          description: text.verificationRequiredDescription,
+          description: intl.formatMessage({
+            id: "verificationRequiredDescription",
+            defaultMessage: text.verificationRequiredDescription,
+          }, {
+            supportLink: (h$1("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
           buttonText: text.verificationRequiredButtonText,
           alertType: "warning",
           icon: "exclamation-triangle",
           class: sheet$3.classes.WarningAlertContainer,
         };
+      case "VERIFICATION:INTERNAL":
+        return {
+          header: text.verificationRequiredInternalHeader,
+          description: intl.formatMessage({
+            id: "verificationRequiredInternalDescription",
+            defaultMessage: text.verificationRequiredInternalDescription,
+          }, {
+            supportLink: (h$1("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet$3.classes.WarningAlertContainer,
+        };
+      case "VERIFICATION:REVIEW":
+        return {
+          header: text.verificationReviewInternalHeader,
+          description: intl.formatMessage({
+            id: "verificationReviewInternalDescription",
+            defaultMessage: text.verificationReviewInternalDescription,
+          }, {
+            supportLink: (h$1("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet$3.classes.WarningAlertContainer,
+        };
+      case "VERIFICATION:FAILED":
+        return {
+          header: text.verificationFailedInternalHeader,
+          description: intl.formatMessage({
+            id: "verificationFailedInternalDescription",
+            defaultMessage: text.verificationFailedInternalDescription,
+          }, {
+            supportLink: (h$1("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          alertType: "critical",
+          icon: "exclamation-octagon",
+          class: sheet$3.classes.ErrorAlertContainer,
+        };
       case "HOLD":
         return {
           header: text.holdHeader,
-          description: text.holdDescription,
+          description: intl.formatMessage({
+            id: "holdDescription",
+            defaultMessage: text.holdDescription,
+          }, {
+            supportLink: (h$1("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
           buttonText: null,
           alertType: "warning",
           icon: "exclamation-triangle",
@@ -1844,13 +1963,14 @@ function PayoutStatusAlertView(props) {
         return;
     }
   }
-  //AL: TODO hookup ID
   function getButton(status) {
     switch (status) {
       case "INFORMATION_REQUIRED":
-        return (h$1("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": "Payout and tax settings", "scroll-animation": "smooth" }));
-      case "VERIFICATION_NEEDED":
-        return (h$1("sl-button", { type: "default", loading: states.loading }, text.verificationRequiredButtonText));
+        return data.type === "SquatchJS2" ? (h$1("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.informationRequiredButtonText, "scroll-animation": "smooth" })) : data.type === "SquatchPortal" ? (h$1("sl-button", { type: "default", onClick: callbacks.onTermsClick }, text.informationRequiredButtonText)) : (
+        // Demo case
+        h$1("sl-button", { type: "default" }, text.informationRequiredButtonText));
+      case "VERIFICATION:REQUIRED":
+        return (h$1("sl-button", { type: "default", loading: states.veriffLoading, onClick: callbacks.onClick }, text.verificationRequiredButtonText));
       default:
         return;
     }
@@ -1864,54 +1984,6 @@ function PayoutStatusAlertView(props) {
       getButton(states.status))));
 }
 
-const GET_USER_STATUS = dist.gql `
-  query getUserStatus {
-    user: viewer {
-      ... on User {
-        id
-        impactConnection {
-          connected
-          publisher {
-            id
-            payoutsAccount {
-              hold
-            }
-          }
-        }
-      }
-    }
-  }
-`;
-function usePayoutStatus(props) {
-  const { loading, data, errors, refetch } = En(GET_USER_STATUS, {});
-  const [status, setStatus] = useState(undefined);
-  useEffect(() => {
-    if (!data)
-      return;
-    function getStatus(data) {
-      var _a, _b;
-      const account = (_b = (_a = data.user.impactConnection) === null || _a === void 0 ? void 0 : _a.publisher) === null || _b === void 0 ? void 0 : _b.payoutsAccount;
-      if (!account)
-        return "INFORMATION_REQUIRED";
-      if (account.hold)
-        return "HOLD";
-      // @ts-ignore, TODO: add check for account verification
-      if (!account.verified)
-        return "VERIFICATION_NEEDED";
-      return "DONE";
-    }
-    const s = getStatus(data);
-    setStatus(s);
-  }, [data]);
-  useEffect(() => {
-    const cb = () => refetch();
-    window.addEventListener("sqm:tax-form-updated", cb);
-    return () => window.removeEventListener("sqm:tax-form-updated", cb);
-  }, []);
-  console.log({ data });
-  return { states: { loading, status }, text: props.getTextProps() };
-}
-
 const PayoutStatusAlert = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -1934,19 +2006,60 @@ const PayoutStatusAlert = class {
     /**
      * @uiName Verification required alert description
      */
-    this.verificationRequiredDescription = "Complete your verification to start receiving your cash rewards. It should only take a few minutes verify.";
+    this.verificationRequiredDescription = "It should only take a few minutes verify. If you run in to an issue verifying your identity contact our {supportLink}.";
     /**
      * @uiName Verification required alert button text
      */
     this.verificationRequiredButtonText = "Start Verification";
+    /**
+     * @uiName Verification required internal alert header
+     */
+    this.verificationRequiredInternalHeader = "Identity Verification in Progress";
+    /**
+     * @uiName Verification required internal alert description
+     */
+    this.verificationRequiredInternalDescription = "Identity verification submission has been received. Our system is currently performing additional checks and analyzing the results. You will be updated shortley. If you don't hear from us contact our {supportLink}.";
+    /**
+     * @uiName Verification review internal alert header
+     */
+    this.verificationReviewInternalHeader = "Identity Verification Under Review";
+    /**
+     * @uiName Verification review internal alert description
+     */
+    this.verificationReviewInternalDescription = "Identity verification requires further review due to a potential error. Our team is reviewing the information and will update you shortly. If you don't hear from us contact our {supportLink}.";
+    /**
+     * @uiName Verification failed internal alert header
+     */
+    this.verificationFailedInternalHeader = "Identity Verification Unsuccessful";
+    /**
+     * @uiName Verification failed internal alert description
+     */
+    this.verificationFailedInternalDescription = "Identity verification has failed. Our team is reviewing the report and will contact you with further information. If you don't hear from us contact our {supportLink}.";
     /**
      * @uiName Payout on hold alert header
      */
     this.holdHeader = "Your payouts and account are on hold";
     /**
      * @uiName Payout on hold alert description
+     * AL: TODO copy not finalized for support section
+     */
+    this.holdDescription = "Please check your inbox for an email from our referral provider, impact.com. It contains details on how to resolve this issue. If you need further assistance, feel free to reach out to our {supportLink}.";
+    /**
+     * @uiName Cash & Payouts Microsite Page (only set if alert is used in a microsite)
+     */
+    this.cashPayoutsPageUrl = "/cash";
+    /**
+     * @uiName Support link text
      */
-    this.holdDescription = "Please check your inbox for an email from our referral provider, impact.com. It contains details on how to resolve this issue. If you need further assistance, feel free to reach out to {support email}.";
+    this.supportLink = "support team";
+    /**
+     * @uiName Error header
+     */
+    this.errorHeader = "Could not determine payout status.";
+    /**
+     * @uiName Error description
+     */
+    this.errorDescription = "There was an error with determining your payout status.";
     h(this);
   }
   disconnectedCallback() { }
@@ -1963,10 +2076,17 @@ const PayoutStatusAlert = class {
 function useDemoPayoutStatusAlert(props) {
   return cjs({
     states: {
+      error: false,
       status: "INFORMATION_REQUIRED",
       loading: false,
+      showVerifyIdentity: false,
     },
+    data: { type: "SquatchAdmin" },
     text: props.getTextProps(),
+    callbacks: {
+      onTermsClick: () => { },
+      onClick: () => console.log("show"),
+    },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 

package/dist/esm/sqm-close-button.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { j as h } from './stencil-hooks.module-3c7f7c90.js';
-import { g as getEnvironmentSDK } from './index.module-c0eb7dc2.js';
+import { n as h } from './stencil-hooks.module-ac12ca1c.js';
+import { g as getEnvironmentSDK } from './index.module-6c840c4e.js';
 import './mixins-f60a614c.js';
 import './JSS-67b5cff8.js';
 import { C as CloseButtonView } from './sqm-close-button-view-dc65b4e3.js';

package/dist/esm/sqm-context-router.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h as h$1, c as Host } from './index-17b4da69.js';
-import { b as browser, f as useState, k as d, d as useEffect, j as h } from './stencil-hooks.module-3c7f7c90.js';
-import { T } from './index.module-c0eb7dc2.js';
+import { b as browser, k as useState, i as d, f as useEffect, n as h } from './stencil-hooks.module-ac12ca1c.js';
+import { T } from './index.module-6c840c4e.js';
 import { g as getProps } from './utils-334c1e34.js';
 import { p as pathToRegexp } from './index-ffa26b43.js';
 

package/dist/esm/sqm-email-verification.entry.js

@@ -1,13 +1,135 @@
 import { h, r as registerInstance } from './index-17b4da69.js';
-import { j as h$1 } from './stencil-hooks.module-3c7f7c90.js';
-import { i as isDemo } from './index.module-c0eb7dc2.js';
+import { k as useState, f as useEffect, n as h$1 } from './stencil-hooks.module-ac12ca1c.js';
+import { i as intl } from './global-6306a9b8.js';
+import { d as dist, M as Mn, E as En, K, c as xe, i as isDemo, S as Sn } from './index.module-6c840c4e.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
-import './index-0c7b14c5.js';
 import { g as getProps } from './utils-334c1e34.js';
 import { T as TextSpanView } from './sqm-text-span-view-8d140661.js';
-import './keys-a1496e39.js';
-import { u as useWidgetEmailVerification } from './useEmailVerification-8f2dc2bd.js';
+import { S as SHOW_CODE_NAMESPACE, V as VERIFICATION_EMAIL_NAMESPACE } from './keys-406491dc.js';
+import { u as useVerificationEmail } from './useVerificationEmail-2a21d0e3.js';
+
+const UpsertUserEmailMutation = dist.gql `
+  mutation upsertUser($userInput: UserInput!) {
+    upsertUser(userInput: $userInput) {
+      id
+      accountId
+      email
+    }
+  }
+`;
+const UserLookupQuery = dist.gql `
+  query user {
+    viewer {
+      ... on User {
+        id
+        accountId
+        email
+        impactConnection {
+          user {
+            id
+            email
+          }
+        }
+      }
+    }
+  }
+`;
+function useUpsertUserEmail() {
+  const user = K();
+  const [request, { loading: loading, data, errors }] = xe(UpsertUserEmailMutation);
+  const upsertUserEmail = async (email) => {
+    try {
+      const result = await request({
+        userInput: {
+          id: user.id,
+          accountId: user.accountId,
+          email,
+        },
+      });
+      if (result instanceof Error || !result)
+        throw new Error();
+      return result;
+    }
+    catch (e) {
+      console.error("Could not set email on user", e);
+      return undefined;
+    }
+  };
+  return [
+    upsertUserEmail,
+    {
+      loading,
+      data,
+      errors,
+    },
+  ];
+}
+function useWidgetEmailVerification(props) {
+  const [_, setShowCode] = Mn(SHOW_CODE_NAMESPACE);
+  const [email, setEmail] = Mn(VERIFICATION_EMAIL_NAMESPACE);
+  const [emailExists, setEmailExists] = useState(false);
+  const [error, setError] = useState(false);
+  const [mutationError, setMutationError] = useState(false);
+  const { initialized, send: [sendEmail, { loading: sendLoading, errors }], } = useVerificationEmail();
+  const [upsertUserEmail] = useUpsertUserEmail();
+  const [loading, setLoading] = useState(true);
+  const { data, loading: initialLoading } = En(UserLookupQuery, {});
+  const emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+  useEffect(() => {
+    if (!(data === null || data === void 0 ? void 0 : data.viewer))
+      return;
+    setEmailExists(!!data.viewer.email);
+  }, [data]);
+  useEffect(() => {
+    if (initialized)
+      setLoading(false);
+  }, [initialized]);
+  const submitEmail = async (e) => {
+    e.preventDefault();
+    if (!(data === null || data === void 0 ? void 0 : data.viewer))
+      return;
+    setLoading(true);
+    const toAddress = data.viewer.email;
+    if (!toAddress) {
+      // If no email on the user, set one
+      const formData = e.detail.formData;
+      const newEmail = formData.get("email").toString();
+      if (!emailRegex.test(newEmail)) {
+        setError(true);
+        return;
+      }
+      const result = await upsertUserEmail(newEmail);
+      if (!result || !result.user.email)
+        setError(true);
+    }
+    // UI should not allow this call til initialisation is done
+    if (!initialized)
+      return;
+    const result = await sendEmail();
+    if (!result || !result.success)
+      setMutationError(true);
+    else {
+      // This is used to let the code verification widget know an email was already sent
+      setEmail(toAddress);
+      setShowCode(true);
+    }
+    setLoading(false);
+  };
+  return {
+    callbacks: {
+      submitEmail,
+    },
+    states: {
+      loading,
+      initialLoading: initialLoading && !initialized,
+      error,
+      email: data === null || data === void 0 ? void 0 : data.viewer.email,
+      sendCodeError: mutationError,
+    },
+    text: props.getTextProps(),
+  };
+}
 
 const style = {
   Wrapper: {
@@ -28,10 +150,7 @@ const style = {
       backgroundColor: "var(--sl-color-red-100)",
       borderTop: "none",
     },
-    "&::part(message)": {
-      display: "flex",
-      flexDirection: "column",
-    },
+    "&::part(message)": {},
   },
   ContinueButton: {
     width: "100%",
@@ -84,12 +203,18 @@ function WidgetEmailVerificationView(props) {
     states.sendCodeError && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", class: sheet.classes.ErrorAlertContainer, open: true },
       h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
       h("b", null, text.sendCodeErrorHeader),
-      text.sendCodeErrorDescription)),
+      h("br", null),
+      intl.formatMessage({
+        id: "sendCodeErrorDescription",
+        defaultMessage: text.sendCodeErrorDescription,
+      }, {
+        supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+      }))),
     states.initialLoading ? (renderLoadingSkeleton()) : (h("div", { class: sheet.classes.Wrapper },
       h(TextSpanView, { type: "p" }, text.verifyEmailHeaderText),
       h("sl-form", { "onSl-submit": callbacks.submitEmail },
         h("div", { class: sheet.classes.InputsContainer },
-          h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", label: text.emailLabel, value: states.email, type: "email", id: "email", name: "email", disabled: !!states.email || states.loading }, (states.error
+          h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", label: text.emailLabel, value: states.email || "", type: "email", id: "email", name: "email", disabled: !!states.email || states.loading }, (states.error
             ? {
               class: sheet.classes.ErrorInput,
               helpText: text.emailValidationErrorText,
@@ -108,11 +233,15 @@ const WidgetEmailVerification = class {
     /**
      * @uiName Send code to email alert header
      */
-    this.sendCodeErrorHeader = "There was an error sending your code.";
+    this.sendCodeErrorHeader = "There was an error sending your code";
+    /**
+     * @uiName Support link text
+     */
+    this.supportLink = "support team";
     /**
      * @uiName Send code to email alert description
      */
-    this.sendCodeErrorDescription = "Please try again. If this problem continues, contact our program support team.";
+    this.sendCodeErrorDescription = "Please try again. If this problem continues, contact our program {supportLink}.";
     /**
      * @uiName Email input label
      */
@@ -139,16 +268,17 @@ const WidgetEmailVerification = class {
   }
 };
 function useDemoWidgetEmailVerification(props) {
+  const setShowCode = Sn(SHOW_CODE_NAMESPACE);
   return cjs({
     states: {
-      error: "",
+      error: true,
+      initialLoading: false,
       loading: false,
-      email: "",
-      isEmailPrefilled: false,
-      sendCodeError: false,
+      email: "test@example.com",
+      sendCodeError: true,
     },
     callbacks: {
-      submitEmail: async () => { },
+      submitEmail: async () => setShowCode(true),
     },
     text: props.getTextProps(),
   }, props.demoData || {}, { arrayMerge: (_, a) => a });

package/dist/esm/sqm-empty_4.entry.js

@@ -1,7 +1,7 @@
 import { h, r as registerInstance, c as Host } from './index-17b4da69.js';
-import { j as h$1 } from './stencil-hooks.module-3c7f7c90.js';
-import { i as intl } from './global-adae7650.js';
-import './index.module-c0eb7dc2.js';
+import { n as h$1 } from './stencil-hooks.module-ac12ca1c.js';
+import { i as intl } from './global-6306a9b8.js';
+import './index.module-6c840c4e.js';
 import './JSS-67b5cff8.js';
 import { g as getProps } from './utils-334c1e34.js';
 import { P as PortalContainerView, a as PortalSectionView } from './sqm-portal-container-view-6c582684.js';
@@ -117,7 +117,7 @@ const vanillaStyle = `
 
   sqm-text h4 {
     font-size: var(--sl-font-size-large);
-    font-weight: var(--sl-font-weight-semibold);
+    font-weight: var(--sl-font-weight-bold);
     color: var(--sl-color-neutral-800);
     margin: 0;
   }

package/dist/esm/sqm-form-message.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h as h$1 } from './index-17b4da69.js';
-import { j as h } from './stencil-hooks.module-3c7f7c90.js';
+import { n as h } from './stencil-hooks.module-ac12ca1c.js';
 
 const sqmFormMessageCss = "sl-alert::part(base){border:1px solid;border-radius:3px;-webkit-box-shadow:0 1px 2px rgba(20, 20, 20, 0.1);box-shadow:0 1px 2px rgba(20, 20, 20, 0.1)}.Error::part(base){background-color:var(--sl-color-danger-100);border-color:var(--sl-color-danger-200)}.Warning::part(base){background-color:var(--sl-color-warning-100);border-color:var(--sl-color-warning-200)}.Success::part(base){background-color:var(--sl-color-success-100);border-color:var(--sl-color-success-200)}.Info::part(base){background-color:var(--sl-color-primary-100);border-color:var(--sl-color-primary-200)}";
 

package/dist/esm/sqm-graphql-client-provider.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h as h$1, c as Host } from './index-17b4da69.js';
-import { m, d as useEffect, j as h } from './stencil-hooks.module-3c7f7c90.js';
-import { B, k as ke, Y, $ as $e } from './index.module-c0eb7dc2.js';
+import { o as m, f as useEffect, n as h } from './stencil-hooks.module-ac12ca1c.js';
+import { B, k as ke, Y, $ as $e } from './index.module-6c840c4e.js';
 
 async function useGraphQLClientProvider({ domain }) {
   const token = B();

package/dist/esm/sqm-header-logo.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h as h$1, c as Host } from './index-17b4da69.js';
-import { j as h } from './stencil-hooks.module-3c7f7c90.js';
+import { n as h } from './stencil-hooks.module-ac12ca1c.js';
 
 const HeroImage = class {
   constructor(hostRef) {