@saasquatch/mint-components 1.5.0-113 → 1.5.0-117

package/dist/cjs/sqm-text-span-view-c54af22c.js

@@ -0,0 +1,59 @@
+'use strict';
+
+const index = require('./index-b0129cd6.js');
+const JSS = require('./JSS-c65a40f1.js');
+
+const style = {
+  p: {
+    "font-size": "var(--sl-font-size-small)",
+    "font-weight": "400",
+    color: "var(--sl-color-gray-800)",
+    margin: "0",
+  },
+  subtext: {
+    "font-size": "var(--sl-font-size-x-small)",
+    "font-weight": "400",
+    color: "var(--sl-color-gray-600)",
+    margin: "0",
+  },
+  h1: {
+    "font-size": "var(--sl-font-size-xx-large)",
+    "font-weight": "600",
+    color: "var(--sl-color-gray-800)",
+    margin: "0",
+  },
+  h2: {
+    "font-size": "var(--sl-font-size-x-large)",
+    "font-weight": "600",
+    color: "var(--sl-color-gray-800)",
+    margin: "0",
+  },
+  h3: {
+    "font-size": "var(--sl-font-size-large)",
+    "font-weight": "600",
+    color: "var(--sl-color-gray-800)",
+    margin: "0",
+  },
+  h4: {
+    "font-size": "13px",
+    "font-weight": "600",
+    color: "var(--sl-color-gray-800)",
+    margin: "0",
+  },
+};
+const sheet = JSS.createStyleSheet(style);
+const styleString = sheet.toString();
+const vanillaStyle = `
+    sqm-text-span {
+      display: inline;
+    }
+  `;
+function TextSpanView(props, children) {
+  return (index.h("span", { class: sheet.classes[props.type] },
+    index.h("style", { type: "text/css" },
+      vanillaStyle,
+      styleString),
+    children));
+}
+
+exports.TextSpanView = TextSpanView;

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

@@ -6,7 +6,7 @@ const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
 require('./extends-08099afd.js');
 require('./JSS-c65a40f1.js');
-const sqmTextSpanView = require('./sqm-text-span-view-f101dedf.js');
+const sqmTextSpanView = require('./sqm-text-span-view-c54af22c.js');
 
 const Text = class {
   constructor(hostRef) {

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

@@ -30,8 +30,8 @@ function setupGraphQL() {
     };
   }, []);
 }
-const View = (statType, format) => {
-  console.log(`View("${statType}") - CALLED`);
+const View = (statType, format, label) => {
+  //   console.log(`View("${statType}") - CALLED`);
   setupGraphQL();
   return (h("div", null,
     h("b", null, "Stat format:"),
@@ -40,7 +40,7 @@ const View = (statType, format) => {
     h("b", null, "Stat selected:"),
     " ",
     h("pre", { style: { color: "green" } }, statType),
-    h("sqm-big-stat", { "stat-type": statType })));
+    h("sqm-big-stat", { "stat-type": statType }, label)));
 };
 const DemoView = () => {
   const [type, setType] = useState("/someRandomThing/with/someArguments/1234");
@@ -99,3 +99,15 @@ export const ProgramGoals = createHookStory(() => {
 export const CustomField = createHookStory(() => {
   return View(`/customFields/thingCount`, "/(customFields)/:customField");
 });
+export const CustomFieldWithLabel = createHookStory(() => {
+  return View(`/customFields/thingCount`, "/(customFields)/:customField", h("sqm-text", null, "Thing Count"));
+});
+export const CustomFieldWithEmptyLabel = createHookStory(() => {
+  return View(`/customFields/thingCount`, "/(customFields)/:customField", "   ");
+});
+export const CustomFieldWithEmptySpaceLabel = createHookStory(() => {
+  return View(`/customFields/thingCount`, "/(customFields)/:customField", "\n   ");
+});
+export const CustomFieldWithTextLabel = createHookStory(() => {
+  return View(`/customFields/thingCount`, "/(customFields)/:customField", "Thing Count");
+});

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

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
 export function BigStatView(props) {
   const { statvalue, flexReverse, alignment } = props;
+  // Dependent on props, not feasiable to move out
   const style = {
     Container: {
       display: "flex",

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

@@ -3,8 +3,7 @@ import { withHooks } from "@saasquatch/stencil-hooks";
 import { BigStatView } from "./sqm-big-stat-view";
 import { useBigStat } from "./useBigStat";
 import { useDemoBigStat } from "./useDemoBigStat";
-import { isDemo } from "@saasquatch/component-boilerplate";
-import { useChildElements } from "../../tables/useChildElements";
+import { isDemo, useHost } from "@saasquatch/component-boilerplate";
 /**
  *
  * @uiName Big Stat
@@ -23,7 +22,8 @@ export class BigStat {
   render() {
     var _a;
     const { props, label } = isDemo() ? useDemoBigStat(this) : useBigStat(this);
-    const hasLabel = (_a = useChildElements()) === null || _a === void 0 ? void 0 : _a.length;
+    const host = useHost();
+    const hasLabel = !!((_a = host.innerHTML) === null || _a === void 0 ? void 0 : _a.trim());
     const labelSlot = h("slot", { name: "label" }, hasLabel ? h("slot", null) : label);
     return h(BigStatView, Object.assign({}, props, { labelSlot: labelSlot }));
   }

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

@@ -38,7 +38,7 @@ _, status) => {
     `, { queryFilter }, (res) => {
     var _a, _b, _c, _d, _e, _f, _g;
     return ({
-      value: (_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.referrals) === null || _c === void 0 ? void 0 : _c.totalCount,
+      value: ((_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.referrals) === null || _c === void 0 ? void 0 : _c.totalCount) || 0,
       statvalue: (_g = (_f = (_e = (_d = res.data) === null || _d === void 0 ? void 0 : _d.viewer) === null || _e === void 0 ? void 0 : _e.referrals) === null || _f === void 0 ? void 0 : _f.totalCount) === null || _g === void 0 ? void 0 : _g.toString(),
     });
   });

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

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
 export function CardFeedView(props, children) {
+  // Dependent on props, not feasiable to move out
   const style = {
     Container: {
       columnGap: props.gap + "px",

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

@@ -54,6 +54,7 @@ export function HeroView(props) {
       return "5%";
     }
   };
+  // Dependent on props, not feasiable to move out
   const style = {
     TwoColumnContainer: {
       display: "flex",

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

@@ -3,6 +3,7 @@ import { createStyleSheet } from "../../styling/JSS";
 export function HeroImageView(props, children) {
   const overlay = Boolean((props.header || props.description || props.buttonText) &&
     props.layout === "overlay");
+  // Dependent on props, not feasiable to move out
   const style = {
     Container: {
       position: "relative",
@@ -33,10 +34,17 @@ export function HeroImageView(props, children) {
     },
     Overlay: {
       zIndex: "1",
-      padding: "var(--sl-spacing-" + props.paddingText + ")",
+      padding: "calc(var(--sl-spacing-" +
+        props.paddingText +
+        ") + var(--sl-spacing-" +
+        props.paddingImage +
+        "))",
       textAlign: "center",
       color: props.textColor || "var(--sl-color-neutral-0)",
       lineHeight: "var(--sl-line-height-dense)",
+      "@media (max-width: 599px)": {
+        padding: "var(--sl-spacing-" + props.paddingText + ")",
+      },
     },
     Column: {
       display: "flex",
@@ -48,7 +56,6 @@ export function HeroImageView(props, children) {
         width: props.imagePercentage ? props.imagePercentage + "%" : "50%",
         padding: "var(--sl-spacing-" + props.paddingImage + ")",
         boxSizing: "border-box",
-        // margin: props.maxHeight ? "auto" : "",
         "@media (max-width: 599px)": {
           width: "100%",
         },

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

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
 export function ImageView(props) {
+  // Dependent on props, not feasiable to move out
   const style = {
     Container: {
       display: "flex",

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

@@ -64,7 +64,7 @@ const View = (overrideProps) => {
     ...overrideProps,
   };
   const { leaderboardType, rankType } = props;
-  console.log(`View("${leaderboardType}") - CALLED`, { ...props });
+  //   console.log(`View("${leaderboardType}") - CALLED`, { ...props });
   return (h("div", { style: { marginBottom: "20px" } },
     h("sqm-divided-layout", { direction: "row" },
       h("div", { style: { padding: "10px" } },
@@ -146,7 +146,7 @@ export const DemoHookEmpty = createHookStory(() => {
           anonymousUser: "Anonymous User",
           showRank: 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

@@ -52,10 +52,6 @@ export function LeaderboardView(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
   const { states, data, elements } = props;
   const { styles } = states;
-  console.log("LEADER", props);
-  console.log(styles);
-  console.log("hideViewer", styles.hideViewer);
-  console.log(!styles.hideViewer);
   if (states.loading)
     return (h("div", { class: sheet.classes.Leaderboard },
       h("style", { type: "text/css" },
@@ -91,7 +87,6 @@ export function LeaderboardView(props) {
           h("td", { class: "Score" }, user.value)));
       }),
       !userSeenFlag && !styles.hideViewer && (h("tr", null,
-        console.log("res", !userSeenFlag && !styles.hideViewer),
         h("td", { colSpan: 100, class: "ellipses" },
           h("sl-icon", { name: "three-dots", style: { verticalAlign: "middle" } })))),
       !userSeenFlag && !styles.hideViewer && (h("tr", { class: "highlight" },

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

@@ -45,3 +45,75 @@ export const FullWidth = () => (h("div", { style: { width: "1000px", border: "1p
     h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
     h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
     h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
+export const SpaceBetween = () => {
+  return (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
+    h("sqm-portal-container", { center: true, direction: "row", display: "flex", "justify-content": "space-between" },
+      h("sqm-stat-container", { space: "xxx-large", display: "flex" },
+        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardsRedeemed/CREDIT/global" },
+          h("sqm-text", null,
+            h("p", null, "Rewards Redeemed"))),
+        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardBalance/CREDIT/POINT/value/global" },
+          h("sqm-text", null,
+            h("p", null, "Points Balance")))),
+      h("sqm-scroll", { "scroll-id": "tab-2", outline: true, "button-type": "primary", "button-text": "Redeem your rewards", mobile: true }))));
+};
+export const SpaceAround = () => {
+  return (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
+    h("sqm-portal-container", { center: true, direction: "row", display: "flex", "justify-content": "space-around" },
+      h("sqm-stat-container", { space: "xxx-large", display: "flex" },
+        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardsRedeemed/CREDIT/global" },
+          h("sqm-text", null,
+            h("p", null, "Rewards Redeemed"))),
+        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardBalance/CREDIT/POINT/value/global" },
+          h("sqm-text", null,
+            h("p", null, "Points Balance")))),
+      h("sqm-scroll", { "scroll-id": "tab-2", outline: true, "button-type": "primary", "button-text": "Redeem your rewards", mobile: true }))));
+};
+export const SpaceEvenly = () => {
+  return (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
+    h("sqm-portal-container", { center: true, direction: "row", display: "flex", "justify-content": "space-evenly" },
+      h("sqm-stat-container", { space: "xxx-large", display: "flex" },
+        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardsRedeemed/CREDIT/global" },
+          h("sqm-text", null,
+            h("p", null, "Rewards Redeemed"))),
+        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardBalance/CREDIT/POINT/value/global" },
+          h("sqm-text", null,
+            h("p", null, "Points Balance")))),
+      h("sqm-scroll", { "scroll-id": "tab-2", outline: true, "button-type": "primary", "button-text": "Redeem your rewards", mobile: true }))));
+};
+export const Start = () => {
+  return (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
+    h("sqm-portal-container", { center: true, direction: "row", display: "flex", "justify-content": "start" },
+      h("sqm-stat-container", { space: "xxx-large", display: "flex" },
+        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardsRedeemed/CREDIT/global" },
+          h("sqm-text", null,
+            h("p", null, "Rewards Redeemed"))),
+        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardBalance/CREDIT/POINT/value/global" },
+          h("sqm-text", null,
+            h("p", null, "Points Balance")))),
+      h("sqm-scroll", { "scroll-id": "tab-2", outline: true, "button-type": "primary", "button-text": "Redeem your rewards", mobile: true }))));
+};
+export const Center = () => {
+  return (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
+    h("sqm-portal-container", { center: true, direction: "row", display: "flex", "justify-content": "center" },
+      h("sqm-stat-container", { space: "xxx-large", display: "flex" },
+        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardsRedeemed/CREDIT/global" },
+          h("sqm-text", null,
+            h("p", null, "Rewards Redeemed"))),
+        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardBalance/CREDIT/POINT/value/global" },
+          h("sqm-text", null,
+            h("p", null, "Points Balance")))),
+      h("sqm-scroll", { "scroll-id": "tab-2", outline: true, "button-type": "primary", "button-text": "Redeem your rewards", mobile: true }))));
+};
+export const End = () => {
+  return (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
+    h("sqm-portal-container", { center: true, direction: "row", display: "flex", "justify-content": "end" },
+      h("sqm-stat-container", { space: "xxx-large", display: "flex" },
+        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardsRedeemed/CREDIT/global" },
+          h("sqm-text", null,
+            h("p", null, "Rewards Redeemed"))),
+        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardBalance/CREDIT/POINT/value/global" },
+          h("sqm-text", null,
+            h("p", null, "Points Balance")))),
+      h("sqm-scroll", { "scroll-id": "tab-2", outline: true, "button-type": "primary", "button-text": "Redeem your rewards", mobile: true }))));
+};

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

@@ -10,8 +10,9 @@ export function PortalContainerView(props, children) {
         : "100%",
       "grid-gap": `var(--sl-spacing-${props.gap})`,
       padding: props.padding === "none" ? "0" : `var(--sl-spacing-${props.padding})`,
-      maxWidth: props.maxWidth ? props.maxWidth : "",
+      maxWidth: props.maxWidth,
       margin: props.center && "auto",
+      justifyContent: props.justifyContent,
     },
   };
   const vanillaStyle = `

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

@@ -177,6 +177,32 @@ export class PortalContainer {
       "reflect": false,
       "defaultValue": "\"grid\""
     },
+    "justifyContent": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "| \"start\"\r\n    | \"center\"\r\n    | \"end\"\r\n    | \"space-between\"\r\n    | \"space-around\"\r\n    | \"space-evenly\"",
+        "resolved": "\"center\" | \"end\" | \"space-around\" | \"space-between\" | \"space-evenly\" | \"start\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Justify content",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"start\", \"center\", \"end\", \"space-between\", \"space-around\", \"space-evenly\"]",
+            "name": "uiEnum"
+          }],
+        "text": ""
+      },
+      "attribute": "justify-content",
+      "reflect": false
+    },
     "maxWidth": {
       "type": "string",
       "mutable": false,

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

@@ -1,54 +1,56 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
-export function ReferralCardView(props) {
-  const style = {
-    Container: {
-      display: "flex",
-      color: "var(--sl-color-neutral-900)",
-      background: "var(--sl-color-neutral-0)",
-      "& .left": {
-        boxSizing: "border-box",
-        width: "50%",
-        padding: "var(--sl-spacing-large)",
-        paddingRight: "var(--sl-spacing-medium)",
-        alignSelf: props.verticalAlignment,
-        "@media (max-width: 499px)": {
-          width: "100%",
-          padding: "0",
-          marginBottom: "var(--sl-spacing-xx-large)",
-        },
-      },
-      "& .right": {
-        boxSizing: "border-box",
-        width: "50%",
-        padding: "var(--sl-spacing-large)",
-        paddingLeft: "var(--sl-spacing-medium)",
-        alignSelf: props.verticalAlignment,
-        "@media (max-width: 499px)": {
-          width: "100%",
-          padding: "0",
-        },
+const style = {
+  Container: {
+    display: "flex",
+    color: "var(--sl-color-neutral-900)",
+    background: "var(--sl-color-neutral-0)",
+    "& .left": {
+      boxSizing: "border-box",
+      width: "50%",
+      padding: "var(--sl-spacing-large)",
+      paddingRight: "var(--sl-spacing-medium)",
+      "@media (max-width: 499px)": {
+        width: "100%",
+        padding: "0",
+        marginBottom: "var(--sl-spacing-xx-large)",
       },
-      border: "1px solid var(--sl-color-neutral-300)",
-      borderRadius: "var(--sl-border-radius-large)",
+    },
+    "& .right": {
+      boxSizing: "border-box",
+      width: "50%",
+      padding: "var(--sl-spacing-large)",
+      paddingLeft: "var(--sl-spacing-medium)",
       "@media (max-width: 499px)": {
-        flexDirection: "column",
-        border: "none",
+        width: "100%",
+        padding: "0",
       },
     },
-  };
-  const sheet = createStyleSheet(style);
-  const styleString = sheet.toString();
-  const vanillaStyle = `
+    border: "1px solid var(--sl-color-neutral-300)",
+    borderRadius: "var(--sl-border-radius-large)",
+    "@media (max-width: 499px)": {
+      flexDirection: "column",
+      border: "none",
+    },
+  },
+};
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+const vanillaStyle = `
     :host{
       display: block;   
     }
   `;
+export function ReferralCardView(props) {
   return (h("div", null,
     h("style", { type: "text/css" },
       styleString,
       vanillaStyle),
     h("div", { class: sheet.classes.Container },
-      h("div", { class: "left" }, props.slots.left),
-      h("div", { class: "right" }, props.slots.right))));
+      h("div", { class: "left", style: {
+          alignSelf: props.verticalAlignment,
+        } }, props.slots.left),
+      h("div", { class: "right", style: {
+          alignSelf: props.verticalAlignment,
+        } }, props.slots.right))));
 }

package/dist/collection/components/sqm-referral-iframe/sqm-referral-iframe-view.js

@@ -3,6 +3,7 @@ import { createStyleSheet } from "../../styling/JSS";
 export function ReferralIframeView(props) {
   const { states, data } = props;
   const { content } = states;
+  // dependent on props
   const style = {
     Container: {
       position: "relative",

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

@@ -488,7 +488,7 @@ export const FullRewardsTable = () => {
           prevLabel: "Prev",
           moreLabel: "View More",
         },
-        hiddenColumns: "",
+        hiddenColumns: "1",
         mdBreakpoint: 899,
         smBreakpoint: 599,
       },

package/dist/collection/components/sqm-referral-table/cells/sqm-referral-table-rewards-cell.js

@@ -116,7 +116,6 @@ export class ReferralTableRewardsCell {
       }, {
         status: state,
       });
-      const rid = Math.random().toString(36).slice(2);
       return (h("sl-details", { class: sheet.classes.Details, disabled: this.hideDetails },
         h("style", { type: "text/css" }, styleString),
         h("div", { slot: "summary", class: sheet.classes.DetailsContainer },

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

@@ -53,7 +53,16 @@ export class ReferralTableRewardsColumn {
     return (h("sqm-referral-table-rewards-cell", { rewards: data.rewards }));
   }
   render() {
-    useRequestRerender([this.columnTitle]);
+    useRequestRerender([
+      this.columnTitle,
+      this.statusText,
+      this.statusLongText,
+      this.fuelTankText,
+      this.rewardReceivedText,
+      this.expiringText,
+      this.pendingForText,
+      this.hideDetails,
+    ]);
     return h(Host, { style: { display: "none" } });
   }
   static get is() { return "sqm-referral-table-rewards-column"; }

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

@@ -39,7 +39,11 @@ export class ReferralTableStatusColumn {
     return (h("sqm-referral-table-status-cell", { "status-text": statusText, converted: data.dateConverted ? true : false }));
   }
   render() {
-    useRequestRerender([this.columnTitle]);
+    useRequestRerender([
+      this.columnTitle,
+      this.convertedStatusText,
+      this.inProgressStatusText,
+    ]);
     return h(Host, { style: { display: "none" } });
   }
   static get is() { return "sqm-referral-table-status-column"; }

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

@@ -23,11 +23,14 @@ export class ReferralTable {
     this.moreLabel = "Next";
     /** @uiName Show Referred by user in table  */
     this.showReferrer = false;
-    /** @uiName Hide Column Labels (Mobile View)  */
+    /*
+     * Provide the column numbers (0 indexed) that should not be displayed in mobile views. Ex. 0,2,3
+     *
+     *  @uiName Mobile Hidden Columns  */
     this.hiddenColumns = "0";
-    /** @uiName Small Breakpoint (Mobile View)  */
+    /** @uiName Mobile Breakpoint  */
     this.smBreakpoint = 634;
-    /** @uiName Medium Breakpoint (Mobile View)  */
+    /** @uiName Tablet Breakpoint  */
     this.mdBreakpoint = 899;
     withHooks(this);
   }
@@ -180,10 +183,7 @@ export class ReferralTable {
       "required": false,
       "optional": true,
       "docs": {
-        "tags": [{
-            "text": "Hide Column Labels (Mobile View)",
-            "name": "uiName"
-          }],
+        "tags": [],
         "text": ""
       },
       "attribute": "hidden-columns",
@@ -202,7 +202,7 @@ export class ReferralTable {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Small Breakpoint (Mobile View)",
+            "text": "Mobile Breakpoint",
             "name": "uiName"
           }],
         "text": ""
@@ -223,7 +223,7 @@ export class ReferralTable {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Medium Breakpoint (Mobile View)",
+            "text": "Tablet Breakpoint",
             "name": "uiName"
           }],
         "text": ""
@@ -266,7 +266,7 @@ export class ReferralTable {
 }
 function EmptySlot() {
   return (h("slot", { name: "empty" },
-    h("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": "Track the status of your referrals and rewards earned by referring friends" })));
+    h("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" })));
 }
 function LoadingSlot() {
   return (h("slot", { name: "loading" },
@@ -354,6 +354,8 @@ function useReferralTableDemo(props, emptyElement, loadingElement) {
         moreLabel: props.moreLabel,
       },
       referralData: [],
+      mdBreakpoint: 899,
+      smBreakpoint: 599,
     },
     elements: {
       columns: content.columns,

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

@@ -17,7 +17,7 @@ const baseResponse = (data, stage = "chooseReward", selectedItem = null, selecte
         redeemTitle: "Confirm and redeem",
         redemptionSuccessText: "Redeemed {sourceValue} for {destinationValue}",
         doneText: "Done",
-        tooltiptext: "Copied!",
+        tooltipText: "Copied!",
         selectText: "Select amount to receive",
         sourceAmountMessage: "{ruleType, select, FIXED_GLOBAL_REWARD {{sourceValue}} other {{sourceMinValue} to {sourceMaxValue}}}",
         rewardRedeemedText: "Reward redeemed",

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

@@ -538,7 +538,7 @@ export function RewardExchangeView(props) {
       })),
       (data === null || data === void 0 ? void 0 : data.fuelTankCode) && (h("div", { class: "promo" },
         states.content.text.promoCode,
-        h(ShareLinkView, { shareString: data.fuelTankCode, tooltiptext: (_f = states === null || states === void 0 ? void 0 : states.content) === null || _f === void 0 ? void 0 : _f.text.tooltiptext, open: states.open, onClick: callbacks.copyFuelTankCode }))),
+        h(ShareLinkView, { shareString: data.fuelTankCode, tooltipText: (_f = states === null || states === void 0 ? void 0 : states.content) === null || _f === void 0 ? void 0 : _f.text.tooltipText, open: states.open, onClick: callbacks.copyFuelTankCode }))),
       h("div", { class: sheet.classes.Button },
         h("sl-button", { class: "continue center", type: "primary", size: "large", onClick: () => callbacks.resetState(true) }, states.content.text.doneText))));
   }