@saasquatch/mint-components 1.15.0-9 → 1.15.0-90

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

@@ -4,9 +4,10 @@ import { getProps } from "../../utils/utils";
 import { ReferralCardView } from "./sqm-referral-card-view";
 import { useChildElements } from "../../tables/useChildElements";
 /**
+ *
  * @uiName Referral Card
- * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqb-program-section","sqb-conditional-section"]
- * @validChildren ["div","sqm-portal-container","p","sqm-timeline","h1","h2","h3","h5","h4","sqm-pagination","sqm-qr-code","sqm-referral-code","sqm-referral-codes","sqm-share-code","sqm-share-link","sqm-text","span"]
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqb-program-section","sqb-conditional-section", "sqm-hero"]
+ * @validChildren ["div","sqm-portal-container","p","sqm-timeline","h1","h2","h3","h5","h4","sqm-pagination","sqm-qr-code","sqm-referral-code","sqm-referral-codes","sqm-share-code","sqm-share-link","sqm-text","span", "sqm-portal-footer", "sqm-titled-section"]
  * @exampleGroup Referrals
  * @slots [{"name":"left", "title":"Left Content"},{"name":"right", "title":"Right Content"},{"name":"header", "title":"Header Content"},{"name":"footer", "title":"Footer 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>
@@ -54,12 +55,6 @@ export class ReferralCard {
      * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
      */
     this.paddingLeft = "large";
-    /**
-     * @uiName Background color
-     * @uiWidget color
-     * @uiType string
-     */
-    this.backgroundColor = "#ffffff";
     /**
      * @uiName Limit width
      * @uiType boolean
@@ -267,7 +262,7 @@ export class ReferralCard {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [{
             "text": "Background color",
@@ -282,8 +277,82 @@ export class ReferralCard {
         "text": ""
       },
       "attribute": "background-color",
-      "reflect": false,
-      "defaultValue": "\"#ffffff\""
+      "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": "color",
+            "name": "format"
+          }],
+        "text": "Border color of container"
+      },
+      "attribute": "border-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": "color",
+            "name": "format"
+          }],
+        "text": "Color of the text and copy icon"
+      },
+      "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": "number",
+            "name": "uiType"
+          }],
+        "text": "The border radius (in pixels)"
+      },
+      "attribute": "border-radius",
+      "reflect": false
     },
     "limitWidth": {
       "type": "boolean",

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

@@ -7,7 +7,7 @@ import { CopyTextView } from "../views/copy-text-view";
 import { useReferralCode } from "./useReferralCode";
 /**
  * @uiName Referral Code
- * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-referral-card","span"]
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-referral-card","span", "sqm-referral-codes"]
  * @exampleGroup Sharing
  * @example Referral Code - <sqm-referral-code tooltip-text="Copied to Clipboard" tooltip-lifespan="1000" show-notification-text="true"></sqm-referral-code>
  */
@@ -44,6 +44,7 @@ export class ReferralCode {
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
+     * @uiGroup Style
      */
     this.textAlign = "left";
     /**
@@ -61,7 +62,7 @@ export class ReferralCode {
      */
     this.buttonStyle = "icon";
     /**
-     * The type of the button (primary or secondary) that will be used to copy the link.
+     * The type of the button that is used (primary or secondary).
      * @uiName Button Type
      * @uiType string
      * @uiEnum ["primary", "secondary"]
@@ -212,6 +213,9 @@ export class ReferralCode {
           }, {
             "text": "[\"Left\", \"Center\", \"Right\"]",
             "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": "Change the text alignment"
       },
@@ -413,7 +417,7 @@ export class ReferralCode {
             "text": "Style",
             "name": "uiGroup"
           }],
-        "text": "The type of the button (primary or secondary) that will be used to copy the link."
+        "text": "The type of the button that is used (primary or secondary)."
       },
       "attribute": "button-type",
       "reflect": false,
@@ -424,7 +428,7 @@ export class ReferralCode {
       "mutable": false,
       "complexType": {
         "original": "DemoData<CopyTextViewProps>",
-        "resolved": "{ loading?: boolean; textColor?: string; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; backgroundColor?: string; borderRadius?: string; buttonType?: \"primary\" | \"secondary\"; borderColor?: string; onClick?: () => void; }",
+        "resolved": "{ loading?: boolean; textColor?: string; buttonType?: \"primary\" | \"secondary\"; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; backgroundColor?: string; borderRadius?: string; borderColor?: string; onClick?: () => void; }",
         "references": {
           "DemoData": {
             "location": "import",

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { GenericTableView } from "../../tables/GenericTableView";
-import { AvailableNoExpiry, PendingNoUnpend, Redeemed, Denied, PendingReview, PayoutSent, PayoutFailed, PendingNewTaxForm, PendingPartnerCreation, PendingTaxReview, PendingTaxSubmission, PayoutCancelled, } from "./ReferralTableRewardsCell.stories";
-import { DateCell, PendingReview as PendingReviewStatus, Pending as PendingStatus, Denied as DeniedStatus, Converted as ConvertedStatus, InProgress, } from "./ReferralTableCell.stories";
+import { Converted as ConvertedStatus, DateCell, Denied as DeniedStatus, InProgress, PendingReview as PendingReviewStatus, Pending as PendingStatus, } from "./ReferralTableCell.stories";
+import { AvailableNoExpiry, Denied, PayoutCancelled, PayoutFailed, PayoutSent, PendingNewTaxForm, PendingNoUnpend, PendingPartnerCreation, PendingReview, PendingTaxReview, PendingTaxSubmission, Redeemed, } from "./ReferralTableRewardsCell.stories";
 import scenario from "./referral-table.feature";
 export default {
   title: "Components/Referral Table",

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

@@ -1,9 +1,9 @@
 import { Component, h, Prop } from "@stencil/core";
 import { DateTime } from "luxon";
-import { TextSpanView } from "../../sqm-text-span/sqm-text-span-view";
-import { createStyleSheet } from "../../../styling/JSS";
 import { intl } from "../../../global/global";
+import { createStyleSheet } from "../../../styling/JSS";
 import { luxonLocale } from "../../../utils/utils";
+import { TextSpanView } from "../../sqm-text-span/sqm-text-span-view";
 export class ReferralTableRewardsCell {
   constructor() {
     this.statusText = "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PAYOUT_FAILED {Payout Failed} PAYOUT_CANCELLED {Payout Cancelled} PENDING_TAX_REVIEW {Pending} PENDING_NEW_TAX_FORM {Pending} PENDING_TAX_SUBMISSION {Pending} PENDING_PARTNER_CREATION {Pending} DENIED {Denied} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }";
@@ -36,6 +36,7 @@ export class ReferralTableRewardsCell {
           padding: "var(--sl-spacing-x-small) var(--sl-spacing-medium)",
         },
         "&::part(base)": {
+          border: "var(--sqm-border-thickness) solid var(--sqm-border-color)",
           opacity: "1",
         },
         "&::part(summary-icon)": {
@@ -43,7 +44,6 @@ export class ReferralTableRewardsCell {
         },
         "&::part(summary-icon[open])": {
           transform: "rotate(-90deg)",
-          background: "red",
         },
       },
       BadgeContainer: {
@@ -54,23 +54,64 @@ export class ReferralTableRewardsCell {
       BoldText: {
         "font-weight": "var(--sl-font-weight-semibold)",
       },
-      StatusBadge: {
+      RedeemBadge: {
         paddingLeft: "var(--sl-spacing-xxx-small)",
         "&::part(base)": {
           textAlign: "center",
           maxWidth: "170px",
           whiteSpace: "pre-line",
+          background: "var(--sqm-informative-color-icon)",
+          color: "var(--sl-color-white)",
         },
       },
-      RedeemBadge: {
+      DangerBadge: {
         paddingLeft: "var(--sl-spacing-xxx-small)",
         "&::part(base)": {
-          background: "var(--sl-color-blue-600)",
+          textAlign: "center",
+          maxWidth: "170px",
+          whiteSpace: "pre-line",
+          background: "var(--sqm-danger-color-icon)",
+          color: "var(--sl-color-white)",
+        },
+      },
+      WarningBadge: {
+        paddingLeft: "var(--sl-spacing-xxx-small)",
+        "&::part(base)": {
+          textAlign: "center",
+          maxWidth: "170px",
+          whiteSpace: "pre-line",
+          background: "var(--sqm-warning-color-icon)",
+          color: "var(--sl-color-white)",
+        },
+      },
+      SuccessBadge: {
+        paddingLeft: "var(--sl-spacing-xxx-small)",
+        "&::part(base)": {
+          textAlign: "center",
+          maxWidth: "170px",
+          whiteSpace: "pre-line",
+          background: "var(--sqm-success-color-icon)",
+          color: "var(--sl-color-white)",
         },
       },
     };
     const sheet = createStyleSheet(style);
     const styleString = sheet.toString();
+    const getBadgeCSSClass = (badgeType) => {
+      switch (badgeType) {
+        case "primary":
+          return sheet.classes.RedeemBadge;
+        case "danger":
+          return sheet.classes.DangerBadge;
+        case "success":
+          return sheet.classes.SuccessBadge;
+        case "warning":
+        case "info":
+          return sheet.classes.WarningBadge;
+        default:
+          return sheet.classes.WarningBadge;
+      }
+    };
     const getState = (reward, taxConnection) => {
       var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
       const possibleStates = [
@@ -121,7 +162,7 @@ export class ReferralTableRewardsCell {
         if (!((_l = taxConnection === null || taxConnection === void 0 ? void 0 : taxConnection.publisher) === null || _l === void 0 ? void 0 : _l.withdrawalSettings))
           return "PENDING_PARTNER_CREATION";
       }
-      if ((_m = reward === null || reward === void 0 ? void 0 : reward.pendingReasons) === null || _m === void 0 ? void 0 : _m.includes("PAYOUT_CONFIGURATION_MISSING")) {
+      if ((_m = reward === null || reward === void 0 ? void 0 : reward.pendingReasons) === null || _m === void 0 ? void 0 : _m.includes("MISSING_PAYOUT_CONFIGURATION")) {
         return "PENDING_PARTNER_CREATION";
       }
       if (reward.statuses.length === 1)
@@ -177,20 +218,14 @@ export class ReferralTableRewardsCell {
           h(TextSpanView, { type: "p" },
             h("span", { part: "sqm-cell-value", class: sheet.classes.BoldText }, reward.prettyValue)),
           h("div", { class: sheet.classes.BadgeContainer },
-            state === "PENDING" && reward.dateScheduledFor ? (h("sl-badge", { class: slBadgeType === "primary"
-                ? sheet.classes.RedeemBadge
-                : sheet.classes.StatusBadge, type: slBadgeType, pill: true }, intl.formatMessage({
+            state === "PENDING" && reward.dateScheduledFor ? (h("sl-badge", { class: getBadgeCSSClass(slBadgeType), type: slBadgeType, pill: true }, intl.formatMessage({
               id: "pendingForText",
               defaultMessage: this.pendingForText,
             }, {
               status: badgeText,
               date: getTimeDiff(reward.dateScheduledFor),
-            }))) : (h("sl-badge", { class: slBadgeType === "primary"
-                ? sheet.classes.RedeemBadge
-                : sheet.classes.StatusBadge, type: slBadgeType, pill: true }, badgeText)),
-            reward.dateExpires && state === "AVAILABLE" && (h("sl-badge", { class: slBadgeType === "primary"
-                ? sheet.classes.RedeemBadge
-                : sheet.classes.StatusBadge, type: "info", pill: true },
+            }))) : (h("sl-badge", { class: getBadgeCSSClass(slBadgeType), type: slBadgeType, pill: true }, badgeText)),
+            reward.dateExpires && state === "AVAILABLE" && (h("sl-badge", { class: getBadgeCSSClass(slBadgeType), type: "info", pill: true },
               this.expiringText,
               ` ${getTimeDiff(reward.dateExpires)}`)))),
         h("div", null,
@@ -277,7 +312,8 @@ export class ReferralTableRewardsCell {
         "resolved": "Reward[]",
         "references": {
           "Reward": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         }
       },
@@ -296,7 +332,8 @@ export class ReferralTableRewardsCell {
         "resolved": "ImpactConnection",
         "references": {
           "ImpactConnection": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         }
       },

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

@@ -1,23 +1,62 @@
 import { Component, h, Prop } from "@stencil/core";
 import { createStyleSheet } from "../../../styling/JSS";
 const style = {
-  Badge: {
+  SubText: {
+    fontSize: "var(--sl-font-size-small)",
+    color: "var(--sqm-text-subdued)",
+    margin: "0",
+  },
+  RedeemBadge: {
     "&::part(base)": {
       fontSize: "var(--sl-font-size-small)",
       padding: "4px 8px",
+      textAlign: "center",
+      maxWidth: "170px",
       whiteSpace: "pre-line",
+      background: "var(--sqm-informative-color-icon)",
+      color: "var(--sl-color-white)",
     },
   },
-  SubText: {
-    fontSize: "var(--sl-font-size-small)",
-    color: "var(--sl-color-neutral-500)",
-    margin: "0",
+  DangerBadge: {
+    "&::part(base)": {
+      fontSize: "var(--sl-font-size-small)",
+      padding: "4px 8px",
+      textAlign: "center",
+      maxWidth: "170px",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-danger-color-icon)",
+      color: "var(--sl-color-white)",
+    },
+  },
+  WarningBadge: {
+    "&::part(base)": {
+      fontSize: "var(--sl-font-size-small)",
+      padding: "4px 8px",
+      textAlign: "center",
+      maxWidth: "170px",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-warning-color-icon)",
+      color: "var(--sl-color-white)",
+    },
+  },
+  SuccessBadge: {
+    "&::part(base)": {
+      fontSize: "var(--sl-font-size-small)",
+      padding: "4px 8px",
+      textAlign: "center",
+      maxWidth: "170px",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-success-color-icon)",
+      color: "var(--sl-color-white)",
+    },
   },
 };
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export class ReferralTableStatusCell {
   render() {
+    const sheet = createStyleSheet(style);
+    const styleString = sheet.toString();
     const getBadgeType = (fraudStatus) => {
       if (fraudStatus === "PENDING")
         return "warning";
@@ -27,9 +66,24 @@ export class ReferralTableStatusCell {
         return "success";
       return "warning";
     };
+    const getBadgeCSSClass = (badgeType) => {
+      switch (badgeType) {
+        case "primary":
+          return sheet.classes.RedeemBadge;
+        case "danger":
+          return sheet.classes.DangerBadge;
+        case "success":
+          return sheet.classes.SuccessBadge;
+        case "warning":
+        case "info":
+          return sheet.classes.WarningBadge;
+        default:
+          return sheet.classes.WarningBadge;
+      }
+    };
     return (h("div", null,
       h("style", { type: "text/css" }, styleString),
-      h("sl-badge", { pill: true, type: getBadgeType(this.fraudStatus), class: sheet.classes.Badge }, this.statusText),
+      h("sl-badge", { pill: true, type: getBadgeType(this.fraudStatus), class: getBadgeCSSClass(getBadgeType(this.fraudStatus)) }, this.statusText),
       this.statusSubText ? (h("p", { class: sheet.classes.SubText }, this.statusSubText)) : null));
   }
   static get is() { return "sqm-referral-table-status-cell"; }
@@ -60,7 +114,8 @@ export class ReferralTableStatusCell {
         "resolved": "\"APPROVED\" | \"DENIED\" | \"PENDING\"",
         "references": {
           "FraudStatus": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         }
       },

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

@@ -59,7 +59,8 @@ export class ReferralTableGenericColumn {
             "location": "global"
           },
           "Referral": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         },
         "return": "Promise<any>"

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

@@ -128,7 +128,8 @@ export class ReferralTableDateColumn {
             "location": "global"
           },
           "Referral": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         },
         "return": "Promise<any>"
@@ -166,7 +167,8 @@ export class ReferralTableDateColumn {
             "location": "global"
           },
           "Referrer": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         },
         "return": "Promise<any>"

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

@@ -306,10 +306,12 @@ export class ReferralTableRewardsColumn {
             "location": "global"
           },
           "Referral": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           },
           "ImpactConnection": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         },
         "return": "Promise<any>"
@@ -347,7 +349,8 @@ export class ReferralTableRewardsColumn {
             "location": "global"
           },
           "Referrer": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         },
         "return": "Promise<any>"

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

@@ -243,10 +243,12 @@ export class ReferralTableStatusColumn {
             "location": "global"
           },
           "Referral": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           },
           "FraudStatus": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         },
         "return": "Promise<any>"
@@ -284,7 +286,8 @@ export class ReferralTableStatusColumn {
             "location": "global"
           },
           "Referrer": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         },
         "return": "Promise<any>"

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

@@ -153,7 +153,8 @@ export class ReferralTableUserColumn {
             "location": "global"
           },
           "Referral": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         },
         "return": "Promise<any>"
@@ -191,7 +192,8 @@ export class ReferralTableUserColumn {
             "location": "global"
           },
           "Referrer": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         },
         "return": "Promise<any>"

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

@@ -96,7 +96,7 @@ const getMockData = () => {
           prettyValue: "1 Point",
           statuses: statuses[Math.floor(Math.random() * statuses.length)],
           // statuses: ["PENDING"],
-          // pendingReasons: ["US_TAX", "PAYOUT_CONFIGURATION_MISSING"],
+          // pendingReasons: ["US_TAX", "MISSING_PAYOUT_CONFIGURATION"],
           globalRewardKey: null,
           programRewardKey: "partnerReward",
           meta: {

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

@@ -10,7 +10,7 @@ import mockReferralData from "./mockReferralData";
 import { tryMethod, useReferralTable } from "./useReferralTable";
 /**
  * @uiName Referral Table
- * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-referral-card","span","sqm-tab","sqb-program-section","sqb-conditional-section"]
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","template","sqm-tab","sqb-program-section","sqb-conditional-section"]
  * @validChildren ["sqm-referral-table-column","sqm-referral-table-date-column","sqm-referral-table-rewards-column","sqm-referral-table-status-column","sqm-referral-table-user-column","sqm-empty"]
  * @exampleGroup Referrals
  * @slots [{"name":"", "title":"Table Row"},{"name":"empty", "title":"Empty"},{"name":"loading","title":"Loading"}]
@@ -272,7 +272,8 @@ export class ReferralTable {
             "path": "../../tables/GenericTableView"
           },
           "Referral": {
-            "location": "global"
+            "location": "import",
+            "path": "../../saasquatch"
           }
         }
       },

package/dist/collection/components/sqm-referred-registration/sqm-referred-registration.js

@@ -9,7 +9,7 @@ import { EmailRegistrationView, } from "../views/email-registration-view";
  * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqb-program-section","sqb-conditional-section"]
  * @compatibility Built for instant access
  * @exampleGroup Instant Access
- * @example Instant Access Friend Registration - <sqm-referred-registration></sqm-referred-registration>
+ * @example Friend Registration - <sqm-referred-registration></sqm-referred-registration>
  * @slots [{"name":"top","title":"Top Content"},{"name":"bottom","title":"Bottom Content"}]
  */
 export class ReferredRegistration {
@@ -110,13 +110,6 @@ export class ReferredRegistration {
      * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
      */
     this.paddingLeft = "large";
-    /**
-     * @uiName Background color
-     * @uiWidget color
-     * @uiGroup Card style
-     * @uiType string
-     */
-    this.backgroundColor = "#ffffff";
     /**
      * @undocumented
      * @uiType boolean
@@ -565,8 +558,7 @@ export class ReferredRegistration {
         "text": ""
       },
       "attribute": "background-color",
-      "reflect": false,
-      "defaultValue": "\"#ffffff\""
+      "reflect": false
     },
     "includeCookies": {
       "type": "boolean",

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

@@ -8,24 +8,24 @@ export default {
     scenario,
   },
 };
-const StoryBase = (props) => () => {
+const StoryBase = (props) => {
   return h(RewardExchangeView, Object.assign({}, props));
 };
-export const ChooseReward = StoryBase(Data.rewardExchange);
-export const CustomErrorMessage = StoryBase(Data.rewardExchangeCustomErrorMsg);
-export const LongTextRewardExhange = StoryBase(Data.rewardExchangeLongText);
-export const ChooseRewardSelected = StoryBase(Data.rewardExchangeSelected);
-export const ChooseAmount = StoryBase(Data.chooseAmountFixed);
-export const ChooseAmountNoDescription = StoryBase(Data.chooseAmountFixedNoDescription);
-export const ChooseAmountVariableAndStepped = StoryBase(Data.chooseAmountVariable);
-export const ChooseAmountVariableAndSteppedNoDescription = StoryBase(Data.chooseAmountVariableNoDescription);
-export const chooseAmountVariableAndSteppedDisabled = StoryBase(Data.chooseAmountVariableDisabled);
-export const chooseAmountVariableAndSteppedUnavailable = StoryBase(Data.chooseAmountVariableUnavailable);
-export const Confirm = StoryBase(Data.confirmFixed);
-export const ConfirmVariableAndStepped = StoryBase(Data.confirmVariable);
-export const RedemptionError = StoryBase(Data.redemptionError);
-export const QueryError = StoryBase(Data.queryError);
-export const SuccessPromo = StoryBase(Data.success);
-export const SuccessVariableAndStepped = StoryBase(Data.successVariable);
-export const Loading = StoryBase(Data.loading);
-export const Empty = StoryBase(Data.empty);
+export const ChooseReward = () => StoryBase(Data.rewardExchange);
+export const CustomErrorMessage = () => StoryBase(Data.rewardExchangeCustomErrorMsg);
+export const LongTextRewardExhange = () => StoryBase(Data.rewardExchangeLongText);
+export const ChooseRewardSelected = () => StoryBase(Data.rewardExchangeSelected);
+export const ChooseAmount = () => StoryBase(Data.chooseAmountFixed);
+export const ChooseAmountNoDescription = () => StoryBase(Data.chooseAmountFixedNoDescription);
+export const ChooseAmountVariableAndStepped = () => StoryBase(Data.chooseAmountVariable);
+export const ChooseAmountVariableAndSteppedNoDescription = () => StoryBase(Data.chooseAmountVariableNoDescription);
+export const chooseAmountVariableAndSteppedDisabled = () => StoryBase(Data.chooseAmountVariableDisabled);
+export const chooseAmountVariableAndSteppedUnavailable = () => StoryBase(Data.chooseAmountVariableUnavailable);
+export const Confirm = () => StoryBase(Data.confirmFixed);
+export const ConfirmVariableAndStepped = () => StoryBase(Data.confirmVariable);
+export const RedemptionError = () => StoryBase(Data.redemptionError);
+export const QueryError = () => StoryBase(Data.queryError);
+export const SuccessPromo = () => StoryBase(Data.success);
+export const SuccessVariableAndStepped = () => StoryBase(Data.successVariable);
+export const Loading = () => StoryBase(Data.loading);
+export const Empty = () => StoryBase(Data.empty);