@saasquatch/mint-components 2.1.2-4 → 2.1.3

package/dist/collection/components/sqm-password-field/sqm-password-field.js

@@ -6,7 +6,7 @@ import deepmerge from "deepmerge";
 import { getProps } from "../../utils/utils";
 import { validateNewPassword } from "./passwordValidation";
 import { PortalResetPasswordView, } from "./sqm-password-field-view";
-import { usePasswordField, } from "./usePasswordField";
+import { usePasswordField } from "./usePasswordField";
 /**
  * @uiName Form Password Field
  * @validParents ["sqm-portal-register","sqm-portal-registration-form", "sqm-portal-google-registration-form"]
@@ -238,8 +238,7 @@ export class PortalPasswordField {
         "resolved": "PasswordFieldViewDemoProps",
         "references": {
           "PasswordFieldViewDemoProps": {
-            "location": "import",
-            "path": "./usePasswordField"
+            "location": "local"
           }
         }
       },

package/dist/collection/components/sqm-portal-container/sqm-portal-container-view.js

@@ -1,4 +1,4 @@
-import { h, Host } from "@stencil/core";
+import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
 export function PortalContainerView(props, children) {
   const style = {
@@ -24,10 +24,9 @@ export function PortalContainerView(props, children) {
   }`;
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  return (h(Host, null,
-    h("div", { class: sheet.classes.Container, part: "sqm-base" },
-      h("style", { type: "text/css" },
-        vanillaStyle,
-        styleString),
-      children)));
+  return (h("div", { class: sheet.classes.Container, part: "sqm-base" },
+    h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    children));
 }

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-portal-protected-route/usePortalProtectedRoute.js

@@ -1,5 +1,5 @@
 import { useUserIdentity, navigation, useCurrentPage, } from "@saasquatch/component-boilerplate";
-import { useEffect } from "@saasquatch/universal-hooks";
+import { useEffect } from "haunted";
 export function usePortalProtectedRoute({ requireEmailVerification, redirectTo, redirectToUnverified, }) {
   var _a;
   const userIdent = useUserIdentity();

package/dist/collection/components/sqm-portal-verify-email/usePortalVerifyEmail.js

@@ -1,6 +1,6 @@
 import { navigation, setUserIdentity, useUserIdentity, useVerifyEmailMutation, } from "@saasquatch/component-boilerplate";
+import { useEffect, useState } from "@saasquatch/stencil-hooks";
 import { sanitizeUrlPath } from "../../utils/utils";
-import { useEffect, useState } from "@saasquatch/universal-hooks";
 let globalPromise = null;
 export function usePortalVerifyEmail({ nextPage, failedPage, verifySuccessText, verifyEmailText, verifyInvalidText, networkErrorMessage, continueText, }) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;

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" },
@@ -84,6 +88,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", { 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)))));
+        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)))));
 }

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

@@ -275,7 +275,6 @@ 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("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/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="Your Friend" deleted-user="Deleted User"></sqm-referral-table-user-column>
+ * @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>
  */
 export class ReferralTableUserColumn {
   constructor() {
@@ -18,7 +18,7 @@ export class ReferralTableUserColumn {
      *
      * @uiName Anonymous user text
      */
-    this.anonymousUser = "Your Friend";
+    this.anonymousUser = "Anonymous User";
     /**
      * Name displayed for deleted users
      *
@@ -116,7 +116,7 @@ export class ReferralTableUserColumn {
       },
       "attribute": "anonymous-user",
       "reflect": false,
-      "defaultValue": "\"Your Friend\""
+      "defaultValue": "\"Anonymous User\""
     },
     "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="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>
+ * @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>
  */
 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("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/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: "Your Friend" }));
+  return (h("sqm-rewards-table-source-cell", { reward: { ...rewardsData, ...referral(anon) }, referralText: "Referral to", anonymousUserText: "Anonymous User" }));
 };
 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="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>
+ * @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>
  */
 export class RewardTableUserColumn {
   constructor() {
@@ -18,7 +18,7 @@ export class RewardTableUserColumn {
      *
      * @uiName Anonymous user text
      */
-    this.anonymousUser = "Your Friend";
+    this.anonymousUser = "Anonymous User";
     /**
      * Name displayed for deleted users
      *
@@ -106,7 +106,7 @@ export class RewardTableUserColumn {
       },
       "attribute": "anonymous-user",
       "reflect": false,
-      "defaultValue": "\"Your Friend\""
+      "defaultValue": "\"Anonymous User\""
     },
     "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="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>
+ * @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>
  */
 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("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

@@ -105,7 +105,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 * as UserInfoFormView from "../tax-and-cash/sqm-user-info-form/UserInfoFormView.stories";
 import { ShadowViewAddon } from "../../ShadowViewAddon";
 import { CucumberAddon } from "./CucumberAddon";
@@ -213,7 +212,6 @@ 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="Your Friend"
+          anonymous-user="Anonymous User"
           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="Your Friend"
+          anonymous-user="Anonymous User"
           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="Your Friend"
+          anonymous-user="Anonymous User"
           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="Your Friend"
+          anonymous-user="Anonymous User"
           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="Your Friend"
+          anonymous-user="Anonymous User"
           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="Your Friend"
+          anonymous-user="Anonymous User"
           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="Your Friend"
+          anonymous-user="Anonymous User"
           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="Your Friend"
+          anonymous-user="Anonymous User"
           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="Your Friend"
+          anonymous-user="Anonymous User"
           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="Your Friend"
+          anonymous-user="Anonymous User"
           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("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-banking-info-form/formDefinitions.js

@@ -96,10 +96,10 @@ export function getFormMap({ props, getValidationErrorMessage, bankCountry, }) {
             defaultMessage: props.text.taxPayerIdLabel,
           }, {
             bankCountry,
-          }), 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) && {
+          }), 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) && {
           class: "error-input",
           helpText: getValidationErrorMessage({
-            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,
+            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,
             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", { 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";