@saasquatch/mint-components 2.0.4-9 → 2.0.5-0

package/dist/cjs/sqm-banking-info-form_10.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a43a63b4.js');
-const global = require('./global-94f36ad7.js');
+const global = require('./global-e862bfd4.js');
 const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
 const index_module = require('./index.module-4f54e412.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
@@ -16,8 +16,8 @@ const reRender = require('./re-render-d516138a.js');
 const useChildElements = require('./useChildElements-966c9041.js');
 const luxon = require('./luxon-949beaf2.js');
 const useReferralTable = require('./useReferralTable-90d4d6e9.js');
-const IndirectTaxDetailsView = require('./IndirectTaxDetailsView-d39b895d.js');
-const utils$1 = require('./utils-5ecfecd9.js');
+const IndirectTaxDetailsView = require('./IndirectTaxDetailsView-659a139c.js');
+const utils$1 = require('./utils-4eb18a29.js');
 const keys = require('./keys-cff24974.js');
 const data = require('./data-44260010.js');
 
@@ -2484,7 +2484,7 @@ const IndirectTaxFormView = (props) => {
         }, {
           supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
         }))),
-      states.isPartner && (index.h("sqm-form-message", { loading: states.loading, type: "info" },
+      states.isPartner && (index.h("sqm-form-message", { type: "info" },
         index.h("p", { part: "alert-title" }, text.isPartnerAlertHeader),
         global.intl.formatMessage({
           id: "isPartnerAlertDescription",
@@ -3271,7 +3271,7 @@ function LoadingSlot() {
   return (index.h("slot", { name: "loading" }, index.h(LoadingRow, null), index.h(LoadingRow, null), index.h(LoadingRow, null), index.h(LoadingRow, null)));
 }
 function LoadingRow() {
-  return (index.h("sqm-table-row", null, index.h("sqm-table-cell", { colspan: 6 }, index.h("sqm-skeleton", null))));
+  return (index.h("sqm-table-row", null, index.h("sqm-table-cell", { colspan: 6 }, index.h("sl-skeleton", null))));
 }
 function useInvoiceTableDemo(props, emptyElement, loadingElement) {
   const [content, setContent] = domContextHooks_module.useReducer((state, next) => ({
@@ -3557,11 +3557,11 @@ function PayoutDetailsCardView(props) {
   const { states, text } = props;
   const renderLoadingSkeleton = () => {
     return (index.h("div", { class: classes.CardContainer },
-      index.h("div", { class: classes.StatusContainer, style: { display: "block" } },
-        index.h("sqm-skeleton", { style: { marginBottom: "var(--sl-spacing-medium)" }, width: "25%", height: "16px" }),
-        index.h("sqm-skeleton", { width: "25%", height: "24px" })),
-      index.h("sqm-skeleton", { width: "50%", height: "34px" }),
-      index.h("sqm-skeleton", { width: "25%", height: "16px" })));
+      index.h("div", { class: classes.StatusContainer },
+        index.h("sl-skeleton", { class: classes.SkeletonOne }),
+        index.h("sl-skeleton", { class: classes.SkeletonTwo })),
+      index.h("sl-skeleton", { class: classes.SkeletonThree }),
+      index.h("sl-skeleton", { class: classes.SkeletonOne })));
   };
   const renderStatusBadge = (status, statusBadgeText) => {
     const badgeType = status === "nextPayout" ? "success" : "primary";
@@ -3834,6 +3834,16 @@ const style$5 = {
   EditBankDetailsButton: {
     marginTop: "var(--sl-spacing-large)",
   },
+  SkeletonOne: {
+    width: "15%",
+    height: "10px",
+  },
+  SkeletonTwo: {
+    width: "25%",
+    height: "24px",
+    top: "var(--sl-spacing-small)",
+    marginBottom: "var(--sl-spacing-x-small)",
+  },
   TaxSectionSkeletonContainer: {
     display: "flex",
     flexDirection: "column",
@@ -4269,7 +4279,7 @@ const TaxAndCashDashboardView = (props) => {
         }, {
           supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
         }))),
-      alertInfo && (index.h("sqm-form-message", { loading: states.loading, exportparts: "base: alert-base, icon:alert-icon", type: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.alertType, class: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.class, icon: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.icon, transparent: true },
+      alertInfo && (index.h("sqm-form-message", { exportparts: "base: alert-base, icon:alert-icon", type: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.alertType, class: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.class, icon: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.icon, transparent: true },
         index.h("strong", null, alertInfo.header),
         index.h("p", { style: { margin: "0" } }, alertInfo.description),
         alertInfo.buttonText && (index.h("sl-button", { style: { marginTop: "var(--sl-spacing-x-small)" }, type: "default", loading: states.veriffLoading, onClick: () => callbacks.onVerifyClick() }, alertInfo.buttonText)),
@@ -4287,8 +4297,8 @@ const TaxAndCashDashboardView = (props) => {
           states.canEditPayoutInfo && (index.h("sl-button", { disabled: states.disabled || states.loading, exportparts: "base: secondarybutton-base", type: "secondary", class: sheet$4.classes.EditBankDetailsButton, onClick: callbacks.onEditPayoutInfo }, text.editPaymentInformationButton)))),
       (!states.noFormNeeded || states.status === "NOT_VERIFIED") && (index.h("div", { class: sheet$4.classes.TaxDocumentsContainer },
         index.h("div", null, states.loading ? (index.h("div", { class: sheet$4.classes.TaxSectionSkeletonContainer },
-          index.h("sqm-skeleton", { width: "15%", height: "10px" }),
-          index.h("sqm-skeleton", { width: "25%", height: "24px" }))) : (index.h("div", null,
+          index.h("sl-skeleton", { class: sheet$4.classes.SkeletonOne }),
+          index.h("sl-skeleton", { class: sheet$4.classes.SkeletonTwo }))) : (index.h("div", null,
           index.h("div", null,
             index.h("span", { class: sheet$4.classes.TaxFormDetailsContainer },
               index.h("div", { class: sheet$4.classes.StatusContainer },
@@ -4302,8 +4312,8 @@ const TaxAndCashDashboardView = (props) => {
             states.noFormNeeded &&
               states.status !== "NOT_VERIFIED" && (index.h("sl-button", { disabled: states.disabled || states.loading, onClick: callbacks.onClick, type: "default", class: sheet$4.classes.NewFormButton, exportparts: "base: primarybutton-base" }, text.newFormButton)))))))),
       index.h("div", { class: sheet$4.classes.IndirectTaxPreviewContainer }, states.loading ? (index.h("div", { class: sheet$4.classes.TaxSectionSkeletonContainer },
-        index.h("sqm-skeleton", { width: "15%", height: "10px" }),
-        index.h("sqm-skeleton", { width: "25%", height: "24px" }))) : (index.h("div", null,
+        index.h("sl-skeleton", { class: sheet$4.classes.SkeletonOne }),
+        index.h("sl-skeleton", { class: sheet$4.classes.SkeletonTwo }))) : (index.h("div", null,
         index.h("h3", { class: sheet$4.classes.IndirectTaxPreviewHeaderContainer },
           text.indirectTaxInfoSectionHeader,
           index.h("sl-tooltip", { trigger: "hover", placement: "right", content: text.indirectTaxTooltipSupport, class: sheet$4.classes.TooltipContainer },
@@ -6186,10 +6196,14 @@ const UserInfoFormView = (props) => {
     default:
       regionLabel = text.state;
   }
-  function isDisabledInput(field) {
+  function isDisabledPartnerInput(field) {
     var _a;
     return states.isPartner && !!((_a = data$1.partnerData) === null || _a === void 0 ? void 0 : _a[field]);
   }
+  function isDisabledUserInput(field) {
+    var _a;
+    return states.isUser && !!((_a = states.formState) === null || _a === void 0 ? void 0 : _a[field]);
+  }
   return (index.h("sl-form", { class: classes.FormWrapper, "onSl-submit": callbacks.onSubmit, ref: (el) => (refs.formRef.current = el), novalidate: true },
     index.h("style", { type: "text/css" },
       styleString$5,
@@ -6220,7 +6234,7 @@ const UserInfoFormView = (props) => {
         }, {
           supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
         })))),
-      (states.isPartner || states.isUser) && (index.h("sqm-form-message", { loading: states.loading, type: "info" },
+      (states.isPartner || states.isUser) && (index.h("sqm-form-message", { type: "info" },
         index.h("p", { part: "alert-title" }, text.isPartnerAlertHeader),
         index.h("p", { part: "alert-description" }, global.intl.formatMessage({
           id: "isPartnerAlertDescription",
@@ -6231,21 +6245,21 @@ const UserInfoFormView = (props) => {
       index.h("div", null,
         index.h("div", { class: classes.InputContainer },
           index.h("sl-input", Object.assign({ class: "ErrorInput", exportparts: "label: input-label, base: input-base", value: formState.firstName, label: text.firstName, disabled: states.disabled ||
-              states.isUser ||
-              isDisabledInput("firstName") }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.firstName) ? {
+              isDisabledUserInput("firstName") ||
+              isDisabledPartnerInput("firstName") }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.firstName) ? {
             class: classes.ErrorInput,
             helpText: utils$1.formatErrorMessage(text.firstName, formState.errors.firstName),
           }
             : {}), { id: "firstName", name: "/firstName", required: true })),
           index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", value: formState.lastName, label: text.lastName, disabled: states.disabled ||
-              states.isUser ||
-              isDisabledInput("lastName") }, (((_c = formState.errors) === null || _c === void 0 ? void 0 : _c.lastName) ? {
+              isDisabledUserInput("lastName") ||
+              isDisabledPartnerInput("lastName") }, (((_c = formState.errors) === null || _c === void 0 ? void 0 : _c.lastName) ? {
             class: classes.ErrorInput,
             helpText: utils$1.formatErrorMessage(text.lastName, formState.errors.lastName),
           }
             : {}), { id: "lastName", name: "/lastName", required: true })),
           index.h("sl-input", { exportparts: "label: input-label, base: input-base", value: formState.email, label: text.email, disabled: true, id: "email", name: "/email", required: true }),
-          index.h("sl-select", Object.assign({ id: "countryCode", exportparts: "label: input-label, base: input-base", name: "/countryCode", label: text.country, value: formState.countryCode, disabled: states.disabled || isDisabledInput("countryCode") }, (((_d = formState.errors) === null || _d === void 0 ? void 0 : _d.countryCode) ? {
+          index.h("sl-select", Object.assign({ id: "countryCode", exportparts: "label: input-label, base: input-base", name: "/countryCode", label: text.country, value: formState.countryCode, disabled: states.disabled || isDisabledPartnerInput("countryCode") }, (((_d = formState.errors) === null || _d === void 0 ? void 0 : _d.countryCode) ? {
             class: classes.ErrorInput,
             helpText: utils$1.formatErrorMessage(text.country, formState.errors.countryCode),
           }
@@ -6262,7 +6276,7 @@ const UserInfoFormView = (props) => {
             index.h("p", null, text.phoneNumber),
             index.h("div", { class: classes.PhoneInputsContainer },
               index.h("sl-select", Object.assign({ id: "phoneNumberCountryCode", exportparts: "label: input-label, base: input-base", name: "/phoneNumberCountryCode", value: formState.phoneNumberCountryCode, disabled: states.disabled ||
-                  isDisabledInput("phoneNumberCountryCode"), ref: (el) => (refs.phoneCountryRef.current = el) }, (((_g = formState.errors) === null || _g === void 0 ? void 0 : _g.phoneNumberCountryCode) ? {
+                  isDisabledPartnerInput("phoneNumberCountryCode"), ref: (el) => (refs.phoneCountryRef.current = el) }, (((_g = formState.errors) === null || _g === void 0 ? void 0 : _g.phoneNumberCountryCode) ? {
                 class: classes.ErrorInput,
               }
                 : {}), { required: true, "onSl-select": (e) => callbacks.onFormChange("phoneCountry", e) }),
@@ -6288,7 +6302,7 @@ const UserInfoFormView = (props) => {
                   // Naive phone number validation
                   utils$1.validateBillingField(/[a-zA-Z]+/, value) &&
                     utils$1.formatErrorMessage(text.phoneNumber, text.error.fieldInvalidError);
-                }, disabled: states.disabled || isDisabledInput("phoneNumber") }, (((_k = formState.errors) === null || _k === void 0 ? void 0 : _k.phoneNumber) ? {
+                }, disabled: states.disabled || isDisabledPartnerInput("phoneNumber") }, (((_k = formState.errors) === null || _k === void 0 ? void 0 : _k.phoneNumber) ? {
                 class: classes.ErrorInput,
                 helpText: utils$1.formatErrorMessage(text.phoneNumber, formState.errors.phoneNumber),
               }
@@ -6296,7 +6310,7 @@ const UserInfoFormView = (props) => {
           index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", label: text.address, id: "address", name: "/address", value: formState.address, validationError: ({ value }) => 
             // Checks for non-ASCII characters
             !utils$1.validateBillingField(/^[\x20-\xFF]+$/, value) &&
-              utils$1.formatErrorMessage(text.address, text.error.invalidCharacterError), disabled: states.disabled || isDisabledInput("billingAddress") }, (((_l = formState.errors) === null || _l === void 0 ? void 0 : _l.address) ? {
+              utils$1.formatErrorMessage(text.address, text.error.invalidCharacterError), disabled: states.disabled || isDisabledPartnerInput("billingAddress") }, (((_l = formState.errors) === null || _l === void 0 ? void 0 : _l.address) ? {
             class: classes.ErrorInput,
             helpText: utils$1.formatErrorMessage(text.address, formState.errors.address),
           }
@@ -6304,22 +6318,22 @@ const UserInfoFormView = (props) => {
           index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", label: text.city, id: "city", name: "/city", value: formState.city, validationError: ({ value }) => 
             // Checks for non-ASCII characters
             !utils$1.validateBillingField(/^[\x20-\xFF]+$/, value) &&
-              utils$1.formatErrorMessage(text.city, text.error.invalidCharacterError), disabled: states.disabled || isDisabledInput("billingCity") }, (((_m = formState.errors) === null || _m === void 0 ? void 0 : _m.city) ? {
+              utils$1.formatErrorMessage(text.city, text.error.invalidCharacterError), disabled: states.disabled || isDisabledPartnerInput("billingCity") }, (((_m = formState.errors) === null || _m === void 0 ? void 0 : _m.city) ? {
             class: classes.ErrorInput,
             helpText: utils$1.formatErrorMessage(text.city, formState.errors.city),
           }
             : {}), { required: true })),
-          !states.hideState && (index.h("sl-select", Object.assign({ label: regionLabel, exportparts: "label: input-label, base: input-base", id: "state", name: "/state", value: formState.state, disabled: states.disabled || isDisabledInput("billingState") }, (((_o = formState.errors) === null || _o === void 0 ? void 0 : _o.state) ? {
+          !states.hideState && (index.h("sl-select", Object.assign({ label: regionLabel, exportparts: "label: input-label, base: input-base", id: "state", name: "/state", value: formState.state, disabled: states.disabled || isDisabledPartnerInput("billingState") }, (((_o = formState.errors) === null || _o === void 0 ? void 0 : _o.state) ? {
             class: classes.ErrorInput,
             helpText: utils$1.formatErrorMessage(text.state, formState.errors.state),
           }
             : {}), { required: true }), (_p = data$1.regions) === null || _p === void 0 ? void 0 : _p.map((r) => (index.h("sl-menu-item", { value: r.value }, r.label))))),
-          index.h("sl-input", Object.assign({ label: text.postalCode, exportparts: "label: input-label, base: input-base", id: "postalCode", name: "/postalCode", value: formState.postalCode, disabled: states.disabled || isDisabledInput("billingPostalCode") }, (((_q = formState.errors) === null || _q === void 0 ? void 0 : _q.postalCode) ? {
+          index.h("sl-input", Object.assign({ label: text.postalCode, exportparts: "label: input-label, base: input-base", id: "postalCode", name: "/postalCode", value: formState.postalCode, disabled: states.disabled || isDisabledPartnerInput("billingPostalCode") }, (((_q = formState.errors) === null || _q === void 0 ? void 0 : _q.postalCode) ? {
             class: classes.ErrorInput,
             helpText: utils$1.formatErrorMessage(text.postalCode, formState.errors.postalCode),
           }
             : {}), { required: true })),
-          index.h("sl-select", Object.assign({ id: "currency", exportparts: "label: input-label, base: input-base", name: "/currency", label: text.currency, menu: true, value: formState.currency, disabled: states.disabled || isDisabledInput("currency"), helpText: text.currencyHelpText }, (((_r = formState.errors) === null || _r === void 0 ? void 0 : _r.currency) ? {
+          index.h("sl-select", Object.assign({ id: "currency", exportparts: "label: input-label, base: input-base", name: "/currency", label: text.currency, menu: true, value: formState.currency, disabled: states.disabled || isDisabledPartnerInput("currency"), helpText: text.currencyHelpText }, (((_r = formState.errors) === null || _r === void 0 ? void 0 : _r.currency) ? {
             class: classes.ErrorInput,
             helpText: utils$1.formatErrorMessage(text.currency, formState.errors.currency),
           }

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a43a63b4.js');
-const global = require('./global-94f36ad7.js');
+const global = require('./global-e862bfd4.js');
 const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
 const index_module = require('./index.module-4f54e412.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
@@ -21,15 +21,15 @@ const index$1 = require('./index-8c6255f5.js');
 const emailRegistrationView = require('./email-registration-view-ace50780.js');
 const useRegistrationFormState = require('./useRegistrationFormState-bbee6e7b.js');
 const useInstantAccessRegistration = require('./useInstantAccessRegistration-08bcb487.js');
-const useLeadFormState = require('./useLeadFormState-f8b33c07.js');
+const useLeadFormState = require('./useLeadFormState-91999606.js');
 const sqmPortalLoginView = require('./sqm-portal-login-view-bb50304c.js');
 const usePortalLogin = require('./usePortalLogin-1c022d8d.js');
 const AsYouType = require('./AsYouType-6788393a.js');
 const utilities = require('./utilities-9a0c5e91.js');
 const ErrorView = require('./ErrorView-3f91e5ab.js');
-const ShadowViewAddon = require('./ShadowViewAddon-7066fae7.js');
+const ShadowViewAddon = require('./ShadowViewAddon-ae3a32c3.js');
 require('./sqm-portal-container-view-07e4343f.js');
-const utils$1 = require('./utils-5ecfecd9.js');
+const utils$1 = require('./utils-4eb18a29.js');
 const extractProps = require('./extractProps-e9c55ba8.js');
 const data = require('./data-44260010.js');
 
@@ -57,10 +57,6 @@ const Netflix = {
     borderThickness: 1,
   },
   color: {
-    loadingSkeleton: {
-      background: "#272727",
-      animationBackground: "#E50914",
-    },
     textColorShades: {
       mainText: "white",
       subduedText: "#B3B3B3",
@@ -152,10 +148,6 @@ const Amazon = {
   },
   color: {
     backgroundColor: "#ffffff",
-    loadingSkeleton: {
-      background: "hsl(240 4.8% 95.9%)",
-      animationBackground: "#FF9900",
-    },
     textColorShades: {
       mainText: "#2f2f2f",
       subduedText: "#565959",
@@ -244,10 +236,6 @@ const Spotify = {
     borderThickness: 1,
   },
   color: {
-    loadingSkeleton: {
-      background: "#282928",
-      animationBackground: "#1ed760",
-    },
     textColorShades: {
       mainText: "white",
       subduedText: "white",
@@ -3081,8 +3069,8 @@ function PayoutStatusAlertView(props) {
             supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
           button: (index.h("div", { class: sheet$2.classes.ButtonContainer },
-            index.h("sl-button", { disabled: states.loading, type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton),
-            index.h("sl-button", { disabled: states.loading, type: "secondary", exportparts: "base: secondarybutton-base", onClick: callbacks.onNewFormClick }, text.newFormButton))),
+            index.h("sl-button", { disabled: states.loading, type: "primary", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton),
+            index.h("sl-button", { disabled: states.loading, type: "default", onClick: callbacks.onNewFormClick }, text.newFormButton))),
           alertType: "warning",
           icon: "exclamation-triangle",
         };
@@ -3096,8 +3084,8 @@ function PayoutStatusAlertView(props) {
             supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
           button: (index.h("div", { class: sheet$2.classes.ButtonContainer },
-            index.h("sl-button", { disabled: states.loading, type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton),
-            index.h("sl-button", { disabled: states.loading, type: "secondary", exportparts: "base: secondarybutton-base", onClick: callbacks.onNewFormClick }, text.newFormButton))),
+            index.h("sl-button", { disabled: states.loading, type: "primary", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton),
+            index.h("sl-button", { disabled: states.loading, type: "default", onClick: callbacks.onNewFormClick }, text.newFormButton))),
           alertType: "warning",
           icon: "exclamation-triangle",
         };
@@ -3111,8 +3099,8 @@ function PayoutStatusAlertView(props) {
             supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
           button: (index.h("div", { class: sheet$2.classes.ButtonContainer },
-            index.h("sl-button", { disabled: states.loading, type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton),
-            index.h("sl-button", { disabled: states.loading, type: "secondary", exportparts: "base: secondarybutton-base", onClick: callbacks.onNewFormClick }, text.newFormButton))),
+            index.h("sl-button", { disabled: states.loading, type: "primary", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton),
+            index.h("sl-button", { disabled: states.loading, type: "default", onClick: callbacks.onNewFormClick }, text.newFormButton))),
           alertType: "warning",
           icon: "exclamation-triangle",
         };
@@ -3126,7 +3114,7 @@ function PayoutStatusAlertView(props) {
             supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
           button: (index.h("div", { class: sheet$2.classes.ButtonContainer },
-            index.h("sl-button", { disabled: states.loading, type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton))),
+            index.h("sl-button", { disabled: states.loading, type: "primary", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton))),
           alertType: "warning",
           icon: "exclamation-triangle",
         };
@@ -3140,7 +3128,7 @@ function PayoutStatusAlertView(props) {
             supportLink: (index.h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
           button: (index.h("div", { class: sheet$2.classes.ButtonContainer },
-            index.h("sl-button", { disabled: states.loading, type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton))),
+            index.h("sl-button", { disabled: states.loading, type: "primary", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton))),
           alertType: "error",
           icon: "exclamation-triangle",
         };
@@ -3165,9 +3153,9 @@ function PayoutStatusAlertView(props) {
       case "OVER_W9_THRESHOLD":
         if (states.enforceUsTaxComplianceOption === "CASH_ONLY")
           return;
-        return data.type === "SquatchJS2" ? (index.h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.w9RequiredButtonText, "scroll-animation": "smooth" })) : data.type === "SquatchPortal" ? (index.h("sl-button", { type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onTermsClick }, text.w9RequiredButtonText)) : (
+        return data.type === "SquatchJS2" ? (index.h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.w9RequiredButtonText, "scroll-animation": "smooth" })) : data.type === "SquatchPortal" ? (index.h("sl-button", { type: "default", onClick: callbacks.onTermsClick }, text.w9RequiredButtonText)) : (
         // Demo case
-        index.h("sl-button", { type: "primary", exportparts: "base: primarybutton-base" }, text.w9RequiredButtonText));
+        index.h("sl-button", { type: "default" }, text.w9RequiredButtonText));
       case "INFORMATION_REQUIRED":
         return data.type === "SquatchJS2" ? (index.h("div", { style: { paddingTop: "10px" } },
           index.h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.informationRequiredButtonText, "scroll-animation": "smooth" }))) : data.type === "SquatchPortal" ? (index.h("div", { style: { paddingTop: "10px" } },
@@ -3184,6 +3172,9 @@ function PayoutStatusAlertView(props) {
         return;
     }
   }
+  if (states.loading) {
+    return index.h("sl-skeleton", { class: sheet$2.classes.SkeletonOne });
+  }
   const alertDetails = getAlert(states.status);
   if (states.status === "DONE" || !alertDetails) {
     return index.h("div", null);
@@ -3191,7 +3182,7 @@ function PayoutStatusAlertView(props) {
   return (index.h("div", { part: "sqm-base" },
     index.h("style", { type: "text/css" }, styleString$2),
     index.h("style", { type: "text/css" }, vanillaStyle$1),
-    index.h("sqm-form-message", { loading: true, type: alertDetails.alertType },
+    index.h("sqm-form-message", { type: alertDetails.alertType },
       index.h("p", { part: "alert-title" }, alertDetails.header),
       index.h("p", { part: "alert-description" }, alertDetails.description),
       getButton(states.status))));

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a43a63b4.js');
-const global = require('./global-94f36ad7.js');
+const global = require('./global-e862bfd4.js');
 const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
 const index_module = require('./index.module-4f54e412.js');
 const cjs = require('./cjs-1066ec21.js');

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a43a63b4.js');
-const global = require('./global-94f36ad7.js');
+const global = require('./global-e862bfd4.js');
 const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
 const index_module = require('./index.module-4f54e412.js');
 const cjs = require('./cjs-1066ec21.js');
@@ -322,12 +322,9 @@ function WidgetEmailVerificationView(props) {
   const { states, callbacks, text } = props;
   const renderLoadingSkeleton = () => {
     return (index.h("div", { class: sheet.classes.Wrapper },
-      index.h("sqm-skeleton", { height: "16px", width: "50%" }),
-      index.h("sqm-skeleton", { height: "16px", width: "50%" }),
-      index.h("sqm-skeleton", { height: "16px", width: "50%" }),
-      index.h("sqm-skeleton", { height: "34px", width: "30%" }),
-      index.h("sqm-skeleton", { height: "24px", width: "15%" }),
-      index.h("sl-button", { submit: true, class: sheet.classes.ContinueButton, loading: true, exportparts: "base: primarybutton-base", type: "primary" }, text.sendCodeText)));
+      index.h("sl-skeleton", { class: sheet.classes.SkeletonOne }),
+      index.h("sl-skeleton", { class: sheet.classes.SkeletonTwo }),
+      index.h("sl-skeleton", { class: sheet.classes.SkeletonThree })));
   };
   return (index.h("div", { part: "sqm-base" },
     index.h("style", { type: "text/css" },

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a43a63b4.js');
-const global = require('./global-94f36ad7.js');
+const global = require('./global-e862bfd4.js');
 const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
 require('./index.module-4f54e412.js');
 const utils = require('./utils-6847bc06.js');

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

@@ -11,12 +11,6 @@ const FormMessage = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
-    /**
-     * Loading state for the alert.
-     *
-     * @uiName Loading
-     */
-    this.loading = false;
     /**
      * Render the alert with transparent styles
      */
@@ -25,9 +19,6 @@ const FormMessage = class {
   }
   disconnectedCallback() { }
   render() {
-    if (this.loading) {
-      return index.h("sqm-skeleton", { height: "90px", width: "100%" });
-    }
     if (this.type === "error") {
       return (index.h("sl-alert", { exportparts: "base: erroralert-base, icon:erroralert-icon", class: `Error ${this.transparent ? "Transparent" : ""}`, type: "danger", open: true }, index.h("sl-icon", { id: "icon", slot: "icon", name: `${this.icon ? this.icon : "exclamation-octagon"}` }), index.h("slot", null)));
     }
@@ -44,45 +35,4 @@ const FormMessage = class {
 };
 FormMessage.style = sqmFormMessageCss;
 
-const Skeleton = class {
-  constructor(hostRef) {
-    index.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 (index.h("div", null, index.h("style", { type: "text/css" }, this.vanillaStyle), index.h("sl-skeleton", null)));
-  }
-};
-
 exports.sqm_form_message = FormMessage;
-exports.sqm_skeleton = Skeleton;

package/dist/cjs/{sqm-lead-checkbox-field-view-c0123bfa.js → sqm-lead-checkbox-field-view-dca40eb4.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-a43a63b4.js');
-const global = require('./global-94f36ad7.js');
+const global = require('./global-e862bfd4.js');
 const JSS = require('./JSS-8503a151.js');
 
 const style = {

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

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a43a63b4.js');
-require('./global-94f36ad7.js');
+require('./global-e862bfd4.js');
 const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
 const index_module = require('./index.module-4f54e412.js');
 const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');
 require('./JSS-8503a151.js');
-const useLeadFormState = require('./useLeadFormState-f8b33c07.js');
-const sqmLeadCheckboxFieldView = require('./sqm-lead-checkbox-field-view-c0123bfa.js');
+const useLeadFormState = require('./useLeadFormState-91999606.js');
+const sqmLeadCheckboxFieldView = require('./sqm-lead-checkbox-field-view-dca40eb4.js');
 
 function useLeadCheckboxField() {
   const leadFormState = domContextHooks_module.d(useLeadFormState.LEAD_FORM_STATE_CONTEXT);

package/dist/cjs/{sqm-lead-input-field-view-6983eaa1.js → sqm-lead-input-field-view-2006001f.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-a43a63b4.js');
-const global = require('./global-94f36ad7.js');
+const global = require('./global-e862bfd4.js');
 const JSS = require('./JSS-8503a151.js');
 const mixins = require('./mixins-4761d472.js');
 

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

@@ -3,15 +3,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a43a63b4.js');
-require('./global-94f36ad7.js');
+require('./global-e862bfd4.js');
 const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
 const index_module = require('./index.module-4f54e412.js');
 const cjs = require('./cjs-1066ec21.js');
 const utils = require('./utils-6847bc06.js');
 require('./JSS-8503a151.js');
 require('./mixins-4761d472.js');
-const useLeadFormState = require('./useLeadFormState-f8b33c07.js');
-const sqmLeadInputFieldView = require('./sqm-lead-input-field-view-6983eaa1.js');
+const useLeadFormState = require('./useLeadFormState-91999606.js');
+const sqmLeadInputFieldView = require('./sqm-lead-input-field-view-2006001f.js');
 
 function useLeadInputField() {
   const leadFormState = domContextHooks_module.d(useLeadFormState.LEAD_FORM_STATE_CONTEXT);

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a43a63b4.js');
-const global = require('./global-94f36ad7.js');
+const global = require('./global-e862bfd4.js');
 const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
 const index_module = require('./index.module-4f54e412.js');
 const cjs = require('./cjs-1066ec21.js');

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a43a63b4.js');
-const global = require('./global-94f36ad7.js');
+const global = require('./global-e862bfd4.js');
 const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
 const index_module = require('./index.module-4f54e412.js');
 const cjs = require('./cjs-1066ec21.js');
@@ -402,7 +402,7 @@ function LoadingSlot() {
   return (index.h("slot", { name: "loading" }, index.h(LoadingRow, null), index.h(LoadingRow, null), index.h(LoadingRow, null), index.h(LoadingRow, null)));
 }
 function LoadingRow() {
-  return index.h("sqm-skeleton", null);
+  return index.h("sl-skeleton", { style: { width: "100%" } });
 }
 function useDemoReferralCodes(props) {
   return cjs.cjs({

package/dist/cjs/{sqm-portal-email-verification-view-d968178a.js → sqm-portal-email-verification-view-1745d9a2.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-a43a63b4.js');
-const global = require('./global-94f36ad7.js');
+const global = require('./global-e862bfd4.js');
 const JSS = require('./JSS-8503a151.js');
 const mixins = require('./mixins-4761d472.js');
 const sqmTextSpanView = require('./sqm-text-span-view-7a61ae4c.js');
@@ -20,7 +20,7 @@ const style = {
   },
   ButtonLinkLoading: {
     fontSize: "14px",
-    color: "var(--sqm-text-subdued)",
+    color: "var(--sl-color-gray-500)",
     opacity: "0.6",
     display: "inline-block !important",
     textDecoration: "underline",
@@ -57,7 +57,7 @@ function PortalEmailVerificationView(props) {
       }, {
         email: (index.h("span", { style: { fontWeight: "var(--sl-font-weight-semibold)" } }, email)),
       })),
-      index.h("p", { style: { color: "var(--sqm-text-subdued)", fontSize: "14px" } }, global.intl.formatMessage({
+      index.h("p", { style: { color: "var(--sl-color-gray-500)", fontSize: "14px" } }, global.intl.formatMessage({
         id: `verificationStatus`,
         defaultMessage: states.loadingVerification
           ? verificationLoadingMessage + " {countdown}"
@@ -65,7 +65,9 @@ function PortalEmailVerificationView(props) {
       }, {
         countdown: states.loadingVerification ? (index.h("sl-spinner", null)) : (states.countdown),
       })),
-      index.h("sl-button", { type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.submit, loading: states.loading }, resendEmailButtonText))));
+      index.h("a", { class: states.loading
+          ? sheet.classes.ButtonLinkLoading
+          : sheet.classes.ButtonLink, onClick: callbacks.submit }, resendEmailButtonText))));
 }
 
 exports.PortalEmailVerificationView = PortalEmailVerificationView;

package/dist/cjs/sqm-portal-email-verification.cjs.entry.js

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-a43a63b4.js');
-require('./global-94f36ad7.js');
+require('./global-e862bfd4.js');
 const domContextHooks_module = require('./dom-context-hooks.module-7fa676ae.js');
 const index_module = require('./index.module-4f54e412.js');
 const cjs = require('./cjs-1066ec21.js');
 require('./JSS-8503a151.js');
 require('./mixins-4761d472.js');
 require('./sqm-text-span-view-7a61ae4c.js');
-const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-d968178a.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-1745d9a2.js');
 
 function usePortalEmailVerification(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j;

package/dist/cjs/{sqm-portal-profile-view-f74b8d6c.js → sqm-portal-profile-view-5c5e29b1.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-a43a63b4.js');
-const global = require('./global-94f36ad7.js');
+const global = require('./global-e862bfd4.js');
 const JSS = require('./JSS-8503a151.js');
 const sqmTextSpanView = require('./sqm-text-span-view-7a61ae4c.js');