@saasquatch/mint-components 1.5.6-2 → 1.5.6-5

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

@@ -12372,7 +12372,8 @@ const ManyTabs = () => (index.h("div", { style: { maxWidth: "700px", margin: "au
      <sqm-tabs>
         <sqm-tab header="General">This is the general tab</sqm-tab>
         <sqm-tab header="Custom">This is the custom tab</sqm-tab>
-        <sqm-tab header="Advanced">This is the advanced tab</sqm-tab>        <sqm-tab header="General">This is the general tab</sqm-tab>
+        <sqm-tab header="Advanced">This is the advanced tab</sqm-tab> 
+        <sqm-tab header="General">This is the general tab</sqm-tab>
         <sqm-tab header="Custom">This is the custom tab</sqm-tab>
         <sqm-tab header="Advanced">This is the advanced tab</sqm-tab>
         <sqm-tab header="General">This is the general tab</sqm-tab>

package/dist/collection/components/sqm-big-stat/sqm-big-stat.js

@@ -8,7 +8,8 @@ import { isDemo, useHost } from "@saasquatch/component-boilerplate";
  *
  * @uiName Big Stat
  * @slots [{"name":"","title":"Stat Text"}]
- * @example Points Balance -  <sqm-big-stat flex-reverse="true" alignment="left" stat-type="/rewardBalance/CREDIT/POINT/value/global">Points Balance</sqm-big-stat>
+ * @exampleGroup Statistics
+ * @example Points Balance - <sqm-big-stat flex-reverse="true" alignment="left" stat-type="/rewardBalance/CREDIT/POINT/value/global">Points Balance</sqm-big-stat>
  * @example GiftCards Earned - <sqm-big-stat flex-reverse="true" alignment="left" stat-type="/integrationRewardsCountFiltered/AVAILABLE/global">Giftcards Earned</sqm-big-stat>
  * @example Referrals - <sqm-big-stat flex-reverse="true" alignment="left" stat-type="/referralsCount">Referrals</sqm-big-stat>
   */

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

@@ -4,9 +4,9 @@ import { Component, h, Host, Prop } from "@stencil/core";
 import { buildFontsCssUrl } from "../../fonts/GoogleFonts";
 import { autoColorScaleCss } from "../sqm-stencilbook/AutoColor";
 /**
- *
  * @uiName Brand Container
  * @slots [{"name":"","title":"Branded Content"}]
+ * @exampleGroup Common Components
  */
 export class BrandComponent {
   constructor() {

package/dist/collection/components/sqm-card-feed/sqm-card-feed.js

@@ -5,6 +5,7 @@ import { CardFeedView } from "./sqm-card-feed-view";
 /**
  * @uiName Card Feed
  * @slots [{"name":"","title":"Cards"}]
+ * @exampleGroup Rewards
  */
 export class CardFeed {
   constructor() {

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

@@ -4,6 +4,7 @@ import { getProps } from "../../utils/utils";
 import { HeroImageView } from "./sqm-hero-image-view";
 /**
  * @uiName Hero Image
+ * @exampleGroup Common Components
  * @example Two Column Layout - <sqm-hero-image image-url="https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png" header="MyCompany Rewards" description="Refer a friend and earn up to $1200 in rewards" layout="columns" image-pos="right" background-color="#F9F9F9"></sqm-hero-image>
  * @example Overlay - <sqm-hero-image image-url="https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png" header="MyCompany Rewards" description="Refer a friend and earn up to $1200 in rewards" layout="overlay" image-pos="center" background-color="#F9F9F9" button-link="https://www.example.com" button-new-tab button-text="Earn!" image-percentage="45" overlay-opacity=".5" padding-image="small" padding-text="xxxx-large"></sqm-hero-image>
  */

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

@@ -3,6 +3,7 @@ import { getProps } from "../../utils/utils";
 import { ImageView } from "./sqm-image-view";
 /**
  * @uiName Image
+ * @exampleGroup Common Components
  */
 export class Image {
   constructor() {

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

@@ -7,6 +7,8 @@ import { LeaderboardView } from "./sqm-leaderboard-view";
 import { useLeaderboard } from "./useLeaderboard";
 /**
  * @uiName Leaderboard
+ * @slot [{"name":"empty", "title":"Empty State"}]
+ * @exampleGroup Leaderboards
  * @example Referral Converted Leaderboard - <sqm-leaderboard usersheading="Referrer" statsheading="Referrals" rankheading="Rank" rank-type="rowNumber" leaderboard-type="topConvertedReferrers" show-rank anonymous-user="Anonymous User"> <sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/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 Started Leaderboard - <sqm-leaderboard usersheading="Referrer" statsheading="Referrals" rankheading="Rank" rank-type="rowNumber" leaderboard-type="topStartedReferrers" show-rank anonymous-user="Anonymous User"> <sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/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 Point Earners Leaderboard - <sqm-leaderboard usersheading="Users" statsheading="Points Earned" rankheading="Rank" rank-type="rowNumber" leaderboard-type="topPointEarners" show-rank anonymous-user="Anonymous User"> <sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_leaderboard2.png" empty-state-header="View your rank in the leaderboard" empty-state-text="Be the first to earn points and reach the top of the leaderboard" ></sqm-empty></sqm-leaderboard>

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

@@ -7,6 +7,10 @@ import deepmerge from "deepmerge";
 import { intl } from "../../global/global";
 /**
  * @uiName Leaderboard Rank
+ * @exampleGroup Leaderboards
+ * @example Referral Converted Leaderboard - <sqm-leaderboard-rank leaderboard-type="topConvertedReferrers" rank-type="rowNumber" rank-text="You are currently in {rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th} } place!" unranked-text="You are currently unranked, refer a friend!"></sqm-leaderboard-rank>
+ * @example Referral Started Leaderboard - <sqm-leaderboard-rank leaderboard-type="topStartedReferrers" rank-type="rowNumber" rank-text="You are currently in {rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th} } place!" unranked-text="You are currently unranked, refer a friend!"></sqm-leaderboard-rank>
+ * @example Point Earners Leaderboard - <sqm-leaderboard-rank rleaderboard-type="topPointEarners" ank-type="rowNumber" rank-text="You are currently in {rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th} } place!" unranked-text="You are currently unranked, earn points!"></sqm-leaderboard-rank>
  */
 export class LeaderboardRank {
   constructor() {

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

@@ -5,6 +5,7 @@ import { getProps } from "../../utils/utils";
 /**
  * @uiName Portal Container
  * @slots [{"name":"","title":"Widget Content"}]
+ * @exampleGroup Layout
  */
 export class PortalContainer {
   constructor() {

package/dist/collection/components/sqm-program-explainer/sqm-program-explainer.js

@@ -4,6 +4,8 @@ import { getProps } from "../../utils/utils";
 import { ProgramExplainerView } from "./sqm-program-explainer-view";
 /**
  * @uiName Program Explainer
+ * @exampleGroup Common Components
+ * @slot [{"name":"", "title":"Explainer", "validChildren":["sqm-program-explainer-step"]}]
  * @examples Program Explainer - <sqm-program-explainer header="How it works"><sqm-program-explainer-step description="Complete tasks like uploading your first video or sharing videos with friends" header="Earn points" icon="cash-stack" text-color="#000000"></sqm-program-explainer-step><sqm-program-explainer-step description="Use your points and redeem rewards like one free month of Enterprise or a visa giftcard" header="Redeem rewards" icon="people" text-color="#000000"></sqm-program-explainer-step></sqm-program-explainer>
  */
 export class ProgramExplainer {

package/dist/collection/components/sqm-program-explainer-step/sqm-program-explainer-step.js

@@ -4,6 +4,7 @@ import { getProps } from "../../utils/utils";
 import { ProgramExplainerStepView } from "./sqm-program-explainer-step-view";
 /**
  * @uiName Program Explainer Step
+ * @exampleGroup Common Components
  * @example Program Explainer Step - <sqm-program-explainer-step description="Complete tasks like uploading your first video or sharing videos with friends" header="Earn points" icon="cash-stack" text-color="#000000"></sqm-program-explainer-step>
  * @validParents ["sqm-program-explainer"]
  */

package/dist/collection/components/sqm-referral-card/sqm-referral-card.js

@@ -4,6 +4,7 @@ import { getProps } from "../../utils/utils";
 import { ReferralCardView } from "./sqm-referral-card-view";
 /**
  * @uiName Referral Card
+ * @exampleGroup Referrals
  * @slots [{"name":"left","title":"Left Content"},{"name":"right","title":"Right Content"}]
  * @example Referral Card - <sqm-referral-card vertical-alignment="start"> <sqm-portal-container gap="large" slot="left" direction="column" display="grid" max-width="100%" padding="none" > <sqm-text >They’ll get a $50 credit towards a new account and you’ll get: </sqm-text> <sqm-timeline icon="circle"> <sqm-timeline-entry reward="$50" unit="visa giftcard" desc="Your friend purchases a Business plan" icon="circle" > </sqm-timeline-entry> <sqm-timeline-entry reward="$200" unit="visa giftcard" desc="Our sales team qualifies your friend as a good fit for our Enterprise plan" icon="circle" > </sqm-timeline-entry> <sqm-timeline-entry reward="$1000" unit="visa giftcard" desc="Your friend purchases an Enterprise plan" icon="circle" > </sqm-timeline-entry> </sqm-timeline> </sqm-portal-container> <sqm-portal-container gap="large" slot="right" direction="column" display="grid" max-width="100%" padding="none" > <sqm-text>Choose how you want to share: </sqm-text> <sqm-text> <sub>Your unique referral link:</sub> <sqm-share-link tooltip-text="Copied to Clipboard" tooltip-lifespan="1000" > </sqm-share-link> </sqm-text> <sqm-portal-container gap="x-small" direction="column" display="grid" max-width="100%" padding="none" > <sqm-share-button medium="email" icon-slot="prefix" size="medium" type="default" > Share via email </sqm-share-button> <sqm-share-button medium="linkedin" icon-slot="prefix" size="medium" type="default" > Share on LinkedIn </sqm-share-button> <sqm-share-button medium="twitter" icon-slot="prefix" size="medium" type="default" > Share on Twitter </sqm-share-button> </sqm-portal-container> </sqm-portal-container> </sqm-referral-card>
  */

package/dist/collection/components/sqm-referral-table/columns/sqm-referral-table-column.js

@@ -4,6 +4,7 @@ import { useRequestRerender } from "../../../tables/re-render";
 /**
  * @uiName Referral Table Generic Column
  * @validParents ["sqm-referral-table"]
+ * @exampleGroup Referrals
  */
 export class ReferralTableGenericColumn {
   constructor() {

package/dist/collection/components/sqm-referral-table/columns/sqm-referral-table-date-column.js

@@ -4,6 +4,7 @@ import { useRequestRerender } from "../../../tables/re-render";
 /**
  * @uiName Referral Table Date Column
  * @validParents ["sqm-referral-table"]
+ * @exampleGroup Referrals
  */
 export class ReferralTableDateColumn {
   constructor() {

package/dist/collection/components/sqm-referral-table/columns/sqm-referral-table-rewards-column.js

@@ -4,6 +4,7 @@ import { useRequestRerender } from "../../../tables/re-render";
 /**
  * @uiName Referral Table Rewards Column
  * @validParents ["sqm-referral-table"]
+ * @exampleGroup Referrals
  */
 export class ReferralTableRewardsColumn {
   constructor() {

package/dist/collection/components/sqm-referral-table/columns/sqm-referral-table-status-column.js

@@ -4,6 +4,7 @@ import { useRequestRerender } from "../../../tables/re-render";
 /**
  * @uiName Referral Table Status Column
  * @validParents ["sqm-referral-table"]
+ * @exampleGroup Referrals
  */
 export class ReferralTableStatusColumn {
   constructor() {

package/dist/collection/components/sqm-referral-table/columns/sqm-referral-table-user-column.js

@@ -4,6 +4,7 @@ import { useRequestRerender } from "../../../tables/re-render";
 /**
  * @uiName Referral Table User Column
  * @validParents ["sqm-referral-table"]
+ * @exampleGroup Referrals
  */
 export class ReferralTableUserColumn {
   constructor() {

package/dist/collection/components/sqm-referral-table/sqm-referral-table.js

@@ -10,6 +10,8 @@ import mockReferralData from "./mockReferralData";
 import { tryMethod, useReferralTable } from "./useReferralTable";
 /**
  * @uiName Referral Table
+ * @exampleGroup Referrals
+ * @slots [{"name":"", "title":"Table Row"}]
  */
 export class ReferralTable {
   constructor() {

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

@@ -8,6 +8,8 @@ import { getProps } from "../../utils/utils";
 import { demoRewardExchange } from "./RewardExchangeListData";
 /**
  * @uiName Reward Exchange
+ * @slots [{"name":"empty", "title":"Empty State"}]
+ * @exampleGroup Rewards
  * @example Reward Exchange - <sqm-reward-exchange-list back-text="Back" button-text="Exchange Rewards" cancel-text="Cancel" choose-amount-title="Select" choose-reward-title="Rewards" confirmation-title="Confirm" continue-text="Continue" continue-to-confirmation-text="Continue to confirmation" done-text="Done" reward-title="Choose a reward" not-available-error="{unavailableReasonCode, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {{sourceValue} required} AVAILABILITY_PREDICATE {Not available} other {{unavailableReasonCode}} }" not-enough-error="Not enough {sourceUnit} to redeem for this reward" query-error="Unable to load reward exchange list. Please try again" redeem-text="Redeem" redeem-title="Confirm and redeem" redemption-error="An error occured trying to redeem this reward. Please try again" redemption-success-text="Redeemed {sourceValue} for {destinationValue}" select-text="Select amount to receive" source-amount-message="{ruleType, select, FIXED_GLOBAL_REWARD {{sourceValue}} other {{sourceMinValue} to {sourceMaxValue}}}" tooltiptext="Copied" reward-name-title="Reward" reward-amount-title="Reward Amount" cost-title="Cost to Redeem" reward-redeemed-text="Reward redeemed" skeleton-card-num="8" promo-code="Promo Code" tooltip-text="Copied!"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_exchange2.png" empty-state-header="Redeem rewards" empty-state-text="Use your points to redeem rewards once they become available" > </sqm-empty></sqm-reward-exchange-list>
  */
 export class SqmRewardExchangeList {

package/dist/collection/components/sqm-rewards-table/columns/sqm-rewards-table-date-column.js

@@ -4,6 +4,7 @@ import { useRequestRerender } from "../../../tables/re-render";
 /**
  * @uiName Reward Table Date Column
  * @validParents ["sqm-rewards-table"]
+ * @exampleGroup Rewards
  */
 export class RewardTableDateColumn {
   constructor() {

package/dist/collection/components/sqm-rewards-table/columns/sqm-rewards-table-note-column.js

@@ -4,6 +4,7 @@ import { useRequestRerender } from "../../../tables/re-render";
 /**
  * @uiName Reward Table Customer Note Column
  * @validParents ["sqm-rewards-table"]
+ * @exampleGroup Rewards
  */
 export class RewardTableCustomerNoteColumn {
   constructor() {

package/dist/collection/components/sqm-rewards-table/columns/sqm-rewards-table-reward-column.js

@@ -4,6 +4,7 @@ import { useRequestRerender } from "../../../tables/re-render";
 /**
  * @uiName Rewards Table Reward Column
  * @validParents ["sqm-rewards-table"]
+ * @exampleGroup Rewards
  */
 export class RewardsTableColumn {
   constructor() {

package/dist/collection/components/sqm-rewards-table/columns/sqm-rewards-table-source-column.js

@@ -4,6 +4,7 @@ import { useRequestRerender } from "../../../tables/re-render";
 /**
  * @uiName Reward Table Source Column
  * @validParents ["sqm-rewards-table"]
+ * @exampleGroup Rewards
  */
 export class RewardTableUserColumn {
   constructor() {

package/dist/collection/components/sqm-rewards-table/columns/sqm-rewards-table-status-column.js

@@ -4,6 +4,7 @@ import { useRequestRerender } from "../../../tables/re-render";
 /**
  * @uiName Reward Table Status Column
  * @validParents ["sqm-rewards-table"]
+ * @exampleGroup Rewards
  */
 export class RewardTableStatusColumn {
   constructor() {

package/dist/collection/components/sqm-rewards-table/sqm-rewards-table.js

@@ -10,6 +10,8 @@ import mockRewardData from "./mockRewardData";
 import { tryMethod, useRewardsTable } from "./useRewardsTable";
 /**
  * @uiName Reward Table
+ * @exampleGroup Rewards
+ * @slots [{"name":"", "title":"Table Row"}]
  */
 export class RewardsTable {
   constructor() {

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

@@ -4,6 +4,8 @@ import { useScroll } from "./useScroll";
 import { createStyleSheet } from "../../styling/JSS";
 /**
  * @uiName Scroll
+ * @exampleGroup Common Components
+ * @slots [{"name":"", "title":"Button Content"}]
  */
 export class Scroll {
   constructor() {

package/dist/collection/components/sqm-share-button/sqm-share-button.js

@@ -7,7 +7,9 @@ import { getProps } from "../../utils/utils";
 import deepmerge from "deepmerge";
 /**
  * @uiName Share Button
+ * @slots [{"name":"", "title":"Button Content"}]
  * @uiOrder ["medium", "program-id", "*", "pill", "disabled", "hideicon"]
+ * @exampleGroup Sharing
  * @example Facebook Share Button - <sqm-share-button medium="facebook">Share on Facebook</sqm-share-button>
  * @example Twitter Share Button - <sqm-share-button medium="twitter">Share via Tweet</sqm-share-button>
  * @example Email Share Button - <sqm-share-button medium="email">Share via Email</sqm-share-button>

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

@@ -7,6 +7,7 @@ import { useShareCode } from "./useShareCode";
 import deepmerge from "deepmerge";
 /**
  * @uiName Share Code
+ * @exampleGroup Referrals
  * @example Share Code - <sqm-share-code tooltip-text="Copied to Clipboard" tooltip-lifespan="1000"></sqm-share-code>
  */
 export class ShareCode {

package/dist/collection/components/sqm-share-link/sqm-share-link.js

@@ -7,6 +7,7 @@ import { getProps } from "../../utils/utils";
 import deepmerge from "deepmerge";
 /**
  * @uiName Share Link
+ * @exampleGroup Referrals
  * @example Share Link - <sqm-share-link tooltip-text="Copied to Clipboard" tooltip-lifespan="1000"></sqm-share-link>
  */
 export class ShareLink {

package/dist/collection/components/sqm-stat-container/sqm-stat-container.js

@@ -5,6 +5,8 @@ import { getProps } from "../../utils/utils";
 /**
  * @uiName Stat Container
  * @slots [{"name":"","title":"Stats"}]
+ * @exampleGroup Statistics
+ * @example Container with Three Stats - <sqm-stat-container space="xxx-large" display="flex"><sqm-big-stat flex-reverse="true" alignment="left" stat-type="/rewardBalance/CREDIT/POINT/value/global">Points Balance</sqm-big-stat><sqm-big-stat flex-reverse="true" alignment="left" stat-type="/integrationRewardsCountFiltered/AVAILABLE/global">Giftcards Earned</sqm-big-stat><sqm-big-stat flex-reverse="true" alignment="left" stat-type="/referralsCount">Referrals</sqm-big-stat></sqm-stat-container>
  */
 export class StatContainer {
   constructor() {

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

@@ -2,7 +2,10 @@ import { Component, h, Prop } from "@stencil/core";
 import { TabView } from "./sqm-tab-view";
 /**
  * @uiName Tab
+ * @slots [{"name":"", "title":"Tab Content"}]
  * @validParents ["sqm-tabs"]
+ * @exampleGroup Layout
+ * @example Tab - <sqm-tab header="Example">This is an example tab. Add your own content here.</sqm-tab>
  */
 export class Tab {
   render() {

package/dist/collection/components/sqm-tabs/Tabs.stories.js

@@ -17,7 +17,8 @@ export const ManyTabs = () => (h("div", { style: { maxWidth: "700px", margin: "a
      <sqm-tabs>
         <sqm-tab header="General">This is the general tab</sqm-tab>
         <sqm-tab header="Custom">This is the custom tab</sqm-tab>
-        <sqm-tab header="Advanced">This is the advanced tab</sqm-tab>        <sqm-tab header="General">This is the general tab</sqm-tab>
+        <sqm-tab header="Advanced">This is the advanced tab</sqm-tab> 
+        <sqm-tab header="General">This is the general tab</sqm-tab>
         <sqm-tab header="Custom">This is the custom tab</sqm-tab>
         <sqm-tab header="Advanced">This is the advanced tab</sqm-tab>
         <sqm-tab header="General">This is the general tab</sqm-tab>

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

@@ -5,6 +5,11 @@ import { TabsView } from "./sqm-tabs-view";
 import { useTabs } from "./useTabs";
 /**
  * @uiName Tab Group
+ * @slots [{"name":"", "title":"Tabs","validChildren":["sqm-tab"]}]
+ * @exampleGroup Layout
+ * @example Generic Tab Group - <sqm-tabs><sqm-tab header="Tab 1">This is the first tab</sqm-tab><sqm-tab header="Tab 2">This is the second tab</sqm-tab><sqm-tab header="Tab 3">This is the third tab</sqm-tab></sqm-tabs>
+ * @example Referral Tab Group - <sqm-tabs><sqm-tab header="Leaderboard"><sqm-leaderboard usersheading="Referrer" statsheading="Referrals" rankheading="Rank" rank-type="rowNumber" leaderboard-type="topStartedReferrers" show-rank anonymous-user="Anonymous User"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/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></sqm-tab><sqm-tab header="Referral history"><sqm-referral-table><sqm-referral-table-user-column column-title="User" anonymous-user="Anonymous User" deleted-user="Deleted User"></sqm-referral-table-user-column><sqm-referral-table-status-column column-title="Referral status" converted-status-text="Converted" in-progress-status-text="In Progress"></sqm-referral-table-status-column><sqm-referral-table-rewards-column column-title="Rewards" expiring-text="Expiring in" fuel-tank-text="Your code is" pending-for-text="{status} for {date}" reward-received-text="Reward received on" status-long-text="{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"></sqm-referral-table-rewards-column><sqm-referral-table-date-column column-title="Date referred" date-shown="dateReferralStarted"></sqm-referral-table-date-column><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png" empty-state-header="View your referral details" empty-state-text="Refer a friend to view the status of your referrals and rewards earned"></sqm-empty></sqm-referral-table></sqm-tab></sqm-tabs>
+ * @example Loyalty Tab Group - <sqm-tabs placement="top"> <sqm-tab header="Leaderboard"> <sqm-leaderboard usersheading="Users" statsheading="Points Earned" rankheading="Rank" rank-type="rowNumber" leaderboard-type="topPointEarners" show-rank anonymous-user="Anonymous User" > <sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_leaderboard2.png" empty-state-header="View your rank in the leaderboard" empty-state-text="Be the first to earn points and reach the top of the leaderboard" ></sqm-empty ></sqm-leaderboard> </sqm-tab> <sqm-tab header="Reward history"> <sqm-rewards-table ><sqm-rewards-table-reward-column available-text="{availableAmount} remaining" column-title="Reward" copy-text="Copied!" redeemed-text="{redeemedAmount} redeemed" > </sqm-rewards-table-reward-column> <sqm-rewards-table-source-column anonymous-user="Anonymous User" column-title="Source" deleted-user="Deleted User" referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}" reward-exchange-text="Reward Exchange" reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}" > </sqm-rewards-table-source-column><sqm-rewards-table-status-column column-title="Status" expiry-text="Expires on " status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"></sqm-rewards-table-status-column><sqm-rewards-table-date-column column-title="Date received" date-shown="dateGiven"></sqm-rewards-table-date-column><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png" empty-state-header="View your rewards" empty-state-text="Refer friends and complete tasks to view the details of your rewards"></sqm-empty></sqm-rewards-table></sqm-tab><sqm-tab header="Redeem"><sqm-reward-exchange-list back-text="Back" button-text="Exchange Rewards" cancel-text="Cancel" choose-amount-title="Select" choose-reward-title="Rewards" confirmation-title="Confirm" continue-text="Continue" continue-to-confirmation-text="Continue to confirmation" done-text="Done" reward-title="Choose a reward" not-available-error="{unavailableReasonCode, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {{sourceValue} required} AVAILABILITY_PREDICATE {Not available} other {{unavailableReasonCode}} }" not-enough-error="Not enough {sourceUnit} to redeem for this reward" query-error="Unable to load reward exchange list. Please try again" redeem-text="Redeem" redeem-title="Confirm and redeem" redemption-error="An error occured trying to redeem this reward. Please try again" redemption-success-text="Redeemed {sourceValue} for {destinationValue}" select-text="Select amount to receive" source-amount-message="{ruleType, select, FIXED_GLOBAL_REWARD {{sourceValue}} other {{sourceMinValue} to {sourceMaxValue}}}" tooltiptext="Copied" reward-name-title="Reward" reward-amount-title="Reward Amount" cost-title="Cost to Redeem" reward-redeemed-text="Reward redeemed" skeleton-card-num="8" promo-code="Promo Code" tooltip-text="Copied!"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_exchange2.png" empty-state-header="Redeem rewards" empty-state-text="Use your points to redeem rewards once they become available"></sqm-empty></sqm-reward-exchange-list></sqm-tab></sqm-tabs>
  */
 export class Tabs {
   constructor() {

package/dist/collection/components/sqm-task-card/sqm-task-card.js

@@ -10,6 +10,7 @@ import { useTaskCard } from "./useTaskCard";
 /**
  * @uiName Task Card
  * @uiOrder ["reward-amount", "reward-unit", "card-title", "description", "repeatable", "finite", "show-progress-bar", "stat-type", "progress-source", "goal", "steps", "progress-bar-unit", "show-expiry", "reward-duration", "button-text", "button-link", "open-new-tab", "ended-message", "expiry-message", "starts-on-message", "event-key", "*"]
+ * @exampleGroup Rewards
  */
 export class TaskCard {
   constructor() {

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

@@ -49,6 +49,13 @@ const vanillaStyle = `
 `;
 /**
  * @uiName Text
+ * @slots [{"name":"", "title":"Text"}]
+ * @exampleGroup Typography
+ * @example H1 - <sqm-text><h1>H1 Header Text</h1></sqm-text>
+ * @example H2 - <sqm-text><h2>H2 Header Text</h2></sqm-text>
+ * @example H3 - <sqm-text><h3>H3 Header Text</h3></sqm-text>
+ * @example H4 - <sqm-text><h4>H4 Header Text</h4></sqm-text>
+ * @example Paragraph - <sqm-text><p>Paragraph Text</p></sqm-text>
  */
 export class Text {
   constructor() {

package/dist/collection/components/sqm-timeline/sqm-timeline-entry.js

@@ -6,6 +6,7 @@ import { TimelineEntryView } from "./sqm-timeline-entry-view";
 /**
  * @uiName Timeline Entry
  * @validParents ["sqm-timeline"]
+ * @exampleGroup Common Components
  * @example Timeline Entry - <sqm-timeline-entry reward="$50" unit="visa giftcard" desc="You refer a friend" icon="circle" > </sqm-timeline-entry>
  */
 export class TimelineReward {

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

@@ -4,6 +4,7 @@ import { useChildElements } from "../../tables/useChildElements";
 /**
  * @uiName Program Timeline
  * @slots [{"name":"","title":"Timeline","validChildren":["sqm-timeline-entry"]}]
+ * @exampleGroup Common Components
  * @examples Program Timeline - <sqm-timeline icon="circle"> <sqm-timeline-entry reward="$50" unit="visa giftcard" desc="You refer a friend" icon="circle" > </sqm-timeline-entry> <sqm-timeline-entry reward="$200" unit="visa giftcard" desc="Our sales team qualifies your friend as a good fit for our Enterprise plan" icon="circle" > </sqm-timeline-entry> <sqm-timeline-entry reward="$1000" unit="visa giftcard" desc="Your friend purchases an Enterprise plan" icon="circle" > </sqm-timeline-entry></sqm-timeline>
 */
 export class Timeline {

package/dist/collection/components/sqm-titled-section/sqm-titled-section.js

@@ -4,6 +4,8 @@ import { getProps } from "../../utils/utils";
 import { PortalSectionView } from "./sqm-portal-section-view";
 /**
  * @uiName Titled Section
+ * @slots [{"name":"label", "title":"Label"},{"name":"content", "title":"Content"}]
+ * @exampleGroup Layout
  */
 export class TitledSection {
   constructor() {

package/dist/collection/components/sqm-user-name/sqm-user-name.js

@@ -6,6 +6,8 @@ import { UserNameView } from "./sqm-user-name-view";
 import { useUserName } from "./useUserName";
 /**
  * @uiName User Name
+ * @exampleGroup Common Components
+ * @example User Name Display - <sqm-user-name fallback="Anonymous User"></sqm-user-name>
  */
 export class UserName {
   constructor() {

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

@@ -12368,7 +12368,8 @@ const ManyTabs = () => (h("div", { style: { maxWidth: "700px", margin: "auto" },
      <sqm-tabs>
         <sqm-tab header="General">This is the general tab</sqm-tab>
         <sqm-tab header="Custom">This is the custom tab</sqm-tab>
-        <sqm-tab header="Advanced">This is the advanced tab</sqm-tab>        <sqm-tab header="General">This is the general tab</sqm-tab>
+        <sqm-tab header="Advanced">This is the advanced tab</sqm-tab> 
+        <sqm-tab header="General">This is the general tab</sqm-tab>
         <sqm-tab header="Custom">This is the custom tab</sqm-tab>
         <sqm-tab header="Advanced">This is the advanced tab</sqm-tab>
         <sqm-tab header="General">This is the general tab</sqm-tab>