@saasquatch/mint-components 1.3.2-12 → 1.3.2-13

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

@@ -14803,7 +14803,6 @@ const EXCHANGE = index_module.dist.gql `
 `;
 function useRewardExchangeList(props) {
   var _a, _b, _c, _d;
-  const drawerRef = _extends.useRef();
   const [exchangeState, setExchangeState] = _extends.useReducer((state, next) => ({
     ...state,
     ...next,
@@ -14817,22 +14816,16 @@ function useRewardExchangeList(props) {
   const { selectedItem, selectedStep, redeemStage, amount, exchangeError } = exchangeState;
   const user = index_module.T();
   const [exchange, { data: exchangeResponse, errors }] = index_module.be(EXCHANGE);
-  const { data, loading } = index_module.en(GET_EXCHANGE_LIST, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const { data, loading, refetch } = 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;
@@ -14890,29 +14883,16 @@ function useRewardExchangeList(props) {
     }
     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;
+  const resetState = (refresh) => {
+    refresh && refetch();
     setExchangeState({
       amount: 0,
       selectedStep: undefined,
       selectedItem: undefined,
       exchangeError: false,
+      redeemStage: "chooseReward",
     });
-  }, []);
-  _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 });
   }
@@ -14930,17 +14910,13 @@ function useRewardExchangeList(props) {
     },
     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,
+      resetState,
     },
   };
 }
@@ -15121,7 +15097,7 @@ function RewardExchangeView(props) {
       flexWrap: "wrap",
       margin: "var(--sl-spacing-medium) 0",
       "& .cancel": {
-        width: "150px",
+        width: "20%",
         marginLeft: "auto",
         marginRight: "var(--sl-spacing-medium)",
         "&::part(base)": {
@@ -15130,7 +15106,7 @@ function RewardExchangeView(props) {
         },
       },
       "& .continue": {
-        width: "150px",
+        width: "20%",
         "&::part(base)": {
           background: "var(--sl-color-neutral-500)",
           fontWeight: "var(--sl-font-weight-normal)",
@@ -15143,7 +15119,7 @@ function RewardExchangeView(props) {
   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 { states, data, callbacks } = props;
   const { selectedItem, selectedStep } = states;
   function getInput() {
     var _a, _b;
@@ -15170,8 +15146,6 @@ function RewardExchangeView(props) {
   }
   function chooseReward() {
     var _a;
-    const nextStage = "chooseAmount";
-    // console.log({ nextStage, ruleType: selectedItem?.ruleType });
     return [
       index.h("div", { style: {
           display: "grid",
@@ -15227,7 +15201,8 @@ function RewardExchangeView(props) {
                 : item.unavailableReasonCode))))));
       })),
       index.h("div", { class: sheet.classes.KutayButton },
-        index.h("sl-button", { class: "continue", size: "large", onClick: () => callbacks.setStage(nextStage), disabled: !states.selectedItem }, "Continue")),
+        index.h("sl-button", { class: "cancel", size: "large", type: "text" }, "Cancel"),
+        index.h("sl-button", { class: "continue", size: "large", onClick: () => callbacks.setStage("chooseAmount"), disabled: !states.selectedItem }, "Continue")),
     ];
   }
   function chooseAmount() {
@@ -15237,13 +15212,10 @@ function RewardExchangeView(props) {
       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.KutayButton },
-        index.h("sl-button", { class: "cancel", size: "large", type: "text", onClick: () => callbacks.setStage("chooseReward") }, "Cancel"),
-        index.h("sl-button", { class: "continue", size: "large", onClick: () => callbacks.setStage("confirmation"), disabled: states.selectedItem.ruleType !== "FIXED_GLOBAL_REWARD" ||
-            (input && !states.amount) }, "Continue to confirmation"))));
+        index.h("sl-button", { class: "cancel", size: "large", type: "text", onClick: () => callbacks.resetState() }, "Cancel"),
+        index.h("sl-button", { class: "continue", size: "large", onClick: () => callbacks.setStage("confirmation"), disabled: input && !states.amount }, "Continue to confirmation"))));
   }
-  //   console.log({ selectedItem, selectedStep });
   function confirmation() {
-    const previousStage = "chooseAmount";
     return (index.h("div", null,
       index.h("h2", null, "Confirm and redeem"),
       index.h("div", { style: { textAlign: "center" } },
@@ -15263,13 +15235,14 @@ function RewardExchangeView(props) {
             index.h("p", { style: { marginBottom: "0", flex: "1" } }, selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue)))),
       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"))));
+        index.h("a", { onClick: () => callbacks.setStage("chooseAmount"), 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)));
+      (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: () => callbacks.resetState(true) }, "Done")));
   }
   const stages = {
     chooseReward: () => chooseReward(),
@@ -15291,7 +15264,25 @@ function RewardExchangeView(props) {
       })),
       index.h(ProgressBar, { stageCount: 3, currentStage: stageNumber })));
   }
-  console.log(props);
+  // const BackButton = () => {
+  //   if (states.redeemStage === "success") return "";
+  //   let previousStage: Stages = "";
+  //   if (states.redeemStage === "confirmation") {
+  //     previousStage = "chooseAmount";
+  //   } else if (states.redeemStage === "chooseAmount") {
+  //     previousStage = "chooseReward";
+  //   }
+  //   return (
+  //     <div slot="label">
+  //       <a
+  //         style={{ cursor: "pointer", fontSize: "80%", color: "#858585" }}
+  //         onClick={() => callbacks.setStage(previousStage)}
+  //       >
+  //         <LeftArrow /> Back
+  //       </a>
+  //     </div>
+  //   );
+  // };
   return (index.h("div", { class: sheet.classes.Container },
     index.h("style", { type: "text/css" }, styleString),
     index.h("div", null,
@@ -15322,10 +15313,10 @@ const SqmRewardExchangeList = class {
     // if (missingProps) {
     //   return <RequiredPropsError missingProps={missingProps} />;
     // }
-    const { states, data, callbacks, refs } = index_module.j()
+    const { states, data, callbacks } = 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 })));
+    return (index.h(index.Host, { style: { display: "contents" } }, index.h(RewardExchangeView, { states: states, data: data, callbacks: callbacks })));
   }
   static get assetsDirs() { return ["assets"]; }
 };
@@ -15346,12 +15337,9 @@ function useRewardExchangeListDemo(props) {
     },
     callbacks: {
       exchangeReward: () => { },
-      openDrawer: () => { },
       setExchangeState: (_) => { },
       setStage: (_) => { },
-    },
-    refs: {
-      drawerRef: {},
+      resetState: () => { }
     },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
@@ -21034,6 +21022,69 @@ const PasswordField = /*#__PURE__*/Object.freeze({
   ValidationError: ValidationError
 });
 
+/**
+ * Displays a cartesian product of the input props
+ *
+ * @returns
+ */
+function MatrixStory({ matrix, props, Component, }) {
+  const propMatrix = Object.keys(matrix).map((propKey) => {
+    const propValues = matrix[propKey];
+    return propValues.map((val) => {
+      return {
+        [propKey]: val,
+      };
+    });
+  });
+  const combinations = cartesian(...propMatrix);
+  const propsCombinations = combinations.map((combo) => {
+    return combo.reduce((props, prop) => {
+      return {
+        ...props,
+        ...prop,
+      };
+    }, {});
+  });
+  return propsCombinations.map((combo) => {
+    const example = { ...props, ...combo };
+    return (index.h("div", null,
+      index.h(PropsTable, { values: example }),
+      index.h("hr", null),
+      index.h(Component, Object.assign({}, example))));
+  });
+}
+function PropsTable({ values }) {
+  return (index.h("table", null,
+    index.h("tbody", null, Object.keys(values).map((key) => {
+      return (index.h("tr", null,
+        index.h("th", null, key),
+        index.h("td", null, JSON.stringify(values[key]))));
+    }))));
+}
+/**
+ * Source: https://stackoverflow.com/questions/15298912/javascript-generating-combinations-from-n-arrays-with-m-elements
+ *
+ * TODO: Could replace with a fork of https://www.npmjs.com/package/cartesian
+ *
+ * @param args - an array of arrays
+ * @returns combinations of the elements in those array
+ */
+function cartesian(...args) {
+  var r = [], max = args.length - 1;
+  function helper(arr, i) {
+    for (var j = 0, l = args[i].length; j < l; j++) {
+      var a = arr.slice(0); // clone arr
+      a.push(args[i][j]);
+      if (i == max)
+        r.push(a);
+      else
+        helper(a, i + 1);
+    }
+  }
+  helper([], 0);
+  return r;
+}
+
 const checkmark_circle = () => {
   return (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18" },
     index.h("path", { fill: "currentColor", "fill-rule": "evenodd", d: "M1.636 9a7.364 7.364 0 1114.728 0A7.364 7.364 0 011.636 9zM9 0a9 9 0 100 18A9 9 0 009 0zm5.192 6.266a.982.982 0 00-1.548-1.208l-4.787 6.137-2.58-2.58a.982.982 0 00-1.39 1.388l3.367 3.366a.982.982 0 001.468-.09l5.47-7.013z", "clip-rule": "evenodd" })));
@@ -21051,7 +21102,7 @@ const gift = () => {
 };
 
 function ProgressBarView(props) {
-  const { progress = 0, goal = 1, steps = false, progressBarUnit = "", repeatable = false, complete = false, } = props;
+  const { progress = 0, goal = 1, steps = false, progressBarUnit = "", repeatable = false, complete = false, expired = false, } = props;
   console.log("progress bar props", props);
   const gift1 = gift();
   const gift2 = gift();
@@ -21080,7 +21131,10 @@ function ProgressBarView(props) {
     ProgressBar: {
       "& .progress-bar": {
         height: "15px",
-        marginTop: steps ? "var(--sl-spacing-x-medium)" : "var(--sl-spacing-large)",
+        marginTop: steps
+          ? "var(--sl-spacing-medium)"
+          : "var(--sl-spacing-large)",
+        filter: expired ? "grayscale(1)" : "",
         marginBottom: "var(--sl-spacing-xx-large)",
         marginRight: "var(--sl-spacing-x-small)",
         fontSize: "var(--sl-font-size-x-small)",
@@ -21098,7 +21152,9 @@ function ProgressBarView(props) {
         width: "100%",
         height: "4px",
         borderRadius: "4px",
-        backgroundColor: complete ? "var(--sl-color-success-500)" : "var(--sl-color-primary-500)",
+        backgroundColor: complete
+          ? "var(--sl-color-success-500)"
+          : "var(--sl-color-primary-500)",
       },
       "& .progress": {
         display: "block",
@@ -21111,7 +21167,9 @@ function ProgressBarView(props) {
         width: "12px",
         height: "12px",
         display: "flex",
-        backgroundColor: complete ? "var(--sl-color-success-500)" : "var(--sl-color-primary-500)",
+        backgroundColor: complete
+          ? "var(--sl-color-success-500)"
+          : "var(--sl-color-primary-500)",
         borderRadius: "50%",
         position: "relative",
         left: "47%",
@@ -21301,7 +21359,7 @@ function ProgressBarView(props) {
           }
           else {
             items.push(index.h("div", { class: "remain" }));
-            items.push(index.h("div", { class: "empty" }, progressBarUnit + i));
+            items.push(index.h("div", { class: "empty" }, i));
           }
         }
         else if (i == goal) {
@@ -21359,7 +21417,6 @@ function ProgressBarView(props) {
 }
 
 function TaskCardView(props) {
-  const { rewardAmount, cardTitle, description, showProgressBar, progress = 0, goal, rewardUnit, repeatable, showExpiry, dateExpires, buttonText, buttonLink, loading, } = props;
   console.log({ props });
   const checkmark_circle$1 = checkmark_circle();
   const arrow_left_right$1 = arrow_left_right();
@@ -21373,16 +21430,28 @@ function TaskCardView(props) {
         position: "relative",
         boxSizing: "border-box",
         minWidth: "347px",
-        background: "var(--sl-color-white)",
-        border: "1px solid var(--sl-color-gray-300)",
+        background: "var(--sl-color-neutral-0)",
+        border: "1px solid var(--sl-color-neutral-300)",
         borderRadius: "var(--sl-border-radius-medium)",
         fontSize: "var(--sl-font-size-small)",
         lineHeight: "var(--sl-line-height-dense)",
+        color: "var(--sl-color-neutral-600)",
       },
       "& .main.complete": {
         background: "var(--sl-color-success-50)",
         borderColor: "var(--sl-color-success-700)",
       },
+      "& .main.expired": {
+        color: "var(--sl-color-neutral-400)",
+        background: "var(--sl-color-neutral-100)",
+      },
+      "& .title": {
+        fontSize: "var(--sl-font-size-small)",
+        fontWeight: "var(--sl-font-weight-semibold)",
+      },
+      "& .black": {
+        color: "var(--sl-color-neutral-1000)",
+      },
     },
     Header: {
       display: "flex",
@@ -21395,7 +21464,6 @@ function TaskCardView(props) {
       },
       "& .value": {
         alignSelf: "center",
-        color: "var(--sl-color-black)",
         fontSize: "var(--sl-font-size-x-large)",
         fontWeight: "var(--sl-font-weight-semibold)",
         lineHeight: "100%",
@@ -21404,16 +21472,21 @@ function TaskCardView(props) {
       "& .text": {
         alignSelf: "end",
         textTransform: "uppercase",
-        color: "var(--sl-color-gray-600)",
         fontSize: "var(--sl-font-size-x-small)",
         lineHeight: "var(--sl-font-size-medium)",
         marginRight: "var(--sl-spacing-xx-small)",
       },
-    },
-    Title: {
-      color: "var(--sl-color-black)",
-      fontSize: "var(--sl-font-size-small)",
-      fontWeight: "var(--sl-font-weight-semibold)",
+      "& .end": {
+        color: "var(--sl-color-warning-600)",
+        fontWeight: "var(--sl-font-weight-semibold)",
+        marginBottom: "var(--sl-spacing-xx-small)",
+      },
+      "& .black": {
+        color: "var(--sl-color-neutral-1000)",
+      },
+      "& .neutral": {
+        color: "var(--sl-color-neutral-400)",
+      },
     },
     Footer: {
       display: "flex",
@@ -21425,58 +21498,69 @@ function TaskCardView(props) {
         marginTop: "auto",
         verticalAlign: "text-bottom",
         fontSize: "var(--sl-font-size-x-small)",
-        color: "var(--sl-color-gray-600)",
       },
       "& .success": {
-        color: "var(--sl-color-success-600)!important",
+        color: "var(--sl-color-success-600)",
         fontWeight: "var(--sl-font-weight-semibold)",
       },
       "& .action": {
         marginTop: "auto",
         marginLeft: "auto",
+        "&::part(base)": {
+          color: "var(--sl-color-neutral-0)",
+          borderRadius: "var(--sl-border-radius-medium)",
+        },
+        "&.disabled::part(base)": {
+          border: "1px solid var(--sl-color-neutral-400)",
+          background: "var(--sl-color-neutral-400)",
+        },
       },
-      "& sl-button.action::part(base) ": {
-        color: "var(--sl-color-white)",
-        background: "var(--sl-color-primary-500)",
-        border: "1px solid var(--sl-color-primary-500)",
-        borderRadius: "var(--sl-border-radius-medium)",
-      },
-      "& sl-button.action.completed::part(base) ": {
-        border: "1px solid var(--sl-color-gray-300)!important",
-        background: "var(--sl-color-gray-300)!important",
+      "& .neutral": {
+        color: "var(--sl-color-neutral-400)",
       },
     },
   };
   jssPresetDefault_esm.jss.setup(jssPresetDefault_esm.create());
   const sheet = jssPresetDefault_esm.jss.createStyleSheet(style);
   const styleString = sheet.toString();
-  const showComplete = progress >= goal;
-  const repetitions = showProgressBar ? Math.floor(progress / goal) : progress;
-  const taskComplete = showComplete && repeatable === false;
-  console.log({ showProgressBar, loading });
+  const showComplete = props.progress >= props.goal;
+  const repetitions = props.showProgressBar
+    ? Math.floor(props.progress / props.goal)
+    : props.progress;
+  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);
   return (index.h("div", { class: sheet.classes.TaskCard },
-    index.h("div", { class: showComplete ? "main complete" : "main" },
+    index.h("div", { class: taskExpired ? "main expired" : taskComplete ? "main complete" : "main" },
       index.h("style", { type: "text/css" }, styleString),
-      index.h("div", { class: sheet.classes.Header },
-        showComplete && index.h("span", { class: "icon" }, checkmark_circle$1),
-        index.h("span", { class: "value" }, rewardAmount),
-        index.h("span", { class: "text" }, rewardUnit)),
-      index.h("div", { class: sheet.classes.Title }, cardTitle),
-      index.h(Details, { description: description }),
-      showProgressBar && loading ? (index.h("sl-skeleton", { style: { width: "98%", margin: "0 auto" } })) : (showProgressBar && index.h(ProgressBarView, Object.assign({}, props, { complete: taskComplete }))),
-      index.h("div", { class: sheet.classes.Footer },
+      index.h("div", { class: sheet.classes.Header }, props.loading ? (index.h("sl-skeleton", { style: { width: "22%", margin: "0" } })) : (index.h("div", null,
+        taskExpired && (index.h("div", { class: "end" },
+          " ",
+          "Ended " + dateExpireText,
+          " ")),
+        showComplete && (index.h("span", { class: taskExpired ? "icon neutral" : "icon" }, checkmark_circle$1)),
+        index.h("span", { class: taskExpired ? "value" : "value black" }, props.rewardAmount),
+        index.h("span", { class: "text" }, props.rewardUnit)))),
+      props.loading ? (index.h("sl-skeleton", { style: { width: "42%", margin: "0 16px" } })) : (index.h("div", { class: taskExpired ? "title" : "title black" }, props.cardTitle)),
+      props.loading ? (index.h("sl-skeleton", { style: { width: "91%", margin: "12px 16px" } })) : (index.h(Details, Object.assign({}, props))),
+      props.showProgressBar && props.loading ? (index.h("sl-skeleton", { style: { width: "91%", margin: "0 auto" } })) : (props.showProgressBar && (index.h(ProgressBarView, Object.assign({}, props, { complete: taskComplete, expired: taskExpired })))),
+      index.h("div", { class: sheet.classes.Footer }, props.loading ? (index.h("sl-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (index.h("div", { style: { display: "contents" } },
         index.h("span", { class: "text" },
-          repeatable && (index.h("div", null,
-            index.h("span", { class: repetitions > 0 ? "icon success" : "icon" }, arrow_left_right$1),
-            index.h("span", { class: repetitions > 0 ? "success" : "" },
-              "Completed ",
-              repetitions,
-              " times"))),
-          showExpiry && (index.h("span", null,
-            "Ends ",
-            " ",
-            dateExpires))),
-        index.h("sl-button", { class: taskComplete ? "action completed" : "action", size: "small", onClick: () => window.open(buttonLink), disabled: taskComplete }, buttonText)))));
+          props.repeatable && (index.h("div", null,
+            index.h("span", { class: repetitions > 0
+                ? taskExpired
+                  ? "icon neutral"
+                  : "icon success"
+                : "icon" }, arrow_left_right$1),
+            index.h("span", { class: repetitions > 0
+                ? taskExpired
+                  ? "neutral"
+                  : "success"
+                : "" }, "Completed " + repetitions + " times"))),
+          props.showExpiry && !taskExpired && (index.h("span", null, "Ends " + dateExpireText))),
+        index.h("sl-button", { class: taskComplete || taskExpired ? "action disabled" : "action", type: "primary", size: "small", onClick: () => window.open(props.buttonLink), disabled: taskComplete || taskExpired }, props.buttonText)))))));
 }
 function Details(props) {
   const style = {
@@ -21491,7 +21575,7 @@ function Details(props) {
         position: "absolute",
         top: "var(--sl-spacing-medium)",
         right: "var(--sl-spacing-medium)",
-        color: "var(--sl-color-gray-700)",
+        color: "var(--sl-color-neutral-700)",
         fontSize: "var(--sl-font-size-large)",
         "& :hover": {
           color: "var(--sl-color-primary-700)",
@@ -21500,16 +21584,21 @@ function Details(props) {
         transition: "transform var(--sl-transition-medium) ease",
       },
       "& input:checked ~ .summary": {
-        transition: "max-height var(--sl-transition-medium) ease",
+        transition: "all var(--sl-transition-medium) ease",
         maxHeight: "300px",
+        marginBottom: props.steps
+          ? "var(--sl-spacing-large)"
+          : props.showProgressBar
+            ? "var(--sl-spacing-xx-large)"
+            : "var(--sl-spacing-large)",
       },
       "& .summary": {
         display: "block",
         overflow: "hidden",
-        color: "var(--sl-color-gray-700)",
-        fontSize: "var(--sl-font-size-x-small)",
+        fontSize: "var(--sl-font-size-small)",
         maxHeight: "0px",
-        transition: "max-height var(--sl-transition-fast) ease-out",
+        transition: "all var(--sl-transition-fast) ease-out",
+        marginBottom: "var(--sl-spacing-medium)",
       },
     },
   };
@@ -21526,14 +21615,21 @@ function Details(props) {
       index.h("span", { class: "summary" }, props.description))));
 }
 
-const scenario$5 = "@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 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 scenario$5 = scenarioTaskCard + scenarioProgressBar;
 const TaskCard_stories = {
   title: "Components/Task Card/",
   parameters: {
     scenario: scenario$5,
   },
 };
+const storyFrame = {
+  display: "inline-flex",
+  gap: "32px",
+};
 const resizable = {
   width: "347px",
   minWidth: "347px",
@@ -21541,49 +21637,55 @@ const resizable = {
   height: "fit-content",
   overflow: "hidden",
 };
-const NotRepeatable = () => {
-  const oneAction = {
-    rewardAmount: 20,
-    showExpiry: false,
-    rewardUnit: "Points",
-    cardTitle: "Complete a survey",
-    repeatable: false,
-    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-    buttonText: "Take survey",
-    goal: 1,
-    buttonLink: "https://example.com/",
-    showProgressBar: false,
-    loading: false,
-  };
-  const coupleActions = {
-    rewardAmount: 40,
-    rewardUnit: "Points",
-    cardTitle: "Comment on 5 articles",
-    showProgressBar: true,
-    showExpiry: false,
-    goal: 5,
-    repeatable: false,
-    steps: true,
-    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-    buttonText: "Start reading",
-    buttonLink: "https://example.com/",
-    loading: false,
-  };
-  const manyActions = {
-    rewardAmount: 150,
-    rewardUnit: "Points",
-    cardTitle: "Spend $500 at our Store",
-    showProgressBar: true,
-    showExpiry: false,
-    goal: 500,
-    repeatable: false,
-    progressBarUnit: "$",
-    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-    buttonText: "Visit our Store",
-    buttonLink: "https://example.com/",
-    loading: false,
-  };
-  return (index.h("div", { style: { display: "inline-flex", gap: "32px" } },
+const oneAction = {
+  rewardAmount: 20,
+  rewardUnit: "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,
+  showProgressBar: false,
+  progress: 0,
+  goal: 1,
+  buttonText: "Take survey",
+  buttonLink: "https://example.com/",
+  showExpiry: false,
+  dateExpires: null,
+  loading: false,
+};
+const coupleActions = {
+  rewardAmount: 40,
+  rewardUnit: "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,
+  showProgressBar: true,
+  steps: true,
+  progress: 1,
+  goal: 5,
+  buttonText: "Take survey",
+  buttonLink: "https://example.com/",
+  showExpiry: false,
+  dateExpires: null,
+  loading: false,
+};
+const manyActions = {
+  rewardAmount: 150,
+  rewardUnit: "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,
+  showProgressBar: true,
+  progress: 100,
+  goal: 500,
+  progressBarUnit: "$",
+  buttonText: "Take survey",
+  buttonLink: "https://example.com/",
+  showExpiry: false,
+  dateExpires: null,
+  loading: false,
+};
+const TaskCardNotRepeatable = () => {
+  return (index.h("div", { style: storyFrame },
     index.h("div", { style: resizable },
       index.h("h4", null, "One Action"),
       index.h(TaskCardView, Object.assign({}, oneAction, { progress: 0 })),
@@ -21594,9 +21696,6 @@ const NotRepeatable = () => {
       index.h("h5", null)),
     index.h("div", { style: resizable },
       index.h("h4", null, "A Couple Actions"),
-      index.h(TaskCardView, Object.assign({}, coupleActions, { progress: 0 })),
-      " ",
-      index.h("h5", null),
       index.h(TaskCardView, Object.assign({}, coupleActions, { progress: 1 })),
       " ",
       index.h("h5", null),
@@ -21605,9 +21704,6 @@ const NotRepeatable = () => {
       index.h("h5", null)),
     index.h("div", { style: resizable },
       index.h("h4", null, "Many Actions"),
-      index.h(TaskCardView, Object.assign({}, manyActions, { progress: 0 })),
-      " ",
-      index.h("h5", null),
       index.h(TaskCardView, Object.assign({}, manyActions, { progress: 230 })),
       " ",
       index.h("h5", null),
@@ -21615,329 +21711,142 @@ const NotRepeatable = () => {
       " ",
       index.h("h5", null))));
 };
-const NotRepeatableWithExpiry = () => {
-  const oneAction = {
-    rewardAmount: 20,
-    rewardUnit: "Points",
-    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,
-    showExpiry: true,
-    repeatable: false,
-    dateExpires: "Nov 1, 2021",
-    buttonLink: "https://example.com/",
-    showProgressBar: false,
-    loading: false,
-  };
-  const coupleActions = {
-    rewardAmount: 40,
-    rewardUnit: "Points",
-    cardTitle: "Comment on 5 articles",
-    showProgressBar: true,
-    goal: 5,
-    steps: true,
-    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-    buttonText: "Start reading",
-    showExpiry: true,
-    repeatable: false,
-    dateExpires: "Nov 1, 2021",
-    buttonLink: "https://example.com/",
-    loading: false,
-  };
-  const manyActions = {
-    rewardAmount: 150,
-    rewardUnit: "Points",
-    repeatable: false,
-    cardTitle: "Spend $500 at our Store",
-    showProgressBar: true,
-    goal: 500,
-    progressBarUnit: "$",
-    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-    buttonText: "Visit our Store",
-    showExpiry: true,
-    dateExpires: "Nov 1, 2021",
-    buttonLink: "https://example.com/",
-    loading: false,
-  };
-  return (index.h("div", { style: { display: "inline-flex", gap: "32px" } },
+const TaskCardRepeatable = () => {
+  return (index.h("div", { style: storyFrame },
     index.h("div", { style: resizable },
       index.h("h4", null, "One Action"),
-      index.h(TaskCardView, Object.assign({}, oneAction, { progress: 0 })),
+      index.h(TaskCardView, Object.assign({}, oneAction, { progress: 0, repeatable: true })),
       " ",
       index.h("h5", null),
-      index.h(TaskCardView, Object.assign({}, oneAction, { progress: 1 })),
+      index.h(TaskCardView, Object.assign({}, oneAction, { progress: 1, repeatable: true })),
       " ",
       index.h("h5", null)),
     index.h("div", { style: resizable },
       index.h("h4", null, "A Couple Actions"),
-      index.h(TaskCardView, Object.assign({}, coupleActions, { progress: 0 })),
-      " ",
+      index.h(TaskCardView, Object.assign({}, coupleActions, { progress: 1, repeatable: true })),
       index.h("h5", null),
-      index.h(TaskCardView, Object.assign({}, coupleActions, { progress: 1 })),
-      " ",
+      index.h(TaskCardView, Object.assign({}, coupleActions, { progress: 5, repeatable: true })),
       index.h("h5", null),
-      index.h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 })),
-      " ",
+      index.h(TaskCardView, Object.assign({}, coupleActions, { progress: 7, repeatable: true })),
+      index.h("h5", null),
+      index.h(TaskCardView, Object.assign({}, coupleActions, { progress: 10, repeatable: true })),
       index.h("h5", null)),
     index.h("div", { style: resizable },
       index.h("h4", null, "Many Actions"),
-      index.h(TaskCardView, Object.assign({}, manyActions, { progress: 0 })),
-      " ",
+      index.h(TaskCardView, Object.assign({}, manyActions, { progress: 100, repeatable: true })),
       index.h("h5", null),
-      index.h(TaskCardView, Object.assign({}, manyActions, { progress: 230 })),
-      " ",
+      index.h(TaskCardView, Object.assign({}, manyActions, { progress: 500, repeatable: true })),
       index.h("h5", null),
-      index.h(TaskCardView, Object.assign({}, manyActions, { progress: 500 })),
-      " ",
+      index.h(TaskCardView, Object.assign({}, manyActions, { progress: 650, repeatable: true })),
+      index.h("h5", null),
+      index.h(TaskCardView, Object.assign({}, manyActions, { progress: 1000, repeatable: true })),
       index.h("h5", null))));
 };
-const Repeatable = () => {
-  const oneAction = {
-    rewardAmount: 20,
-    rewardUnit: "Points",
-    showExpiry: false,
-    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,
-    buttonLink: "https://example.com/",
-    showProgressBar: false,
-    loading: false,
-  };
-  const coupleActions = {
-    rewardAmount: 40,
-    rewardUnit: "Points",
-    showExpiry: false,
-    cardTitle: "Comment on 5 articles",
-    showProgressBar: true,
-    repeatable: true,
-    goal: 5,
-    steps: true,
-    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-    buttonText: "Start reading",
-    buttonLink: "https://example.com/",
-    loading: false,
-  };
-  const manyActions = {
-    rewardAmount: 150,
-    rewardUnit: "Points",
-    showExpiry: false,
-    cardTitle: "Spend $500 at our Store",
-    showProgressBar: true,
-    repeatable: true,
-    goal: 500,
-    progressBarUnit: "$",
-    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-    buttonText: "Visit our Store",
-    buttonLink: "https://example.com/",
-    loading: false,
+const TaskCardDateExpires = () => {
+  const expire = {
+    showExpiry: true,
+    dateExpires: "2021-12-01T08:00:00.000Z/2077-12-01T08:00:00.000Z",
   };
-  return (index.h("div", { style: { display: "inline-flex", gap: "32px" } },
+  const expireRepeat = { ...expire, repeatable: true };
+  return (index.h("div", { style: storyFrame },
     index.h("div", { style: resizable },
       index.h("h4", null, "One Action"),
-      index.h(TaskCardView, Object.assign({}, oneAction, { progress: 0 })),
+      index.h(TaskCardView, Object.assign({}, oneAction, expire)),
       " ",
       index.h("h5", null),
-      index.h(TaskCardView, Object.assign({}, oneAction, { progress: 1 })),
+      index.h(TaskCardView, Object.assign({}, oneAction, expireRepeat)),
       " ",
       index.h("h5", null)),
     index.h("div", { style: resizable },
       index.h("h4", null, "A Couple Actions"),
-      index.h(TaskCardView, Object.assign({}, coupleActions, { progress: 1 })),
+      index.h(TaskCardView, Object.assign({}, coupleActions, expire)),
       " ",
       index.h("h5", null),
-      index.h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 })),
+      index.h(TaskCardView, Object.assign({}, coupleActions, expireRepeat)),
+      " ",
+      index.h("h5", null)),
+    index.h("div", { style: resizable },
+      index.h("h4", null, "Many Actions"),
+      index.h(TaskCardView, Object.assign({}, manyActions, expire)),
       " ",
       index.h("h5", null),
-      index.h(TaskCardView, Object.assign({}, coupleActions, { progress: 7 })),
+      index.h(TaskCardView, Object.assign({}, manyActions, expireRepeat)),
+      " ",
+      index.h("h5", null))));
+};
+const TaskCardLoading = () => {
+  const loading = { loading: true };
+  return (index.h("div", { style: storyFrame },
+    index.h("div", { style: resizable },
+      index.h("h4", null, "One Action"),
+      index.h(TaskCardView, Object.assign({}, oneAction, loading)),
       " ",
       index.h("h5", null),
-      index.h(TaskCardView, Object.assign({}, coupleActions, { progress: 10 })),
+      index.h(TaskCardView, Object.assign({}, oneAction, loading)),
       " ",
       index.h("h5", null)),
     index.h("div", { style: resizable },
-      index.h("h4", null, "Many Actions"),
-      index.h(TaskCardView, Object.assign({}, manyActions, { progress: 100 })),
+      index.h("h4", null, "A Couple Actions"),
+      index.h(TaskCardView, Object.assign({}, coupleActions, loading)),
       " ",
       index.h("h5", null),
-      index.h(TaskCardView, Object.assign({}, manyActions, { progress: 500 })),
+      index.h(TaskCardView, Object.assign({}, coupleActions, loading)),
       " ",
-      index.h("h5", null),
-      index.h(TaskCardView, Object.assign({}, manyActions, { progress: 650 })),
+      index.h("h5", null)),
+    index.h("div", { style: resizable },
+      index.h("h4", null, "Many Actions"),
+      index.h(TaskCardView, Object.assign({}, manyActions, loading)),
       " ",
       index.h("h5", null),
-      index.h(TaskCardView, Object.assign({}, manyActions, { progress: 1000 })),
+      index.h(TaskCardView, Object.assign({}, manyActions, loading)),
       " ",
       index.h("h5", null))));
 };
-const RepeatableWithExpiry = () => {
-  const oneAction = {
-    rewardAmount: 20,
-    rewardUnit: "Points",
-    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,
-    showExpiry: true,
-    dateExpires: "Nov 1, 2021",
-    buttonLink: "https://example.com/",
-    showProgressBar: false,
-    loading: false,
-  };
-  const coupleActions = {
-    rewardAmount: 40,
-    rewardUnit: "Points",
-    cardTitle: "Comment on 5 articles",
-    showProgressBar: true,
-    repeatable: true,
-    goal: 5,
-    steps: true,
-    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-    buttonText: "Start reading",
-    showExpiry: true,
-    dateExpires: "Nov 1, 2021",
-    buttonLink: "https://example.com/",
-    loading: false,
-  };
-  const manyActions = {
-    rewardAmount: 150,
-    rewardUnit: "Points",
-    cardTitle: "Spend $500 at our Store",
-    showProgressBar: true,
-    repeatable: true,
-    goal: 500,
-    progressBarUnit: "$",
-    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-    buttonText: "Visit our Store",
+const TaskCardExpired = () => {
+  const expire = {
     showExpiry: true,
-    dateExpires: "Nov 1, 2021",
-    buttonLink: "https://example.com/",
-    loading: false,
+    dateExpires: "2021-12-01T08:00:00.000Z/2021-12-01T08:00:00.000Z",
   };
-  return (index.h("div", { style: { display: "inline-flex", gap: "32px" } },
+  const expireRepeat = { ...expire, repeatable: true };
+  return (index.h("div", { style: storyFrame },
     index.h("div", { style: resizable },
       index.h("h4", null, "One Action"),
-      index.h(TaskCardView, Object.assign({}, oneAction, { progress: 0 })),
+      index.h(TaskCardView, Object.assign({}, oneAction, { progress: 0 }, expire)),
       " ",
       index.h("h5", null),
-      index.h(TaskCardView, Object.assign({}, oneAction, { progress: 1 })),
+      index.h(TaskCardView, Object.assign({}, oneAction, { progress: 1 }, expire)),
+      " ",
+      index.h("h5", null),
+      index.h(TaskCardView, Object.assign({}, oneAction, { progress: 0 }, expireRepeat)),
+      " ",
+      index.h("h5", null),
+      index.h(TaskCardView, Object.assign({}, oneAction, { progress: 1 }, expireRepeat)),
       " ",
       index.h("h5", null)),
     index.h("div", { style: resizable },
       index.h("h4", null, "A Couple Actions"),
-      index.h(TaskCardView, Object.assign({}, coupleActions, { progress: 1 })),
+      index.h(TaskCardView, Object.assign({}, coupleActions, { progress: 1 }, expire)),
       " ",
       index.h("h5", null),
-      index.h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 })),
+      index.h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 }, expire)),
       " ",
       index.h("h5", null),
-      index.h(TaskCardView, Object.assign({}, coupleActions, { progress: 7 })),
-      " ",
+      index.h(TaskCardView, Object.assign({}, coupleActions, { progress: 1 }, expireRepeat)),
       index.h("h5", null),
-      index.h(TaskCardView, Object.assign({}, coupleActions, { progress: 10 })),
-      " ",
+      index.h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 }, expireRepeat)),
       index.h("h5", null)),
     index.h("div", { style: resizable },
       index.h("h4", null, "Many Actions"),
-      index.h(TaskCardView, Object.assign({}, manyActions, { progress: 100 })),
+      index.h(TaskCardView, Object.assign({}, manyActions, { progress: 100 }, expire)),
       " ",
       index.h("h5", null),
-      index.h(TaskCardView, Object.assign({}, manyActions, { progress: 500 })),
+      index.h(TaskCardView, Object.assign({}, manyActions, { progress: 500 }, expire)),
       " ",
       index.h("h5", null),
-      index.h(TaskCardView, Object.assign({}, manyActions, { progress: 650 })),
-      " ",
+      index.h(TaskCardView, Object.assign({}, manyActions, { progress: 100 }, expireRepeat)),
       index.h("h5", null),
-      index.h(TaskCardView, Object.assign({}, manyActions, { progress: 1000 })),
-      " ",
+      index.h(TaskCardView, Object.assign({}, manyActions, { progress: 500 }, expireRepeat)),
       index.h("h5", null))));
-};
-
-const TaskCard$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': TaskCard_stories,
-  NotRepeatable: NotRepeatable,
-  NotRepeatableWithExpiry: NotRepeatableWithExpiry,
-  Repeatable: Repeatable,
-  RepeatableWithExpiry: RepeatableWithExpiry
-});
-
-/**
- * Displays a cartesian product of the input props
- *
- * @returns
- */
-function MatrixStory({ matrix, props, Component, }) {
-  const propMatrix = Object.keys(matrix).map((propKey) => {
-    const propValues = matrix[propKey];
-    return propValues.map((val) => {
-      return {
-        [propKey]: val,
-      };
-    });
-  });
-  const combinations = cartesian(...propMatrix);
-  const propsCombinations = combinations.map((combo) => {
-    return combo.reduce((props, prop) => {
-      return {
-        ...props,
-        ...prop,
-      };
-    }, {});
-  });
-  return propsCombinations.map((combo) => {
-    const example = { ...props, ...combo };
-    return (index.h("div", null,
-      index.h(PropsTable, { values: example }),
-      index.h("hr", null),
-      index.h(Component, Object.assign({}, example))));
-  });
-}
-function PropsTable({ values }) {
-  return (index.h("table", null,
-    index.h("tbody", null, Object.keys(values).map((key) => {
-      return (index.h("tr", null,
-        index.h("th", null, key),
-        index.h("td", null, JSON.stringify(values[key]))));
-    }))));
-}
-/**
- * Source: https://stackoverflow.com/questions/15298912/javascript-generating-combinations-from-n-arrays-with-m-elements
- *
- * TODO: Could replace with a fork of https://www.npmjs.com/package/cartesian
- *
- * @param args - an array of arrays
- * @returns combinations of the elements in those array
- */
-function cartesian(...args) {
-  var r = [], max = args.length - 1;
-  function helper(arr, i) {
-    for (var j = 0, l = args[i].length; j < l; j++) {
-      var a = arr.slice(0); // clone arr
-      a.push(args[i][j]);
-      if (i == max)
-        r.push(a);
-      else
-        helper(a, i + 1);
-    }
-  }
-  helper([], 0);
-  return r;
-}
-
-const scenario$6 = "@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 progressBar_stories = {
-  title: "Components/Task Card Progress Bar",
-  parameters: {
-    scenario: scenario$6,
-  },
-};
-const Default$a = () => {
-  return index.h(ProgressBarView, null);
 };
 const ProgressBar$1 = () => {
   const props = {
@@ -21980,10 +21889,14 @@ const ProgressBarStepsRepeatable = () => {
     index.h(MatrixStory, { matrix: { progress: [1, 5, 7, 12] }, props: props, Component: ProgressBarView })));
 };
 
-const TaskCardProgressBar = /*#__PURE__*/Object.freeze({
+const TaskCard$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  'default': progressBar_stories,
-  Default: Default$a,
+  'default': TaskCard_stories,
+  TaskCardNotRepeatable: TaskCardNotRepeatable,
+  TaskCardRepeatable: TaskCardRepeatable,
+  TaskCardDateExpires: TaskCardDateExpires,
+  TaskCardLoading: TaskCardLoading,
+  TaskCardExpired: TaskCardExpired,
   ProgressBar: ProgressBar$1,
   ProgressBarSteps: ProgressBarSteps,
   ProgressBarRepeatable: ProgressBarRepeatable,
@@ -25002,7 +24915,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; }; refs?: { formRef: any; }; content?: { formData?: any; passwordField?: any; secondaryButton?: any; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel: string; }; }` | `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; }; 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 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";
 
@@ -25208,7 +25121,7 @@ const ProgramMenu$1 = /*#__PURE__*/Object.freeze({
 const PoweredByImg_stories = {
   title: "Powered By",
 };
-const Default$b = () => {
+const Default$a = () => {
   return index.h(sqmPortalFooterView.PoweredByImg, null);
 };
 const CustomColor = () => {
@@ -25221,17 +25134,17 @@ const CustomWidthAndHeight = () => {
 const PoweredByImg = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': PoweredByImg_stories,
-  Default: Default$b,
+  Default: Default$a,
   CustomColor: CustomColor,
   CustomWidthAndHeight: CustomWidthAndHeight
 });
 
-const scenario$7 = "Feature: Portal Footer\r\n\r\n    Background: A user is viewing the portal\r\n        Given a hosted portal\r\n        And a user is viewing the portal\r\n        And the portal has a footer\r\n\r\n    Scenario Outline: FAQ and T&C links/text are configurable and open in a new page when clicked\r\n        Given the footer has prop \"terms-link\" with value \"https://example.com/terms\"\r\n        And prop \"terms-text\" with value \"Terms and Conditions\"\r\n        And prop \"faq-link\" with value \"https://example.com/FAQ\"\r\n        And prop \"faq-text\" with value \"Visit FAQ\"\r\n        When a user clicks on the \"Visit FAQ\" link\r\n        Then they will be redirected to \"https://example.com/FAQ\" in a new page\r\n        When they go back to the portal\r\n        And click on the \"Terms and Conditions\" link\r\n        Then they will be redirected to \"https://example.com/terms\" in a new page\r\n\r\n    Scenario Outline: FAQ/T&C Links are not shown if a link is not provided\r\n        Given the footer does not have <linkProp>\r\n        But it <mayHave> <textProp> with <value>\r\n        Then the <link> will not be shown in the footer\r\n        Examples:\r\n            | linkProp   | mayHave      | textProp  | value                | link     |\r\n            | terms-link | has          | termsText | Terms and Conditions | T&C Link |\r\n            | faq-link   | has          | faqText   | Visit FAQ            | FAQ Link |\r\n            | terms-link | doesn't have |           |                      | T&C Link |\r\n            | faq-link   | doesn't have |           |                      | FAQ Link |\r\n\r\n    Scenario Outline: The support email and text is configurable but has a default\r\n        Given the footer <mayHave> <emailPropWithValue>\r\n        And the footer <mayAlsoHave> <textPropWithValue>\r\n        Then the footer's support email text is <renderedEmailText>\r\n        And the email address will be a mailto link with <mailtoEmail>\r\n        When the user clicks on the email address mailto Link\r\n        Then the users preferred email client will open with a draft email to <mailtoEmail>\r\n        Examples:\r\n            | mayHave      | emailPropWithValue     | mayAlsoHave  | textPropWithValue                  | mailtoEmail            | renderedEmailText                                 |\r\n            | has          | support@saasquatch.com | has          | For support please contact {email} | support@saasquatch.com | For support please contact support@saasquatch.com |\r\n            | doesn't have | N/A                    | doesn't have | N/A                                | support@example.com    | For program support, contact support@example.com  |\r\n\r\n    Scenario Outline: Powered by SaaSquatch is shown by default\r\n        Given the footer <mayHaveProp> \"show-powered-by\" with <value>\r\n        Then the powered by SaaSquatch image <mayBeShown>\r\n        Examples:\r\n            | mayHaveProp       | value | mayBeShown  |\r\n            | has prop          | true  | is shown    |\r\n            | has prop          | false | isn't shown |\r\n            | has prop          | test  | is shown    |\r\n            | has prop          |       | is shown    |\r\n            | doesn't have prop |       | is shown    |\r\n\r\n    Scenario: Powered By Saasquatch links out to \"https://saasquatch.com\"\r\n        Given the footer has the powered by SaaSquatch image\r\n        When a user clicks on it\r\n        Then they will be redirected to \"https://saasquatch.com\" in a new page";
+const scenario$6 = "Feature: Portal Footer\r\n\r\n    Background: A user is viewing the portal\r\n        Given a hosted portal\r\n        And a user is viewing the portal\r\n        And the portal has a footer\r\n\r\n    Scenario Outline: FAQ and T&C links/text are configurable and open in a new page when clicked\r\n        Given the footer has prop \"terms-link\" with value \"https://example.com/terms\"\r\n        And prop \"terms-text\" with value \"Terms and Conditions\"\r\n        And prop \"faq-link\" with value \"https://example.com/FAQ\"\r\n        And prop \"faq-text\" with value \"Visit FAQ\"\r\n        When a user clicks on the \"Visit FAQ\" link\r\n        Then they will be redirected to \"https://example.com/FAQ\" in a new page\r\n        When they go back to the portal\r\n        And click on the \"Terms and Conditions\" link\r\n        Then they will be redirected to \"https://example.com/terms\" in a new page\r\n\r\n    Scenario Outline: FAQ/T&C Links are not shown if a link is not provided\r\n        Given the footer does not have <linkProp>\r\n        But it <mayHave> <textProp> with <value>\r\n        Then the <link> will not be shown in the footer\r\n        Examples:\r\n            | linkProp   | mayHave      | textProp  | value                | link     |\r\n            | terms-link | has          | termsText | Terms and Conditions | T&C Link |\r\n            | faq-link   | has          | faqText   | Visit FAQ            | FAQ Link |\r\n            | terms-link | doesn't have |           |                      | T&C Link |\r\n            | faq-link   | doesn't have |           |                      | FAQ Link |\r\n\r\n    Scenario Outline: The support email and text is configurable but has a default\r\n        Given the footer <mayHave> <emailPropWithValue>\r\n        And the footer <mayAlsoHave> <textPropWithValue>\r\n        Then the footer's support email text is <renderedEmailText>\r\n        And the email address will be a mailto link with <mailtoEmail>\r\n        When the user clicks on the email address mailto Link\r\n        Then the users preferred email client will open with a draft email to <mailtoEmail>\r\n        Examples:\r\n            | mayHave      | emailPropWithValue     | mayAlsoHave  | textPropWithValue                  | mailtoEmail            | renderedEmailText                                 |\r\n            | has          | support@saasquatch.com | has          | For support please contact {email} | support@saasquatch.com | For support please contact support@saasquatch.com |\r\n            | doesn't have | N/A                    | doesn't have | N/A                                | support@example.com    | For program support, contact support@example.com  |\r\n\r\n    Scenario Outline: Powered by SaaSquatch is shown by default\r\n        Given the footer <mayHaveProp> \"show-powered-by\" with <value>\r\n        Then the powered by SaaSquatch image <mayBeShown>\r\n        Examples:\r\n            | mayHaveProp       | value | mayBeShown  |\r\n            | has prop          | true  | is shown    |\r\n            | has prop          | false | isn't shown |\r\n            | has prop          | test  | is shown    |\r\n            | has prop          |       | is shown    |\r\n            | doesn't have prop |       | is shown    |\r\n\r\n    Scenario: Powered By Saasquatch links out to \"https://saasquatch.com\"\r\n        Given the footer has the powered by SaaSquatch image\r\n        When a user clicks on it\r\n        Then they will be redirected to \"https://saasquatch.com\" in a new page";
 
 const PortalFooter_stories = {
   title: "Portal Footer",
   parameters: {
-    scenario: scenario$7,
+    scenario: scenario$6,
   },
 };
 const defaultProps$9 = {
@@ -25260,12 +25173,12 @@ const PortalFooter = /*#__PURE__*/Object.freeze({
   FooterNoPoweredBy: FooterNoPoweredBy
 });
 
-const scenario$8 = "Feature: Hero Unit\r\n\r\n    Background: A portal with a hero unit exists\r\n        Given a hosted portal\r\n        And the portal has hero unit on the login page\r\n        And a user is viewing the login page\r\n\r\n    Scenario: The hero unit defaults to a single column layout\r\n        Given a hero unit does not have a \"columns\" prop\r\n        But the following html is wrapped by the hero unit\r\n            \"\"\"\r\n            <sqm-portal-login></sqm-portal-login>\r\n            <div slot=\"secondary-column\">\r\n            <h1 style=\"text-align:center\">Get Referring!</h1>\r\n            <p style=\"text-align:center\">\r\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\r\n            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\r\n            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\r\n            aliquip ex ea commodo consequat. Duis aute irure dolor in\r\n            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\r\n            pariatur.\r\n            </p>\r\n            </div>\r\n            \"\"\"\r\n        Then only a single column will be displayed\r\n        And within it will be the login component\r\n\r\n    Scenario Outline: The hero unit supports single or dual column layouts\r\n        Given a hero unit with prop \"columns\" having <columnValue>\r\n        And it wraps <html>\r\n        Then the hero unit displays <columnValue> columns\r\n        Examples:\r\n            | columnValue | html                                                                                              |\r\n            | 1           | <h1>Column 1!</h1>                                                                                |\r\n            | 2           | <h1>Column 1!</h1><div slot=\"secondary-column\"><h1 style=\"text-align:center\">Column 2!</h1></div> |\r\n\r\n    Scenario: HTML to be displayed in the second column comes from the \"secondary-column\" slot\r\n        Given a hero unit with \"columns\" \"2\"\r\n        And the following html\r\n            \"\"\"\r\n            <h1>Column 1!</h1>\r\n            <div>\r\n            <h1 style=\"text-align:center\">Column 2!</h1>\r\n            </div>\r\n            \"\"\"\r\n        When the hero unit is rendered\r\n        Then only one column is displayed with content\r\n        And column 1 will contain the \"Column 1!\" text\r\n        And column 1 will contain the \"Column 2!\" text\r\n        When the div for column two is updated to have 'slot=\"secondary-column\"'\r\n        Then the two columns are displayed with content\r\n        And column 1 will contain the \"Column 1!\" text\r\n        And column 2 will contain the \"Column 2!\" text\r\n\r\n    Scenario Outline: A background for the hero unit can be set as an image or colour\r\n        Given a hero unit with <backgroundPropValue>\r\n        Then the background will be <background>\r\n        Examples:\r\n            | background                                                  | background               |\r\n            | https://images.unsplash.com/photo-1599676821464-3555954838d | image of misty mountains |\r\n            | LightSlateGrey                                              | light slate grey         |\r\n            | #00FF00                                                     | green                    |\r\n            | rgb(128,0,128)                                              | purple                   |\r\n\r\n    Scenario Outline: Wrap Direction can be configured for mobile experiences\r\n        Given a hero unit with the following HTML\r\n            \"\"\"\r\n            <h1>Column 1!</h1>\r\n            <div slot=\"secondary-column\">\r\n            <h1 style=\"text-align:center\">Column 2!</h1>\r\n            </div>\r\n            \"\"\"\r\n        And prop \"wrap-direction\" has <value>\r\n        When the window width is less than 600px\r\n        Then the two columns will stack\r\n        And <column> will be on top\r\n        Examples:\r\n            | value        | column |\r\n            | wrap         | 1      |\r\n            | wrap-reverse | 2      |\r\n            |              | 1      |";
+const scenario$7 = "Feature: Hero Unit\r\n\r\n    Background: A portal with a hero unit exists\r\n        Given a hosted portal\r\n        And the portal has hero unit on the login page\r\n        And a user is viewing the login page\r\n\r\n    Scenario: The hero unit defaults to a single column layout\r\n        Given a hero unit does not have a \"columns\" prop\r\n        But the following html is wrapped by the hero unit\r\n            \"\"\"\r\n            <sqm-portal-login></sqm-portal-login>\r\n            <div slot=\"secondary-column\">\r\n            <h1 style=\"text-align:center\">Get Referring!</h1>\r\n            <p style=\"text-align:center\">\r\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\r\n            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\r\n            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\r\n            aliquip ex ea commodo consequat. Duis aute irure dolor in\r\n            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\r\n            pariatur.\r\n            </p>\r\n            </div>\r\n            \"\"\"\r\n        Then only a single column will be displayed\r\n        And within it will be the login component\r\n\r\n    Scenario Outline: The hero unit supports single or dual column layouts\r\n        Given a hero unit with prop \"columns\" having <columnValue>\r\n        And it wraps <html>\r\n        Then the hero unit displays <columnValue> columns\r\n        Examples:\r\n            | columnValue | html                                                                                              |\r\n            | 1           | <h1>Column 1!</h1>                                                                                |\r\n            | 2           | <h1>Column 1!</h1><div slot=\"secondary-column\"><h1 style=\"text-align:center\">Column 2!</h1></div> |\r\n\r\n    Scenario: HTML to be displayed in the second column comes from the \"secondary-column\" slot\r\n        Given a hero unit with \"columns\" \"2\"\r\n        And the following html\r\n            \"\"\"\r\n            <h1>Column 1!</h1>\r\n            <div>\r\n            <h1 style=\"text-align:center\">Column 2!</h1>\r\n            </div>\r\n            \"\"\"\r\n        When the hero unit is rendered\r\n        Then only one column is displayed with content\r\n        And column 1 will contain the \"Column 1!\" text\r\n        And column 1 will contain the \"Column 2!\" text\r\n        When the div for column two is updated to have 'slot=\"secondary-column\"'\r\n        Then the two columns are displayed with content\r\n        And column 1 will contain the \"Column 1!\" text\r\n        And column 2 will contain the \"Column 2!\" text\r\n\r\n    Scenario Outline: A background for the hero unit can be set as an image or colour\r\n        Given a hero unit with <backgroundPropValue>\r\n        Then the background will be <background>\r\n        Examples:\r\n            | background                                                  | background               |\r\n            | https://images.unsplash.com/photo-1599676821464-3555954838d | image of misty mountains |\r\n            | LightSlateGrey                                              | light slate grey         |\r\n            | #00FF00                                                     | green                    |\r\n            | rgb(128,0,128)                                              | purple                   |\r\n\r\n    Scenario Outline: Wrap Direction can be configured for mobile experiences\r\n        Given a hero unit with the following HTML\r\n            \"\"\"\r\n            <h1>Column 1!</h1>\r\n            <div slot=\"secondary-column\">\r\n            <h1 style=\"text-align:center\">Column 2!</h1>\r\n            </div>\r\n            \"\"\"\r\n        And prop \"wrap-direction\" has <value>\r\n        When the window width is less than 600px\r\n        Then the two columns will stack\r\n        And <column> will be on top\r\n        Examples:\r\n            | value        | column |\r\n            | wrap         | 1      |\r\n            | wrap-reverse | 2      |\r\n            |              | 1      |";
 
 const Hero_stories = {
   title: "Hero Layout",
   parameters: {
-    scenario: scenario$8,
+    scenario: scenario$7,
   },
 };
 const LoginOneColumn = () => {
@@ -25442,12 +25355,12 @@ const Hero = /*#__PURE__*/Object.freeze({
   TwoColumnLoginWithImgElement: TwoColumnLoginWithImgElement
 });
 
-const scenario$9 = "@owner:sam\r\n@author:sam\r\n\r\nFeature: Referral Iframe\r\n\r\n  Used to provide an external form for submitting referral leads using the current user's referral code\r\n\r\n  Background: A user is logged in\r\n    Given there is a logged in user\r\n\r\n  @motivating\r\n  Scenario: Referral code is passed to the iframe as a query parameter\r\n    Given the \"iframe-src\" is \"https://example.com\"\r\n    And the user has navigated to \"/refer\"\r\n    And the user's referral code is \"BOBBYREFER\"\r\n    When the iframe content is loaded\r\n    Then the iframe url will be \"https://example.com?rsCode=BOBBYREFER\"\r\n\r\n  @ui\r\n  Scenario Outline: The height and width of the iFrame can be controlled via props\r\n    Given the \"iframe-src\" is \"https://example.com\"\r\n    And the iframe content is 1000x1000\r\n    And the \"iframe-height\" is set to <heightValue>\r\n    And the \"iframe-width\" is set to <widthValue>\r\n    Then the content of the iframe will be displayed with scrollbars\r\n    And the dimension of the iFrame displayed will be 500x500\r\n    When the \"iframe-height\" is set to <heightValue>\r\n    And the \"iframe-width\" is set to <widthValue>\r\n    Then the full content of the iframe will be displayed on the page\r\n    And the dimension of the iFrame displayed will be 1000x1000\r\n    Examples:\r\n      | heightValue | widthValue |\r\n      | 500px       | 500px      |\r\n      | 50%         | 50%        |\r\n\r\n  @minutae\r\n  Scenario Outline: The iFrame will fail fast if a iFrame source isn't provided\r\n    Given \"iframe-src\" <mayBeAnAttribute>\r\n    And it <mayHaveValue>\r\n    When a user views the referral iFrame component\r\n    Then an alert with an error message is displayed in place of the iFrame\r\n    And it has a details section\r\n    When \"More details\" is clicked\r\n    Then the following information will be displayed\r\n      | component being used |\r\n      | missing attribute(s) |\r\n\r\n    Examples:\r\n      | mayBeAnAttribute    | mayHaveValue |\r\n      | is not an attribute | N/A          |\r\n      | is an attribute     | \"\"           |\r\n      | is an attribute     |              |";
+const scenario$8 = "@owner:sam\r\n@author:sam\r\n\r\nFeature: Referral Iframe\r\n\r\n  Used to provide an external form for submitting referral leads using the current user's referral code\r\n\r\n  Background: A user is logged in\r\n    Given there is a logged in user\r\n\r\n  @motivating\r\n  Scenario: Referral code is passed to the iframe as a query parameter\r\n    Given the \"iframe-src\" is \"https://example.com\"\r\n    And the user has navigated to \"/refer\"\r\n    And the user's referral code is \"BOBBYREFER\"\r\n    When the iframe content is loaded\r\n    Then the iframe url will be \"https://example.com?rsCode=BOBBYREFER\"\r\n\r\n  @ui\r\n  Scenario Outline: The height and width of the iFrame can be controlled via props\r\n    Given the \"iframe-src\" is \"https://example.com\"\r\n    And the iframe content is 1000x1000\r\n    And the \"iframe-height\" is set to <heightValue>\r\n    And the \"iframe-width\" is set to <widthValue>\r\n    Then the content of the iframe will be displayed with scrollbars\r\n    And the dimension of the iFrame displayed will be 500x500\r\n    When the \"iframe-height\" is set to <heightValue>\r\n    And the \"iframe-width\" is set to <widthValue>\r\n    Then the full content of the iframe will be displayed on the page\r\n    And the dimension of the iFrame displayed will be 1000x1000\r\n    Examples:\r\n      | heightValue | widthValue |\r\n      | 500px       | 500px      |\r\n      | 50%         | 50%        |\r\n\r\n  @minutae\r\n  Scenario Outline: The iFrame will fail fast if a iFrame source isn't provided\r\n    Given \"iframe-src\" <mayBeAnAttribute>\r\n    And it <mayHaveValue>\r\n    When a user views the referral iFrame component\r\n    Then an alert with an error message is displayed in place of the iFrame\r\n    And it has a details section\r\n    When \"More details\" is clicked\r\n    Then the following information will be displayed\r\n      | component being used |\r\n      | missing attribute(s) |\r\n\r\n    Examples:\r\n      | mayBeAnAttribute    | mayHaveValue |\r\n      | is not an attribute | N/A          |\r\n      | is an attribute     | \"\"           |\r\n      | is an attribute     |              |";
 
 const ReferralIframe_stories = {
   title: "Referral Iframe",
   parameters: {
-    scenario: scenario$9,
+    scenario: scenario$8,
   },
 };
 const props = {
@@ -25478,12 +25391,12 @@ const ReferralIframe$1 = /*#__PURE__*/Object.freeze({
   ReferralIframeError: ReferralIframeError
 });
 
-const scenario$a = "@owner:sam\r\n@author:sam\r\n\r\nFeature: Name Fields\r\n\r\n  Fields to be used to fill the first and last name of a user during registration\r\n\r\n  Background:\r\n    Given the current page is \"/register\"\r\n\r\n  @motivating\r\n  Scenario: Both first name and last name are required\r\n    Given the email field has valid input\r\n    And the password field has valid input\r\n    And first name field is empty\r\n    And last name field is empty\r\n    When register is clicked\r\n    Then the name fields will be highlighted in red\r\n    And the error messages will say \"Cannot be empty\"\r\n\r\n  @motivating\r\n  Scenario: First and last name are upserted with the SaaSquatch user\r\n    Given all fields have been filled with data\r\n      | firstName | lastName  | email           | password        |\r\n      | Bob       | Testerson | bob@example.com | SecurePassword1 |\r\n    When register is clicked\r\n    Then the email verification page will be loaded\r\n    And the user will be upserted\r\n    And the SaaSquatch user will contain data\r\n      | firstName | lastName  | email           |\r\n      | Bob       | Testerson | bob@example.com |\r\n\r\n";
+const scenario$9 = "@owner:sam\r\n@author:sam\r\n\r\nFeature: Name Fields\r\n\r\n  Fields to be used to fill the first and last name of a user during registration\r\n\r\n  Background:\r\n    Given the current page is \"/register\"\r\n\r\n  @motivating\r\n  Scenario: Both first name and last name are required\r\n    Given the email field has valid input\r\n    And the password field has valid input\r\n    And first name field is empty\r\n    And last name field is empty\r\n    When register is clicked\r\n    Then the name fields will be highlighted in red\r\n    And the error messages will say \"Cannot be empty\"\r\n\r\n  @motivating\r\n  Scenario: First and last name are upserted with the SaaSquatch user\r\n    Given all fields have been filled with data\r\n      | firstName | lastName  | email           | password        |\r\n      | Bob       | Testerson | bob@example.com | SecurePassword1 |\r\n    When register is clicked\r\n    Then the email verification page will be loaded\r\n    And the user will be upserted\r\n    And the SaaSquatch user will contain data\r\n      | firstName | lastName  | email           |\r\n      | Bob       | Testerson | bob@example.com |\r\n\r\n";
 
 const NameFields_stories = {
   title: "Name Fields",
   parameters: {
-    scenario: scenario$a,
+    scenario: scenario$9,
   },
 };
 const props$1 = {
@@ -25536,7 +25449,7 @@ const baseResponse = (data) => ({
   },
   callbacks: {
     exchangeReward: null,
-    openDrawer: null,
+    resetState: null,
     setStage: null,
     setExchangeState: null,
     refs: null,
@@ -25730,7 +25643,7 @@ const test2 = {
   },
   callbacks: {
     exchangeReward: null,
-    openDrawer: null,
+    resetState: null,
     setStage: null,
     setExchangeState: null,
     refs: {
@@ -25750,7 +25663,7 @@ const resizable$1 = {
   height: "fit-content",
   overflow: "hidden",
 };
-const Default$c = () => {
+const Default$b = () => {
   return (index.h("div", { style: resizable$1 },
     index.h(RewardExchangeView, Object.assign({}, test))));
 };
@@ -25762,7 +25675,7 @@ const Default2 = () => {
 const RewardExchangeList = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': RewardExchangeList_stories,
-  Default: Default$c,
+  Default: Default$b,
   Default2: Default2
 });
 
@@ -28386,7 +28299,6 @@ const stories = [
   UserName,
   PasswordField,
   TaskCard$1,
-  TaskCardProgressBar,
   PortalTemplates,
   ProgramMenu$1,
   PoweredByImg,
@@ -28481,6 +28393,12 @@ const TaskCard$2 = class {
      * @uiName Show Goal Expiry
      */
     this.showExpiry = false;
+    /**
+     * @uiName Date Goal Expires
+     * @uiWidget DateRange
+     * @uiOptions {"allowPastDates":true, "months": 1}
+     */
+    this.dateExpires = "/";
     /**
      * @uiName CTA Button Text
      */