@saasquatch/mint-components 1.16.0-9 → 2.0.0-1

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

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

@@ -19,21 +19,28 @@ 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",
+      color: "var(--sqm-input-color)"
+    },
+    "& sl-menu-item::part(base):hover": {
+      backgroundColor: "var(--sqm-input-border-color-hover)",
     },
     "& sl-menu-item::part(base):focus": {
-      background: "transparent",
-      color: "var(--sl-color-gray-700)",
+      background: "var(--sqm-accent-color-background)",
     },
   },
   ProgressBar: {
@@ -53,7 +60,7 @@ const style = {
         flex: "1 1 0",
       },
       "& .text.subdued": {
-        color: "var(--sl-color-neutral-200)",
+        color: "var(--sqm-text-subdued)",
       },
     },
   },
@@ -68,6 +75,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 +86,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 +122,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 +132,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 +143,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 +178,6 @@ const style = {
     "& .text": {
       width: "50%",
       maxWidth: "400px",
-      //   minWidth: "330px",
       "@media (max-width: 799px)": {
         width: "auto",
         margin: "auto",
@@ -176,17 +186,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 +205,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 +220,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 +238,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 +252,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 +294,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 +310,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 +326,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 +333,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 +411,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 +475,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,11 +495,11 @@ 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;
+    const cost = (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettySourceValue) || (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.prettySourceValue);
     const amount = selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue;
     return (h("div", null,
       h("div", { class: sheet.classes.Confirmation, part: "confirmation-container" },
@@ -507,7 +507,7 @@ export function RewardExchangeView(props) {
         h("div", { class: "wrapper" },
           h("div", { class: "field" }, states.content.text.rewardNameTitle),
           h("div", { class: "reward-item-container" },
-            h("div", { class: "reward-title" }, selectedItem.name),
+            h("div", { class: "reward-title" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name),
             h("img", { class: "image", src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
                 getAssetPath("./assets/Reward-image.png") }))),
         h("div", { class: "wrapper padding" },
@@ -519,11 +519,11 @@ 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;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     return (h("div", { class: sheet.classes.Success, part: "success-container" },
       h(Gift, null),
       h(Confetti, null),
@@ -532,13 +532,12 @@ export function RewardExchangeView(props) {
         id: "successMessage",
         defaultMessage: states.content.text.redemptionSuccessText,
       }, {
-        sourceValue: (_b = states.selectedItem.prettySourceValue) !== null && _b !== void 0 ? _b : (_c = states.selectedStep) === null || _c === void 0 ? void 0 : _c.prettySourceValue,
-        destinationValue: ((_d = states.selectedStep) === null || _d === void 0 ? void 0 : _d.prettyDestinationValue) || ((_e = states.selectedItem) === null || _e === void 0 ? void 0 : _e.name) ||
-          states.selectedItem.globalRewardKey,
+        sourceValue: (_c = (_b = states.selectedItem) === null || _b === void 0 ? void 0 : _b.prettySourceValue) !== null && _c !== void 0 ? _c : (_d = states.selectedStep) === null || _d === void 0 ? void 0 : _d.prettySourceValue,
+        destinationValue: ((_e = states.selectedStep) === null || _e === void 0 ? void 0 : _e.prettyDestinationValue) || ((_f = states.selectedItem) === null || _f === void 0 ? void 0 : _f.name) || ((_g = states.selectedItem) === null || _g === void 0 ? void 0 : _g.globalRewardKey),
       })),
       (data === null || data === void 0 ? void 0 : data.fuelTankCode) && (h("div", { class: "promo" },
         states.content.text.promoCode,
-        h(CopyTextView, { copyString: data.fuelTankCode, tooltiptext: (_f = states === null || states === void 0 ? void 0 : states.content) === null || _f === void 0 ? void 0 : _f.text.tooltipText, open: states.open, onClick: callbacks.copyFuelTankCode }))),
+        h(CopyTextView, { copyString: data.fuelTankCode, tooltiptext: (_h = states === null || states === void 0 ? void 0 : states.content) === null || _h === void 0 ? void 0 : _h.text.tooltipText, open: states.open, onClick: callbacks.copyFuelTankCode }))),
       h("div", { class: sheet.classes.Button },
         h("sl-button", { class: "continue center", type: "primary", size: "large", onClick: () => callbacks.resetState(true) }, states.content.text.doneText))));
   }
@@ -572,7 +571,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

@@ -1,13 +1,16 @@
-import { Component, h, Host, Prop, State } from "@stencil/core";
-import { withHooks } from "@saasquatch/stencil-hooks";
-import { useRewardExchangeList, } from "./useRewardExchangeList";
-import { RewardExchangeView, } from "./sqm-reward-exchange-list-view";
 import { isDemo } from "@saasquatch/component-boilerplate";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Host, Prop, State } from "@stencil/core";
 import deepmerge from "deepmerge";
+import { parseStates } from "../../utils/parseStates";
 import { getProps } from "../../utils/utils";
 import { demoRewardExchange } from "./RewardExchangeListData";
+import { RewardExchangeView, } from "./sqm-reward-exchange-list-view";
+import { useRewardExchangeList, } from "./useRewardExchangeList";
 /**
  * @uiName Reward Exchange
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-tab","sqb-program-section","sqb-conditional-section"]
+ * @validChildren ["sqm-empty"]
  * @slots [{"name":"empty", "title":"Empty State"}]
  * @exampleGroup Rewards
  * @example Reward Exchange - <sqm-reward-exchange-list not-available-error="{unavailableReasonCode, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {{sourceValue} required} AVAILABILITY_PREDICATE {Not available} other {{unavailableReasonCode}} }" choose-reward-title="Rewards" choose-amount-title="Select" confirmation-title="Confirm" reward-title="Choose a reward" cancel-text="Cancel" back-text="Back" continue-text="Continue" continue-to-confirmation-text="Continue to confirmation" redeem-text="Redeem" redeem-title="Confirm and redeem" redemption-success-text="Redeemed {sourceValue} for {destinationValue}" source-amount-message="{ruleType, select, FIXED_GLOBAL_REWARD {{sourceValue}} other {{sourceMinValue} to {sourceMaxValue}}}" tooltip-text="Copied" done-text="Done" select-text="Select amount to receive" query-error="Unable to load reward exchange list. Please try again" redemption-error="An error occured trying to redeem this reward. Please try again" not-enough-error="Not enough {sourceUnit} to redeem for this reward" reward-redeemed-text="Reward redeemed" promo-code="Promo Code" skeleton-card-num=8 reward-name-title="Reward" reward-amount-title="Reward Amount" cost-title="Cost to Redeem"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_exchange2.png" empty-state-header="Redeem rewards" empty-state-text="Use your points to redeem rewards once they become available" slot="empty"></sqm-empty></sqm-reward-exchange-list>
@@ -145,6 +148,13 @@ export class SqmRewardExchangeList {
      * @uiName Cost row title
      */
     this.costTitle = "Cost to Redeem";
+    /**
+     * @componentState { "title": "Choose reward", "props": { "states": { "redeemStage": "chooseReward" } }, "dependencies": ["sqm-reward-exchange-list"] }
+     * @componentState { "title": "Reward details", "props": { "states": { "redeemStage": "chooseAmount" } }, "dependencies": ["sqm-reward-exchange-list"] }
+     * @componentState { "title": "Confirm exchange", "props": { "states": { "redeemStage": "confirmation" } }, "dependencies": ["sqm-reward-exchange-list"] }
+     * @componentState { "title": "Exchange successful", "props": { "states": { "redeemStage": "success" } }, "dependencies": ["sqm-reward-exchange-list"] }
+     */
+    this.stateController = "{}";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -709,6 +719,36 @@ export class SqmRewardExchangeList {
       "reflect": false,
       "defaultValue": "\"Cost to Redeem\""
     },
+    "stateController": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "{ \"title\": \"Choose reward\", \"props\": { \"states\": { \"redeemStage\": \"chooseReward\" } }, \"dependencies\": [\"sqm-reward-exchange-list\"] }",
+            "name": "componentState"
+          }, {
+            "text": "{ \"title\": \"Reward details\", \"props\": { \"states\": { \"redeemStage\": \"chooseAmount\" } }, \"dependencies\": [\"sqm-reward-exchange-list\"] }",
+            "name": "componentState"
+          }, {
+            "text": "{ \"title\": \"Confirm exchange\", \"props\": { \"states\": { \"redeemStage\": \"confirmation\" } }, \"dependencies\": [\"sqm-reward-exchange-list\"] }",
+            "name": "componentState"
+          }, {
+            "text": "{ \"title\": \"Exchange successful\", \"props\": { \"states\": { \"redeemStage\": \"success\" } }, \"dependencies\": [\"sqm-reward-exchange-list\"] }",
+            "name": "componentState"
+          }],
+        "text": ""
+      },
+      "attribute": "state-controller",
+      "reflect": false,
+      "defaultValue": "\"{}\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
@@ -749,35 +789,43 @@ function EmptySlot() {
     h("sqm-empty", { emptyStateImage: "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_exchange2.png", emptyStateHeader: "Redeem rewards", emptyStateText: "Use your points to redeem rewards once they become available" })));
 }
 function useRewardExchangeListDemo(props) {
-  return deepmerge({
-    states: {
-      content: {
-        text: props,
-      },
-      redeemStage: "chooseReward",
-      amount: 0,
-      selectedStep: undefined,
-      selectedItem: undefined,
-      open: false,
-      exchangeError: false,
-      queryError: false,
-      loading: false,
-      noExchangeOptions: false,
-      empty: EmptySlot(),
-    },
-    data: {
-      shareCode: "SHARECODE123",
-      exchangeList: demoRewardExchange.data.exchangeList,
-    },
-    callbacks: {
-      exchangeReward: () => { },
-      setExchangeState: (_) => { },
-      setStage: (_) => { },
-      resetState: () => { },
-      copyFuelTankCode: () => { },
-    },
-    refs: {
-      canvasRef: {},
-    },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+  const states = parseStates(props.stateController);
+  const formatted = Object.keys(states).reduce((prev, key) => key === "sqm-reward-exchange-list"
+    ? { ...prev, ...states[key] }
+    : { ...prev, [`${key}_stateController`]: states[key] }, {});
+  const finalProps = deepmerge({ ...demoRewardExchange, content: { text: props } }, 
+  // {
+  //   states: {
+  //     content: {
+  //       text: props,
+  //     },
+  //     redeemStage: "chooseReward",
+  //     amount: 0,
+  //     selectedStep: undefined,
+  //     selectedItem: undefined,
+  //     open: false,
+  //     exchangeError: false,
+  //     queryError: false,
+  //     loading: false,
+  //     noExchangeOptions: false,
+  //     // empty: EmptySlot(),
+  //   },
+  //   data: {
+  //     // shareCode: "SHARECODE123",
+  //     exchangeList: demoRewardExchange.data.exchangeList,
+  //   },
+  //   callbacks: {
+  //     exchangeReward: () => {},
+  //     setExchangeState: (_: ExchangeState) => {},
+  //     setStage: (_: Stages) => {},
+  //     resetState: () => {},
+  //     copyFuelTankCode: () => {},
+  //   },
+  //   refs: {
+  //     canvasRef: {},
+  //   },
+  // },
+  props.demoData || formatted || {}, { arrayMerge: (_, a) => a });
+  console.log({ finalProps });
+  return finalProps;
 }

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

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%",
@@ -135,11 +135,11 @@ export class RewardTableRewardsCell {
           },
           Text: {
             fontSize: "var(--sl-font-size-medium)",
-            color: "var(--sl-color-gray-800)",
+            color: "var(--sqm-text)",
           },
           Subtext: {
             fontSize: "var(--sl-font-size-small)",
-            color: "var(--sl-color-neutral-500)",
+            color: "var(--sqm-text-subdued)",
           },
         };
         const sheet = createStyleSheet(style);
@@ -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"
           }
         }
       },