@saasquatch/mint-components 1.3.2-2 → 1.3.2-6

package/dist/esm/{sqm-divided-layout_27.entry.js → sqm-divided-layout_28.entry.js}

@@ -15,7 +15,7 @@ import { T as TextSpanView } from './sqm-text-span-view-1781df94.js';
 import { g as gql } from './index-2f5dd0a1.js';
 import { u as useRerenderListener } from './re-render-9ab5fe0f.js';
 import { u as useChildElements } from './useChildElements-506f00d0.js';
-import { p as pathToRegexp, B as BigStatView, u as useBigStat, a as useDemoBigStat } from './useDemoBigStat-b71fe122.js';
+import { p as pathToRegexp, B as BigStatView, u as useBigStat, a as useDemoBigStat } from './useDemoBigStat-3d4832ef.js';
 import { S as ShareLinkView } from './sqm-share-link-view-9282b8e8.js';
 import { L as LeaderboardView, u as useLeaderboard, S as ShadowViewAddon } from './ShadowViewAddon-fff5d35d.js';
 import { L as LeaderboardRankView } from './sqm-leaderboard-rank-view-da91f5f3.js';
@@ -28,7 +28,6 @@ import { P as PortalEmailVerificationView } from './sqm-portal-email-verificatio
 import { P as PortalResetPasswordView$1 } from './sqm-portal-reset-password-view-a4e50da2.js';
 import { P as PortalVerifyEmailView } from './sqm-portal-verify-email-view-6f18bac2.js';
 import { A as AssetCardView } from './sqm-asset-card-view-6f360937.js';
-import { T as TaskCardView } from './sqm-task-card-view-2ee495af.js';
 import { P as PoweredByImg$1, a as PortalFooterView } from './sqm-portal-footer-view-c317518e.js';
 import { H as HeroView } from './sqm-hero-view-bfd8abd1.js';
 import { N as NameFieldsView } from './sqm-name-fields-view-4162fb7b.js';
@@ -14767,6 +14766,7 @@ const GET_EXCHANGE_LIST = dist.gql `
               destinationValue
               prettyDestinationValue
               available
+              unavailableReasonCode
             }
           }
           totalCount
@@ -14801,7 +14801,7 @@ function useRewardExchangeList(props) {
   const { selectedItem, selectedStep, redeemStage, amount, exchangeError } = exchangeState;
   const user = T$1();
   const [exchange, { data: exchangeResponse, errors }] = be(EXCHANGE);
-  const { data } = en(GET_EXCHANGE_LIST, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const { data, loading } = en(GET_EXCHANGE_LIST, !(user === null || user === void 0 ? void 0 : user.jwt));
   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) {
@@ -14910,6 +14910,7 @@ function useRewardExchangeList(props) {
       amount,
       selectedStep,
       exchangeError,
+      loading,
     },
     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,
@@ -14928,6 +14929,14 @@ function useRewardExchangeList(props) {
   };
 }
 
+const LeftArrow = () => (h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { marginBottom: "-2px", marginRight: "5px" } },
+  h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M7.34655 1.90573C7.75405 2.31323 7.75405 2.97392 7.34655 3.38143L3.56266 7.16531H14.9565C15.5328 7.16531 16 7.6325 16 8.20879C16 8.78509 15.5328 9.25227 14.9565 9.25227H3.56266L7.69437 13.384C8.10188 13.7915 8.10188 14.4522 7.69437 14.8597C7.28687 15.2672 6.62617 15.2672 6.21867 14.8597L0.305628 8.94664C-0.101876 8.53914 -0.101876 7.87845 0.305628 7.47094L5.87084 1.90573C6.27835 1.49822 6.93904 1.49822 7.34655 1.90573Z", fill: "#858585" })));
+const ExchangeArrows = () => (h("svg", { width: "30", height: "30", viewBox: "0 0 30 30", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  h("circle", { cx: "15", cy: "15", r: "15", fill: "white" }),
+  h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10.6255 21.783C10.5129 21.8963 10.3597 21.96 10.2 21.96C10.0402 21.96 9.88705 21.8963 9.77442 21.783L5.87442 17.8597C5.64081 17.6247 5.64194 17.2448 5.87695 17.0112C6.11197 16.7775 6.49186 16.7787 6.72548 17.0137L9.59995 19.9054V8.52001C9.59995 8.18864 9.86858 7.92001 10.2 7.92001C10.5313 7.92001 10.8 8.18864 10.8 8.52001V19.9054L13.6744 17.0137C13.908 16.7787 14.2879 16.7775 14.5229 17.0112C14.758 17.2448 14.7591 17.6247 14.5255 17.8597L10.6255 21.783ZM20.2255 8.09707C20.1129 7.98378 19.9597 7.92007 19.8 7.92007C19.6402 7.92007 19.487 7.98378 19.3744 8.09707L15.4744 12.0204C15.2408 12.2554 15.2419 12.6353 15.477 12.8689C15.712 13.1025 16.0919 13.1014 16.3255 12.8664L19.2 9.97473V21.3601C19.2 21.6914 19.4686 21.9601 19.8 21.9601C20.1313 21.9601 20.4 21.6914 20.4 21.3601V9.97473L23.2744 12.8664C23.508 13.1014 23.8879 13.1025 24.1229 12.8689C24.358 12.6353 24.3591 12.2554 24.1255 12.0204L20.2255 8.09707Z", fill: "#333333" })));
+const CheckMark = () => (h("svg", { style: { top: "-4px", position: "relative", left: "2px" }, xmlns: "http://www.w3.org/2000/svg", width: "10", height: "7", viewBox: "0 0 10 7", fill: "none" },
+  h("path", { d: "M2.12828 2.71485C1.72536 2.33712 1.09253 2.35754 0.714799 2.76045C0.337068 3.16336 0.357483 3.7962 0.760395 4.17393L2.12828 2.71485ZM3.81471 5.66661L3.13076 6.39615C3.51542 6.75677 4.11399 6.75677 4.49865 6.39615L3.81471 5.66661ZM9.23939 1.95171C9.6423 1.57397 9.66271 0.941139 9.28498 0.538227C8.90725 0.135315 8.27442 0.114901 7.87151 0.492631L9.23939 1.95171ZM0.760395 4.17393L3.13076 6.39615L4.49865 4.93708L2.12828 2.71485L0.760395 4.17393ZM4.49865 6.39615L9.23939 1.95171L7.87151 0.492631L3.13076 4.93708L4.49865 6.39615Z", fill: "white" })));
+
 function Dot({ active, completed, incomplete, }) {
   return (h("div", { style: {
       flex: "0 0 0",
@@ -14952,59 +14961,41 @@ function Dot({ active, completed, incomplete, }) {
             ? "2px solid #E5E5E5"
             : "none",
         borderRadius: "50%",
-        width: completed ? "12px" : "8px",
-        height: completed ? "12px" : "8px",
-        margin: "-4px auto 0px",
+        width: completed ? "14px" : "10px",
+        height: completed ? "14px" : "10px",
+        margin: "-5px auto 0px",
         zIndex: "1",
         boxSizing: "content-box",
-      } })));
+      } }, completed && h(CheckMark, null))));
+}
+function ProgressLine({ incomplete = false, active = false }) {
+  return (h("div", { style: {
+      content: "''",
+      flex: "0.5 0.5 0",
+      height: "4px",
+      borderRadius: "4px",
+      background: incomplete || active ? "#E5E5E5" : "#9E9E9E",
+      position: "relative",
+      bottom: "0",
+      left: "0",
+      display: "flex",
+      justifyContent: "center",
+      columnGap: "50px",
+      marginRight: "-2px",
+      boxSizing: "content-box",
+    } }));
 }
 function Progress({ active, completed, incomplete }) {
   return [
-    h("div", { style: {
-        content: "''",
-        flex: "0.5 0.5 0",
-        height: "4px",
-        borderRadius: "4px",
-        background: incomplete ? "#E5E5E5" : "#9E9E9E",
-        position: "relative",
-        bottom: "0",
-        left: "0",
-        display: "flex",
-        justifyContent: "center",
-        columnGap: "50px",
-        marginRight: "-2px",
-        boxSizing: "content-box",
-      } }),
+    h(ProgressLine, { incomplete: incomplete }),
     h(Dot, { active: active, completed: completed, incomplete: incomplete }),
-    h("div", { style: {
-        content: "''",
-        flex: "0.5 0.5 0",
-        height: "4px",
-        borderRadius: "4px",
-        background: incomplete || active ? "#E5E5E5" : "#9E9E9E",
-        position: "relative",
-        bottom: "0",
-        left: "0",
-        display: "flex",
-        justifyContent: "center",
-        columnGap: "50px",
-        marginRight: "-2px",
-        boxSizing: "content-box",
-      } }),
+    h(ProgressLine, { incomplete: incomplete, active: active }),
   ];
 }
-function ProgressBar({ stage }) {
-  console.log({ stage });
-  return (h("div", { style: { display: "flex", columnGap: "-2px" } },
-    h(Progress, { active: stage === 0, completed: stage > 0, incomplete: stage < 0 }),
-    h(Progress, { active: stage === 1, completed: stage > 1, incomplete: stage < 1 }),
-    h(Progress, { active: stage === 2, completed: stage > 2, incomplete: stage < 2 })));
+function ProgressBar({ stageCount, currentStage, }) {
+  return (h("div", { style: { display: "flex", columnGap: "-2px" } }, Array.from(Array(stageCount).keys()).map((stage) => (h(Progress, { active: currentStage === stage, completed: currentStage > stage, incomplete: currentStage < stage })))));
 }
 
-const LeftArrow = () => (h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { marginBottom: "-2px", marginRight: "5px" } },
-  h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M7.34655 1.90573C7.75405 2.31323 7.75405 2.97392 7.34655 3.38143L3.56266 7.16531H14.9565C15.5328 7.16531 16 7.6325 16 8.20879C16 8.78509 15.5328 9.25227 14.9565 9.25227H3.56266L7.69437 13.384C8.10188 13.7915 8.10188 14.4522 7.69437 14.8597C7.28687 15.2672 6.62617 15.2672 6.21867 14.8597L0.305628 8.94664C-0.101876 8.53914 -0.101876 7.87845 0.305628 7.47094L5.87084 1.90573C6.27835 1.49822 6.93904 1.49822 7.34655 1.90573Z", fill: "#858585" })));
-
 const stageList = ["chooseReward", "chooseAmount", "confirmation", "success"];
 const stageProgressList = {
   chooseReward: "Choose reward",
@@ -15023,29 +15014,33 @@ function RewardExchangeView(props) {
       },
     },
     Base: {
-      display: "block",
+      display: "flex",
       cursor: "pointer",
       textAlign: "center",
+      height: "120px",
       "&::part(base)": {
         width: "100%",
-        height: "170px",
+        maxWidth: "350px",
         display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center",
+        margin: "0 auto",
       },
       "&::part(body)": {
-        padding: "10px 0",
+        padding: 0,
+        display: "flex",
+        width: "100%",
       },
     },
     Drawer: {
       "&::part(base)": {
         minWidth: "400px",
+        maxWidth: "700px",
         width: "50%",
         margin: "0 auto",
         right: "0",
       },
       "&::part(panel)": {
         height: "85vh",
+        width: "100%",
       },
     },
     FullImage: {
@@ -15055,8 +15050,9 @@ function RewardExchangeView(props) {
     },
     PreviewImage: {
       objectFit: "contain",
-      maxWidth: "100%",
-      height: "75px",
+      width: "120px",
+      height: "120px",
+      flex: 0.33,
     },
     InputBox: {
       width: "100%",
@@ -15071,8 +15067,9 @@ function RewardExchangeView(props) {
       },
     },
     Buttons: {
-      bottom: "0",
+      marginLeft: "auto",
       width: "100%",
+      maxWidth: "300px",
     },
     Button: {
       margin: "10px 0",
@@ -15106,7 +15103,9 @@ function RewardExchangeView(props) {
         });
       } }, (_b = item.steps) === null || _b === void 0 ? void 0 : _b.map((step) => (h("sl-menu-item", { value: step, disabled: !step.available },
       step.prettyDestinationValue,
-      h("span", { slot: "suffix", style: { fontSize: "75%" } }, step.prettySourceValue))))));
+      h("div", { slot: "suffix", style: { fontSize: "75%", float: "right" } },
+        step.prettySourceValue,
+        step.unavailableReasonCode && (h("p", { style: { fontSize: "70%", color: "#F2994A" } }, step.unavailableReasonCode))))))));
   }
   function chooseReward() {
     var _a;
@@ -15114,29 +15113,40 @@ function RewardExchangeView(props) {
       ? "confirmation"
       : "chooseAmount";
     console.log({ nextStage, ruleType: selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.ruleType });
-    return (h("div", { style: {
-        display: "flex",
-        justifyContent: "center",
-        flexWrap: "wrap",
-        alignItems: "center",
-        columnGap: "12px",
-        rowGap: "12px",
-      } }, (_a = data.exchangeList) === null || _a === void 0 ? void 0 :
-      _a.map((item) => {
+    return [
+      h("div", { style: {
+          display: "grid",
+          justifyContent: "center",
+          gap: "20px",
+          gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))",
+        } }, (_a = data.exchangeList) === null || _a === void 0 ? void 0 : _a.map((item) => {
         const style = {
           boxShadow: item.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key) ? "0 1px 8px #87ceeb" : "none",
           marginBottom: "10px 0",
           flex: "1",
-          minWidth: "45%",
+          minWidth: "100%",
+          color: !item.available && "#eee",
         };
-        return (h("div", { key: item.key, class: sheet.classes.CardContainer, style: style },
-          h("sl-card", { class: sheet.classes.Base, onClick: () => callbacks.setExchangeState({ selectedItem: item }), disabled: !item.available },
-            h("img", { class: sheet.classes.PreviewImage, src: (item === null || item === void 0 ? void 0 : item.imageUrl) || getAssetPath("./assets/Reward-icon.png") }),
-            h("p", null, item.description))));
-      }),
+        const amount = item.ruleType === "FIXED_GLOBAL_REWARD"
+          ? item.prettySourceValue
+          : `${item.sourceMinValue} to ${item.sourceMaxValue} ${item.sourceUnit}`;
+        return (h("div", { key: item.key, class: item.available ? sheet.classes.CardContainer : "", style: style },
+          h("sl-card", { class: sheet.classes.Base, onClick: () => item.available &&
+              callbacks.setExchangeState({ selectedItem: item }) },
+            (item === null || item === void 0 ? void 0 : item.imageUrl) && (h("img", { class: sheet.classes.PreviewImage, src: (item === null || item === void 0 ? void 0 : item.imageUrl) || getAssetPath("./assets/Reward-icon.png") })),
+            h("p", { style: { margin: "0", flex: "1", fontSize: "90%" } },
+              h("b", null, item.description),
+              h("p", { style: { margin: "0" } }, amount),
+              item.unavailableReasonCode && (h("p", { style: {
+                  fontSize: "70%",
+                  color: "#F2994A",
+                  marginTop: "0",
+                } }, item.unavailableReasonCode))))));
+      })),
       h("div", { class: sheet.classes.Buttons },
         h("sl-button", { onClick: () => callbacks.setStage(nextStage), style: { display: "block" }, class: sheet.classes.Button, disabled: !states.selectedItem }, "Continue"),
-        h("a", { onClick: () => { var _a; return (_a = refs.drawerRef.current) === null || _a === void 0 ? void 0 : _a.hide(); }, style: { display: "block" }, class: sheet.classes.Button }, "Cancel"))));
+        h("a", { onClick: () => { var _a; return (_a = refs.drawerRef.current) === null || _a === void 0 ? void 0 : _a.hide(); }, style: { display: "block" }, class: sheet.classes.Button }, "Cancel")),
+    ];
   }
   function chooseAmount() {
     const input = getInput();
@@ -15150,24 +15160,26 @@ function RewardExchangeView(props) {
   }
   console.log({ selectedItem, selectedStep });
   function confirmation() {
-    console.log("confirmation:", { selectedItem });
-    const redemptionAmount = () => {
-      var _a;
-      if ((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.ruleType) === "FIXED_GLOBAL_REWARD") {
-        return `Redeem ${selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.sourceValue} ${selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.sourceUnit} for ${selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.globalRewardKey}`;
-      }
-      else {
-        const amount = states.amount;
-        const reward = (_a = selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue) !== null && _a !== void 0 ? _a : `${amount} ${selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.destinationUnit}`;
-        return `Redeem ${amount} ${selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.sourceUnit} for ${reward}`;
-      }
-    };
     const previousStage = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.ruleType) === "FIXED_GLOBAL_REWARD"
       ? "chooseReward"
       : "chooseAmount";
     return (h("div", null,
-      h("h2", null, "Confirm your redemption:"),
-      redemptionAmount(),
+      h("h2", null, "Confirm and redeem"),
+      h("div", { style: { textAlign: "center" } },
+        h("p", null,
+          h("b", null, selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettySourceValue)),
+        h("p", null,
+          h(ExchangeArrows, null)),
+        h("div", { class: sheet.classes.CardContainer, style: {
+            boxShadow: "none",
+            marginBottom: "10px",
+            flex: "1",
+            minWidth: "100%",
+          } },
+          h("sl-card", { class: sheet.classes.Base },
+            h("img", { class: sheet.classes.PreviewImage, src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
+                getAssetPath("./assets/Reward-icon.png") }),
+            h("p", { style: { marginBottom: "0", flex: "1" } }, selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue)))),
       h("div", { class: sheet.classes.Buttons },
         h("sl-button", { onClick: callbacks.exchangeReward, style: { display: "block" }, class: sheet.classes.Button }, "Redeem"),
         h("a", { onClick: () => callbacks.setStage(previousStage), style: { display: "block" }, class: sheet.classes.Button }, "Back"))));
@@ -15188,24 +15200,24 @@ function RewardExchangeView(props) {
   const currentStage = stages[states.redeemStage];
   function stageMap() {
     const stageNumber = stageList.indexOf(states.redeemStage);
-    return (h("div", { style: { fontSize: "80%" } },
-      h(ProgressBar, { stage: stageNumber }),
+    return (h("div", { style: { fontSize: "80%", marginBottom: "20px" } },
       h("div", { style: {
           marginTop: "5px",
           display: "flex",
           justifyContent: "center",
           textAlign: "center",
           whiteSpace: "nowrap",
-          marginBottom: "10px",
+          marginBottom: "6px",
         } }, Object.keys(stageProgressList).map((stage) => {
         if (stage === states.redeemStage)
           return (h("b", { style: { flex: "1 1 0" } },
             " ",
             stageProgressList[stage]));
         return h("i", { style: { flex: "1 1 0" } }, stageProgressList[stage]);
-      }))));
+      })),
+      h(ProgressBar, { stageCount: 3, currentStage: stageNumber })));
   }
-  const Label = () => {
+  const BackButton = () => {
     if (states.redeemStage === "success")
       return "";
     let previousStage = "";
@@ -15227,12 +15239,12 @@ function RewardExchangeView(props) {
     h("style", { type: "text/css" }, styleString),
     h("div", null,
       h("sl-drawer", { ref: (ref) => (refs.drawerRef.current = ref), placement: "right", class: sheet.classes.Drawer, open: stageList.indexOf(states.redeemStage) >= 0 },
-        h(Label, null),
+        h(BackButton, null),
         stageMap(),
         currentStage && currentStage(),
         states.exchangeError &&
           "Something went wrong. Please contact support or try again."),
-      h("sl-button", { onClick: () => callbacks.openDrawer() }, "Redeem Rewards"))));
+      h("sl-button", { loading: states.loading, onClick: () => callbacks.openDrawer() }, "Redeem Rewards"))));
 }
 
 const SqmRewardExchangeList = class {
@@ -15273,6 +15285,7 @@ function useRewardExchangeListDemo(props) {
       amount: 0,
       selectedStep: undefined,
       exchangeError: false,
+      loading: false,
     },
     data: {
       shareCode: "SHARECODE123",
@@ -17131,11 +17144,12 @@ const BigStat_stories = {
   title: "Components/Big Stat",
 };
 const Default$1 = () => {
-  const props = { statvalue: "9.900,00" };
+  const props = { value: 990000, statvalue: "9.900,00" };
   return h(BigStatView, Object.assign({}, props), "Big stat");
 };
 const LeftAlign = () => {
   const props = {
+    value: 500,
     statvalue: "500",
     alignment: "left",
   };
@@ -17143,6 +17157,7 @@ const LeftAlign = () => {
 };
 const RightAlign = () => {
   const props = {
+    value: 500,
     statvalue: "500",
     alignment: "right",
   };
@@ -17150,6 +17165,7 @@ const RightAlign = () => {
 };
 const FlexReverse = () => {
   const props = {
+    value: 500,
     statvalue: "500",
     flexReverse: true,
   };
@@ -17157,6 +17173,7 @@ const FlexReverse = () => {
 };
 const FlexReverseRight = () => {
   const props = {
+    value: 500,
     statvalue: "500",
     flexReverse: true,
     alignment: "right",
@@ -17165,6 +17182,7 @@ const FlexReverseRight = () => {
 };
 const FlexReverseLeft = () => {
   const props = {
+    value: 500,
     statvalue: "500",
     flexReverse: true,
     alignment: "left",
@@ -17173,12 +17191,14 @@ const FlexReverseLeft = () => {
 };
 const NoStatValue = () => {
   const props = {
+    value: 0,
     statvalue: "...",
   };
   return h(BigStatView, Object.assign({}, props), "Big stat");
 };
 const InvalidStatValue = () => {
   const props = {
+    value: 0,
     statvalue: "!!!",
   };
   return h(BigStatView, Object.assign({}, props), "Big stat");
@@ -18242,6 +18262,44 @@ const UseRewardExchangeList = /*#__PURE__*/Object.freeze({
   VariableCreditReward: VariableCreditReward
 });
 
+const JWT = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkIjoic2FtK2tsaXBAc2Fhc3F1YXQuY2giLCJhY2NvdW50SWQiOiJzYW0ra2xpcEBzYWFzcXVhdC5jaCJ9fQ.FMNZ6oajyr6SiCcRqKKdyPqvNTvWROQ60MKAyfvWGfc";
+const UseTaskCard_stories = {
+  title: "Hooks / useTaskCard",
+};
+function setupGraphQL$7() {
+  const id = "sam+klip@saasquat.ch";
+  const accountId = id;
+  const programId = "klip-referral-program";
+  //@ts-ignore
+  window.widgetIdent = {
+    tenantAlias: "test_a74miwdpofztj",
+    appDomain: "https://staging.referralsaasquatch.com",
+    programId,
+  };
+  useEffect(() => {
+    L$1({
+      accountId,
+      id,
+      jwt: JWT,
+    });
+    return () => {
+      window.widgetIdent = undefined;
+      L$1(undefined);
+    };
+  }, []);
+  return { id, accountId };
+}
+const TaskCard = createHookStory(() => {
+  setupGraphQL$7();
+  return (h("sqm-task-card", { "card-title": "Comment on 5 articles", "button-text": "Start reading", goal: 5, steps: true, "show-progress-bar": true }));
+});
+
+const UseTaskCard = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': UseTaskCard_stories,
+  TaskCard: TaskCard
+});
+
 const NewPortal_stories = {
   title: "New Portal",
 };
@@ -18361,10 +18419,10 @@ const Dashboard = () => {
             h("h1", null, "John Smith"))),
         })),
         h(StatContainerView, Object.assign({}, { space: "64px" }),
-          h(BigStatView, Object.assign({}, { statvalue: "2,345" }), "Clicks"),
-          h(BigStatView, Object.assign({}, { statvalue: "58" }), "Referrals"),
-          h(BigStatView, Object.assign({}, { statvalue: "$10,540" }), "Earned"),
-          h(BigStatView, Object.assign({}, { statvalue: "$2,305" }), "Awaiting Payout"))),
+          h(BigStatView, Object.assign({}, { statvalue: "2,345", value: 234500 }), "Clicks"),
+          h(BigStatView, Object.assign({}, { statvalue: "58", value: 58 }), "Referrals"),
+          h(BigStatView, Object.assign({}, { statvalue: "$10,540", value: 1054000 }), "Earned"),
+          h(BigStatView, Object.assign({}, { statvalue: "$2,305", value: 230500 }), "Awaiting Payout"))),
       h(PortalContainerView, Object.assign({}, { direction: "column", padding: "xxx-large", gap: "xxx-large" }),
         h(PortalSectionView, Object.assign({}, {
           labelMargin: "x-large",
@@ -18488,10 +18546,10 @@ const Commissions = () => {
               "program"))),
         })),
         h(StatContainerView, Object.assign({}, { space: "64px" }),
-          h(BigStatView, Object.assign({}, { statvalue: "$ 1,000" }), "Total Earned"),
-          h(BigStatView, Object.assign({}, { statvalue: "$ 800" }), "Available"),
-          h(BigStatView, Object.assign({}, { statvalue: "$ 180" }), "Pending"),
-          h(BigStatView, Object.assign({}, { statvalue: "$ 20" }), "Redeemed"))))));
+          h(BigStatView, Object.assign({}, { statvalue: "$ 1,000", value: 100000 }), "Total Earned"),
+          h(BigStatView, Object.assign({}, { statvalue: "$ 800", value: 80000 }), "Available"),
+          h(BigStatView, Object.assign({}, { statvalue: "$ 180", value: 18000 }), "Pending"),
+          h(BigStatView, Object.assign({}, { statvalue: "$ 20", value: 2000 }), "Redeemed"))))));
 };
 const Activity = () => {
   return (h("sqm-divided-layout", { direction: "row" },
@@ -18518,10 +18576,10 @@ const Activity = () => {
           label: (h("sqm-text", null,
             h("h3", null, "Referral Activity"))),
           content: (h(StatContainerView, Object.assign({}, { space: "64px" }),
-            h(BigStatView, Object.assign({}, { statvalue: "1,000" }), "Total Referrals"),
-            h(BigStatView, Object.assign({}, { statvalue: "800" }), "Converted"),
-            h(BigStatView, Object.assign({}, { statvalue: "180" }), "Pending"),
-            h(BigStatView, Object.assign({}, { statvalue: "20" }), "Disqualified"))),
+            h(BigStatView, Object.assign({}, { statvalue: "1,000", value: 100000 }), "Total Referrals"),
+            h(BigStatView, Object.assign({}, { statvalue: "800", value: 800 }), "Converted"),
+            h(BigStatView, Object.assign({}, { statvalue: "180", value: 180 }), "Pending"),
+            h(BigStatView, Object.assign({}, { statvalue: "20", value: 20 }), "Disqualified"))),
         }))),
       h(PortalSectionView, Object.assign({}, {
         labelMargin: "x-large",
@@ -18529,9 +18587,9 @@ const Activity = () => {
         label: (h("sqm-text", null,
           h("h3", null, "Traffic Generated"))),
         content: (h(StatContainerView, Object.assign({}, { space: "64px" }),
-          h(BigStatView, Object.assign({}, { statvalue: "1,000" }), "Clicks"),
-          h(BigStatView, Object.assign({}, { statvalue: "800" }), "From share link"),
-          h(BigStatView, Object.assign({}, { statvalue: "180" }), "From share mediums"))),
+          h(BigStatView, Object.assign({}, { statvalue: "1,000", value: 1000 }), "Clicks"),
+          h(BigStatView, Object.assign({}, { statvalue: "800", value: 800 }), "From share link"),
+          h(BigStatView, Object.assign({}, { statvalue: "180", value: 180 }), "From share mediums"))),
       })))));
 };
 
@@ -20536,8 +20594,496 @@ const PasswordField = /*#__PURE__*/Object.freeze({
   ValidationError: ValidationError
 });
 
+const checkmark_circle = () => {
+  return (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18" },
+    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" })));
+};
+const arrow_left_right = () => {
+  return (h("svg", { width: 11, height: 12, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10.265 2.789a.346.346 0 000-.489L8.066.101a.346.346 0 10-.489.489l1.61 1.609H2.073a.691.691 0 00-.69.691v1.728a.346.346 0 00.69 0V2.89h7.114L7.577 4.5a.346.346 0 10.49.488l2.198-2.2zM.101 9.21a.346.346 0 000 .489l2.2 2.199a.346.346 0 00.488-.489l-1.61-1.609h7.114c.382 0 .691-.31.691-.691V7.382a.346.346 0 00-.691 0V9.11H1.18L2.789 7.5a.346.346 0 10-.489-.488l-2.199 2.2z", fill: "currentColor" })));
+};
+
+const gift = () => {
+  return (h("svg", { width: 16, height: 16, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    h("path", { d: "M15 5H9v11h4.5a1 1 0 001-1V9h.5a1 1 0 001-1V6a1 1 0 00-1-1zM1.5 9v6a1 1 0 001 1H7V5H1a1 1 0 00-1 1v2a1 1 0 001 1h.5z", fill: "var(--sl-color-primary-200)" }),
+    h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M1.5 9v1h13V9h-13z", fill: "var(--sl-color-primary-300)" }),
+    h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M14 2.71c0 .886-1.33 2.227-2 2.29H9v11H7.002V5H4.588C3.212 4.702 2 3.645 2 2.52 2 1.426 2.476.558 3.342.183 4.169-.176 5.125.02 5.88.545c.927.643 1.447 1.851 1.919 2.947l.123.286.12-.272C8.51 2.45 9.045 1.243 9.94.596c.793-.573 1.801-.79 2.672-.397.9.405 1.388 1.336 1.388 2.51zM10.612 1.5c.48-.347 1.056-.41 1.548 0 .428.357.45.525.506.93l.01.07c0 .599-.516 1.5-1.032 1.5-.366 0-.653-.003-.922-.006-.49-.005-.92-.01-1.657.006.14-.272.252-.533.36-.782.285-.667.534-1.246 1.187-1.718zm-5.673 0c-.233-.161-.766-.09-.987.006-.183.08-.456.32-.456 1.015 0 .674 1.092 1.257 1.092 1.257S5.454 4 7.002 4c-.527-1.305-1.273-1.951-2.063-2.5z", fill: "var(--sl-color-primary-600)" })));
+};
+
+function ProgressBarView(props) {
+  const { progress = 0, goal = 1, steps = false, progressBarUnit = "", repeatable = false, } = props;
+  console.log("progress bar props", props);
+  const gift1 = gift();
+  const gift2 = gift();
+  const gift3 = gift();
+  var items = [];
+  var columns = "";
+  var repetitions = Math.floor(progress / goal);
+  if (repeatable) {
+    if (steps) {
+      addStepsRepeatable();
+    }
+    else {
+      addLinearRepeatable();
+    }
+  }
+  // non repeatable
+  else {
+    if (steps) {
+      addSteps();
+    }
+    else {
+      addLinear();
+    }
+  }
+  const style = {
+    ProgressBar: {
+      "& .progress-bar": {
+        height: "15px",
+        marginTop: "var(--sl-spacing-xx-large)",
+        marginBottom: "var(--sl-spacing-xx-large)",
+        marginRight: "var(--sl-spacing-x-small)",
+        fontSize: "var(--sl-font-size-x-small)",
+        display: "grid",
+        gridTemplateColumns: columns,
+        lineHeight: "45px",
+        userSelect: "none",
+      },
+      "& .progress-bar.repeatable-steps": {
+        marginLeft: "var(--sl-spacing-x-small)",
+      },
+      "& .filled:after": {
+        content: '""',
+        display: "flex",
+        width: "100%",
+        height: "4px",
+        borderRadius: "4px",
+        backgroundColor: "var(--sl-color-primary-500)",
+      },
+      "& .progress": {
+        display: "block",
+        textAlign: "center",
+        marginLeft: "-100px",
+        marginRight: "-100px",
+      },
+      "& .progress::after": {
+        content: '""',
+        width: "12px",
+        height: "12px",
+        display: "flex",
+        backgroundColor: "var(--sl-color-primary-500)",
+        borderRadius: "50%",
+        position: "relative",
+        left: "47%",
+        top: "-85%",
+      },
+      "& .progress.bg:after": {
+        width: "0",
+        height: "0",
+        border: "none",
+      },
+      "& .progress.top": {
+        position: "relative",
+        top: "-40px",
+      },
+      "& .progress.top:after": {
+        top: "-16%",
+      },
+      "& .empty": {
+        display: "block",
+        textAlign: "center",
+        marginLeft: "-100px",
+        marginRight: "-100px",
+      },
+      "& .empty::after": {
+        content: '""',
+        width: "12px",
+        height: "12px",
+        border: "2px solid #E0E0E0",
+        margin: "-2px",
+        display: "flex",
+        backgroundColor: "white",
+        borderRadius: "50%",
+        position: "relative",
+        left: "47%",
+        top: "-85%",
+      },
+      "& .empty.bg:after": {
+        width: "0",
+        height: "0",
+        border: "none",
+      },
+      "& .remain:after": {
+        content: '""',
+        display: "flex",
+        width: "100%",
+        height: "4px",
+        borderRadius: "4px",
+        backgroundColor: "#E0E0E0",
+      },
+      "& .gift.bw": {
+        filter: "grayscale(100%)",
+      },
+      "& .gift.start": {
+        transform: "scale(80%)",
+        top: "-20px",
+      },
+      "& .gift": {
+        textAlign: "center",
+        marginLeft: "-100px",
+        marginRight: "-100px",
+        position: "relative",
+        display: "list-item",
+        listStyleType: "none",
+        top: "-18px",
+        filter: goal <= progress ? "" : "grayscale(100%)",
+        zIndex: "1",
+      },
+    },
+  };
+  jss.setup(create());
+  const sheet = jss.createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (h("div", { class: sheet.classes.ProgressBar },
+    h("style", { type: "text/css" }, styleString),
+    h("div", { class: repetitions > 1 ? "progress-bar repeatable-steps" : "progress-bar" }, items)));
+  function clamp(x, min, max) {
+    return Math.min(Math.max(x, min), max);
+  }
+  function addLinear() {
+    const ratio = progress / goal;
+    columns =
+      clamp(ratio, 0, 1) + "fr 0fr " + clamp(1 - ratio, 0, 1) + "fr 0fr 0fr";
+    items.push(h("div", { class: "filled" }));
+    items.push(h("div", { class: clamp(progress, 0, goal) == goal ? "progress top bg" : "progress top" }, clamp(progress, 0, goal) == goal
+      ? ""
+      : progressBarUnit + clamp(progress, 0, goal)));
+    items.push(h("div", { class: "remain" }));
+    items.push(h("div", { class: "progress bg" }, goal));
+    items.push(h("div", { class: "gift" }, gift1));
+  }
+  function addSteps() {
+    let ratio = 1 / goal;
+    for (let i = 1; i < goal; i++) {
+      columns += ratio + "fr 0fr ";
+      if (i > progress) {
+        items.push(h("div", { class: "remain" }));
+        items.push(h("div", { class: "empty" }, i));
+      }
+      else {
+        items.push(h("div", { class: "filled" }));
+        items.push(h("div", { class: "progress" }, i));
+      }
+    }
+    columns += ratio + "fr 0fr ";
+    // reward success
+    if (goal <= progress) {
+      columns += "0fr ";
+      items.push(h("div", { class: "filled" }));
+      items.push(h("div", { class: "progress bg" }, goal));
+      items.push(h("div", { class: "gift" }, gift1));
+    }
+    // reward fail
+    else {
+      columns += "0fr ";
+      items.push(h("div", { class: "remain" }));
+      items.push(h("div", { class: "empty bg" }, goal));
+      items.push(h("div", { class: "gift" }, gift1));
+    }
+  }
+  function addLinearRepeatable() {
+    let repetitions = Math.floor(progress / goal);
+    let ratio = ((progress % goal) / goal) * 0.5;
+    // 0 repetition
+    if (repetitions == 0) {
+      columns = ratio + "fr 0fr " + (0.5 - ratio) + "fr 0fr 0fr 0.5fr 0fr 0fr";
+      items.push(h("div", { class: "filled" }));
+      items.push(h("div", { class: progress == goal ? "progress top bg" : "progress top" }, progressBarUnit + progress));
+      items.push(h("div", { class: "remain" }));
+      items.push(h("div", { class: "progress bg" }, progressBarUnit + goal));
+      items.push(h("div", { class: "gift" }, gift1));
+      items.push(h("div", { class: "remain" }));
+      items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * 2));
+      items.push(h("div", { class: "gift bw" }, gift2));
+    }
+    // single repetition
+    else if (repetitions == 1) {
+      columns =
+        "0.5fr 0fr 0fr " + ratio + "fr 0fr " + (0.5 - ratio) + "fr 0fr 0fr";
+      items.push(h("div", { class: "filled" }));
+      items.push(h("div", { class: "progress bg" }, progressBarUnit + goal));
+      items.push(h("div", { class: "gift" }, gift1));
+      items.push(h("div", { class: "filled" }));
+      items.push(h("div", { class: progress == goal ? "progress top bg" : "progress top" }, progress == goal ? "" : progressBarUnit + progress));
+      items.push(h("div", { class: "remain" }));
+      items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * 2));
+      items.push(h("div", { class: "gift bw" }, gift2));
+    }
+    // multiple repetitions
+    else {
+      columns =
+        "0fr 0fr 0.5fr 0fr 0fr " +
+          ratio +
+          "fr 0fr " +
+          (0.5 - ratio) +
+          "fr 0fr 0fr";
+      items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * (repetitions - 1)));
+      items.push(h("div", { class: "gift start" }, gift1));
+      items.push(h("div", { class: "filled" }));
+      items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * repetitions));
+      items.push(h("div", { class: "gift" }, gift2));
+      items.push(h("div", { class: "filled" }));
+      items.push(h("div", { class: progress == goal * repetitions ? "progress top bg" : "progress top" }, progress == goal * repetitions ? "" : progressBarUnit + progress));
+      items.push(h("div", { class: "remain" }));
+      items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * (repetitions + 1)));
+      items.push(h("div", { class: "gift bw" }, gift3));
+    }
+  }
+  function addStepsRepeatable() {
+    let repetitions = Math.floor(progress / goal);
+    // no or single repetition
+    if (repetitions < 2) {
+      let ratio = 1 / goal;
+      for (let i = 1; i < goal * 2 + 1; i++) {
+        columns += ratio + "fr 0fr ";
+        if (i > progress) {
+          if (i == goal) {
+            columns += "0fr ";
+            items.push(h("div", { class: "remain" }));
+            items.push(h("div", { class: "empty bg" }, goal));
+            items.push(h("div", { class: "gift bw" }, gift1));
+          }
+          else if (i == goal * 2) {
+            columns += "0fr 0fr";
+            items.push(h("div", { class: "remain" }));
+            items.push(h("div", { class: "empty bg" }, goal * 2));
+            items.push(h("div", { class: "gift bw" }, gift2));
+          }
+          else {
+            items.push(h("div", { class: "remain" }));
+            items.push(h("div", { class: "empty" }, progressBarUnit + i));
+          }
+        }
+        else if (i == goal) {
+          columns += "0fr ";
+          items.push(h("div", { class: "filled" }));
+          items.push(h("div", { class: "progress bg" }, i));
+          items.push(h("div", { class: "gift" }, gift3));
+        }
+        else {
+          items.push(h("div", { class: "filled" }));
+          items.push(h("div", { class: "progress" }, i));
+        }
+      }
+    }
+    // case repetition many
+    else {
+      let position = (progress % goal) + goal;
+      let ratio = 1 / goal;
+      columns += "0fr 0fr ";
+      items.push(h("div", { class: "progress bg" }, goal * (repetitions - 1)));
+      items.push(h("div", { class: "gift start" }, gift1));
+      for (let i = 1; i < goal * 2 + 1; i++) {
+        columns += ratio + "fr 0fr ";
+        if (i <= goal) {
+          if (i == goal) {
+            columns += "0fr ";
+            items.push(h("div", { class: "filled" }));
+            items.push(h("div", { class: "progress bg" }, i + goal * (repetitions - 1)));
+            items.push(h("div", { class: "gift" }, gift2));
+          }
+          else {
+            items.push(h("div", { class: "filled" }));
+            items.push(h("div", { class: "progress" }, i + goal * (repetitions - 1)));
+          }
+        }
+        else if (i > position) {
+          if (i == goal * 2) {
+            columns += "0fr 0fr";
+            items.push(h("div", { class: "remain" }));
+            items.push(h("div", { class: "empty bg" }, i + goal * (repetitions - 1)));
+            items.push(h("div", { class: "gift bw" }, gift3));
+          }
+          else {
+            items.push(h("div", { class: "remain" }));
+            items.push(h("div", { class: "empty" }, i + goal * (repetitions - 1)));
+          }
+        }
+        else {
+          items.push(h("div", { class: "filled" }));
+          items.push(h("div", { class: "progress" }, i + goal * (repetitions - 1)));
+        }
+      }
+    }
+  }
+}
+
+function TaskCardView(props) {
+  const { points, cardTitle, description, showProgressBar, progress = 0, goal, rewardUnit, repeatable, showExpire, dateExpires, buttonText, buttonLink, loading, } = props;
+  console.log({ props });
+  const checkmark_circle$1 = checkmark_circle();
+  const arrow_left_right$1 = arrow_left_right();
+  const style = {
+    HostBlock: HostBlock,
+    TaskCard: {
+      "& .main > div": {
+        margin: "var(--sl-spacing-medium)",
+      },
+      "& .main": {
+        position: "relative",
+        boxSizing: "border-box",
+        minWidth: "347px",
+        background: "var(--sl-color-white)",
+        border: "1px solid var(--sl-color-gray-300)",
+        borderRadius: "var(--sl-border-radius-medium)",
+        fontSize: "var(--sl-font-size-small)",
+        lineHeight: "var(--sl-line-height-dense)",
+      },
+      "& .main.complete": {
+        background: "var(--sl-color-primary-50)",
+        borderColor: "var(--sl-color-primary-700)",
+      },
+    },
+    Header: {
+      display: "flex",
+      "& .icon": {
+        alignSelf: "center",
+        lineHeight: "0",
+        color: "var(--sl-color-primary-700)",
+        fontSize: "var(--sl-font-size-large)",
+        marginRight: "var(--sl-spacing-x-small)",
+      },
+      "& .value": {
+        alignSelf: "center",
+        color: "var(--sl-color-black)",
+        fontSize: "var(--sl-font-size-x-large)",
+        fontWeight: "var(--sl-font-weight-semibold)",
+        lineHeight: "100%",
+        marginRight: "var(--sl-spacing-xx-small)",
+      },
+      "& .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)",
+    },
+    Footer: {
+      display: "flex",
+      "& .icon": {
+        fontSize: "var(--sl-font-size-xx-small)",
+        marginRight: "var(--sl-spacing-xx-small)",
+      },
+      "& .text": {
+        marginTop: "auto",
+        fontSize: "var(--sl-font-size-x-small)",
+        color: "var(--sl-color-gray-600)",
+      },
+      "& .action": {
+        marginTop: "auto",
+        marginLeft: "auto",
+      },
+      "& 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)",
+      },
+    },
+  };
+  jss.setup(create());
+  const sheet = jss.createStyleSheet(style);
+  const styleString = sheet.toString();
+  const showComplete = progress >= goal;
+  const repetitions = showProgressBar ? Math.floor(progress / goal) : progress;
+  console.log({ showProgressBar, loading });
+  return (h("div", { class: sheet.classes.TaskCard },
+    h("div", { class: showComplete ? "main complete" : "main" },
+      h("style", { type: "text/css" }, styleString),
+      h("div", { class: sheet.classes.Header },
+        showComplete && h("span", { class: "icon" }, checkmark_circle$1),
+        h("span", { class: "value" }, points),
+        h("span", { class: "text" }, rewardUnit)),
+      h("div", { class: sheet.classes.Title }, cardTitle),
+      showProgressBar && loading ? (h("sl-skeleton", { style: { width: "98%", margin: "0 auto" } })) : (showProgressBar && h(ProgressBarView, Object.assign({}, props))),
+      h(Details, { description: description }),
+      h("div", { class: sheet.classes.Footer },
+        h("span", { class: "text" },
+          repeatable && (h("div", null,
+            h("span", { class: "icon" }, arrow_left_right$1),
+            h("span", null,
+              "Completed ",
+              repetitions,
+              " times"))),
+          showExpire && (h("span", null,
+            "Ends ",
+            " ",
+            dateExpires))),
+        h("sl-button", { class: "action", size: "small", onClick: () => alert(buttonLink), disabled: showComplete && repeatable == false }, showComplete && repeatable == false
+          ? "Task completed"
+          : buttonText)))));
+}
+function Details(props) {
+  const style = {
+    Description: {
+      "& input[type=checkbox]": {
+        display: "none",
+      },
+      "& input:checked ~ .details": {
+        transform: "rotate(-180deg)",
+      },
+      "& .details": {
+        position: "absolute",
+        top: "var(--sl-spacing-medium)",
+        right: "var(--sl-spacing-medium)",
+        color: "var(--sl-color-gray-700)",
+        fontSize: "var(--sl-font-size-large)",
+        "& :hover": {
+          color: "var(--sl-color-primary-700)",
+        },
+        transformOrigin: "50% 37%",
+        transition: "transform var(--sl-transition-medium) ease",
+      },
+      "& input:checked ~ .summary": {
+        transition: "max-height var(--sl-transition-medium) ease",
+        maxHeight: "300px",
+      },
+      "& .summary": {
+        display: "block",
+        overflow: "hidden",
+        color: "var(--sl-color-gray-700)",
+        fontSize: "var(--sl-font-size-x-small)",
+        maxHeight: "0px",
+        transition: "max-height var(--sl-transition-fast) ease-out",
+      },
+    },
+  };
+  jss.setup(create());
+  const sheet = jss.createStyleSheet(style);
+  const styleString = sheet.toString();
+  const rid = Math.random().toString(36).slice(2);
+  return (h("div", null,
+    h("style", { type: "text/css" }, styleString),
+    h("span", { class: sheet.classes.Description },
+      h("input", { type: "checkbox", id: "details-" + rid }),
+      h("label", { class: "details", htmlFor: "details-" + rid },
+        h("sl-icon", { name: "chevron-down" })),
+      h("span", { class: "summary" }, props.description))));
+}
+
+const scenario$5 = "@author:\r\n@owner:\r\nFeature: Task Card\r\n\r\n\tScenario Outline: Task Card View\r\n\r\n\t\tGiven <points>, <title>, <description>,  <progress>, <goal>, <buttonText>, <buttonLink>,\r\n\t\tThen <points> is shown on the top left corner of the header area\r\n\t\tAnd <title> is shown in the body area left aligned and in bold text\r\n\t\tAnd <buttonText> is shown on the bottom right corner of the footer area\r\n\t\tWhen the user clicks on details icon\r\n\t\tThen <description> becomes visible\r\n\r\n\t\tExamples:\r\n\t\t\t| points | title             | description           | progress | goal | buttonText  | buttonLink      |\r\n\t\t\t| 20     | Complete a survey | Description of action | 0        | 1    | Take Survey | www.example.com |\r\n\r\n\tScenario Outline: Task Card Single Action\r\n\r\n\t\tGiven a task card\r\n\t\tAnd showProgressBar has value false\r\n\r\n\tScenario Outline: Single Action Repeatable\r\n\r\n\r\n\tScenario Outline: Task Card Expiry\r\n\r\n\t\tGiven a task card component\r\n\t\tAnd it has expire value true\r\n\t\tAnd it has <dateExpire>\r\n\t\tThen <dateExpire> is shown on the lower left corner of the task card\r\n";
+
 const TaskCard_stories = {
-  title: "Components/Task Card",
+  title: "Components/Task Card/",
+  parameters: {
+    scenario: scenario$5,
+  },
 };
 const resizable = {
   width: "347px",
@@ -20546,35 +21092,47 @@ const resizable = {
   height: "fit-content",
   overflow: "hidden",
 };
-const Default$a = () => {
-  // @ts-ignore
-  return h(TaskCardView, null);
-};
 const NotRepeatable = () => {
   const oneAction = {
     points: 20,
+    showExpire: 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 = {
     points: 40,
+    rewardUnit: "Points",
     cardTitle: "Comment on 5 articles",
     showProgressBar: true,
+    showExpire: false,
     goal: 5,
-    steps: 1,
+    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 = {
     points: 150,
+    rewardUnit: "Points",
     cardTitle: "Spend $500 at our Store",
     showProgressBar: true,
+    showExpire: false,
     goal: 500,
+    repeatable: false,
     unit: "$",
     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 (h("div", { style: { display: "inline-flex", gap: "32px" } },
     h("div", { style: resizable },
@@ -20595,13 +21153,6 @@ const NotRepeatable = () => {
       h("h5", null),
       h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 })),
       " ",
-      h("h5", null),
-      h("h5", null,
-        "Progress ",
-        ">",
-        " Goal"),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 9 })),
-      " ",
       h("h5", null)),
     h("div", { style: resizable },
       h("h4", null, "Many Actions"),
@@ -20613,46 +21164,52 @@ const NotRepeatable = () => {
       h("h5", null),
       h(TaskCardView, Object.assign({}, manyActions, { progress: 500 })),
       " ",
-      h("h5", null),
-      h("h5", null,
-        "Progress ",
-        ">",
-        " Goal"),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 700 })),
-      " ",
       h("h5", null))));
 };
 const NotRepeatableWithExpiry = () => {
   const oneAction = {
     points: 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,
-    expire: true,
-    dateExpire: "Nov 1, 2021",
+    showExpire: true,
+    repeatable: false,
+    dateExpires: "Nov 1, 2021",
+    buttonLink: "https://example.com/",
+    showProgressBar: false,
+    loading: false,
   };
   const coupleActions = {
     points: 40,
+    rewardUnit: "Points",
     cardTitle: "Comment on 5 articles",
     showProgressBar: true,
     goal: 5,
-    steps: 1,
+    steps: true,
     description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
     buttonText: "Start reading",
-    expire: true,
-    dateExpire: "Nov 1, 2021",
+    showExpire: true,
+    repeatable: false,
+    dateExpires: "Nov 1, 2021",
+    buttonLink: "https://example.com/",
+    loading: false,
   };
   const manyActions = {
     points: 150,
+    rewardUnit: "Points",
+    repeatable: false,
     cardTitle: "Spend $500 at our Store",
     showProgressBar: true,
     goal: 500,
     unit: "$",
     description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
     buttonText: "Visit our Store",
-    expire: true,
-    dateExpire: "Nov 1, 2021",
+    showExpire: true,
+    dateExpires: "Nov 1, 2021",
+    buttonLink: "https://example.com/",
+    loading: false,
   };
   return (h("div", { style: { display: "inline-flex", gap: "32px" } },
     h("div", { style: resizable },
@@ -20673,13 +21230,6 @@ const NotRepeatableWithExpiry = () => {
       h("h5", null),
       h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 })),
       " ",
-      h("h5", null),
-      h("h5", null,
-        "Progress ",
-        ">",
-        " Goal"),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 9 })),
-      " ",
       h("h5", null)),
     h("div", { style: resizable },
       h("h4", null, "Many Actions"),
@@ -20691,36 +21241,40 @@ const NotRepeatableWithExpiry = () => {
       h("h5", null),
       h(TaskCardView, Object.assign({}, manyActions, { progress: 500 })),
       " ",
-      h("h5", null),
-      h("h5", null,
-        "Progress ",
-        ">",
-        " Goal"),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 700 })),
-      " ",
       h("h5", null))));
 };
 const Repeatable = () => {
   const oneAction = {
     points: 20,
+    rewardUnit: "Points",
+    showExpire: 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 = {
     points: 40,
+    rewardUnit: "Points",
+    showExpire: false,
     cardTitle: "Comment on 5 articles",
     showProgressBar: true,
     repeatable: true,
     goal: 5,
-    steps: 1,
+    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 = {
     points: 150,
+    rewardUnit: "Points",
+    showExpire: false,
     cardTitle: "Spend $500 at our Store",
     showProgressBar: true,
     repeatable: true,
@@ -20728,6 +21282,8 @@ const Repeatable = () => {
     unit: "$",
     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 (h("div", { style: { display: "inline-flex", gap: "32px" } },
     h("div", { style: resizable },
@@ -20751,18 +21307,6 @@ const Repeatable = () => {
       h("h5", null),
       h(TaskCardView, Object.assign({}, coupleActions, { progress: 10 })),
       " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 12 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 15 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 17 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 22 })),
-      " ",
       h("h5", null)),
     h("div", { style: resizable },
       h("h4", null, "Many Actions"),
@@ -20777,45 +21321,41 @@ const Repeatable = () => {
       h("h5", null),
       h(TaskCardView, Object.assign({}, manyActions, { progress: 1000 })),
       " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 1200 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 1500 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 1700 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 2200 })),
-      " ",
       h("h5", null))));
 };
 const RepeatableWithExpiry = () => {
   const oneAction = {
     points: 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,
-    expire: true,
-    dateExpire: "Nov 1, 2021",
+    showExpire: true,
+    dateExpires: "Nov 1, 2021",
+    buttonLink: "https://example.com/",
+    showProgressBar: false,
+    loading: false,
   };
   const coupleActions = {
     points: 40,
+    rewardUnit: "Points",
     cardTitle: "Comment on 5 articles",
     showProgressBar: true,
     repeatable: true,
     goal: 5,
-    steps: 1,
+    steps: true,
     description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
     buttonText: "Start reading",
-    expire: true,
-    dateExpire: "Nov 1, 2021",
+    showExpire: true,
+    dateExpires: "Nov 1, 2021",
+    buttonLink: "https://example.com/",
+    loading: false,
   };
   const manyActions = {
     points: 150,
+    rewardUnit: "Points",
     cardTitle: "Spend $500 at our Store",
     showProgressBar: true,
     repeatable: true,
@@ -20823,8 +21363,10 @@ const RepeatableWithExpiry = () => {
     unit: "$",
     description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
     buttonText: "Visit our Store",
-    expire: true,
-    dateExpire: "Nov 1, 2021",
+    showExpire: true,
+    dateExpires: "Nov 1, 2021",
+    buttonLink: "https://example.com/",
+    loading: false,
   };
   return (h("div", { style: { display: "inline-flex", gap: "32px" } },
     h("div", { style: resizable },
@@ -20848,18 +21390,6 @@ const RepeatableWithExpiry = () => {
       h("h5", null),
       h(TaskCardView, Object.assign({}, coupleActions, { progress: 10 })),
       " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 12 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 15 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 17 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 22 })),
-      " ",
       h("h5", null)),
     h("div", { style: resizable },
       h("h4", null, "Many Actions"),
@@ -20874,169 +21404,143 @@ const RepeatableWithExpiry = () => {
       h("h5", null),
       h(TaskCardView, Object.assign({}, manyActions, { progress: 1000 })),
       " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 1200 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 1500 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 1700 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 2200 })),
-      " ",
       h("h5", null))));
-};
-// export const Repeatable = () => {
-//   const oneAction = {
-//     points: 20,
-//     cardTitle: "Complete a survey",
-//     description:
-//       "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-//     repeatable: 0,
-//     buttonText: "Take survey",
-//     buttonOnClick: () => {},
-//   };
-//   const coupleActions = {
-//     points: 40,
-//     cardTitle: "Comment on 5 articles",
-//     goal: 5,
-//     steps: 1,
-//     repeatable: true,
-//     description:
-//       "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-//     buttonText: "Start reading",
-//     buttonOnClick: () => {},
-//   };
-//   const manyActions = {
-//     points: 150,
-//     cardTitle: "Spend $500 at our Store",
-//     goal: 500,
-//     repeatable: true,
-//     unit: "$",
-//     description:
-//       "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-//     buttonText: "Visit our Store",
-//     buttonOnClick: () => {},
-//   };
-//   return (
-//     <div style={{ display: "inline-flex", gap: "32px" }}>
-//       <div style={resizable}>
-//         <h4>One Action</h4>
-//         <TaskCardView {...oneAction} /> <h5 />
-//         <TaskCardView {...oneAction} repeatable={1} complete /> <h5 />
-//       </div>
-//       <div style={resizable}>
-//         <h4>A Couple Actions</h4>
-//         <TaskCardView {...coupleActions} progress={1} /> <h5 />
-//         <TaskCardView {...coupleActions} progress={5} /> <h5 />
-//         <TaskCardView {...coupleActions} progress={7} /> <h5 />
-//         <TaskCardView {...coupleActions} progress={10} /> <h5 />
-//         <TaskCardView {...coupleActions} progress={12} /> <h5 />
-//       </div>
-//       <div style={resizable}>
-//         <h4>Many Actions</h4>
-//         <TaskCardView {...manyActions} progress={100} /> <h5 />
-//         <TaskCardView {...manyActions} progress={500} /> <h5 />
-//         <TaskCardView {...manyActions} progress={650} /> <h5 />
-//         <TaskCardView {...manyActions} progress={1000} /> <h5 />
-//         <TaskCardView {...manyActions} progress={1200} /> <h5 />
-//       </div>
-//     </div>
-//   );
-// };
-// export const RepeatableWithExpiry = () => {
-//   const oneAction = {
-//     points: 20,
-//     cardTitle: "Complete a survey",
-//     expire: "Nov 30, 2021",
-//     description:
-//       "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-//     repeatable: 0,
-//     buttonText: "Take survey",
-//     buttonOnClick: () => {},
-//   };
-//   const coupleActions = {
-//     points: 40,
-//     cardTitle: "Comment on 5 articles",
-//     expire: "Nov 30, 2021",
-//     goal: 5,
-//     steps: 1,
-//     repeatable: true,
-//     description:
-//       "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-//     buttonText: "Start reading",
-//     buttonOnClick: () => {},
-//   };
-//   const manyActions = {
-//     points: 150,
-//     cardTitle: "Spend $500 at our Store",
-//     expire: "Nov 30, 2021",
-//     goal: 500,
-//     repeatable: true,
-//     unit: "$",
-//     description:
-//       "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-//     buttonText: "Visit our Store",
-//     buttonOnClick: () => {},
-//   };
-//   return (
-//     <div style={{ display: "inline-flex", gap: "32px" }}>
-//       <div style={resizable}>
-//         <h4>One Action</h4>
-//         <TaskCardView {...oneAction} /> <h5 />
-//         <TaskCardView {...oneAction} repeatable={1} complete /> <h5 />
-//       </div>
-//       <div style={resizable}>
-//         <h4>A Couple Actions</h4>
-//         <TaskCardView {...coupleActions} progress={1} /> <h5 />
-//         <TaskCardView {...coupleActions} progress={5} /> <h5 />
-//         <TaskCardView {...coupleActions} progress={7} /> <h5 />
-//         <TaskCardView {...coupleActions} progress={10} /> <h5 />
-//         <TaskCardView {...coupleActions} progress={12} /> <h5 />
-//       </div>
-//       <div style={resizable}>
-//         <h4>Many Actions</h4>
-//         <TaskCardView {...manyActions} progress={100} /> <h5 />
-//         <TaskCardView {...manyActions} progress={500} /> <h5 />
-//         <TaskCardView {...manyActions} progress={650} /> <h5 />
-//         <TaskCardView {...manyActions} progress={1000} /> <h5 />
-//         <TaskCardView {...manyActions} progress={1200} /> <h5 />
-//       </div>
-//     </div>
-//   );
-// };
-// export const ProgressBar = () => {
-//   const props = {
-//     goal: 5,
-//   };
-//   return (
-//     <div>
-//       <MatrixStory
-//         matrix={{ progress: [1, 2, 5], steps: [0, 1], repeatable: [false] }}
-//         props={props}
-//         Component={ProgressBarView}
-//       />
-//       <MatrixStory
-//         matrix={{ progress: [2, 5, 7, 12], steps: [0, 1], repeatable: [true] }}
-//         props={props}
-//         Component={ProgressBarView}
-//       />
-//     </div>
-//   );
-// };
-
-const TaskCard = /*#__PURE__*/Object.freeze({
+};
+
+const TaskCard$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': TaskCard_stories,
-  Default: Default$a,
   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 (h("div", null,
+      h(PropsTable, { values: example }),
+      h("hr", null),
+      h(Component, Object.assign({}, example))));
+  });
+}
+function PropsTable({ values }) {
+  return (h("table", null,
+    h("tbody", null, Object.keys(values).map((key) => {
+      return (h("tr", null,
+        h("th", null, key),
+        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 h(ProgressBarView, null);
+};
+const ProgressBar$1 = () => {
+  const props = {
+    progress: 0,
+    goal: 500,
+    progressBarUnit: "$",
+  };
+  return (h("div", null,
+    h(MatrixStory, { matrix: { progress: [-100, 0, 100, 500, 1000] }, props: props, Component: ProgressBarView })));
+};
+const ProgressBarSteps = () => {
+  const props = {
+    progress: 0,
+    steps: true,
+    goal: 5,
+    progressBarUnit: "$",
+  };
+  return (h("div", null,
+    h(MatrixStory, { matrix: { progress: [-1, 0, 1, 5, 7] }, props: props, Component: ProgressBarView })));
+};
+const ProgressBarRepeatable = () => {
+  const props = {
+    progress: 0,
+    goal: 500,
+    progressBarUnit: "$",
+    repeatable: true,
+  };
+  return (h("div", null,
+    h(MatrixStory, { matrix: { progress: [100, 500, 650, 1200] }, props: props, Component: ProgressBarView })));
+};
+const ProgressBarStepsRepeatable = () => {
+  const props = {
+    progress: 0,
+    steps: true,
+    goal: 5,
+    progressBarUnit: "$",
+    repeatable: true,
+  };
+  return (h("div", null,
+    h(MatrixStory, { matrix: { progress: [1, 5, 7, 12] }, props: props, Component: ProgressBarView })));
+};
+
+const TaskCardProgressBar = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': progressBar_stories,
+  Default: Default$a,
+  ProgressBar: ProgressBar$1,
+  ProgressBarSteps: ProgressBarSteps,
+  ProgressBarRepeatable: ProgressBarRepeatable,
+  ProgressBarStepsRepeatable: ProgressBarStepsRepeatable
+});
+
 const portalTemplate = "<sqm-portal-frame>\r\n  <a slot=\"header\" href=\"/\">\r\n    <sqm-text style=\"height: 60px\">\r\n      <img\r\n        style=\"height: 60px\"\r\n        src=\"https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png\"\r\n      />\r\n    </sqm-text>\r\n  </a>\r\n  <sqb-program-section program-id=\"referral-program\">\r\n    <sqm-router>\r\n      <template\r\n        path=\"/:path(\\bregister\\b|\\bemailVerification\\b|\\blogin\\b|\\bverifyEmail\\b|\\bforgotPassword\\b|\\bresetPassword\\b|\\blogout\\b)\"\r\n      >\r\n        <sqm-graphql-client-provider\r\n          domain=\"https://managed-identity.saasquatch.com\"\r\n        >\r\n          <sqm-hero\r\n            background=\"https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80\"\r\n          >\r\n            <sqm-router>\r\n              <template path=\"/register\">\r\n                <sqm-portal-register>\r\n                  <sqm-name-fields slot=\"formData\"></sqm-name-fields>\r\n                </sqm-portal-register>\r\n              </template>\r\n\r\n              <template path=\"/emailVerification\">\r\n                <sqm-portal-protected-route\r\n                  redirect-to=\"/login\"\r\n                ></sqm-portal-protected-route>\r\n                <sqm-portal-email-verification></sqm-portal-email-verification>\r\n              </template>\r\n\r\n              <template path=\"/login\">\r\n                <sqm-portal-login></sqm-portal-login>\r\n              </template>\r\n\r\n              <template path=\"/verifyEmail\">\r\n                <sqm-portal-verify-email></sqm-portal-verify-email>\r\n              </template>\r\n\r\n              <template path=\"/forgotPassword\">\r\n                <sqm-portal-forgot-password\r\n                  email-label=\"Business Email\"\r\n                ></sqm-portal-forgot-password>\r\n              </template>\r\n\r\n              <template path=\"/resetPassword\">\r\n                <sqm-portal-reset-password\r\n                  confirm-password=\"true\"\r\n                ></sqm-portal-reset-password>\r\n              </template>\r\n              <template path=\"/logout\">\r\n                <sqm-portal-logout next-page=\"/login\"></sqm-portal-logout>\r\n              </template>\r\n            </sqm-router>\r\n          </sqm-hero>\r\n        </sqm-graphql-client-provider>\r\n      </template>\r\n    </sqm-router>\r\n    <sqm-router>\r\n      <template path=\"/:path(\\bactivity\\b|\\beditProfile\\b)?\">\r\n        <sqm-divided-layout\r\n          direction=\"row\"\r\n          style=\"\r\n            border-top: 1px solid #eaeaea;\r\n            border-bottom: 1px solid #eaeaea;\r\n          \"\r\n        >\r\n          <sqm-navigation-sidebar>\r\n            <sqm-navigation-sidebar-item\r\n              path=\"/\"\r\n              icon=\"house\"\r\n              label=\"Dashboard\"\r\n            ></sqm-navigation-sidebar-item>\r\n            <sqm-navigation-sidebar-item\r\n              path=\"/activity\"\r\n              icon=\"bar-chart\"\r\n              label=\"Activity\"\r\n            ></sqm-navigation-sidebar-item>\r\n            <sqm-navigation-sidebar-item\r\n              path=\"/editProfile\"\r\n              icon=\"person\"\r\n              label=\"Edit Profile\"\r\n            ></sqm-navigation-sidebar-item>\r\n            <sqm-navigation-sidebar-item\r\n              path=\"/logout\"\r\n              icon=\"box-arrow-right\"\r\n              label=\"Logout\"\r\n            ></sqm-navigation-sidebar-item>\r\n          </sqm-navigation-sidebar>\r\n          <sqm-divided-layout direction=\"column\">\r\n            <sqm-router>\r\n              <template path=\"/\">\r\n                <sqm-portal-protected-route\r\n                  require-email-verification=\"true\"\r\n                  redirect-to=\"/login\"\r\n                  redirect-to-unverified=\"/emailVerification\"\r\n                ></sqm-portal-protected-route>\r\n                <sqb-widget\r\n                  widget-type=\"p/referral-program/w/referrerWidget\"\r\n                  track-loads=\"true\"\r\n                ></sqb-widget>\r\n              </template>\r\n              <template path=\"/editProfile\">\r\n                <sqm-portal-protected-route\r\n                  require-email-verification=\"true\"\r\n                  redirect-to=\"/login\"\r\n                  redirect-to-unverified=\"/emailVerification\"\r\n                ></sqm-portal-protected-route>\r\n                <sqm-portal-container direction=\"column\" gap=\"xxx-large\">\r\n                  <sqm-portal-profile></sqm-portal-profile> </sqm-portal-container\r\n                ><sqm-portal-container direction=\"column\" gap=\"xxx-large\">\r\n                  <sqm-graphql-client-provider\r\n                    domain=\"https://managed-identity.saasquatch.com\"\r\n                  >\r\n                    <sqm-portal-change-password></sqm-portal-change-password>\r\n                  </sqm-graphql-client-provider>\r\n                </sqm-portal-container>\r\n              </template>\r\n\r\n              <template path=\"/activity\">\r\n                <sqm-portal-protected-route\r\n                  require-email-verification=\"true\"\r\n                  redirect-to=\"/login\"\r\n                  redirect-to-unverified=\"/emailVerification\"\r\n                ></sqm-portal-protected-route>\r\n                <sqm-portal-container\r\n                  direction=\"column\"\r\n                  padding=\"xxx-large\"\r\n                  gap=\"xxx-large\"\r\n                >\r\n                  <sqm-text> <h1>Activity</h1></sqm-text>\r\n                  <sqm-stat-container space=\"xxxx-large\"\r\n                    ><sqm-big-stat\r\n                      flex-reverse=\"true\"\r\n                      alignment=\"left\"\r\n                      stat-type=\"/referralsCount\"\r\n                      ><sqm-text><p>Referrals</p></sqm-text></sqm-big-stat\r\n                    >\r\n                    <sqm-big-stat\r\n                      flex-reverse=\"true\"\r\n                      alignment=\"left\"\r\n                      stat-type=\"/rewardsCountFiltered/AVAILABLE\"\r\n                      ><sqm-text><p>Rewards Earned</p></sqm-text></sqm-big-stat\r\n                    >\r\n                    <sqm-big-stat\r\n                      flex-reverse=\"true\"\r\n                      alignment=\"left\"\r\n                      stat-type=\"/rewardBalance/CREDIT/CENTS\"\r\n                      ><sqm-text><p>Reward Balance</p></sqm-text></sqm-big-stat\r\n                    >\r\n                  </sqm-stat-container>\r\n                  <sqm-referral-table>\r\n                    <sqm-referral-table-user-column></sqm-referral-table-user-column>\r\n                    <sqm-referral-table-rewards-column></sqm-referral-table-rewards-column>\r\n                    <sqm-referral-table-status-column></sqm-referral-table-status-column>\r\n                    <sqm-referral-table-date-column\r\n                      column-title=\"Referred\"\r\n                      date-shown=\"dateReferralStarted\"\r\n                    ></sqm-referral-table-date-column> </sqm-referral-table\r\n                ></sqm-portal-container>\r\n              </template>\r\n            </sqm-router>\r\n          </sqm-divided-layout>\r\n        </sqm-divided-layout>\r\n      </template>\r\n    </sqm-router>\r\n  </sqb-program-section>\r\n  <sqm-portal-footer\r\n    slot=\"footer\"\r\n    support-email=\"support@example.com\"\r\n    terms-link=\"https://example.com\"\r\n    faq-link=\"https://example.com\"\r\n    terms-text=\"Terms And Conditions\"\r\n    faq-text=\"FAQ\"\r\n    show-powered-by=\"true\"\r\n  ></sqm-portal-footer>\r\n</sqm-portal-frame>\r\n";
 
 const portalLeadSubmitTemplate = "<sqm-portal-frame>\r\n  <a slot=\"header\" href=\"/\">\r\n    <sqm-text style=\"height: 60px\">\r\n      <img\r\n        style=\"height: 60px\"\r\n        src=\"https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png\"\r\n      />\r\n    </sqm-text>\r\n  </a>\r\n  <sqb-program-section program-id=\"referral-program\">\r\n    <sqm-router>\r\n      <template\r\n        path=\"/:path(\\bregister\\b|\\bemailVerification\\b|\\blogin\\b|\\bverifyEmail\\b|\\bforgotPassword\\b|\\bresetPassword\\b|\\blogout\\b)\"\r\n      >\r\n        <sqm-graphql-client-provider\r\n          domain=\"https://managed-identity.saasquatch.com\"\r\n        >\r\n          <sqm-hero\r\n            background=\"https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80\"\r\n          >\r\n            <sqm-router>\r\n              <template path=\"/register\">\r\n                <sqm-portal-register>\r\n                  <sqm-name-fields slot=\"formData\"></sqm-name-fields>\r\n                </sqm-portal-register>\r\n              </template>\r\n\r\n              <template path=\"/emailVerification\">\r\n                <sqm-portal-protected-route\r\n                  redirect-to=\"/login\"\r\n                ></sqm-portal-protected-route>\r\n                <sqm-portal-email-verification></sqm-portal-email-verification>\r\n              </template>\r\n\r\n              <template path=\"/login\">\r\n                <sqm-portal-login></sqm-portal-login>\r\n              </template>\r\n\r\n              <template path=\"/verifyEmail\">\r\n                <sqm-portal-verify-email></sqm-portal-verify-email>\r\n              </template>\r\n\r\n              <template path=\"/forgotPassword\">\r\n                <sqm-portal-forgot-password\r\n                  email-label=\"Business Email\"\r\n                ></sqm-portal-forgot-password>\r\n              </template>\r\n\r\n              <template path=\"/resetPassword\">\r\n                <sqm-portal-reset-password\r\n                  confirm-password=\"true\"\r\n                ></sqm-portal-reset-password>\r\n              </template>\r\n              <template path=\"/logout\">\r\n                <sqm-portal-logout next-page=\"/login\"></sqm-portal-logout>\r\n              </template>\r\n            </sqm-router>\r\n          </sqm-hero>\r\n        </sqm-graphql-client-provider>\r\n      </template>\r\n    </sqm-router>\r\n    <sqm-router>\r\n      <template path=\"/:path(\\bactivity\\b|\\beditProfile\\b|\\brefer\\b)?\">\r\n        <sqm-divided-layout\r\n          direction=\"row\"\r\n          style=\"\r\n            border-top: 1px solid #eaeaea;\r\n            border-bottom: 1px solid #eaeaea;\r\n          \"\r\n        >\r\n          <sqm-navigation-sidebar>\r\n            <sqm-navigation-sidebar-item\r\n              path=\"/\"\r\n              icon=\"house\"\r\n              label=\"Dashboard\"\r\n            ></sqm-navigation-sidebar-item>\r\n            <sqm-navigation-sidebar-item\r\n              path=\"/refer\"\r\n              icon=\"inbox\"\r\n              label=\"Submit A Lead\"\r\n            ></sqm-navigation-sidebar-item>\r\n            <sqm-navigation-sidebar-item\r\n              path=\"/activity\"\r\n              icon=\"bar-chart\"\r\n              label=\"Activity\"\r\n            ></sqm-navigation-sidebar-item>\r\n            <sqm-navigation-sidebar-item\r\n              path=\"/editProfile\"\r\n              icon=\"person\"\r\n              label=\"Edit Profile\"\r\n            ></sqm-navigation-sidebar-item>\r\n            <sqm-navigation-sidebar-item\r\n              path=\"/logout\"\r\n              icon=\"box-arrow-right\"\r\n              label=\"Logout\"\r\n            ></sqm-navigation-sidebar-item>\r\n          </sqm-navigation-sidebar>\r\n          <sqm-divided-layout direction=\"column\">\r\n            <sqm-router>\r\n              <template path=\"/\">\r\n                <sqm-portal-protected-route\r\n                  require-email-verification=\"true\"\r\n                  redirect-to=\"/login\"\r\n                  redirect-to-unverified=\"/emailVerification\"\r\n                ></sqm-portal-protected-route>\r\n                <sqb-widget\r\n                  widget-type=\"p/referral-program/w/referrerWidget\"\r\n                  track-loads=\"true\"\r\n                ></sqb-widget>\r\n              </template>\r\n              <template path=\"/editProfile\">\r\n                <sqm-portal-protected-route\r\n                  require-email-verification=\"true\"\r\n                  redirect-to=\"/login\"\r\n                  redirect-to-unverified=\"/emailVerification\"\r\n                ></sqm-portal-protected-route>\r\n                <sqm-portal-container direction=\"column\" gap=\"xxx-large\">\r\n                  <sqm-portal-profile></sqm-portal-profile> </sqm-portal-container\r\n                ><sqm-portal-container direction=\"column\" gap=\"xxx-large\">\r\n                  <sqm-graphql-client-provider\r\n                    domain=\"https://managed-identity.saasquatch.com\"\r\n                  >\r\n                    <sqm-portal-change-password></sqm-portal-change-password>\r\n                  </sqm-graphql-client-provider>\r\n                </sqm-portal-container>\r\n              </template>\r\n              <template path=\"/refer\">\r\n                <sqm-portal-protected-route\r\n                  require-email-verification=\"true\"\r\n                  redirect-to=\"/login\"\r\n                  redirect-to-unverified=\"/emailVerification\"\r\n                ></sqm-portal-protected-route>\r\n                <sqm-referral-iframe></sqm-referral-iframe>\r\n              </template>\r\n              <template path=\"/activity\">\r\n                <sqm-portal-protected-route\r\n                  require-email-verification=\"true\"\r\n                  redirect-to=\"/login\"\r\n                  redirect-to-unverified=\"/emailVerification\"\r\n                ></sqm-portal-protected-route>\r\n                <sqm-portal-container\r\n                  direction=\"column\"\r\n                  padding=\"xxx-large\"\r\n                  gap=\"xxx-large\"\r\n                >\r\n                  <sqm-text> <h1>Activity</h1></sqm-text>\r\n                  <sqm-stat-container space=\"xxxx-large\"\r\n                    ><sqm-big-stat\r\n                      flex-reverse=\"true\"\r\n                      alignment=\"left\"\r\n                      stat-type=\"/referralsCount\"\r\n                      ><sqm-text><p>Referrals</p></sqm-text></sqm-big-stat\r\n                    >\r\n                    <sqm-big-stat\r\n                      flex-reverse=\"true\"\r\n                      alignment=\"left\"\r\n                      stat-type=\"/rewardsCountFiltered/AVAILABLE\"\r\n                      ><sqm-text><p>Rewards Earned</p></sqm-text></sqm-big-stat\r\n                    >\r\n                    <sqm-big-stat\r\n                      flex-reverse=\"true\"\r\n                      alignment=\"left\"\r\n                      stat-type=\"/rewardBalance/CREDIT/CENTS\"\r\n                      ><sqm-text><p>Reward Balance</p></sqm-text></sqm-big-stat\r\n                    >\r\n                  </sqm-stat-container>\r\n                  <sqm-referral-table>\r\n                    <sqm-referral-table-user-column></sqm-referral-table-user-column>\r\n                    <sqm-referral-table-rewards-column></sqm-referral-table-rewards-column>\r\n                    <sqm-referral-table-status-column></sqm-referral-table-status-column>\r\n                    <sqm-referral-table-date-column\r\n                      column-title=\"Referred\"\r\n                      date-shown=\"dateReferralStarted\"\r\n                    ></sqm-referral-table-date-column> </sqm-referral-table\r\n                ></sqm-portal-container>\r\n              </template>\r\n            </sqm-router>\r\n          </sqm-divided-layout>\r\n        </sqm-divided-layout>\r\n      </template>\r\n    </sqm-router>\r\n  </sqb-program-section>\r\n  <sqm-portal-footer\r\n    slot=\"footer\"\r\n    support-email=\"support@example.com\"\r\n    terms-link=\"https://example.com\"\r\n    faq-link=\"https://example.com\"\r\n    terms-text=\"Terms And Conditions\"\r\n    faq-text=\"FAQ\"\r\n    show-powered-by=\"true\"\r\n  ></sqm-portal-footer>\r\n</sqm-portal-frame>\r\n";
@@ -24049,7 +24553,7 @@ const ReferralIframeReadme = "# sqm-referral-iframe\r\n\r\n\r\n\r\n<!-- Auto Gen
 
 const ForgotPasswordReadme = "# sqm-portal-forgot-password\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property      | Attribute      | Description | Type                                                                                                                                                                     | Default                    |\r\n| ------------- | -------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------- |\r\n| `demoData`    | --             |             | `{ states?: { error: string; loading: boolean; success: boolean; }; content?: { secondaryButton: any; messageSlot: any; emailLabel?: string; submitLabel?: string; }; }` | `undefined`                |\r\n| `emailLabel`  | `email-label`  |             | `string`                                                                                                                                                                 | `\"Email\"`                  |\r\n| `submitLabel` | `submit-label` |             | `string`                                                                                                                                                                 | `\"Request Password Reset\"` |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-forgot-password --> sqm-form-message\r\n  style sqm-portal-forgot-password fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
 
-const RegisterReadme = "# sqm-portal-register\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property                   | Attribute                    | Description | Type                                                                                                                                                                                                                                                                                                                                                                                           | Default              |\n| -------------------------- | ---------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |\n| `confirmPassword`          | `confirm-password`           |             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                      | `false`              |\n| `confirmPasswordLabel`     | `confirm-password-label`     |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"Confirm Password\"` |\n| `demoData`                 | --                           |             | `{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; validationState?: FormState; enablePasswordValidation?: boolean; }; refs?: { formRef: any; }; content?: { formData?: any; passwordField?: any; secondaryButton?: any; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel: string; }; }` | `undefined`          |\n| `emailLabel`               | `email-label`                |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"Email\"`            |\n| `enablePasswordValidation` | `enable-password-validation` |             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                      | `true`               |\n| `hideInputs`               | `hide-inputs`                |             | `boolean`                                                                                                                                                                                                                                                                                                                                                                                      | `false`              |\n| `loginLabel`               | `login-label`                |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"Sign in\"`          |\n| `nextPage`                 | `next-page`                  |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"/\"`                |\n| `pageLabel`                | `page-label`                 |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"Register\"`         |\n| `passwordLabel`            | `password-label`             |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"Password\"`         |\n| `submitLabel`              | `submit-label`               |             | `string`                                                                                                                                                                                                                                                                                                                                                                                       | `\"Register\"`         |\n\n\n## Dependencies\n\n### Used by\n\n - [sqm-stencilbook](../sqm-stencilbook)\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n- [sqm-password-field](../sqm-password-field)\n\n### Graph\n```mermaid\ngraph TD;\n  sqm-portal-register --> sqm-form-message\n  sqm-portal-register --> sqm-password-field\n  sqm-stencilbook --> sqm-portal-register\n  style sqm-portal-register fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
+const 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 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";
 
@@ -24057,7 +24561,7 @@ const ResetPasswordReadme = "# sqm-portal-reset-password\r\n\r\n\r\n\r\n<!-- Aut
 
 const EmailVerificationReadme = "# sqm-portal-email-verification\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property                  | Attribute                   | Description | Type                                                                                                                                                                                        | Default                                                                                           |\r\n| ------------------------- | --------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |\r\n| `demoData`                | --                          |             | `{ states?: { error: string; loading: boolean; success: boolean; }; content?: { email: string; verifyMessage: string; emailVerificationHeader: string; resendEmailButtonText: string; }; }` | `undefined`                                                                                       |\r\n| `emailVerificationHeader` | `email-verification-header` |             | `string`                                                                                                                                                                                    | `\"Verify your email\"`                                                                             |\r\n| `resendEmailButtonText`   | `resend-email-button-text`  |             | `string`                                                                                                                                                                                    | `\"Re-send Email\"`                                                                                 |\r\n| `verifyMessage`           | `verify-message`            |             | `string`                                                                                                                                                                                    | `\"A verification email was sent to {email}. Please verify your email to continue to the portal.\"` |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-email-verification --> sqm-form-message\r\n  style sqm-portal-email-verification fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
 
-const EmailVerifiedReadme = "# sqm-portal-verify-email\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property   | Attribute   | Description | Type                                                                                                 | Default     |\r\n| ---------- | ----------- | ----------- | ---------------------------------------------------------------------------------------------------- | ----------- |\r\n| `demoData` | --          |             | `{ states?: { error: string; loading: boolean; verified: boolean; }; data?: { oobCode: string; }; }` | `undefined` |\r\n| `nextPage` | `next-page` |             | `string`                                                                                             | `\"/\"`       |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n  sqm-portal-verify-email --> sqm-form-message\r\n  style sqm-portal-verify-email fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
+const EmailVerifiedReadme = "# sqm-portal-verify-email\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property   | Attribute   | Description | Type                                                                                                 | Default     |\n| ---------- | ----------- | ----------- | ---------------------------------------------------------------------------------------------------- | ----------- |\n| `demoData` | --          |             | `{ states?: { error: string; loading: boolean; verified: boolean; }; data?: { oobCode: string; }; }` | `undefined` |\n| `nextPage` | `next-page` |             | `string`                                                                                             | `\"/\"`       |\n\n\n## Dependencies\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n\n### Graph\n```mermaid\ngraph TD;\n  sqm-portal-verify-email --> sqm-form-message\n  style sqm-portal-verify-email fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
 
 const PortalTemplates_stories = {
   title: "Templates / Portal",
@@ -24273,12 +24777,12 @@ const PoweredByImg = /*#__PURE__*/Object.freeze({
   CustomWidthAndHeight: CustomWidthAndHeight
 });
 
-const scenario$5 = "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$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 PortalFooter_stories = {
   title: "Portal Footer",
   parameters: {
-    scenario: scenario$5,
+    scenario: scenario$7,
   },
 };
 const defaultProps$9 = {
@@ -24307,12 +24811,12 @@ const PortalFooter = /*#__PURE__*/Object.freeze({
   FooterNoPoweredBy: FooterNoPoweredBy
 });
 
-const scenario$6 = "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$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 Hero_stories = {
   title: "Hero Layout",
   parameters: {
-    scenario: scenario$6,
+    scenario: scenario$8,
   },
 };
 const LoginOneColumn = () => {
@@ -24489,12 +24993,12 @@ const Hero = /*#__PURE__*/Object.freeze({
   TwoColumnLoginWithImgElement: TwoColumnLoginWithImgElement
 });
 
-const scenario$7 = "@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$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 ReferralIframe_stories = {
   title: "Referral Iframe",
   parameters: {
-    scenario: scenario$7,
+    scenario: scenario$9,
   },
 };
 const props = {
@@ -24525,12 +25029,12 @@ const ReferralIframe$1 = /*#__PURE__*/Object.freeze({
   ReferralIframeError: ReferralIframeError
 });
 
-const scenario$8 = "@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$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 NameFields_stories = {
   title: "Name Fields",
   parameters: {
-    scenario: scenario$8,
+    scenario: scenario$a,
   },
 };
 const props$1 = {
@@ -27148,7 +27652,9 @@ const CucumberAddon = ({ story }, children) => {
     // No scenario or invalid. Ignoring.
   }
   return (h("div", null,
-    result && h("pre", { innerHTML: result.value }),
+    h("details", null,
+      h("summary", null, "Specs"),
+      result && h("pre", { innerHTML: result.value })),
     children));
 };
 
@@ -27185,7 +27691,8 @@ const stories = [
   ReferralTableRewardsCell$1,
   UserName,
   PasswordField,
-  TaskCard,
+  TaskCard$1,
+  TaskCardProgressBar,
   PortalTemplates,
   ProgramMenu$1,
   PoweredByImg,
@@ -27194,6 +27701,7 @@ const stories = [
   ReferralIframe$1,
   NameFields$1,
   UseRewardExchangeList,
+  UseTaskCard,
 ];
 const StencilStorybook = class {
   constructor(hostRef) {
@@ -27233,6 +27741,77 @@ const TableRow = class {
   }
 };
 
+const TaskCard$2 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ignored = true;
+    /**
+     * @uiName Reward Amount
+     */
+    this.points = 0;
+    /**
+     * @uiName Reward Unit
+     */
+    this.rewardUnit = "Points";
+    /**
+     * @uiName Title Text
+     */
+    this.cardTitle = "Title Text";
+    /**
+     * @uiName Description Text
+     */
+    this.description = "Description Text";
+    /**
+     * @uiName Goal Repeatable
+     */
+    this.repeatable = false;
+    /**
+     * @uiName Show Progress Bar
+     */
+    this.showProgressBar = false;
+    /**
+     * @uiName Goal Progress Source
+     */
+    this.progressSource = "";
+    /**
+     * @uiName Goal Completion Number
+     */
+    this.goal = 1;
+    /**
+     * @uiName Progress Bar Steps
+     */
+    this.steps = false;
+    /**
+     * @uiName Show Goal Expiry
+     */
+    this.showExpire = false;
+    /**
+     * @uiName CTA Button Text
+     */
+    this.buttonText = "Complete Action";
+    /**
+     * @uiName CTA Button Link
+     */
+    this.buttonLink = "https://example.com/";
+    /**
+     * Select what type of stat to display for the goal. Manual paths are also supported.
+     *
+     * @uiWidget StatTypeSelectWidget
+     * @uiName Stat Type
+     * @uiOptions {"version": 1.1}
+     */
+    this.statType = "/programGoals/count/Referral-Started%2Freferrals";
+    h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const { props } = j$1() ? useDemoBigStat(this) : useBigStat(this);
+    const { value, statvalue } = props;
+    console.log(props, j$1());
+    return (h(TaskCardView, Object.assign({}, getProps(this), { progress: value, loading: value === undefined })));
+  }
+};
+
 const debug$2 = browser("sq:global");
 const textStyles = `
   sqm-text {
@@ -27358,4 +27937,4 @@ function useUserNameDemo(props) {
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
 
-export { DividedLayout as sqm_divided_layout, EditProfile as sqm_edit_profile, FormMessage as sqm_form_message, SqmHookStoryContainer as sqm_hook_story_container, NavigationMenu as sqm_navigation_menu, PortalPasswordField as sqm_password_field, PortalChangePassword as sqm_portal_change_password, PortalFrame as sqm_portal_frame, PortalLogin as sqm_portal_login, PortalRegister as sqm_portal_register, ProgramMenu as sqm_program_menu, SqmReferralIframe as sqm_referral_iframe, ReferralTable as sqm_referral_table, ReferralTableCell as sqm_referral_table_cell, ReferralTableDateCell as sqm_referral_table_date_cell, ReferralTableRewardsCell as sqm_referral_table_rewards_cell, ReferralTableStatusCell as sqm_referral_table_status_cell, ReferralTableUserCell as sqm_referral_table_user_cell, SqmRewardExchangeList as sqm_reward_exchange_list, SqmRouter as sqm_router, ShareButton as sqm_share_button, ShareLink as sqm_share_link, StencilStorybook as sqm_stencilbook, TableCell$1 as sqm_table_cell, TableRow as sqm_table_row, Text as sqm_text, UserName$1 as sqm_user_name };
+export { DividedLayout as sqm_divided_layout, EditProfile as sqm_edit_profile, FormMessage as sqm_form_message, SqmHookStoryContainer as sqm_hook_story_container, NavigationMenu as sqm_navigation_menu, PortalPasswordField as sqm_password_field, PortalChangePassword as sqm_portal_change_password, PortalFrame as sqm_portal_frame, PortalLogin as sqm_portal_login, PortalRegister as sqm_portal_register, ProgramMenu as sqm_program_menu, SqmReferralIframe as sqm_referral_iframe, ReferralTable as sqm_referral_table, ReferralTableCell as sqm_referral_table_cell, ReferralTableDateCell as sqm_referral_table_date_cell, ReferralTableRewardsCell as sqm_referral_table_rewards_cell, ReferralTableStatusCell as sqm_referral_table_status_cell, ReferralTableUserCell as sqm_referral_table_user_cell, SqmRewardExchangeList as sqm_reward_exchange_list, SqmRouter as sqm_router, ShareButton as sqm_share_button, ShareLink as sqm_share_link, StencilStorybook as sqm_stencilbook, TableCell$1 as sqm_table_cell, TableRow as sqm_table_row, TaskCard$2 as sqm_task_card, Text as sqm_text, UserName$1 as sqm_user_name };