@saasquatch/mint-components 1.7.0-7 → 1.7.0-9

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

@@ -3,7 +3,8 @@ import { withHooks } from "@saasquatch/stencil-hooks";
 import { useProgramMenu } from "./useProgramMenu";
 import { getProps } from "../../utils/utils";
 /**
- * @uiName Portal Menu
+ * @uiName Microsite Program Menu
+ * @slots [{"name":"","title":"Menu Content"}]
  * @canvasRenderer always-replace
  */
 export class ProgramMenu {

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

@@ -3,6 +3,8 @@ import { createStyleSheet } from "../../styling/JSS";
 const style = {
   Container: {
     display: "flex",
+    color: "var(--sl-color-neutral-900)",
+    background: "var(--sl-color-neutral-0)",
     "& .left": {
       boxSizing: "border-box",
       width: "50%",
@@ -25,6 +27,7 @@ const style = {
       },
     },
     border: "1px solid var(--sl-color-neutral-300)",
+    borderRadius: "var(--sl-border-radius-large)",
     "@media (max-width: 499px)": {
       flexDirection: "column",
       border: "none",
@@ -39,30 +42,11 @@ const vanillaStyle = `
     }
   `;
 export function ReferralCardView(props) {
-  console.log(props.padding);
   return (h("div", null,
     h("style", { type: "text/css" },
       styleString,
       vanillaStyle),
-    h("style", null, `
-
-          /* 
-          Selects any element placed inside a slot
-           - resets css variable inheritence for fonts
-          */
-          ::slotted(*) {
-            ${props.textColor && `color: ${props.textColor};`}
-            --sl-color-neutral-900: ${props.textColor};
-          }`),
-    h("div", { class: sheet.classes.Container, style: {
-        color: props.textColor || "var(--sl-color-neutral-900)",
-        padding: props.padding ? `var(--sl-spacing-${props.padding})` : "0",
-        borderColor: props.borderColor || "var(--sl-color-neutral-300)",
-        borderRadius: props.borderRadius
-          ? `${props.borderRadius}px`
-          : "var(--sl-border-radius-large)",
-        backgroundColor: props.backgroundColor || "var(--sl-color-neutral-0)",
-      } },
+    h("div", { class: sheet.classes.Container },
       h("div", { class: "left", style: {
           alignSelf: props.verticalAlignment,
         } }, props.slots.left),

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

@@ -9,13 +9,6 @@ import { ReferralCardView } from "./sqm-referral-card-view";
  * @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>
  */
 export class ReferralCard {
-  // /**
-  //  * @uiName Mobile Padding
-  //  * @uiType string
-  //  * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
-  //  * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
-  //  */
-  // @Prop() mobilePadding?: Spacing;
   constructor() {
     this.ignored = true;
     /**
@@ -68,129 +61,6 @@ export class ReferralCard {
       "attribute": "vertical-alignment",
       "reflect": false,
       "defaultValue": "\"start\""
-    },
-    "backgroundColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Background Color",
-            "name": "uiName"
-          }, {
-            "text": "color",
-            "name": "uiWidget"
-          }],
-        "text": ""
-      },
-      "attribute": "background-color",
-      "reflect": false
-    },
-    "textColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Text Color",
-            "name": "uiName"
-          }, {
-            "text": "color",
-            "name": "uiWidget"
-          }],
-        "text": ""
-      },
-      "attribute": "text-color",
-      "reflect": false
-    },
-    "borderRadius": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Border Radius",
-            "name": "uiName"
-          }],
-        "text": "Configure border radius with pixel amount."
-      },
-      "attribute": "border-radius",
-      "reflect": false
-    },
-    "padding": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "Spacing",
-        "resolved": "\"large\" | \"medium\" | \"none\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxx-small\" | \"xxxx-large\"",
-        "references": {
-          "Spacing": {
-            "location": "import",
-            "path": "../../global/mixins"
-          }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Padding",
-            "name": "uiName"
-          }, {
-            "text": "string",
-            "name": "uiType"
-          }, {
-            "text": "[\"none\", \"xxx-small\", \"xx-small\", \"x-small\", \"small\", \"medium\", \"large\", \"x-large\", \"xx-large\", \"xxx-large\", \"xxxx-large\"]",
-            "name": "uiEnum"
-          }, {
-            "text": "[\"None\", \"XXX-Small\", \"XX-Small\", \"X-Small\", \"Small\", \"Medium\", \"Large\", \"X-Large\", \"XX-Large\", \"XXX-Large\", \"XXXX-Large\"]",
-            "name": "uiEnumNames"
-          }],
-        "text": ""
-      },
-      "attribute": "padding",
-      "reflect": false
-    },
-    "borderColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Border Color",
-            "name": "uiName"
-          }, {
-            "text": "color",
-            "name": "uiWidget"
-          }],
-        "text": ""
-      },
-      "attribute": "border-color",
-      "reflect": false
     }
   }; }
   static get states() { return {

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

@@ -13,12 +13,12 @@ export class SqmReferralIframe {
   constructor() {
     this.ignored = true;
     /**
-     * Height of the iframe container
+     * Define the height of the iframe with any valid CSS height value. Example: 100px, 5rem, or auto.
      * @uiName Iframe Height
      */
     this.iframeHeight = "100%";
     /**
-     * Width of the iframe container
+     * Define the width of the iframe with any valid CSS width value. Example: 100px, 5rem, or auto.
      * @uiName Iframe Width
      */
     this.iframeWidth = "100%";
@@ -81,7 +81,7 @@ export class SqmReferralIframe {
             "text": "Iframe Height",
             "name": "uiName"
           }],
-        "text": "Height of the iframe container"
+        "text": "Define the height of the iframe with any valid CSS height value. Example: 100px, 5rem, or auto."
       },
       "attribute": "iframe-height",
       "reflect": false,
@@ -102,7 +102,7 @@ export class SqmReferralIframe {
             "text": "Iframe Width",
             "name": "uiName"
           }],
-        "text": "Width of the iframe container"
+        "text": "Define the width of the iframe with any valid CSS width value. Example: 100px, 5rem, or auto."
       },
       "attribute": "iframe-width",
       "reflect": false,

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

@@ -12,7 +12,7 @@ import { tryMethod, useReferralTable } from "./useReferralTable";
  * @uiName Referral Table
  * @exampleGroup Referrals
  * @slots [{"name":"", "title":"Table Row"},{"name":"empty", "title":"Empty"},{"name":"loading","title":"Loading"}]
- * @example Referral Table - <sqm-referral-table per-page="4" hidden-columns="2" more-label="Next" prev-label="Prev" show-labels sm-breakpoint="599" md-breakpoint="799"><sqm-referral-table-user-column column-title="Customer" anonymous-user="Anonymous User" deleted-user="Deleted User"></sqm-referral-table-user-column><sqm-referral-table-rewards-column column-title="Rewards" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }" status-long-text="{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }" fuel-tank-text="Your code is" reward-received-text="Reward received on" expiring-text="Expiring in" pending-for-text="{status} for {date}"></sqm-referral-table-rewards-column><sqm-referral-table-date-column column-title="Date converted" date-shown="dateConverted"></sqm-referral-table-date-column><sqm-referral-table-status-column column-title="Status" converted-status-text="Converted" in-progress-status-text="In Progress"></sqm-referral-table-status-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" slot="empty"></sqm-empty></sqm-referral-table>
+ * @example Referral Table - <sqm-referral-table per-page="4" hidden-columns="2" more-label="Next" prev-label="Prev" sm-breakpoint="599" md-breakpoint="799"><sqm-referral-table-user-column column-title="Customer" anonymous-user="Anonymous User" deleted-user="Deleted User"></sqm-referral-table-user-column><sqm-referral-table-rewards-column column-title="Rewards" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }" status-long-text="{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }" fuel-tank-text="Your code is" reward-received-text="Reward received on" expiring-text="Expiring in" pending-for-text="{status} for {date}"></sqm-referral-table-rewards-column><sqm-referral-table-date-column column-title="Date converted" date-shown="dateConverted"></sqm-referral-table-date-column><sqm-referral-table-status-column column-title="Status" converted-status-text="Converted" in-progress-status-text="In Progress"></sqm-referral-table-status-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" slot="empty"></sqm-empty></sqm-referral-table>
  */
 export class ReferralTable {
   constructor() {

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

@@ -12,7 +12,7 @@ import { tryMethod, useRewardsTable } from "./useRewardsTable";
  * @uiName Reward Table
  * @exampleGroup Rewards
  * @slots [{"name":"", "title":"Table Row"},{"name":"empty", "title":"Empty"},{"name":"loading","title":"Loading"}]
- * @example Reward Table - <sqm-rewards-table per-page="4" show-labels= prev-label="Prev" more-label="Next" hidden-columns="0" sm-breakpoint="599" md-breakpoint="799"><sqm-rewards-table-status-column column-title="Status" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }" expiry-text="Expires on " pending-us-tax="W-9 required" pending-scheduled="Until" pending-unhandled="Fulfillment error"></sqm-rewards-table-status-column><sqm-rewards-table-source-column column-title="Source" anonymous-user="Anonymous User" deleted-user="Deleted User" reward-exchange-text="Reward Exchange" referral-rext="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}" reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}"></sqm-rewards-table-source-column><sqm-rewards-table-reward-column column-title="Reward" redeemed-text="{redeemedAmount} redeemed" available-text="{availableAmount} remaining" copy-text="Copied!"></sqm-rewards-table-reward-column><sqm-rewards-table-date-column column-title="Date received" date-shown="dateGiven"></sqm-rewards-table-date-column><sqm-rewards-table-customer-note-column column-title="Note"></sqm-rewards-table-customer-note-column><sqm-empty slot="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="Complete program tasks to view the details of your rewards"></sqm-empty></sqm-rewards-table>
+ * @example Reward Table - <sqm-rewards-table per-page="4" prev-label="Prev" more-label="Next" hidden-columns="0" sm-breakpoint="599" md-breakpoint="799"><sqm-rewards-table-status-column column-title="Status" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }" expiry-text="Expires on " pending-us-tax="W-9 required" pending-scheduled="Until" pending-unhandled="Fulfillment error"></sqm-rewards-table-status-column><sqm-rewards-table-source-column column-title="Source" anonymous-user="Anonymous User" deleted-user="Deleted User" reward-exchange-text="Reward Exchange" referral-rext="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}" reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}"></sqm-rewards-table-source-column><sqm-rewards-table-reward-column column-title="Reward" redeemed-text="{redeemedAmount} redeemed" available-text="{availableAmount} remaining" copy-text="Copied!"></sqm-rewards-table-reward-column><sqm-rewards-table-date-column column-title="Date received" date-shown="dateGiven"></sqm-rewards-table-date-column><sqm-rewards-table-customer-note-column column-title="Note"></sqm-rewards-table-customer-note-column><sqm-empty slot="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="Complete program tasks to view the details of your rewards"></sqm-empty></sqm-rewards-table>
  */
 export class RewardsTable {
   constructor() {
@@ -283,26 +283,29 @@ function useRewardsTableDemo(props, emptyElement, loadingElement) {
     let componentData = data;
     componentData = data.slice(0, props.perPage);
     // filter out loading and empty states from columns array
-    const columnComponents = components.filter((component) => component.slot !== "loading" && component.slot !== "empty");
+    const columnComponents = components.filter((component) => {
+      var _a, _b;
+      return component.slot !== "loading" &&
+        component.slot !== "empty" &&
+        ((_a = component === null || component === void 0 ? void 0 : component.firstElementChild) === null || _a === void 0 ? void 0 : _a.getAttribute("slot")) !== "loading" &&
+        ((_b = component === null || component === void 0 ? void 0 : component.firstElementChild) === null || _b === void 0 ? void 0 : _b.getAttribute("slot")) !== "empty";
+    });
     // get the column titles (renderLabel is asynchronous)
     const columnsPromise = columnComponents === null || columnComponents === void 0 ? void 0 : columnComponents.map(async (c, idx) => {
       var _a;
       const slot = (_a = c === null || c === void 0 ? void 0 : c.firstElementChild) === null || _a === void 0 ? void 0 : _a.getAttribute("slot");
       // Custom plop targets
-      try {
-        if (c.tagName === "RAISINS-PLOP-TARGET" &&
-          slot !== "loading" &&
-          slot !== "empty") {
-          c.style.position = "absolute";
-          c.setAttribute("slot", "column-" + idx);
-          // Replace add text with a simple + button
-          const plopTarget = c.firstElementChild.childNodes[1];
-          plopTarget.innerHTML = "＋";
-          plopTarget.style.lineHeight = "20px";
-          return tryMethod(c, () => c.renderLabel(idx));
-        }
+      if (c.tagName === "RAISINS-PLOP-TARGET" &&
+        slot !== "loading" &&
+        slot !== "empty") {
+        c.style.position = "absolute";
+        c.setAttribute("slot", "column-" + idx);
+        // Replace add text with a simple + button
+        const plopTarget = c.firstElementChild.childNodes[1];
+        plopTarget.innerHTML = "＋";
+        plopTarget.style.lineHeight = "20px";
+        return tryMethod(c, () => c.renderLabel(idx));
       }
-      catch { }
       return tryMethod(c, () => c.renderLabel());
     });
     // get the column cells (renderCell is asynchronous)

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

@@ -29,7 +29,7 @@ export class SqmRoute {
             "text": "Navigation Path Name",
             "name": "uiName"
           }],
-        "text": ""
+        "text": "Page Path URL for this route."
       },
       "attribute": "path",
       "reflect": false

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

@@ -7,7 +7,7 @@ import { useShareCode } from "./useShareCode";
 import deepmerge from "deepmerge";
 /**
  * @uiName Share Code
- * @exampleGroup Referrals
+ * @exampleGroup Sharing
  * @example Share Code - <sqm-share-code tooltip-text="Copied to Clipboard" tooltip-lifespan="1000"></sqm-share-code>
  */
 export class ShareCode {
@@ -107,7 +107,7 @@ export class ShareCode {
       "mutable": false,
       "complexType": {
         "original": "DemoData<ShareLinkViewProps>",
-        "resolved": "{ disabled?: boolean; size?: \"small\" | \"medium\" | \"large\"; onClick?: () => void; shareString?: string; open?: boolean; backgroundColor?: string; textColor?: string; borderColor?: string; borderRadius?: number; tooltiptext?: string; }",
+        "resolved": "{ disabled?: boolean; onClick?: () => void; shareString?: string; open?: boolean; tooltiptext?: string; }",
         "references": {
           "DemoData": {
             "location": "import",

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

@@ -17,7 +17,7 @@ const WIDGET_ENGAGEMENT_EVENT = gql `
 `;
 export function useShareCode(props) {
   var _a, _b;
-  const programId = useProgramId();
+  const { programId = useProgramId() } = props;
   const user = useUserIdentity();
   const engagementMedium = useEngagementMedium();
   const { data } = useQuery(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));

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

@@ -1,31 +1,18 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
 import { HostBlock } from "../../global/mixins";
+const style = {
+  HostBlock: HostBlock,
+  inputStyle: {
+    "&::part(base)": { background: "white", opacity: "1", cursor: "pointer" },
+  },
+};
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
 export function ShareLinkView(props) {
-  const style = {
-    HostBlock: HostBlock,
-    inputStyle: {
-      "&::part(input)": {
-        color: props.textColor,
-      },
-      "& sl-icon-button::part(base)": {
-        color: props.textColor,
-      },
-      "&::part(base)": {
-        background: props.backgroundColor || "white",
-        borderRadius: props.borderRadius,
-        borderColor: props.borderColor,
-        opacity: "1",
-        cursor: "pointer",
-      },
-    },
-  };
-  const sheet = createStyleSheet(style);
-  const styleString = sheet.toString();
-  console.log(props.borderColor);
   return (h("div", null,
     h("style", { type: "text/css" }, styleString),
     h("sl-tooltip", { trigger: "manual", content: props.tooltiptext, placement: "top-end", disabled: props.disabled, open: props.open, skidding: -20 },
-      h("sl-input", { size: props.size, class: sheet.classes.inputStyle, exportparts: "label: input-label", value: props.shareString, readonly: true },
+      h("sl-input", { class: sheet.classes.inputStyle, exportparts: "label: input-label", value: props.shareString, readonly: true },
         h("sl-icon-button", { onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props); }, slot: "suffix", name: "files", disabled: props.disabled })))));
 }

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

@@ -7,7 +7,7 @@ import { getProps } from "../../utils/utils";
 import deepmerge from "deepmerge";
 /**
  * @uiName Share Link
- * @exampleGroup Referrals
+ * @exampleGroup Sharing
  * @example Share Link - <sqm-share-link tooltip-text="Copied to Clipboard" tooltip-lifespan="1000"></sqm-share-link>
  */
 export class ShareLink {
@@ -102,130 +102,12 @@ export class ShareLink {
       "reflect": false,
       "defaultValue": "1000"
     },
-    "backgroundColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Background Color",
-            "name": "uiName"
-          }, {
-            "text": "color",
-            "name": "uiWidget"
-          }],
-        "text": ""
-      },
-      "attribute": "background-color",
-      "reflect": false
-    },
-    "textColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Text Color",
-            "name": "uiName"
-          }, {
-            "text": "color",
-            "name": "uiWidget"
-          }],
-        "text": ""
-      },
-      "attribute": "text-color",
-      "reflect": false
-    },
-    "borderColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Border Color",
-            "name": "uiName"
-          }, {
-            "text": "color",
-            "name": "uiWidget"
-          }],
-        "text": ""
-      },
-      "attribute": "border-color",
-      "reflect": false
-    },
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "\"small\" | \"medium\" | \"large\"",
-        "resolved": "\"large\" | \"medium\" | \"small\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Input Size",
-            "name": "uiName"
-          }, {
-            "text": "string",
-            "name": "uiType"
-          }, {
-            "text": "[\"small\", \"medium\", \"large\" ]",
-            "name": "uiEnum"
-          }, {
-            "text": "[\"Small\", \"Medium\", \"Large\"]",
-            "name": "uiEnumNames"
-          }],
-        "text": ""
-      },
-      "attribute": "size",
-      "reflect": false
-    },
-    "borderRadius": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Border Radius",
-            "name": "uiName"
-          }],
-        "text": "Configure border radius with pixel amount."
-      },
-      "attribute": "border-radius",
-      "reflect": false
-    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<ShareLinkViewProps>",
-        "resolved": "{ disabled?: boolean; size?: \"small\" | \"medium\" | \"large\"; onClick?: () => void; shareString?: string; open?: boolean; backgroundColor?: string; textColor?: string; borderColor?: string; borderRadius?: number; tooltiptext?: string; }",
+        "resolved": "{ disabled?: boolean; onClick?: () => void; shareString?: string; open?: boolean; tooltiptext?: string; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -259,11 +141,6 @@ function useDemoShareLink(props) {
     shareString,
     tooltiptext: props.tooltiptext,
     open,
-    backgroundColor: props.backgroundColor,
-    textColor: props.textColor,
-    borderColor: props.borderColor,
-    size: props.size,
-    borderRadius: props.borderRadius,
     onClick: () => {
       // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
       // Only if called from a user-initiated event

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

@@ -14,18 +14,14 @@ export function StatContainerView(props, children) {
       gap: divideSpace(),
       // First set of styles applies when shadow DOM is disabled, second set applies when shadow DOM is enabled
       "& > *": {
-        "border-right": props.showBorder
-          ? `1px solid ${props.borderColor ? props.borderColor : "#EAEAEA"}`
-          : "none",
+        "border-right": "1px solid #EAEAEA",
         "padding-right": divideSpace(),
       },
       "& > :last-child": {
         "border-right": "none",
       },
       "& > ::slotted(*)": {
-        "border-right": props.showBorder
-          ? `1px solid ${props.borderColor ? props.borderColor : "#EAEAEA"}`
-          : "none",
+        "border-right": "1px solid #EAEAEA",
         "padding-right": divideSpace(),
         height: "100%",
       },

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

@@ -6,7 +6,7 @@ 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>
+ * @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"><p>Points Balance</p></sqm-big-stat><sqm-big-stat flex-reverse="true" alignment="left" stat-type="/integrationRewardsCountFiltered/AVAILABLE/global"><p>Giftcards Earned</p></sqm-big-stat><sqm-big-stat flex-reverse="true" alignment="left" stat-type="/referralsCount"><p>Referrals</p></sqm-big-stat></sqm-stat-container>
  */
 export class StatContainer {
   constructor() {
@@ -25,10 +25,6 @@ export class StatContainer {
      * @uiEnumNames ["Grid", "Flex"]
      */
     this.display = "grid";
-    /**
-     * @uiName Hide Border
-     */
-    this.hideBorder = false;
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -103,50 +99,6 @@ export class StatContainer {
       "attribute": "display",
       "reflect": false,
       "defaultValue": "\"grid\""
-    },
-    "hideBorder": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Hide Border",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "hide-border",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "borderColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Border Color",
-            "name": "uiName"
-          }, {
-            "text": "color",
-            "name": "uiWidget"
-          }],
-        "text": ""
-      },
-      "attribute": "border-color",
-      "reflect": false
     }
   }; }
   static get states() { return {

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

@@ -69,6 +69,7 @@ import * as TitledSection from "../sqm-titled-section/TitledSection.stories";
 import * as Scroll from "../sqm-scroll/Scroll.stories";
 import * as Tabs from "../sqm-tabs/Tabs.stories";
 import * as ShareCode from "../sqm-share-code/ShareCode.stories";
+import * as HamburgerMenu from "../sqm-hamburger-menu/HamburgerMenu.stories";
 import * as Themes from "./Themes";
 import { CucumberAddon } from "./CucumberAddon";
 import { HookStoryAddon } from "./HookStoryAddon";
@@ -143,6 +144,7 @@ const stories = [
   Scroll,
   Tabs,
   ShareCode,
+  HamburgerMenu,
 ];
 /**
  * For internal documentation