@saasquatch/mint-components 1.3.2-14 → 1.3.2-18

package/dist/esm/sqm-divided-layout_30.entry.js

@@ -1,8 +1,8 @@
 import { h, r as registerInstance, c as Host, d as getAssetPath } from './index-17b4da69.js';
 import { m as h$1, j as useState, e as useEffect, f as useRef, n as d$2, y as y$1, b as browser, u as useReducer, c as createCommonjsModule, a as commonjsGlobal, k as useMemo } from './extends-3a3f9fe2.js';
-import { i as intl, a as insertCSS } from './global-90da933f.js';
+import { i as intl, a as insertCSS } from './global-0e81c5e6.js';
 import { u as useCallback } from './use-callback-b38a1523.js';
-import { d as dist, T as T$1, e as en, b as be, j as j$1, Z as Ze, r as rn, D as De, q as qe, P as P$1, E as Ee, M as M$1, a as sn, c as an, x as x$1, f as D$1, L as L$1, N as Ne, A as A$1 } from './index.module-90d2c3ad.js';
+import { d as dist, T as T$1, e as en, b as be, j as j$1, Z as Ze, r as rn, D as De, q as qe, P as P$1, E as Ee, M as M$1, a as sn, c as an, x as x$1, f as D$1, L as L$1, N as Ne, A as A$1 } from './index.module-9b5bb6a2.js';
 import { j as jsonpointer } from './jsonpointer-388a7082.js';
 import { j as jss, c as create } from './jss-preset-default.esm-71fae192.js';
 import { g as getProps, a as getMissingProps } from './utils-454405f5.js';
@@ -11,21 +11,21 @@ import { E as ErrorStyles, H as HostBlock, A as AuthWrapper, a as AuthColumn, b
 import { P as PortalContainerView } from './sqm-portal-container-view-73757ca5.js';
 import { P as PortalSectionView } from './sqm-portal-section-view-f0876545.js';
 import { T as TextSpanView } from './sqm-text-span-view-1781df94.js';
-import { g as gql, L as LeaderboardRankView } from './sqm-leaderboard-rank-view-47844836.js';
-import { u as useRerenderListener, a as useRequestRerender } from './re-render-e06f2f7f.js';
-import { p as pathToRegexp, B as BigStatView, u as useBigStat, a as useDemoBigStat } from './useDemoBigStat-c3b955b7.js';
+import { g as gql, L as LeaderboardRankView } from './sqm-leaderboard-rank-view-3f0dc20e.js';
+import { u as useRerenderListener, a as useRequestRerender } from './re-render-57ac6584.js';
+import { p as pathToRegexp, B as BigStatView, u as useBigStat, a as useDemoBigStat } from './useDemoBigStat-660c8672.js';
 import { S as ShareLinkView } from './sqm-share-link-view-9282b8e8.js';
-import { L as LeaderboardView, u as useLeaderboard, S as ShadowViewAddon } from './ShadowViewAddon-a3f510db.js';
+import { L as LeaderboardView, u as useLeaderboard, S as ShadowViewAddon } from './ShadowViewAddon-2338f393.js';
 import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-2242502c.js';
-import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-f2304ad9.js';
+import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-79b0748c.js';
 import { S as StatContainerView } from './sqm-stat-container-view-4133feb6.js';
-import { P as PortalProfileView } from './sqm-portal-profile-view-b67467b4.js';
+import { P as PortalProfileView } from './sqm-portal-profile-view-831dea85.js';
 import { P as PortalForgotPasswordView } from './sqm-portal-forgot-password-view-e3a6a716.js';
-import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-8cefe480.js';
+import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-8f253fb7.js';
 import { P as PortalResetPasswordView$1 } from './sqm-portal-reset-password-view-a4e50da2.js';
 import { P as PortalVerifyEmailView } from './sqm-portal-verify-email-view-6f18bac2.js';
 import { A as AssetCardView } from './sqm-asset-card-view-6f360937.js';
-import { P as PoweredByImg$1, a as PortalFooterView } from './sqm-portal-footer-view-d9fe0bf8.js';
+import { P as PoweredByImg$1, a as PortalFooterView } from './sqm-portal-footer-view-b8a2f15e.js';
 import { H as HeroView } from './sqm-hero-view-bfd8abd1.js';
 import { N as NameFieldsView } from './sqm-name-fields-view-4162fb7b.js';
 
@@ -14816,7 +14816,7 @@ function useRewardExchangeList(props) {
   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" });
+      setExchangeState({ redeemStage: "success", exchangeError: false });
     }
     if (!!errors) {
       setExchangeState({ exchangeError: true });
@@ -14990,7 +14990,9 @@ const stageProgressList = {
   confirmation: "Confirm",
 };
 function RewardExchangeView(props) {
+  console.log(props);
   const style = {
+    HostBlock: HostBlock,
     Container: {
       padding: "var(--sl-spacing-medium)",
       position: "relative",
@@ -15017,6 +15019,35 @@ function RewardExchangeView(props) {
         display: "flex",
         width: "100%",
       },
+      "& .text-area": {
+        textAlign: "left",
+        padding: "8px",
+      },
+      "& .title": {
+        fontSize: "var(--sl-font-size-medium)",
+        fontWeight: "var(--sl-font-weight-semibold)",
+      },
+      "& .amount": {
+        fontSize: "var(--sl-font-size-small)",
+      },
+      "& .error": {
+        fontSize: "var(--sl-font-size-small)",
+        color: "var(--sl-color-warning-500)",
+      },
+      "& .selected-outline": {
+        width: "18px",
+        height: "18px",
+        minWidth: "18px",
+        borderRadius: "50%",
+        background: "var(--sl-color-primary-500)",
+        position: "relative",
+        margin: "-9px",
+        left: "100%",
+      },
+      "& .selected-checkmark": {
+        position: "relative",
+        top: "-6px",
+      },
     },
     Drawer: {
       "&::part(base)": {
@@ -15034,7 +15065,9 @@ function RewardExchangeView(props) {
     FullImage: {
       objectFit: "contain",
       maxWidth: "100%",
-      height: "100px",
+      height: "150px",
+      display: "flex",
+      margin: "0 auto",
     },
     PreviewImage: {
       objectFit: "contain",
@@ -15090,24 +15123,33 @@ function RewardExchangeView(props) {
     },
     KutayButton: {
       display: "flex",
-      flexWrap: "wrap",
+      flexWrap: "wrap-reverse",
       margin: "var(--sl-spacing-medium) 0",
       "& .cancel": {
-        width: "20%",
         marginLeft: "auto",
         marginRight: "var(--sl-spacing-medium)",
         "&::part(base)": {
           fontWeight: "var(--sl-font-weight-normal)",
           color: "var(--sl-color-neutral-1000)",
         },
+        "@media (max-width: 1024px)": {
+          width: "100%",
+          marginRight: "0",
+        },
       },
       "& .continue": {
-        width: "20%",
         "&::part(base)": {
-          background: "var(--sl-color-neutral-500)",
+          background: "var(--sl-color-primary-500)",
+          borderColor: "var(--sl-color-primary-500)",
           fontWeight: "var(--sl-font-weight-normal)",
           color: "var(--sl-color-neutral-0)",
         },
+        "@media (max-width: 1024px)": {
+          width: "100%",
+        },
+      },
+      "& .continue.right": {
+        marginLeft: "auto",
       },
     },
   };
@@ -15121,7 +15163,7 @@ function RewardExchangeView(props) {
     var _a, _b;
     const item = states.selectedItem;
     if (!item || (item === null || item === void 0 ? void 0 : item.ruleType) === "FIXED_GLOBAL_REWARD")
-      return h("span", null);
+      return h("span", null, item === null || item === void 0 ? void 0 : item.prettySourceValue);
     if (!((_a = item.steps) === null || _a === void 0 ? void 0 : _a.length)) {
       return h("p", null,
         "Not enough ",
@@ -15134,14 +15176,19 @@ function RewardExchangeView(props) {
           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) => (h("sl-menu-item", { value: step, disabled: !step.available },
-      step.prettyDestinationValue,
-      h("div", { slot: "suffix", style: { fontSize: "75%", float: "right" } },
-        step.prettySourceValue,
-        step.unavailableReasonCode && (h("p", { style: { fontSize: "70%", color: "#F2994A" } }, intl.formatMessage({
-          id: "unavailableCode",
-          defaultMessage: states.content.text.notAvailableError,
-        }, { unavailableReasonCode: step.unavailableReasonCode })))))))));
+      } }, (_b = item.steps) === null || _b === void 0 ? void 0 : _b.map((step) => {
+      var _a, _b;
+      return (h("sl-menu-item", { value: step, disabled: !step.available },
+        step.prettyDestinationValue,
+        h("div", { slot: "suffix", style: { fontSize: "75%", float: "right" } },
+          step.prettySourceValue,
+          step.unavailableReasonCode && (h("p", { style: { fontSize: "70%", color: "#F2994A" } }, intl.formatMessage({
+            id: "unavailableCode",
+            defaultMessage: (_b = (_a = states.content) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.notAvailableError,
+          }, {
+            unavailableReason: step.unavailableReason || step.unavailableReasonCode,
+          }))))));
+    })));
   }
   function chooseReward() {
     var _a;
@@ -15152,6 +15199,7 @@ function RewardExchangeView(props) {
           gap: "20px",
           gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
         } }, (_a = data.exchangeList) === null || _a === void 0 ? void 0 : _a.map((item) => {
+        var _a, _b;
         const style = {
           boxShadow: item.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key)
             ? "0 0 0 2px var(--sl-color-primary-500)"
@@ -15168,58 +15216,49 @@ function RewardExchangeView(props) {
         return (h("div", { key: item.key, class: item.available ? sheet.classes.CardContainer : "", style: style },
           h("sl-card", { class: sheet.classes.Base, onClick: () => item.available &&
               callbacks.setExchangeState({ selectedItem: item }) },
-            item.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key) && (h("div", { style: {
-                width: "18px",
-                height: "18px",
-                borderRadius: "50%",
-                background: "var(--sl-color-primary-500)",
-                position: "relative",
-                margin: "-9px",
-                left: "350px",
-              } },
-              h("div", { style: { position: "relative", top: "-6px" } },
+            item.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key) && (h("div", { class: "selected-outline" },
+              h("div", { class: "selected-checkmark" },
                 h(CheckMark, null)))),
             // item?.imageUrl &&
             h("img", { class: sheet.classes.PreviewImage, src: (item === null || item === void 0 ? void 0 : item.imageUrl) || getAssetPath("./assets/Reward-icon.png") }),
-            h("p", { style: {
-                textAlign: "left",
-                margin: "0",
-                flex: "1",
-                fontSize: "90%",
-                padding: "8px",
-              } },
-              h("b", null, item.description),
-              h("p", { style: { margin: "0" } }, amount),
-              item.unavailableReasonCode && (h("p", { style: {
-                  fontSize: "70%",
-                  color: "#F2994A",
-                  marginTop: "0",
-                } }, intl.formatMessage({
+            h("div", { class: "text-area" },
+              h("div", { class: "title" }, item.description),
+              h("div", { class: "amount" }, amount),
+              item.unavailableReasonCode && (h("div", { class: "error" }, intl.formatMessage({
                 id: "unavailableCode",
-                defaultMessage: states.content.text.notAvailableError,
-              }, { unavailableReasonCode: item.unavailableReasonCode })))))));
+                defaultMessage: (_b = (_a = states.content) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.notAvailableError,
+              }, {
+                unavailableReason: item.unavailableReason ||
+                  item.unavailableReasonCode,
+              })))))));
       })),
       h("div", { class: sheet.classes.KutayButton },
-        h("sl-button", { class: "cancel", size: "large", type: "text" }, "Cancel"),
-        h("sl-button", { class: "continue", size: "large", onClick: () => callbacks.setStage("chooseAmount"), disabled: !states.selectedItem }, "Continue")),
+        h("sl-button", { class: "continue right", size: "large", onClick: () => callbacks.setStage("chooseAmount"), disabled: !states.selectedItem }, "Continue")),
     ];
   }
   function chooseAmount() {
+    var _a;
     const input = getInput();
+    const isDisabled = ((_a = states.selectedItem) === null || _a === void 0 ? void 0 : _a.ruleType) === "FIXED_GLOBAL_REWARD"
+      ? false
+      : input && !states.amount;
     return (h("div", null,
-      h("div", { style: { width: "50%", margin: "0 auto" } }, (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) && (h("img", { class: sheet.classes.FullImage, src: selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl }))),
-      h("p", null, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description),
+      h("div", null, 
+      //selectedItem?.imageUrl &&
+      h("img", { class: sheet.classes.FullImage, src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
+          getAssetPath("./assets/Reward-icon.png") })),
+      h("b", null, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description),
       h("div", { class: sheet.classes.InputBox }, input),
       h("div", { class: sheet.classes.KutayButton },
         h("sl-button", { class: "cancel", size: "large", type: "text", onClick: () => callbacks.resetState() }, "Cancel"),
-        h("sl-button", { class: "continue", size: "large", onClick: () => callbacks.setStage("confirmation"), disabled: input && !states.amount }, "Continue to confirmation"))));
+        h("sl-button", { class: "continue", size: "large", onClick: () => callbacks.setStage("confirmation"), disabled: isDisabled }, "Continue to confirmation"))));
   }
   function confirmation() {
     return (h("div", null,
       h("h2", null, "Confirm and redeem"),
       h("div", { style: { textAlign: "center" } },
         h("p", null,
-          h("b", null, selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettySourceValue)),
+          h("b", null, (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettySourceValue) || (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.prettySourceValue))),
         h("p", null,
           h(ExchangeArrows, null)),
         h("div", { class: sheet.classes.CardContainer, style: {
@@ -15232,16 +15271,16 @@ function RewardExchangeView(props) {
             h("img", { class: sheet.classes.PreviewImage, src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
                 getAssetPath("./assets/Reward-icon.png") }),
             h("p", { style: { marginBottom: "0", flex: "1" } }, selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue)))),
-      h("div", { class: sheet.classes.Buttons },
-        h("sl-button", { onClick: callbacks.exchangeReward, style: { display: "block" }, class: sheet.classes.Button }, "Redeem"),
-        h("a", { onClick: () => callbacks.setStage("chooseAmount"), style: { display: "block" }, class: sheet.classes.Button }, "Back"))));
+      h("div", { class: sheet.classes.KutayButton },
+        h("sl-button", { class: "cancel", type: "text", size: "large", onClick: () => callbacks.setStage("chooseAmount") }, "Back"),
+        h("sl-button", { class: "continue", size: "large", onClick: callbacks.exchangeReward }, "Redeem"))));
   }
   function success() {
     return (h("div", { style: { textAlign: "center" } },
       h("img", { class: sheet.classes.FullImage, src: getAssetPath("./assets/Reward-icon.png") }),
       h("p", { style: { color: "forestgreen" } }, "Reward Redeemed"),
       (data === null || data === void 0 ? void 0 : data.fuelTankCode) && h("pre", null, data === null || data === void 0 ? void 0 : data.fuelTankCode),
-      h("sl-button", { onClick: () => callbacks.resetState(true) }, "Done")));
+      h("sl-button", { class: "continue", type: "primary", size: "large", onClick: () => callbacks.resetState(true) }, "Done")));
   }
   const stages = {
     chooseReward: () => chooseReward(),
@@ -15282,13 +15321,17 @@ function RewardExchangeView(props) {
   //     </div>
   //   );
   // };
+  function errorMessage() {
+    return (h("sl-alert", { type: "danger", open: true },
+      h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
+      "An error occured trying to redeem this reward. Please try again."));
+  }
   return (h("div", { class: sheet.classes.Container },
     h("style", { type: "text/css" }, styleString),
     h("div", null,
       stageMap(),
-      currentStage && currentStage(),
-      states.exchangeError &&
-        "Something went wrong. Please contact support or try again.")));
+      states.exchangeError && errorMessage(),
+      currentStage && currentStage())));
 }
 
 const SqmRewardExchangeList = class {
@@ -15302,7 +15345,7 @@ const SqmRewardExchangeList = class {
     /**
      * @uiName Exchange button text
      */
-    this.notAvailableError = "{unavailableReasonCode, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {Not enough points} other {Not available} }";
+    this.notAvailableError = "{unavailableReason, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {Not enough points} other {Not available} }";
     h$1(this);
   }
   disconnectedCallback() { }
@@ -21053,7 +21096,10 @@ function MatrixStory({ matrix, props, Component, }) {
     return (h("div", null,
       h(PropsTable, { values: example }),
       h("hr", null),
-      h(Component, Object.assign({}, example))));
+      " ",
+      h("br", null),
+      h(Component, Object.assign({}, example)),
+      h("br", null)));
   });
 }
 function PropsTable({ values }) {
@@ -21105,7 +21151,7 @@ const gift = () => {
 };
 
 function ProgressBarView(props) {
-  const { progress = 0, goal = 1, steps = false, progressBarUnit = "", repeatable = false, complete = false, expired = false, } = props;
+  const { progress = 0, goal = 1, steps = false, progressBarUnit = "", repeatable = false, expired = false, } = props;
   console.log("progress bar props", props);
   const gift1 = gift();
   const gift2 = gift();
@@ -21155,9 +21201,7 @@ function ProgressBarView(props) {
         width: "100%",
         height: "4px",
         borderRadius: "4px",
-        backgroundColor: complete
-          ? "var(--sl-color-success-500)"
-          : "var(--sl-color-primary-500)",
+        backgroundColor: "var(--sl-color-primary-300)",
       },
       "& .progress": {
         display: "block",
@@ -21170,9 +21214,7 @@ function ProgressBarView(props) {
         width: "12px",
         height: "12px",
         display: "flex",
-        backgroundColor: complete
-          ? "var(--sl-color-success-500)"
-          : "var(--sl-color-primary-500)",
+        backgroundColor: "var(--sl-color-primary-300)",
         borderRadius: "50%",
         position: "relative",
         left: "47%",
@@ -21260,7 +21302,7 @@ function ProgressBarView(props) {
       ? ""
       : progressBarUnit + clamp(progress, 0, goal)));
     items.push(h("div", { class: "remain" }));
-    items.push(h("div", { class: "progress bg" }, goal));
+    items.push(h("div", { class: "progress bg" }, progressBarUnit + goal));
     items.push(h("div", { class: "gift" }, gift1));
   }
   function addSteps() {
@@ -21446,7 +21488,7 @@ function TaskCardView(props) {
       },
       "& .main.expired": {
         color: "var(--sl-color-neutral-400)",
-        background: "var(--sl-color-neutral-100)",
+        background: "var(--sl-color-neutral-50)",
       },
       "& .title": {
         fontSize: "var(--sl-font-size-small)",
@@ -21480,7 +21522,7 @@ function TaskCardView(props) {
         marginRight: "var(--sl-spacing-xx-small)",
       },
       "& .end": {
-        color: "var(--sl-color-warning-600)",
+        color: "var(--sl-color-warning-500)",
         fontWeight: "var(--sl-font-weight-semibold)",
         marginBottom: "var(--sl-spacing-xx-small)",
       },
@@ -21530,40 +21572,46 @@ function TaskCardView(props) {
   const repetitions = props.showProgressBar
     ? Math.floor(props.progress / props.goal)
     : props.progress;
+  const dateStart = props.showExpiry && luxon.DateTime.fromISO(props.rewardDuration.split("/")[0]);
+  const dateEnd = props.showExpiry && luxon.DateTime.fromISO(props.rewardDuration.split("/")[1]);
+  const dateToday = luxon.DateTime.now();
   const taskComplete = showComplete && props.repeatable === false;
-  const dateExpire = props.showExpiry && luxon.DateTime.fromISO(props.dateExpires.split("/").pop());
-  const taskExpired = props.showExpiry && luxon.DateTime.now() > dateExpire;
-  const dateExpireText = dateExpire.toLocaleString(luxon.DateTime.DATE_FULL);
-  console.log(taskExpired);
+  const taskUnavailable = props.showExpiry && (dateEnd < dateToday || dateToday < dateStart);
   return (h("div", { class: sheet.classes.TaskCard },
-    h("div", { class: taskExpired ? "main expired" : taskComplete ? "main complete" : "main" },
+    h("div", { class: taskUnavailable
+        ? "main expired"
+        : taskComplete
+          ? "main complete"
+          : "main" },
       h("style", { type: "text/css" }, styleString),
-      h("div", { class: sheet.classes.Header }, props.loading ? (h("sl-skeleton", { style: { width: "22%", margin: "0" } })) : (h("div", null,
-        taskExpired && (h("div", { class: "end" },
-          " ",
-          "Ended " + dateExpireText,
-          " ")),
-        showComplete && (h("span", { class: taskExpired ? "icon neutral" : "icon" }, checkmark_circle$1)),
-        h("span", { class: taskExpired ? "value" : "value black" }, props.rewardAmount),
+      h("div", { class: sheet.classes.Header }, props.loading ? (h("sl-skeleton", { style: { width: "22%", margin: "0", height: "12px" } })) : (h("div", null,
+        taskUnavailable && (h("div", { class: "end" }, "Available " +
+          dateStart.toLocaleString(luxon.DateTime.DATE_MED).split(",")[0] +
+          " - " +
+          dateEnd.toLocaleString(luxon.DateTime.DATE_MED).split(",")[0])),
+        showComplete && (h("span", { class: taskUnavailable ? "icon neutral" : "icon" }, checkmark_circle$1)),
+        h("span", { class: taskUnavailable ? "value" : "value black" }, props.rewardAmount),
         h("span", { class: "text" }, props.rewardUnit)))),
-      props.loading ? (h("sl-skeleton", { style: { width: "42%", margin: "0 16px" } })) : (h("div", { class: taskExpired ? "title" : "title black" }, props.cardTitle)),
-      props.loading ? (h("sl-skeleton", { style: { width: "91%", margin: "12px 16px" } })) : (h(Details, Object.assign({}, props))),
-      props.showProgressBar && props.loading ? (h("sl-skeleton", { style: { width: "91%", margin: "0 auto" } })) : (props.showProgressBar && (h(ProgressBarView, Object.assign({}, props, { complete: taskComplete, expired: taskExpired })))),
-      h("div", { class: sheet.classes.Footer }, props.loading ? (h("sl-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (h("div", { style: { display: "contents" } },
+      props.loading ? (h("sl-skeleton", { style: { width: "42%", margin: "0 16px", height: "12px" } })) : (h("div", { class: taskUnavailable ? "title" : "title black" }, props.cardTitle)),
+      props.loading ? (h("sl-skeleton", { style: { margin: "12px 16px", height: "12px" } })) : (h(Details, Object.assign({}, props))),
+      props.showProgressBar && props.loading ? (h("sl-skeleton", { style: { margin: "0 16px", height: "12px" } })) : (props.showProgressBar && (h(ProgressBarView, Object.assign({}, props, { complete: taskComplete, expired: taskUnavailable })))),
+      h("div", { class: sheet.classes.Footer }, props.loading ? (h("sl-skeleton", { style: { width: "25%", marginLeft: "auto", height: "12px" } })) : (h("div", { style: { display: "contents" } },
         h("span", { class: "text" },
           props.repeatable && (h("div", null,
             h("span", { class: repetitions > 0
-                ? taskExpired
+                ? taskUnavailable
                   ? "icon neutral"
                   : "icon success"
                 : "icon" }, arrow_left_right$1),
             h("span", { class: repetitions > 0
-                ? taskExpired
+                ? taskUnavailable
                   ? "neutral"
                   : "success"
                 : "" }, "Completed " + repetitions + " times"))),
-          props.showExpiry && !taskExpired && (h("span", null, "Ends " + dateExpireText))),
-        h("sl-button", { class: taskComplete || taskExpired ? "action disabled" : "action", type: "primary", size: "small", onClick: () => window.open(props.buttonLink), disabled: taskComplete || taskExpired }, props.buttonText)))))));
+          props.showExpiry && !taskUnavailable && (h("span", null, "Ends " + dateEnd.toLocaleString(luxon.DateTime.DATE_FULL)))),
+        h("sl-button", { class: taskComplete || taskUnavailable ? "action disabled" : "action", type: "primary", size: "small", onClick: () => props.openNewTab
+            ? window.open(props.buttonLink)
+            : window.open(props.buttonLink, "_self"), disabled: taskComplete || taskUnavailable }, props.buttonText)))))));
 }
 function Details(props) {
   const style = {
@@ -21620,7 +21668,7 @@ function Details(props) {
 
 const scenarioTaskCard = "@author:derek\r\n@owner:\r\nFeature: Task Card\r\n\r\n\tScenario: A header, body title, description and a CTA button are always displayed\r\n\t\tGiven the Task Card is configured with the following props\r\n\t\t\t| prop         | value                                        |\r\n\t\t\t| rewardAmount | \"40\"                                         |\r\n\t\t\t| rewardUnit   | \"Points\"                                     |\r\n\t\t\t| cardTitle    | Complete a survey                            |\r\n\t\t\t| description  | Fill out our survey form and receive points! |\r\n\t\t\t| buttonText   | Take Survey                                  |\r\n\t\t\t| buttonLink   | https://example.com/                         |\r\n\t\tWhen a user views the Task Card\r\n\t\tThen they see \"40 Points\" as the heading\r\n\t\tAnd the \"40\" is bolded\r\n\t\tAnd they see \"Complete a survey\" bolded in the body\r\n\t\tAnd a details icon in the top right hand corner\r\n\t\tAnd a button with text \"Take Survey\" in the bottom right hand corner\r\n\t\tWhen they click the button\r\n\t\tThen they are redirected to \"example.com\" in a new window\r\n\t\tWhen they click the details icon\r\n\t\tThen \"Fill out our survey form and receive points!\" is shown as the card description\r\n\r\n\tScenario: A loading state is displayed while the Task Card is loading\r\n\t\tGiven a Task Card component\r\n\t\tWhen a user views the Task Card\r\n\t\tThen a loading state is displayed\r\n\t\tWhen the Task Card has loaded\r\n\t\tThen the loading state disapears\r\n\r\n\tScenario Outline: The Progress Bar can be shown or hidden but is hidden by default\r\n\t\tGiven a Task Card component\r\n\t\tAnd it <mayHave> \"showProgressBar\" <value>\r\n\t\tWhen a user views the Task Card\r\n\t\tThen the progress bar <mayBe> displayed\r\n\t\tExamples:\r\n\t\t\t| mayHave      | value | mayBe |\r\n\t\t\t| has          | true  | is    |\r\n\t\t\t| has          | false | isn't |\r\n\t\t\t| doesn't have |       | isn't |\r\n\r\n\tScenario Outline: Tasks can be repeatable or one-time only but are one-time only be default\r\n\t\tGiven a Task Card component\r\n\t\tAnd it <mayHave> \"repeatable\" <value>\r\n\t\tAnd a user who has already completed the task\r\n\t\tWhen they views the Task Card\r\n\t\tThen they see a green checkmark icon beside the card heading\r\n\t\tAnd the card <mayBe> green\r\n\t\tAnd the card's border <mayBe> green\r\n\t\tAnd the CTA button <mayBe> disabled\r\n\t\tAnd the CTA button <mayBe> grey\r\n\t\tExamples:\r\n\t\t\t| mayHave      | value | mayBe |\r\n\t\t\t| has          | true  | isn't |\r\n\t\t\t| has          | false | is    |\r\n\t\t\t| doesn't have |       | is    |\r\n\r\n\tScenario: Task Expiries can be configured and disable the CTA after the expiry\r\n\t\tGiven a Task Card component\r\n\t\tAnd it is configured for <expiry>\r\n\t\tWhen a user views the Card on <day>\r\n\t\tThen they the expiry on <cardLocation>\r\n\t\tAnd the text <mayBe> orange\r\n\t\tAnd the card <mayBe> disabled\r\n\t\tAnd the card <mayBe> grey\r\n\t\tAnd the user <mayBe> unable to complete the loyalty task\r\n\t\tExamples:\r\n\t\t\t| expiry               | day                    | cardLocation | mayBe |\r\n\t\t\t| Dec 31 2021 11:59:59 | Dec 1st 2021 12:00:00  | bottom left  | isn't |\r\n\t\t\t| Dec 31 2021 11:59:59 | Dec 31 2021 11:00:00   | top right    | isn't |\r\n\t\t\t| Dec 31 2021 11:59:59 | Jan 15th 2022 10:00:00 | top right    | is    |\r\n\r\n\tScenario Outline: Task expiry can be hidden or shown but is hidden by default\r\n\t\tGiven a Task Card\r\n\t\tAnd it is configured with an expiry\r\n\t\tAnd it <mayHave> \"showExpiry\" <value>\r\n\t\tWhen a user views the Task card\r\n\t\tThen the expiry <mayBe> shown in the bottom left hand corner\r\n\t\tExamples:\r\n\t\t\t| mayHave      | value | mayBe |\r\n\t\t\t| has          | true  | is    |\r\n\t\t\t| has          | false | isn't |\r\n\t\t\t| doesn't have |       | isn't |\r\n\r\n\t#DS: Currently this text is non configurable and isnt set up for proper pluralization\r\n\tScenario Outline: A task completion count is displayed for repeatable tasks\r\n\t\tGiven a Task Card is configured for a repeatable task\r\n\t\tAnd has \"goalCompletionNumber\" <goalCompletionNumberValue>\r\n\t\tAnd a user with <userGoalProgress>\r\n\t\tWhen the user views the task card\r\n\t\tThen they see a repeat icon\r\n\t\tAnd the <text> in the bottom left hand corner\r\n\t\tAnd the <text> is green\r\n\t\tExamples:\r\n\t\t\t| goalCompletionNumber | userGoalProgress | text              |\r\n\t\t\t| 1                    | 0                | Completed 0 times |\r\n\t\t\t| 1                    | 1                | Completed 1 times |\r\n\t\t\t| 1                    | 2                | Completed 2 times |\r\n\t\t\t| 10                   | 5                | Completed 0 times |\r\n\t\t\t| 10                   | 12               | Completed 1 times |\r\n\t\t\t| 10                   | 29               | Completed 2 times |\r\n\r\n\tScenario Outline: The source of a user's progress can be a custom field or a program goal\r\n\t\tGiven a Task Card is configured to have <progressSourcePath> progress source\r\n\t\tAnd a user\r\n\t\tWhen they view the Task card\r\n\t\tThen the value at <progressSourcePath> is used to benchmark their progress against the Goal Completion Count\r\n\t\tExamples:\r\n\t\t\t| value                                            |\r\n\t\t\t| /customFields/activityCount                      |\r\n\t\t\t| /customFields/purchaseTotal                      |\r\n\t\t\t| /programGoals/count%2FComment-on-Article         |\r\n\t\t\t| /programGoals/count/Referral-Started%2Freferrals |\r\n\r\n\tScenario Outline: The users completion of a goal is calculated by the Goal Completion Number\r\n\t\tGiven a Task Card is configured to have <goalValue>\r\n\t\tAnd a user who has <progressValue>\r\n\t\tWhen they view the Task Card\r\n\t\tThen they are shown to have <progressValue> towards <goalValue>\r\n\t\tWhen their progress grows larger than <goalValue>\r\n\t\tThen the task is marked as completed\r\n\t\tExamples:\r\n\t\t\t| goalValue | progressValue |\r\n\t\t\t| 1         | 0             |\r\n\t\t\t| 10        | 9             |\r\n\t\t\t| 5         | 2             |\r\n\r\n\tScenario: The Goal Completion Number defaults to 1\r\n\t\tGiven a Task Card without a configured \"goalCompletionNumber\"\r\n\t\tAnd a user who has <progressValue>\r\n\t\tWhen they view the Task Card\r\n\t\tThen it <mayBe> marked as completed\r\n\t\tExamples:\r\n\t\t\t| progressValue | mayBe |\r\n\t\t\t| 0             | isn't |\r\n\t\t\t| 1             | is    |\r\n\t\t\t| 2             | is    |";
 
-const scenarioProgressBar = "@author:\r\n@owner:\r\nFeature: Task Card Progress Bar\r\n\r\n\tScenario Outline: Progress Bar\r\n\r\n\t\tGiven <progress> and <goal>\r\n\t\tThen I have <progressBar>\r\n\t\tAnd <progressBar> shows <progress> with <unit> above\r\n\t\tAnd gift icon has <color>\r\n\t\tAnd gift icon shows <goal> with <unit> below\r\n\r\n\t\tExamples:\r\n\t\t\t| progress | goal | progressBar           | unit | color |\r\n\t\t\t| -100     | 500  | ●――――――――――――――――――🎁 | $    | no    |\r\n\t\t\t| 0        | 500  | ●――――――――――――――――――🎁 | $    | no    |\r\n\t\t\t| 250      | 500  | ―――――――――●―――――――――🎁 | $    | no    |\r\n\t\t\t| 500      | 500  | ―――――――――――――――――――🎁 | $    | yes   |\r\n\t\t\t| 1000     | 500  | ―――――――――――――――――――🎁 | $    | yes   |\r\n\r\n\tScenario Outline: Progress Bar Steps\r\n\r\n\t\tGiven <progress> and <goal>\r\n\t\tAnd steps is enabled\r\n\t\tThen I have <progressBar>\r\n\t\tAnd <progressBar> has incrementing steps from 1 to <goal>\r\n\t\tAnd gift icon has <color>\r\n\t\tAnd gift icon shows <goal> below\r\n\r\n\t\tExamples:\r\n\t\t\t| progress | goal | progressBar           | color |\r\n\t\t\t| -1       | 5    | ―――○―――○―――○―――○―――🎁 | no    |\r\n\t\t\t| 0        | 5    | ―――○―――○―――○―――○―――🎁 | no    |\r\n\t\t\t| 1        | 5    | ―――●―――○―――○―――○―――🎁 | no    |\r\n\t\t\t| 5        | 5    | ―――○―――○―――○―――●―――🎁 | yes   |\r\n\t\t\t| 7        | 5    | ―――○―――○―――○―――●―――🎁 | yes   |\r\n\r\n\r\n\tScenario Outline: Progress Bar Repeatable\r\n\r\n\t\tGiven <progress> and <goal>\r\n\t\tThen I have <progressBar>\r\n\t\tAnd <progressBar> shows <progress> with <unit> above\r\n\t\tAnd <icon1> has <color1>\r\n\t\tAnd <icon2> has <color2>\r\n\t\tAnd <icon3> has <color3>\r\n\t\tAnd <icon1> shows <text1> below\r\n\t\tAnd <icon2> shows <text2> below\r\n\t\tAnd <icon3> shows <text3> below\r\n\r\n\t\tExamples:\r\n\t\t\t| progress | goal | progressBar          | unit | icon1 | icon2 | icon3 | color1 | color2 | color3 | text 1 | text 2 | text 3 |\r\n\t\t\t| 250      | 500  | ――――●――――🎁―――――――🎁 | $    | NA    | gift  | gift  | NA     | no     | no     | NA     | 500    | 1000   |\r\n\t\t\t| 500      | 500  | ―――――――――🎁―――――――🎁 | $    | NA    | gift  | gift  | NA     | yes    | no     | NA     | 500    | 1000   |\r\n\t\t\t| 750      | 500  | ―――――――――🎁―――●―――🎁 | $    | NA    | gift  | gift  | NA     | yes    | no     | NA     | 500    | 1000   |\r\n\t\t\t| 1000     | 500  | 🎁―――――――🎁―――――――🎁 | $    | gift  | gift  | gift  | yes    | yes    | no     | 500    | 1000   | 1500   |\r\n\t\t\t| 1250     | 500  | 🎁―――――――🎁―――●―――🎁 | $    | gift  | gift  | gift  | yes    | yes    | no     | 500    | 1000   | 1500   |\r\n\r\n\t# \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t    math logic inside text ?\r\n\t# | 1250     | 500  | 🎁―――――――🎁―――●―――🎁 | gift  | gift  | gift  | yes    | yes    | no     | goal * (⌊ progress / goal ⌋ - 1) | goal * ⌊ progress / goal ⌋ | goal * (⌊ progress / goal ⌋ +1) |\r\n\r\n\r\n\tScenario Outline: Progress Bar Steps Repeatable\r\n\r\n\t\tGiven <progress> and <goal>\r\n\t\tAnd steps is enabled\r\n\t\tThen I have <progressBar>\r\n\t\tAnd <progressBar> has incrementing steps\r\n\r\n\t\tExamples:\r\n\t\t\t| progress | goal | progressBar |";
+const scenarioProgressBar = "@author:\r\n@owner:\r\nFeature: Task Card Progress Bar\r\n\r\n\tScenario Outline: Progress Bar\r\n\r\n\t\tGiven a Task Card component\r\n\t\tAnd progress is <progress>\r\n\t\tAnd goal is <goal>\r\n\t\tThen I have <progressBar>\r\n\t\tAnd <progressBar> shows <progress> with <unit> above\r\n\t\tAnd gift icon has <color>\r\n\t\tAnd gift icon shows <goal> with <unit> below\r\n\r\n\t\tExamples:\r\n\t\t\t| progress | goal | progressBar           | unit | color |\r\n\t\t\t| -100     | 500  | ●――――――――――――――――――🎁 | $    | no    |\r\n\t\t\t| 0        | 500  | ●――――――――――――――――――🎁 | $    | no    |\r\n\t\t\t| 250      | 500  | ―――――――――●―――――――――🎁 | $    | no    |\r\n\t\t\t| 500      | 500  | ―――――――――――――――――――🎁 | $    | yes   |\r\n\t\t\t| 1000     | 500  | ―――――――――――――――――――🎁 | $    | yes   |\r\n\r\n\tScenario Outline: Progress Bar Steps\r\n\r\n\t\tGiven a Task Card component\r\n\t\tAnd progress is <progress>\r\n\t\tAnd goal is <goal>\r\n\t\tAnd steps is enabled\r\n\t\tThen I have <progressBar>\r\n\t\tAnd <progressBar> has incrementing steps from 1 to <goal>\r\n\t\tAnd gift icon has <color>\r\n\t\tAnd gift icon shows <goal> below\r\n\r\n\t\tExamples:\r\n\t\t\t| progress | goal | progressBar           | color |\r\n\t\t\t| -1       | 5    | ―――○―――○―――○―――○―――🎁 | no    |\r\n\t\t\t| 0        | 5    | ―――○―――○―――○―――○―――🎁 | no    |\r\n\t\t\t| 1        | 5    | ―――●―――○―――○―――○―――🎁 | no    |\r\n\t\t\t| 5        | 5    | ―――○―――○―――○―――●―――🎁 | yes   |\r\n\t\t\t| 7        | 5    | ―――○―――○―――○―――●―――🎁 | yes   |\r\n\r\n\r\n\tScenario Outline: Progress Bar Repeatable\r\n\r\n\t\tGiven a Task Card component\r\n\t\tAnd progress is <progress>\r\n\t\tAnd goal is <goal>\r\n\t\tAnd it is repeatable\r\n\t\tThen I have <progressBar>\r\n\t\tAnd <progressBar> shows <progress> with <unit> above\r\n\t\tAnd <icon1> is <color1> with <text1> displayed below\r\n\t\tAnd <icon2> is <color2> with <text2> displayed below\r\n\t\tAnd <icon3> is <color3> with <text3> displayed below\r\n\r\n\t\tExamples:\r\n\t\t\t| progress | goal | progressBar          | unit | icon1 | color1   | text1 | icon2 | color2    | text 2 | icon3 | color3    | text 1 | text 3 |\r\n\t\t\t| 250      | 500  | ――――●――――🎁―――――――🎁 | $    | NA    | NA       | NA    | gift  | greyscale | 500    | gift  | greyscale | NA     | 1000   |\r\n\t\t\t| 500      | 500  | ―――――――――🎁―――――――🎁 | $    | NA    | NA       | NA    | gift  | colorful  | 500    | gift  | greyscale | NA     | 1000   |\r\n\t\t\t| 750      | 500  | ―――――――――🎁―――●―――🎁 | $    | NA    | NA       | NA    | gift  | colorful  | 500    | gift  | greyscale | NA     | 1000   |\r\n\t\t\t| 1000     | 500  | 🎁―――――――🎁―――――――🎁 | $    | gift  | colorful | 500   | gift  | colorful  | 1000   | gift  | greyscale | 500    | 1500   |\r\n\t\t\t| 1250     | 500  | 🎁―――――――🎁―――●―――🎁 | $    | gift  | colorful | 500   | gift  | colorful  | 1000   | gift  | greyscale | 500    | 1500   |\r\n\r\n\tScenario Outline: Progress Bar Steps Repeatable\r\n\r\n\t\tGiven a Task Card component\r\n\t\tAnd progress is <progress>\r\n\t\tAnd goal is <goal>\r\n\t\tAnd steps is enabled\r\n\t\tAnd it is repeatable\r\n\t\tThen I have <progressBar>\r\n\r\n\t\tExamples:\r\n\t\t\t| progress | goal | progressBar |";
 
 const scenario$5 = scenarioTaskCard + scenarioProgressBar;
 const TaskCard_stories = {
@@ -21642,7 +21690,7 @@ const resizable = {
 };
 const oneAction = {
   rewardAmount: 20,
-  rewardUnit: "Points",
+  rewardUnit: "SaaSquatch Points",
   cardTitle: "Complete a survey",
   description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
   repeatable: false,
@@ -21651,13 +21699,14 @@ const oneAction = {
   goal: 1,
   buttonText: "Take survey",
   buttonLink: "https://example.com/",
+  openNewTab: false,
   showExpiry: false,
-  dateExpires: null,
+  rewardDuration: null,
   loading: false,
 };
 const coupleActions = {
   rewardAmount: 40,
-  rewardUnit: "Points",
+  rewardUnit: "SaaSquatch Points",
   cardTitle: "Comment on 5 articles",
   description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
   repeatable: false,
@@ -21667,13 +21716,14 @@ const coupleActions = {
   goal: 5,
   buttonText: "Take survey",
   buttonLink: "https://example.com/",
+  openNewTab: false,
   showExpiry: false,
-  dateExpires: null,
+  rewardDuration: null,
   loading: false,
 };
 const manyActions = {
   rewardAmount: 150,
-  rewardUnit: "Points",
+  rewardUnit: "SaaSquatch Points",
   cardTitle: "Spend $500 at our Store",
   description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
   repeatable: false,
@@ -21683,8 +21733,9 @@ const manyActions = {
   progressBarUnit: "$",
   buttonText: "Take survey",
   buttonLink: "https://example.com/",
+  openNewTab: false,
   showExpiry: false,
-  dateExpires: null,
+  rewardDuration: null,
   loading: false,
 };
 const TaskCardNotRepeatable = () => {
@@ -21745,10 +21796,10 @@ const TaskCardRepeatable = () => {
       h(TaskCardView, Object.assign({}, manyActions, { progress: 1000, repeatable: true })),
       h("h5", null))));
 };
-const TaskCardDateExpires = () => {
+const TaskCardEndDate = () => {
   const expire = {
     showExpiry: true,
-    dateExpires: "2021-12-01T08:00:00.000Z/2077-12-01T08:00:00.000Z",
+    rewardDuration: "2021-12-01T08:00:00.000Z/2077-12-01T08:00:00.000Z",
   };
   const expireRepeat = { ...expire, repeatable: true };
   return (h("div", { style: storyFrame },
@@ -21805,10 +21856,10 @@ const TaskCardLoading = () => {
       " ",
       h("h5", null))));
 };
-const TaskCardExpired = () => {
+const TaskCardUnavailable = () => {
   const expire = {
     showExpiry: true,
-    dateExpires: "2021-12-01T08:00:00.000Z/2021-12-01T08:00:00.000Z",
+    rewardDuration: "2021-11-30T08:00:00.000Z/2021-12-01T08:00:00.000Z",
   };
   const expireRepeat = { ...expire, repeatable: true };
   return (h("div", { style: storyFrame },
@@ -21897,9 +21948,9 @@ const TaskCard$1 = /*#__PURE__*/Object.freeze({
   'default': TaskCard_stories,
   TaskCardNotRepeatable: TaskCardNotRepeatable,
   TaskCardRepeatable: TaskCardRepeatable,
-  TaskCardDateExpires: TaskCardDateExpires,
+  TaskCardEndDate: TaskCardEndDate,
   TaskCardLoading: TaskCardLoading,
-  TaskCardExpired: TaskCardExpired,
+  TaskCardUnavailable: TaskCardUnavailable,
   ProgressBar: ProgressBar$1,
   ProgressBarSteps: ProgressBarSteps,
   ProgressBarRepeatable: ProgressBarRepeatable,
@@ -24918,7 +24969,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 -->\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; }; content?: { formData?: any; passwordField?: any; secondaryButton?: any; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel: string; }; refs?: { formRef: any; }; }` | `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 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 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";
 
@@ -24926,7 +24977,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",
@@ -25437,14 +25488,18 @@ const NameFields$1 = /*#__PURE__*/Object.freeze({
   NameFieldsWithErrors: NameFieldsWithErrors
 });
 
-const baseResponse = (data) => ({
+const baseResponse = (data, selected = null) => ({
   states: {
-    content: null,
+    content: {
+      text: {
+        notAvailableError: "{unavailableReason, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {Not enough points} other {Not available} }",
+      },
+    },
     redeemStage: "chooseReward",
     amount: 0,
     exchangeError: false,
     loading: false,
-    selectedItem: null,
+    selectedItem: selected,
     selectedStep: null,
   },
   data: {
@@ -25491,6 +25546,9 @@ const usTax = {
   available: false,
   unavailableReasonCode: "US_TAX",
 };
+const selected = {
+  key: "r1",
+};
 const imageUrl = (props) => ({
   imageUrl: props,
 });
@@ -25507,60 +25565,71 @@ const variableValue = (min, max, text) => ({
   sourceMaxValue: max,
   prettySourceMaxValue: max + " " + text,
 });
-const test = {
-  ...baseResponse([
-    {
-      ...baseReward$2,
-      ...description("Free swag with a promo code"),
-      ...imageUrl("https://i.imgur.com/Ds7M19I.png"),
-      ...fixedValue("40 SaaSquatch Points"),
-    },
-    {
-      ...baseReward$2,
-      ...description("Visa® Prepaid Card USD"),
-      ...imageUrl("https://i.imgur.com/4s3q2zz.png"),
-      ...variableValue(20, 80, "SaaSquatch Points"),
-    },
-    {
-      ...baseReward$2,
-      ...description("A very exclusive gift box"),
-      ...imageUrl("https://i.imgur.com/XuiJi4l.png"),
-      ...fixedValue("30 SaaSquatch Points"),
-    },
-    {
-      ...baseReward$2,
-      ...description("$50 Store credit"),
-      ...imageUrl("https://i.imgur.com/WkCMVSE.png"),
-      ...fixedValue("100 SaaSquatch Points"),
-    },
-    {
-      ...baseReward$2,
-      ...description("Variable amount of store credit"),
-      ...imageUrl("https://i.imgur.com/Jn2fE0s.png"),
-      ...variableValue(20, 100, "SaaSquatch Points"),
-    },
-    {
-      ...baseReward$2,
-      ...notEnoughPoints,
-      ...description("A very rare cactus"),
-      ...imageUrl("https://i.imgur.com/CvCdpXc.png"),
-      ...fixedValue("2000 SaaSquatch Points"),
-    },
-    {
-      ...baseReward$2,
-      ...usTax,
-      ...description("$1000 Store credit"),
-      ...imageUrl("https://i.imgur.com/I9FCh9Z.png"),
-      ...fixedValue("2000 SaaSquatch Points"),
-    },
-    {
-      ...baseReward$2,
-      ...notEnoughPoints,
-      ...description("A holiday gift box"),
-      ...imageUrl("https://i.imgur.com/HBJS1WH.png"),
-      ...fixedValue("100 SaaSquatch Points"),
-    },
-  ]),
+const data = [
+  {
+    ...baseReward$2,
+    ...description("Free swag with a promo code"),
+    ...imageUrl("https://i.imgur.com/Ds7M19I.png"),
+    ...fixedValue("40 SaaSquatch Points"),
+  },
+  {
+    ...baseReward$2,
+    ...selected,
+    ...description("Visa® Prepaid Card USD"),
+    ...imageUrl("https://i.imgur.com/4s3q2zz.png"),
+    ...variableValue(20, 80, "SaaSquatch Points"),
+  },
+  {
+    ...baseReward$2,
+    ...description("A very exclusive gift box"),
+    ...imageUrl("https://i.imgur.com/XuiJi4l.png"),
+    ...fixedValue("30 SaaSquatch Points"),
+  },
+  {
+    ...baseReward$2,
+    ...description("$50 Store credit"),
+    ...imageUrl("https://i.imgur.com/WkCMVSE.png"),
+    ...fixedValue("100 SaaSquatch Points"),
+  },
+  {
+    ...baseReward$2,
+    ...description("Variable amount of store credit"),
+    ...imageUrl("https://i.imgur.com/Jn2fE0s.png"),
+    ...variableValue(20, 100, "SaaSquatch Points"),
+  },
+  {
+    ...baseReward$2,
+    ...notEnoughPoints,
+    ...description("A very rare cactus"),
+    ...imageUrl("https://i.imgur.com/CvCdpXc.png"),
+    ...fixedValue("2000 SaaSquatch Points"),
+  },
+  {
+    ...baseReward$2,
+    ...usTax,
+    ...description("$1000 Store credit"),
+    ...imageUrl("https://i.imgur.com/I9FCh9Z.png"),
+    ...fixedValue("2000 SaaSquatch Points"),
+  },
+  {
+    ...baseReward$2,
+    ...notEnoughPoints,
+    ...description("A holiday gift box"),
+    ...imageUrl("https://i.imgur.com/HBJS1WH.png"),
+    ...fixedValue("100 SaaSquatch Points"),
+  },
+];
+const rewardExchange = {
+  ...baseResponse(data),
+};
+const rewardExchangeSelected = {
+  ...baseResponse(data, {
+    ...baseReward$2,
+    ...selected,
+    ...description("Visa® Prepaid Card USD"),
+    ...imageUrl("https://i.imgur.com/4s3q2zz.png"),
+    ...variableValue(20, 80, "SaaSquatch Points"),
+  }),
 };
 const test2 = {
   states: {
@@ -25604,6 +25673,7 @@ const test2 = {
           prettyDestinationValue: "1 Salmon Coin",
           available: true,
           unavailableReasonCode: null,
+          unavailableReason: "",
         },
         {
           sourceValue: 2,
@@ -25612,6 +25682,7 @@ const test2 = {
           prettyDestinationValue: "2 Salmons",
           available: true,
           unavailableReasonCode: null,
+          unavailableReason: "",
         },
         {
           sourceValue: 3,
@@ -25620,6 +25691,7 @@ const test2 = {
           prettyDestinationValue: "3 Salmons",
           available: true,
           unavailableReasonCode: null,
+          unavailableReason: "",
         },
         {
           sourceValue: 4,
@@ -25628,6 +25700,7 @@ const test2 = {
           prettyDestinationValue: "4 Salmons",
           available: true,
           unavailableReasonCode: null,
+          unavailableReason: "",
         },
         {
           sourceValue: 5,
@@ -25636,6 +25709,7 @@ const test2 = {
           prettyDestinationValue: "5 Salmons",
           available: true,
           unavailableReasonCode: null,
+          unavailableReason: "",
         },
       ],
     },
@@ -25666,9 +25740,13 @@ const resizable$1 = {
   height: "fit-content",
   overflow: "hidden",
 };
-const Default$b = () => {
+const rewardExchange$1 = () => {
+  return (h("div", { style: resizable$1 },
+    h(RewardExchangeView, Object.assign({}, rewardExchange))));
+};
+const rewardExchangeSelected$1 = () => {
   return (h("div", { style: resizable$1 },
-    h(RewardExchangeView, Object.assign({}, test))));
+    h(RewardExchangeView, Object.assign({}, rewardExchangeSelected))));
 };
 const Default2 = () => {
   return (h("div", { style: { ...resizable$1, height: "700px" } },
@@ -25678,7 +25756,8 @@ const Default2 = () => {
 const RewardExchangeList = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': RewardExchangeList_stories,
-  Default: Default$b,
+  rewardExchange: rewardExchange$1,
+  rewardExchangeSelected: rewardExchangeSelected$1,
   Default2: Default2
 });
 
@@ -28380,10 +28459,6 @@ const TaskCard$2 = class {
      * @uiName Show Progress Bar
      */
     this.showProgressBar = false;
-    /**
-     * @uiName Goal Progress Source
-     */
-    this.progressSource = "";
     /**
      * @uiName Goal Completion Number
      */
@@ -28397,11 +28472,11 @@ const TaskCard$2 = class {
      */
     this.showExpiry = false;
     /**
-     * @uiName Date Goal Expires
+     * @uiName Reward Duration
      * @uiWidget DateRange
      * @uiOptions {"allowPastDates":true, "months": 1}
      */
-    this.dateExpires = "/";
+    this.rewardDuration = "/";
     /**
      * @uiName CTA Button Text
      */
@@ -28410,11 +28485,15 @@ const TaskCard$2 = class {
      * @uiName CTA Button Link
      */
     this.buttonLink = "https://example.com/";
+    /**
+     * @uiName CTA Button Link Open in New Tab
+     */
+    this.openNewTab = false;
     /**
      * Select what type of stat to display for the goal. Manual paths are also supported.
      *
      * @uiWidget StatTypeSelectWidget
-     * @uiName Stat Type
+     * @uiName Goal Progress Source
      * @uiOptions {"version": 1.1}
      */
     this.statType = "/programGoals/count/Referral-Started%2Freferrals";
@@ -28425,7 +28504,7 @@ const TaskCard$2 = class {
     const { props } = j$1() ? useDemoBigStat(this) : useBigStat(this);
     const { value, statvalue } = props;
     console.log(props, j$1());
-    return (h(TaskCardView, Object.assign({}, getProps(this), { progress: value, loading: value === undefined })));
+    return (h(TaskCardView, Object.assign({ progress: value, loading: !j$1() && value === undefined }, getProps(this))));
   }
 };