@saasquatch/mint-components 2.1.2-0 → 2.1.2-1

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

@@ -68,11 +68,7 @@ export function QrCodeView({ error, qrLink, titleText, downloadCodeText, printCo
       return (h(ErrorView, { loadingErrorAlertDescription: errorHeaderText, loadingErrorAlertHeader: errorDescriptionText }));
     }
     else if (loading) {
-      return (h("sl-skeleton", { className: sheet.classes.LoadingSkeleton, effect: "sheen", style: {
-          width: "100px",
-          height: "100px",
-          borderRadius: "0px !important",
-        } }));
+      return h("sqm-skeleton", { height: "100px", width: "100px" });
     }
     else if (qrLink) {
       return (h("svg", { width: "100", height: "100" },
@@ -88,6 +84,6 @@ export function QrCodeView({ error, qrLink, titleText, downloadCodeText, printCo
       !hideTitle && h("span", { part: "sqm-title" }, titleText),
       codeContent,
       h("div", { class: sheet.classes.ButtonContainer },
-        h("sl-button", { size: "small", exportparts: "base: primarybutton-base", type: "primary", onClick: createDownloadable }, downloadCodeText),
-        h("sl-button", { size: "small", exportparts: "base: secondarybutton-base", type: "text", onClick: createPrintable }, printCodeText)))));
+        h("sl-button", { loading: loading, size: "small", exportparts: "base: primarybutton-base", type: "primary", onClick: createDownloadable }, downloadCodeText),
+        h("sl-button", { loading: loading, size: "small", exportparts: "base: secondarybutton-base", type: "text", onClick: createPrintable }, printCodeText)))));
 }

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

@@ -275,6 +275,7 @@ function useDemoQRCode(props) {
     hideTitle: props.hideTitle,
     showDialog: () => setDialog(true),
     hideDialog: () => setDialog(false),
+    loading: true,
     titleText: props.titleText,
     viewCodeText: props.viewCodeText,
     downloadCodeText: props.downloadCodeText,

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

@@ -233,7 +233,7 @@ function LoadingSlot() {
     h(LoadingRow, null)));
 }
 function LoadingRow() {
-  return h("sl-skeleton", { style: { width: "100%" } });
+  return h("sqm-skeleton", null);
 }
 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("sl-skeleton", null))),
+      h("sqm-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sl-skeleton", null))),
+      h("sqm-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sl-skeleton", null))),
+      h("sqm-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sl-skeleton", null))),
+      h("sqm-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sl-skeleton", null)))));
+      h("sqm-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/columns/sqm-referral-table-user-column.js

@@ -5,7 +5,7 @@ import { useRequestRerender } from "../../../tables/re-render";
  * @uiName Referral Table User Column
  * @validParents ["sqm-referral-table"]
  * @exampleGroup Referrals
- * @example Referral Table User Column - <sqm-referral-table-user-column column-title="Customer" anonymous-user="Anonymous User" deleted-user="Deleted User"></sqm-referral-table-user-column>
+ * @example Referral Table User Column - <sqm-referral-table-user-column column-title="Customer" anonymous-user="Your Friend" deleted-user="Deleted User"></sqm-referral-table-user-column>
  */
 export class ReferralTableUserColumn {
   constructor() {
@@ -18,7 +18,7 @@ export class ReferralTableUserColumn {
      *
      * @uiName Anonymous user text
      */
-    this.anonymousUser = "Anonymous User";
+    this.anonymousUser = "Your Friend";
     /**
      * Name displayed for deleted users
      *
@@ -116,7 +116,7 @@ export class ReferralTableUserColumn {
       },
       "attribute": "anonymous-user",
       "reflect": false,
-      "defaultValue": "\"Anonymous User\""
+      "defaultValue": "\"Your Friend\""
     },
     "deletedUser": {
       "type": "string",

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

@@ -14,7 +14,7 @@ import { tryMethod, useReferralTable } from "./useReferralTable";
  * @validChildren ["sqm-referral-table-column","sqm-referral-table-date-column","sqm-referral-table-rewards-column","sqm-referral-table-status-column","sqm-referral-table-user-column","sqm-empty"]
  * @exampleGroup Referrals
  * @slots [{"name":"", "title":"Table Row"},{"name":"empty", "title":"Empty"},{"name":"loading","title":"Loading"}]
- * @example Referral Table - <sqm-referral-table per-page="4" hidden-columns="2" more-label="Next" prev-label="Prev" sm-breakpoint="599" md-breakpoint="799" > <sqm-referral-table-user-column column-title="Customer" anonymous-user="Anonymous User" deleted-user="Deleted User" ></sqm-referral-table-user-column> <sqm-referral-table-rewards-column column-title="Rewards" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PROCESSING {Payment Processing} PAYOUT_FAILED {Payout Failed} PAYOUT_CANCELLED {Payout Cancelled} PENDING_TAX_REVIEW {Pending} PENDING_NEW_TAX_FORM {Pending} PENDING_TAX_SUBMISSION {Pending} PENDING_PARTNER_CREATION {Pending} DENIED {Denied} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }" status-long-text="{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} PENDING_REVIEW {Pending since} PAYOUT_APPROVED {Processing until {scheduledPayoutDate}. Payout is then scheduled based on your settings.} PAYOUT_FAILED {Payout failed due to a fulfillment issue and is currently being retried.} PAYOUT_CANCELLED {If you think this is a mistake, contact our Support team.} PENDING_TAX_REVIEW {Awaiting tax form review} PENDING_NEW_TAX_FORM {Invalid tax form. Submit a new form to receive your rewards.} PROCESSING {Processing until {scheduledPayoutDate}. Payout is then scheduled based on your settings.} PENDING_TAX_SUBMISSION {Submit your tax documents to receive your rewards} PENDING_PARTNER_CREATION {Complete your tax and cash payout setup to receive your rewards} DENIED {Denied on} EXPIRED {Reward expired on} other {Not available} }" fuel-tank-text="Your code is" reward-received-text="Reward received on" expiring-text="Expiring in" pending-for-text="{status} for {date}" denied-help-text="Contact support if you think this is a mistake." ></sqm-referral-table-rewards-column> <sqm-referral-table-date-column column-title="Date converted" date-shown="dateConverted" ></sqm-referral-table-date-column> <sqm-referral-table-status-column column-title="Status" converted-status-text="Converted" in-progress-status-text="In Progress" pending-review-status-text="Pending" denied-status-text="Denied" pending-review-status-sub-text="Awaiting review" denied-status-sub-text="Detected self-referral" ></sqm-referral-table-status-column> <sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png" empty-state-header="View your referral details" empty-state-text="Refer a friend to view the status of your referrals and rewards earned" slot="empty" ></sqm-empty> </sqm-referral-table>
+ * @example Referral Table - <sqm-referral-table per-page="4" hidden-columns="2" more-label="Next" prev-label="Prev" sm-breakpoint="599" md-breakpoint="799" > <sqm-referral-table-user-column column-title="Customer" anonymous-user="Your Friend" deleted-user="Deleted User" ></sqm-referral-table-user-column> <sqm-referral-table-rewards-column column-title="Rewards" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PROCESSING {Payment Processing} PAYOUT_FAILED {Payout Failed} PAYOUT_CANCELLED {Payout Cancelled} PENDING_TAX_REVIEW {Pending} PENDING_NEW_TAX_FORM {Pending} PENDING_TAX_SUBMISSION {Pending} PENDING_PARTNER_CREATION {Pending} DENIED {Denied} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }" status-long-text="{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} PENDING_REVIEW {Pending since} PAYOUT_APPROVED {Processing until {scheduledPayoutDate}. Payout is then scheduled based on your settings.} PAYOUT_FAILED {Payout failed due to a fulfillment issue and is currently being retried.} PAYOUT_CANCELLED {If you think this is a mistake, contact our Support team.} PENDING_TAX_REVIEW {Awaiting tax form review} PENDING_NEW_TAX_FORM {Invalid tax form. Submit a new form to receive your rewards.} PROCESSING {Processing until {scheduledPayoutDate}. Payout is then scheduled based on your settings.} PENDING_TAX_SUBMISSION {Submit your tax documents to receive your rewards} PENDING_PARTNER_CREATION {Complete your tax and cash payout setup to receive your rewards} DENIED {Denied on} EXPIRED {Reward expired on} other {Not available} }" fuel-tank-text="Your code is" reward-received-text="Reward received on" expiring-text="Expiring in" pending-for-text="{status} for {date}" denied-help-text="Contact support if you think this is a mistake." ></sqm-referral-table-rewards-column> <sqm-referral-table-date-column column-title="Date converted" date-shown="dateConverted" ></sqm-referral-table-date-column> <sqm-referral-table-status-column column-title="Status" converted-status-text="Converted" in-progress-status-text="In Progress" pending-review-status-text="Pending" denied-status-text="Denied" pending-review-status-sub-text="Awaiting review" denied-status-sub-text="Detected self-referral" ></sqm-referral-table-status-column> <sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png" empty-state-header="View your referral details" empty-state-text="Refer a friend to view the status of your referrals and rewards earned" slot="empty" ></sqm-empty> </sqm-referral-table>
  */
 export class ReferralTable {
   constructor() {
@@ -306,7 +306,7 @@ function LoadingSlot() {
 function LoadingRow() {
   return (h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sl-skeleton", null))));
+      h("sqm-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("sl-skeleton", { style: {
-                  width: "100px",
-                  height: "100px",
+              h("sqm-skeleton", { style: {
                   margin: "9px",
-                  "--border-radius": "var(--sqm-border-radius-normal)",
-                } })),
+                }, width: "100px", height: "100px" })),
             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("sl-skeleton", { style: { marginBottom: "var(--sl-spacing-small)" } }),
-              h("sl-skeleton", { style: { marginBottom: "var(--sl-spacing-small)" } }),
-              h("sl-skeleton", { style: { width: "45%" } }))))));
+              h("sqm-skeleton", null),
+              h("sqm-skeleton", null),
+              h("sqm-skeleton", { 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("sl-skeleton", null))),
+      h("sqm-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sl-skeleton", null))),
+      h("sqm-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sl-skeleton", null))),
+      h("sqm-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sl-skeleton", null))),
+      h("sqm-skeleton", null))),
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sl-skeleton", null)))));
+      h("sqm-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/RewardsTableCell.stories.js

@@ -309,7 +309,7 @@ export const SourceCellReferred = () => {
   return (h("sqm-rewards-table-source-cell", { reward: { ...rewardsData, ...referred(johnDoe) }, referralText: "Referred by" }));
 };
 export const SourceCellAnonymousUser = () => {
-  return (h("sqm-rewards-table-source-cell", { reward: { ...rewardsData, ...referral(anon) }, referralText: "Referral to", anonymousUserText: "Anonymous User" }));
+  return (h("sqm-rewards-table-source-cell", { reward: { ...rewardsData, ...referral(anon) }, referralText: "Referral to", anonymousUserText: "Your Friend" }));
 };
 export const SourceCellDeletedUser = () => {
   return (h("sqm-rewards-table-source-cell", { reward: { ...rewardsData, ...referral(null) }, referralText: "Referral to", deletedUserText: "Deleted User" }));

package/dist/collection/components/sqm-rewards-table/columns/sqm-rewards-table-source-column.js

@@ -5,7 +5,7 @@ import { useRequestRerender } from "../../../tables/re-render";
  * @uiName Reward Table Source Column
  * @validParents ["sqm-rewards-table"]
  * @exampleGroup Rewards
- * @example Reward Table Source Column - <sqm-rewards-table-source-column column-title="Source" anonymous-user="Anonymous User" deleted-user="Deleted User" reward-exchange-text="Reward Exchange" referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}" reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}"></sqm-rewards-table-source-column>
+ * @example Reward Table Source Column - <sqm-rewards-table-source-column column-title="Source" anonymous-user="Your Friend" deleted-user="Deleted User" reward-exchange-text="Reward Exchange" referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}" reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}"></sqm-rewards-table-source-column>
  */
 export class RewardTableUserColumn {
   constructor() {
@@ -18,7 +18,7 @@ export class RewardTableUserColumn {
      *
      * @uiName Anonymous user text
      */
-    this.anonymousUser = "Anonymous User";
+    this.anonymousUser = "Your Friend";
     /**
      * Name displayed for deleted users
      *
@@ -106,7 +106,7 @@ export class RewardTableUserColumn {
       },
       "attribute": "anonymous-user",
       "reflect": false,
-      "defaultValue": "\"Anonymous User\""
+      "defaultValue": "\"Your Friend\""
     },
     "deletedUser": {
       "type": "string",

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

@@ -13,7 +13,7 @@ import { tryMethod, useRewardsTable } from "./useRewardsTable";
  * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-tab","sqb-program-section","sqb-conditional-section"]
  * @exampleGroup Rewards
  * @slots [{"name":"", "title":"Table Row"},{"name":"empty", "title":"Empty"},{"name":"loading","title":"Loading"}]
- * @example Reward Table - <sqm-rewards-table per-page="4" prev-label="Prev" more-label="Next" hidden-columns="0" sm-breakpoint="599" md-breakpoint="799" ><sqm-rewards-table-status-column column-title="Status" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PROCESSING {Payment Processing} PAYOUT_CANCELLED {Payout Cancelled} PAYOUT_FAILED {Payout Failed} EXPIRED {Expired} REDEEMED {Redeemed} DENIED {Denied} other {Not available} }" expiry-text="Expires on " pending-us-tax="W-9 required" pending-scheduled="Until" pending-unhandled="Fulfillment error" pending-review-text="Awaiting review" denied-text="Detected self-referral" pending-tax-review="Awaiting tax form review." pending-new-tax-form="Invalid tax form. Submit a new form to receive your rewards." pending-tax-submission="Submit your tax documents to receive your rewards." pending-partner-creation="Complete your tax and cash payout setup to receive your rewards." payout-failed="Payout failed due to a fulfillment issue and is currently being retried." payout-cancelled="If you think this is a mistake, contact our Support team." payout-approved="Reward was scheduled for payment based on your settings, barring any account holds." ></sqm-rewards-table-status-column> <sqm-rewards-table-source-column column-title="Source" anonymous-user="Anonymous User" deleted-user="Deleted User" reward-exchange-text="Reward Exchange" referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}" reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}" ></sqm-rewards-table-source-column ><sqm-rewards-table-reward-column column-title="Reward" redeemed-text="{redeemedAmount} redeemed" available-text="{availableAmount} remaining" copy-text="Copied!" ></sqm-rewards-table-reward-column ><sqm-rewards-table-date-column column-title="Date received" date-shown="dateGiven" ></sqm-rewards-table-date-column ><sqm-rewards-table-customer-note-column column-title="Note" ></sqm-rewards-table-customer-note-column ><sqm-empty slot="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="Complete program tasks to view the details of your rewards" ></sqm-empty ></sqm-rewards-table>
+ * @example Reward Table - <sqm-rewards-table per-page="4" prev-label="Prev" more-label="Next" hidden-columns="0" sm-breakpoint="599" md-breakpoint="799" ><sqm-rewards-table-status-column column-title="Status" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PROCESSING {Payment Processing} PAYOUT_CANCELLED {Payout Cancelled} PAYOUT_FAILED {Payout Failed} EXPIRED {Expired} REDEEMED {Redeemed} DENIED {Denied} other {Not available} }" expiry-text="Expires on " pending-us-tax="W-9 required" pending-scheduled="Until" pending-unhandled="Fulfillment error" pending-review-text="Awaiting review" denied-text="Detected self-referral" pending-tax-review="Awaiting tax form review." pending-new-tax-form="Invalid tax form. Submit a new form to receive your rewards." pending-tax-submission="Submit your tax documents to receive your rewards." pending-partner-creation="Complete your tax and cash payout setup to receive your rewards." payout-failed="Payout failed due to a fulfillment issue and is currently being retried." payout-cancelled="If you think this is a mistake, contact our Support team." payout-approved="Reward was scheduled for payment based on your settings, barring any account holds." ></sqm-rewards-table-status-column> <sqm-rewards-table-source-column column-title="Source" anonymous-user="Your Friend" deleted-user="Deleted User" reward-exchange-text="Reward Exchange" referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}" reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}" ></sqm-rewards-table-source-column ><sqm-rewards-table-reward-column column-title="Reward" redeemed-text="{redeemedAmount} redeemed" available-text="{availableAmount} remaining" copy-text="Copied!" ></sqm-rewards-table-reward-column ><sqm-rewards-table-date-column column-title="Date received" date-shown="dateGiven" ></sqm-rewards-table-date-column ><sqm-rewards-table-customer-note-column column-title="Note" ></sqm-rewards-table-customer-note-column ><sqm-empty slot="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="Complete program tasks to view the details of your rewards" ></sqm-empty ></sqm-rewards-table>
  */
 export class RewardsTable {
   constructor() {
@@ -269,7 +269,7 @@ function LoadingSlot() {
 function LoadingRow() {
   return (h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5 },
-      h("sl-skeleton", null))));
+      h("sqm-skeleton", null))));
 }
 function useRewardsTableDemo(props, emptyElement, loadingElement) {
   const [content, setContent] = useReducer((state, next) => ({

package/dist/collection/components/sqm-skeleton/Skeleton.stories.js

@@ -0,0 +1,16 @@
+import { h } from "@stencil/core";
+export default {
+  title: "Components/Skeleton",
+};
+export const Default = () => {
+  return h("sqm-skeleton", null);
+};
+export const CustomWidth = () => {
+  return h("sqm-skeleton", { width: "100px" });
+};
+export const CustomHeight = () => {
+  return h("sqm-skeleton", { height: "100px" });
+};
+export const CustomWidthAndHeight = () => {
+  return h("sqm-skeleton", { width: "150px", height: "50px" });
+};

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

@@ -0,0 +1,89 @@
+import { h, Component, State, Prop } from "@stencil/core";
+export class Skeleton {
+  constructor() {
+    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() {
+    return (h("div", null,
+      h("style", { type: "text/css" }, this.vanillaStyle),
+      h("sl-skeleton", null)));
+  }
+  static get is() { return "sqm-skeleton"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "height": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Height (in pixels or %)",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "height",
+      "reflect": false,
+      "defaultValue": "\"100%\""
+    },
+    "width": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Width (in pixels or %)",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "width",
+      "reflect": false,
+      "defaultValue": "\"100%\""
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}

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

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

@@ -105,6 +105,7 @@ 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 * as UserInfoFormView from "../tax-and-cash/sqm-user-info-form/UserInfoFormView.stories";
 import { ShadowViewAddon } from "../../ShadowViewAddon";
 import { CucumberAddon } from "./CucumberAddon";
@@ -212,6 +213,7 @@ const stories = [
   LeadInputField,
   LeadFormDropdownField,
   LeadCheckboxField,
+  Skeleton,
   TaxAndCashRewardsTableCell,
   TaxAndCashRewardsTable,
   TaxAndCashReferralTableRewardsCell,

package/dist/collection/components/sqm-tabs/Tabs.stories.js

@@ -52,7 +52,7 @@ export const ReferralProgram = () => (h("div", { style: { maxWidth: "700px", mar
       <sqm-referral-table>
         <sqm-referral-table-user-column
           column-title="User"
-          anonymous-user="Anonymous User"
+          anonymous-user="Your Friend"
           deleted-user="Deleted User"
         >
         </sqm-referral-table-user-column>
@@ -95,7 +95,7 @@ export const ReferralProgram = () => (h("div", { style: { maxWidth: "700px", mar
         >
         </sqm-rewards-table-reward-column>
         <sqm-rewards-table-source-column
-          anonymous-user="Anonymous User"
+          anonymous-user="Your Friend"
           column-title="Source"
           deleted-user="Deleted User"
           referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}"
@@ -142,7 +142,7 @@ export const LoyaltyProgram = () => (h("div", { style: { maxWidth: "700px", marg
       <sqm-referral-table>
         <sqm-referral-table-user-column
           column-title="User"
-          anonymous-user="Anonymous User"
+          anonymous-user="Your Friend"
           deleted-user="Deleted User"
         >
         </sqm-referral-table-user-column>
@@ -185,7 +185,7 @@ export const LoyaltyProgram = () => (h("div", { style: { maxWidth: "700px", marg
         >
         </sqm-rewards-table-reward-column>
         <sqm-rewards-table-source-column
-          anonymous-user="Anonymous User"
+          anonymous-user="Your Friend"
           column-title="Source"
           deleted-user="Deleted User"
           referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}"
@@ -235,7 +235,7 @@ export const BottomTabs = () => (h("div", { style: { maxWidth: "700px", margin:
       <sqm-referral-table
         ><sqm-referral-table-user-column
           column-title="User"
-          anonymous-user="Anonymous User"
+          anonymous-user="Your Friend"
           deleted-user="Deleted User"
         >
         </sqm-referral-table-user-column>
@@ -278,7 +278,7 @@ export const BottomTabs = () => (h("div", { style: { maxWidth: "700px", margin:
         >
         </sqm-rewards-table-reward-column>
         <sqm-rewards-table-source-column
-          anonymous-user="Anonymous User"
+          anonymous-user="Your Friend"
           column-title="Source"
           deleted-user="Deleted User"
           referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}"
@@ -328,7 +328,7 @@ export const LeftTabs = () => (h("div", { style: { maxWidth: "900px", margin: "a
       <sqm-referral-table
         ><sqm-referral-table-user-column
           column-title="User"
-          anonymous-user="Anonymous User"
+          anonymous-user="Your Friend"
           deleted-user="Deleted User"
         >
         </sqm-referral-table-user-column>
@@ -371,7 +371,7 @@ export const LeftTabs = () => (h("div", { style: { maxWidth: "900px", margin: "a
         >
         </sqm-rewards-table-reward-column>
         <sqm-rewards-table-source-column
-          anonymous-user="Anonymous User"
+          anonymous-user="Your Friend"
           column-title="Source"
           deleted-user="Deleted User"
           referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}"
@@ -421,7 +421,7 @@ export const RightTabs = () => (h("div", { style: { maxWidth: "900px", margin: "
       <sqm-referral-table
         ><sqm-referral-table-user-column
           column-title="User"
-          anonymous-user="Anonymous User"
+          anonymous-user="Your Friend"
           deleted-user="Deleted User"
         >
         </sqm-referral-table-user-column>
@@ -464,7 +464,7 @@ export const RightTabs = () => (h("div", { style: { maxWidth: "900px", margin: "
         >
         </sqm-rewards-table-reward-column>
         <sqm-rewards-table-source-column
-          anonymous-user="Anonymous User"
+          anonymous-user="Your Friend"
           column-title="Source"
           deleted-user="Deleted User"
           referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}"

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("sl-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("sqm-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("sl-skeleton", { style: { width: "42%", margin: "var(--sl-spacing-medium) 0" } })) : (h("div", { class: "title", part: "sqm-title", style: {
+        states.loading ? (h("sqm-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("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" } },
+        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" } },
           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,9 +189,12 @@ export function WidgetEmailVerificationView(props) {
   const { states, callbacks, text } = props;
   const renderLoadingSkeleton = () => {
     return (h("div", { class: sheet.classes.Wrapper },
-      h("sl-skeleton", { class: sheet.classes.SkeletonOne }),
-      h("sl-skeleton", { class: sheet.classes.SkeletonTwo }),
-      h("sl-skeleton", { class: sheet.classes.SkeletonThree })));
+      h("sqm-skeleton", { height: "16px", width: "50%" }),
+      h("sqm-skeleton", { height: "16px", width: "50%" }),
+      h("sqm-skeleton", { height: "16px", width: "50%" }),
+      h("sqm-skeleton", { height: "34px", width: "30%" }),
+      h("sqm-skeleton", { height: "24px", width: "15%" }),
+      h("sl-button", { submit: true, class: sheet.classes.ContinueButton, loading: true, exportparts: "base: primarybutton-base", type: "primary" }, text.sendCodeText)));
   };
   return (h("div", { part: "sqm-base" },
     h("style", { type: "text/css" },

package/dist/collection/components/tax-and-cash/sqm-banking-info-form/formDefinitions.js

@@ -96,10 +96,10 @@ export function getFormMap({ props, getValidationErrorMessage, bankCountry, }) {
             defaultMessage: props.text.taxPayerIdLabel,
           }, {
             bankCountry,
-          }), type: "text", name: "/beneficiaryTaxPayerId", id: "beneficiaryTaxPayerId", key: "beneficiaryTaxPayerId" }, (((_0 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _0 === void 0 ? void 0 : _0.beneficiaryTaxPayerId) && {
+          }), type: "text", name: "/taxPayerId", id: "taxPayerId", key: "taxPayerId" }, (((_0 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _0 === void 0 ? void 0 : _0.taxPayerId) && {
           class: "error-input",
           helpText: getValidationErrorMessage({
-            type: (_2 = (_1 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _1 === void 0 ? void 0 : _1.beneficiaryTaxPayerId) === null || _2 === void 0 ? void 0 : _2.type,
+            type: (_2 = (_1 = errors === null || errors === void 0 ? void 0 : errors.inputErrors) === null || _1 === void 0 ? void 0 : _1.taxPayerId) === null || _2 === void 0 ? void 0 : _2.type,
             label: props.text.taxPayerIdLabel,
           }),
         }))),

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", { type: "info" },
+      states.isPartner && (h("sqm-form-message", { loading: states.loading, 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 },
-        h("sl-skeleton", { class: classes.SkeletonOne }),
-        h("sl-skeleton", { class: classes.SkeletonTwo })),
-      h("sl-skeleton", { class: classes.SkeletonThree }),
-      h("sl-skeleton", { class: classes.SkeletonOne })));
+      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" })));
   };
   const renderStatusBadge = (status, statusBadgeText) => {
     const badgeType = status === "nextPayout" ? "success" : "primary";