@saasquatch/mint-components 1.11.0-7 → 1.11.0

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-a5a04d8a.js');
-require('./index.module-2d82a984.js');
-const reRender = require('./re-render-7744b75a.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+require('./index.module-df530553.js');
+const reRender = require('./re-render-1976e05e.js');
 
 const TabView = ({}, children) => {
   return index.h(index.Host, null, children);
@@ -14,7 +14,7 @@ const TabView = ({}, children) => {
 const Tab = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    stencilHooks_module.h(this);
+    stencilHooks_module.h$1(this);
   }
   disconnectedCallback() { }
   render() {

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-2d82a984.js');
-const reRender = require('./re-render-7744b75a.js');
-const useChildElements = require('./useChildElements-079a23aa.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, }) => {
@@ -41,7 +41,7 @@ const TabsView = ({ content, placement, }) => {
 const REVEAL_EVENT = "sq:reveal";
 function useTabs() {
   const rawTabs = useChildElements.useChildElements();
-  const host = index_module.T();
+  const host = index_module._();
   const tick = reRender.useRerenderListener();
   const tabs = stencilHooks_module.useMemo(() => rawTabs
     .filter((tab) => tab.tagName === "SQM-TAB" || tab.tagName === "RAISINS-PLOP-TARGET")
@@ -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-079a23aa.js → useChildElements-e0d44916.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-a5a04d8a.js');
-const index_module = require('./index.module-2d82a984.js');
+const stencilHooks_module = require('./stencil-hooks.module-72742a0b.js');
+const index_module = require('./index.module-df530553.js');
 
 function useChildElements() {
-  const host = index_module.T();
+  const host = index_module._();
   const initialState = host.children.length
     ? Array.from(host.children)
     : [];

package/dist/cjs/{useInstantAccessRegistration-615a4dec.js → useInstantAccessRegistration-bbe746d1.js}

@@ -1,15 +1,15 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-a5a04d8a.js');
-const index_module = require('./index.module-2d82a984.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-cabaa291.js');
+const useRegistrationFormState = require('./useRegistrationFormState-876ed65d.js');
 
 function useInstantAccessRegistration(props) {
   const cookie = new URLSearchParams(window.location.search);
   const cookies = cookie === null || cookie === void 0 ? void 0 : cookie.get("_saasquatch");
   const { registrationFormState, setRegistrationFormState } = useRegistrationFormState.useRegistrationFormState();
-  const [request, { loading, errors, data }] = index_module.Cn();
+  const [request, { loading, errors, data }] = index_module.mn();
   const [error, setError] = stencilHooks_module.useState("");
   const submit = async (event) => {
     var _a;

package/dist/cjs/{useReferralTable-034e8eb1.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-2d82a984.js');
-const reRender = require('./re-render-7744b75a.js');
-const useChildElements = require('./useChildElements-079a23aa.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 {
@@ -246,8 +245,8 @@ const GET_IMPACT_TAX = index.dist.gql `
 `;
 function useReferralTable(props, emptyElement, loadingElement) {
   var _a, _b, _c, _d;
-  const user = index_module.K();
-  const programIdContext = index_module.z();
+  const user = index_module.Q();
+  const programIdContext = index_module.H();
   // Default to context, overriden by props
   const programId = (_a = props.programId) !== null && _a !== void 0 ? _a : programIdContext;
   // If no program ID, shows all programs
@@ -269,17 +268,17 @@ function useReferralTable(props, emptyElement, loadingElement) {
     loading: false,
     page: 0,
   });
-  const locale = index_module.Q();
-  const { data: referrerResponse, loading: referrerLoading, refetch, } = index_module.En(GET_REFERRER_DATA, {
+  const locale = index_module.L();
+  const { data: referrerResponse, loading: referrerLoading, refetch, } = index_module.yn(GET_REFERRER_DATA, {
     programId: programId === "classic" ? null : programId,
     rewardFilter,
     locale,
   }, !props.showReferrer || !(user === null || user === void 0 ? void 0 : user.jwt));
   const referrerData = (_b = referrerResponse === null || referrerResponse === void 0 ? void 0 : referrerResponse.viewer) === null || _b === void 0 ? void 0 : _b.referredByReferral;
   const showReferrerRow = props.showReferrer && !!(referrerData === null || referrerData === void 0 ? void 0 : referrerData.dateReferralStarted);
-  const { data: taxResponse, loading: taxLoading } = index_module.En(GET_IMPACT_TAX, {}, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const { data: taxResponse, loading: taxLoading } = index_module.yn(GET_IMPACT_TAX, {}, !(user === null || user === void 0 ? void 0 : user.jwt));
   const taxConnection = (_c = taxResponse === null || taxResponse === void 0 ? void 0 : taxResponse.viewer) === null || _c === void 0 ? void 0 : _c.impactConnection;
-  const { envelope: referralData, states, callbacks, } = index_module.On(GET_REFERRAL_DATA, (data) => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.referrals; }, {
+  const { envelope: referralData, states, callbacks, } = index_module.kn(GET_REFERRAL_DATA, (data) => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.referrals; }, {
     limit: props.perPage,
     offset: 0,
   }, {
@@ -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-cabaa291.js → useRegistrationFormState-876ed65d.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-const stencilHooks_module = require('./stencil-hooks.module-a5a04d8a.js');
-const index_module = require('./index.module-2d82a984.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) {
-  const host = index_module.T();
+  const host = index_module._();
   const [registrationFormState, setRegistrationFormState] = stencilHooks_module.y(host, REGISTRATION_FORM_STATE_CONTEXT, formState);
   return { registrationFormState, setRegistrationFormState };
 }

package/dist/cjs/{utilities-a4072d5b.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-2d82a984.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-card-feed/sqm-card-feed.js

@@ -6,7 +6,7 @@ import { CardFeedView } from "./sqm-card-feed-view";
  * @uiName Card Feed
  * @slots [{"name":"","title":"Cards"}]
  * @exampleGroup Rewards
- * @example Task Card Feed - <sqm-card-feed gap="24" width="347"> <sqm-task-card reward-amount="20" goal="1" card-title="Complete a Survey" description="Fill out our NPS survey and get 20 points for giving us honest feedback." button-text="Take survey" reward-unit="Points" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" finite="0" starts-on-message="Starts {startDate}" > </sqm-task-card> <sqm-task-card reward-amount="250" goal="500" show-progress-bar card-title="Spend $500" description="Earn 250 points when you spend $500 or more." button-text="See plans" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" progress-bar-unit="$" finite="0" reward-unit="Points" starts-on-message="Starts {startDate}" > </sqm-task-card> <sqm-task-card goal="1" reward-amount="50" card-title="Follow Us on Twitter" description="Earn 50 points when you follow us on Twitter!" button-text="Follow" button-link="https://twitter.com/" open-new-tab="true" event-key="socialFollow" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" finite="0" reward-unit="Points" starts-on-message="Starts {startDate}" > </sqm-task-card> <sqm-task-card reward-amount="1" reward-unit="Free Month" goal="1" card-title="Upgrade Your Plan" description="Receive one free month for being a committed customer when you upgrade your plan." button-text="Upgrade" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" open-new-tab="false" finite="0" starts-on-message="Starts {startDate}" > </sqm-task-card> </sqm-card-feed>
+ * @example Task Card Feed - <sqm-card-feed gap="24" width="347"> <sqm-task-card reward-amount="20" goal="1" card-title="Complete a Survey" description="Fill out our NPS survey and get 20 points for giving us honest feedback." button-text="Take survey" reward-unit="Points" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" finite="0" starts-on-message="Starts {startDate}" > </sqm-task-card> <sqm-task-card reward-amount="250" goal="500" show-progress-bar card-title="Spend $500" description="Earn 250 points when you spend $500 or more." button-text="See plans" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" progress-bar-unit="$" finite="0" reward-unit="Points" starts-on-message="Starts {startDate}" > </sqm-task-card> <sqm-task-card goal="1" reward-amount="50" card-title="Follow Us on X" description="Earn 50 points when you Follow Us on X!" button-text="Follow" button-link="https://twitter.com/" open-new-tab="true" event-key="socialFollow" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" finite="0" reward-unit="Points" starts-on-message="Starts {startDate}" > </sqm-task-card> <sqm-task-card reward-amount="1" reward-unit="Free Month" goal="1" card-title="Upgrade Your Plan" description="Receive one free month for being a committed customer when you upgrade your plan." button-text="Upgrade" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" open-new-tab="false" finite="0" starts-on-message="Starts {startDate}" > </sqm-task-card> </sqm-card-feed>
  */
 export class CardFeed {
   constructor() {

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

@@ -11,7 +11,7 @@ export function ImageView(props) {
     },
     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,18 +156,13 @@ const defaultStyles = {
   statsheading: "Referrals",
   rankheading: "Rank",
   anonymousUser: "Anonymous User",
+  viewingUserText: "You",
+  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";
 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 = {
@@ -196,11 +191,10 @@ export const Empty = () => {
   };
   return h(LeaderboardView, Object.assign({}, props));
 };
-export const Essentials = () => {
+export const Loading = () => {
   const props = {
     states: {
-      loading: false,
-      isEssentials: true,
+      loading: true,
       hasLeaders: false,
       styles: {
         ...defaultStyles,
@@ -208,15 +202,8 @@ export const Essentials = () => {
     },
     data: {
       rankType: "rowNumber",
-      leaderboard: [],
       rowNumber: 10,
-      viewerRank: {
-        firstName: "Kutay",
-        lastInitial: "C",
-        textValue: "8",
-        rowNumber: 11,
-        rank: 23,
-      },
+      leaderboard: [],
     },
     elements: {
       ...defaultElements,
@@ -224,10 +211,11 @@ export const Essentials = () => {
   };
   return h(LeaderboardView, Object.assign({}, props));
 };
-export const Loading = () => {
+export const Essentials = () => {
   const props = {
     states: {
-      loading: true,
+      loading: false,
+      isEssentials: true,
       hasLeaders: false,
       styles: {
         ...defaultStyles,
@@ -235,8 +223,15 @@ export const Loading = () => {
     },
     data: {
       rankType: "rowNumber",
-      rowNumber: 10,
       leaderboard: [],
+      rowNumber: 10,
+      viewerRank: {
+        firstName: "Kutay",
+        lastInitial: "C",
+        textValue: "8",
+        rowNumber: 11,
+        rank: 23,
+      },
     },
     elements: {
       ...defaultElements,
@@ -373,6 +368,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: {
@@ -451,7 +478,7 @@ export const ViewerOutside = () => {
         lastInitial: "C",
         textValue: "8",
         rowNumber: 11,
-        rank: 23,
+        rank: 24,
       },
     },
     elements: {
@@ -482,6 +509,33 @@ export const ViewerAnonymous = () => {
   };
   return h(LeaderboardView, Object.assign({}, props));
 };
+export const HideNamesWithViewerOutside = () => {
+  const props = {
+    states: {
+      loading: false,
+      hasLeaders: true,
+      styles: {
+        ...defaultStyles,
+        showRank: true,
+        hideNames: true,
+      },
+    },
+    data: {
+      rankType: "rowNumber",
+      leaderboard: users,
+      rowNumber: 10,
+      viewerRank: {
+        textValue: "8",
+        rowNumber: 11,
+        rank: 42,
+      },
+    },
+    elements: {
+      ...defaultElements,
+    },
+  };
+  return h(LeaderboardView, Object.assign({}, props));
+};
 export const HideViewer = () => {
   const props = {
     states: {
@@ -512,3 +566,55 @@ export const HideViewer = () => {
   };
   return h(LeaderboardView, Object.assign({}, props));
 };
+export const HideNames = () => {
+  const props = {
+    states: {
+      loading: false,
+      hasLeaders: true,
+      rowNumber: 10,
+      styles: {
+        ...defaultStyles,
+        showRank: true,
+        hideNames: true,
+      },
+    },
+    data: {
+      rankType: "rowNumber",
+      leaderboard: users,
+      rowNumber: 10,
+      viewerRank: {
+        firstName: "Viktor",
+        lastInitial: "V",
+        textValue: "82",
+        rowNumber: 1,
+        rank: 1,
+      },
+    },
+    elements: {
+      ...defaultElements,
+    },
+  };
+  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" }))));
+};