@saasquatch/mint-components 2.1.5-6 → 2.1.5-7

package/dist/collection/components/sqm-navigation-menu/useNavigationMenu.js

@@ -1,6 +1,5 @@
 import { navigation, useTick, useUserIdentity, } from "@saasquatch/component-boilerplate";
-import { useRef } from "@saasquatch/universal-hooks";
-import { useEffect } from "haunted";
+import { useEffect, useRef } from "@saasquatch/universal-hooks";
 function handleMenu(e) {
   navigation.push(e.detail.item.value);
 }

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,7 +238,8 @@ export class PortalPasswordField {
         "resolved": "PasswordFieldViewDemoProps",
         "references": {
           "PasswordFieldViewDemoProps": {
-            "location": "local"
+            "location": "import",
+            "path": "./usePasswordField"
           }
         }
       },

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

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
 export function PortalContainerView(props, children) {
   const style = {
@@ -24,9 +24,10 @@ export function PortalContainerView(props, children) {
   }`;
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  return (h("div", { class: sheet.classes.Container, part: "sqm-base" },
-    h("style", { type: "text/css" },
-      vanillaStyle,
-      styleString),
-    children));
+  return (h(Host, null,
+    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,6 +17,7 @@ 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(--sl-color-gray-500)",
+    color: "var(--sqm-text-subdued)",
     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(--sl-color-gray-500)", fontSize: "14px" } }, intl.formatMessage({
+      h("p", { style: { color: "var(--sqm-text-subdued)", fontSize: "14px" } }, intl.formatMessage({
         id: `verificationStatus`,
         defaultMessage: states.loadingVerification
           ? verificationLoadingMessage + " {countdown}"
@@ -62,7 +62,5 @@ export function PortalEmailVerificationView(props) {
       }, {
         countdown: states.loadingVerification ? (h("sl-spinner", null)) : (states.countdown),
       })),
-      h("a", { class: states.loading
-          ? sheet.classes.ButtonLinkLoading
-          : sheet.classes.ButtonLink, onClick: callbacks.submit }, resendEmailButtonText))));
+      h("sl-button", { type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.submit, loading: states.loading }, 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 "haunted";
+import { useEffect } from "@saasquatch/universal-hooks";
 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-program-explainer-step/sqm-program-explainer-step-view.js

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
+import { optimizeCloudinaryUrl } from "../../utils/imageUrl";
 export function ProgramExplainerStepView(props) {
   const style = {
     Container: {
@@ -71,7 +72,10 @@ export function ProgramExplainerStepView(props) {
   }`;
   return (h("div", { class: sheet.classes.Container, part: "sqm-base" },
     h("style", { type: "text/css" }, styleString),
-    h("div", null, props.imageUrl ? (h("img", { class: sheet.classes.Media, src: props.imageUrl, part: "sqm-media" })) : (h("div", { class: sheet.classes.Media, part: "sqm-media" },
+    h("div", null, props.imageUrl ? (h("img", { class: sheet.classes.Media, src: optimizeCloudinaryUrl(props.imageUrl, {
+        width: 128,
+        height: 128,
+      }), part: "sqm-media", decoding: "async" })) : (h("div", { class: sheet.classes.Media, part: "sqm-media" },
       h("sl-icon", { name: props.icon })))),
     h("div", { class: sheet.classes.Text },
       h("div", { class: sheet.classes.Header, part: "sqm-header" }, props.header),

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-referral-table/useReferralTable.js

@@ -253,7 +253,8 @@ export function useReferralTable(props, emptyElement, loadingElement) {
   const user = useUserIdentity();
   const programIdContext = useProgramId();
   // Default to context, overriden by props
-  const programId = (_a = props.programId) !== null && _a !== void 0 ? _a : programIdContext;
+  const resolvedProgramId = (_a = props.programId) !== null && _a !== void 0 ? _a : programIdContext;
+  const programId = resolvedProgramId === "GLOBAL" ? null : resolvedProgramId;
   // If no program ID, shows all programs
   const referralFilter = programId
     ? programId === "classic"

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

@@ -2,6 +2,7 @@ import { getAssetPath, h } from "@stencil/core";
 import { intl } from "../../global/global";
 import { HostBlock } from "../../global/mixins";
 import { createStyleSheet } from "../../styling/JSS";
+import { optimizeCloudinaryUrl } from "../../utils/imageUrl";
 import { CopyTextView } from "../views/copy-text-view";
 import { ProgressBar } from "./progressBar";
 import { CheckmarkFilled, Gift } from "./SVGs";
@@ -439,8 +440,8 @@ export function RewardExchangeView(props) {
                   } },
                   h("img", { class: item.unavailableReasonCode
                       ? "image subdued"
-                      : "image", src: (item === null || item === void 0 ? void 0 : item.imageUrl) ||
-                      getAssetPath("./assets/Reward-image.png") })),
+                      : "image", src: optimizeCloudinaryUrl((item === null || item === void 0 ? void 0 : item.imageUrl) ||
+                      getAssetPath("./assets/Reward-image.png")), decoding: "async" })),
                 h("div", { class: sheet.classes.TextArea, style: {
                     opacity: item.unavailableReasonCode ? "0.5" : "1",
                   } },
@@ -487,8 +488,8 @@ export function RewardExchangeView(props) {
     return (h("div", null,
       h("div", { class: sheet.classes.ChooseAmount, part: "choose-amount-container" },
         h("div", { class: "wrapper" },
-          h("img", { class: "image", src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
-              getAssetPath("./assets/Reward-image.png") }),
+          h("img", { class: "image", src: optimizeCloudinaryUrl((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
+              getAssetPath("./assets/Reward-image.png")), decoding: "async" }),
           h("div", { class: "text" },
             h("div", { class: "title" }, (_b = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name) !== null && _b !== void 0 ? _b : ""),
             ((_c = states.selectedItem) === null || _c === void 0 ? void 0 : _c.ruleType) === "FIXED_GLOBAL_REWARD" ? (h("div", { class: "points" }, input)) : (h("div", { class: "description" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description)),
@@ -508,8 +509,8 @@ export function RewardExchangeView(props) {
           h("div", { class: "field" }, states.content.text.rewardNameTitle),
           h("div", { class: "reward-item-container" },
             h("div", { class: "reward-title" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name),
-            h("img", { class: "image", src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
-                getAssetPath("./assets/Reward-image.png") }))),
+            h("img", { class: "image", src: optimizeCloudinaryUrl((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
+                getAssetPath("./assets/Reward-image.png")), decoding: "async" }))),
         h("div", { class: "wrapper padding" },
           h("div", { class: "field" })),
         amount && (h("div", { class: "wrapper top-border padding" },
@@ -567,19 +568,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 Rewards 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-rewards-table/useRewardsTable.js

@@ -162,7 +162,8 @@ export function useRewardsTable(props, emptyElement, loadingElement) {
   const programIdContext = useProgramId();
   const locale = useLocale();
   // Default to context, overriden by props
-  const programId = (_a = props.programId) !== null && _a !== void 0 ? _a : programIdContext;
+  const resolvedProgramId = (_a = props.programId) !== null && _a !== void 0 ? _a : programIdContext;
+  const programId = resolvedProgramId === "GLOBAL" ? null : resolvedProgramId;
   const rewardFilter = {
     userId_eq: user === null || user === void 0 ? void 0 : user.id,
     accountId_eq: user === null || user === void 0 ? void 0 : user.accountId,

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 { Component, h, Prop, State } 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,