@saasquatch/mint-components 1.15.0-5 → 1.15.0-51

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

@@ -19,21 +19,25 @@ const style = {
     margin: "0 auto",
   },
   Select: {
+    "&::part(base)": {
+      borderRadius: "var(--sqm-input-border-radius)",
+    },
     "&::part(label)": {
-    //   color: "var(--sl-color-primary-500)",
+      color: "var(--sqm-input-label-color)",
     },
     "&::part(menu)": {
       maxHeight: "450px",
     },
     "& sl-menu-item::part(checked-icon)": {
       top: "8px",
+      color: "var(--sqm-text)",
     },
     "& sl-menu-item::part(base)": {
       flexDirection: "column",
     },
     "& sl-menu-item::part(base):focus": {
-      background: "transparent",
-      color: "var(--sl-color-gray-700)",
+      background: "var(--sqm-accent-color-background)",
+      color: "var(--sqm-text)",
     },
   },
   ProgressBar: {
@@ -53,7 +57,7 @@ const style = {
         flex: "1 1 0",
       },
       "& .text.subdued": {
-        color: "var(--sl-color-neutral-200)",
+        color: "var(--sqm-text-subdued)",
       },
     },
   },
@@ -68,6 +72,9 @@ const style = {
     userSelect: "none",
     height: "120px",
     "&::part(base)": {
+      background: "var(--sqm-portal-background)",
+      border: "var(--sqm-border-thickness) solid var(--sqm-border-color)",
+      borderRadius: "var(--sqm-border-radius-normal)",
       boxShadow: "none",
       width: "100%",
     },
@@ -76,10 +83,11 @@ const style = {
       padding: 0,
     },
     "& .selected": {
+      borderRadius: "var(--sqm-border-radius-normal)",
       position: "relative",
       top: "-2%",
       left: "100%",
-      color: "var(--sl-color-primary-500)",
+      color: "var(--sqm-primary-color)",
       margin: "-9px",
     },
   },
@@ -111,7 +119,7 @@ const style = {
       fontSize: "var(--sl-font-size-medium)",
       lineHeight: "var(--sl-line-height-dense)",
       fontWeight: "600",
-      color: "var(--sl-color-neutral-1000)",
+      color: "var(--sqm-text)",
       display: "-webkit-box",
       "-webkit-line-clamp": "1",
       "-webkit-box-orient": "vertical",
@@ -121,7 +129,7 @@ const style = {
       fontSize: "var(--sl-font-size-small)",
       lineHeight: "var(--sl-line-height-dense)",
       marginTop: "var(--sl-spacing-x-small)",
-      color: "var(--sl-color-neutral-500)",
+      color: "var(--sqm-text-subdued)",
       display: "-webkit-box",
       "-webkit-line-clamp": "1",
       "-webkit-box-orient": "vertical",
@@ -132,7 +140,7 @@ const style = {
       lineHeight: "var(--sl-line-height-dense)",
       marginTop: "var(--sl-spacing-x-small)",
       fontWeight: "600",
-      color: "var(--sl-color-warning-600)",
+      color: "var(--sqm-warning-color-icon)",
       display: "-webkit-box",
       "-webkit-line-clamp": "1",
       "-webkit-box-orient": "vertical",
@@ -167,7 +175,6 @@ const style = {
     "& .text": {
       width: "50%",
       maxWidth: "400px",
-      //   minWidth: "330px",
       "@media (max-width: 799px)": {
         width: "auto",
         margin: "auto",
@@ -176,17 +183,17 @@ const style = {
     "& .title": {
       fontSize: "var(--sl-font-size-large)",
       fontWeight: "var(--sl-font-weight-semibold)",
-      color: "var(--sl-color-neutral-1000)",
+      color: "var(--sqm-text)",
     },
     "& .points": {
       fontSize: "var(--sl-font-size-large)",
       fontWeight: "var(--sl-font-weight-semibold)",
-      color: "var(--sl-color-primary-500)",
+      color: "var(--sqm-accent-color-text)",
     },
     "& .description": {
       fontSize: "var(--sl-font-size-medium)",
       fontWeight: "var(--sl-font-weight-normal)",
-      color: "var(--sl-color-neutral-500)",
+      color: "var(--sqm-text-subdued)",
       margin: "var(--sl-spacing-medium) 0",
       lineHeight: "var(--sl-line-height-dense)",
       marginTop: "var(--sl-spacing-xx-small)",
@@ -195,14 +202,14 @@ const style = {
       marginBottom: "var(--sl-spacing-xxx-large)",
     },
     "& sl-menu-item[disabled]::part(label)": {
-      color: "var(--sl-color-neutral-300)",
+      color: "var(sqm-text-subdued)",
     },
     "& sl-menu-item[disabled]": {
       "& .step-cost": {
-        color: "var(--sl-color-neutral-300)",
+        color: "var(sqm-text-subdued)",
       },
       "& .step-value": {
-        color: "var(--sl-color-neutral-300)",
+        color: "var(sqm-text-subdued)",
       },
     },
   },
@@ -210,16 +217,16 @@ const style = {
     display: "flex",
     flexDirection: "column",
     "&::part(label)": {
-      color: "var(--sl-color-neutral-900)",
+      color: "var(--sqm-text)",
       margin: "0",
     },
     "& .step-cost": {
-      color: "var(--sl-color-neutral-500)",
+      color: "var(--sqm-text-subdued)",
       marginBottom: "var(--sl-spacing-x-small)",
     },
     "& .step-unavailable": {
       fontSize: "var(--sl-font-size-small)",
-      color: "var(--sl-color-warning-500)",
+      color: "var(--sqm-warning-color-text)",
       margin: "0",
     },
   },
@@ -228,10 +235,10 @@ const style = {
     "& .title": {
       fontSize: "var(--sl-font-size-large)",
       fontWeight: "var(--sl-font-weight-semibold)",
-      color: "var(--sl-color-neutral-1000)",
+      color: "var(--sqm-text)",
     },
     "& .description": {
-      color: "var(--sl-color-neutral-400)",
+      color: "var(--sqm-text-subued)",
       maxWidth: "350px",
       margin: "0 auto",
       lineHeight: "var(--sl-line-height-dense)",
@@ -242,7 +249,7 @@ const style = {
       maxWidth: "350px",
       margin: "-30px auto var(--sl-spacing-xxx-large) auto",
       textAlign: "left",
-      color: "var(--sl-color-neutral-700)",
+      color: "var(--sqm-text-subdued)",
     },
   },
   Grid: {
@@ -284,10 +291,9 @@ const style = {
     },
     "& .field": {
       width: "30%",
-      textTransform: "uppercase",
       fontSize: "var(--sl-font-size-medium)",
       fontWeight: "var(--sl-font-weight-normal)",
-      color: "var(--sl-color-neutral-400)",
+      color: "var(--sqm-text-subdued)",
       textAlign: "left",
       paddingRight: "var(--sl-spacing-xxx-large)",
       "@media (max-width: 499px)": {
@@ -301,7 +307,7 @@ const style = {
       fontWeight: "var(--sl-font-weight-semibold)",
     },
     "& .top-border": {
-      borderTop: "1px solid var(--sl-color-neutral-200)",
+      borderTop: "var(--sqm-border-thickness) solid var(--sqm-border-color)",
     },
     "& .image": {
       width: "200px",
@@ -317,10 +323,6 @@ const style = {
     "& .cancel": {
       marginLeft: "auto",
       marginRight: "var(--sl-spacing-medium)",
-      "&::part(base)": {
-        fontWeight: "var(--sl-font-weight-normal)",
-        color: "var(--sl-color-neutral-1000)",
-      },
       "@media (max-width: 499px)": {
         width: "100%",
         marginRight: "0",
@@ -328,12 +330,6 @@ const style = {
       },
     },
     "& .continue": {
-      "&::part(base)": {
-        background: "var(--sl-color-primary-500)",
-        borderColor: "var(--sl-color-primary-500)",
-        fontWeight: "var(--sl-font-weight-normal)",
-        color: "var(--sl-color-neutral-0)",
-      },
       "@media (max-width: 499px)": {
         width: "100%",
       },
@@ -412,9 +408,10 @@ export function RewardExchangeView(props) {
           var _a, _b, _c, _d, _e;
           const style = {
             boxShadow: item.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key)
-              ? "0 0 0 2px var(--sl-color-primary-500)"
+              ? "0 0 0 2px var(--sqm-primary-color)"
               : "none",
-            borderRadius: "4px",
+            borderRadius: "var(--sqm-border-radius-normal)",
+            borderColor: "none",
           };
           return (h("div", { key: item.key, style: style },
             h("sl-card", { exportparts: "base: exchange-card-container", class: sheet.classes.Card, style: {
@@ -475,7 +472,7 @@ export function RewardExchangeView(props) {
                     }))))))));
         }))),
         h("div", { class: sheet.classes.Button },
-          h("sl-button", { exportparts: "base: primarybutton-base", class: "continue right", size: "large", onClick: () => callbacks.setStage("chooseAmount"), loading: states.loading, disabled: !states.selectedItem }, states.content.text.continueText))),
+          h("sl-button", { exportparts: "base: primarybutton-base", type: "primary", class: "continue right", size: "large", onClick: () => callbacks.setStage("chooseAmount"), loading: states.loading, disabled: !states.selectedItem }, states.content.text.continueText))),
     ];
   }
   function chooseAmount() {
@@ -495,8 +492,8 @@ export function RewardExchangeView(props) {
             ((_d = states.selectedItem) === null || _d === void 0 ? void 0 : _d.ruleType) === "FIXED_GLOBAL_REWARD" ? (h("div", { class: "description" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description)) : (h("div", null, input)),
             h("div", { class: "space" }))),
         h("div", { class: sheet.classes.Button },
-          h("sl-button", { exportparts: "base: secondarybutton-base", class: "cancel", size: "large", type: "text", onClick: () => callbacks.resetState() }, states.content.text.cancelText),
-          h("sl-button", { exportparts: "base: primarybutton-base", class: "continue", size: "large", onClick: () => callbacks.setStage("confirmation"), disabled: isDisabled }, states.content.text.continueToConfirmationText)))));
+          h("sl-button", { exportparts: "base: secondarybutton-base", class: "cancel", size: "large", type: "secondary", onClick: () => callbacks.resetState() }, states.content.text.cancelText),
+          h("sl-button", { exportparts: "base: primarybutton-base", class: "continue", size: "large", type: "primary", onClick: () => callbacks.setStage("confirmation"), disabled: isDisabled }, states.content.text.continueToConfirmationText)))));
   }
   function confirmation() {
     const cost = (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettySourceValue) || selectedItem.prettySourceValue;
@@ -519,8 +516,8 @@ export function RewardExchangeView(props) {
           h("div", { class: "field" }, states.content.text.costTitle),
           h("div", { class: "value" }, cost)),
         h("div", { class: sheet.classes.Button },
-          h("sl-button", { class: "cancel", type: "text", size: "large", onClick: () => callbacks.setStage("chooseAmount") }, states.content.text.backText),
-          h("sl-button", { class: "continue", size: "large", loading: states.loading, onClick: callbacks.exchangeReward }, states.content.text.redeemText)))));
+          h("sl-button", { class: "cancel", type: "secondary", size: "large", onClick: () => callbacks.setStage("chooseAmount") }, states.content.text.backText),
+          h("sl-button", { class: "continue", size: "large", type: "primary", loading: states.loading, onClick: callbacks.exchangeReward }, states.content.text.redeemText)))));
   }
   function success() {
     var _a, _b, _c, _d, _e, _f;
@@ -572,7 +569,7 @@ export function RewardExchangeView(props) {
                   width: "100px",
                   height: "100px",
                   margin: "9px",
-                  "--border-radius": "4px",
+                  "--border-radius": "var(--sqm-border-radius-normal)",
                 } })),
             h("div", { style: {
                 margin: "var(--sl-spacing-small) var(--sl-spacing-small) 0 0",

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

@@ -765,10 +765,9 @@ function useRewardExchangeListDemo(props) {
       queryError: false,
       loading: false,
       noExchangeOptions: false,
-      empty: EmptySlot(),
     },
     data: {
-      shareCode: "SHARECODE123",
+      // shareCode: "SHARECODE123",
       exchangeList: demoRewardExchange.data.exchangeList,
     },
     callbacks: {

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

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
 import scenario1 from "./columns/sqm-rewards-table-date-column.feature";
 import scenario2 from "./columns/sqm-rewards-table-reward-column.feature";
-import scenario3 from "./columns/sqm-rewards-table-status-column.feature";
 import scenario4 from "./columns/sqm-rewards-table-source-column.feature";
+import scenario3 from "./columns/sqm-rewards-table-status-column.feature";
 const scenario = scenario1 + scenario2 + scenario3 + scenario4;
 export default {
   title: "Components/Rewards Table Cell",
@@ -30,7 +30,7 @@ const rewardsData = {
   prettyAvailableNumber: "19",
   prettyRedeemedNumber: "0",
   statuses: ["AVAILABLE", "PENDING"],
-  pendingReasons: ["US_TAX", "PAYOUT_CONFIGURATION_MISSING"],
+  pendingReasons: ["US_TAX", "MISSING_PAYOUT_CONFIGURATION"],
   globalRewardKey: null,
   rewardSource: "MANUAL",
   prettyRedeemedCredit: "0 Points",
@@ -323,7 +323,7 @@ export const StatusCellPendingTaxSubmission = () => {
 export const StatusCellPendingPartnerCreation = () => {
   return (h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: {
       ...rewardsData,
-      pendingReasons: ["PAYOUT_CONFIGURATION_MISSING"],
+      pendingReasons: ["MISSING_PAYOUT_CONFIGURATION"],
     } }));
 };
 export const StatusCellPayoutSent = () => {

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

@@ -115,11 +115,11 @@ export class RewardTableRewardsCell {
             height: "3px",
             width: "100%",
             margin: "var(--sl-spacing-xx-small) 0",
-            background: "var(--sl-color-neutral-200)",
+            background: "var(--sqm-border-color)",
             "&:after": {
               content: '""',
               display: "block",
-              background: "var(--sl-color-primary-300)",
+              background: "var(--sqm-accent-color-icon)",
               borderRadius: "100px",
               width: `${progress}%`,
               height: "100%",
@@ -170,7 +170,8 @@ export class RewardTableRewardsCell {
         "resolved": "Reward",
         "references": {
           "Reward": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         }
       },

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

@@ -22,7 +22,7 @@ export class RewardTableSourceCell {
       const rewardExchange = (h("div", null,
         h("span", { style: {
             fontSize: "var(--sl-font-size-small)",
-            color: "var(--sl-color-neutral-500)",
+            color: "var(--sqm-text-subdued)",
           } }, this.rewardExchangeText),
         h("br", null), (_a = reward.exchangedRewardRedemptionTransaction) === null || _a === void 0 ? void 0 :
         _a.prettyRedeemedCredit,
@@ -49,11 +49,11 @@ export class RewardTableSourceCell {
     };
     const Source = () => this.reward.rewardSource === "FRIEND_SIGNUP" ||
       this.reward.rewardSource === "REFERRED" ? (this.reward.referral === null ? (h("p", { style: {
-        color: "var(--sl-color-gray-400)",
+        color: "var(--sqm-text-subdued)",
       } }, this.deletedReferralText)) : (h("div", null,
       h("div", { style: {
           fontSize: "var(--sl-font-size-small)",
-          color: "var(--sl-color-neutral-500)",
+          color: "var(--sqm-text-subdued)",
         } }, intl.formatMessage({
         id: "referralText",
         defaultMessage: this.referralText,
@@ -76,7 +76,8 @@ export class RewardTableSourceCell {
         "resolved": "Reward",
         "references": {
           "Reward": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         }
       },

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

@@ -14,14 +14,47 @@ const style = {
   },
   RedeemBadge: {
     "&::part(base)": {
+      padding: "4px 8px",
+      fontSize: "var(--sl-font-size-small)",
+      textAlign: "center",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-informative-color-icon)",
+      color: "var(--sqm-informative-color-text)",
+    },
+  },
+  DangerBadge: {
+    "&::part(base)": {
+      padding: "4px 8px",
+      fontSize: "var(--sl-font-size-small)",
+      textAlign: "center",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-danger-color-icon)",
+      color: "var(--sqm-danger-color-text)",
+    },
+  },
+  WarningBadge: {
+    "&::part(base)": {
+      padding: "4px 8px",
       fontSize: "var(--sl-font-size-small)",
+      textAlign: "center",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-warning-color-icon)",
+      color: "var(--sqm-warning-color-text)",
+    },
+  },
+  SuccessBadge: {
+    "&::part(base)": {
       padding: "4px 8px",
-      background: "var(--sl-color-blue-600)",
+      fontSize: "var(--sl-font-size-small)",
+      textAlign: "center",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-success-color-icon)",
+      color: "var(--sqm-success-color-text)",
     },
   },
   Date: {
     fontSize: "var(--sl-font-size-small)",
-    color: "var(--sl-color-neutral-500)",
+    color: "var(--sqm-text-subdued)",
     margin: "0",
   },
 };
@@ -104,7 +137,7 @@ export class RewardTableStatusCell {
       if (!((_d = taxConnection === null || taxConnection === void 0 ? void 0 : taxConnection.publisher) === null || _d === void 0 ? void 0 : _d.withdrawalSettings))
         return this.pendingPartnerCreation;
     }
-    if ((_e = reward === null || reward === void 0 ? void 0 : reward.pendingReasons) === null || _e === void 0 ? void 0 : _e.includes("PAYOUT_CONFIGURATION_MISSING")) {
+    if ((_e = reward === null || reward === void 0 ? void 0 : reward.pendingReasons) === null || _e === void 0 ? void 0 : _e.includes("MISSING_PAYOUT_CONFIGURATION")) {
       return this.pendingPartnerCreation;
     }
     return "";
@@ -168,11 +201,25 @@ export class RewardTableStatusCell {
       : rewardStatus === "DENIED"
         ? this.deniedText
         : null;
+    // @ts-ignore
+    const getBadgeCSSClass = (badgeType) => {
+      switch (rewardStatus) {
+        case "AVAILABLE":
+          return sheet.classes.SuccessBadge;
+        case "REDEEMED":
+        case "PAYOUT_APPROVED":
+          return sheet.classes.RedeemBadge;
+        case "PENDING":
+        case "PENDING_REVIEW":
+          return sheet.classes.WarningBadge;
+        default:
+          return sheet.classes.DangerBadge;
+      }
+    };
+    const badgeCSSClass = getBadgeCSSClass(badgeType);
     return (h("div", { style: { display: "contents" } },
       h("style", { type: "text/css" }, styleString),
-      h("sl-badge", { type: badgeType, pill: true, class: rewardStatus === "REDEEMED" || rewardStatus === "PAYOUT_APPROVED"
-          ? sheet.classes.RedeemBadge
-          : sheet.classes.Badge }, statusText),
+      h("sl-badge", { type: badgeType, pill: true, class: badgeCSSClass }, statusText),
       h("p", { class: sheet.classes.Date }, fraudStatusText ||
         pendingReasons ||
         this.getPayoutStatusText(rewardStatus) ||
@@ -224,7 +271,8 @@ export class RewardTableStatusCell {
         "resolved": "Reward",
         "references": {
           "Reward": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         }
       },
@@ -243,7 +291,8 @@ export class RewardTableStatusCell {
         "resolved": "ImpactConnection",
         "references": {
           "ImpactConnection": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         }
       },

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

@@ -5,7 +5,7 @@ import { useRequestRerender } from "../../../tables/re-render";
  * @uiName Reward Table Date Column
  * @validParents ["sqm-rewards-table"]
  * @exampleGroup Rewards
- * @example Reward Table Date Column - <sqm-rewards-table-date-column column-title="Date received" date-shown="dateGiven"></sqm-rewards-table-date-column>
+ * @example Date Column - <sqm-rewards-table-date-column column-title="Date received" date-shown="dateGiven"></sqm-rewards-table-date-column>
  */
 export class RewardTableDateColumn {
   constructor() {
@@ -108,7 +108,8 @@ export class RewardTableDateColumn {
             "location": "global"
           },
           "Reward": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         },
         "return": "Promise<any>"

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

@@ -5,7 +5,7 @@ import { useRequestRerender } from "../../../tables/re-render";
  * @uiName Reward Table Customer Note Column
  * @validParents ["sqm-rewards-table"]
  * @exampleGroup Rewards
- * @example Reward Table Customer Note Column - <sqm-rewards-table-customer-note-column column-title="Note"></sqm-rewards-table-customer-note-column>
+ * @example Customer Note Column - <sqm-rewards-table-customer-note-column column-title="Note"></sqm-rewards-table-customer-note-column>
  */
 export class RewardTableCustomerNoteColumn {
   constructor() {
@@ -69,7 +69,8 @@ export class RewardTableCustomerNoteColumn {
             "location": "global"
           },
           "Reward": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         },
         "return": "Promise<any>"

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

@@ -5,7 +5,7 @@ import { useRequestRerender } from "../../../tables/re-render";
  * @uiName Rewards Table Reward Column
  * @validParents ["sqm-rewards-table"]
  * @exampleGroup Rewards
- * @example Rewards Table Reward 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>
+ * @example Reward 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>
  */
 export class RewardsTableColumn {
   constructor() {
@@ -147,7 +147,8 @@ export class RewardsTableColumn {
             "location": "global"
           },
           "Reward": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         },
         "return": "Promise<any>"

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

@@ -5,7 +5,7 @@ import { useRequestRerender } from "../../../tables/re-render";
  * @uiName Reward Table Source Column
  * @validParents ["sqm-rewards-table"]
  * @exampleGroup Rewards
- * @example Reward Table Source 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>
+ * @example Source 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>
  */
 export class RewardTableUserColumn {
   constructor() {
@@ -215,7 +215,8 @@ export class RewardTableUserColumn {
             "location": "global"
           },
           "Reward": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         },
         "return": "Promise<any>"

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

@@ -5,7 +5,7 @@ import { useRequestRerender } from "../../../tables/re-render";
  * @uiName Reward Table Status Column
  * @validParents ["sqm-rewards-table"]
  * @exampleGroup Rewards
- * @example Reward Table Status Column - <sqm-rewards-table-status-column column-title="Status" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PAYOUT_CANCELLED {Payout Cancelled} PAYOUT_FAILED {Payout Failed} EXPIRED {Expired} REDEEMED {Redeemed} DENIED {Denied} other {Not available} }" expiry-text="Expires on " pending-us-tax="W-9 required" pending-scheduled="Until" pending-unhandled="Fulfillment error" pending-review-text="Awaiting review" denied-text="Detected self-referral" pending-tax-review="Awaiting tax form review." pending-new-tax-form="Invalid tax form. Submit a new form to receive your rewards." pending-tax-submission="Submit your tax documents to receive your rewards." pending-partner-creation="Complete your tax and cash payout setup to receive your rewards." payout-failed="Payout failed due to a fulfillment issue and is current being retried." payout-cancelled="If you think this is a mistake, contact our Support team." payout-approved="Reward approved for payout and was scheduled for payment based on your settings." ></sqm-rewards-table-status-column>
+ * @example Status Column - <sqm-rewards-table-status-column column-title="Status" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PAYOUT_CANCELLED {Payout Cancelled} PAYOUT_FAILED {Payout Failed} EXPIRED {Expired} REDEEMED {Redeemed} DENIED {Denied} other {Not available} }" expiry-text="Expires on " pending-us-tax="W-9 required" pending-scheduled="Until" pending-unhandled="Fulfillment error" pending-review-text="Awaiting review" denied-text="Detected self-referral" pending-tax-review="Awaiting tax form review." pending-new-tax-form="Invalid tax form. Submit a new form to receive your rewards." pending-tax-submission="Submit your tax documents to receive your rewards." pending-partner-creation="Complete your tax and cash payout setup to receive your rewards." payout-failed="Payout failed due to a fulfillment issue and is current being retried." payout-cancelled="If you think this is a mistake, contact our Support team." payout-approved="Reward approved for payout and was scheduled for payment based on your settings." ></sqm-rewards-table-status-column>
  */
 export class RewardTableStatusColumn {
   constructor() {
@@ -455,10 +455,12 @@ export class RewardTableStatusColumn {
             "location": "global"
           },
           "Reward": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           },
           "ImpactConnection": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         },
         "return": "Promise<any>"

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

@@ -83,7 +83,7 @@ const getMockData = (status) => {
     dateExpires = today.minus({ days: 1 }).toMillis();
   }
   else if (randomStatus === "PENDING") {
-    // pendingReason = ["PAYOUT_CONFIGURATION_MISSING"];
+    // pendingReason = ["MISSING_PAYOUT_CONFIGURATION"];
     const reason = pendingReasons[Math.floor(Math.random() * 3)];
     pendingReason = [reason];
     if (reason === "SCHEDULED") {

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

@@ -1,6 +1,6 @@
 import { isDemo } from "@saasquatch/component-boilerplate";
 import { withHooks } from "@saasquatch/stencil-hooks";
-import { useEffect, useReducer, useMemo } from "@saasquatch/universal-hooks";
+import { useEffect, useMemo, useReducer } from "@saasquatch/universal-hooks";
 import { Component, h, Prop } from "@stencil/core";
 import deepmerge from "deepmerge";
 import { GenericTableView, } from "../../tables/GenericTableView";
@@ -235,7 +235,8 @@ export class RewardsTable {
             "path": "../../tables/GenericTableView"
           },
           "Referral": {
-            "location": "global"
+            "location": "import",
+            "path": "../../saasquatch"
           }
         }
       },

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

@@ -1,11 +1,11 @@
 import { useLocale, usePaginatedQuery, useProgramId, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
 import { useEffect, useReducer } from "@saasquatch/universal-hooks";
 import { h } from "@stencil/core";
+import debugFn from "debug";
 import { gql } from "graphql-request";
 import { useRerenderListener } from "../../tables/re-render";
 import { useChildElements } from "../../tables/useChildElements";
 import { generateUserError } from "../sqm-referral-table/useReferralTable";
-import debugFn from "debug";
 const debug = debugFn("sq:useRewardsTable");
 export const CSS_NAMESPACE = "sqm-rewards-table";
 const GET_REWARDS = gql `

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

@@ -44,13 +44,15 @@ export const TextStyleWithoutIcon = () => {
   const props = { medium: "facebook", type: "text", hideicon: true };
   return h(ShareButtonView, Object.assign({}, props), "Share");
 };
-export const WithCustomColors = () => {
+export const WithCustomColorsAndBranding = () => {
   const props = {
     medium: "facebook",
     type: "text",
     backgroundcolor: "red",
     textcolor: "yellow",
     iconslot: "prefix",
+    border: "2px solid yellow",
+    borderradius: 30,
   };
   return h(ShareButtonView, Object.assign({}, props), "Facebook");
 };