@saasquatch/mint-components 1.15.0-16 → 1.15.0-161

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",

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);

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

@@ -51,15 +51,14 @@ const baseResponse = (data, stage = "chooseReward", selectedItem = null, selecte
     setStage: null,
     setExchangeState: null,
     copyFuelTankCode: null,
-    refs: null,
   },
   refs: null,
 });
 const baseReward = {
-  key: "",
-  name: "",
+  key: "reward",
+  name: "Demo Reward",
   description: "Description of reward. Lorem ipsum dolor sit amet, consectetur adipiscing. Id nec semper sapien dignissim rhoncus nunc.",
-  imageUrl: "",
+  imageUrl: "https://res.cloudinary.com/saasquatch/image/upload/v1643653103/squatch-assets/default_rewards_1.png",
   available: true,
   unavailableReasonCode: null,
   ruleType: "FIXED_GLOBAL_REWARD",
@@ -76,7 +75,34 @@ const baseReward = {
   prettyDestinationMaxValue: null,
   globalRewardKey: "",
   destinationUnit: null,
-  steps: [],
+  steps: [
+    {
+      prettyDestinationValue: "Reward Step 1",
+      prettySourceValue: "50 Points",
+      available: true,
+      unavailableReasonCode: null,
+      destinationValue: 10,
+      sourceValue: 1,
+      globalRewardKey: "reward1",
+      rewardInput: {
+        accountId: "zach",
+        userId: "zach",
+      },
+    },
+    {
+      prettyDestinationValue: "Reward Step 2",
+      prettySourceValue: "100 Points",
+      available: false,
+      unavailableReasonCode: "Not enough points",
+      destinationValue: 10,
+      sourceValue: 1,
+      globalRewardKey: "reward1",
+      rewardInput: {
+        accountId: "zach",
+        userId: "zach",
+      },
+    },
+  ],
 };
 const notEnoughPoints = {
   available: false,
@@ -197,7 +223,7 @@ export const rewardExchange = {
   ...baseResponse(data),
 };
 export const demoRewardExchange = {
-  ...baseResponse(demoData),
+  ...baseResponse(demoData, "chooseReward", baseReward),
 };
 export const rewardExchangeLongText = {
   ...baseResponse([

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

@@ -6,15 +6,15 @@ function Dot({ active, completed, incomplete, stage, }) {
     } },
     h("div", { style: {
         backgroundColor: completed
-          ? "var(--sl-color-success-500)"
+          ? "var(--sqm-success-color-icon)"
           : incomplete
-            ? "var(--sl-color-neutral-200)"
-            : "var(--sl-color-neutral-0)",
+            ? "var(--sqm-border-color)"
+            : "white",
         border: active
-          ? "1px solid var(--sl-color-success-500)"
+          ? "1px solid var(--sqm-success-color-border)"
           : incomplete
-            ? "1px solid var(--sl-color-neutral-200)"
-            : "1px solid var(--sl-color-success-500)",
+            ? "1px solid var(--sqm-border-color)"
+            : "1px solid var(--sqm-success-color-border)",
         borderRadius: "50%",
         width: "23px",
         height: "23px",
@@ -24,8 +24,8 @@ function Dot({ active, completed, incomplete, stage, }) {
       } }, completed ? (h("div", { style: { top: "-10.5%", left: "23.5%", position: "relative" } },
       h(CheckMark, null))) : (h("div", { style: {
         color: active
-          ? "var(--sl-color-success-500)"
-          : "var(--sl-color-neutral-50)",
+          ? "var(--sqm-success-color-border)"
+          : "var(--sqm-text-subdued)",
         width: "23px",
         lineHeight: "24px",
         textAlign: "center",
@@ -39,8 +39,8 @@ function ProgressLine({ incomplete = false, active = false, invisible = false, }
       height: "4px",
       borderRadius: "4px",
       background: incomplete || active
-        ? "var(--sl-color-neutral-200)"
-        : "var(--sl-color-success-500)",
+        ? "var(--sqm-border-color)"
+        : "var(--sqm-success-color-icon)",
       position: "relative",
       bottom: "0",
       left: "0",