@saasquatch/mint-components 1.5.0-69 → 1.5.0-72

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

@@ -21,6 +21,7 @@ const rewardsData = {
   prettyAvailableNumber: "19",
   prettyRedeemedNumber: "0",
   statuses: ["AVAILABLE"],
+  pendingReasons: null,
   globalRewardKey: null,
   rewardSource: "MANUAL",
   prettyRedeemedCredit: "0 Points",
@@ -33,7 +34,7 @@ const rewardsData = {
   },
 };
 export const RewardsCellCreditFull = () => {
-  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData }, availableText: "19 Points remaining" }));
+  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData }, availableText: "19 Points available" }));
 };
 const partial = {
   prettyAvailableValue: "10 Points",
@@ -42,7 +43,7 @@ const partial = {
   dateRedeemed: 1640038417468,
 };
 export const RewardsCellCreditPartial = () => {
-  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...partial }, availableText: "10 Points remaining" }));
+  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...partial }, availableText: "10 Points available" }));
 };
 const empty = {
   prettyAvailableValue: "0 Points",
@@ -51,7 +52,7 @@ const empty = {
   dateRedeemed: 1640038417468,
 };
 export const RewardsCellCreditEmpty = () => {
-  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...empty }, availableText: "0 Points remaining" }));
+  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...empty }, availableText: "0 Points available" }));
 };
 const singleRedeemed = {
   prettyValue: "1 Points",
@@ -66,7 +67,11 @@ export const RewardsCellSingleRedeemed = () => {
   return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...singleRedeemed } }));
 };
 export const RewardsCellNonCredit = () => {
-  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, type: "FUELTANK", prettyValue: "SaaSquatch Giftcard" } }));
+  return (h("sqm-rewards-table-reward-cell", { reward: {
+      ...rewardsData,
+      type: "FUELTANK",
+      prettyValue: "SaaSquatch Giftcard",
+    } }));
 };
 export const SourceCellText = () => {
   return (h("sqm-rewards-table-source-cell", { reward: rewardsData, rewardSourceText: "Manual" }));
@@ -133,6 +138,13 @@ export const SourceCellReferral = () => {
 export const SourceCellReferred = () => {
   return (h("sqm-rewards-table-source-cell", { reward: { ...rewardsData, ...referred(johnDoe) }, referralText: "Referred by" }));
 };
+export const SourceCellProgram = () => {
+  return (h("sqm-rewards-table-source-cell", { reward: {
+      ...rewardsData,
+      rewardSource: "AUTOMATED",
+      program: { name: "Stencil Loyalty Program" },
+    }, rewardSourceText: "{rewardSource, select, MANUAL {Manual} AUTOMATED {{programId}} other {}}" }));
+};
 export const SourceCellAnonymousUser = () => {
   return (h("sqm-rewards-table-source-cell", { reward: { ...rewardsData, ...referral(anon) }, referralText: "Referral to", anonymousUserText: "Anonymous User" }));
 };
@@ -172,9 +184,28 @@ export const StatusCellExpired = () => {
 const pending = {
   statuses: ["PENDING"],
 };
+const us_tax = {
+  pendingReasons: ["US_TAX"],
+};
+const scheduled = {
+  pendingReasons: ["SCHEDULED"],
+  dateScheduledFor: 1640038417468,
+};
+const unhandled = {
+  pendingReasons: ["UNHANDLED_ERROR"],
+};
 export const StatusCellPending = () => {
   return (h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: { ...rewardsData, ...pending } }));
 };
+export const StatusCellPendingUsTax = () => {
+  return (h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: { ...rewardsData, ...pending, ...us_tax } }));
+};
+export const StatusCellPendingScheduled = () => {
+  return (h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: { ...rewardsData, ...pending, ...scheduled } }));
+};
+export const StatusCellPendingUnhandled = () => {
+  return (h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: { ...rewardsData, ...pending, ...unhandled } }));
+};
 export const DateCell = () => {
   return (h("sqm-rewards-table-date-cell", { date: 1640038417468 }));
 };

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

@@ -7,11 +7,13 @@ export class RewardTableSourceCell {
   render() {
     intl.locale = this.locale;
     const RewardSource = ({ reward }) => {
+      var _a;
       return (h("span", null, intl.formatMessage({
         id: "rewardSourceText",
         defaultMessage: this.rewardSourceText,
       }, {
         rewardSource: reward.rewardSource,
+        programId: (_a = reward === null || reward === void 0 ? void 0 : reward.program) === null || _a === void 0 ? void 0 : _a.name,
       })));
     };
     const SOURCE_COLUMN_LENGTH = 21;
@@ -57,7 +59,9 @@ export class RewardTableSourceCell {
       }, {
         rewardSource: this.reward.rewardSource,
       })),
-      h("div", null, this.reward.rewardSource == "FRIEND_SIGNUP" ? getFullName(this.reward.referral.referredUser) : getFullName(this.reward.referral.referrerUser)))) : this.reward.exchangedRewardRedemptionTransaction ? (h(RewardExchangeBadge, { reward: this.reward })) : (h(RewardSource, { reward: this.reward }));
+      h("div", null, this.reward.rewardSource == "FRIEND_SIGNUP"
+        ? getFullName(this.reward.referral.referredUser)
+        : getFullName(this.reward.referral.referrerUser)))) : this.reward.exchangedRewardRedemptionTransaction ? (h(RewardExchangeBadge, { reward: this.reward })) : (h(RewardSource, { reward: this.reward }));
     return h(Source, null);
   }
   static get is() { return "sqm-rewards-table-source-cell"; }

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

@@ -5,7 +5,11 @@ import { createStyleSheet } from "../../../styling/JSS";
 import { luxonLocale } from "../../../utils/utils";
 export class RewardTableStatusCell {
   constructor() {
+    this.expiryText = "Expires";
     this.locale = "en";
+    this.pendingUsTax = "W-9 required";
+    this.pendingScheduled = "Until";
+    this.pendingUnhandled = "Fulfillment error";
   }
   rewardStatus(reward) {
     if (reward.dateCancelled)
@@ -77,12 +81,28 @@ export class RewardTableStatusCell {
       `${rewardStatus === "AVAILABLE" && this.reward.dateExpires
         ? this.expiryText + " "
         : ""}${(_a = DateTime.fromMillis(dateShown)) === null || _a === void 0 ? void 0 : _a.setLocale(luxonLocale(luxonLocale(this.locale))).toLocaleString(DateTime.DATE_MED)}`;
+    const pendingReasons = rewardStatus === "PENDING" ? getRewardPendingReasons(this) : null;
+    console.log(pendingReasons);
     return (h("div", { style: { display: "contents" } },
       h("style", { type: "text/css" }, styleString),
       h("sl-badge", { type: badgeType, pill: true, class: rewardStatus === "REDEEMED"
           ? sheet.classes.RedeemBadge
           : sheet.classes.Badge }, statusText),
-      h("p", { class: sheet.classes.Date }, date)));
+      h("p", { class: sheet.classes.Date }, pendingReasons || date)));
+    function getRewardPendingReasons(prop) {
+      var _a;
+      console.log(prop.reward);
+      const pendingCodeMap = {
+        US_TAX: prop.pendingUsTax,
+        SCHEDULED: prop.reward.dateScheduledFor &&
+          prop.pendingScheduled +
+            " " + ((_a = DateTime.fromMillis(prop.reward.dateScheduledFor)) === null || _a === void 0 ? void 0 : _a.setLocale(luxonLocale(luxonLocale(prop.locale))).toLocaleString(DateTime.DATE_MED)),
+        UNHANDLED_ERROR: prop.pendingUnhandled,
+      };
+      return prop.reward.pendingReasons
+        .map((s) => { var _a; return (_a = pendingCodeMap[s]) !== null && _a !== void 0 ? _a : s; })
+        .join(", ");
+    }
   }
   static get is() { return "sqm-rewards-table-status-cell"; }
   static get encapsulation() { return "shadow"; }
@@ -138,7 +158,8 @@ export class RewardTableStatusCell {
         "text": ""
       },
       "attribute": "expiry-text",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "\"Expires\""
     },
     "locale": {
       "type": "string",
@@ -157,6 +178,60 @@ export class RewardTableStatusCell {
       "attribute": "locale",
       "reflect": false,
       "defaultValue": "\"en\""
+    },
+    "pendingUsTax": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "pending-us-tax",
+      "reflect": false,
+      "defaultValue": "\"W-9 required\""
+    },
+    "pendingScheduled": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "pending-scheduled",
+      "reflect": false,
+      "defaultValue": "\"Until\""
+    },
+    "pendingUnhandled": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "pending-unhandled",
+      "reflect": false,
+      "defaultValue": "\"Fulfillment error\""
     }
   }; }
 }

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

@@ -31,7 +31,7 @@ export class RewardTableUserColumn {
     /**
      * @uiName Reward Source Text
      */
-    this.rewardSourceText = "{rewardSource, select, MANUAL {Manual} AUTOMATED {Automated} other {}}";
+    this.rewardSourceText = "{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -176,7 +176,7 @@ export class RewardTableUserColumn {
       },
       "attribute": "reward-source-text",
       "reflect": false,
-      "defaultValue": "\"{rewardSource, select, MANUAL {Manual} AUTOMATED {Automated} other {}}\""
+      "defaultValue": "\"{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}\""
     }
   }; }
   static get methods() { return {

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

@@ -24,16 +24,16 @@ export class RewardsTable {
     /** @uiName Hide Columns (Mobile View)  */
     this.mdBreakpoint = 899;
     /** @uiName Empty State Image Link  */
-    this.emptyStateImgUrl = "https://res.cloudinary.com/saasquatch/image/upload/v1642618031/squatch-assets/image_4_1.png";
+    this.emptyStateImage = "https://res.cloudinary.com/saasquatch/image/upload/v1642618031/squatch-assets/image_4_1.png";
     /** @uiName Empty State Title  */
-    this.emptyStateTitle = "View your rewards";
+    this.emptyStateHeader = "View your rewards";
     /** @uiName Empty State Text  */
     this.emptyStateText = "See all the rewards you have earned from referring friends and completing tasks";
     withHooks(this);
   }
   disconnectedCallback() { }
   render() {
-    const empty = (h(EmptySlot, { emptyStateImgUrl: this.emptyStateImgUrl, emptyStateTitle: this.emptyStateTitle, emptyStateText: this.emptyStateText }));
+    const empty = (h(EmptySlot, { emptyStateImage: this.emptyStateImage, emptyStateHeader: this.emptyStateHeader, emptyStateText: this.emptyStateText }));
     const loading = h(LoadingSlot, null);
     const { states, data, callbacks, elements } = isDemo()
       ? useRewardsTableDemo(this)
@@ -210,7 +210,7 @@ export class RewardsTable {
       "reflect": false,
       "defaultValue": "899"
     },
-    "emptyStateImgUrl": {
+    "emptyStateImage": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -227,11 +227,11 @@ export class RewardsTable {
           }],
         "text": ""
       },
-      "attribute": "empty-state-img-url",
+      "attribute": "empty-state-image",
       "reflect": false,
       "defaultValue": "\"https://res.cloudinary.com/saasquatch/image/upload/v1642618031/squatch-assets/image_4_1.png\""
     },
-    "emptyStateTitle": {
+    "emptyStateHeader": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -248,7 +248,7 @@ export class RewardsTable {
           }],
         "text": ""
       },
-      "attribute": "empty-state-title",
+      "attribute": "empty-state-header",
       "reflect": false,
       "defaultValue": "\"View your rewards\""
     },
@@ -278,7 +278,7 @@ export class RewardsTable {
       "mutable": false,
       "complexType": {
         "original": "DemoData<GenericTableViewProps>",
-        "resolved": "{ states?: { hasPrev: boolean; hasNext: boolean; show: \"loading\" | \"empty\" | \"rows\"; namespace: string; }; data?: { textOverrides: { showLabels: boolean; prevLabel: string; moreLabel: string; }; hiddenColumns: string; mdBreakpoint: number; smBreakpoint: number; }; elements?: { columns: VNode[]; rows: VNode[][]; loading?: boolean; emptyElement?: VNode; loadingElement?: VNode; page?: number; }; }",
+        "resolved": "{ states?: { hasPrev: boolean; hasNext: boolean; show: \"loading\" | \"empty\" | \"rows\"; namespace: string; }; data?: { textOverrides: { showLabels: boolean; prevLabel: string; moreLabel: string; }; hiddenColumns: string; mdBreakpoint: number; smBreakpoint: number; }; elements?: { columns: string[]; rows: VNode[][]; loading?: boolean; emptyElement?: VNode; loadingElement?: VNode; page?: number; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -338,30 +338,27 @@ function useRewardsTableDemo(props) {
       referralData: [],
     },
     elements: {
-      emptyElement: (h(EmptySlot, { emptyStateImgUrl: "https://res.cloudinary.com/saasquatch/image/upload/v1642618031/squatch-assets/image_4_1.png", emptyStateTitle: "View your rewards", emptyStateText: "See all the rewards you have earned from referring friends and completing tasks" })),
+      emptyElement: (h(EmptySlot, { emptyStateImage: "https://res.cloudinary.com/saasquatch/image/upload/v1642618031/squatch-assets/image_4_1.png", emptyStateHeader: "View your rewards", emptyStateText: "See all the rewards you have earned from referring friends and completing tasks" })),
       loadingElement: h(LoadingSlot, null),
       // TODO: This should be smarter
       columns: [
-        h("div", null, "Reward"),
-        h("div", null, "Source"),
-        h("div", null, "Status"),
-        h("div", null, "Date recieved"),
+        "Reward",
+        "Source",
+        "Status",
+        "Date recieved",
       ],
       rows: [],
     },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
-function EmptySlot({ emptyStateImgUrl, emptyStateTitle, emptyStateText, }) {
+function EmptySlot({ emptyStateImage, emptyStateHeader, emptyStateText, }) {
   return (h("div", { slot: "empty", style: { display: "contents" } },
     h("sqm-table-row", null,
       h("sqm-table-cell", { colspan: 5, style: { textAlign: "center" } },
-        h("div", { style: { padding: "var(--sl-spacing-xxx-large)" } },
-          h("img", { src: emptyStateImgUrl, style: { width: "100px" } }),
-          h("div", null,
-            h("b", null, emptyStateTitle)),
-          h("div", { style: {
-              marginTop: "var(--sl-spacing-xx-small)",
-              fontSize: "var(--sl-font-size-small)",
-              color: "var(--sl-color-neutral-500)",
-            } }, emptyStateText))))));
+        h("sqm-portal-container", { padding: "xxxx-large", gap: "medium" },
+          h("sqm-image", { "image-url": emptyStateImage, "max-width": "100px" }),
+          h("sqm-titled-section", { "label-margin": "xxx-small", "text-align": "center" },
+            h("sqm-text", { slot: "label" },
+              h("h3", null, emptyStateHeader)),
+            h("sqm-text", { slot: "content" }, emptyStateText)))))));
 }

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

@@ -4,6 +4,7 @@ import { h } from "@stencil/core";
 import { gql } from "graphql-request";
 import { useRerenderListener } from "../../tables/re-render";
 import { useChildElements } from "../../tables/useChildElements";
+import { generateUserError } from "../sqm-referral-table/useReferralTable";
 export const CSS_NAMESPACE = "sqm-rewards-table";
 const GET_REWARDS = gql `
   query getRewards(
@@ -46,7 +47,11 @@ const GET_REWARDS = gql `
               locale: $locale
             )
             programId
+            program {
+              name
+            }
             statuses
+            pendingReasons
             globalRewardKey
             programRewardKey
             rewardSource
@@ -135,7 +140,7 @@ export function useRewardsTable(props, emptyElement, loadingElement) {
     // 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)));
-      const cells = await Promise.all(cellPromise);
+      const cells = (await Promise.all(cellPromise));
       return cells;
     });
     const rows = cellsPromise && (await Promise.all(cellsPromise)).filter((i) => i);
@@ -191,14 +196,6 @@ export function useRewardsTable(props, emptyElement, loadingElement) {
     },
   };
 }
-function generateUserError(e) {
-  try {
-    return JSON.stringify(e);
-  }
-  catch (e) {
-    return "An unknown error";
-  }
-}
 async function tryMethod(c, callback) {
   const tag = c.tagName.toLowerCase();
   await customElements.whenDefined(tag);

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

@@ -94,5 +94,5 @@ export const AllMediums = () => {
       h("span", null, "Line Messenger")),
     h("br", null),
     h("sqm-share-button", { medium: "direct" },
-      h("span", null, "Direct"))));
+      h("span", null, "Share"))));
 };

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

@@ -2,40 +2,16 @@ import { h, Host } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
 import { HostBlock } from "../../global/mixins";
 const medium = {
-  facebook: "#1877f2",
-  twitter: "#1da1f2",
-  email: "#666666",
-  direct: "#00008B",
-  linkedin: "#0077b5",
-  sms: "#34DA50",
-  fbmessenger: "#0084ff",
-  whatsapp: "#25d366",
-  linemessenger: "#00B300",
-  pinterest: "#e60023",
-};
-const medium_text = {
-  facebook: "#fff",
-  twitter: "#fff",
-  email: "#fff",
-  direct: "#fff",
-  linkedin: "#fff",
-  sms: "#fff",
-  fbmessenger: "#fff",
-  whatsapp: "#fff",
-  linemessenger: "#fff",
-  pinterest: "#fff",
-};
-const medium_icon = {
-  facebook: "facebook",
-  twitter: "twitter",
-  email: "envelope",
-  direct: "send",
-  linkedin: "linkedin",
-  sms: "chat",
-  fbmessenger: "messenger",
-  whatsapp: "whatsapp",
-  linemessenger: "line",
-  pinterest: "pinterest",
+  facebook: { color: "#1877f2", text: "#fff", icon: "facebook" },
+  twitter: { color: "#1da1f2", text: "#fff", icon: "twitter" },
+  email: { color: "#666666", text: "#fff", icon: "envelope" },
+  direct: { color: "var(--sl-color-primary-500)", text: "#fff", icon: "send" },
+  linkedin: { color: "#0077b5", text: "#fff", icon: "linkedin" },
+  sms: { color: "#34DA50", text: "#fff", icon: "chat" },
+  fbmessenger: { color: "#0084ff", text: "#fff", icon: "messenger" },
+  whatsapp: { color: "#25d366", text: "#fff", icon: "whatsapp" },
+  linemessenger: { color: "#00B300", text: "#fff", icon: "line" },
+  pinterest: { color: "#e60023", text: "#fff", icon: "pinterest" },
 };
 export function ShareButtonView(props, children) {
   const vanillaStyle = `
@@ -43,18 +19,18 @@ export function ShareButtonView(props, children) {
 			--sl-focus-ring-color-primary: ${props.backgroundcolor
     ? props.backgroundcolor
     : props.medium
-      ? medium[props.medium]
+      ? medium[props.medium].color
       : ""}80!important;
 
       background: ${props.backgroundcolor
     ? props.backgroundcolor
     : props.medium
-      ? medium[props.medium]
+      ? medium[props.medium].color
       : ""};
       color: ${props.textcolor
     ? props.textcolor
     : props.medium
-      ? medium_text[props.medium]
+      ? medium[props.medium].text
       : ""};
       border-radius: ${props.borderradius ? props.borderradius + "px" : ""};
     }
@@ -63,7 +39,7 @@ export function ShareButtonView(props, children) {
 		border-color: ${props.backgroundcolor
     ? props.backgroundcolor
     : props.medium
-      ? medium[props.medium]
+      ? medium[props.medium].color
       : ""}D1!important;
 	}
 	
@@ -71,7 +47,7 @@ export function ShareButtonView(props, children) {
 		border-color: ${props.backgroundcolor
     ? props.backgroundcolor
     : props.medium
-      ? medium[props.medium]
+      ? medium[props.medium].color
       : ""}D1!important;
 	}
 
@@ -95,6 +71,6 @@ export function ShareButtonView(props, children) {
     h("style", { type: "text/css" }, styleString),
     h("style", { type: "text/css" }, vanillaStyle),
     h("sl-button", { class: sheet.classes.buttonStyle, loading: props.loading, disabled: props.disabled, pill: props.pill, size: props.size, type: props.type, onClick: props.onClick, exportparts: `base: ${props.type}sharebutton-base` },
-      !props.hideicon && (h("sl-icon", { slot: props.iconslot || "prefix", name: props.icon ? props.icon : medium_icon[props.medium], exportparts: "icon" })),
+      !props.hideicon && (h("sl-icon", { slot: props.iconslot || "prefix", name: props.icon ? props.icon : medium[props.medium].icon, exportparts: "icon" })),
       !props.hidetext && children)));
 }

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

@@ -70,10 +70,10 @@ export class ShareButton {
             "text": "string",
             "name": "uiType"
           }, {
-            "text": "[\"facebook\", \"twitter\", \"email\", \"direct\", \"linkedin\", \"sms\", \"fbmessenger\", \"whatsapp\", \"linemessenger\", \"pinterest\", \"reminder\", \"unknown\" ]",
+            "text": "[\"facebook\", \"twitter\", \"email\", \"direct\", \"linkedin\", \"sms\", \"fbmessenger\", \"whatsapp\", \"linemessenger\", \"pinterest\" ]",
             "name": "uiEnum"
           }, {
-            "text": "[\"Facebook\", \"Twitter\", \"Email\", \"Web Share Sheet\", \"Linkedin\", \"SMS\", \"Facebook Messenger\", \"Whatsapp\", \"Line Messenger\", \"Pinterest\", \"Reminder\", \"Unknown\"]",
+            "text": "[\"Facebook\", \"Twitter\", \"Email\", \"Web Share Sheet\", \"Linkedin\", \"SMS\", \"Facebook Messenger\", \"Whatsapp\", \"Line Messenger\", \"Pinterest\"]",
             "name": "uiEnumNames"
           }],
         "text": "The social medium to share on. Share messages and links\r\nwill be pulled from your program config and tagged for analytics."
@@ -135,6 +135,9 @@ export class ShareButton {
         "tags": [{
             "text": "Button background color",
             "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
           }],
         "text": ""
       },
@@ -155,6 +158,9 @@ export class ShareButton {
         "tags": [{
             "text": "Button text color",
             "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
           }],
         "text": ""
       },
@@ -302,7 +308,7 @@ export class ShareButton {
             "text": "Icon used in button. Will try to select an icon based on the share medium if left empty.",
             "name": "uiName"
           }],
-        "text": ""
+        "text": "Options available at https://shoelace.style/components/icon"
       },
       "attribute": "icon",
       "reflect": false

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

@@ -55,6 +55,7 @@ import * as RewardsTable from "../sqm-rewards-table/RewardsTable.stories";
 import * as UseReferralTable from "../sqm-referral-table/UseReferralTable.stories";
 import * as HeroImage from "../sqm-hero-image/HeroImage.stories";
 import * as ReferralCard from "../sqm-referral-card/ReferralCard.stories";
+import * as Timeline from "../sqm-timeline/Timeline.stories";
 import * as Image from "../sqm-image/Image.stories";
 import * as TitledSection from "../sqm-titled-section/TitledSection.stories";
 import * as Themes from "./Themes";
@@ -117,6 +118,7 @@ const stories = [
   UseReferralTable,
   HeroImage,
   ReferralCard,
+  Timeline,
   Image,
   TitledSection,
 ];

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

@@ -0,0 +1,19 @@
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Host, State } from "@stencil/core";
+export class Tab {
+  constructor() {
+    this.ignored = true;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return (h(Host, { style: { display: "block" } },
+      h("sl-tab", null,
+        h("slot", null))));
+  }
+  static get is() { return "sqm-tab"; }
+  static get encapsulation() { return "shadow"; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}

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

@@ -0,0 +1,19 @@
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Host, State } from "@stencil/core";
+export class TabGroup {
+  constructor() {
+    this.ignored = true;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return (h(Host, { style: { display: "block" } },
+      h("sl-tab-group", null,
+        h("slot", { name: "nav" }),
+        h("slot", null))));
+  }
+  static get is() { return "sqm-tab-group"; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}

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

@@ -0,0 +1,19 @@
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Host, State } from "@stencil/core";
+export class TabPanel {
+  constructor() {
+    this.ignored = true;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return (h(Host, { style: { display: "block" } },
+      h("sl-tab-panel", null,
+        h("slot", { name: "sqm-panel", slot: "panel" }))));
+  }
+  static get is() { return "sqm-tab-panel"; }
+  static get encapsulation() { return "shadow"; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}