@saasquatch/mint-components 1.3.1-5 → 1.3.2-1

package/dist/cjs/{sqm-divided-layout_26.cjs.entry.js → sqm-divided-layout_27.cjs.entry.js}

@@ -4,10 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
-const global = require('./global-9b408ea0.js');
+const global = require('./global-041b5338.js');
 const useCallback = require('./use-callback-fadb2643.js');
-const index_module = require('./index.module-435791cb.js');
+const index_module = require('./index.module-6a7bda18.js');
 const jsonpointer = require('./jsonpointer-11327262.js');
+require('./tslib.es6-0e81fab1.js');
 const jssPresetDefault_esm = require('./jss-preset-default.esm-6304d24f.js');
 const utils = require('./utils-95e5317c.js');
 const cjs = require('./cjs-1066ec21.js');
@@ -15,21 +16,24 @@ const mixins = require('./mixins-7b7c59fe.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-d144735a.js');
 const sqmPortalSectionView = require('./sqm-portal-section-view-3b008930.js');
 const sqmTextSpanView = require('./sqm-text-span-view-b5ae787b.js');
-const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-a4ea1781.js');
-const reRender = require('./re-render-34807c3a.js');
-const useDemoBigStat = require('./useDemoBigStat-d25d26ee.js');
+const index$1 = require('./index-19309631.js');
+const reRender = require('./re-render-7cdb2d81.js');
+const useChildElements = require('./useChildElements-428ca5b8.js');
+const useDemoBigStat = require('./useDemoBigStat-17e61803.js');
 const sqmShareLinkView = require('./sqm-share-link-view-a935d07e.js');
-const ShadowViewAddon = require('./ShadowViewAddon-9d9b4da1.js');
+const ShadowViewAddon = require('./ShadowViewAddon-75c18b96.js');
+const sqmLeaderboardRankView = require('./sqm-leaderboard-rank-view-35015d30.js');
 const sqmNavigationSidebarView = require('./sqm-navigation-sidebar-view-d06e1885.js');
-const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-49029e07.js');
+const sqmNavigationSidebarItemView = require('./sqm-navigation-sidebar-item-view-e99b4a10.js');
 const sqmStatContainerView = require('./sqm-stat-container-view-ee7b00ff.js');
-const sqmPortalProfileView = require('./sqm-portal-profile-view-5c4c0a1a.js');
+const sqmPortalProfileView = require('./sqm-portal-profile-view-a23ea292.js');
 const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-1704d285.js');
-const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-6c500dad.js');
+const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-view-5e955797.js');
 const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-4d78fd6d.js');
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-b595e302.js');
 const sqmAssetCardView = require('./sqm-asset-card-view-07f86880.js');
-const sqmPortalFooterView = require('./sqm-portal-footer-view-ad7ff6dc.js');
+const sqmTaskCardView = require('./sqm-task-card-view-57066e67.js');
+const sqmPortalFooterView = require('./sqm-portal-footer-view-9089feb7.js');
 const sqmHeroView = require('./sqm-hero-view-bb3d00a1.js');
 const sqmNameFieldsView = require('./sqm-name-fields-view-24614ac7.js');
 
@@ -5876,22 +5880,7 @@ function ReferralTableView(props) {
       index.h("sl-button", { size: "small", loading: states.loading, disabled: !states.hasNext, onClick: callbacks.nextPage, exportparts: "base: defaultbutton-base" }, data.textOverrides.moreLabel))));
 }
 
-function useChildElements() {
-  const host = index_module.P();
-  const initialState = host.children.length ? Array.from(host.children) : [];
-  const [childElements, setChildElements] = _extends.useState(initialState);
-  _extends.useEffect(() => {
-    const observer = new MutationObserver(() => {
-      const children = Array.from(host.children);
-      setChildElements([...children]);
-    });
-    observer.observe(host, { childList: true });
-    return () => observer.disconnect();
-  }, [host]);
-  return childElements;
-}
-
-const GET_REFERRER_DATA = sqmLeaderboardRankView.gql `
+const GET_REFERRER_DATA = index$1.gql `
   query getReferrals($programId: ID, $rewardFilter: RewardFilterInput) {
     viewer {
       ... on User {
@@ -5938,7 +5927,7 @@ const GET_REFERRER_DATA = sqmLeaderboardRankView.gql `
     }
   }
 `;
-const GET_REFERRAL_DATA = sqmLeaderboardRankView.gql `
+const GET_REFERRAL_DATA = index$1.gql `
   query getReferrals(
     $limit: Int!
     $offset: Int!
@@ -6102,7 +6091,7 @@ function useReferralTable(props, emptyElement, loadingElement) {
   }, [props.showReferrer]);
   const tick = reRender.useRerenderListener();
   const data = referralData === null || referralData === void 0 ? void 0 : referralData.data;
-  const components = useChildElements();
+  const components = useChildElements.useChildElements();
   async function getComponentData(components) {
     // filter out loading and empty states from columns array
     const columnComponents = components.filter((component) => component.slot !== "loading" && component.slot !== "empty");
@@ -14749,6 +14738,560 @@ const ReferralTableUserCell = class {
   }
 };
 
+const GET_EXCHANGE_LIST = index_module.dist.gql `
+  query getExchangeList {
+    viewer {
+      ... on User {
+        visibleRewardExchangeItems(limit: 20, offset: 0) {
+          data {
+            key
+            name
+            description
+            imageUrl
+            available
+            unavailableReason
+            unavailableReasonCode
+            ruleType
+            sourceUnit
+            sourceValue
+            prettySourceValue
+            sourceMinValue
+            prettySourceMinValue
+            sourceMaxValue
+            prettySourceMaxValue
+            destinationMinValue
+            prettyDestinationMinValue
+            destinationMaxValue
+            prettyDestinationMaxValue
+            globalRewardKey
+            destinationUnit
+            steps {
+              sourceValue
+              prettySourceValue
+              destinationValue
+              prettyDestinationValue
+              available
+            }
+          }
+          totalCount
+        }
+      }
+    }
+  }
+`;
+const EXCHANGE = index_module.dist.gql `
+  mutation exchange($exchangeRewardInput: ExchangeRewardInput!) {
+    exchangeReward(exchangeRewardInput: $exchangeRewardInput) {
+      reward {
+        id
+        fuelTankCode
+      }
+    }
+  }
+`;
+function useRewardExchangeList(props) {
+  var _a, _b, _c, _d;
+  const drawerRef = _extends.useRef();
+  const [exchangeState, setExchangeState] = _extends.useReducer((state, next) => ({
+    ...state,
+    ...next,
+  }), {
+    selectedItem: undefined,
+    selectedStep: undefined,
+    redeemStage: "",
+    amount: 0,
+    exchangeError: false,
+  });
+  const { selectedItem, selectedStep, redeemStage, amount, exchangeError } = exchangeState;
+  const user = index_module.T();
+  const [exchange, { data: exchangeResponse, errors }] = index_module.be(EXCHANGE);
+  const { data } = index_module.en(GET_EXCHANGE_LIST, !(user === null || user === void 0 ? void 0 : user.jwt));
+  _extends.useEffect(() => {
+    var _a, _b;
+    if ((_b = (_a = exchangeResponse === null || exchangeResponse === void 0 ? void 0 : exchangeResponse.exchangeReward) === null || _a === void 0 ? void 0 : _a.reward) === null || _b === void 0 ? void 0 : _b.id) {
+      setExchangeState({ redeemStage: "success" });
+    }
+    if (!!errors) {
+      console.log("YEA");
+      setExchangeState({ exchangeError: true });
+    }
+  }, [exchangeResponse, errors]);
+  function openDrawer() {
+    var _a;
+    setExchangeState({ redeemStage: "chooseReward" });
+    (_a = drawerRef.current) === null || _a === void 0 ? void 0 : _a.show();
+  }
+  function exchangeReward() {
+    if (!selectedItem)
+      return;
+    let exchangeVariables = {
+      accountId: user === null || user === void 0 ? void 0 : user.accountId,
+      userId: user.id,
+    };
+    switch (selectedItem.ruleType) {
+      case "FIXED_GLOBAL_REWARD":
+        exchangeVariables = {
+          ...exchangeVariables,
+          redeemCreditInput: {
+            amount: selectedItem.sourceValue,
+            unit: selectedItem.sourceUnit,
+          },
+          globalRewardKey: selectedItem.globalRewardKey,
+        };
+        break;
+      case "VARIABLE_GLOBAL_REWARD":
+        exchangeVariables = {
+          ...exchangeVariables,
+          redeemCreditInput: {
+            amount: amount,
+            unit: selectedItem.sourceUnit,
+          },
+          globalRewardKey: selectedItem.globalRewardKey,
+          rewardInput: {
+            valueInCents: selectedStep.destinationValue,
+          },
+        };
+        break;
+      case "VARIABLE_CREDIT_REWARD":
+        exchangeVariables = {
+          ...exchangeVariables,
+          redeemCreditInput: {
+            amount: amount,
+            unit: selectedItem.sourceUnit,
+          },
+          rewardInput: {
+            type: "CREDIT",
+            unit: selectedItem.destinationUnit,
+            assignedCredit: selectedStep.destinationValue,
+          },
+        };
+        break;
+      default:
+        exchangeVariables = {
+          ...exchangeVariables,
+          redeemCreditInput: {
+            amount: selectedItem.sourceValue,
+            unit: selectedItem.sourceUnit,
+          },
+          globalRewardKey: selectedItem.globalRewardKey,
+        };
+    }
+    exchange({ exchangeRewardInput: exchangeVariables });
+  }
+  const resetState = useCallback.useCallback((e) => {
+    var _a, _b;
+    // selects also trigger an sl-hide event :(
+    //@ts-ignore - componentId is not private here
+    if (((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.componentId) !== ((_b = drawerRef.current) === null || _b === void 0 ? void 0 : _b.componentId))
+      return;
+    setExchangeState({
+      amount: 0,
+      selectedStep: undefined,
+      selectedItem: undefined,
+      exchangeError: false,
+    });
+  }, []);
+  _extends.useEffect(() => {
+    if (!(drawerRef === null || drawerRef === void 0 ? void 0 : drawerRef.current))
+      return;
+    const drawer = drawerRef.current;
+    // Clear input value when drawer is closed
+    drawer.addEventListener("sl-hide", resetState);
+    return () => {
+      drawer.removeEventListener("sl-hide", resetState);
+    };
+  }, [drawerRef.current]);
+  function setStage(stage) {
+    setExchangeState({ redeemStage: stage });
+  }
+  return {
+    states: {
+      content: {
+        text: props,
+      },
+      selectedItem,
+      redeemStage,
+      amount,
+      selectedStep,
+      exchangeError,
+    },
+    data: {
+      exchangeList: (_b = (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.visibleRewardExchangeItems) === null || _b === void 0 ? void 0 : _b.data,
+      //@ts-ignore
+      fuelTankCode: (_d = (_c = exchangeResponse === null || exchangeResponse === void 0 ? void 0 : exchangeResponse.exchangeReward) === null || _c === void 0 ? void 0 : _c.reward) === null || _d === void 0 ? void 0 : _d.fuelTankCode,
+    },
+    callbacks: {
+      exchangeReward,
+      openDrawer,
+      setExchangeState,
+      setStage,
+    },
+    refs: {
+      drawerRef,
+    },
+  };
+}
+
+function Dot({ active, completed, incomplete, }) {
+  return (index.h("div", { style: {
+      flex: "0 0 0",
+      content: "''",
+      height: "4px",
+      borderRadius: "4px",
+      background: incomplete ? "#E5E5E5" : "#9E9E9E",
+      position: "relative",
+      bottom: "0",
+      left: "0",
+      display: "flex",
+      justifyContent: "center",
+      columnGap: "50px",
+      marginRight: "-2px",
+      boxSizing: "content-box",
+    } },
+    index.h("div", { style: {
+        backgroundColor: completed ? "#9E9E9E" : "#FFF",
+        border: active
+          ? "2px solid #9E9E9E"
+          : incomplete
+            ? "2px solid #E5E5E5"
+            : "none",
+        borderRadius: "50%",
+        width: completed ? "12px" : "8px",
+        height: completed ? "12px" : "8px",
+        margin: "-4px auto 0px",
+        zIndex: "1",
+      } })));
+}
+function Progress({ active, completed, incomplete }) {
+  return [
+    index.h("div", { style: {
+        content: "''",
+        flex: "0.5 0.5 0",
+        height: "4px",
+        borderRadius: "4px",
+        background: incomplete ? "#E5E5E5" : "#9E9E9E",
+        position: "relative",
+        bottom: "0",
+        left: "0",
+        display: "flex",
+        justifyContent: "center",
+        columnGap: "50px",
+        marginRight: "-2px",
+        boxSizing: "content-box",
+      } }),
+    index.h(Dot, { active: active, completed: completed, incomplete: incomplete }),
+    index.h("div", { style: {
+        content: "''",
+        flex: "0.5 0.5 0",
+        height: "4px",
+        borderRadius: "4px",
+        background: incomplete || active ? "#E5E5E5" : "#9E9E9E",
+        position: "relative",
+        bottom: "0",
+        left: "0",
+        display: "flex",
+        justifyContent: "center",
+        columnGap: "50px",
+        marginRight: "-2px",
+        boxSizing: "content-box",
+      } }),
+  ];
+}
+function ProgressBar({ stage }) {
+  console.log({ stage });
+  return (index.h("div", { style: { display: "flex", columnGap: "-2px" } },
+    index.h(Progress, { active: stage === 0, completed: stage > 0, incomplete: stage < 0 }),
+    index.h(Progress, { active: stage === 1, completed: stage > 1, incomplete: stage < 1 }),
+    index.h(Progress, { active: stage === 2, completed: stage > 2, incomplete: stage < 2 })));
+}
+
+const LeftArrow = () => (index.h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { marginBottom: "-2px", marginRight: "5px" } },
+  index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M7.34655 1.90573C7.75405 2.31323 7.75405 2.97392 7.34655 3.38143L3.56266 7.16531H14.9565C15.5328 7.16531 16 7.6325 16 8.20879C16 8.78509 15.5328 9.25227 14.9565 9.25227H3.56266L7.69437 13.384C8.10188 13.7915 8.10188 14.4522 7.69437 14.8597C7.28687 15.2672 6.62617 15.2672 6.21867 14.8597L0.305628 8.94664C-0.101876 8.53914 -0.101876 7.87845 0.305628 7.47094L5.87084 1.90573C6.27835 1.49822 6.93904 1.49822 7.34655 1.90573Z", fill: "#858585" })));
+
+const stageList = ["chooseReward", "chooseAmount", "confirmation", "success"];
+const stageProgressList = {
+  chooseReward: "Choose reward",
+  chooseAmount: "Amount",
+  confirmation: "Confirm",
+};
+function RewardExchangeView(props) {
+  const style = {
+    Container: {
+      position: "relative",
+      display: "flex",
+    },
+    CardContainer: {
+      "&:hover": {
+        boxShadow: "0 3px 10px #87ceeb6e!important",
+      },
+    },
+    Base: {
+      display: "block",
+      cursor: "pointer",
+      textAlign: "center",
+      "&::part(base)": {
+        width: "100%",
+        height: "170px",
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+      },
+      "&::part(body)": {
+        padding: "10px 0",
+      },
+    },
+    Drawer: {
+      "&::part(base)": {
+        minWidth: "400px",
+        width: "50%",
+        margin: "0 auto",
+        right: "0",
+      },
+      "&::part(panel)": {
+        height: "85vh",
+      },
+    },
+    FullImage: {
+      objectFit: "contain",
+      maxWidth: "100%",
+      height: "100px",
+    },
+    PreviewImage: {
+      objectFit: "contain",
+      maxWidth: "100%",
+      height: "75px",
+    },
+    InputBox: {
+      width: "100%",
+      marginBottom: "20px",
+    },
+    Select: {
+      "&::part(base)": {
+        flex: "0.75",
+      },
+      "&::part(menu)": {
+        maxHeight: "40vh",
+      },
+    },
+    Buttons: {
+      bottom: "0",
+      width: "100%",
+    },
+    Button: {
+      margin: "10px 0",
+      display: "block",
+      textAlign: "center",
+      cursor: "pointer",
+    },
+  };
+  // JSS config
+  jssPresetDefault_esm.jss.setup(jssPresetDefault_esm.create());
+  const sheet = jssPresetDefault_esm.jss.createStyleSheet(style);
+  const styleString = sheet.toString();
+  const { states, data, callbacks, refs } = props;
+  const { selectedItem, selectedStep } = states;
+  function getInput() {
+    var _a, _b;
+    const item = states.selectedItem;
+    if (!item || (item === null || item === void 0 ? void 0 : item.ruleType) === "FIXED_GLOBAL_REWARD")
+      return index.h("span", null);
+    if (!((_a = item.steps) === null || _a === void 0 ? void 0 : _a.length)) {
+      return index.h("p", null,
+        "Not enough ",
+        item.sourceUnit,
+        " to redeem for this reward.");
+    }
+    return (index.h("sl-select", { style: { width: "auto" }, label: "Select amount to receive", class: sheet.classes.Select, value: states.selectedStep, "onSl-select": (e) => {
+        var _a, _b, _c, _d, _e;
+        return callbacks.setExchangeState({
+          amount: (_c = (_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.sourceValue,
+          selectedStep: (_e = (_d = e.detail) === null || _d === void 0 ? void 0 : _d.item) === null || _e === void 0 ? void 0 : _e.value,
+        });
+      } }, (_b = item.steps) === null || _b === void 0 ? void 0 : _b.map((step) => (index.h("sl-menu-item", { value: step, disabled: !step.available },
+      step.prettyDestinationValue,
+      index.h("span", { slot: "suffix", style: { fontSize: "75%" } }, step.prettySourceValue))))));
+  }
+  function chooseReward() {
+    var _a;
+    const nextStage = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.ruleType) === "FIXED_GLOBAL_REWARD"
+      ? "confirmation"
+      : "chooseAmount";
+    console.log({ nextStage, ruleType: selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.ruleType });
+    return (index.h("div", { style: {
+        display: "flex",
+        justifyContent: "center",
+        flexWrap: "wrap",
+        alignItems: "center",
+        columnGap: "12px",
+        rowGap: "12px",
+      } }, (_a = data.exchangeList) === null || _a === void 0 ? void 0 :
+      _a.map((item) => {
+        const style = {
+          boxShadow: item.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key) ? "0 1px 8px #87ceeb" : "none",
+          marginBottom: "10px 0",
+          flex: "1",
+          minWidth: "45%",
+        };
+        return (index.h("div", { key: item.key, class: sheet.classes.CardContainer, style: style },
+          index.h("sl-card", { class: sheet.classes.Base, onClick: () => callbacks.setExchangeState({ selectedItem: item }), disabled: !item.available },
+            index.h("img", { class: sheet.classes.PreviewImage, src: (item === null || item === void 0 ? void 0 : item.imageUrl) || index.getAssetPath("./assets/Reward-icon.png") }),
+            index.h("p", null, item.description))));
+      }),
+      index.h("div", { class: sheet.classes.Buttons },
+        index.h("sl-button", { onClick: () => callbacks.setStage(nextStage), style: { display: "block" }, class: sheet.classes.Button, disabled: !states.selectedItem }, "Continue"),
+        index.h("a", { onClick: () => { var _a; return (_a = refs.drawerRef.current) === null || _a === void 0 ? void 0 : _a.hide(); }, style: { display: "block" }, class: sheet.classes.Button }, "Cancel"))));
+  }
+  function chooseAmount() {
+    const input = getInput();
+    return (index.h("div", null,
+      index.h("div", { style: { width: "50%", margin: "0 auto" } }, (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) && (index.h("img", { class: sheet.classes.FullImage, src: selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl }))),
+      index.h("p", null, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description),
+      index.h("div", { class: sheet.classes.InputBox }, input),
+      index.h("div", { class: sheet.classes.Buttons },
+        index.h("sl-button", { onClick: () => callbacks.setStage("confirmation"), disabled: input && !states.amount, style: { display: "block" }, class: sheet.classes.Button }, "Continue"),
+        index.h("a", { onClick: () => callbacks.setStage("chooseReward"), style: { display: "block" }, class: sheet.classes.Button }, "Back"))));
+  }
+  console.log({ selectedItem, selectedStep });
+  function confirmation() {
+    console.log("confirmation:", { selectedItem });
+    const redemptionAmount = () => {
+      var _a;
+      if ((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.ruleType) === "FIXED_GLOBAL_REWARD") {
+        return `Redeem ${selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.sourceValue} ${selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.sourceUnit} for ${selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.globalRewardKey}`;
+      }
+      else {
+        const amount = states.amount;
+        const reward = (_a = selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue) !== null && _a !== void 0 ? _a : `${amount} ${selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.destinationUnit}`;
+        return `Redeem ${amount} ${selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.sourceUnit} for ${reward}`;
+      }
+    };
+    const previousStage = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.ruleType) === "FIXED_GLOBAL_REWARD"
+      ? "chooseReward"
+      : "chooseAmount";
+    return (index.h("div", null,
+      index.h("h2", null, "Confirm your redemption:"),
+      redemptionAmount(),
+      index.h("div", { class: sheet.classes.Buttons },
+        index.h("sl-button", { onClick: callbacks.exchangeReward, style: { display: "block" }, class: sheet.classes.Button }, "Redeem"),
+        index.h("a", { onClick: () => callbacks.setStage(previousStage), style: { display: "block" }, class: sheet.classes.Button }, "Back"))));
+  }
+  function success() {
+    return (index.h("div", { style: { textAlign: "center" } },
+      index.h("img", { class: sheet.classes.FullImage, src: index.getAssetPath("./assets/Reward-icon.png") }),
+      index.h("p", { style: { color: "forestgreen" } }, "Reward Redeemed"),
+      (data === null || data === void 0 ? void 0 : data.fuelTankCode) && index.h("pre", null, data === null || data === void 0 ? void 0 : data.fuelTankCode),
+      index.h("sl-button", { onClick: () => { var _a, _b; return (_b = (_a = refs.drawerRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.hide(); } }, "Done")));
+  }
+  const stages = {
+    chooseReward: () => chooseReward(),
+    chooseAmount: () => chooseAmount(),
+    confirmation: () => confirmation(),
+    success: () => success(),
+  };
+  const currentStage = stages[states.redeemStage];
+  function stageMap() {
+    const stageNumber = stageList.indexOf(states.redeemStage);
+    return (index.h("div", { style: { fontSize: "80%" } },
+      index.h(ProgressBar, { stage: stageNumber }),
+      index.h("div", { style: {
+          marginTop: "5px",
+          display: "flex",
+          justifyContent: "center",
+          textAlign: "center",
+          whiteSpace: "nowrap",
+          marginBottom: "10px",
+        } }, Object.keys(stageProgressList).map((stage) => {
+        if (stage === states.redeemStage)
+          return (index.h("b", { style: { flex: "1 1 0" } },
+            " ",
+            stageProgressList[stage]));
+        return index.h("i", { style: { flex: "1 1 0" } }, stageProgressList[stage]);
+      }))));
+  }
+  const Label = () => {
+    if (states.redeemStage === "success")
+      return "";
+    let previousStage = "";
+    if (states.redeemStage === "confirmation") {
+      previousStage =
+        (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.ruleType) === "FIXED_GLOBAL_REWARD"
+          ? "chooseReward"
+          : "chooseAmount";
+    }
+    else if (states.redeemStage === "chooseAmount") {
+      previousStage = "chooseReward";
+    }
+    return (index.h("div", { slot: "label" },
+      index.h("a", { style: { cursor: "pointer", fontSize: "80%", color: "#858585" }, onClick: () => callbacks.setStage(previousStage) },
+        index.h(LeftArrow, null),
+        " Back")));
+  };
+  return (index.h("div", { class: sheet.classes.Container },
+    index.h("style", { type: "text/css" }, styleString),
+    index.h("div", null,
+      index.h("sl-drawer", { ref: (ref) => (refs.drawerRef.current = ref), placement: "right", class: sheet.classes.Drawer, open: stageList.indexOf(states.redeemStage) >= 0 },
+        index.h(Label, null),
+        stageMap(),
+        currentStage && currentStage(),
+        states.exchangeError &&
+          "Something went wrong. Please contact support or try again."),
+      index.h("sl-button", { onClick: () => callbacks.openDrawer() }, "Redeem Rewards"))));
+}
+
+const SqmRewardExchangeList = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ignored = true;
+    /**
+     * @uiName Exchange button text
+     */
+    this.buttonText = "Exchange Rewards";
+    _extends.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    // const missingProps = getMissingProps([
+    //   {
+    //     attribute: "listType",
+    //     value: this.listType,
+    //   },
+    // ]);
+    // if (missingProps) {
+    //   return <RequiredPropsError missingProps={missingProps} />;
+    // }
+    const { states, data, callbacks, refs } = index_module.j()
+      ? useRewardExchangeListDemo(utils.getProps(this))
+      : useRewardExchangeList(utils.getProps(this));
+    return (index.h(index.Host, { style: { display: "contents" } }, index.h(RewardExchangeView, { states: states, data: data, callbacks: callbacks, refs: refs })));
+  }
+  static get assetsDirs() { return ["assets"]; }
+};
+function useRewardExchangeListDemo(props) {
+  return cjs.cjs({
+    states: {
+      content: {
+        text: props,
+      },
+      redeemStage: "",
+      amount: 0,
+      selectedStep: undefined,
+      exchangeError: false,
+    },
+    data: {
+      shareCode: "SHARECODE123",
+    },
+    callbacks: {
+      exchangeReward: () => { },
+      openDrawer: () => { },
+      setExchangeState: (_) => { },
+      setStage: (_) => { },
+    },
+    refs: {
+      drawerRef: {},
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}
+
 const debug$1 = _extends.browser("sq:useRouter");
 function matchPath(pattern, page) {
   if (!pattern)
@@ -14858,7 +15401,7 @@ function ShareButtonView(props, children) {
       !props.hidetext && children)));
 }
 
-const MessageLinkQuery = sqmLeaderboardRankView.gql `
+const MessageLinkQuery = index$1.gql `
   query (
     $programId: ID
     $engagementMedium: UserEngagementMedium!
@@ -15012,14 +15555,13 @@ const MessageLinkQuery$1 = index_module.dist.gql `
   }
 `;
 function useShareLink(props) {
-  var _a, _b, _c;
+  var _a, _b;
   const { programId = index_module.M() } = props;
   const user = index_module.T();
   const { data } = index_module.en(MessageLinkQuery$1, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
   const shareString = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.shareLink) !== null && _b !== void 0 ? _b : 
   // Shown during loading
   "...";
-  console.log((_c = data === null || data === void 0 ? void 0 : data.user) === null || _c === void 0 ? void 0 : _c.shareLink, shareString);
   const [open, setOpen] = _extends.useState(false);
   function onClick() {
     // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
@@ -16492,7 +17034,7 @@ var _createEmotion = createEmotion({
 function i$1(){return (i$1=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(n[r]=o[r]);}return n}).apply(this,arguments)}function s(n,t){return t||(t=n.slice(0)),n.raw=t,n}var a$1,l,u,c$1=css(a$1||(a$1=s(['\n  width: 100vw;\n  height: 100vh;\n\n  .story-book-outer-div {\n    .story-div {\n      font-family: "Arial", sans-serif;\n      font-size: 12px;\n    }\n    padding-bottom: 500px;\n  }\n\n  .story-div {\n    position: fixed;\n    box-sizing: border-box;\n    top: 0;\n    width: 250px;\n    height: 100vh;\n    z-index: 999;\n    overflow-y: scroll;\n    background: white;\n    margin-bottom: 32px;\n  }\n\n  .header {\n    padding: 24px 0 16px 16px;\n    margin-bottom: 24px;\n    color: white;\n    background: #333;\n    cursor: pointer;\n\n    h2 {\n      letter-spacing: 3px;\n      font-weight: 400;\n    }\n  }\n\n  .parentStoryList {\n    list-style: none;\n    padding-left: 16px;\n\n    summary {\n      margin-bottom: 4px;\n    }\n  }\n  .parentStory {\n    cursor: pointer;\n  }\n  .parentStory.selected {\n    font-weight: bold;\n  }\n\n  .subStory {\n    font-size: 12px;\n    cursor: pointer;\n    line-height: 1.5em;\n    margin-top: 4px;\n\n    a {\n      display: block;\n      padding: 4px 4px 4px 16px;\n    }\n  }\n  .subStory:hover {\n    background-color: #eee;\n  }\n  .subStory.selected {\n    background-color: lightgreen;\n  }\n\n  .component {\n    padding: 24px 16px;\n  }\n\n  h4.group-header {\n    margin: 8px 0;\n    text-transform: uppercase;\n    font-weight: 600;\n    font-size: 14px;\n    color: #575757;\n  }\n\n  .group-wrapper {\n    margin-bottom: 24px;\n  }\n\n  .dynamic-display-wrapper {\n    position: fixed;\n    display: flex;\n    flex-direction: column;\n    bottom: 0;\n    left: 100%;\n    padding: 16px;\n    z-index: 1000;\n    background: white;\n    transform: translateX(-100%);\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n\n    & > :not(:first-child) {\n      margin-top: 12px;\n    }\n\n    p {\n      font-size: 12px;\n      margin: 0;\n      padding: 0;\n    }\n\n    .button-wrapper {\n      display: flex;\n\n      & > :not(:first-child) {\n        margin-left: 12px;\n      }\n    }\n\n    & button {\n      border: 1px solid #eaeaea;\n      background: white;\n      border-radius: 4px;\n      color: #777;\n      padding: 4px 12px;\n      justify-content: center;\n      align-items: center;\n      text-align: center;\n\n      &.active {\n        background: #555;\n        border-color: #555;\n        color: white;\n      }\n    }\n  }\n'])));function p$1(n,t){var o,r=t.story.title.split("/"),e=r[1]?r[0]:"_";return i$1({},n,((o={})[e]=[].concat(n[e]||[],[{story:i$1({},t.story,{title:r[1]||r[0]}),subs:t.subs}]).sort(function(n,t){return n.story.title.localeCompare(t.story.title)}),o))}function d$1(n){return {story:n.default,subs:function(n,t){if(null==n)return {};var o,r,e={},i=Object.keys(n);for(r=0;r<i.length;r++)t.indexOf(o=i[r])>=0||(e[o]=n[o]);return e}(n,["default"])}}function f(a,f){var b=f.h,y=void 0===b?index.h:b,g=f.title,m=void 0===g?"Stencilbook":g,x=f.homepage,h=void 0===x?y("h3",null,"Select a story!"):x,v=f.addons,k=void 0===v?[]:v,w=_extends.useMemo(function(){return a.map(d$1).reduce(p$1,{_:[]})},a),S=_extends.useState(void 0),C=S[0],z=S[1],O=null==C?void 0:C.key,j=_extends.useState("desktop"),T=j[0],_=j[1],B=_extends.useState(!0),D=B[0],L=B[1],N=_extends.useState(!1),q=N[0],A=N[1],M=function(){return y("div",{class:"dynamic-display-wrapper"},y("div",{class:"button-wrapper"},y("button",{class:"desktop"===T?"active":"",onClick:function(){return _("desktop")}},"Desktop"),y("button",{class:"tablet"===T?"active":"",onClick:function(){return _("tablet")}},"Tablet"),y("button",{class:"mobile"===T?"active":"",onClick:function(){return _("mobile")}},"Mobile")),y("p",null,"Note: Currently doesn't test breakpoints, use the native tester for now"),y("hr",null),y("button",{class:q?"active":"",onClick:function(){return A(function(n){return !n})}},"Toggle Dark Background"),y("hr",null),y("button",{class:D?"active":"",onClick:function(){return L(function(n){return !n})}},"Toggle Sidebar"))},P="mobile"===T?"375px":"tablet"===T?"768px":"1124px",V=css(l||(l=s(["\n    max-width: ",";\n    margin-left: ",";\n  "])),P,D?"250px":"0px"),X=css(u||(u=s(["\n    display: none;\n  "])));document.body.style.backgroundColor=q?"#232323":"#fafafa";var E=function(n){var t=n.selected,o=k.reduce(function(n,o){return function(){return y(o,{story:i$1({},t)},y(n,null))}},null==t?void 0:t.story);return y(o,null)},F=function(){return y("div",{class:"story-book-outer-div"},y("div",{class:"story-div "+(D?"":X)},y("div",{class:"header",onClick:function(){z(void 0);}},y("h2",null,m)),y("ul",{class:"parentStoryList"},Object.keys(w).sort().map(function(n){return y("div",{class:"group-wrapper"},"_"!==n&&y("h4",{class:"group-header"},n),w[n].map(function(t){return y("li",{class:"parentStory"},y("details",{style:{marginBottom:"10px"}},y("summary",{style:{outline:"none"}},t.story.title),t.subs&&Object.keys(t.subs).map(function(o){var e=n+"/"+o,i=t.subs[o],s=i.storyName||lodash_startcase(o);return y("div",{class:"subStory "+(O===e?"selected":"")},y("a",{onClick:function(){return function(n,t,o,r){z({key:t,story:n,parent:o,label:r});}(i,e,t.story,s)}},s))})))}))}))),y(M,null),y("div",{class:"component "+V},!O&&h,O&&y("div",null,y("h3",null,C.label),y(E,{selected:C}))))};return {class:c$1,children:y(F,null),View:F,selected:C}}
 
 const ShareButton_stories = {
-  title: "Share Button",
+  title: "Components/Share Button",
 };
 const WithIcon = () => {
   const props = { medium: "facebook", iconslot: "suffix" };
@@ -16548,7 +17090,7 @@ const ShareButton$1 = /*#__PURE__*/Object.freeze({
 });
 
 const ShareLink_stories = {
-  title: "Share Link",
+  title: "Components/Share Link",
 };
 const Default = () => {
   const props = {
@@ -16589,7 +17131,7 @@ const ShareLink$1 = /*#__PURE__*/Object.freeze({
 });
 
 const BigStat_stories = {
-  title: "Big Stat",
+  title: "Components/Big Stat",
 };
 const Default$1 = () => {
   const props = { statvalue: "9.900,00" };
@@ -16659,7 +17201,7 @@ const BigStat = /*#__PURE__*/Object.freeze({
 });
 
 const Leaderboard_stories = {
-  title: "Leaderboard",
+  title: "Components/Leaderboard",
   parameters: {
     tagname: "sqm-leaderboard",
   },
@@ -16936,7 +17478,7 @@ const Router = /*#__PURE__*/Object.freeze({
 });
 
 const LeaderboardRank_stories = {
-  title: "Leaderboard Rank",
+  title: "Components/Leaderboard Rank",
 };
 const First = () => {
   const props = { data: { rank: "1st" } };
@@ -16983,7 +17525,7 @@ function setupLoggedOut() {
   };
 }
 const PortalFrame_stories = {
-  title: "Portal Frame",
+  title: "Components/Portal Frame",
 };
 const defaultProps = {
   data: {
@@ -17078,7 +17620,7 @@ const PortalFrame$1 = /*#__PURE__*/Object.freeze({
 });
 
 const EditProfileForm_stories = {
-  title: "Edit Profile Form",
+  title: "Components/Edit Profile Form",
 };
 const defaultProps$1 = {
   states: {
@@ -17525,7 +18067,7 @@ const UseLeaderboard = /*#__PURE__*/Object.freeze({
 });
 
 const FormMessage_stories = {
-  title: "Form Message",
+  title: "Components/Form Message",
 };
 const SuccessAlert = () => {
   return (index.h("sqm-form-message", { type: "success" },
@@ -17561,6 +18103,148 @@ const FormMessage$1 = /*#__PURE__*/Object.freeze({
   FullStackSuccess: FullStackSuccess
 });
 
+const EXCHANGE$1 = index_module.dist.gql `
+  mutation exchange($exchangeRewardInput: ExchangeRewardInput!) {
+    exchangeReward(exchangeRewardInput: $exchangeRewardInput) {
+      reward {
+        id
+      }
+    }
+  }
+`;
+const UseRewardExchangeList_stories = {
+  title: "Hooks / useRewardExchange",
+};
+function setupGraphQL$6() {
+  const id = "testestest";
+  const accountId = id;
+  const programId = "sam-partner-test-2";
+  //@ts-ignore
+  window.widgetIdent = {
+    tenantAlias: "test_a8b41jotf8a1v",
+    appDomain: "https://staging.referralsaasquatch.com",
+    programId,
+  };
+  _extends.useEffect(() => {
+    index_module.L({
+      accountId,
+      id,
+      jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
+    });
+    return () => {
+      window.widgetIdent = undefined;
+      index_module.L(undefined);
+    };
+  }, []);
+  return { id, accountId };
+}
+function useExchangeButton() {
+  const { id, accountId } = setupGraphQL$6();
+  const [points, setPoints] = _extends.useState(10);
+  const [rate, setRate] = _extends.useState(100);
+  const [exchange, { data, errors }] = index_module.Ne(EXCHANGE$1);
+  return {
+    states: {
+      points,
+      rate,
+    },
+    data: {
+      id,
+      accountId,
+      data,
+      errors,
+    },
+    callbacks: {
+      exchange,
+      setPoints,
+      setRate,
+    },
+  };
+}
+const DefaultView = (props) => {
+  const { states, data, callbacks } = props;
+  return (index.h("div", null,
+    index.h("div", null,
+      index.h("label", null, "Rate:"),
+      index.h("input", { value: states.rate, onInput: (e) => 
+        // @ts-ignore
+        callbacks.setRate(e.target.value) })),
+    index.h("input", { value: states.points, onInput: (e) => 
+      // @ts-ignore
+      callbacks.setPoints(e.target.value) }),
+    index.h("button", { onClick: () => callbacks.exchange(props.input) }, "Exchange"),
+    index.h("details", null,
+      index.h("summary", null, "response"),
+      index.h("h4", null, "data"),
+      index.h("div", { style: { maxWidth: "500px" } },
+        index.h("pre", { style: { width: "500px", whiteSpace: "pre-wrap" } }, JSON.stringify(data.data))),
+      index.h("h4", null, "errors"),
+      index.h("div", { style: { maxWidth: "500px" } },
+        index.h("pre", { style: { maxWidth: "500px", whiteSpace: "pre-wrap" } }, JSON.stringify(data.errors))))));
+};
+const RewardList = createHookStory(() => {
+  setupGraphQL$6();
+  return (index.h("sqm-reward-exchange-list", { "list-type": "something" }));
+});
+const FixedGlobalReward = createHookStory(() => {
+  const { states, data, callbacks } = useExchangeButton();
+  return (index.h(DefaultView, { states: states, data: data, callbacks: callbacks, input: {
+      exchangeRewardInput: {
+        userId: data.id,
+        accountId: data.accountId,
+        redeemCreditInput: {
+          amount: states.points,
+          unit: "POINT",
+        },
+        globalRewardKey: "gc1",
+      },
+    } }));
+});
+const VariableGlobalReward = createHookStory(() => {
+  const { states, data, callbacks } = useExchangeButton();
+  return (index.h(DefaultView, { states: states, data: data, callbacks: callbacks, input: {
+      exchangeRewardInput: {
+        userId: data.id,
+        accountId: data.accountId,
+        redeemCreditInput: {
+          amount: states.points,
+          unit: "POINT",
+        },
+        globalRewardKey: "gc1",
+        rewardInput: {
+          valueInCents: Math.ceil(states.points * states.rate),
+        },
+      },
+    } }));
+});
+const VariableCreditReward = createHookStory(() => {
+  const { states, data, callbacks } = useExchangeButton();
+  return (index.h(DefaultView, { states: states, data: data, callbacks: callbacks, input: {
+      exchangeRewardInput: {
+        userId: data.id,
+        accountId: data.accountId,
+        redeemCreditInput: {
+          amount: states.points,
+          unit: "POINT",
+        },
+        rewardInput: {
+          type: "CREDIT",
+          unit: "foo",
+          assignedCredit: Math.ceil(states.points * states.rate),
+        },
+      },
+    } }));
+});
+
+const UseRewardExchangeList = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': UseRewardExchangeList_stories,
+  RewardList: RewardList,
+  FixedGlobalReward: FixedGlobalReward,
+  VariableGlobalReward: VariableGlobalReward,
+  VariableCreditReward: VariableCreditReward
+});
+
 const NewPortal_stories = {
   title: "New Portal",
 };
@@ -17864,7 +18548,7 @@ const NewPortal = /*#__PURE__*/Object.freeze({
 });
 
 const SidebarItem_stories = {
-  title: "Sidebar Item",
+  title: "Components/Sidebar Item",
 };
 const InactiveItem = () => {
   const props = {
@@ -17901,7 +18585,7 @@ const SidebarItem = /*#__PURE__*/Object.freeze({
 });
 
 const NavigationSidebar_stories = {
-  title: "Navigation Sidebar",
+  title: "Components/Navigation Sidebar",
 };
 const DefaultNavigationSidebar = () => {
   const barProps = {
@@ -17950,7 +18634,7 @@ const NavigationSidebar = /*#__PURE__*/Object.freeze({
 });
 
 const PortalLogin_stories = {
-  title: "Portal Login",
+  title: "Components/Portal Login",
 };
 const defaultProps$2 = {
   states: {
@@ -17995,7 +18679,7 @@ const PortalLogin$1 = /*#__PURE__*/Object.freeze({
 });
 
 const PortalRegister_stories = {
-  title: "Portal Register",
+  title: "Components/Portal Register",
 };
 const defaultProps$3 = {
   states: {
@@ -18098,7 +18782,7 @@ const PortalRegister$1 = /*#__PURE__*/Object.freeze({
 const scenario = "@author:\r\n@owner:ian\r\nFeature: Forgot Password\r\n\r\n  @motivating\r\n  Scenario: Users can request to reset their password\r\n    Given a user enters their email address\r\n    And that email address is linked to a previously created account\r\n    When they click \"Reset Password\"\r\n    Then the button enters a loading state\r\n    When the password reset email is sent\r\n    Then a confirmation banner is shown stating a password reset email was sent\r\n\r\n  @motivating\r\n  Scenario: Users are notified if sending their password reset email fails\r\n    Given a user enters their email address\r\n    And that email address is linked to a previously created account\r\n    When they click \"Reset Password\"\r\n    Then the button enters a loading state\r\n    When the password reset email fails to send\r\n    Then the user will not receive a password reset email\r\n    And an error banner is shown stating that they should try again\r\n\r\n  @motivating\r\n  @landmine\r\n  Scenario: If the input email is not associated to an account a success banner will be shown but an email will not be sent\r\n    Given the user entered an email address that is not associated to an accoun\r\n    When they click \"Reset Password\"\r\n    Then the button enters a loading state\r\n    But no email will be sent\r\n    And a success banner is shown stating a password reset email was sent if the given email was associated to an account\r\n\r\n  @motivating\r\n  Scenario: Users can resend password reset email\r\n    Given a user had previously requested to reset their password\r\n    When they enter their email address\r\n    And that email address is linked to a previously created account\r\n    And they click \"Reset Password\"\r\n    Then the user will receive a second password reset email\r\n    And a success banner is shown stating that their email was sent\r\n";
 
 const PortalForgotPassword_stories = {
-  title: "Portal Forgot Password",
+  title: "Components/Portal Forgot Password",
   parameters: {
     scenario,
   },
@@ -18176,7 +18860,7 @@ const PortalForgotPassword = /*#__PURE__*/Object.freeze({
 const scenario$1 = "@author:\r\n@owner: ian\r\nFeature: Email Verification\r\n\r\n    @minutae\r\n    Scenario: User's redirected from registration can re-send their verification email\r\n        Given a user has registered\r\n        And they have been sent a verification email\r\n        When they are redirected to the email verification page\r\n        Then a message will be displayed\r\n        And it will reflect that a email has already been sent to their email\r\n        But they can still re-send the email\r\n        When they click to \"Resend-Email\"\r\n        Then the user will receive a verification email\r\n\r\n    @motivating\r\n    Scenario: Users are notified if sending the email verification message fails\r\n        Given a user with an email was stored in session data from registration\r\n        When they click to \"Resend-Email\"\r\n        Then the button enters a loading state\r\n        When an error occurs trying to send the verification email\r\n        Then the user will not receive a verification email\r\n        And an error banner is shown stating that they should try again\r\n\r\n    @motivating\r\n    Scenario: Users are notified if sending the email verification message succeeds\r\n        Given a user with an email was stored in session data from registration\r\n        When they click to \"Resend-Email\"\r\n        Then the button enters a loading state\r\n        When the email verification message sends\r\n        Then the user will receive a verification email\r\n        And a success banner is shown stating that their email was resent";
 
 const PortalEmailVerification_stories = {
-  title: "Portal Email Verification",
+  title: "Components/Portal Email Verification",
   parameters: {
     scenario: scenario$1,
   },
@@ -18262,7 +18946,7 @@ const PortalEmailVerification = /*#__PURE__*/Object.freeze({
 const scenario$2 = "@author:\r\n@owner:ian\r\nFeature: Reset Password\r\n\r\n\r\n    Background: A user in on the password reset page\r\n        Given a user who has been redirected to the password reset page\r\n\r\n    @motivating\r\n    Scenario: Users can reset their password\r\n        Given a user has a valid oob code as a url query parameter\r\n        When they enter their password twice\r\n        And they click \"Update\"\r\n        Then their password is updated\r\n        And a banner with a success message will be displayed\r\n        And they can log in with their new password\r\n\r\n    @motivating\r\n    Scenario Outline: Users cannot reset their password with an invalid or missing oob code\r\n        Given a user has a <oobCode> as a url query parameter\r\n        Then they will see an error message saying that their password reset code is invalid or expired\r\n        When they click \"Continue\"\r\n        Then they will be redirected to \"/\"\r\n        Examples:\r\n            | oobCode               |\r\n            | invalid oob code      |\r\n            | non existant oob code |\r\n\r\n    @motivating\r\n    Scenario: Users must enter the same password twice to successfully reset their password\r\n        Given a user has been redirected to the password reset page\r\n        And they have a valid oob code as a url query parameter\r\n        When they enter two different passwords into the password reset form\r\n        And they click \"Update\"\r\n        Then their password is not be reset\r\n        And an error banner stating the input passwords must match appears\r\n        And their password will not be reset\r\n        When they enter the same password twice\r\n        And they click \"Update\"\r\n        Then a banner appears with a success message\r\n        And they can log in with their new password\r\n\r\n    @motivating\r\n    Scenario: Users are redirected to \"/\" by default\r\n        Given the component does not have prop \"nextPage\"\r\n        And the users url does not contain a \"nextPage\" query parameter\r\n        And a user has entered their password twice\r\n        When they click \"Update\"\r\n        Then their password is updated\r\n        And they are redirected to \"/\"\r\n\r\n    @motivating\r\n    Scenario: Custom redirection can be configured\r\n        Given the component has prop \"nextPage\" with value \"/activity\"\r\n        And the users url does not contain a \"nextPage\" query parameter\r\n        And a user has entered their password twice\r\n        When they click \"Update\"\r\n        Then their password is updated\r\n        And they are redirected to \"/activity\"";
 
 const PortalResetPassword_stories = {
-  title: "Portal Reset Password",
+  title: "Components/Portal Reset Password",
   parameters: {
     scenario: scenario$2,
   },
@@ -18426,7 +19110,7 @@ const PortalResetPassword = /*#__PURE__*/Object.freeze({
 const scenario$3 = "@author:\r\n@owner:ian\r\nFeature: Verify Email\r\n\r\n\r\n    Background: A user is on the email verification page\r\n        Given a user who has been redirected to the email verification page\r\n\r\n    @motivating\r\n    Scenario: Verifying your email will take you to the portal login page\r\n        Given a user has a valid oob code as a url query parameter\r\n        When they click \"Verify Email\"\r\n        Then the button will enter a loading state\r\n        When their email is validated\r\n        Then a button that says \"Continue\" will appear\r\n        When they click \"Continue\"\r\n        Then they will be redirected to login\r\n\r\n    @motivating\r\n    Scenario: Users will be automatically redirected if they dont click \"Continue\"\r\n        Given a user has a valid oob code as a url query parameter\r\n        When they click \"Verify Email\"\r\n        Then the button will enter a loading state\r\n        When their email is validated\r\n        Then a button that says \"Continue\" will appear\r\n        When they wait 5 seconds\r\n        Then they will be redirected to login\r\n\r\n    @motivating\r\n    Scenario: Users are notified if verifying their email has failed\r\n        Given a user has a valid oob code as a url query parameter\r\n        When they click \"Verify Email\"\r\n        Then the button will enter a loading state\r\n        When their email fails to be validated\r\n        Then an banner is shown stating that an error occured\r\n\r\n    @motivating\r\n    Scenario Outline: Users cannot verify their email with an invalid or missing oob code\r\n        Given a user has a <oobCode> as a url query parameter\r\n        Then they will see an error message saying that their verification code is invalid or expired\r\n        When they click \"Continue\"\r\n        Then they will be redirected to \"/\"\r\n        Examples:\r\n            | oobCode               |\r\n            | invalid oob code      |\r\n            | non existant oob code |\r\n\r\n    @motivating\r\n    Scenario: Users are redirected to \"/\" by default\r\n        Given the component does not have prop \"nextPage\"\r\n        And the users url does not contain a \"nextPage\" query parameter\r\n        And a user has verified their email\r\n        When they click \"Continue\"\r\n        Then they will be redirected to \"/\"\r\n\r\n    @motivating\r\n    Scenario: Custom redirection can be configured\r\n        Given the component has prop \"nextPage\" with value \"/activity\"\r\n        And the users url does not contain a \"nextPage\" query parameter\r\n        And a user has verified their email\r\n        When they click \"Continue\"\r\n        Then they will be redirected to \"/activity\"\r\n\r\n    @motivating\r\n    Scenario Outline: Users will be redirected to the value of the nextPage url parameter if it exists\r\n        Given the component <mayHave> prop \"nextPage\" with <nextPageValue>\r\n        And the users url contains a \"nextPage\" query paramater with <nextPageParamValue>\r\n        And the user has verified their email\r\n        When they click \"Continue\"\r\n        Then they are redirected to <nextPageParamValue>\r\n        Examples:\r\n            | mayHave       | nextPageValue | nextPageParamValue |\r\n            | has           | /dashboard    | /activity          |\r\n            | does not have | N/A           | /activity          |";
 
 const PortalVerifyEmail_stories = {
-  title: "Portal Verify Email",
+  title: "Components/Portal Verify Email",
   parameters: {
     scenario: scenario$3,
   },
@@ -18470,7 +19154,7 @@ const PortalVerifyEmail = /*#__PURE__*/Object.freeze({
 });
 
 const AssetCard_stories = {
-  title: "Asset Card",
+  title: "Components/Asset Card",
 };
 const Default$7 = () => {
   const props = {
@@ -18506,7 +19190,7 @@ const AssetCard = /*#__PURE__*/Object.freeze({
 });
 
 const DividedLayout_stories = {
-  title: "Divided Layout",
+  title: "Components/Divided Layout",
 };
 const barProps$1 = {
   data: {
@@ -18598,7 +19282,7 @@ const DividedLayout$1 = /*#__PURE__*/Object.freeze({
 const scenario$4 = "Feature: Change Password\r\n\r\n    @motivating\r\n    Scenario: Users can change their password\r\n        Given a user has registered for the portal\r\n        And they have a password\r\n        When they navigate to the edit profile page\r\n        And click \"Change your password...\"\r\n        Then a popup will appear\r\n        When they enter their new password\r\n        And confirm it\r\n        And click \"Change Password\"\r\n        Then they will see a success banner stating that the change was successful\r\n        When they logout\r\n        And try to login\r\n        Then they will not be able to login with their old password\r\n        But they will be able to login with their new password\r\n\r\n    @motivating\r\n    Scenario: Users must confirm their password change\r\n        Given a user has registered for the portal\r\n        When they navigate to the edit profile page\r\n        And click \"Change your password...\"\r\n        Then a popup will appear\r\n        When they enter their new password\r\n        But they enter a different password to confirm\r\n        And click \"Change Password\"\r\n        Then they will see an error banner stating that the passwords didnt match\r\n        When they logout\r\n        And try to login\r\n        Then they will be able to login with their existing password\r\n\r\n    @motivating\r\n    Scenario: Users must enter a new password and confirm it to change their password\r\n        Given a user has registered for the portal\r\n        When they navigate to the edit profile page\r\n        And click \"Change your password...\"\r\n        Then a popup will appear\r\n        When they click \"Change password\"\r\n        Then a validation error will appear for the new password field\r\n        And their password will not be changed\r\n        When they enter a new password\r\n        And they click \"Change password\"\r\n        Then a validation error will appear for the confirm new password field\r\n        And their password will not be changed\r\n\r\n    @motivating\r\n    Scenario: An error banner will be displayed if the password change fails\r\n        Given a user has registered for the portal\r\n        When they navigate to the edit profile page\r\n        And click \"Change your password...\"\r\n        When they enter their new password\r\n        And confirm it\r\n        And click \"Change Password\"\r\n        But the change fails\r\n        Then they will see an error banner stating that the change failed\r\n        When they logout\r\n        And try to login\r\n        Then they will be able to login with their existing password";
 
 const ChangePassword_stories = {
-  title: "Change Password",
+  title: "Components/Change Password",
   parameters: {
     scenario: scenario$4,
   },
@@ -18754,7 +19438,7 @@ const ChangePassword = /*#__PURE__*/Object.freeze({
 });
 
 const PortalProfile_stories = {
-  title: "Portal Profile",
+  title: "Components/Portal Profile",
 };
 // const style = {};
 jssPresetDefault_esm.jss.setup(jssPresetDefault_esm.create());
@@ -18995,7 +19679,7 @@ const PortalProfile = /*#__PURE__*/Object.freeze({
 });
 
 const ReferralTableRewardsCell_stories = {
-  title: "Referral Table Rewards Cell",
+  title: "Components/Referral Table Rewards Cell",
 };
 const baseReward = {
   id: "123",
@@ -19227,7 +19911,7 @@ const ReferralTableRewardsCell$1 = /*#__PURE__*/Object.freeze({
 });
 
 const ReferralTable_stories = {
-  title: "Referral Table",
+  title: "Components/Referral Table",
 };
 const loadingElement = (index.h("div", { slot: "loading", style: { display: "contents" } },
   index.h("sqm-table-row", null,
@@ -19714,7 +20398,7 @@ const ReferralTable$1 = /*#__PURE__*/Object.freeze({
 });
 
 const ReferralTableCell_stories = {
-  title: "Referral Table Cell",
+  title: "Components/Referral Table Cell",
 };
 const TableCell = () => {
   return (index.h("sqm-referral-table-cell", { innerTemplate: "Table Cell Text" }));
@@ -19787,28 +20471,28 @@ const ReferralTableCell$1 = /*#__PURE__*/Object.freeze({
 });
 
 const UserName_stories = {
-  title: "User Name",
+  title: "Tests/User Name",
 };
-const FullStack$1 = () => {
+const DemoData = () => {
   return (index.h("sqm-user-name", { demoData: {
       loading: false,
       loadingText: "...",
       username: "Test Testerson",
     } }));
 };
-const FullStackDefault = () => {
+const Username = () => {
   return index.h("sqm-user-name", null);
 };
 
 const UserName = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': UserName_stories,
-  FullStack: FullStack$1,
-  FullStackDefault: FullStackDefault
+  DemoData: DemoData,
+  Username: Username
 });
 
 const PasswordField_stories = {
-  title: "Portal Password Field",
+  title: "Components/Portal Password Field",
 };
 const Start = () => {
   return (index.h("sqm-password-field", { demoData: {
@@ -19855,6 +20539,507 @@ const PasswordField = /*#__PURE__*/Object.freeze({
   ValidationError: ValidationError
 });
 
+const TaskCard_stories = {
+  title: "Components/Task Card",
+};
+const resizable = {
+  width: "347px",
+  minWidth: "347px",
+  resize: "horizontal",
+  height: "fit-content",
+  overflow: "hidden",
+};
+const Default$a = () => {
+  // @ts-ignore
+  return index.h(sqmTaskCardView.TaskCardView, null);
+};
+const NotRepeatable = () => {
+  const oneAction = {
+    points: 20,
+    cardTitle: "Complete a survey",
+    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
+    buttonText: "Take survey",
+    goal: 1,
+  };
+  const coupleActions = {
+    points: 40,
+    cardTitle: "Comment on 5 articles",
+    showProgressBar: true,
+    goal: 5,
+    steps: 1,
+    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
+    buttonText: "Start reading",
+  };
+  const manyActions = {
+    points: 150,
+    cardTitle: "Spend $500 at our Store",
+    showProgressBar: true,
+    goal: 500,
+    unit: "$",
+    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
+    buttonText: "Visit our Store",
+  };
+  return (index.h("div", { style: { display: "inline-flex", gap: "32px" } },
+    index.h("div", { style: resizable },
+      index.h("h4", null, "One Action"),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { progress: 0 })),
+      " ",
+      index.h("h5", null),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { progress: 1 })),
+      " ",
+      index.h("h5", null)),
+    index.h("div", { style: resizable },
+      index.h("h4", null, "A Couple Actions"),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { progress: 0 })),
+      " ",
+      index.h("h5", null),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { progress: 1 })),
+      " ",
+      index.h("h5", null),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { progress: 5 })),
+      " ",
+      index.h("h5", null),
+      index.h("h5", null,
+        "Progress ",
+        ">",
+        " Goal"),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { progress: 9 })),
+      " ",
+      index.h("h5", null)),
+    index.h("div", { style: resizable },
+      index.h("h4", null, "Many Actions"),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { progress: 0 })),
+      " ",
+      index.h("h5", null),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { progress: 230 })),
+      " ",
+      index.h("h5", null),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { progress: 500 })),
+      " ",
+      index.h("h5", null),
+      index.h("h5", null,
+        "Progress ",
+        ">",
+        " Goal"),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { progress: 700 })),
+      " ",
+      index.h("h5", null))));
+};
+const NotRepeatableWithExpiry = () => {
+  const oneAction = {
+    points: 20,
+    cardTitle: "Complete a survey",
+    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
+    buttonText: "Take survey",
+    goal: 1,
+    expire: true,
+    dateExpire: "Nov 1, 2021",
+  };
+  const coupleActions = {
+    points: 40,
+    cardTitle: "Comment on 5 articles",
+    showProgressBar: true,
+    goal: 5,
+    steps: 1,
+    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
+    buttonText: "Start reading",
+    expire: true,
+    dateExpire: "Nov 1, 2021",
+  };
+  const manyActions = {
+    points: 150,
+    cardTitle: "Spend $500 at our Store",
+    showProgressBar: true,
+    goal: 500,
+    unit: "$",
+    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
+    buttonText: "Visit our Store",
+    expire: true,
+    dateExpire: "Nov 1, 2021",
+  };
+  return (index.h("div", { style: { display: "inline-flex", gap: "32px" } },
+    index.h("div", { style: resizable },
+      index.h("h4", null, "One Action"),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { progress: 0 })),
+      " ",
+      index.h("h5", null),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { progress: 1 })),
+      " ",
+      index.h("h5", null)),
+    index.h("div", { style: resizable },
+      index.h("h4", null, "A Couple Actions"),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { progress: 0 })),
+      " ",
+      index.h("h5", null),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { progress: 1 })),
+      " ",
+      index.h("h5", null),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { progress: 5 })),
+      " ",
+      index.h("h5", null),
+      index.h("h5", null,
+        "Progress ",
+        ">",
+        " Goal"),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { progress: 9 })),
+      " ",
+      index.h("h5", null)),
+    index.h("div", { style: resizable },
+      index.h("h4", null, "Many Actions"),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { progress: 0 })),
+      " ",
+      index.h("h5", null),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { progress: 230 })),
+      " ",
+      index.h("h5", null),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { progress: 500 })),
+      " ",
+      index.h("h5", null),
+      index.h("h5", null,
+        "Progress ",
+        ">",
+        " Goal"),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { progress: 700 })),
+      " ",
+      index.h("h5", null))));
+};
+const Repeatable = () => {
+  const oneAction = {
+    points: 20,
+    cardTitle: "Complete a survey",
+    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
+    buttonText: "Take survey",
+    goal: 1,
+    repeatable: true,
+  };
+  const coupleActions = {
+    points: 40,
+    cardTitle: "Comment on 5 articles",
+    showProgressBar: true,
+    repeatable: true,
+    goal: 5,
+    steps: 1,
+    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
+    buttonText: "Start reading",
+  };
+  const manyActions = {
+    points: 150,
+    cardTitle: "Spend $500 at our Store",
+    showProgressBar: true,
+    repeatable: true,
+    goal: 500,
+    unit: "$",
+    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
+    buttonText: "Visit our Store",
+  };
+  return (index.h("div", { style: { display: "inline-flex", gap: "32px" } },
+    index.h("div", { style: resizable },
+      index.h("h4", null, "One Action"),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { progress: 0 })),
+      " ",
+      index.h("h5", null),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { progress: 1 })),
+      " ",
+      index.h("h5", null)),
+    index.h("div", { style: resizable },
+      index.h("h4", null, "A Couple Actions"),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { progress: 1 })),
+      " ",
+      index.h("h5", null),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { progress: 5 })),
+      " ",
+      index.h("h5", null),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { progress: 7 })),
+      " ",
+      index.h("h5", null),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { progress: 10 })),
+      " ",
+      index.h("h5", null),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { progress: 12 })),
+      " ",
+      index.h("h5", null),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { progress: 15 })),
+      " ",
+      index.h("h5", null),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { progress: 17 })),
+      " ",
+      index.h("h5", null),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { progress: 22 })),
+      " ",
+      index.h("h5", null)),
+    index.h("div", { style: resizable },
+      index.h("h4", null, "Many Actions"),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { progress: 100 })),
+      " ",
+      index.h("h5", null),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { progress: 500 })),
+      " ",
+      index.h("h5", null),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { progress: 650 })),
+      " ",
+      index.h("h5", null),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { progress: 1000 })),
+      " ",
+      index.h("h5", null),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { progress: 1200 })),
+      " ",
+      index.h("h5", null),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { progress: 1500 })),
+      " ",
+      index.h("h5", null),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { progress: 1700 })),
+      " ",
+      index.h("h5", null),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { progress: 2200 })),
+      " ",
+      index.h("h5", null))));
+};
+const RepeatableWithExpiry = () => {
+  const oneAction = {
+    points: 20,
+    cardTitle: "Complete a survey",
+    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
+    buttonText: "Take survey",
+    goal: 1,
+    repeatable: true,
+    expire: true,
+    dateExpire: "Nov 1, 2021",
+  };
+  const coupleActions = {
+    points: 40,
+    cardTitle: "Comment on 5 articles",
+    showProgressBar: true,
+    repeatable: true,
+    goal: 5,
+    steps: 1,
+    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
+    buttonText: "Start reading",
+    expire: true,
+    dateExpire: "Nov 1, 2021",
+  };
+  const manyActions = {
+    points: 150,
+    cardTitle: "Spend $500 at our Store",
+    showProgressBar: true,
+    repeatable: true,
+    goal: 500,
+    unit: "$",
+    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
+    buttonText: "Visit our Store",
+    expire: true,
+    dateExpire: "Nov 1, 2021",
+  };
+  return (index.h("div", { style: { display: "inline-flex", gap: "32px" } },
+    index.h("div", { style: resizable },
+      index.h("h4", null, "One Action"),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { progress: 0 })),
+      " ",
+      index.h("h5", null),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, oneAction, { progress: 1 })),
+      " ",
+      index.h("h5", null)),
+    index.h("div", { style: resizable },
+      index.h("h4", null, "A Couple Actions"),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { progress: 1 })),
+      " ",
+      index.h("h5", null),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { progress: 5 })),
+      " ",
+      index.h("h5", null),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { progress: 7 })),
+      " ",
+      index.h("h5", null),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { progress: 10 })),
+      " ",
+      index.h("h5", null),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { progress: 12 })),
+      " ",
+      index.h("h5", null),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { progress: 15 })),
+      " ",
+      index.h("h5", null),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { progress: 17 })),
+      " ",
+      index.h("h5", null),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, coupleActions, { progress: 22 })),
+      " ",
+      index.h("h5", null)),
+    index.h("div", { style: resizable },
+      index.h("h4", null, "Many Actions"),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { progress: 100 })),
+      " ",
+      index.h("h5", null),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { progress: 500 })),
+      " ",
+      index.h("h5", null),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { progress: 650 })),
+      " ",
+      index.h("h5", null),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { progress: 1000 })),
+      " ",
+      index.h("h5", null),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { progress: 1200 })),
+      " ",
+      index.h("h5", null),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { progress: 1500 })),
+      " ",
+      index.h("h5", null),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { progress: 1700 })),
+      " ",
+      index.h("h5", null),
+      index.h(sqmTaskCardView.TaskCardView, Object.assign({}, manyActions, { progress: 2200 })),
+      " ",
+      index.h("h5", null))));
+};
+// export const Repeatable = () => {
+//   const oneAction = {
+//     points: 20,
+//     cardTitle: "Complete a survey",
+//     description:
+//       "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
+//     repeatable: 0,
+//     buttonText: "Take survey",
+//     buttonOnClick: () => {},
+//   };
+//   const coupleActions = {
+//     points: 40,
+//     cardTitle: "Comment on 5 articles",
+//     goal: 5,
+//     steps: 1,
+//     repeatable: true,
+//     description:
+//       "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
+//     buttonText: "Start reading",
+//     buttonOnClick: () => {},
+//   };
+//   const manyActions = {
+//     points: 150,
+//     cardTitle: "Spend $500 at our Store",
+//     goal: 500,
+//     repeatable: true,
+//     unit: "$",
+//     description:
+//       "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
+//     buttonText: "Visit our Store",
+//     buttonOnClick: () => {},
+//   };
+//   return (
+//     <div style={{ display: "inline-flex", gap: "32px" }}>
+//       <div style={resizable}>
+//         <h4>One Action</h4>
+//         <TaskCardView {...oneAction} /> <h5 />
+//         <TaskCardView {...oneAction} repeatable={1} complete /> <h5 />
+//       </div>
+//       <div style={resizable}>
+//         <h4>A Couple Actions</h4>
+//         <TaskCardView {...coupleActions} progress={1} /> <h5 />
+//         <TaskCardView {...coupleActions} progress={5} /> <h5 />
+//         <TaskCardView {...coupleActions} progress={7} /> <h5 />
+//         <TaskCardView {...coupleActions} progress={10} /> <h5 />
+//         <TaskCardView {...coupleActions} progress={12} /> <h5 />
+//       </div>
+//       <div style={resizable}>
+//         <h4>Many Actions</h4>
+//         <TaskCardView {...manyActions} progress={100} /> <h5 />
+//         <TaskCardView {...manyActions} progress={500} /> <h5 />
+//         <TaskCardView {...manyActions} progress={650} /> <h5 />
+//         <TaskCardView {...manyActions} progress={1000} /> <h5 />
+//         <TaskCardView {...manyActions} progress={1200} /> <h5 />
+//       </div>
+//     </div>
+//   );
+// };
+// export const RepeatableWithExpiry = () => {
+//   const oneAction = {
+//     points: 20,
+//     cardTitle: "Complete a survey",
+//     expire: "Nov 30, 2021",
+//     description:
+//       "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
+//     repeatable: 0,
+//     buttonText: "Take survey",
+//     buttonOnClick: () => {},
+//   };
+//   const coupleActions = {
+//     points: 40,
+//     cardTitle: "Comment on 5 articles",
+//     expire: "Nov 30, 2021",
+//     goal: 5,
+//     steps: 1,
+//     repeatable: true,
+//     description:
+//       "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
+//     buttonText: "Start reading",
+//     buttonOnClick: () => {},
+//   };
+//   const manyActions = {
+//     points: 150,
+//     cardTitle: "Spend $500 at our Store",
+//     expire: "Nov 30, 2021",
+//     goal: 500,
+//     repeatable: true,
+//     unit: "$",
+//     description:
+//       "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
+//     buttonText: "Visit our Store",
+//     buttonOnClick: () => {},
+//   };
+//   return (
+//     <div style={{ display: "inline-flex", gap: "32px" }}>
+//       <div style={resizable}>
+//         <h4>One Action</h4>
+//         <TaskCardView {...oneAction} /> <h5 />
+//         <TaskCardView {...oneAction} repeatable={1} complete /> <h5 />
+//       </div>
+//       <div style={resizable}>
+//         <h4>A Couple Actions</h4>
+//         <TaskCardView {...coupleActions} progress={1} /> <h5 />
+//         <TaskCardView {...coupleActions} progress={5} /> <h5 />
+//         <TaskCardView {...coupleActions} progress={7} /> <h5 />
+//         <TaskCardView {...coupleActions} progress={10} /> <h5 />
+//         <TaskCardView {...coupleActions} progress={12} /> <h5 />
+//       </div>
+//       <div style={resizable}>
+//         <h4>Many Actions</h4>
+//         <TaskCardView {...manyActions} progress={100} /> <h5 />
+//         <TaskCardView {...manyActions} progress={500} /> <h5 />
+//         <TaskCardView {...manyActions} progress={650} /> <h5 />
+//         <TaskCardView {...manyActions} progress={1000} /> <h5 />
+//         <TaskCardView {...manyActions} progress={1200} /> <h5 />
+//       </div>
+//     </div>
+//   );
+// };
+// export const ProgressBar = () => {
+//   const props = {
+//     goal: 5,
+//   };
+//   return (
+//     <div>
+//       <MatrixStory
+//         matrix={{ progress: [1, 2, 5], steps: [0, 1], repeatable: [false] }}
+//         props={props}
+//         Component={ProgressBarView}
+//       />
+//       <MatrixStory
+//         matrix={{ progress: [2, 5, 7, 12], steps: [0, 1], repeatable: [true] }}
+//         props={props}
+//         Component={ProgressBarView}
+//       />
+//     </div>
+//   );
+// };
+
+const TaskCard = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': TaskCard_stories,
+  Default: Default$a,
+  NotRepeatable: NotRepeatable,
+  NotRepeatableWithExpiry: NotRepeatableWithExpiry,
+  Repeatable: Repeatable,
+  RepeatableWithExpiry: RepeatableWithExpiry
+});
+
 const portalTemplate = "<sqm-portal-frame>\r\n  <a slot=\"header\" href=\"/\">\r\n    <sqm-text style=\"height: 60px\">\r\n      <img\r\n        style=\"height: 60px\"\r\n        src=\"https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png\"\r\n      />\r\n    </sqm-text>\r\n  </a>\r\n  <sqb-program-section program-id=\"referral-program\">\r\n    <sqm-router>\r\n      <template\r\n        path=\"/:path(\\bregister\\b|\\bemailVerification\\b|\\blogin\\b|\\bverifyEmail\\b|\\bforgotPassword\\b|\\bresetPassword\\b|\\blogout\\b)\"\r\n      >\r\n        <sqm-graphql-client-provider\r\n          domain=\"https://managed-identity.saasquatch.com\"\r\n        >\r\n          <sqm-hero\r\n            background=\"https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80\"\r\n          >\r\n            <sqm-router>\r\n              <template path=\"/register\">\r\n                <sqm-portal-register>\r\n                  <sqm-name-fields slot=\"formData\"></sqm-name-fields>\r\n                </sqm-portal-register>\r\n              </template>\r\n\r\n              <template path=\"/emailVerification\">\r\n                <sqm-portal-protected-route\r\n                  redirect-to=\"/login\"\r\n                ></sqm-portal-protected-route>\r\n                <sqm-portal-email-verification></sqm-portal-email-verification>\r\n              </template>\r\n\r\n              <template path=\"/login\">\r\n                <sqm-portal-login></sqm-portal-login>\r\n              </template>\r\n\r\n              <template path=\"/verifyEmail\">\r\n                <sqm-portal-verify-email></sqm-portal-verify-email>\r\n              </template>\r\n\r\n              <template path=\"/forgotPassword\">\r\n                <sqm-portal-forgot-password\r\n                  email-label=\"Business Email\"\r\n                ></sqm-portal-forgot-password>\r\n              </template>\r\n\r\n              <template path=\"/resetPassword\">\r\n                <sqm-portal-reset-password\r\n                  confirm-password=\"true\"\r\n                ></sqm-portal-reset-password>\r\n              </template>\r\n              <template path=\"/logout\">\r\n                <sqm-portal-logout next-page=\"/login\"></sqm-portal-logout>\r\n              </template>\r\n            </sqm-router>\r\n          </sqm-hero>\r\n        </sqm-graphql-client-provider>\r\n      </template>\r\n    </sqm-router>\r\n    <sqm-router>\r\n      <template path=\"/:path(\\bactivity\\b|\\beditProfile\\b)?\">\r\n        <sqm-divided-layout\r\n          direction=\"row\"\r\n          style=\"\r\n            border-top: 1px solid #eaeaea;\r\n            border-bottom: 1px solid #eaeaea;\r\n          \"\r\n        >\r\n          <sqm-navigation-sidebar>\r\n            <sqm-navigation-sidebar-item\r\n              path=\"/\"\r\n              icon=\"house\"\r\n              label=\"Dashboard\"\r\n            ></sqm-navigation-sidebar-item>\r\n            <sqm-navigation-sidebar-item\r\n              path=\"/activity\"\r\n              icon=\"bar-chart\"\r\n              label=\"Activity\"\r\n            ></sqm-navigation-sidebar-item>\r\n            <sqm-navigation-sidebar-item\r\n              path=\"/editProfile\"\r\n              icon=\"person\"\r\n              label=\"Edit Profile\"\r\n            ></sqm-navigation-sidebar-item>\r\n            <sqm-navigation-sidebar-item\r\n              path=\"/logout\"\r\n              icon=\"box-arrow-right\"\r\n              label=\"Logout\"\r\n            ></sqm-navigation-sidebar-item>\r\n          </sqm-navigation-sidebar>\r\n          <sqm-divided-layout direction=\"column\">\r\n            <sqm-router>\r\n              <template path=\"/\">\r\n                <sqm-portal-protected-route\r\n                  require-email-verification=\"true\"\r\n                  redirect-to=\"/login\"\r\n                  redirect-to-unverified=\"/emailVerification\"\r\n                ></sqm-portal-protected-route>\r\n                <sqb-widget\r\n                  widget-type=\"p/referral-program/w/referrerWidget\"\r\n                  track-loads=\"true\"\r\n                ></sqb-widget>\r\n              </template>\r\n              <template path=\"/editProfile\">\r\n                <sqm-portal-protected-route\r\n                  require-email-verification=\"true\"\r\n                  redirect-to=\"/login\"\r\n                  redirect-to-unverified=\"/emailVerification\"\r\n                ></sqm-portal-protected-route>\r\n                <sqm-portal-container direction=\"column\" gap=\"xxx-large\">\r\n                  <sqm-portal-profile></sqm-portal-profile> </sqm-portal-container\r\n                ><sqm-portal-container direction=\"column\" gap=\"xxx-large\">\r\n                  <sqm-graphql-client-provider\r\n                    domain=\"https://managed-identity.saasquatch.com\"\r\n                  >\r\n                    <sqm-portal-change-password></sqm-portal-change-password>\r\n                  </sqm-graphql-client-provider>\r\n                </sqm-portal-container>\r\n              </template>\r\n\r\n              <template path=\"/activity\">\r\n                <sqm-portal-protected-route\r\n                  require-email-verification=\"true\"\r\n                  redirect-to=\"/login\"\r\n                  redirect-to-unverified=\"/emailVerification\"\r\n                ></sqm-portal-protected-route>\r\n                <sqm-portal-container\r\n                  direction=\"column\"\r\n                  padding=\"xxx-large\"\r\n                  gap=\"xxx-large\"\r\n                >\r\n                  <sqm-text> <h1>Activity</h1></sqm-text>\r\n                  <sqm-stat-container space=\"xxxx-large\"\r\n                    ><sqm-big-stat\r\n                      flex-reverse=\"true\"\r\n                      alignment=\"left\"\r\n                      stat-type=\"/referralsCount\"\r\n                      ><sqm-text><p>Referrals</p></sqm-text></sqm-big-stat\r\n                    >\r\n                    <sqm-big-stat\r\n                      flex-reverse=\"true\"\r\n                      alignment=\"left\"\r\n                      stat-type=\"/rewardsCountFiltered/AVAILABLE\"\r\n                      ><sqm-text><p>Rewards Earned</p></sqm-text></sqm-big-stat\r\n                    >\r\n                    <sqm-big-stat\r\n                      flex-reverse=\"true\"\r\n                      alignment=\"left\"\r\n                      stat-type=\"/rewardBalance/CREDIT/CENTS\"\r\n                      ><sqm-text><p>Reward Balance</p></sqm-text></sqm-big-stat\r\n                    >\r\n                  </sqm-stat-container>\r\n                  <sqm-referral-table>\r\n                    <sqm-referral-table-user-column></sqm-referral-table-user-column>\r\n                    <sqm-referral-table-rewards-column></sqm-referral-table-rewards-column>\r\n                    <sqm-referral-table-status-column></sqm-referral-table-status-column>\r\n                    <sqm-referral-table-date-column\r\n                      column-title=\"Referred\"\r\n                      date-shown=\"dateReferralStarted\"\r\n                    ></sqm-referral-table-date-column> </sqm-referral-table\r\n                ></sqm-portal-container>\r\n              </template>\r\n            </sqm-router>\r\n          </sqm-divided-layout>\r\n        </sqm-divided-layout>\r\n      </template>\r\n    </sqm-router>\r\n  </sqb-program-section>\r\n  <sqm-portal-footer\r\n    slot=\"footer\"\r\n    support-email=\"support@example.com\"\r\n    terms-link=\"https://example.com\"\r\n    faq-link=\"https://example.com\"\r\n    terms-text=\"Terms And Conditions\"\r\n    faq-text=\"FAQ\"\r\n    show-powered-by=\"true\"\r\n  ></sqm-portal-footer>\r\n</sqm-portal-frame>\r\n";
 
 const portalLeadSubmitTemplate = "<sqm-portal-frame>\r\n  <a slot=\"header\" href=\"/\">\r\n    <sqm-text style=\"height: 60px\">\r\n      <img\r\n        style=\"height: 60px\"\r\n        src=\"https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png\"\r\n      />\r\n    </sqm-text>\r\n  </a>\r\n  <sqb-program-section program-id=\"referral-program\">\r\n    <sqm-router>\r\n      <template\r\n        path=\"/:path(\\bregister\\b|\\bemailVerification\\b|\\blogin\\b|\\bverifyEmail\\b|\\bforgotPassword\\b|\\bresetPassword\\b|\\blogout\\b)\"\r\n      >\r\n        <sqm-graphql-client-provider\r\n          domain=\"https://managed-identity.saasquatch.com\"\r\n        >\r\n          <sqm-hero\r\n            background=\"https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80\"\r\n          >\r\n            <sqm-router>\r\n              <template path=\"/register\">\r\n                <sqm-portal-register>\r\n                  <sqm-name-fields slot=\"formData\"></sqm-name-fields>\r\n                </sqm-portal-register>\r\n              </template>\r\n\r\n              <template path=\"/emailVerification\">\r\n                <sqm-portal-protected-route\r\n                  redirect-to=\"/login\"\r\n                ></sqm-portal-protected-route>\r\n                <sqm-portal-email-verification></sqm-portal-email-verification>\r\n              </template>\r\n\r\n              <template path=\"/login\">\r\n                <sqm-portal-login></sqm-portal-login>\r\n              </template>\r\n\r\n              <template path=\"/verifyEmail\">\r\n                <sqm-portal-verify-email></sqm-portal-verify-email>\r\n              </template>\r\n\r\n              <template path=\"/forgotPassword\">\r\n                <sqm-portal-forgot-password\r\n                  email-label=\"Business Email\"\r\n                ></sqm-portal-forgot-password>\r\n              </template>\r\n\r\n              <template path=\"/resetPassword\">\r\n                <sqm-portal-reset-password\r\n                  confirm-password=\"true\"\r\n                ></sqm-portal-reset-password>\r\n              </template>\r\n              <template path=\"/logout\">\r\n                <sqm-portal-logout next-page=\"/login\"></sqm-portal-logout>\r\n              </template>\r\n            </sqm-router>\r\n          </sqm-hero>\r\n        </sqm-graphql-client-provider>\r\n      </template>\r\n    </sqm-router>\r\n    <sqm-router>\r\n      <template path=\"/:path(\\bactivity\\b|\\beditProfile\\b|\\brefer\\b)?\">\r\n        <sqm-divided-layout\r\n          direction=\"row\"\r\n          style=\"\r\n            border-top: 1px solid #eaeaea;\r\n            border-bottom: 1px solid #eaeaea;\r\n          \"\r\n        >\r\n          <sqm-navigation-sidebar>\r\n            <sqm-navigation-sidebar-item\r\n              path=\"/\"\r\n              icon=\"house\"\r\n              label=\"Dashboard\"\r\n            ></sqm-navigation-sidebar-item>\r\n            <sqm-navigation-sidebar-item\r\n              path=\"/refer\"\r\n              icon=\"inbox\"\r\n              label=\"Submit A Lead\"\r\n            ></sqm-navigation-sidebar-item>\r\n            <sqm-navigation-sidebar-item\r\n              path=\"/activity\"\r\n              icon=\"bar-chart\"\r\n              label=\"Activity\"\r\n            ></sqm-navigation-sidebar-item>\r\n            <sqm-navigation-sidebar-item\r\n              path=\"/editProfile\"\r\n              icon=\"person\"\r\n              label=\"Edit Profile\"\r\n            ></sqm-navigation-sidebar-item>\r\n            <sqm-navigation-sidebar-item\r\n              path=\"/logout\"\r\n              icon=\"box-arrow-right\"\r\n              label=\"Logout\"\r\n            ></sqm-navigation-sidebar-item>\r\n          </sqm-navigation-sidebar>\r\n          <sqm-divided-layout direction=\"column\">\r\n            <sqm-router>\r\n              <template path=\"/\">\r\n                <sqm-portal-protected-route\r\n                  require-email-verification=\"true\"\r\n                  redirect-to=\"/login\"\r\n                  redirect-to-unverified=\"/emailVerification\"\r\n                ></sqm-portal-protected-route>\r\n                <sqb-widget\r\n                  widget-type=\"p/referral-program/w/referrerWidget\"\r\n                  track-loads=\"true\"\r\n                ></sqb-widget>\r\n              </template>\r\n              <template path=\"/editProfile\">\r\n                <sqm-portal-protected-route\r\n                  require-email-verification=\"true\"\r\n                  redirect-to=\"/login\"\r\n                  redirect-to-unverified=\"/emailVerification\"\r\n                ></sqm-portal-protected-route>\r\n                <sqm-portal-container direction=\"column\" gap=\"xxx-large\">\r\n                  <sqm-portal-profile></sqm-portal-profile> </sqm-portal-container\r\n                ><sqm-portal-container direction=\"column\" gap=\"xxx-large\">\r\n                  <sqm-graphql-client-provider\r\n                    domain=\"https://managed-identity.saasquatch.com\"\r\n                  >\r\n                    <sqm-portal-change-password></sqm-portal-change-password>\r\n                  </sqm-graphql-client-provider>\r\n                </sqm-portal-container>\r\n              </template>\r\n              <template path=\"/refer\">\r\n                <sqm-portal-protected-route\r\n                  require-email-verification=\"true\"\r\n                  redirect-to=\"/login\"\r\n                  redirect-to-unverified=\"/emailVerification\"\r\n                ></sqm-portal-protected-route>\r\n                <sqm-referral-iframe></sqm-referral-iframe>\r\n              </template>\r\n              <template path=\"/activity\">\r\n                <sqm-portal-protected-route\r\n                  require-email-verification=\"true\"\r\n                  redirect-to=\"/login\"\r\n                  redirect-to-unverified=\"/emailVerification\"\r\n                ></sqm-portal-protected-route>\r\n                <sqm-portal-container\r\n                  direction=\"column\"\r\n                  padding=\"xxx-large\"\r\n                  gap=\"xxx-large\"\r\n                >\r\n                  <sqm-text> <h1>Activity</h1></sqm-text>\r\n                  <sqm-stat-container space=\"xxxx-large\"\r\n                    ><sqm-big-stat\r\n                      flex-reverse=\"true\"\r\n                      alignment=\"left\"\r\n                      stat-type=\"/referralsCount\"\r\n                      ><sqm-text><p>Referrals</p></sqm-text></sqm-big-stat\r\n                    >\r\n                    <sqm-big-stat\r\n                      flex-reverse=\"true\"\r\n                      alignment=\"left\"\r\n                      stat-type=\"/rewardsCountFiltered/AVAILABLE\"\r\n                      ><sqm-text><p>Rewards Earned</p></sqm-text></sqm-big-stat\r\n                    >\r\n                    <sqm-big-stat\r\n                      flex-reverse=\"true\"\r\n                      alignment=\"left\"\r\n                      stat-type=\"/rewardBalance/CREDIT/CENTS\"\r\n                      ><sqm-text><p>Reward Balance</p></sqm-text></sqm-big-stat\r\n                    >\r\n                  </sqm-stat-container>\r\n                  <sqm-referral-table>\r\n                    <sqm-referral-table-user-column></sqm-referral-table-user-column>\r\n                    <sqm-referral-table-rewards-column></sqm-referral-table-rewards-column>\r\n                    <sqm-referral-table-status-column></sqm-referral-table-status-column>\r\n                    <sqm-referral-table-date-column\r\n                      column-title=\"Referred\"\r\n                      date-shown=\"dateReferralStarted\"\r\n                    ></sqm-referral-table-date-column> </sqm-referral-table\r\n                ></sqm-portal-container>\r\n              </template>\r\n            </sqm-router>\r\n          </sqm-divided-layout>\r\n        </sqm-divided-layout>\r\n      </template>\r\n    </sqm-router>\r\n  </sqb-program-section>\r\n  <sqm-portal-footer\r\n    slot=\"footer\"\r\n    support-email=\"support@example.com\"\r\n    terms-link=\"https://example.com\"\r\n    faq-link=\"https://example.com\"\r\n    terms-text=\"Terms And Conditions\"\r\n    faq-text=\"FAQ\"\r\n    show-powered-by=\"true\"\r\n  ></sqm-portal-footer>\r\n</sqm-portal-frame>\r\n";
@@ -22867,7 +24052,7 @@ const ReferralIframeReadme = "# sqm-referral-iframe\r\n\r\n\r\n\r\n<!-- Auto Gen
 
 const ForgotPasswordReadme = "# sqm-portal-forgot-password\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property      | Attribute      | Description | Type                                                                                                                                                                     | Default                    |\r\n| ------------- | -------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------- |\r\n| `demoData`    | --             |             | `{ states?: { error: string; loading: boolean; success: boolean; }; content?: { secondaryButton: any; messageSlot: any; emailLabel?: string; submitLabel?: string; }; }` | `undefined`                |\r\n| `emailLabel`  | `email-label`  |             | `string`                                                                                                                                                                 | `\"Email\"`                  |\r\n| `submitLabel` | `submit-label` |             | `string`                                                                                                                                                                 | `\"Request Password Reset\"` |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-forgot-password --> sqm-form-message\r\n  style sqm-portal-forgot-password fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
 
-const RegisterReadme = "# sqm-portal-register\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property                   | Attribute                    | Description | Type                                                                                                                                                                                                                                                                                                                                                                                           | Default              |\r\n| -------------------------- | ---------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |\r\n| `confirmPassword`          | `confirm-password`           |             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                      | `false`              |\r\n| `confirmPasswordLabel`     | `confirm-password-label`     |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"Confirm Password\"` |\r\n| `demoData`                 | --                           |             | `{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; validationState?: FormState; enablePasswordValidation?: boolean; }; content?: { formData?: any; passwordField?: any; secondaryButton?: any; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel: string; }; refs?: { formRef: any; }; }` | `undefined`          |\r\n| `emailLabel`               | `email-label`                |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"Email\"`            |\r\n| `enablePasswordValidation` | `enable-password-validation` |             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                      | `true`               |\r\n| `hideInputs`               | `hide-inputs`                |             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                      | `false`              |\r\n| `loginLabel`               | `login-label`                |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"Sign in\"`          |\r\n| `nextPage`                 | `next-page`                  |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"/\"`                |\r\n| `pageLabel`                | `page-label`                 |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"Register\"`         |\r\n| `passwordLabel`            | `password-label`             |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"Password\"`         |\r\n| `submitLabel`              | `submit-label`               |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"Register\"`         |\r\n\r\n\r\n## Dependencies\r\n\r\n### Used by\r\n\r\n - [sqm-stencilbook](../sqm-stencilbook)\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n- [sqm-password-field](../sqm-password-field)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-register --> sqm-form-message\r\n  sqm-portal-register --> sqm-password-field\r\n  sqm-stencilbook --> sqm-portal-register\r\n  style sqm-portal-register fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
+const RegisterReadme = "# sqm-portal-register\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property                   | Attribute                    | Description | Type                                                                                                                                                                                                                                                                                                                                                                                           | Default              |\n| -------------------------- | ---------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |\n| `confirmPassword`          | `confirm-password`           |             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                      | `false`              |\n| `confirmPasswordLabel`     | `confirm-password-label`     |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"Confirm Password\"` |\n| `demoData`                 | --                           |             | `{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; validationState?: FormState; enablePasswordValidation?: boolean; }; refs?: { formRef: any; }; content?: { formData?: any; passwordField?: any; secondaryButton?: any; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel: string; }; }` | `undefined`          |\n| `emailLabel`               | `email-label`                |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"Email\"`            |\n| `enablePasswordValidation` | `enable-password-validation` |             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                      | `true`               |\n| `hideInputs`               | `hide-inputs`                |             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                      | `false`              |\n| `loginLabel`               | `login-label`                |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"Sign in\"`          |\n| `nextPage`                 | `next-page`                  |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"/\"`                |\n| `pageLabel`                | `page-label`                 |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"Register\"`         |\n| `passwordLabel`            | `password-label`             |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"Password\"`         |\n| `submitLabel`              | `submit-label`               |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"Register\"`         |\n\n\n## Dependencies\n\n### Used by\n\n - [sqm-stencilbook](../sqm-stencilbook)\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n- [sqm-password-field](../sqm-password-field)\n\n### Graph\n```mermaid\ngraph TD;\n  sqm-portal-register --> sqm-form-message\n  sqm-portal-register --> sqm-password-field\n  sqm-stencilbook --> sqm-portal-register\n  style sqm-portal-register fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
 
 const EditProfileReadme = "# sqm-portal-profile\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property                 | Attribute                   | Description | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Default                  |\r\n| ------------------------ | --------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ |\r\n| `countrytext`            | `countrytext`               |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Country\"`              |\r\n| `demoData`               | --                          |             | `{ states?: { success: boolean; loading: boolean; submitDisabled: boolean; showCountry: boolean; formState: { country: string; firstName: string; lastName: string; errors: any; error: string; }; user: { id: string; accountId: string; firstName: string; lastName: string; email: string; countryCode: string; }; text: { firstnametext: string; lastnametext: string; emailtext: string; countrytext: string; editProfileHeader: string; editProfileSubHeader: string; submitChangeButtonText: string; }; }; }` | `undefined`              |\r\n| `editProfileHeader`      | `edit-profile-header`       |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Edit your profile\"`    |\r\n| `editProfileSubHeader`   | `edit-profile-sub-header`   |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Personal Information\"` |\r\n| `emailtext`              | `emailtext`                 |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Email\"`                |\r\n| `firstnametext`          | `firstnametext`             |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"First Name\"`           |\r\n| `lastnametext`           | `lastnametext`              |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Last Name\"`            |\r\n| `showCountry`            | `show-country`              |             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `true`                   |\r\n| `submitChangeButtonText` | `submit-change-button-text` |             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `\"Submit Changes\"`       |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-profile --> sqm-form-message\r\n  style sqm-portal-profile fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
 
@@ -22875,7 +24060,7 @@ const ResetPasswordReadme = "# sqm-portal-reset-password\r\n\r\n\r\n\r\n<!-- Aut
 
 const EmailVerificationReadme = "# sqm-portal-email-verification\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property                  | Attribute                   | Description | Type                                                                                                                                                                                        | Default                                                                                           |\r\n| ------------------------- | --------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |\r\n| `demoData`                | --                          |             | `{ states?: { error: string; loading: boolean; success: boolean; }; content?: { email: string; verifyMessage: string; emailVerificationHeader: string; resendEmailButtonText: string; }; }` | `undefined`                                                                                       |\r\n| `emailVerificationHeader` | `email-verification-header` |             | `string`                                                                                                                                                                                    | `\"Verify your email\"`                                                                             |\r\n| `resendEmailButtonText`   | `resend-email-button-text`  |             | `string`                                                                                                                                                                                    | `\"Re-send Email\"`                                                                                 |\r\n| `verifyMessage`           | `verify-message`            |             | `string`                                                                                                                                                                                    | `\"A verification email was sent to {email}. Please verify your email to continue to the portal.\"` |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-email-verification --> sqm-form-message\r\n  style sqm-portal-email-verification fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
 
-const EmailVerifiedReadme = "# sqm-portal-verify-email\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property   | Attribute   | Description | Type                                                                                                 | Default     |\n| ---------- | ----------- | ----------- | ---------------------------------------------------------------------------------------------------- | ----------- |\n| `demoData` | --          |             | `{ states?: { error: string; loading: boolean; verified: boolean; }; data?: { oobCode: string; }; }` | `undefined` |\n| `nextPage` | `next-page` |             | `string`                                                                                             | `\"/\"`       |\n\n\n## Dependencies\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n\n### Graph\n```mermaid\ngraph TD;\n  sqm-portal-verify-email --> sqm-form-message\n  style sqm-portal-verify-email fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
+const EmailVerifiedReadme = "# sqm-portal-verify-email\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property   | Attribute   | Description | Type                                                                                                 | Default     |\r\n| ---------- | ----------- | ----------- | ---------------------------------------------------------------------------------------------------- | ----------- |\r\n| `demoData` | --          |             | `{ states?: { error: string; loading: boolean; verified: boolean; }; data?: { oobCode: string; }; }` | `undefined` |\r\n| `nextPage` | `next-page` |             | `string`                                                                                             | `\"/\"`       |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-verify-email --> sqm-form-message\r\n  style sqm-portal-verify-email fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
 
 const PortalTemplates_stories = {
   title: "Templates / Portal",
@@ -23073,7 +24258,7 @@ const ProgramMenu$1 = /*#__PURE__*/Object.freeze({
 const PoweredByImg_stories = {
   title: "Powered By",
 };
-const Default$a = () => {
+const Default$b = () => {
   return index.h(sqmPortalFooterView.PoweredByImg, null);
 };
 const CustomColor = () => {
@@ -23086,7 +24271,7 @@ const CustomWidthAndHeight = () => {
 const PoweredByImg = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': PoweredByImg_stories,
-  Default: Default$a,
+  Default: Default$b,
   CustomColor: CustomColor,
   CustomWidthAndHeight: CustomWidthAndHeight
 });
@@ -26003,6 +27188,7 @@ const stories = [
   ReferralTableRewardsCell$1,
   UserName,
   PasswordField,
+  TaskCard,
   PortalTemplates,
   ProgramMenu$1,
   PoweredByImg,
@@ -26010,6 +27196,7 @@ const stories = [
   Hero,
   ReferralIframe$1,
   NameFields$1,
+  UseRewardExchangeList,
 ];
 const StencilStorybook = class {
   constructor(hostRef) {
@@ -26121,7 +27308,7 @@ function UserNameView(props) {
   return index.h(index.Host, null, props.loading ? props.loadingText : props.username);
 }
 
-const GET_USER_NAME = sqmLeaderboardRankView.gql `
+const GET_USER_NAME = index$1.gql `
   query getUserName {
     viewer {
       ... on User {
@@ -26192,6 +27379,7 @@ exports.sqm_referral_table_date_cell = ReferralTableDateCell;
 exports.sqm_referral_table_rewards_cell = ReferralTableRewardsCell;
 exports.sqm_referral_table_status_cell = ReferralTableStatusCell;
 exports.sqm_referral_table_user_cell = ReferralTableUserCell;
+exports.sqm_reward_exchange_list = SqmRewardExchangeList;
 exports.sqm_router = SqmRouter;
 exports.sqm_share_button = ShareButton;
 exports.sqm_share_link = ShareLink;