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

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

@@ -1,5 +1,5 @@
 import { h, r as registerInstance, c as Host, g as getElement } from './index-b3a06de8.js';
-import { i as intl } from './global-536c422d.js';
+import { i as intl } from './global-58a69018.js';
 import { m as useRef, k as useState, f as useEffect, n as h$1, u as useMemo, b as browser, j as useReducer } from './dom-context-hooks.module-63370afd.js';
 import { d as dist, _, L, J, t as Pn, F as Fn, x as $n, $ as $e, i as isDemo, p as En, u as useCallback, R as Rn, w as wn } from './index.module-c9811a48.js';
 import { j as jsonpointer } from './jsonpointer-388a7082.js';
@@ -12,8 +12,8 @@ import { u as useRerenderListener, a as useRequestRerender } from './re-render-7
 import { u as useChildElements } from './useChildElements-3d872cef.js';
 import { l as luxon } from './luxon-bbf75a9d.js';
 import { g as generateUserError } from './useReferralTable-909ccb28.js';
-import { a as INDIRECT_TAX_SPAIN_REGIONS, b as INDIRECT_TAX_PROVINCES, O as OtherRegionSlotView, I as InvoiceTableView, v as vatLabels, A as ADDRESS_REGIONS } from './IndirectTaxDetailsView-a7dd6e4c.js';
-import { t as taxTypeToName, v as validTaxDocument, g as getCountryObj, L as LoadingView, f as formatErrorMessage, a as validateBillingField, o as objectIsFull } from './utils-fafc712f.js';
+import { a as INDIRECT_TAX_SPAIN_REGIONS, b as INDIRECT_TAX_PROVINCES, O as OtherRegionSlotView, I as InvoiceTableView, v as vatLabels, A as ADDRESS_REGIONS } from './IndirectTaxDetailsView-8dec05e4.js';
+import { t as taxTypeToName, v as validTaxDocument, g as getCountryObj, L as LoadingView, f as formatErrorMessage, a as validateBillingField, o as objectIsFull } from './utils-2695a43e.js';
 import { b as VERIFICATION_EVENT_KEY } from './keys-406491dc.js';
 import { i as FORM_STEPS, a as TAX_FORM_CONTEXT_NAMESPACE, S as SORTED_COUNTRIES_NAMESPACE, c as USER_QUERY_NAMESPACE, T as TAX_CONTEXT_NAMESPACE, F as FINANCE_NETWORK_SETTINGS_NAMESPACE, j as TAX_FORM_UPDATED_EVENT_KEY, U as USER_FORM_CONTEXT_NAMESPACE, d as COUNTRIES_QUERY_NAMESPACE, k as useVeriffApp, l as getStatus, V as VERIFF_COMPLETE_EVENT_KEY, C as CURRENCIES_NAMESPACE } from './data-68816061.js';
 
@@ -2480,7 +2480,7 @@ const IndirectTaxFormView = (props) => {
         }, {
           supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
         }))),
-      states.isPartner && (h("sqm-form-message", { loading: states.loading, type: "info" },
+      states.isPartner && (h("sqm-form-message", { type: "info" },
         h("p", { part: "alert-title" }, text.isPartnerAlertHeader),
         intl.formatMessage({
           id: "isPartnerAlertDescription",
@@ -3267,7 +3267,7 @@ function LoadingSlot() {
   return (h("slot", { name: "loading" }, h(LoadingRow, null), h(LoadingRow, null), h(LoadingRow, null), h(LoadingRow, null)));
 }
 function LoadingRow() {
-  return (h("sqm-table-row", null, h("sqm-table-cell", { colspan: 6 }, h("sqm-skeleton", null))));
+  return (h("sqm-table-row", null, h("sqm-table-cell", { colspan: 6 }, h("sl-skeleton", null))));
 }
 function useInvoiceTableDemo(props, emptyElement, loadingElement) {
   const [content, setContent] = useReducer((state, next) => ({
@@ -3553,11 +3553,11 @@ function PayoutDetailsCardView(props) {
   const { states, text } = props;
   const renderLoadingSkeleton = () => {
     return (h("div", { class: classes.CardContainer },
-      h("div", { class: classes.StatusContainer, style: { display: "block" } },
-        h("sqm-skeleton", { style: { marginBottom: "var(--sl-spacing-medium)" }, width: "25%", height: "16px" }),
-        h("sqm-skeleton", { width: "25%", height: "24px" })),
-      h("sqm-skeleton", { width: "50%", height: "34px" }),
-      h("sqm-skeleton", { width: "25%", height: "16px" })));
+      h("div", { class: classes.StatusContainer },
+        h("sl-skeleton", { class: classes.SkeletonOne }),
+        h("sl-skeleton", { class: classes.SkeletonTwo })),
+      h("sl-skeleton", { class: classes.SkeletonThree }),
+      h("sl-skeleton", { class: classes.SkeletonOne })));
   };
   const renderStatusBadge = (status, statusBadgeText) => {
     const badgeType = status === "nextPayout" ? "success" : "primary";
@@ -3830,6 +3830,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",
@@ -4265,7 +4275,7 @@ const TaxAndCashDashboardView = (props) => {
         }, {
           supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
         }))),
-      alertInfo && (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 && (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 },
         h("strong", null, alertInfo.header),
         h("p", { style: { margin: "0" } }, alertInfo.description),
         alertInfo.buttonText && (h("sl-button", { style: { marginTop: "var(--sl-spacing-x-small)" }, type: "default", loading: states.veriffLoading, onClick: () => callbacks.onVerifyClick() }, alertInfo.buttonText)),
@@ -4283,8 +4293,8 @@ const TaxAndCashDashboardView = (props) => {
           states.canEditPayoutInfo && (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") && (h("div", { class: sheet$4.classes.TaxDocumentsContainer },
         h("div", null, states.loading ? (h("div", { class: sheet$4.classes.TaxSectionSkeletonContainer },
-          h("sqm-skeleton", { width: "15%", height: "10px" }),
-          h("sqm-skeleton", { width: "25%", height: "24px" }))) : (h("div", null,
+          h("sl-skeleton", { class: sheet$4.classes.SkeletonOne }),
+          h("sl-skeleton", { class: sheet$4.classes.SkeletonTwo }))) : (h("div", null,
           h("div", null,
             h("span", { class: sheet$4.classes.TaxFormDetailsContainer },
               h("div", { class: sheet$4.classes.StatusContainer },
@@ -4298,8 +4308,8 @@ const TaxAndCashDashboardView = (props) => {
             states.noFormNeeded &&
               states.status !== "NOT_VERIFIED" && (h("sl-button", { disabled: states.disabled || states.loading, onClick: callbacks.onClick, type: "default", class: sheet$4.classes.NewFormButton, exportparts: "base: primarybutton-base" }, text.newFormButton)))))))),
       h("div", { class: sheet$4.classes.IndirectTaxPreviewContainer }, states.loading ? (h("div", { class: sheet$4.classes.TaxSectionSkeletonContainer },
-        h("sqm-skeleton", { width: "15%", height: "10px" }),
-        h("sqm-skeleton", { width: "25%", height: "24px" }))) : (h("div", null,
+        h("sl-skeleton", { class: sheet$4.classes.SkeletonOne }),
+        h("sl-skeleton", { class: sheet$4.classes.SkeletonTwo }))) : (h("div", null,
         h("h3", { class: sheet$4.classes.IndirectTaxPreviewHeaderContainer },
           text.indirectTaxInfoSectionHeader,
           h("sl-tooltip", { trigger: "hover", placement: "right", content: text.indirectTaxTooltipSupport, class: sheet$4.classes.TooltipContainer },
@@ -6182,10 +6192,14 @@ const UserInfoFormView = (props) => {
     default:
       regionLabel = text.state;
   }
-  function isDisabledInput(field) {
+  function isDisabledPartnerInput(field) {
     var _a;
     return states.isPartner && !!((_a = data.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 (h("sl-form", { class: classes.FormWrapper, "onSl-submit": callbacks.onSubmit, ref: (el) => (refs.formRef.current = el), novalidate: true },
     h("style", { type: "text/css" },
       styleString$5,
@@ -6216,7 +6230,7 @@ const UserInfoFormView = (props) => {
         }, {
           supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
         })))),
-      (states.isPartner || states.isUser) && (h("sqm-form-message", { loading: states.loading, type: "info" },
+      (states.isPartner || states.isUser) && (h("sqm-form-message", { type: "info" },
         h("p", { part: "alert-title" }, text.isPartnerAlertHeader),
         h("p", { part: "alert-description" }, intl.formatMessage({
           id: "isPartnerAlertDescription",
@@ -6227,21 +6241,21 @@ const UserInfoFormView = (props) => {
       h("div", null,
         h("div", { class: classes.InputContainer },
           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: formatErrorMessage(text.firstName, formState.errors.firstName),
           }
             : {}), { id: "firstName", name: "/firstName", required: true })),
           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: formatErrorMessage(text.lastName, formState.errors.lastName),
           }
             : {}), { id: "lastName", name: "/lastName", required: true })),
           h("sl-input", { exportparts: "label: input-label, base: input-base", value: formState.email, label: text.email, disabled: true, id: "email", name: "/email", required: true }),
-          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) ? {
+          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: formatErrorMessage(text.country, formState.errors.countryCode),
           }
@@ -6258,7 +6272,7 @@ const UserInfoFormView = (props) => {
             h("p", null, text.phoneNumber),
             h("div", { class: classes.PhoneInputsContainer },
               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) }),
@@ -6284,7 +6298,7 @@ const UserInfoFormView = (props) => {
                   // Naive phone number validation
                   validateBillingField(/[a-zA-Z]+/, value) &&
                     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: formatErrorMessage(text.phoneNumber, formState.errors.phoneNumber),
               }
@@ -6292,7 +6306,7 @@ const UserInfoFormView = (props) => {
           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
             !validateBillingField(/^[\x20-\xFF]+$/, value) &&
-              formatErrorMessage(text.address, text.error.invalidCharacterError), disabled: states.disabled || isDisabledInput("billingAddress") }, (((_l = formState.errors) === null || _l === void 0 ? void 0 : _l.address) ? {
+              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: formatErrorMessage(text.address, formState.errors.address),
           }
@@ -6300,22 +6314,22 @@ const UserInfoFormView = (props) => {
           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
             !validateBillingField(/^[\x20-\xFF]+$/, value) &&
-              formatErrorMessage(text.city, text.error.invalidCharacterError), disabled: states.disabled || isDisabledInput("billingCity") }, (((_m = formState.errors) === null || _m === void 0 ? void 0 : _m.city) ? {
+              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: formatErrorMessage(text.city, formState.errors.city),
           }
             : {}), { required: true })),
-          !states.hideState && (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 && (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: formatErrorMessage(text.state, formState.errors.state),
           }
             : {}), { required: true }), (_p = data.regions) === null || _p === void 0 ? void 0 : _p.map((r) => (h("sl-menu-item", { value: r.value }, r.label))))),
-          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) ? {
+          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: formatErrorMessage(text.postalCode, formState.errors.postalCode),
           }
             : {}), { required: true })),
-          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) ? {
+          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: formatErrorMessage(text.currency, formState.errors.currency),
           }

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-536c422d.js';
+import { b as buildFontsCssUrl, i as intl } from './global-58a69018.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,15 +17,15 @@ 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-5a6188da.js';
+import { R as RequiredPropsError, L as LEAD_FORM_STATE_CONTEXT, u as useLeadFormState } from './useLeadFormState-8d4b2620.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-fe2896cb.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-78a1c35c.js';
 import './sqm-portal-container-view-176e92e3.js';
-import { g as getCountryObj, L as LoadingView } from './utils-fafc712f.js';
+import { g as getCountryObj, L as LoadingView } from './utils-2695a43e.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-68816061.js';
 
@@ -53,10 +53,6 @@ const Netflix = {
     borderThickness: 1,
   },
   color: {
-    loadingSkeleton: {
-      background: "#272727",
-      animationBackground: "#E50914",
-    },
     textColorShades: {
       mainText: "white",
       subduedText: "#B3B3B3",
@@ -148,10 +144,6 @@ const Amazon = {
   },
   color: {
     backgroundColor: "#ffffff",
-    loadingSkeleton: {
-      background: "hsl(240 4.8% 95.9%)",
-      animationBackground: "#FF9900",
-    },
     textColorShades: {
       mainText: "#2f2f2f",
       subduedText: "#565959",
@@ -240,10 +232,6 @@ const Spotify = {
     borderThickness: 1,
   },
   color: {
-    loadingSkeleton: {
-      background: "#282928",
-      animationBackground: "#1ed760",
-    },
     textColorShades: {
       mainText: "white",
       subduedText: "white",
@@ -3077,8 +3065,8 @@ function PayoutStatusAlertView(props) {
             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))),
+            h$1("sl-button", { disabled: states.loading, type: "primary", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton),
+            h$1("sl-button", { disabled: states.loading, type: "default", onClick: callbacks.onNewFormClick }, text.newFormButton))),
           alertType: "warning",
           icon: "exclamation-triangle",
         };
@@ -3092,8 +3080,8 @@ function PayoutStatusAlertView(props) {
             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))),
+            h$1("sl-button", { disabled: states.loading, type: "primary", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton),
+            h$1("sl-button", { disabled: states.loading, type: "default", onClick: callbacks.onNewFormClick }, text.newFormButton))),
           alertType: "warning",
           icon: "exclamation-triangle",
         };
@@ -3107,8 +3095,8 @@ function PayoutStatusAlertView(props) {
             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))),
+            h$1("sl-button", { disabled: states.loading, type: "primary", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton),
+            h$1("sl-button", { disabled: states.loading, type: "default", onClick: callbacks.onNewFormClick }, text.newFormButton))),
           alertType: "warning",
           icon: "exclamation-triangle",
         };
@@ -3122,7 +3110,7 @@ function PayoutStatusAlertView(props) {
             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: "primary", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton))),
           alertType: "warning",
           icon: "exclamation-triangle",
         };
@@ -3136,7 +3124,7 @@ function PayoutStatusAlertView(props) {
             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: "primary", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton))),
           alertType: "error",
           icon: "exclamation-triangle",
         };
@@ -3161,9 +3149,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: "primary", exportparts: "base: primarybutton-base", 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: "default", onClick: callbacks.onTermsClick }, text.w9RequiredButtonText)) : (
         // Demo case
-        h$1("sl-button", { type: "primary", exportparts: "base: primarybutton-base" }, text.w9RequiredButtonText));
+        h$1("sl-button", { type: "default" }, 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" } },
@@ -3180,6 +3168,9 @@ function PayoutStatusAlertView(props) {
         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);
@@ -3187,7 +3178,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", { loading: true, type: alertDetails.alertType },
+    h$1("sqm-form-message", { type: alertDetails.alertType },
       h$1("p", { part: "alert-title" }, alertDetails.header),
       h$1("p", { part: "alert-description" }, alertDetails.description),
       getButton(states.status))));

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-536c422d.js';
+import { i as intl } from './global-58a69018.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-536c422d.js';
+import { i as intl } from './global-58a69018.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,12 +318,9 @@ function WidgetEmailVerificationView(props) {
   const { states, callbacks, text } = props;
   const renderLoadingSkeleton = () => {
     return (h("div", { class: sheet.classes.Wrapper },
-      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)));
+      h("sl-skeleton", { class: sheet.classes.SkeletonOne }),
+      h("sl-skeleton", { class: sheet.classes.SkeletonTwo }),
+      h("sl-skeleton", { class: sheet.classes.SkeletonThree })));
   };
   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-536c422d.js';
+import { i as intl } from './global-58a69018.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_2.entry.js → sqm-form-message.entry.js}

@@ -7,12 +7,6 @@ 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
      */
@@ -21,9 +15,6 @@ 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)));
     }
@@ -40,44 +31,4 @@ const FormMessage = class {
 };
 FormMessage.style = sqmFormMessageCss;
 
-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 };
+export { FormMessage as sqm_form_message };

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

@@ -1,5 +1,5 @@
 import { h } from './index-b3a06de8.js';
-import { i as intl } from './global-536c422d.js';
+import { i as intl } from './global-58a69018.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-536c422d.js';
+import './global-58a69018.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-5a6188da.js';
-import { L as LeadCheckboxFieldView } from './sqm-lead-checkbox-field-view-5c387852.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';
 
 function useLeadCheckboxField() {
   const leadFormState = d(LEAD_FORM_STATE_CONTEXT);

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

@@ -1,5 +1,5 @@
 import { h } from './index-b3a06de8.js';
-import { i as intl } from './global-536c422d.js';
+import { i as intl } from './global-58a69018.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-536c422d.js';
+import './global-58a69018.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-5a6188da.js';
-import { L as LeadInputFieldView } from './sqm-lead-input-field-view-fa2488c9.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';
 
 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-536c422d.js';
+import { i as intl } from './global-58a69018.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-536c422d.js';
+import { i as intl } from './global-58a69018.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("sqm-skeleton", null);
+  return h("sl-skeleton", { style: { width: "100%" } });
 }
 function useDemoReferralCodes(props) {
   return cjs({

package/dist/esm/{sqm-portal-email-verification-view-8bbe5fcf.js → sqm-portal-email-verification-view-5fb1a99e.js}

@@ -1,5 +1,5 @@
 import { h } from './index-b3a06de8.js';
-import { i as intl } from './global-536c422d.js';
+import { i as intl } from './global-58a69018.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import { A as AuthWrapper, a as AuthColumn } from './mixins-f750863a.js';
 import { T as TextSpanView } from './sqm-text-span-view-4c17b8c9.js';
@@ -18,7 +18,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",
@@ -55,7 +55,7 @@ function PortalEmailVerificationView(props) {
       }, {
         email: (h("span", { style: { fontWeight: "var(--sl-font-weight-semibold)" } }, email)),
       })),
-      h("p", { style: { color: "var(--sqm-text-subdued)", fontSize: "14px" } }, intl.formatMessage({
+      h("p", { style: { color: "var(--sl-color-gray-500)", fontSize: "14px" } }, intl.formatMessage({
         id: `verificationStatus`,
         defaultMessage: states.loadingVerification
           ? verificationLoadingMessage + " {countdown}"
@@ -63,7 +63,9 @@ function PortalEmailVerificationView(props) {
       }, {
         countdown: states.loadingVerification ? (h("sl-spinner", null)) : (states.countdown),
       })),
-      h("sl-button", { type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.submit, loading: states.loading }, resendEmailButtonText))));
+      h("a", { class: states.loading
+          ? sheet.classes.ButtonLinkLoading
+          : sheet.classes.ButtonLink, onClick: callbacks.submit }, resendEmailButtonText))));
 }
 
 export { PortalEmailVerificationView as P };

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

@@ -1,12 +1,12 @@
 import { r as registerInstance, h as h$1 } from './index-b3a06de8.js';
-import './global-536c422d.js';
+import './global-58a69018.js';
 import { k as useState, m as useRef, f as useEffect, n as h } from './dom-context-hooks.module-63370afd.js';
 import { l as ln, n as nn, J, j as jn, u as useCallback, i as isDemo } from './index.module-c9811a48.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import './JSS-67b5cff8.js';
 import './mixins-f750863a.js';
 import './sqm-text-span-view-4c17b8c9.js';
-import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-8bbe5fcf.js';
+import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-5fb1a99e.js';
 
 function usePortalEmailVerification(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j;

package/dist/esm/{sqm-portal-profile-view-9848caf1.js → sqm-portal-profile-view-e3aef106.js}

@@ -1,5 +1,5 @@
 import { h } from './index-b3a06de8.js';
-import { i as intl } from './global-536c422d.js';
+import { i as intl } from './global-58a69018.js';
 import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import { T as TextSpanView } from './sqm-text-span-view-4c17b8c9.js';
 

package/dist/esm/sqm-portal-profile.entry.js

@@ -1,12 +1,12 @@
 import { r as registerInstance, h as h$1 } from './index-b3a06de8.js';
-import './global-536c422d.js';
+import './global-58a69018.js';
 import { k as useState, f as useEffect, n as h } from './dom-context-hooks.module-63370afd.js';
 import { d as dist, J, w as wn, $ as $e, i as isDemo } from './index.module-c9811a48.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { g as getProps } from './utils-334c1e34.js';
 import './JSS-67b5cff8.js';
 import './sqm-text-span-view-4c17b8c9.js';
-import { P as PortalProfileView } from './sqm-portal-profile-view-9848caf1.js';
+import { P as PortalProfileView } from './sqm-portal-profile-view-e3aef106.js';
 import { i as isEmpty } from './utilities-72c07b09.js';
 
 const GET_USER = dist.gql `