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

package/dist/collection/components/sqm-empty/EmptyState.stories.js

@@ -21,7 +21,7 @@ const defaultElements = {
     h("table", null, [...Array(10)].map(() => {
       return (h("tr", null,
         h("td", null,
-          h("sqm-skeleton", null))));
+          h("sl-skeleton", null))));
     })))),
 };
 export const SlottedIntoComponent = () => {

package/dist/collection/components/sqm-form-message/FormMessage.stories.js

@@ -36,8 +36,3 @@ export const WarningAlertTransparent = () => (h("sqm-form-message", { type: "war
 export const InfoAlertTransparent = () => (h("sqm-form-message", { type: "info", transparent: true },
   h("p", { part: "alert-title" }, "This is the title"),
   h("p", { part: "alert-description" }, "This is the description")));
-export const Loading = () => {
-  return (h("sqm-form-message", { type: "success", loading: true },
-    h("p", { part: "alert-title" }, "This is the title"),
-    h("p", { part: "alert-description" }, "This is the description")));
-};

package/dist/collection/components/sqm-form-message/sqm-form-message.js

@@ -7,12 +7,6 @@ import { Component, h, Prop, State } from "@stencil/core";
 export class FormMessage {
   constructor() {
     this.ignored = true;
-    /**
-     * Loading state for the alert.
-     *
-     * @uiName Loading
-     */
-    this.loading = false;
     /**
      * Render the alert with transparent styles
      */
@@ -21,9 +15,6 @@ export class FormMessage {
   }
   disconnectedCallback() { }
   render() {
-    if (this.loading) {
-      return h("sqm-skeleton", { height: "90px", width: "100%" });
-    }
     if (this.type === "error") {
       return (h("sl-alert", { exportparts: "base: erroralert-base, icon:erroralert-icon", class: `Error ${this.transparent ? "Transparent" : ""}`, type: "danger", open: true },
         h("sl-icon", { id: "icon", slot: "icon", name: `${this.icon ? this.icon : "exclamation-octagon"}` }),
@@ -74,27 +65,6 @@ export class FormMessage {
       "attribute": "type",
       "reflect": false
     },
-    "loading": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Loading",
-            "name": "uiName"
-          }],
-        "text": "Loading state for the alert."
-      },
-      "attribute": "loading",
-      "reflect": false,
-      "defaultValue": "false"
-    },
     "icon": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/sqm-invoice-table/InvoiceTable.stories.js

@@ -8,19 +8,19 @@ export default {
 const loadingElement = (h("div", { slot: "loading", style: { display: "contents" } },
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 6 },
-      h("sqm-skeleton", null))),
+      h("sl-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 6 },
-      h("sqm-skeleton", null))),
+      h("sl-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 6 },
-      h("sqm-skeleton", null))),
+      h("sl-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 6 },
-      h("sqm-skeleton", null))),
+      h("sl-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 6 },
-      h("sqm-skeleton", null)))));
+      h("sl-skeleton", null)))));
 const emptyElement = (h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1710363322/squatch-assets/invoice-table-empty.png", "empty-state-header": "View your invoice details", "empty-state-text": "Track the status of your invoices and rewards earned by referring friends" }));
 // Reward Status Cases
 const simpleInvoiceTableProps = {

package/dist/collection/components/sqm-invoice-table/sqm-invoice-table.js

@@ -368,7 +368,7 @@ function LoadingSlot() {
 function LoadingRow() {
   return (h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 6 },
-      h("sqm-skeleton", null))));
+      h("sl-skeleton", null))));
 }
 function useInvoiceTableDemo(props, emptyElement, loadingElement) {
   const [content, setContent] = useReducer((state, next) => ({

package/dist/collection/components/sqm-lead-form/sqm-lead-form-view.js

@@ -76,7 +76,7 @@ export function LeadFormView(props) {
         vanillaStyle,
         styleString),
       h(TextSpanView, { type: "h3" }, content.pageLabel),
-      h("sqm-form-message", { loading: states.loading, exportparts: "success-icon" },
+      h("sqm-form-message", { exportparts: "success-icon" },
         h("b", null, content.submitSuccessHeader),
         h("br", null),
         h("div", { part: "successalert-text" }, content.submitSuccessDescription)),
@@ -87,14 +87,16 @@ export function LeadFormView(props) {
         styleString),
       h(TextSpanView, { type: "h3" }, content.pageLabel),
       h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.submit, ref: (el) => (refs.formRef.current = el), novalidate: true },
-        states.error && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "error" },
-          h("p", { part: "alert-title" }, content.submitErrorHeader),
-          h("p", { part: "alert-text" }, intl.formatMessage({
+        states.error && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: "danger", class: sheet.classes.ErrorAlertContainer, open: true },
+          h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+          h("b", null, content.submitErrorHeader),
+          h("br", null),
+          intl.formatMessage({
             id: "submitErrorDescription",
             defaultMessage: content.submitErrorDescription,
           }, {
             supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, content.supportLinkText)),
-          })))),
+          }))),
         h("div", { class: sheet.classes.NameFieldWrapper },
           h("sqm-lead-input-field", { class: sheet.classes.NameInput, "field-label": content.firstNameLabel || "First Name", "field-name": "firstName" }),
           h("sqm-lead-input-field", { class: sheet.classes.NameInput, "field-label": content.lastNameLabel || "Last Name", "field-name": "lastName" })),

package/dist/collection/components/sqm-leaderboard/sqm-leaderboard-view.js

@@ -74,10 +74,10 @@ export function LeaderboardView(props) {
       h("style", { type: "text/css" },
         styleString,
         vanillaStyle),
-      h("table", null, [...Array(5)].map(() => {
+      h("table", null, [...Array(10)].map(() => {
         return (h("tr", null,
           h("td", null,
-            h("sqm-skeleton", null))));
+            h("sl-skeleton", null))));
       }))));
   }
   if (!states.hasLeaders)

package/dist/collection/components/sqm-portal-email-verification/PortalEmailVerification.stories.js

@@ -17,7 +17,6 @@ const defaultContent = {
   resendEmailButtonText: "Re-send Email",
   verificationStatusMessage: "Checking verification status in {countdown}",
   verificationLoadingMessage: "Checking verification status",
-  verificationResentMessage: "Verification email resent to {email}",
 };
 const defaultStates = {
   error: "",

package/dist/collection/components/sqm-portal-email-verification/sqm-portal-email-verification-view.js

@@ -17,7 +17,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",
@@ -54,7 +54,7 @@ export 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}"
@@ -62,5 +62,7 @@ export 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))));
 }

package/dist/collection/components/sqm-qr-code/sqm-qr-code-view.js

@@ -68,7 +68,11 @@ export function QrCodeView({ error, qrLink, titleText, downloadCodeText, printCo
       return (h(ErrorView, { loadingErrorAlertDescription: errorHeaderText, loadingErrorAlertHeader: errorDescriptionText }));
     }
     else if (loading) {
-      return h("sqm-skeleton", { height: "100px", width: "100px" });
+      return (h("sl-skeleton", { className: sheet.classes.LoadingSkeleton, effect: "sheen", style: {
+          width: "100px",
+          height: "100px",
+          borderRadius: "0px !important",
+        } }));
     }
     else if (qrLink) {
       return (h("svg", { width: "100", height: "100" },

package/dist/collection/components/sqm-referral-codes/sqm-referral-codes.js

@@ -233,7 +233,7 @@ function LoadingSlot() {
     h(LoadingRow, null)));
 }
 function LoadingRow() {
-  return h("sqm-skeleton", null);
+  return h("sl-skeleton", { style: { width: "100%" } });
 }
 function useDemoReferralCodes(props) {
   return deepmerge({

package/dist/collection/components/sqm-referral-table/ReferralTable.stories.js

@@ -12,19 +12,19 @@ export default {
 const loadingElement = (h("div", { slot: "loading", style: { display: "contents" } },
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sqm-skeleton", null))),
+      h("sl-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sqm-skeleton", null))),
+      h("sl-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sqm-skeleton", null))),
+      h("sl-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sqm-skeleton", null))),
+      h("sl-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sqm-skeleton", null)))));
+      h("sl-skeleton", null)))));
 const emptyElement = (h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_referral2.png", "empty-state-header": "View your referral details", "empty-state-text": "Track the status of your referrals and rewards earned by referring friends" }));
 const baseReward = {
   id: "123",

package/dist/collection/components/sqm-referral-table/sqm-referral-table.js

@@ -306,7 +306,7 @@ function LoadingSlot() {
 function LoadingRow() {
   return (h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sqm-skeleton", null))));
+      h("sl-skeleton", null))));
 }
 function useReferralTableDemo(props, emptyElement, loadingElement) {
   const [content, setContent] = useReducer((state, next) => ({

package/dist/collection/components/sqm-reward-exchange-list/sqm-reward-exchange-list-view.js

@@ -567,19 +567,19 @@ export function RewardExchangeView(props) {
         h("sl-card", { class: sheet.classes.Card },
           h("div", { class: sheet.classes.CardLayout },
             h("div", null,
-              h("sqm-skeleton", { style: {
+              h("sl-skeleton", { style: {
+                  width: "100px",
+                  height: "100px",
                   margin: "9px",
-                }, width: "100px", height: "100px" })),
+                  "--border-radius": "var(--sqm-border-radius-normal)",
+                } })),
             h("div", { style: {
                 margin: "var(--sl-spacing-small) var(--sl-spacing-small) 0 0",
                 width: "100%",
-                display: "flex",
-                flexDirection: "column",
-                gap: "var(--sl-spacing-small)",
               } },
-              h("sqm-skeleton", null),
-              h("sqm-skeleton", null),
-              h("sqm-skeleton", { width: "45%" }))))));
+              h("sl-skeleton", { style: { marginBottom: "var(--sl-spacing-small)" } }),
+              h("sl-skeleton", { style: { marginBottom: "var(--sl-spacing-small)" } }),
+              h("sl-skeleton", { style: { width: "45%" } }))))));
     })));
   }
   function errorMessage() {

package/dist/collection/components/sqm-rewards-table/RewardsTable.stories.js

@@ -11,19 +11,19 @@ export default {
 const loadingElement = (h("div", { slot: "loading", style: { display: "contents" } },
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sqm-skeleton", null))),
+      h("sl-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sqm-skeleton", null))),
+      h("sl-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sqm-skeleton", null))),
+      h("sl-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sqm-skeleton", null))),
+      h("sl-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sqm-skeleton", null)))));
+      h("sl-skeleton", null)))));
 const emptyElement = (h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png", "empty-state-header": "View your rewards", "empty-state-text": "See all the rewards you have earned from referring friends and completing tasks" }));
 const rewardsTableProps = (rows, empty = false, loading = false, prev = "Prev", next = "Next", hidden = "") => ({
   states: {

package/dist/collection/components/sqm-rewards-table/sqm-rewards-table.js

@@ -269,7 +269,7 @@ function LoadingSlot() {
 function LoadingRow() {
   return (h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sqm-skeleton", null))));
+      h("sl-skeleton", null))));
 }
 function useRewardsTableDemo(props, emptyElement, loadingElement) {
   const [content, setContent] = useReducer((state, next) => ({

package/dist/collection/components/sqm-stencilbook/Themes.js

@@ -22,10 +22,6 @@ export const Netflix = {
     borderThickness: 1,
   },
   color: {
-    loadingSkeleton: {
-      background: "#272727",
-      animationBackground: "#E50914",
-    },
     textColorShades: {
       mainText: "white",
       subduedText: "#B3B3B3",
@@ -117,10 +113,6 @@ export const Amazon = {
   },
   color: {
     backgroundColor: "#ffffff",
-    loadingSkeleton: {
-      background: "hsl(240 4.8% 95.9%)",
-      animationBackground: "#FF9900",
-    },
     textColorShades: {
       mainText: "#2f2f2f",
       subduedText: "#565959",
@@ -209,10 +201,6 @@ export const Spotify = {
     borderThickness: 1,
   },
   color: {
-    loadingSkeleton: {
-      background: "#282928",
-      animationBackground: "#1ed760",
-    },
     textColorShades: {
       mainText: "white",
       subduedText: "white",

package/dist/collection/components/sqm-stencilbook/sqm-stencilbook.js

@@ -100,7 +100,6 @@ import * as LeadForm from "../sqm-lead-form/LeadForm.stories";
 import * as LeadInputField from "../sqm-lead-form/LeadInputField.stories";
 import * as LeadFormDropdownField from "../sqm-lead-form/LeadFormDropdownField.stories";
 import * as LeadCheckboxField from "../sqm-lead-form/LeadCheckboxField.stories";
-import * as Skeleton from "../sqm-skeleton/Skeleton.stories";
 import { ShadowViewAddon } from "../../ShadowViewAddon";
 import { CucumberAddon } from "./CucumberAddon";
 import { HookStoryAddon } from "./HookStoryAddon";
@@ -205,7 +204,6 @@ const stories = [
   LeadInputField,
   LeadFormDropdownField,
   LeadCheckboxField,
-  Skeleton,
 ];
 /**
  * For internal documentation

package/dist/collection/components/sqm-task-card/sqm-task-card-view.js

@@ -217,11 +217,11 @@ export function TaskCardView(props) {
           ? "main complete"
           : "main" },
       h("div", { class: "container", part: "sqm-card-container", "data-subdue": taskComplete || taskUnavailable },
-        h("div", { class: sheet.classes.Header, style: { opacity: taskComplete || taskUnavailable ? "0.45" : "1" } }, states.loading ? (h("sqm-skeleton", { style: { width: "22%", margin: "0" } })) : (h("div", null,
+        h("div", { class: sheet.classes.Header, style: { opacity: taskComplete || taskUnavailable ? "0.45" : "1" } }, states.loading ? (h("sl-skeleton", { style: { width: "22%", margin: "0" } })) : (h("div", null,
           showComplete && (h("span", { class: taskUnavailable ? "icon neutral" : "icon" }, taskComplete ? checkmark_filled : checkmark_circle)),
           h("span", { part: "sqm-value", class: "value" }, content.rewardAmount),
           h("span", { part: "sqm-unit", class: "text" }, content.rewardUnit)))),
-        states.loading ? (h("sqm-skeleton", { style: { width: "42%", margin: "var(--sl-spacing-medium) 0" } })) : (h("div", { class: "title", part: "sqm-title", style: {
+        states.loading ? (h("sl-skeleton", { style: { width: "42%", margin: "var(--sl-spacing-medium) 0" } })) : (h("div", { class: "title", part: "sqm-title", style: {
             marginBottom: !content.description
               ? content.steps
                 ? "var(--sl-spacing-x-large)"
@@ -231,9 +231,9 @@ export function TaskCardView(props) {
               : "",
             opacity: taskComplete || taskUnavailable ? "0.45" : "1",
           } }, content.cardTitle)),
-        states.loading ? (h("sqm-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.description && (h(Details, Object.assign({}, props, { opacity: taskComplete || taskUnavailable ? "0.45" : "1" })))),
-        content.showProgressBar && states.loading ? (h("sqm-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.showProgressBar && (h(ProgressBarView, Object.assign({}, props.content, props.states, { opacity: taskComplete || taskUnavailable ? "0.75" : "1", complete: taskComplete, expired: taskUnavailable })))),
-        h("div", { class: sheet.classes.Footer, "data-subdue": taskComplete || taskUnavailable }, states.loading ? (h("sqm-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (h("div", { style: { display: "contents" } },
+        states.loading ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.description && (h(Details, Object.assign({}, props, { opacity: taskComplete || taskUnavailable ? "0.45" : "1" })))),
+        content.showProgressBar && states.loading ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.showProgressBar && (h(ProgressBarView, Object.assign({}, props.content, props.states, { opacity: taskComplete || taskUnavailable ? "0.75" : "1", complete: taskComplete, expired: taskUnavailable })))),
+        h("div", { class: sheet.classes.Footer, "data-subdue": taskComplete || taskUnavailable }, states.loading ? (h("sl-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (h("div", { style: { display: "contents" } },
           h("span", { class: "text" },
             content.repeatable && (h("div", null,
               h("span", { class: repetitions > 0

package/dist/collection/components/sqm-widget-verification/sqm-email-verification/sqm-email-verification-view.js

@@ -189,12 +189,9 @@ export 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/collection/components/tax-and-cash/sqm-indirect-tax-form/sqm-indirect-tax-form-view.js

@@ -157,7 +157,7 @@ export 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",

package/dist/collection/components/tax-and-cash/sqm-payout-details-card/sqm-payout-details-card-view.js

@@ -138,11 +138,11 @@ export 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";

package/dist/collection/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert-view.js

@@ -168,8 +168,8 @@ export function PayoutStatusAlertView(props) {
             supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
           button: (h("div", { class: sheet.classes.ButtonContainer },
-            h("sl-button", { disabled: states.loading, type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton),
-            h("sl-button", { disabled: states.loading, type: "secondary", exportparts: "base: secondarybutton-base", onClick: callbacks.onNewFormClick }, text.newFormButton))),
+            h("sl-button", { disabled: states.loading, type: "primary", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton),
+            h("sl-button", { disabled: states.loading, type: "default", onClick: callbacks.onNewFormClick }, text.newFormButton))),
           alertType: "warning",
           icon: "exclamation-triangle",
         };
@@ -183,8 +183,8 @@ export function PayoutStatusAlertView(props) {
             supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
           button: (h("div", { class: sheet.classes.ButtonContainer },
-            h("sl-button", { disabled: states.loading, type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton),
-            h("sl-button", { disabled: states.loading, type: "secondary", exportparts: "base: secondarybutton-base", onClick: callbacks.onNewFormClick }, text.newFormButton))),
+            h("sl-button", { disabled: states.loading, type: "primary", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton),
+            h("sl-button", { disabled: states.loading, type: "default", onClick: callbacks.onNewFormClick }, text.newFormButton))),
           alertType: "warning",
           icon: "exclamation-triangle",
         };
@@ -198,8 +198,8 @@ export function PayoutStatusAlertView(props) {
             supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
           button: (h("div", { class: sheet.classes.ButtonContainer },
-            h("sl-button", { disabled: states.loading, type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton),
-            h("sl-button", { disabled: states.loading, type: "secondary", exportparts: "base: secondarybutton-base", onClick: callbacks.onNewFormClick }, text.newFormButton))),
+            h("sl-button", { disabled: states.loading, type: "primary", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton),
+            h("sl-button", { disabled: states.loading, type: "default", onClick: callbacks.onNewFormClick }, text.newFormButton))),
           alertType: "warning",
           icon: "exclamation-triangle",
         };
@@ -213,7 +213,7 @@ export function PayoutStatusAlertView(props) {
             supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
           button: (h("div", { class: sheet.classes.ButtonContainer },
-            h("sl-button", { disabled: states.loading, type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton))),
+            h("sl-button", { disabled: states.loading, type: "primary", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton))),
           alertType: "warning",
           icon: "exclamation-triangle",
         };
@@ -227,7 +227,7 @@ export function PayoutStatusAlertView(props) {
             supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
           button: (h("div", { class: sheet.classes.ButtonContainer },
-            h("sl-button", { disabled: states.loading, type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton))),
+            h("sl-button", { disabled: states.loading, type: "primary", onClick: callbacks.onPaymentInfoClick }, text.editPaymentInformationButton))),
           alertType: "error",
           icon: "exclamation-triangle",
         };
@@ -252,9 +252,9 @@ export function PayoutStatusAlertView(props) {
       case "OVER_W9_THRESHOLD":
         if (states.enforceUsTaxComplianceOption === "CASH_ONLY")
           return;
-        return data.type === "SquatchJS2" ? (h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.w9RequiredButtonText, "scroll-animation": "smooth" })) : data.type === "SquatchPortal" ? (h("sl-button", { type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onTermsClick }, text.w9RequiredButtonText)) : (
+        return data.type === "SquatchJS2" ? (h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.w9RequiredButtonText, "scroll-animation": "smooth" })) : data.type === "SquatchPortal" ? (h("sl-button", { type: "default", onClick: callbacks.onTermsClick }, text.w9RequiredButtonText)) : (
         // Demo case
-        h("sl-button", { type: "primary", exportparts: "base: primarybutton-base" }, text.w9RequiredButtonText));
+        h("sl-button", { type: "default" }, text.w9RequiredButtonText));
       case "INFORMATION_REQUIRED":
         return data.type === "SquatchJS2" ? (h("div", { style: { paddingTop: "10px" } },
           h("sqm-scroll", { "scroll-tag-name": "sqm-tabs", "button-text": text.informationRequiredButtonText, "scroll-animation": "smooth" }))) : data.type === "SquatchPortal" ? (h("div", { style: { paddingTop: "10px" } },
@@ -271,6 +271,9 @@ export function PayoutStatusAlertView(props) {
         return;
     }
   }
+  if (states.loading) {
+    return h("sl-skeleton", { class: sheet.classes.SkeletonOne });
+  }
   const alertDetails = getAlert(states.status);
   if (states.status === "DONE" || !alertDetails) {
     return h("div", null);
@@ -278,7 +281,7 @@ export function PayoutStatusAlertView(props) {
   return (h("div", { part: "sqm-base" },
     h("style", { type: "text/css" }, styleString),
     h("style", { type: "text/css" }, vanillaStyle),
-    h("sqm-form-message", { loading: true, type: alertDetails.alertType },
+    h("sqm-form-message", { type: alertDetails.alertType },
       h("p", { part: "alert-title" }, alertDetails.header),
       h("p", { part: "alert-description" }, alertDetails.description),
       getButton(states.status))));

package/dist/collection/components/tax-and-cash/sqm-tax-and-cash/LoadingView.js

@@ -4,35 +4,47 @@ const style = {
   Container: {
     display: "flex",
     flexDirection: "column",
-    gap: "35px",
+    gap: "24px",
   },
   HeaderContainer: {
     display: "flex",
     flexDirection: "column",
     gap: "10px",
   },
+  TitleSkeleton: {
+    width: "45%",
+    height: "40px !important",
+  },
+  StepSkeleton: {
+    width: "15%",
+  },
+  HeaderSkeleton: {
+    width: "25%",
+    height: "30px !important",
+  },
+  InputSkeleton: {
+    width: "75%",
+  },
+  ButtonSkeleton: {
+    width: "80px",
+    height: "30px !important",
+  },
 };
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 const LoadingView = () => {
   return (h("div", { class: sheet.classes.Container },
     h("style", { type: "text/css" }, styleString),
-    h("sqm-skeleton", { width: "45%", height: "40px !important" }),
+    h("sl-skeleton", { class: sheet.classes.TitleSkeleton }),
     h("div", { class: sheet.classes.HeaderContainer },
-      h("sqm-skeleton", { width: "15%" }),
-      h("sqm-skeleton", { width: "25%", height: "30px !important" })),
-    h("sqm-skeleton", { width: "75%", height: "35px" }),
-    h("sqm-skeleton", { width: "75%", height: "35px" }),
-    h("sqm-skeleton", { width: "75%", height: "35px" }),
-    h("sqm-skeleton", { width: "75%", height: "35px" }),
-    h("sqm-skeleton", { width: "75%", height: "35px" }),
-    h("sqm-skeleton", { width: "75%", height: "35px" }),
-    h("sqm-skeleton", { width: "75%", height: "35px" }),
-    h("sqm-skeleton", { width: "75%", height: "35px" }),
-    h("sqm-skeleton", { width: "75%", height: "35px" }),
-    h("sqm-skeleton", { width: "75%", height: "35px" }),
-    h("sqm-skeleton", { width: "75%", height: "35px" }),
-    h("sqm-skeleton", { width: "15%" }),
-    h("sqm-skeleton", { width: "80px", height: "30px !important" })));
+      h("sl-skeleton", { class: sheet.classes.StepSkeleton }),
+      h("sl-skeleton", { class: sheet.classes.HeaderSkeleton })),
+    h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
+    h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
+    h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
+    h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
+    h("sl-skeleton", { class: sheet.classes.InputSkeleton }),
+    h("sl-skeleton", { class: sheet.classes.StepSkeleton }),
+    h("sl-skeleton", { class: sheet.classes.ButtonSkeleton })));
 };
 export default LoadingView;