@saasquatch/mint-components 1.13.0-9 → 1.13.1-0

package/dist/cjs/{sqm-big-stat_38.cjs.entry.js → sqm-big-stat_39.cjs.entry.js}

@@ -4,24 +4,27 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a29c60ef.js');
 const stencilHooks_module = require('./stencil-hooks.module-3a336b0f.js');
-const global = require('./global-19fc8a7a.js');
-const index_module = require('./index.module-57703088.js');
+const global = require('./global-e31dc4f5.js');
+const index_module = require('./index.module-ee84433d.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');
-const copyTextView = require('./copy-text-view-9b950efe.js');
+const copyTextView = require('./copy-text-view-a5524c20.js');
 require('./mixins-f7e0377a.js');
-const reRender = require('./re-render-35b016ed.js');
-const useChildElements = require('./useChildElements-854cd1e5.js');
+const reRender = require('./re-render-b324deab.js');
+const useChildElements = require('./useChildElements-1b35d945.js');
 require('./luxon-2926d85f.js');
 require('./sqm-text-span-view-0aa82125.js');
 const index$1 = require('./index-8c6255f5.js');
-const useRegistrationFormState = require('./useRegistrationFormState-986b5ea1.js');
+const useRegistrationFormState = require('./useRegistrationFormState-7b820f0c.js');
+const sqmPortalLoginView = require('./sqm-portal-login-view-761a4d8e.js');
+const usePortalLogin = require('./usePortalLogin-63d896d1.js');
 const AsYouType = require('./AsYouType-6788393a.js');
-const utilities = require('./utilities-c135f16f.js');
-const ShadowViewAddon = require('./ShadowViewAddon-44cb1a98.js');
+const utilities = require('./utilities-78f5e169.js');
+const ShadowViewAddon = require('./ShadowViewAddon-bd00066a.js');
 require('./sqm-portal-container-view-4f15143a.js');
+const usePayoutStatus = require('./usePayoutStatus-4b5894ef.js');
 
 const BigStat = class {
   constructor(hostRef) {
@@ -1721,6 +1724,378 @@ function useNavigationMenuDemo(props) {
 }
 NavigationMenu.style = sqmNavigationMenuCss;
 
+const style$2 = {
+  Wrapper: {
+    maxWidth: "200px",
+    marginLeft: "auto",
+  },
+  PayoutButtonDescription: {
+    color: "var(--sl-color-neutral-500)",
+    fontSize: "var(--sl-font-size-small)",
+    margin: "0",
+  },
+};
+const sheet$2 = JSS.createStyleSheet(style$2);
+const styleString$2 = sheet$2.toString();
+function PayoutButtonScrollView(props) {
+  const { text, states } = props;
+  if (!states.payoutSettingsComplete)
+    return index.h("div", null);
+  return (index.h("div", { class: sheet$2.classes.Wrapper },
+    index.h("style", { type: "text/css" }, styleString$2),
+    index.h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.payoutButtonText, "scroll-animation": "smooth" }),
+    index.h("p", { class: sheet$2.classes.PayoutButtonDescription }, text.payoutButtonDescription)));
+}
+
+const GET_PAYOUT_DETAILS = index_module.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 } = index_module.wn(GET_PAYOUT_DETAILS, {});
+  stencilHooks_module.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) {
+    index.registerInstance(this, hostRef);
+    /**
+     * @uiName Payout button text
+     */
+    this.payoutButtonText = "Payouts & Tax Settings";
+    /**
+     * Description text under payout button
+     * @uiName Payout button description text
+     */
+    this.payoutButtonDescription = "Check your payout settings to see when you’ll get paid out next";
+    this.ignored = true;
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  getTextProps() {
+    return utils.getProps(this);
+  }
+  render() {
+    const props = index_module.isDemo()
+      ? useDemoPayoutButtonScroll(this)
+      : usePayoutButton(this);
+    return index.h(PayoutButtonScrollView, Object.assign({}, props));
+  }
+};
+function useDemoPayoutButtonScroll(props) {
+  return cjs.cjs({
+    states: {
+      payoutSettingsComplete: false,
+    },
+    text: props.getTextProps(),
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
+const style$3 = {
+  SkeletonOne: {
+    width: "50%",
+    height: "16px",
+  },
+  AlertDescriptionText: {
+    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)",
+      borderTop: "none",
+    },
+    "& sl-icon::part(base)": {
+      color: "var(--sl-color-danger-500)",
+    },
+  },
+  InfoAlertContainer: {
+    "&::part(base)": {
+      backgroundColor: "var(--sl-color-sky-100)",
+      borderTop: "none",
+    },
+    "& sl-icon::part(base)": {
+      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 = JSS.createStyleSheet(style$3);
+const styleString$3 = sheet$3.toString();
+function PayoutStatusAlertView(props) {
+  const { text, states, data, callbacks } = props;
+  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.informationRequiredButtonText,
+          alertType: "info",
+          icon: "info-circle",
+          class: sheet$3.classes.InfoAlertContainer,
+        };
+      case "VERIFICATION:REQUIRED":
+        return {
+          header: text.verificationRequiredHeader,
+          description: global.intl.formatMessage({
+            id: "verificationRequiredDescription",
+            defaultMessage: text.verificationRequiredDescription,
+          }, {
+            supportLink: (index.h("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: global.intl.formatMessage({
+            id: "verificationRequiredInternalDescription",
+            defaultMessage: text.verificationRequiredInternalDescription,
+          }, {
+            supportLink: (index.h("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: global.intl.formatMessage({
+            id: "verificationReviewInternalDescription",
+            defaultMessage: text.verificationReviewInternalDescription,
+          }, {
+            supportLink: (index.h("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: global.intl.formatMessage({
+            id: "verificationFailedInternalDescription",
+            defaultMessage: text.verificationFailedInternalDescription,
+          }, {
+            supportLink: (index.h("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: global.intl.formatMessage({
+            id: "holdDescription",
+            defaultMessage: text.holdDescription,
+          }, {
+            supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          buttonText: null,
+          alertType: "warning",
+          icon: "exclamation-triangle",
+          class: sheet$3.classes.WarningAlertContainer,
+        };
+      default:
+        return;
+    }
+  }
+  function getButton(status) {
+    switch (status) {
+      case "INFORMATION_REQUIRED":
+        return data.type === "SquatchJS2" ? (index.h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.informationRequiredButtonText, "scroll-animation": "smooth" })) : data.type === "SquatchPortal" ? (index.h("sl-button", { type: "default", onClick: callbacks.onTermsClick }, text.informationRequiredButtonText)) : (
+        // Demo case
+        index.h("sl-button", { type: "default" }, text.informationRequiredButtonText));
+      case "VERIFICATION:REQUIRED":
+        return (index.h("sl-button", { type: "default", loading: states.veriffLoading, onClick: callbacks.onClick }, text.verificationRequiredButtonText));
+      default:
+        return;
+    }
+  }
+  if (states.loading) {
+    return index.h("sl-skeleton", { class: sheet$3.classes.SkeletonOne });
+  }
+  const alertDetails = getAlert(states.status);
+  if (states.status === "DONE" || !alertDetails) {
+    return index.h("div", null);
+  }
+  return (index.h("div", { part: "sqm-base" },
+    index.h("style", { type: "text/css" }, styleString$3),
+    index.h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: alertDetails.alertType, class: alertDetails.class, open: true },
+      index.h("sl-icon", { slot: "icon", name: alertDetails.icon }),
+      index.h("strong", null, alertDetails.header),
+      index.h("p", { class: sheet$3.classes.AlertDescriptionText }, alertDetails.description),
+      getButton(states.status))));
+}
+
+const PayoutStatusAlert = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * @uiName Info required alert header
+     */
+    this.informationRequiredHeader = "Payout and tax information required";
+    /**
+     * @uiName Info required alert description
+     */
+    this.informationRequiredDescription = "Submit your banking details and tax documents to receive your rewards.";
+    /**
+     * @uiName Info required alert button text
+     */
+    this.informationRequiredButtonText = "Payouts & Tax Settings";
+    /**
+     * @uiName Verification required alert header
+     */
+    this.verificationRequiredHeader = "Verify your identity";
+    /**
+     * @uiName Verification required alert description
+     */
+    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 shortly. 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
+     */
+    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.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.";
+    stencilHooks_module.h$1(this);
+  }
+  disconnectedCallback() { }
+  getTextProps() {
+    return utils.getProps(this);
+  }
+  render() {
+    const props = index_module.isDemo()
+      ? useDemoPayoutStatusAlert(this)
+      : usePayoutStatus.usePayoutStatus(this);
+    return index.h(PayoutStatusAlertView, Object.assign({}, props));
+  }
+};
+function useDemoPayoutStatusAlert(props) {
+  return cjs.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 });
+}
+
 function usePortalChangePassword(props) {
   var _a, _b, _c, _d, _e, _f, _g;
   const [request, { loading, errors, data }] = index_module.Ue();
@@ -2017,67 +2392,6 @@ 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] = stencilHooks_module.useState("");
-  const urlParams = new URLSearchParams(index_module.jn.location.search);
-  const nextPageOverride = urlParams.get("nextPage");
-  const googleSubmit = async (e) => {
-    var _a, _b, _c;
-    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"]))
-        setError(props.networkErrorMessage);
-      return;
-    }
-    if ((_c = result.authenticateManagedIdentityWithGoogle) === null || _c === void 0 ? void 0 : _c.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 PortalLogin = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -2135,17 +2449,13 @@ const PortalLogin = class {
      * @uiName Register CTA
      */
     this.registerCTA = "Don't have an account?";
-    /**
-     * @undocumented
-     */
-    this.showGoogleLogin = false;
     stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {
     const { states, callbacks } = index_module.isDemo()
       ? useLoginDemo(this)
-      : usePortalLogin(this);
+      : usePortalLogin.usePortalLogin(this);
     const styles = {
       RegisterButton: {
         "&::part(label)": {
@@ -2157,14 +2467,14 @@ const PortalLogin = class {
     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: this.showGoogleLogin ? (index.h("sqm-google-sign-in", { onInitComplete: callbacks.googleSubmit })) : null,
-      secondaryButton: (index.h("slot", { name: "secondaryButton" }, index.h("style", null, styleString), this.showGoogleLogin ? (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))) : (index.h("sl-button", { type: "text", disabled: states.loading, onClick: () => index_module.jn.push(states.registerPath) }, this.registerLabel)))),
+      googleButton: null,
+      secondaryButton: (index.h("slot", { name: "secondaryButton" }, index.h("style", null, styleString), index.h("sl-button", { 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 }));
+    return (index.h(sqmPortalLoginView.PortalLoginView, { states: states, callbacks: callbacks, content: content }));
   }
 };
 function useLoginDemo(props) {
@@ -2653,7 +2963,7 @@ const ProgramMenu = class {
   }
 };
 
-const style$2 = {
+const style$4 = {
   Container: {
     borderRadius: "var(--sl-border-radius-large)",
     color: "var(--sl-color-neutral-900)",
@@ -2681,15 +2991,15 @@ const style$2 = {
     },
   },
 };
-const sheet$2 = JSS.createStyleSheet(style$2);
-const styleString$2 = sheet$2.toString();
+const sheet$4 = JSS.createStyleSheet(style$4);
+const styleString$4 = sheet$4.toString();
 const vanillaStyle$1 = `
     :host{
       display: block;   
     }
   `;
 function ReferralCardView(props) {
-  return (index.h("div", { part: "sqm-base", class: sheet$2.classes.Container, style: {
+  return (index.h("div", { part: "sqm-base", class: sheet$4.classes.Container, style: {
       border: `${props.hideBorder ? "none" : "1px solid var(--sl-color-neutral-300)"}`,
       "padding-top": `var(--sl-spacing-${props.paddingTop})`,
       "padding-right": `var(--sl-spacing-${props.paddingRight})`,
@@ -2700,15 +3010,15 @@ function ReferralCardView(props) {
       margin: `${props.limitWidth ? "auto" : "none"}`,
     } },
     index.h("style", { type: "text/css" },
-      styleString$2,
+      styleString$4,
       vanillaStyle$1),
-    props.hasHeader && (index.h("div", { class: sheet$2.classes.EndContainer }, props.slots.header)),
-    index.h("div", { part: "sqm-column-container", class: sheet$2.classes.ColumnContainer, style: {
+    props.hasHeader && (index.h("div", { class: sheet$4.classes.EndContainer }, props.slots.header)),
+    index.h("div", { part: "sqm-column-container", class: sheet$4.classes.ColumnContainer, style: {
         alignItems: props.verticalAlignment,
       } },
       props.slots.left,
       props.slots.right),
-    props.hasFooter && (index.h("div", { class: sheet$2.classes.EndContainer }, props.slots.footer))));
+    props.hasFooter && (index.h("div", { class: sheet$4.classes.EndContainer }, props.slots.footer))));
 }
 
 const ReferralCard = class {
@@ -3934,106 +4244,6 @@ const SqmRouter = class {
 };
 SqmRouter.style = sqmRouterCss;
 
-const REVEAL_EVENT = "sq:reveal";
-function useScroll(props) {
-  const { scrollTagName, scrollId } = props;
-  async function scroll() {
-    const element = document === null || document === void 0 ? void 0 : document.querySelector(scrollTagName || `#${scrollId}`);
-    element.dispatchEvent(new CustomEvent(REVEAL_EVENT, {
-      detail: scrollTagName || `#${scrollId}`,
-      bubbles: true,
-      composed: true,
-    }));
-    await new Promise((resolve) => setTimeout(resolve, 500));
-    element.scrollIntoView({ behavior: props.scrollAnimation });
-  }
-  return {
-    callbacks: { scroll },
-  };
-}
-
-const Scroll = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.ignored = true;
-    /**
-     * @uiName Button type
-     * @uiType string
-     * @uiEnum ["default", "primary", "success", "neutral", "warning", "danger", "text"]
-     * @uiEnumNames ["Default", "Primary", "Success", "Neutral", "Warning", "Danger", "Text"]
-  
-     */
-    this.buttonType = "default";
-    /**
-     * @uiName Scroll animation style
-     * @uiType string
-     * @uiEnum ["smooth", "auto"]
-     * @uiEnumNames ["Smooth", "Auto"]
-     */
-    this.scrollAnimation = "smooth";
-    stencilHooks_module.h$1(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    var _a;
-    const { callbacks } = useScroll(this);
-    const outlineColor = (_a = this.buttonType) !== null && _a !== void 0 ? _a : "primary";
-    const style = {
-      Button: {
-        "& .outline": {
-          "&::part(base)": {
-            color: "var(--sl-color-" + outlineColor + "-500)",
-            borderColor: "var(--sl-color-" + outlineColor + "-500)",
-            backgroundColor: "transparent",
-            "&:hover": {
-              color: "var(--sl-color-primary-text)",
-              backgroundColor: "var(--sl-color-" + outlineColor + "-500)",
-            },
-          },
-        },
-        "& .neutral": {
-          "&::part(base)": {
-            color: "var(--sl-color-primary-text)",
-            background: "var(--sl-color-neutral-500)",
-            "&:hover": {
-              opacity: "0.8",
-            },
-          },
-        },
-        "& .mobile": {
-          "@media (max-width: 499px)": {
-            width: "100%",
-          },
-        },
-      },
-    };
-    const sheet = JSS.createStyleSheet(style);
-    const styleString = sheet.toString();
-    const vanillaStyle = `
-		:host{
-			display: contents;
-		}
-		${this.mobile &&
-      `
-		@media only screen and (max-width: 499px) {
-			:host {
-				display: block;
-				width: 100%;
-			}
-		}
-	  `}
-	`;
-    let classStack = "";
-    if (this.outline && this.buttonType != "default")
-      classStack += "outline ";
-    if (this.buttonType === "neutral")
-      classStack += "neutral ";
-    if (this.mobile)
-      classStack += "mobile ";
-    return (index.h("div", { class: sheet.classes.Button }, index.h("style", { type: "text/css" }, vanillaStyle, styleString), index.h("sl-button", { type: this.buttonType, onClick: callbacks.scroll, size: this.size, pill: this.pill, circle: this.circle, class: classStack }, (this.iconSlot || this.iconName) && (index.h("sl-icon", { slot: this.iconSlot || "prefix", name: this.iconName })), this.buttonText, index.h("slot", null))));
-  }
-};
-
 const sqmShareButtonCss = ":host{display:block}:host([hidden]){display:none}sl-button{display:block}";
 
 const ShareButton = class {
@@ -4531,7 +4741,7 @@ const Gift = () => (index.h("svg", { width: "24", height: "24", viewBox: "0 0 24
 const Circle = () => (index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
   index.h("circle", { cx: "12", cy: "12", r: "9", fill: "currentColor", stroke: "currentColor", "stroke-width": "2" })));
 
-const style$3 = {
+const style$5 = {
   TimelineReward: {
     color: "var(--sl-color-neutral-900)",
     lineHeight: "var(--sl-line-height-dense)",
@@ -4574,8 +4784,8 @@ const style$3 = {
     },
   },
 };
-const sheet$3 = JSS.createStyleSheet(style$3);
-const styleString$3 = sheet$3.toString();
+const sheet$5 = JSS.createStyleSheet(style$5);
+const styleString$5 = sheet$5.toString();
 const vanillaStyle$2 = `
 	:host{
 		display: block; 
@@ -4588,9 +4798,9 @@ const vanillaStyle$2 = `
 function TimelineEntryView(props) {
   var _a;
   const timeline_icon = (_a = props.icon) !== null && _a !== void 0 ? _a : props.iconState;
-  return (index.h("div", { class: sheet$3.classes.TimelineReward, part: "sqm-base" },
+  return (index.h("div", { class: sheet$5.classes.TimelineReward, part: "sqm-base" },
     index.h("style", { type: "text/css" },
-      styleString$3,
+      styleString$5,
       vanillaStyle$2),
     index.h("div", { class: "container", part: "sqm-entry-container" },
       index.h("div", { class: "line" }, "/"),
@@ -4698,6 +4908,8 @@ exports.sqm_leaderboard = Leaderboard;
 exports.sqm_link_button = LinkButton;
 exports.sqm_name_fields = NameFields;
 exports.sqm_navigation_menu = NavigationMenu;
+exports.sqm_payout_button_scroll = PayoutButtonScroll;
+exports.sqm_payout_status_alert = PayoutStatusAlert;
 exports.sqm_portal_change_password = PortalChangePassword;
 exports.sqm_portal_footer = PortalFooter;
 exports.sqm_portal_frame = PortalFrame;
@@ -4710,7 +4922,6 @@ exports.sqm_referral_card = ReferralCard;
 exports.sqm_referral_iframe = SqmReferralIframe;
 exports.sqm_reward_exchange_list = SqmRewardExchangeList;
 exports.sqm_router = SqmRouter;
-exports.sqm_scroll = Scroll;
 exports.sqm_share_button = ShareButton;
 exports.sqm_share_code = ShareCode;
 exports.sqm_share_link = ShareLink;