@saasquatch/mint-components 1.10.2-13 → 1.10.2-14

package/dist/cjs/{ShadowViewAddon-1ddbaac2.js → ShadowViewAddon-36267ebd.js}

@@ -142,20 +142,34 @@ const vanillaStyle = `
   }
 `;
 function LeaderboardView(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+  var _a, _b, _c;
   const { states, data, elements } = props;
   const { styles } = states;
   if (states.loading)
-    return (index.h("div", { class: sheet$1.classes.Leaderboard },
+    return (index.h("div", { class: sheet$1.classes.Leaderboard, style: { width: styles.width || "100%" } },
       index.h("style", { type: "text/css" },
         styleString$1,
         vanillaStyle),
-      elements.loadingstate));
+      index.h("table", null, [...Array(10)].map(() => {
+        return (index.h("tr", null,
+          index.h("td", null,
+            index.h("sl-skeleton", null))));
+      }))));
   if (states.isEssentials)
     return elements.essentials;
   if (!states.hasLeaders)
     return elements.empty;
   let userSeenFlag = false;
+  const getUsersName = (user) => {
+    if (!user.firstName && !user.lastInitial)
+      return styles.anonymousUser;
+    const { firstName, lastInitial } = user;
+    if (firstName && lastInitial)
+      return `${firstName} ${lastInitial}`;
+    if (firstName || lastInitial)
+      return firstName || lastInitial;
+    return styles.anonymousUser;
+  };
   return (index.h("div", { class: sheet$1.classes.Leaderboard, part: "sqm-base", style: { width: styles.width || "100%" } },
     index.h("style", { type: "text/css" },
       styleString$1,
@@ -173,15 +187,13 @@ function LeaderboardView(props) {
             user.rowNumber === ((_b = data.viewerRank) === null || _b === void 0 ? void 0 : _b.rowNumber)
             ? "highlight"
             : "" },
-          styles.showRank && (index.h("td", { class: "Rank" }, global.intl.formatMessage({
-            id: "rank",
-            defaultMessage: styles.rankSuffix,
-          }, { rank: user.rank }))),
-          !styles.hideNames && (index.h("td", { class: "User" }, user.firstName && user.lastInitial
-            ? user.firstName + " " + user.lastInitial
-            : user.firstName || user.lastInitial
-              ? user.firstName || user.lastInitial
-              : styles.anonymousUser)),
+          styles.showRank && (index.h("td", { class: "Rank" }, styles.rankSuffix
+            ? global.intl.formatMessage({
+              id: "rank",
+              defaultMessage: styles.rankSuffix,
+            }, { rank: user.rank })
+            : user.rank)),
+          !styles.hideNames && index.h("td", { class: "User" }, getUsersName(user)),
           index.h("td", { class: "Score" }, user.textValue)));
       }),
       !userSeenFlag && !styles.hideViewer && (index.h("tr", null,
@@ -189,13 +201,8 @@ function LeaderboardView(props) {
           index.h("sl-icon", { name: "three-dots", style: { verticalAlign: "middle" } })))),
       !userSeenFlag && !styles.hideViewer && (index.h("tr", { class: "highlight" },
         styles.showRank && (index.h("td", { class: "Rank" }, ((_b = data.viewerRank) === null || _b === void 0 ? void 0 : _b.rank) || "-")),
-        !styles.hideNames && (index.h("td", { class: "User" }, ((_c = data.viewerRank) === null || _c === void 0 ? void 0 : _c.firstName) && ((_d = data.viewerRank) === null || _d === void 0 ? void 0 : _d.lastInitial)
-          ? ((_e = data.viewerRank) === null || _e === void 0 ? void 0 : _e.firstName) +
-            " " + ((_f = data.viewerRank) === null || _f === void 0 ? void 0 : _f.lastInitial)
-          : ((_g = data.viewerRank) === null || _g === void 0 ? void 0 : _g.firstName) || ((_h = data.viewerRank) === null || _h === void 0 ? void 0 : _h.lastInitial)
-            ? ((_j = data.viewerRank) === null || _j === void 0 ? void 0 : _j.firstName) || ((_k = data.viewerRank) === null || _k === void 0 ? void 0 : _k.lastInitial)
-            : styles.anonymousUser)),
-        index.h("td", { class: "Score" }, ((_l = data.viewerRank) === null || _l === void 0 ? void 0 : _l.textValue) || "0"))))));
+        !styles.hideNames && (index.h("td", { class: "User" }, getUsersName(data.viewerRank || {}))),
+        index.h("td", { class: "Score" }, ((_c = data.viewerRank) === null || _c === void 0 ? void 0 : _c.textValue) || "0"))))));
 }
 
 const style$2 = {

package/dist/cjs/sqm-banking-info-form_16.cjs.entry.js

@@ -749,7 +749,8 @@ const style = {
     background: "var(--sl-color-gray-200)",
   },
   LargeSkeleton: {
-    width: "320px",
+    width: "100%",
+    maxWidth: "320px",
     height: "40px",
     borderRadius: "50px",
     background: "var(--sl-color-gray-200)",

package/dist/cjs/sqm-big-stat_38.cjs.entry.js

@@ -19,7 +19,7 @@ const index$1 = require('./index-8c6255f5.js');
 const useRegistrationFormState = require('./useRegistrationFormState-876ed65d.js');
 const utilities = require('./utilities-cec9dd36.js');
 const AsYouType = require('./AsYouType-6788393a.js');
-const ShadowViewAddon = require('./ShadowViewAddon-1ddbaac2.js');
+const ShadowViewAddon = require('./ShadowViewAddon-36267ebd.js');
 require('./sqm-portal-container-view-990a85a3.js');
 
 const BigStat = class {
@@ -1405,7 +1405,6 @@ function useLeaderboard(props) {
     elements: {
       empty: props.empty,
       essentials: props.essentials,
-      loadingstate: props.loadingstate,
     },
   };
 }
@@ -1419,10 +1418,6 @@ const Leaderboard = class {
      * @uiName Width
      */
     this.width = "100%";
-    /**
-     * @uiName Rank Suffix
-     */
-    this.rankSuffix = "{rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}";
     /**
      * Hide the viewer's leaderboard row if not in the top results.
      *
@@ -1464,7 +1459,6 @@ const Leaderboard = class {
     const props = {
       empty: index.h(EmptySlot, null),
       essentials: index.h(EssentialsSlot, null),
-      loadingstate: index.h(LoadingSlot, null),
       usersheading: this.usersheading,
       statsheading: this.statsheading,
       rankheading: this.rankheading,
@@ -1494,11 +1488,6 @@ function EmptySlot() {
 function EssentialsSlot() {
   return (index.h("slot", { name: "essentials" }, index.h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1715360191/squatch-assets/Leaderboard_Not_Available.svg", "empty-state-header": "Leaderboards aren\u2019t available on your plan", "empty-state-text": "Contact {supportText} to upgrade your plan and start leveraging gamification in your program.", "support-text": "Support", "missing-feature": "Leaderboards" })));
 }
-function LoadingSlot() {
-  return (index.h("slot", { name: "loading" }, index.h("table", null, [...Array(10)].map(() => {
-    return (index.h("tr", null, index.h("td", null, index.h("sl-skeleton", null))));
-  }))));
-}
 function useLeaderboardDemo(props) {
   var _a, _b;
   const data = ((_b = (_a = props.demoData) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.leaderboard) || [
@@ -1566,7 +1555,6 @@ function useLeaderboardDemo(props) {
     elements: {
       empty: index.h(EmptySlot, null),
       essentials: index.h(EssentialsSlot, null),
-      loadingstate: index.h(LoadingSlot, null),
     },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }

package/dist/cjs/sqm-stencilbook.cjs.entry.js

@@ -28,7 +28,7 @@ const sqmPortalProfileView = require('./sqm-portal-profile-view-fde54e35.js');
 require('./utilities-cec9dd36.js');
 const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-96f329ed.js');
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-7ffcc0d4.js');
-const ShadowViewAddon = require('./ShadowViewAddon-1ddbaac2.js');
+const ShadowViewAddon = require('./ShadowViewAddon-36267ebd.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-990a85a3.js');
 const sqmInvoiceTableView = require('./sqm-invoice-table-view-28b14d28.js');
 
@@ -1976,12 +1976,6 @@ const link = index.h("a", null, "Support");
 const defaultElements$1 = {
   empty: (index.h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png", "empty-state-header": "View your rank in the leaderboard", "empty-state-text": "Be the first to refer a friend and reach the top of the leaderboard" })),
   essentials: (index.h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1715360191/squatch-assets/Leaderboard_Not_Available.svg", "empty-state-header": "Leaderboards aren\u2019t available on your plan", "empty-state-text": "Contact {supportText} to upgrade your plan and start leveraging gamification in your program.", "support-text": "Support" })),
-  loadingstate: (index.h("slot", { name: "loading" },
-    index.h("table", null, [...Array(10)].map(() => {
-      return (index.h("tr", null,
-        index.h("td", null,
-          index.h("sl-skeleton", null))));
-    })))),
 };
 const Empty$1 = () => {
   const props = {

package/dist/collection/components/sqm-leaderboard/Leaderboard.stories.js

@@ -163,12 +163,6 @@ const tag = "Contact" + link + "about upgrading your plan";
 const defaultElements = {
   empty: (h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png", "empty-state-header": "View your rank in the leaderboard", "empty-state-text": "Be the first to refer a friend and reach the top of the leaderboard" })),
   essentials: (h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1715360191/squatch-assets/Leaderboard_Not_Available.svg", "empty-state-header": "Leaderboards aren\u2019t available on your plan", "empty-state-text": "Contact {supportText} to upgrade your plan and start leveraging gamification in your program.", "support-text": "Support" })),
-  loadingstate: (h("slot", { name: "loading" },
-    h("table", null, [...Array(10)].map(() => {
-      return (h("tr", null,
-        h("td", null,
-          h("sl-skeleton", null))));
-    })))),
 };
 export const Empty = () => {
   const props = {

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

@@ -53,20 +53,34 @@ const vanillaStyle = `
   }
 `;
 export function LeaderboardView(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+  var _a, _b, _c;
   const { states, data, elements } = props;
   const { styles } = states;
   if (states.loading)
-    return (h("div", { class: sheet.classes.Leaderboard },
+    return (h("div", { class: sheet.classes.Leaderboard, style: { width: styles.width || "100%" } },
       h("style", { type: "text/css" },
         styleString,
         vanillaStyle),
-      elements.loadingstate));
+      h("table", null, [...Array(10)].map(() => {
+        return (h("tr", null,
+          h("td", null,
+            h("sl-skeleton", null))));
+      }))));
   if (states.isEssentials)
     return elements.essentials;
   if (!states.hasLeaders)
     return elements.empty;
   let userSeenFlag = false;
+  const getUsersName = (user) => {
+    if (!user.firstName && !user.lastInitial)
+      return styles.anonymousUser;
+    const { firstName, lastInitial } = user;
+    if (firstName && lastInitial)
+      return `${firstName} ${lastInitial}`;
+    if (firstName || lastInitial)
+      return firstName || lastInitial;
+    return styles.anonymousUser;
+  };
   return (h("div", { class: sheet.classes.Leaderboard, part: "sqm-base", style: { width: styles.width || "100%" } },
     h("style", { type: "text/css" },
       styleString,
@@ -84,15 +98,13 @@ export function LeaderboardView(props) {
             user.rowNumber === ((_b = data.viewerRank) === null || _b === void 0 ? void 0 : _b.rowNumber)
             ? "highlight"
             : "" },
-          styles.showRank && (h("td", { class: "Rank" }, intl.formatMessage({
-            id: "rank",
-            defaultMessage: styles.rankSuffix,
-          }, { rank: user.rank }))),
-          !styles.hideNames && (h("td", { class: "User" }, user.firstName && user.lastInitial
-            ? user.firstName + " " + user.lastInitial
-            : user.firstName || user.lastInitial
-              ? user.firstName || user.lastInitial
-              : styles.anonymousUser)),
+          styles.showRank && (h("td", { class: "Rank" }, styles.rankSuffix
+            ? intl.formatMessage({
+              id: "rank",
+              defaultMessage: styles.rankSuffix,
+            }, { rank: user.rank })
+            : user.rank)),
+          !styles.hideNames && h("td", { class: "User" }, getUsersName(user)),
           h("td", { class: "Score" }, user.textValue)));
       }),
       !userSeenFlag && !styles.hideViewer && (h("tr", null,
@@ -100,11 +112,6 @@ export function LeaderboardView(props) {
           h("sl-icon", { name: "three-dots", style: { verticalAlign: "middle" } })))),
       !userSeenFlag && !styles.hideViewer && (h("tr", { class: "highlight" },
         styles.showRank && (h("td", { class: "Rank" }, ((_b = data.viewerRank) === null || _b === void 0 ? void 0 : _b.rank) || "-")),
-        !styles.hideNames && (h("td", { class: "User" }, ((_c = data.viewerRank) === null || _c === void 0 ? void 0 : _c.firstName) && ((_d = data.viewerRank) === null || _d === void 0 ? void 0 : _d.lastInitial)
-          ? ((_e = data.viewerRank) === null || _e === void 0 ? void 0 : _e.firstName) +
-            " " + ((_f = data.viewerRank) === null || _f === void 0 ? void 0 : _f.lastInitial)
-          : ((_g = data.viewerRank) === null || _g === void 0 ? void 0 : _g.firstName) || ((_h = data.viewerRank) === null || _h === void 0 ? void 0 : _h.lastInitial)
-            ? ((_j = data.viewerRank) === null || _j === void 0 ? void 0 : _j.firstName) || ((_k = data.viewerRank) === null || _k === void 0 ? void 0 : _k.lastInitial)
-            : styles.anonymousUser)),
-        h("td", { class: "Score" }, ((_l = data.viewerRank) === null || _l === void 0 ? void 0 : _l.textValue) || "0"))))));
+        !styles.hideNames && (h("td", { class: "User" }, getUsersName(data.viewerRank || {}))),
+        h("td", { class: "Score" }, ((_c = data.viewerRank) === null || _c === void 0 ? void 0 : _c.textValue) || "0"))))));
 }

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

@@ -10,10 +10,10 @@ import { useLeaderboard } from "./useLeaderboard";
  * @slots [{"name":"empty", "title":"Empty State"}]
  * @requiredFeatures ["LEADERBOARDS"]
  * @exampleGroup Leaderboard
- * @example Referral Started Leaderboard - <sqm-leaderboard usersheading="Referrer" statsheading="Referrals" rank-type="rank" leaderboard-type="topStartedReferrers" rankheading="Rank" show-rank="true"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png" empty-state-header="View your rank in the leaderboard" empty-state-text="Be the first to refer a friend and reach the top of the leaderboard" ></sqm-empty></sqm-leaderboard>
- * @example Referral Converted Leaderboard - <sqm-leaderboard usersheading="Referrer" statsheading="Referrals" rank-type="rank" leaderboard-type="topConvertedReferrers" rankheading="Rank" show-rank="true"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png" empty-state-header="View your rank in the leaderboard" empty-state-text="Be the first to refer a friend and reach the top of the leaderboard" ></sqm-empty></sqm-leaderboard>
- * @example Points Earned Leaderboard - <sqm-leaderboard usersheading="Name" statsheading="Points" rank-type="rank" leaderboard-type="topPointEarners" rankheading="Rank" show-rank="true"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png" empty-state-header="View your rank in the leaderboard" empty-state-text="Be the first to refer a friend and reach the top of the leaderboard" ></sqm-empty></sqm-leaderboard>
- * @example Anonymous Leaderboard - <div style="display: flex; align-items: flex-start; justify-content: center; width: 100%; gap: 50px;"><div style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; max-width: 30%;"><sqm-image width="70%" alignment="center" image-url="https://res.cloudinary.com/saasquatch-staging/image/upload/v1729728469/Leaderboard_image_z87lsm.png"></sqm-image><h2 style="margin: auto;">Top Performers</h2><p style="margin: 0; text-align: center;">The leaderboard highlights the top performers in real-time. Stay motivated, stay competitive!</p></div><sqm-leaderboard width="300px" usersheading="Referrer" statsheading="Referrals" rank-type="rank" leaderboard-type="topStartedReferrers" rankheading="Rank" show-rank="true" hide-names="true" hide-viewer="true"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png" empty-state-header="View your rank in the leaderboard" empty-state-text="Be the first to refer a friend and reach the top of the leaderboard"></sqm-empty></sqm-leaderboard></div>
+ * @example Referral Started Leaderboard - <sqm-leaderboard usersheading="Referrer" rank-suffix="{rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}" statsheading="Referrals" rank-type="rank" leaderboard-type="topStartedReferrers" rankheading="Rank" show-rank="true"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png" empty-state-header="View your rank in the leaderboard" empty-state-text="Be the first to refer a friend and reach the top of the leaderboard" ></sqm-empty></sqm-leaderboard>
+ * @example Referral Converted Leaderboard - <sqm-leaderboard usersheading="Referrer" rank-suffix="{rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}" statsheading="Referrals" rank-type="rank" leaderboard-type="topConvertedReferrers" rankheading="Rank" show-rank="true"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png" empty-state-header="View your rank in the leaderboard" empty-state-text="Be the first to refer a friend and reach the top of the leaderboard" ></sqm-empty></sqm-leaderboard>
+ * @example Points Earned Leaderboard - <sqm-leaderboard usersheading="Name" rank-suffix="{rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}" statsheading="Points" rank-type="rank" leaderboard-type="topPointEarners" rankheading="Rank" show-rank="true"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png" empty-state-header="View your rank in the leaderboard" empty-state-text="Be the first to refer a friend and reach the top of the leaderboard" ></sqm-empty></sqm-leaderboard>
+ * @example Anonymous Leaderboard - <div style="display: flex; align-items: flex-start; justify-content: center; width: 100%; gap: 50px;"><div style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; max-width: 30%;"><sqm-image width="70%" alignment="center" image-url="https://res.cloudinary.com/saasquatch-staging/image/upload/v1729728469/Leaderboard_image_z87lsm.png"></sqm-image><h2 style="margin: auto;">Top Performers</h2><p style="margin: 0; text-align: center;">The leaderboard highlights the top performers in real-time. Stay motivated, stay competitive!</p></div><sqm-leaderboard width="300px" usersheading="Referrer" rank-suffix="{rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}" statsheading="Referrals" rank-type="rank" leaderboard-type="topStartedReferrers" rankheading="Rank" show-rank="true" hide-names="true" hide-viewer="true"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png" empty-state-header="View your rank in the leaderboard" empty-state-text="Be the first to refer a friend and reach the top of the leaderboard"></sqm-empty></sqm-leaderboard></div>
  * @featureTooltip <div>Motivate your participants by gamifying your program. Contact <a href="mailto:saasquatch-support%40impact.com?subject=Next steps for Leaderboards feature&body=Hi Support Team, %0D%0A%0D%0A I am interested in learning more about how Leaderboards can support the growth of our referral program. Please connect me with a program strategy manager to discuss this feature further, and determine the next steps.%0D%0A%0D%0A%0D%0AThank you,%0D%0A[Add your name here]">Support</a> to upgrade your plan and add a leaderboard.</div>
  */
 export class Leaderboard {
@@ -24,10 +24,6 @@ export class Leaderboard {
      * @uiName Width
      */
     this.width = "100%";
-    /**
-     * @uiName Rank Suffix
-     */
-    this.rankSuffix = "{rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}";
     /**
      * Hide the viewer's leaderboard row if not in the top results.
      *
@@ -69,7 +65,6 @@ export class Leaderboard {
     const props = {
       empty: h(EmptySlot, null),
       essentials: h(EssentialsSlot, null),
-      loadingstate: h(LoadingSlot, null),
       usersheading: this.usersheading,
       statsheading: this.statsheading,
       rankheading: this.rankheading,
@@ -234,11 +229,10 @@ export class Leaderboard {
             "text": "Rank Suffix",
             "name": "uiName"
           }],
-        "text": ""
+        "text": "A JSONata string that formats the rank with the appropriate ordinal suffix (e.g., \"st\" for 1st, \"nd\" for 2nd, \"rd\" for 3rd, and \"th\" for all others)."
       },
       "attribute": "rank-suffix",
-      "reflect": false,
-      "defaultValue": "\"{rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}\""
+      "reflect": false
     },
     "hideViewer": {
       "type": "boolean",
@@ -446,7 +440,7 @@ export class Leaderboard {
       "mutable": false,
       "complexType": {
         "original": "DemoData<LeaderboardViewProps>",
-        "resolved": "{ states?: { loading: boolean; hasLeaders: boolean; isEssentials?: boolean; styles: { usersheading: string; statsheading: string; rankheading?: string; showRank?: boolean; hideViewer?: boolean; hideNames?: boolean; anonymousUser?: string; rankSuffix?: string; width?: string; }; }; data?: { rankType: string; leaderboard: { textValue: string; rank: number; firstName: string; lastInitial: string; rowNumber: number; }[]; viewerRank?: { textValue: string; rank: number; firstName: string; lastInitial: string; rowNumber: number; }; }; elements?: { empty: VNode; essentials: VNode; loadingstate: VNode; }; }",
+        "resolved": "{ states?: { loading: boolean; hasLeaders: boolean; isEssentials?: boolean; styles: { usersheading: string; statsheading: string; rankheading?: string; showRank?: boolean; hideViewer?: boolean; hideNames?: boolean; anonymousUser?: string; rankSuffix?: string; width?: string; }; }; data?: { rankType: string; leaderboard: { textValue: string; rank: number; firstName: string; lastInitial: string; rowNumber: number; }[]; viewerRank?: { textValue: string; rank: number; firstName: string; lastInitial: string; rowNumber: number; }; }; elements?: { empty: VNode; essentials: VNode; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -484,14 +478,6 @@ function EssentialsSlot() {
   return (h("slot", { name: "essentials" },
     h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1715360191/squatch-assets/Leaderboard_Not_Available.svg", "empty-state-header": "Leaderboards aren\u2019t available on your plan", "empty-state-text": "Contact {supportText} to upgrade your plan and start leveraging gamification in your program.", "support-text": "Support", "missing-feature": "Leaderboards" })));
 }
-function LoadingSlot() {
-  return (h("slot", { name: "loading" },
-    h("table", null, [...Array(10)].map(() => {
-      return (h("tr", null,
-        h("td", null,
-          h("sl-skeleton", null))));
-    }))));
-}
 function useLeaderboardDemo(props) {
   var _a, _b;
   const data = ((_b = (_a = props.demoData) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.leaderboard) || [
@@ -559,7 +545,6 @@ function useLeaderboardDemo(props) {
     elements: {
       empty: h(EmptySlot, null),
       essentials: h(EssentialsSlot, null),
-      loadingstate: h(LoadingSlot, null),
     },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }

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

@@ -152,7 +152,6 @@ export function useLeaderboard(props) {
     elements: {
       empty: props.empty,
       essentials: props.essentials,
-      loadingstate: props.loadingstate,
     },
   };
 }

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

@@ -116,7 +116,8 @@ const style = {
     background: "var(--sl-color-gray-200)",
   },
   LargeSkeleton: {
-    width: "320px",
+    width: "100%",
+    maxWidth: "320px",
     height: "40px",
     borderRadius: "50px",
     background: "var(--sl-color-gray-200)",

package/dist/esm/{ShadowViewAddon-881de075.js → ShadowViewAddon-b311a206.js}

@@ -140,20 +140,34 @@ const vanillaStyle = `
   }
 `;
 function LeaderboardView(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+  var _a, _b, _c;
   const { states, data, elements } = props;
   const { styles } = states;
   if (states.loading)
-    return (h("div", { class: sheet$1.classes.Leaderboard },
+    return (h("div", { class: sheet$1.classes.Leaderboard, style: { width: styles.width || "100%" } },
       h("style", { type: "text/css" },
         styleString$1,
         vanillaStyle),
-      elements.loadingstate));
+      h("table", null, [...Array(10)].map(() => {
+        return (h("tr", null,
+          h("td", null,
+            h("sl-skeleton", null))));
+      }))));
   if (states.isEssentials)
     return elements.essentials;
   if (!states.hasLeaders)
     return elements.empty;
   let userSeenFlag = false;
+  const getUsersName = (user) => {
+    if (!user.firstName && !user.lastInitial)
+      return styles.anonymousUser;
+    const { firstName, lastInitial } = user;
+    if (firstName && lastInitial)
+      return `${firstName} ${lastInitial}`;
+    if (firstName || lastInitial)
+      return firstName || lastInitial;
+    return styles.anonymousUser;
+  };
   return (h("div", { class: sheet$1.classes.Leaderboard, part: "sqm-base", style: { width: styles.width || "100%" } },
     h("style", { type: "text/css" },
       styleString$1,
@@ -171,15 +185,13 @@ function LeaderboardView(props) {
             user.rowNumber === ((_b = data.viewerRank) === null || _b === void 0 ? void 0 : _b.rowNumber)
             ? "highlight"
             : "" },
-          styles.showRank && (h("td", { class: "Rank" }, intl.formatMessage({
-            id: "rank",
-            defaultMessage: styles.rankSuffix,
-          }, { rank: user.rank }))),
-          !styles.hideNames && (h("td", { class: "User" }, user.firstName && user.lastInitial
-            ? user.firstName + " " + user.lastInitial
-            : user.firstName || user.lastInitial
-              ? user.firstName || user.lastInitial
-              : styles.anonymousUser)),
+          styles.showRank && (h("td", { class: "Rank" }, styles.rankSuffix
+            ? intl.formatMessage({
+              id: "rank",
+              defaultMessage: styles.rankSuffix,
+            }, { rank: user.rank })
+            : user.rank)),
+          !styles.hideNames && h("td", { class: "User" }, getUsersName(user)),
           h("td", { class: "Score" }, user.textValue)));
       }),
       !userSeenFlag && !styles.hideViewer && (h("tr", null,
@@ -187,13 +199,8 @@ function LeaderboardView(props) {
           h("sl-icon", { name: "three-dots", style: { verticalAlign: "middle" } })))),
       !userSeenFlag && !styles.hideViewer && (h("tr", { class: "highlight" },
         styles.showRank && (h("td", { class: "Rank" }, ((_b = data.viewerRank) === null || _b === void 0 ? void 0 : _b.rank) || "-")),
-        !styles.hideNames && (h("td", { class: "User" }, ((_c = data.viewerRank) === null || _c === void 0 ? void 0 : _c.firstName) && ((_d = data.viewerRank) === null || _d === void 0 ? void 0 : _d.lastInitial)
-          ? ((_e = data.viewerRank) === null || _e === void 0 ? void 0 : _e.firstName) +
-            " " + ((_f = data.viewerRank) === null || _f === void 0 ? void 0 : _f.lastInitial)
-          : ((_g = data.viewerRank) === null || _g === void 0 ? void 0 : _g.firstName) || ((_h = data.viewerRank) === null || _h === void 0 ? void 0 : _h.lastInitial)
-            ? ((_j = data.viewerRank) === null || _j === void 0 ? void 0 : _j.firstName) || ((_k = data.viewerRank) === null || _k === void 0 ? void 0 : _k.lastInitial)
-            : styles.anonymousUser)),
-        h("td", { class: "Score" }, ((_l = data.viewerRank) === null || _l === void 0 ? void 0 : _l.textValue) || "0"))))));
+        !styles.hideNames && (h("td", { class: "User" }, getUsersName(data.viewerRank || {}))),
+        h("td", { class: "Score" }, ((_c = data.viewerRank) === null || _c === void 0 ? void 0 : _c.textValue) || "0"))))));
 }
 
 const style$2 = {

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

@@ -745,7 +745,8 @@ const style = {
     background: "var(--sl-color-gray-200)",
   },
   LargeSkeleton: {
-    width: "320px",
+    width: "100%",
+    maxWidth: "320px",
     height: "40px",
     borderRadius: "50px",
     background: "var(--sl-color-gray-200)",

package/dist/esm/sqm-big-stat_38.entry.js

@@ -15,7 +15,7 @@ import { p as pathToRegexp } from './index-ffa26b43.js';
 import { R as REGISTRATION_FORM_STATE_CONTEXT, u as useRegistrationFormState } from './useRegistrationFormState-9fc1ac80.js';
 import { i as isEmpty } from './utilities-3f5bba22.js';
 import { A as AsYouType } from './AsYouType-46f67d0d.js';
-import { b as useDemoBigStat, V as useBigStat, B as BigStatView, Q as autoColorScaleCss, K as CardFeedView, j as CheckboxFieldView, M as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, W as withShadowView, L as LeaderboardView, N as NameFieldsView, d as PortalChangePasswordView, i as PortalFooterView, P as PortalFrameView, e as PortalLoginView, f as PortalRegisterView, R as ReferralIframeView, X as demoRewardExchange, k as RewardExchangeView, a as useShareButton, S as ShareButtonView, C as CopyTextView, u as useShareLink, c as StatContainerView, T as TaskCardView } from './ShadowViewAddon-881de075.js';
+import { b as useDemoBigStat, V as useBigStat, B as BigStatView, Q as autoColorScaleCss, K as CardFeedView, j as CheckboxFieldView, M as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, W as withShadowView, L as LeaderboardView, N as NameFieldsView, d as PortalChangePasswordView, i as PortalFooterView, P as PortalFrameView, e as PortalLoginView, f as PortalRegisterView, R as ReferralIframeView, X as demoRewardExchange, k as RewardExchangeView, a as useShareButton, S as ShareButtonView, C as CopyTextView, u as useShareLink, c as StatContainerView, T as TaskCardView } from './ShadowViewAddon-b311a206.js';
 import './sqm-portal-container-view-6c582684.js';
 
 const BigStat = class {
@@ -1401,7 +1401,6 @@ function useLeaderboard(props) {
     elements: {
       empty: props.empty,
       essentials: props.essentials,
-      loadingstate: props.loadingstate,
     },
   };
 }
@@ -1415,10 +1414,6 @@ const Leaderboard = class {
      * @uiName Width
      */
     this.width = "100%";
-    /**
-     * @uiName Rank Suffix
-     */
-    this.rankSuffix = "{rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}";
     /**
      * Hide the viewer's leaderboard row if not in the top results.
      *
@@ -1460,7 +1455,6 @@ const Leaderboard = class {
     const props = {
       empty: h$1(EmptySlot, null),
       essentials: h$1(EssentialsSlot, null),
-      loadingstate: h$1(LoadingSlot, null),
       usersheading: this.usersheading,
       statsheading: this.statsheading,
       rankheading: this.rankheading,
@@ -1490,11 +1484,6 @@ function EmptySlot() {
 function EssentialsSlot() {
   return (h$1("slot", { name: "essentials" }, h$1("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1715360191/squatch-assets/Leaderboard_Not_Available.svg", "empty-state-header": "Leaderboards aren\u2019t available on your plan", "empty-state-text": "Contact {supportText} to upgrade your plan and start leveraging gamification in your program.", "support-text": "Support", "missing-feature": "Leaderboards" })));
 }
-function LoadingSlot() {
-  return (h$1("slot", { name: "loading" }, h$1("table", null, [...Array(10)].map(() => {
-    return (h$1("tr", null, h$1("td", null, h$1("sl-skeleton", null))));
-  }))));
-}
 function useLeaderboardDemo(props) {
   var _a, _b;
   const data = ((_b = (_a = props.demoData) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.leaderboard) || [
@@ -1562,7 +1551,6 @@ function useLeaderboardDemo(props) {
     elements: {
       empty: h$1(EmptySlot, null),
       essentials: h$1(EssentialsSlot, null),
-      loadingstate: h$1(LoadingSlot, null),
     },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }

package/dist/esm/sqm-stencilbook.entry.js

@@ -24,7 +24,7 @@ import { P as PortalProfileView } from './sqm-portal-profile-view-ffe955c8.js';
 import './utilities-3f5bba22.js';
 import { P as PortalResetPasswordView } from './sqm-portal-reset-password-view-79a85e02.js';
 import { P as PortalVerifyEmailView } from './sqm-portal-verify-email-view-d7ea2c56.js';
-import { S as ShareButtonView, L as LeaderboardView, C as CopyTextView, B as BigStatView, P as PortalFrameView, E as EditProfileView, u as useShareLink, a as useShareButton, b as useDemoBigStat, c as StatContainerView, d as PortalChangePasswordView, e as PortalLoginView, f as PortalRegisterView, T as TaskCardView, g as ProgressBarView, h as PoweredByImg$1, i as PortalFooterView, H as HeroView, R as ReferralIframeView, N as NameFieldsView, j as CheckboxFieldView, D as DropdownFieldView, I as InputFieldView, k as RewardExchangeView, r as rewardExchangeCustomErrorMsg, l as rewardExchangeLongText, m as rewardExchangeSelected, n as chooseAmountFixed, o as chooseAmountFixedNoDescription, p as chooseAmountVariable, q as chooseAmountVariableNoDescription, s as chooseAmountVariableDisabled, t as chooseAmountVariableUnavailable, v as confirmFixed, w as confirmVariable, x as redemptionError, y as queryError, z as success, A as successVariable, F as loading, G as empty$1, J as rewardExchange, K as CardFeedView, M as CouponCodeView, O as ProgressBar$2, Q as autoColorScaleCss, U as ShadowViewAddon } from './ShadowViewAddon-881de075.js';
+import { S as ShareButtonView, L as LeaderboardView, C as CopyTextView, B as BigStatView, P as PortalFrameView, E as EditProfileView, u as useShareLink, a as useShareButton, b as useDemoBigStat, c as StatContainerView, d as PortalChangePasswordView, e as PortalLoginView, f as PortalRegisterView, T as TaskCardView, g as ProgressBarView, h as PoweredByImg$1, i as PortalFooterView, H as HeroView, R as ReferralIframeView, N as NameFieldsView, j as CheckboxFieldView, D as DropdownFieldView, I as InputFieldView, k as RewardExchangeView, r as rewardExchangeCustomErrorMsg, l as rewardExchangeLongText, m as rewardExchangeSelected, n as chooseAmountFixed, o as chooseAmountFixedNoDescription, p as chooseAmountVariable, q as chooseAmountVariableNoDescription, s as chooseAmountVariableDisabled, t as chooseAmountVariableUnavailable, v as confirmFixed, w as confirmVariable, x as redemptionError, y as queryError, z as success, A as successVariable, F as loading, G as empty$1, J as rewardExchange, K as CardFeedView, M as CouponCodeView, O as ProgressBar$2, Q as autoColorScaleCss, U as ShadowViewAddon } from './ShadowViewAddon-b311a206.js';
 import { P as PortalContainerView, a as PortalSectionView } from './sqm-portal-container-view-6c582684.js';
 import { O as OtherRegionSlotView, I as InvoiceTableView, T as TaxForm } from './sqm-invoice-table-view-34ac7513.js';
 
@@ -1972,12 +1972,6 @@ const link = h("a", null, "Support");
 const defaultElements$1 = {
   empty: (h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png", "empty-state-header": "View your rank in the leaderboard", "empty-state-text": "Be the first to refer a friend and reach the top of the leaderboard" })),
   essentials: (h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1715360191/squatch-assets/Leaderboard_Not_Available.svg", "empty-state-header": "Leaderboards aren\u2019t available on your plan", "empty-state-text": "Contact {supportText} to upgrade your plan and start leveraging gamification in your program.", "support-text": "Support" })),
-  loadingstate: (h("slot", { name: "loading" },
-    h("table", null, [...Array(10)].map(() => {
-      return (h("tr", null,
-        h("td", null,
-          h("sl-skeleton", null))));
-    })))),
 };
 const Empty$1 = () => {
   const props = {