@saasquatch/mint-components 1.10.2-6 → 1.10.2-8

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

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-a5a04d8a.js');
-const index_module = require('./index.module-b1f9bdb8.js');
-const reRender = require('./re-render-95d86b86.js');
-const useChildElements = require('./useChildElements-91b9f4ff.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+const index_module = require('./index.module-df530553.js');
+const reRender = require('./re-render-1976e05e.js');
+const useChildElements = require('./useChildElements-e0d44916.js');
 const utils = require('./utils-6847bc06.js');
 
 const TabsView = ({ content, placement, }) => {
@@ -86,7 +86,7 @@ function useTabs() {
 const Tabs = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {

package/dist/cjs/sqm-text-span.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-a5a04d8a.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
 require('./JSS-8503a151.js');
 const sqmTextSpanView = require('./sqm-text-span-view-e1cd9bd3.js');
 
@@ -11,7 +11,7 @@ const Text = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ignored = true;
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   componentWillLoad() { }

package/dist/cjs/{stencil-hooks.module-a5a04d8a.js → stencil-hooks.module-72742a0b.js}

@@ -1114,14 +1114,17 @@ function c$1(){return (c$1=Object.assign||function(e){for(var t=1;t<arguments.le
 function s$2(){return index.getRenderingRef()}function l$1(){var e=s$2();return index.getElement(e)}function d$2(e,t){void 0===t&&(t={});var n=l$1();return h$1(n,e,t)}function m$2(e,t){var n=l$1();return y$1(n,e,t)}var p$1=browser("stencil-hook");function h$2(t){var r,u=index.getElement(t),c=(r=!1,new State(function(){p$1("Queue update on element",u),r||(r=!0,Promise.resolve().then(function(){p$1("Forced update on element",u),r=!1,index.forceUpdate(u);}));},u)),a=t.disconnectedCallback;if(!a)throw new Error("Stencil hooks requires `disconnectedCallback` to be defined (even if it's empty). This is because of how the Stencil compiler works internally");t.disconnectedCallback=function(){c.teardown(),v(a);};var i=t.connectedCallback;t.connectedCallback=function(){c.update(),v(i);};var f=t.render.bind(t);t.render=function(){var e=c.run(f);return c.runEffects(),e};}function v(e){"function"==typeof e&&e();}
 
 exports.browser = browser;
+exports.c = c;
 exports.commonjsGlobal = commonjsGlobal;
 exports.createCommonjsModule = createCommonjsModule;
 exports.d = d$2;
 exports.getAugmentedNamespace = getAugmentedNamespace;
 exports.getDefaultExportFromCjs = getDefaultExportFromCjs;
-exports.h = h$2;
+exports.h = h$1;
+exports.h$1 = h$2;
 exports.l = l$1;
 exports.m = m$2;
+exports.s = s$1;
 exports.useEffect = useEffect;
 exports.useMemo = useMemo;
 exports.useReducer = useReducer;

package/dist/cjs/{useChildElements-91b9f4ff.js → useChildElements-e0d44916.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-a5a04d8a.js');
-const index_module = require('./index.module-b1f9bdb8.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+const index_module = require('./index.module-df530553.js');
 
 function useChildElements() {
   const host = index_module._();

package/dist/cjs/{useInstantAccessRegistration-610f4be8.js → useInstantAccessRegistration-bbe746d1.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-a5a04d8a.js');
-const index_module = require('./index.module-b1f9bdb8.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+const index_module = require('./index.module-df530553.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
-const useRegistrationFormState = require('./useRegistrationFormState-49251027.js');
+const useRegistrationFormState = require('./useRegistrationFormState-876ed65d.js');
 
 function useInstantAccessRegistration(props) {
   const cookie = new URLSearchParams(window.location.search);

package/dist/cjs/{useReferralTable-4756d4fc.js → useReferralTable-a76adb0d.js}

@@ -1,15 +1,14 @@
 'use strict';
 
-const index$1 = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-a5a04d8a.js');
-const index_module = require('./index.module-b1f9bdb8.js');
-const reRender = require('./re-render-95d86b86.js');
-const useChildElements = require('./useChildElements-91b9f4ff.js');
-const index = require('./index-56d1fa5b.js');
+const index = require('./index-b0129cd6.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+const index_module = require('./index.module-df530553.js');
+const reRender = require('./re-render-1976e05e.js');
+const useChildElements = require('./useChildElements-e0d44916.js');
 
 const debug = stencilHooks_module.browser("sq:useReferralTable");
 const CSS_NAMESPACE = "sqm-referral-table";
-const GET_REFERRER_DATA = index.dist.gql `
+const GET_REFERRER_DATA = index_module.dist.gql `
   query getReferrals(
     $programId: ID
     $rewardFilter: RewardFilterInput
@@ -78,7 +77,7 @@ const GET_REFERRER_DATA = index.dist.gql `
     }
   }
 `;
-const GET_REFERRAL_DATA = index.dist.gql `
+const GET_REFERRAL_DATA = index_module.dist.gql `
   query getReferrals(
     $limit: Int!
     $offset: Int!
@@ -215,7 +214,7 @@ const GET_REFERRAL_DATA = index.dist.gql `
     }
   }
 `;
-const GET_IMPACT_TAX = index.dist.gql `
+const GET_IMPACT_TAX = index_module.dist.gql `
   query getImpactTax {
     viewer {
       ... on User {
@@ -312,12 +311,12 @@ function useReferralTable(props, emptyElement, loadingElement) {
     // show the referrer row before any other rows
     let referrerRow;
     if (showReferrerRow && states.currentPage === 0) {
-      const referrerPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderReferrerCell(referrerData, locale, index$1.h)));
+      const referrerPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderReferrerCell(referrerData, locale, index.h)));
       referrerRow = await Promise.all(referrerPromise);
     }
     // get the column cells (renderCell is asynchronous)
     const cellsPromise = data === null || data === void 0 ? void 0 : data.map(async (r) => {
-      const cellPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderCell(r, { locale, taxConnection }, index$1.h)));
+      const cellPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c) => tryMethod(c, () => c.renderCell(r, { locale, taxConnection }, index.h)));
       const cells = (await Promise.all(cellPromise));
       return cells;
     });
@@ -405,7 +404,7 @@ async function tryMethod(c, callback) {
       debug("label promise failed", e);
     }
     debug("label promise failed", e);
-    return index$1.h("span", null);
+    return index.h("span", null);
   }
   try {
     return await renderPromise;
@@ -415,8 +414,8 @@ async function tryMethod(c, callback) {
     // This should not happen so we fail fast
     debug("Error rendering label", e);
     const userError = generateUserError(e);
-    return (index$1.h("details", null,
-      index$1.h("summary", null, "Error"),
+    return (index.h("details", null,
+      index.h("summary", null, "Error"),
       userError));
   }
 }

package/dist/cjs/{useRegistrationFormState-49251027.js → useRegistrationFormState-876ed65d.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-a5a04d8a.js');
-const index_module = require('./index.module-b1f9bdb8.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+const index_module = require('./index.module-df530553.js');
 
 const REGISTRATION_FORM_STATE_CONTEXT = "sq:registration-form-state";
 function useRegistrationFormState(formState) {

package/dist/cjs/{utilities-42a1810d.js → utilities-cec9dd36.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-a5a04d8a.js');
-const index_module = require('./index.module-b1f9bdb8.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+const index_module = require('./index.module-df530553.js');
 
 // import { IntlMessageFormat } from 'intl-messageformat';
 function isMobile(breakPoint) {

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

@@ -37,8 +37,8 @@ export const SlottedIntoComponent = () => {
     data: {
       rankType: "rowNumber",
       leaderboard: [],
-      showUser: true,
       rowNumber: 10,
+      showUser: true,
       userRank: {
         firstName: "Kutay",
         lastInitial: "C",

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

@@ -5,13 +5,14 @@ export function ImageView(props) {
   const style = {
     Container: {
       display: "flex",
+      // width: props.width || "100%",
       width: "100%",
       justifyContent: props.alignment || "center",
       background: props.backgroundColor || "",
     },
     Image: {
       minHeight: props.minHeight || "100%",
-      width: "100%",
+      width: props.width || "100%",
       maxWidth: "max-content",
       objectFit: "cover",
     },

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

@@ -126,6 +126,26 @@ export class Image {
       },
       "attribute": "min-height",
       "reflect": false
+    },
+    "width": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Width",
+            "name": "uiName"
+          }],
+        "text": "(Optional) Constrains the width of the image. Can be a pixel value or a percentage i.e. \"500px\", \"33%\", etc."
+      },
+      "attribute": "width",
+      "reflect": false
     }
   }; }
 }

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

@@ -81,8 +81,8 @@ const users = [
 ];
 const pointsUsers = [
   {
-    firstName: "",
-    lastInitial: "",
+    firstName: "Tom",
+    lastInitial: "Smith",
     textValue: "82 Points",
     rank: 1,
     rowNumber: 1,
@@ -156,6 +156,7 @@ const defaultStyles = {
   statsheading: "Referrals",
   rankheading: "Rank",
   anonymousUser: "Anonymous User",
+  rankSuffix: "{rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}",
 };
 const link = h("a", null, "Support");
 const tag = "Contact" + link + "about upgrading your plan";
@@ -373,6 +374,38 @@ export const ReferralLeaderboard = () => {
   };
   return h(LeaderboardView, Object.assign({}, props));
 };
+export const ReferralLeaderboardWithMaxWidth = () => {
+  const props = {
+    states: {
+      loading: false,
+      hasLeaders: true,
+      styles: {
+        ...defaultStyles,
+        rankheading: "Rank",
+        usersheading: "User",
+        statsheading: "Referrals",
+        showRank: false,
+        maxWidth: "300px",
+      },
+    },
+    data: {
+      rankType: "rowNumber",
+      leaderboard: users,
+      rowNumber: 10,
+      viewerRank: {
+        firstName: "Viktor",
+        lastInitial: "V",
+        textValue: "82",
+        rank: 1,
+        rowNumber: 1,
+      },
+    },
+    elements: {
+      ...defaultElements,
+    },
+  };
+  return h(LeaderboardView, Object.assign({}, props));
+};
 export const PointsLeaderboard = () => {
   const props = {
     states: {
@@ -542,3 +575,25 @@ export const HideNames = () => {
   };
   return h(LeaderboardView, Object.assign({}, props));
 };
+export const LeaderboardWithNoNamesAndGraphic = () => {
+  return (h("div", { style: {
+      display: "flex",
+      alignItems: "flex-start",
+      justifyContent: "center",
+      width: "100%",
+      gap: "50px",
+    } },
+    h("div", { style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "10px",
+        maxWidth: "30%",
+      } },
+      h("sqm-image", { width: "70%", alignment: "center", imageUrl: "https://res.cloudinary.com/saasquatch-staging/image/upload/v1729728469/Leaderboard_image_z87lsm.png" }),
+      h("h2", { style: { margin: "auto" } }, " Top Performers"),
+      h("p", { style: { margin: "0" } }, "The leaderboard highlights the top performers in real-time. Stay motivated, stay competitive!")),
+    h("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" },
+      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" }))));
+};

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

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
+import { intl } from "../../global/global";
 const style = {
   Leaderboard: {
     "& table": {
@@ -52,7 +53,7 @@ const vanillaStyle = `
   }
 `;
 export function LeaderboardView(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
   const { states, data, elements } = props;
   const { styles } = states;
   if (states.loading)
@@ -66,17 +67,18 @@ export function LeaderboardView(props) {
   if (!states.hasLeaders)
     return elements.empty;
   let userSeenFlag = false;
-  return (h("div", { class: sheet.classes.Leaderboard, part: "sqm-base" },
+  console.log("The rank is: ", (_a = data.viewerRank) === null || _a === void 0 ? void 0 : _a.rank);
+  console.log("The rank suffix  is: ", styles.width);
+  return (h("div", { class: sheet.classes.Leaderboard, part: "sqm-base", style: { width: styles.width || "100%" } },
     h("style", { type: "text/css" },
       styleString,
       vanillaStyle),
-    h("div", null, "Leaderboards"),
     h("table", { part: "sqm-table" },
       h("tr", null,
         styles.showRank && (h("th", { class: `Rank ${styles.hideNames ? "fullWidth" : ""}` }, styles.rankheading)),
         !styles.hideNames && h("th", { class: "User" }, styles.usersheading),
-        h("th", { class: "Score" }, styles.statsheading)), (_a = data.leaderboard) === null || _a === void 0 ? void 0 :
-      _a.map((user) => {
+        h("th", { class: "Score" }, styles.statsheading)), (_b = data.leaderboard) === null || _b === void 0 ? void 0 :
+      _b.map((user) => {
         var _a, _b;
         if (user.rowNumber === ((_a = data.viewerRank) === null || _a === void 0 ? void 0 : _a.rowNumber))
           userSeenFlag = true;
@@ -84,7 +86,10 @@ export function LeaderboardView(props) {
             user.rowNumber === ((_b = data.viewerRank) === null || _b === void 0 ? void 0 : _b.rowNumber)
             ? "highlight"
             : "" },
-          styles.showRank && h("td", { class: "Rank" }, user.rank),
+          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
@@ -96,12 +101,12 @@ export function LeaderboardView(props) {
         h("td", { colSpan: 100, class: "ellipses" },
           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.showRank && (h("td", { class: "Rank" }, ((_c = data.viewerRank) === null || _c === void 0 ? void 0 : _c.rank) || "-")),
+        !styles.hideNames && (h("td", { class: "User" }, ((_d = data.viewerRank) === null || _d === void 0 ? void 0 : _d.firstName) && ((_e = data.viewerRank) === null || _e === void 0 ? void 0 : _e.lastInitial)
+          ? ((_f = data.viewerRank) === null || _f === void 0 ? void 0 : _f.firstName) +
+            " " + ((_g = data.viewerRank) === null || _g === void 0 ? void 0 : _g.lastInitial)
+          : ((_h = data.viewerRank) === null || _h === void 0 ? void 0 : _h.firstName) || ((_j = data.viewerRank) === null || _j === void 0 ? void 0 : _j.lastInitial)
+            ? ((_k = data.viewerRank) === null || _k === void 0 ? void 0 : _k.firstName) || ((_l = data.viewerRank) === null || _l === void 0 ? void 0 : _l.lastInitial)
             : styles.anonymousUser)),
-        h("td", { class: "Score" }, ((_l = data.viewerRank) === null || _l === void 0 ? void 0 : _l.textValue) || "0"))))));
+        h("td", { class: "Score" }, ((_m = data.viewerRank) === null || _m === void 0 ? void 0 : _m.textValue) || "0"))))));
 }

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

@@ -9,14 +9,25 @@ import { useLeaderboard } from "./useLeaderboard";
  * @uiName Leaderboard
  * @slots [{"name":"empty", "title":"Empty State"}]
  * @requiredFeatures ["LEADERBOARDS"]
+ * @validParents ["div"]
  * @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" imageUrl="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;">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 Test - <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>
  * @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 {
   constructor() {
+    /**
+     * @uiName Place text
+     */
+    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.
      *
@@ -27,7 +38,7 @@ export class Leaderboard {
     /**
      * Hide the Names of users to protect personal identifiable information
      *
-     * @uiName Hide users' names
+     * @uiName Hide users names
      * @default
      */
     this.hideNames = false;
@@ -72,12 +83,13 @@ export class Leaderboard {
       hideNames: this.hideNames,
       showRank: this.showRank,
       isEssentials: this.isEssentials,
+      rankSuffix: this.rankSuffix,
+      width: this.width,
     };
     const demoProps = { ...props, demoData: this.demoData };
     const viewprops = isDemo()
       ? useLeaderboardDemo(demoProps)
       : useLeaderboard(props);
-    console.log("viewProps are ", viewprops);
     return h(LeaderboardView, Object.assign({}, viewprops));
   }
   static get is() { return "sqm-leaderboard"; }
@@ -186,6 +198,48 @@ export class Leaderboard {
       "attribute": "show-rank",
       "reflect": false
     },
+    "width": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Place text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "width",
+      "reflect": false,
+      "defaultValue": "\"100%\""
+    },
+    "rankSuffix": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Rank Suffix",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "rank-suffix",
+      "reflect": false,
+      "defaultValue": "\"{rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}\""
+    },
     "hideViewer": {
       "type": "boolean",
       "mutable": false,
@@ -222,7 +276,7 @@ export class Leaderboard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Hide users' names",
+            "text": "Hide users names",
             "name": "uiName"
           }, {
             "text": undefined,
@@ -392,7 +446,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; }; }; 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; loadingstate: VNode; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -494,6 +548,8 @@ function useLeaderboardDemo(props) {
         showRank: props.showRank,
         hideViewer: props.hideViewer,
         hideNames: props.hideNames,
+        rankSuffix: props.rankSuffix,
+        width: props.width,
       },
     },
     data: {

package/dist/esm/{ShadowViewAddon-7ae0f3a0.js → ShadowViewAddon-2ac771ca.js}

@@ -1,17 +1,16 @@
 import { h, c as Host, d as getAssetPath, g as getElement } from './index-17b4da69.js';
-import { f as useState, b as browser, u as useMemo } from './stencil-hooks.module-3c7f7c90.js';
-import { i as intl } from './global-8a95a0d3.js';
-import { H, Q, y as yn, c as $e, B, a as getEnvironmentSDK, L } from './index.module-f9338fc3.js';
+import { k as useState, b as browser, u as useMemo } from './stencil-hooks.module-ac12ca1c.js';
+import { i as intl } from './global-04c7d3b5.js';
+import { d as dist, H, Q, y as yn, f as $e, B, a as getEnvironmentSDK, L } from './index.module-def4aec5.js';
 import { c as cjs } from './cjs-bdfb4486.js';
 import { H as HostBlock, A as AuthWrapper, a as AuthColumn, b as AuthButtonsContainer, E as ErrorStyles } from './mixins-f60a614c.js';
 import { c as createStyleSheet, j as jss, a as create } from './JSS-67b5cff8.js';
-import { u as useChildElements } from './useChildElements-e32fe084.js';
-import { l as luxon } from './luxon-63e24900.js';
-import { d as dist } from './index-0c7b14c5.js';
+import { u as useChildElements } from './useChildElements-32e1bda1.js';
+import { l as luxon } from './luxon-7600be8d.js';
 import { l as luxonLocale } from './utils-334c1e34.js';
 import { T as TextSpanView } from './sqm-text-span-view-8d140661.js';
 import { p as pathToRegexp } from './index-ffa26b43.js';
-import { a as isValidColor, b as isMobile } from './utilities-c197ef25.js';
+import { a as isValidColor, b as isMobile } from './utilities-3f5bba22.js';
 import { a as PortalSectionView, P as PortalContainerView } from './sqm-portal-container-view-ab89c6cc.js';
 
 const medium = {
@@ -141,7 +140,7 @@ const vanillaStyle = `
   }
 `;
 function LeaderboardView(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
   const { states, data, elements } = props;
   const { styles } = states;
   if (states.loading)
@@ -155,17 +154,18 @@ function LeaderboardView(props) {
   if (!states.hasLeaders)
     return elements.empty;
   let userSeenFlag = false;
-  return (h("div", { class: sheet$1.classes.Leaderboard, part: "sqm-base" },
+  console.log("The rank is: ", (_a = data.viewerRank) === null || _a === void 0 ? void 0 : _a.rank);
+  console.log("The rank suffix  is: ", styles.width);
+  return (h("div", { class: sheet$1.classes.Leaderboard, part: "sqm-base", style: { width: styles.width || "100%" } },
     h("style", { type: "text/css" },
       styleString$1,
       vanillaStyle),
-    h("div", null, "Leaderboards"),
     h("table", { part: "sqm-table" },
       h("tr", null,
         styles.showRank && (h("th", { class: `Rank ${styles.hideNames ? "fullWidth" : ""}` }, styles.rankheading)),
         !styles.hideNames && h("th", { class: "User" }, styles.usersheading),
-        h("th", { class: "Score" }, styles.statsheading)), (_a = data.leaderboard) === null || _a === void 0 ? void 0 :
-      _a.map((user) => {
+        h("th", { class: "Score" }, styles.statsheading)), (_b = data.leaderboard) === null || _b === void 0 ? void 0 :
+      _b.map((user) => {
         var _a, _b;
         if (user.rowNumber === ((_a = data.viewerRank) === null || _a === void 0 ? void 0 : _a.rowNumber))
           userSeenFlag = true;
@@ -173,7 +173,10 @@ function LeaderboardView(props) {
             user.rowNumber === ((_b = data.viewerRank) === null || _b === void 0 ? void 0 : _b.rowNumber)
             ? "highlight"
             : "" },
-          styles.showRank && h("td", { class: "Rank" }, user.rank),
+          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
@@ -185,14 +188,14 @@ function LeaderboardView(props) {
         h("td", { colSpan: 100, class: "ellipses" },
           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.showRank && (h("td", { class: "Rank" }, ((_c = data.viewerRank) === null || _c === void 0 ? void 0 : _c.rank) || "-")),
+        !styles.hideNames && (h("td", { class: "User" }, ((_d = data.viewerRank) === null || _d === void 0 ? void 0 : _d.firstName) && ((_e = data.viewerRank) === null || _e === void 0 ? void 0 : _e.lastInitial)
+          ? ((_f = data.viewerRank) === null || _f === void 0 ? void 0 : _f.firstName) +
+            " " + ((_g = data.viewerRank) === null || _g === void 0 ? void 0 : _g.lastInitial)
+          : ((_h = data.viewerRank) === null || _h === void 0 ? void 0 : _h.firstName) || ((_j = data.viewerRank) === null || _j === void 0 ? void 0 : _j.lastInitial)
+            ? ((_k = data.viewerRank) === null || _k === void 0 ? void 0 : _k.firstName) || ((_l = data.viewerRank) === null || _l === void 0 ? void 0 : _l.lastInitial)
             : styles.anonymousUser)),
-        h("td", { class: "Score" }, ((_l = data.viewerRank) === null || _l === void 0 ? void 0 : _l.textValue) || "0"))))));
+        h("td", { class: "Score" }, ((_m = data.viewerRank) === null || _m === void 0 ? void 0 : _m.textValue) || "0"))))));
 }
 
 const style$2 = {