@saasquatch/mint-components 2.0.3 → 2.0.4-10

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h as h$1, c as Host } from './index-b3a06de8.js';
-import { b as buildFontsCssUrl, i as intl } from './global-58a69018.js';
+import { b as buildFontsCssUrl, i as intl } from './global-536c422d.js';
 import { n as h, f as useEffect, i as d, k as useState, m as useRef, u as useMemo, b as browser, j as useReducer } from './dom-context-hooks.module-63370afd.js';
 import { i as isDemo, _ as _$1, d as dist, J, H, B, $ as $e, w as wn, u as useCallback, L, y as yn, j as jn, q as Ue, r as un, V as Ve, b as setUserIdentity, Q as Qe, k as kn, M as Mn, I as In, S as Sn } from './index.module-c9811a48.js';
 import { j as jsonpointer } from './jsonpointer-388a7082.js';
@@ -17,17 +17,17 @@ import { p as pathToRegexp } from './index-ffa26b43.js';
 import { E as EmailRegistrationView } from './email-registration-view-1f587f8b.js';
 import { R as REGISTRATION_FORM_STATE_CONTEXT, u as useRegistrationFormState } from './useRegistrationFormState-24d594ea.js';
 import { u as useInstantAccessRegistration } from './useInstantAccessRegistration-dda1f52b.js';
-import { R as RequiredPropsError, L as LEAD_FORM_STATE_CONTEXT, u as useLeadFormState } from './useLeadFormState-8d4b2620.js';
+import { R as RequiredPropsError, L as LEAD_FORM_STATE_CONTEXT, u as useLeadFormState } from './useLeadFormState-5a6188da.js';
 import { P as PortalLoginView } from './sqm-portal-login-view-7670cd86.js';
 import { u as usePortalLogin } from './usePortalLogin-f95bbc67.js';
 import { A as AsYouType } from './AsYouType-46f67d0d.js';
 import { i as isEmpty } from './utilities-72c07b09.js';
 import { E as ErrorView } from './ErrorView-bbf0a042.js';
-import { u as useDemoBigStat, W as useBigStat, B as BigStatView, C as CardFeedView, c as CheckboxFieldView, e as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, U as LeadDropdownFieldView, Q as LeadFormView, X as withShadowView, L as LeaderboardView, N as NameFieldsView, f as ChangeMarktingView, P as PortalChangePasswordView, g as PortalFooterView, h as PortalForgotPasswordView, i as PortalFrameView, d as PortalRegisterView, R as ReferralIframeView, j as RewardExchangeView, Y as demoRewardExchange, J as useShareButton, a as ShareButtonView, K as useShareLink, S as StatContainerView, T as TaskCardView } from './ShadowViewAddon-7a242b65.js';
+import { u as useDemoBigStat, W as useBigStat, B as BigStatView, C as CardFeedView, c as CheckboxFieldView, e as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, U as LeadDropdownFieldView, Q as LeadFormView, X as withShadowView, L as LeaderboardView, N as NameFieldsView, f as ChangeMarktingView, P as PortalChangePasswordView, g as PortalFooterView, h as PortalForgotPasswordView, i as PortalFrameView, d as PortalRegisterView, R as ReferralIframeView, j as RewardExchangeView, Y as demoRewardExchange, J as useShareButton, a as ShareButtonView, K as useShareLink, S as StatContainerView, T as TaskCardView } from './ShadowViewAddon-fe2896cb.js';
 import './sqm-portal-container-view-176e92e3.js';
-import { g as getCountryObj, L as LoadingView } from './utils-2695a43e.js';
+import { g as getCountryObj, L as LoadingView } from './utils-fafc712f.js';
 import { p as parseStates, e as extractProps } from './extractProps-54064fb0.js';
-import { u as usePayoutStatus, T as TAX_CONTEXT_NAMESPACE, a as TAX_FORM_CONTEXT_NAMESPACE, U as USER_FORM_CONTEXT_NAMESPACE, C as CURRENCIES_NAMESPACE, b as COUNTRIES_NAMESPACE, S as SORTED_COUNTRIES_NAMESPACE, c as USER_QUERY_NAMESPACE, G as GET_USER$2, d as COUNTRIES_QUERY_NAMESPACE, e as GET_COUNTRIES, F as FINANCE_NETWORK_SETTINGS_NAMESPACE, f as GET_FINANCE_NETWORK_SETTINGS, g as CURRENCIES_QUERY_NAMESPACE, h as GET_CURRENCIES } from './data-acdb790f.js';
+import { u as usePayoutStatus, T as TAX_CONTEXT_NAMESPACE, a as TAX_FORM_CONTEXT_NAMESPACE, U as USER_FORM_CONTEXT_NAMESPACE, C as CURRENCIES_NAMESPACE, b as COUNTRIES_NAMESPACE, S as SORTED_COUNTRIES_NAMESPACE, c as USER_QUERY_NAMESPACE, G as GET_USER$2, d as COUNTRIES_QUERY_NAMESPACE, e as GET_COUNTRIES, F as FINANCE_NETWORK_SETTINGS_NAMESPACE, f as GET_FINANCE_NETWORK_SETTINGS, g as CURRENCIES_QUERY_NAMESPACE, h as GET_CURRENCIES } from './data-68816061.js';
 
 /**
  *
@@ -53,6 +53,10 @@ const Netflix = {
     borderThickness: 1,
   },
   color: {
+    loadingSkeleton: {
+      background: "#272727",
+      animationBackground: "#E50914",
+    },
     textColorShades: {
       mainText: "white",
       subduedText: "#B3B3B3",
@@ -144,6 +148,10 @@ const Amazon = {
   },
   color: {
     backgroundColor: "#ffffff",
+    loadingSkeleton: {
+      background: "hsl(240 4.8% 95.9%)",
+      animationBackground: "#FF9900",
+    },
     textColorShades: {
       mainText: "#2f2f2f",
       subduedText: "#565959",
@@ -232,6 +240,10 @@ const Spotify = {
     borderThickness: 1,
   },
   color: {
+    loadingSkeleton: {
+      background: "#282928",
+      animationBackground: "#1ed760",
+    },
     textColorShades: {
       mainText: "white",
       subduedText: "white",
@@ -2899,6 +2911,12 @@ function useDemoPayoutButtonScroll(props) {
 }
 
 const style$2 = {
+  ButtonContainer: {
+    display: "flex",
+    gap: "var(--sl-spacing-medium)",
+    marginTop: "var(--sl-spacing-medium)",
+    flexWrap: "wrap",
+  },
   SkeletonOne: {
     width: "50%",
     height: "16px",
@@ -3023,7 +3041,7 @@ function PayoutStatusAlertView(props) {
             icon: "exclamation-triangle",
           };
         }
-      case "ACCOUNT_REVIEW":
+      case "NEW_PAYEE_REVIEW":
         return {
           header: text.accountReviewHeader,
           description: intl.formatMessage({
@@ -3036,6 +3054,92 @@ function PayoutStatusAlertView(props) {
           alertType: "warning",
           icon: "exclamation-triangle",
         };
+      case "PAYMENT_HOLD_ON_CHANGE":
+        return {
+          header: text.paymentHoldOnChangeHeader,
+          description: intl.formatMessage({
+            id: "accountReviewDescription",
+            defaultMessage: text.paymentHoldOnChangeDescription,
+          }, {
+            supportLink: (h$1("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          buttonText: null,
+          alertType: "warning",
+          icon: "exclamation-triangle",
+        };
+      case "BENEFICIARY_NAME_INVALID":
+        return {
+          header: text.beneficiaryNameInvalidHeader,
+          description: intl.formatMessage({
+            id: "accountReviewDescription",
+            defaultMessage: text.beneficiaryNameInvalidDescription,
+          }, {
+            supportLink: (h$1("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          button: (h$1("div", { class: sheet$2.classes.ButtonContainer },
+            h$1("sl-button", { disabled: states.loading, type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton),
+            h$1("sl-button", { disabled: states.loading, type: "secondary", exportparts: "base: secondarybutton-base", onClick: callbacks.onNewFormClick }, text.newFormButton))),
+          alertType: "warning",
+          icon: "exclamation-triangle",
+        };
+      case "BENEFICIARY_NAME_MISMATCH":
+        return {
+          header: text.beneficiaryNameMismatchHeader,
+          description: intl.formatMessage({
+            id: "accountReviewDescription",
+            defaultMessage: text.beneficiaryNameMismatchDescription,
+          }, {
+            supportLink: (h$1("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          button: (h$1("div", { class: sheet$2.classes.ButtonContainer },
+            h$1("sl-button", { disabled: states.loading, type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton),
+            h$1("sl-button", { disabled: states.loading, type: "secondary", exportparts: "base: secondarybutton-base", onClick: callbacks.onNewFormClick }, text.newFormButton))),
+          alertType: "warning",
+          icon: "exclamation-triangle",
+        };
+      case "BANK_TAX_NAME_MISMATCH":
+        return {
+          header: text.bankTaxNameMismatchHeader,
+          description: intl.formatMessage({
+            id: "accountReviewDescription",
+            defaultMessage: text.bankTaxNameMismatchDescription,
+          }, {
+            supportLink: (h$1("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          button: (h$1("div", { class: sheet$2.classes.ButtonContainer },
+            h$1("sl-button", { disabled: states.loading, type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton),
+            h$1("sl-button", { disabled: states.loading, type: "secondary", exportparts: "base: secondarybutton-base", onClick: callbacks.onNewFormClick }, text.newFormButton))),
+          alertType: "warning",
+          icon: "exclamation-triangle",
+        };
+      case "WITHDRAWAL_SETTINGS_INVALID":
+        return {
+          header: text.withdrawalSettingsInvalidHeader,
+          description: intl.formatMessage({
+            id: "accountReviewDescription",
+            defaultMessage: text.withdrawalSettingsInvalidDescription,
+          }, {
+            supportLink: (h$1("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          button: (h$1("div", { class: sheet$2.classes.ButtonContainer },
+            h$1("sl-button", { disabled: states.loading, type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton))),
+          alertType: "warning",
+          icon: "exclamation-triangle",
+        };
+      case "PAYMENT_RETURNED":
+        return {
+          header: text.paymentReturnedHeader,
+          description: intl.formatMessage({
+            id: "accountReviewDescription",
+            defaultMessage: text.paymentReturnedDescription,
+          }, {
+            supportLink: (h$1("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
+          }),
+          button: (h$1("div", { class: sheet$2.classes.ButtonContainer },
+            h$1("sl-button", { disabled: states.loading, type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton))),
+          alertType: "error",
+          icon: "exclamation-triangle",
+        };
       case "HOLD":
         return {
           header: text.holdHeader,
@@ -3057,9 +3161,9 @@ function PayoutStatusAlertView(props) {
       case "OVER_W9_THRESHOLD":
         if (states.enforceUsTaxComplianceOption === "CASH_ONLY")
           return;
-        return data.type === "SquatchJS2" ? (h$1("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.w9RequiredButtonText, "scroll-animation": "smooth" })) : data.type === "SquatchPortal" ? (h$1("sl-button", { type: "default", onClick: callbacks.onTermsClick }, text.w9RequiredButtonText)) : (
+        return data.type === "SquatchJS2" ? (h$1("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.w9RequiredButtonText, "scroll-animation": "smooth" })) : data.type === "SquatchPortal" ? (h$1("sl-button", { type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onTermsClick }, text.w9RequiredButtonText)) : (
         // Demo case
-        h$1("sl-button", { type: "default" }, text.w9RequiredButtonText));
+        h$1("sl-button", { type: "primary", exportparts: "base: primarybutton-base" }, text.w9RequiredButtonText));
       case "INFORMATION_REQUIRED":
         return data.type === "SquatchJS2" ? (h$1("div", { style: { paddingTop: "10px" } },
           h$1("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.informationRequiredButtonText, "scroll-animation": "smooth" }))) : data.type === "SquatchPortal" ? (h$1("div", { style: { paddingTop: "10px" } },
@@ -3071,12 +3175,11 @@ function PayoutStatusAlertView(props) {
         return (h$1("div", { style: { paddingTop: "10px" } },
           h$1("sl-button", { type: "secondary", exportparts: "base: secondarybutton-base", loading: states.veriffLoading, onClick: callbacks.onClick }, text.verificationRequiredButtonText)));
       default:
+        if (alertDetails.button)
+          return alertDetails.button;
         return;
     }
   }
-  if (states.loading) {
-    return h$1("sl-skeleton", { class: sheet$2.classes.SkeletonOne });
-  }
   const alertDetails = getAlert(states.status);
   if (states.status === "DONE" || !alertDetails) {
     return h$1("div", null);
@@ -3084,7 +3187,7 @@ function PayoutStatusAlertView(props) {
   return (h$1("div", { part: "sqm-base" },
     h$1("style", { type: "text/css" }, styleString$2),
     h$1("style", { type: "text/css" }, vanillaStyle$1),
-    h$1("sqm-form-message", { type: alertDetails.alertType },
+    h$1("sqm-form-message", { loading: states.loading, type: alertDetails.alertType },
       h$1("p", { part: "alert-title" }, alertDetails.header),
       h$1("p", { part: "alert-description" }, alertDetails.description),
       getButton(states.status))));
@@ -3097,6 +3200,15 @@ const PayoutStatusAlert = class {
      * @uiName Info required alert header
      */
     this.informationRequiredHeader = "Payout and tax information required";
+    /**
+     *
+     * @uiName Edit payment info button label
+     */
+    this.editPaymentInformationButton = "Edit Payout Information";
+    /**
+     * @uiName Submit new tax form button label
+     */
+    this.newFormButton = "Submit new tax form";
     /**
      * @uiName Info required alert description
      */
@@ -3120,7 +3232,7 @@ const PayoutStatusAlert = class {
     /**
      * @uiName Verification required internal alert header
      */
-    this.verificationRequiredInternalHeader = "Identity Verification in Progress";
+    this.verificationRequiredInternalHeader = "Identity Verification in progress";
     /**
      * @uiName Verification required internal alert description
      */
@@ -3128,7 +3240,7 @@ const PayoutStatusAlert = class {
     /**
      * @uiName Verification review internal alert header
      */
-    this.verificationReviewInternalHeader = "Identity Verification Under Review";
+    this.verificationReviewInternalHeader = "Identity Verification under review";
     /**
      * @uiName Verification review internal alert description
      */
@@ -3136,7 +3248,7 @@ const PayoutStatusAlert = class {
     /**
      * @uiName Verification failed internal alert header
      */
-    this.verificationFailedInternalHeader = "Identity Verification Unsuccessful";
+    this.verificationFailedInternalHeader = "Identity verification unsuccessful";
     /**
      * @uiName Verification failed internal alert description
      */
@@ -3149,6 +3261,54 @@ const PayoutStatusAlert = class {
      * @uiName Account review alert description
      */
     this.accountReviewDescription = "This process takes 48 hours, payouts are on hold until it's completed. You will receive an email from our referral provider, Impact.com, if any issues arise.  It contains details on how to resolve this issue. If you need further assistance, please reach out to our {supportLink}.";
+    /**
+     * @uiName Payment on hold alert header
+     */
+    this.paymentHoldOnChangeHeader = "We are reviewing your new payout settings";
+    /**
+     * @uiName Payment on hold alert description
+     */
+    this.paymentHoldOnChangeDescription = "Your payout is temporarily on hold while we review your new payment information, this process is usually resolved within 48 hours.";
+    /**
+     * @uiName Beneficiary name invalid alert header
+     */
+    this.beneficiaryNameInvalidHeader = "Your payment information does not match your tax form";
+    /**
+     * @uiName Beneficiary name invalid description
+     */
+    this.beneficiaryNameInvalidDescription = "The account holder (beneficiary) name in your payment information does not match what was submitted in your tax form. Please review and update your payment information or tax form so that they match exactly and do not include any invalid characters. Your payouts are on hold until this is resolved.";
+    /**
+     * @uiName Beneficiary name mismatch alert header
+     */
+    this.beneficiaryNameMismatchHeader = "Your payment information does not match your tax form";
+    /**
+     * @uiName Beneficiary name mismatch alert description
+     */
+    this.beneficiaryNameMismatchDescription = "The account holder (beneficiary) name in your payment information does not match what was submitted in your tax form. Please review and update your payment information or tax form so that they match exactly and do not include any invalid characters. Your payouts are on hold until this is resolved.";
+    /**
+     * @uiName Bank name mismatch alert header
+     */
+    this.bankTaxNameMismatchHeader = "Your payment information does not match your tax form";
+    /**
+     * @uiName Bank name mismatch alert description
+     */
+    this.bankTaxNameMismatchDescription = "The bank account (beneficiary) name in your payment information does not match what was submitted in your tax form. Please review and update your payment information or tax form so that they match exactly and do not include any invalid characters. Your payouts are on hold until this is resolved.";
+    /**
+     * @uiName Withdrawal settings invalid alert header
+     */
+    this.withdrawalSettingsInvalidHeader = "Your payment information is incomplete or includes invalid characters";
+    /**
+     * @uiName Withdrawal settings invalid alert description
+     */
+    this.withdrawalSettingsInvalidDescription = "There are missing fields or invalid characters in your payment information. Please review your information and make sure it is correct. Your payouts are on hold until this is resolved.";
+    /**
+     * @uiName Payment returned alert header
+     */
+    this.paymentReturnedHeader = "Payout unsuccessful";
+    /**
+     * @uiName Payment returned alert description
+     */
+    this.paymentReturnedDescription = "Our recent payment attempt for your earnings was unsuccessful. Please review your payment information and make sure it is correct.";
     /**
      * @uiName W-9 payment threshold alert header
      */
@@ -3218,8 +3378,8 @@ function useDemoPayoutStatusAlert(props) {
   return cjs({
     states: {
       error: false,
-      status: "INFORMATION_REQUIRED",
-      loading: false,
+      status: props.demoData.states.status,
+      loading: true,
       veriffLoading: false,
     },
     data: { type: "SquatchAdmin" },
@@ -3227,6 +3387,8 @@ function useDemoPayoutStatusAlert(props) {
     callbacks: {
       onTermsClick: () => { },
       onClick: () => console.log("show"),
+      onPaymentInfoClick: () => { },
+      onNewFormClick: () => { },
     },
   }, formatted || props.demoData || {}, { arrayMerge: (_, a) => a });
 }
@@ -7264,12 +7426,12 @@ const TaxAndCashMonolith = class {
      * @uiName Submit new tax form button label
      * @uiGroup Dashboard Properties
      */
-    this.dashboard_newFormButton = "Submit new form";
+    this.dashboard_newFormButton = "Submit new tax form";
     /**
      * @uiName Edit payment info button label
      * @uiGroup Dashboard Properties
      */
-    this.dashboard_editPaymentInformationButton = "Edit Payout Information";
+    this.dashboard_editPaymentInformationButton = "Edit payout information";
     /**
      * @uiName Not registered for indirect tax text
      * @uiGroup Dashboard Properties
@@ -7421,7 +7583,7 @@ const TaxAndCashMonolith = class {
      * @uiGroup Dashboard Properties
      * @uiWidget textArea
      */
-    this.dashboard_verificationRequiredInternalHeader = "Identity Verification in Progress";
+    this.dashboard_verificationRequiredInternalHeader = "Identity verification in progress";
     /**
      * @uiName Verification required internal alert description
      * @uiGroup Dashboard Properties
@@ -7433,7 +7595,7 @@ const TaxAndCashMonolith = class {
      * @uiGroup Dashboard Properties
      * @uiWidget textArea
      */
-    this.dashboard_verificationReviewInternalHeader = "Identity Verification Under Review";
+    this.dashboard_verificationReviewInternalHeader = "Identity verification under review";
     /**
      * @uiName Verification review internal alert description
      * @uiGroup Dashboard Properties
@@ -7445,7 +7607,7 @@ const TaxAndCashMonolith = class {
      * @uiGroup Dashboard Properties
      * @uiWidget textArea
      */
-    this.dashboard_verificationFailedInternalHeader = "Identity Verification Unsuccessful";
+    this.dashboard_verificationFailedInternalHeader = "Identity verification usuccessful";
     /**
      * @uiName Verification failed internal alert description
      * @uiGroup Dashboard Properties
@@ -7479,6 +7641,54 @@ const TaxAndCashMonolith = class {
      * @uiName Account review alert description
      */
     this.dashboard_accountReviewDescription = "This process takes 48 hours, payouts are on hold until it's completed. You will receive an email from our referral provider, Impact.com, if any issues arise.  It contains details on how to resolve this issue. If you need further assistance, please reach out to our {supportLink}.";
+    /**
+     * @uiName Payment on hold alert header
+     */
+    this.dashboard_paymentOnHoldHeader = "We are reviewing your new payout settings";
+    /**
+     * @uiName Payment on hold alert description
+     */
+    this.dashboard_paymentOnHoldDescription = "Your payout is temporarily on hold while we review your new payment information, this process is usually resolved within 48 hours.";
+    /**
+     * @uiName Beneficiary name invalid alert header
+     */
+    this.dashboard_beneficiaryNameInvalidHeader = "Your payment information does not match your tax form";
+    /**
+     * @uiName Beneficiary name invalid description
+     */
+    this.dashboard_beneficiaryNameInvalidDescription = "The account holder (beneficiary) name in your payment information does not match what was submitted in your tax form. Please review and update your payment information or tax form so that they match exactly and do not include any invalid characters. Your payouts are on hold until this is resolved.";
+    /**
+     * @uiName Beneficiary name mismatch alert header
+     */
+    this.dashboard_beneficiaryNameMismatchHeader = "Your payment information does not match your tax form";
+    /**
+     * @uiName Beneficiary name mismatch alert description
+     */
+    this.dashboard_beneficiaryNameMismatchDescription = "The account holder (beneficiary) name in your payment information does not match what was submitted in your tax form. Please review and update your payment information or tax form so that they match exactly and do not include any invalid characters. Your payouts are on hold until this is resolved.";
+    /**
+     * @uiName Bank name mismatch alert header
+     */
+    this.dashboard_bankNameMismatchHeader = "Your payment information does not match your tax form";
+    /**
+     * @uiName Bank name mismatch alert description
+     */
+    this.dashboard_bankNameMismatchDescription = "The bank account (beneficiary) name in your payment information does not match what was submitted in your tax form. Please review and update your payment information or tax form so that they match exactly and do not include any invalid characters. Your payouts are on hold until this is resolved.";
+    /**
+     * @uiName Withdrawal settings invalid alert header
+     */
+    this.dashboard_withdrawalSettingsInvalidHeader = "Your payment information is incomplete or includes invalid characters";
+    /**
+     * @uiName Withdrawal settings invalid alert description
+     */
+    this.dashboard_withdrawalSettingsInvalidDescription = "There are missing fields or invalid characters in your payment information. Please review your information and make sure it is correct. Your payouts are on hold until this is resolved.";
+    /**
+     * @uiName Payment returned alert header
+     */
+    this.dashboard_paymentReturnedHeader = "Payout unsuccessful";
+    /**
+     * @uiName Payment returned alert description
+     */
+    this.dashboard_paymentReturnedDescription = "Our recent payment attempt for your earnings was unsuccessful. Please review your payment information and make sure it is correct.";
     /**
      * @uiName Terms and Conditions text
      * @uiGroup Dashboard Properties

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

@@ -1,5 +1,5 @@
 import { h, r as registerInstance } from './index-b3a06de8.js';
-import { i as intl } from './global-58a69018.js';
+import { i as intl } from './global-536c422d.js';
 import { l, k as useState, f as useEffect, n as h$1 } from './dom-context-hooks.module-63370afd.js';
 import { d as dist, t as Pn, F as Fn, i as isDemo, p as En } from './index.module-c9811a48.js';
 import { c as cjs } from './cjs-bdfb4486.js';

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

@@ -1,5 +1,5 @@
 import { h, r as registerInstance } from './index-b3a06de8.js';
-import { i as intl } from './global-58a69018.js';
+import { i as intl } from './global-536c422d.js';
 import { k as useState, f as useEffect, n as h$1 } from './dom-context-hooks.module-63370afd.js';
 import { d as dist, t as Pn, w as wn, J, $ as $e, i as isDemo, p as En } from './index.module-c9811a48.js';
 import { c as cjs } from './cjs-bdfb4486.js';
@@ -318,9 +318,12 @@ function WidgetEmailVerificationView(props) {
   const { states, callbacks, text } = props;
   const renderLoadingSkeleton = () => {
     return (h("div", { class: sheet.classes.Wrapper },
-      h("sl-skeleton", { class: sheet.classes.SkeletonOne }),
-      h("sl-skeleton", { class: sheet.classes.SkeletonTwo }),
-      h("sl-skeleton", { class: sheet.classes.SkeletonThree })));
+      h("sqm-skeleton", { height: "16px", width: "50%" }),
+      h("sqm-skeleton", { height: "16px", width: "50%" }),
+      h("sqm-skeleton", { height: "16px", width: "50%" }),
+      h("sqm-skeleton", { height: "34px", width: "30%" }),
+      h("sqm-skeleton", { height: "24px", width: "15%" }),
+      h("sl-button", { submit: true, class: sheet.classes.ContinueButton, loading: true, exportparts: "base: primarybutton-base", type: "primary" }, text.sendCodeText)));
   };
   return (h("div", { part: "sqm-base" },
     h("style", { type: "text/css" },

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

@@ -1,5 +1,5 @@
 import { h, r as registerInstance, c as Host } from './index-b3a06de8.js';
-import { i as intl } from './global-58a69018.js';
+import { i as intl } from './global-536c422d.js';
 import { n as h$1 } from './dom-context-hooks.module-63370afd.js';
 import './index.module-c9811a48.js';
 import { g as getProps } from './utils-334c1e34.js';

package/dist/esm/{sqm-form-message.entry.js → sqm-form-message_2.entry.js}

@@ -7,6 +7,12 @@ const FormMessage = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ignored = true;
+    /**
+     * Loading state for the alert.
+     *
+     * @uiName Loading
+     */
+    this.loading = false;
     /**
      * Render the alert with transparent styles
      */
@@ -15,6 +21,9 @@ const FormMessage = class {
   }
   disconnectedCallback() { }
   render() {
+    if (this.loading) {
+      return h$1("sqm-skeleton", { height: "90px", width: "100%" });
+    }
     if (this.type === "error") {
       return (h$1("sl-alert", { exportparts: "base: erroralert-base, icon:erroralert-icon", class: `Error ${this.transparent ? "Transparent" : ""}`, type: "danger", open: true }, h$1("sl-icon", { id: "icon", slot: "icon", name: `${this.icon ? this.icon : "exclamation-octagon"}` }), h$1("slot", null)));
     }
@@ -31,4 +40,44 @@ const FormMessage = class {
 };
 FormMessage.style = sqmFormMessageCss;
 
-export { FormMessage as sqm_form_message };
+const Skeleton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ignored = true;
+    /**
+     * @uiName Height (in pixels or %)
+     */
+    this.height = "100%";
+    /**
+     * @uiName Width (in pixels or %)
+     */
+    this.width = "100%";
+    this.vanillaStyle = `
+  sl-skeleton::part(indicator) {
+    --sheen-color: var(--sqm-skeleton-animation-background);
+    --color: var(--sqm-skeleton-background);
+    border-radius: var(--sqm-border-radius-normal);
+  }
+
+  sl-skeleton::part(base) {
+    height:${this.height};
+    width:${this.width};
+  }
+
+  :host{
+    display: block;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+  `;
+  }
+  disconnectedCallback() { }
+  render() {
+    console.log("This is the height", this.height);
+    return (h$1("div", null, h$1("style", { type: "text/css" }, this.vanillaStyle), h$1("sl-skeleton", null)));
+  }
+};
+
+export { FormMessage as sqm_form_message, Skeleton as sqm_skeleton };

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

@@ -4,6 +4,16 @@ import { n as h } from './dom-context-hooks.module-63370afd.js';
 const HeroImage = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    /**
+     * @uiName Logo text size (in px)
+     * @uiWidget number
+     */
+    this.logoTextSize = 32;
+    /**
+     * @uiWidget color
+     * @uiName Logo text color
+     */
+    this.logoTextColor = "var(--sqm-primary-color, var(--sqm-text, #555555))";
     /**
      * Page participants are navigated to after clicking the header logo.
      *
@@ -12,14 +22,17 @@ const HeroImage = class {
      */
     this.nextPage = "/";
     /**
-     * @uiName Logo height
+     * @uiName Logo height (in px)
      */
     this.height = 60;
     h(this);
   }
   disconnectedCallback() { }
   render() {
-    return (h$1(Host, null, h$1("a", { href: this.nextPage, part: "sqm-link" }, h$1("img", { style: { height: `${this === null || this === void 0 ? void 0 : this.height}px` }, src: this === null || this === void 0 ? void 0 : this.imageUrl }))));
+    return (h$1(Host, null, h$1("a", { href: this.nextPage, part: "sqm-link", style: { textDecoration: "none" } }, this.imageUrl ? (h$1("img", { style: { height: `${this === null || this === void 0 ? void 0 : this.height}px` }, src: this === null || this === void 0 ? void 0 : this.imageUrl })) : (h$1("h3", { style: {
+        fontSize: `${this.logoTextSize}px`,
+        color: this.logoTextColor,
+      } }, this.logoText)))));
   }
 };
 

package/dist/esm/{sqm-lead-checkbox-field-view-81541e40.js → sqm-lead-checkbox-field-view-5c387852.js}

@@ -1,5 +1,5 @@
 import { h } from './index-b3a06de8.js';
-import { i as intl } from './global-58a69018.js';
+import { i as intl } from './global-536c422d.js';
 import { j as jss, a as create } from './JSS-67b5cff8.js';
 
 const style = {

package/dist/esm/sqm-lead-checkbox-field.entry.js

@@ -1,12 +1,12 @@
 import { r as registerInstance, h as h$1 } from './index-b3a06de8.js';
-import './global-58a69018.js';
+import './global-536c422d.js';
 import { i as d, n as h } from './dom-context-hooks.module-63370afd.js';
 import { i as isDemo } from './index.module-c9811a48.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { a as getMissingProps, g as getProps } from './utils-334c1e34.js';
 import './JSS-67b5cff8.js';
-import { L as LEAD_FORM_STATE_CONTEXT, R as RequiredPropsError } from './useLeadFormState-8d4b2620.js';
-import { L as LeadCheckboxFieldView } from './sqm-lead-checkbox-field-view-81541e40.js';
+import { L as LEAD_FORM_STATE_CONTEXT, R as RequiredPropsError } from './useLeadFormState-5a6188da.js';
+import { L as LeadCheckboxFieldView } from './sqm-lead-checkbox-field-view-5c387852.js';
 
 function useLeadCheckboxField() {
   const leadFormState = d(LEAD_FORM_STATE_CONTEXT);

package/dist/esm/{sqm-lead-input-field-view-d543d939.js → sqm-lead-input-field-view-fa2488c9.js}

@@ -1,5 +1,5 @@
 import { h } from './index-b3a06de8.js';
-import { i as intl } from './global-58a69018.js';
+import { i as intl } from './global-536c422d.js';
 import { j as jss, a as create } from './JSS-67b5cff8.js';
 import { E as ErrorStyles } from './mixins-f750863a.js';
 

package/dist/esm/sqm-lead-input-field.entry.js

@@ -1,13 +1,13 @@
 import { r as registerInstance, h as h$1 } from './index-b3a06de8.js';
-import './global-58a69018.js';
+import './global-536c422d.js';
 import { i as d, n as h } from './dom-context-hooks.module-63370afd.js';
 import { i as isDemo } from './index.module-c9811a48.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { g as getProps, a as getMissingProps } from './utils-334c1e34.js';
 import './JSS-67b5cff8.js';
 import './mixins-f750863a.js';
-import { L as LEAD_FORM_STATE_CONTEXT, R as RequiredPropsError } from './useLeadFormState-8d4b2620.js';
-import { L as LeadInputFieldView } from './sqm-lead-input-field-view-d543d939.js';
+import { L as LEAD_FORM_STATE_CONTEXT, R as RequiredPropsError } from './useLeadFormState-5a6188da.js';
+import { L as LeadInputFieldView } from './sqm-lead-input-field-view-fa2488c9.js';
 
 function useLeadInputField() {
   const leadFormState = d(LEAD_FORM_STATE_CONTEXT);

package/dist/esm/sqm-leaderboard-rank.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h as h$1 } from './index-b3a06de8.js';
-import { i as intl } from './global-58a69018.js';
+import { i as intl } from './global-536c422d.js';
 import { n as h } from './dom-context-hooks.module-63370afd.js';
 import { d as dist, H, J, w as wn, i as isDemo } from './index.module-c9811a48.js';
 import { c as cjs } from './cjs-bdfb4486.js';

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

@@ -1,5 +1,5 @@
 import { h, F as Fragment, r as registerInstance } from './index-b3a06de8.js';
-import { i as intl } from './global-58a69018.js';
+import { i as intl } from './global-536c422d.js';
 import { n as h$1, k as useState } from './dom-context-hooks.module-63370afd.js';
 import { F as Fn, i as isDemo, d as dist, H, J, B, w as wn, $ as $e } from './index.module-c9811a48.js';
 import { c as cjs } from './cjs-bdfb4486.js';
@@ -398,7 +398,7 @@ function LoadingSlot() {
   return (h("slot", { name: "loading" }, h(LoadingRow, null), h(LoadingRow, null), h(LoadingRow, null), h(LoadingRow, null)));
 }
 function LoadingRow() {
-  return h("sl-skeleton", { style: { width: "100%" } });
+  return h("sqm-skeleton", null);
 }
 function useDemoReferralCodes(props) {
   return cjs({