@saasquatch/mint-components 1.15.0-12 → 1.15.0-120

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

@@ -8,9 +8,11 @@ export function ProgramExplainerStepView(props) {
       width: "100%",
       padding: "var(--sl-spacing-x-large)",
       lineHeight: "var(--sl-line-height-dense)",
-      borderRadius: props.borderRadius || "var(--sl-border-radius-large)",
+      borderRadius: props.borderRadius
+        ? `${props.borderRadius}px`
+        : "var(--sqm-border-radius-normal)",
       color: props.textColor || "var(--sqm-text)",
-      background: props.backgroundColor || "var(--sl-color-primary-50)",
+      background: props.backgroundColor || "var(--sqm-accent-color-background)",
       "@media (max-width: 499px)": {
         flexDirection: "row",
         width: "auto",
@@ -46,7 +48,7 @@ export function ProgramExplainerStepView(props) {
       objectFit: "cover",
       userSelect: "none",
       background: props.iconBackgroundColor || "var(--sl-color-white)",
-      color: props.iconColor || "var(--sl-color-primary-500)",
+      color: props.iconColor || "var(--sqm-accent-color-icon)",
       fontSize: "26px",
       textAlign: "center",
       lineHeight: "72px",

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

@@ -5,7 +5,7 @@ import { ProgramExplainerStepView } from "./sqm-program-explainer-step-view";
 /**
  * @uiName Program Explainer Step
  * @exampleGroup Common Components
- * @example Program Explainer Step - <sqm-program-explainer-step description="Explore and use our product while earning points in the process!" header="Earn points" icon="cash-stack" text-color="#000000"></sqm-program-explainer-step>
+ * @example Program Explainer Step - <sqm-program-explainer-step description="Explore and use our product while earning points in the process!" header="Earn points" icon="cash-stack"></sqm-program-explainer-step>
  * @validParents ["sqm-program-explainer"]
  */
 export class ProgramExplainerStep {
@@ -115,11 +115,11 @@ export class ProgramExplainerStep {
       "reflect": false
     },
     "borderRadius": {
-      "type": "string",
+      "type": "number",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "number",
+        "resolved": "number",
         "references": {}
       },
       "required": false,
@@ -132,7 +132,7 @@ export class ProgramExplainerStep {
             "text": "number",
             "name": "type"
           }],
-        "text": ""
+        "text": "Amount in pixels"
       },
       "attribute": "border-radius",
       "reflect": false

package/dist/collection/components/sqm-qr-code/sqm-qr-code-view.js

@@ -89,5 +89,5 @@ export function QrCodeView({ error, qrLink, titleText, downloadCodeText, printCo
       codeContent,
       h("div", { class: sheet.classes.ButtonContainer },
         h("sl-button", { size: "small", exportparts: "base: primarybutton-base", type: "primary", onClick: createDownloadable }, downloadCodeText),
-        h("sl-button", { size: "small", exportparts: "base: textbutton-base", type: "text", onClick: createPrintable }, printCodeText)))));
+        h("sl-button", { size: "small", exportparts: "base: secondarybutton-base", type: "text", onClick: createPrintable }, printCodeText)))));
 }

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

@@ -42,8 +42,8 @@ const vanillaStyle = `
   `;
 export const RadioCardView = ({ title, icon, description, selected, }) => {
   const border = selected
-    ? "1px solid var(--sl-color-primary-500)"
-    : "1px solid #CACFD3";
+    ? "var(--sqm-border-thickness) solid var(--sqm-primary-color)"
+    : "var(--sqm-border-thickness) solid var(--sqm-border-color)";
   return (h("div", { part: "sqm-base", class: sheet.classes.Container, style: {
       border,
     } },

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

@@ -8,9 +8,9 @@ const vanillaStyle = `
 export function ReferralCardView(props) {
   const style = {
     Container: {
-      borderRadius: props.borderRadius || "var(--sl-border-radius-large)",
+      borderRadius: props.borderRadius || "var(--sqm-border-radius-normal)",
       color: props.textColor || "var(--sqm-text)",
-      background: props.backgroundColor || "var(--sl-color-neutral-0)",
+      background: props.backgroundColor || "var(--sqm-portal-background)",
       display: "flex",
       flexDirection: "column",
       rowGap: "var(--sl-spacing-large)",
@@ -36,9 +36,11 @@ export function ReferralCardView(props) {
   };
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  const borderColor = props.borderColor || "var(--sl-color-neutral-300)";
+  const borderColor = props.borderColor || "var(--sqm-border-color)";
   return (h("div", { part: "sqm-base", class: sheet.classes.Container, style: {
-      border: `${props.hideBorder ? "none" : "1px solid " + borderColor}`,
+      border: `${props.hideBorder
+        ? "none"
+        : `var(--sqm-border-thickness) solid ${borderColor}`}`,
       "padding-top": `var(--sl-spacing-${props.paddingTop})`,
       "padding-right": `var(--sl-spacing-${props.paddingRight})`,
       "padding-bottom": `var(--sl-spacing-${props.paddingBottom})`,

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,7 @@ export class ReferralCard {
         "text": ""
       },
       "attribute": "background-color",
-      "reflect": false,
-      "defaultValue": "\"#ffffff\""
+      "reflect": false
     },
     "borderColor": {
       "type": "string",
@@ -306,7 +300,7 @@ export class ReferralCard {
             "text": "color",
             "name": "format"
           }],
-        "text": "Border color of share link container (default is set to 1px solid transparent)"
+        "text": "Border color of container"
       },
       "attribute": "border-color",
       "reflect": false
@@ -355,7 +349,7 @@ export class ReferralCard {
             "text": "number",
             "name": "uiType"
           }],
-        "text": "The border radius on the share link container (in pixels)"
+        "text": "The border radius (in pixels)"
       },
       "attribute": "border-radius",
       "reflect": false

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>
  */
@@ -62,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"]
@@ -417,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,
@@ -428,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",